UI: Upgrade to Ember 4.12

ui/.ember-cli

@@ -9,8 +9,8 @@
   "output-path": "../http/web_ui",
 
   /**
-  Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
-  rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+    Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+    rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
   */
   "isTypeScriptProject": false
 }

ui/.eslintrc.js

@@ -8,13 +8,14 @@
 'use strict';
 
 module.exports = {
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   root: true,
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 'latest',
     sourceType: 'module',
-    ecmaFeatures: {
-      legacyDecorators: true,
+    requireConfigFile: false,
+    babelOptions: {
+      plugins: [['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }]],
     },
   },
   plugins: ['ember'],
@@ -45,6 +46,7 @@ module.exports = {
       files: [
         './.eslintrc.js',
         './.prettierrc.js',
+        './.stylelintrc.js',
         './.template-lintrc.js',
         './ember-cli-build.js',
         './testem.js',
@@ -60,13 +62,7 @@ module.exports = {
         browser: false,
         node: true,
       },
-      plugins: ['node'],
-      extends: ['plugin:node/recommended'],
-      rules: {
-        // this can be removed once the following is fixed
-        // https://github.com/mysticatea/eslint-plugin-node/issues/77
-        'node/no-unpublished-require': 'off',
-      },
+      extends: ['plugin:n/recommended'],
     },
     {
       // test files

ui/.prettierrc.js

@@ -17,5 +17,11 @@ module.exports = {
         printWidth: 125,
       },
     },
+    {
+      files: '*.{js,ts}',
+      options: {
+        singleQuote: true,
+      },
+    },
   ],
 };

ui/.stylelintignore

@@ -0,0 +1,8 @@
+# unconventional files
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# addons
+/.node_modules.ember-try/

ui/.stylelintrc.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+};

ui/.template-lintrc.js

@@ -46,6 +46,7 @@ module.exports = {
       allow: ['supported-auth-backends'],
     },
     'require-input-label': 'off',
+    'no-array-prototype-extensions': 'off',
   },
   ignore: ['lib/story-md', 'tests/**'],
   // ember language server vscode extension does not currently respect the ignore field

ui/app/components/auth-form.js

@@ -219,6 +219,8 @@ export default Component.extend(DEFAULTS, {
             };
           })
         );
+        // without unloading the records there will be an issue where all methods set to list when unauthenticated will appear for all namespaces
+        // if possible, it would be more reliable to add a namespace attr to the model so we could filter against the current namespace rather than unloading all
         next(() => {
           store.unloadAll('auth-method');
         });

ui/app/components/database-role-edit.js

@@ -62,7 +62,7 @@ export default class DatabaseRoleEdit extends Component {
   delete() {
     const secret = this.args.model;
     const backend = secret.backend;
-    secret
+    return secret
       .destroyRecord()
       .then(() => {
         try {
@@ -89,7 +89,7 @@ export default class DatabaseRoleEdit extends Component {
       const path = roleSecret.type === 'static' ? 'static-roles' : 'roles';
       roleSecret.set('path', path);
     }
-    roleSecret
+    return roleSecret
       .save()
       .then(() => {
         try {
@@ -110,7 +110,7 @@ export default class DatabaseRoleEdit extends Component {
   rotateRoleCred(id) {
     const backend = this.args.model?.backend;
     const adapter = this.store.adapterFor('database/credential');
-    adapter
+    return adapter
       .rotateRoleCredentials(backend, id)
       .then(() => {
         this.flashMessages.success(`Success: Credentials for ${id} role were rotated`);

ui/app/components/identity/edit-form.js

@@ -73,12 +73,11 @@ export default Component.extend({
   ).drop(),
 
   willDestroy() {
-    this._super(...arguments);
     const model = this.model;
-    if (!model) return;
-    if ((model.get('isDirty') && !model.isDestroyed) || !model.isDestroying) {
+    if (model && model.get('isDirty') && !model.isDestroyed && !model.isDestroying) {
       model.rollbackAttributes();
     }
+    this._super(...arguments);
   },
 
   actions: {

ui/app/components/mfa/mfa-login-enforcement-form.js

@@ -65,6 +65,8 @@ export default class MfaLoginEnforcementForm extends Component {
       const targetArray = await this.args.model[key];
       const targets = targetArray.map((value) => ({ label, key, value }));
       this.targets.addObjects(targets);
+      // eslint-disable-next-line no-self-assign
+      this.targets = this.targets;
     }
   }
   async resetTargetState() {

ui/app/components/mount-backend-form.js

@@ -35,12 +35,17 @@ export default class MountBackendForm extends Component {
   @tracked errorMessage = '';
 
   willDestroy() {
-    // if unsaved, we want to unload so it doesn't show up in the auth mount list
-    super.willDestroy(...arguments);
-    if (this.args.mountModel) {
-      const method = this.args.mountModel.isNew ? 'unloadRecord' : 'rollbackAttributes';
-      this.args.mountModel[method]();
+    if (this.args?.mountModel) {
+      try {
+        // if unsaved, we want to unload so it doesn't show up in the auth mount list
+        const method = this.args.mountModel.isNew ? 'unloadRecord' : 'rollbackAttributes';
+        this.args.mountModel[method]();
+      } catch (e) {
+        // In component test the store is torn down before willDestroy is called, causing error
+        console.debug('mountModel rollback failed with error:', e.message); // eslint-disable-line
+      }
     }
+    super.willDestroy(...arguments);
   }
 
   checkPathChange(type) {

ui/app/components/role-edit.js

@@ -26,10 +26,10 @@ export default Component.extend(FocusOnInsertMixin, {
   requestInFlight: or('model.isLoading', 'model.isReloading', 'model.isSaving'),
 
   willDestroyElement() {
-    this._super(...arguments);
-    if (this.model && this.model.isError) {
+    if (this.model && this.model.isError && !this.model.isDestroyed && !this.model.isDestroying) {
       this.model.rollbackAttributes();
     }
+    this._super(...arguments);
   },
 
   waitForKeyUp: task(function* () {

ui/app/components/secret-edit.js

@@ -35,14 +35,13 @@ export default class SecretEdit extends Component {
   @service store;
 
   @tracked secretData = null;
-  @tracked isV2 = false;
   @tracked codemirrorString = null;
 
   // fired on did-insert from render modifier
   @action
   createKvData(elem, [model]) {
-    if (!model.secretData && model.selectedVersion) {
-      this.isV2 = true;
+    if (this.isV2) {
+      // pre-fill secret data from selected version
       model.secretData = model.belongsTo('selectedVersion').value().secretData;
     }
     this.secretData = KVObject.create({ content: [] }).fromJSON(model.secretData);
@@ -97,6 +96,9 @@ export default class SecretEdit extends Component {
   @or('model.isLoading', 'model.isReloading', 'model.isSaving') requestInFlight;
   @or('requestInFlight', 'model.isFolder', 'model.flagsIsInvalid') buttonDisabled;
 
+  get isV2() {
+    return !!this.args.model?.selectedVersion;
+  }
   get modelForData() {
     const { model } = this.args;
     if (!model) return null;

ui/app/components/transform-edit-base.js

@@ -44,10 +44,10 @@ export default Component.extend(FocusOnInsertMixin, {
   },
 
   willDestroyElement() {
-    this._super(...arguments);
-    if (this.model && this.model.isError) {
+    if (this.model && this.model.isError && !this.model.isDestroyed && !this.model.isDestroying) {
       this.model.rollbackAttributes();
     }
+    this._super(...arguments);
   },
 
   transitionToRoute() {

ui/app/components/transit-edit.js

@@ -26,10 +26,10 @@ export default Component.extend(FocusOnInsertMixin, {
   requestInFlight: or('key.isLoading', 'key.isReloading', 'key.isSaving'),
 
   willDestroyElement() {
-    this._super(...arguments);
-    if (this.key && this.key.isError) {
+    if (this.key && this.key.isError && !this.key.isDestroyed && !this.key.isDestroying) {
       this.key.rollbackAttributes();
     }
+    this._super(...arguments);
   },
 
   waitForKeyUp: task(function* () {

ui/app/initializers/deprecation-filter.js

@@ -10,10 +10,10 @@ export function initialize() {
   registerDeprecationHandler((message, options, next) => {
     // filter deprecations that are scheduled to be removed in a specific version
     // when upgrading or addressing deprecation warnings be sure to update this or remove if not needed
-    if (options?.until !== '5.0.0') {
-      next(message, options);
+    if (options?.until.includes('5.0')) {
+      return;
     }
-    return;
+    next(message, options);
   });
 }
 

ui/app/lib/route-paths.js

@@ -6,6 +6,7 @@
 export const INIT = 'vault.cluster.init';
 export const UNSEAL = 'vault.cluster.unseal';
 export const AUTH = 'vault.cluster.auth';
+export const LOGOUT = 'vault.cluster.logout';
 export const REDIRECT = 'vault.cluster.redirect';
 export const CLUSTER = 'vault.cluster';
 export const CLUSTER_INDEX = 'vault.cluster.index';

ui/app/macros/maybe-query-record.js

@@ -7,6 +7,23 @@ import { computed } from '@ember/object';
 import ObjectProxy from '@ember/object/proxy';
 import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';
 import { resolve } from 'rsvp';
+/**
+ * after upgrading to Ember 4.12 a secrets test was erroring with "Cannot create a new tag for `<model::capabilities:undefined>` after it has been destroyed"
+ * see this GH issue for information on the fix https://github.com/emberjs/ember.js/issues/16541#issuecomment-382403523
+ */
+ObjectProxy.reopen({
+  unknownProperty(key) {
+    if (this.isDestroying || this.isDestroyed) {
+      return;
+    }
+
+    if (this.content && (this.content.isDestroying || this.content.isDestroyed)) {
+      return;
+    }
+
+    return this._super(key);
+  },
+});
 
 export function maybeQueryRecord(modelName, options = {}, ...keys) {
   return computed(...keys, 'store', {

ui/app/mixins/model-boundary-route.js

@@ -56,6 +56,11 @@ export default Mixin.create({
       );
       return;
     }
+    if (this.store.isDestroyed || this.store.isDestroying) {
+      // Prevent unload attempt after test teardown, resulting in test failure
+      return;
+    }
+
     if (modelType) {
       this.store.unloadAll(modelType);
     }

ui/app/mixins/unload-model-route.js

@@ -19,7 +19,6 @@ export default Mixin.create({
       return;
     }
     removeRecord(this.store, model);
-    model.destroy();
     // it's important to unset the model on the controller since controllers are singletons
     this.controller.set(modelPath, null);
   },

ui/app/mixins/unsaved-model-route.js

@@ -4,6 +4,7 @@
  */
 
 import Mixin from '@ember/object/mixin';
+import Ember from 'ember';
 
 // this mixin relies on `unload-model-route` also being used
 export default Mixin.create({
@@ -15,6 +16,7 @@ export default Mixin.create({
       }
       if (model.hasDirtyAttributes) {
         if (
+          Ember.testing ||
           window.confirm(
             'You have unsaved changes. Navigating away will discard these changes. Are you sure you want to discard your changes?'
           )