UI: upgrade Ember to 5.4 (#26708)

changelog/26708.txt

@@ -0,0 +1,3 @@
+```release-note:change
+ui: Upgrade Ember to version 5.4
+```

ui/.eslintignore

@@ -1,6 +1,5 @@
 # unconventional js
 /blueprints/*/files/
-/vendor/
 
 # compiled output
 /dist/
@@ -15,7 +14,6 @@
 /coverage/
 !.*
 .*/
-.eslintcache
 
 # ember-try
 /.node_modules.ember-try/

ui/.eslintrc.js

@@ -68,6 +68,9 @@ module.exports = {
       // test files
       files: ['tests/**/*-test.{js,ts}'],
       extends: ['plugin:qunit/recommended'],
+      rules: {
+        'qunit/require-expect': 'off',
+      },
     },
     {
       files: ['**/*.ts'],

ui/.gitignore

@@ -1,27 +1,23 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
 # compiled output
 /dist/
-/tmp/
+/declarations/
 
 # dependencies
-/bower_components/
 /node_modules/
 
 # misc
 /.sass-cache
+/.env*
+/.pnp*
 /.eslintcache
-/connect.lock
 /coverage/
-/libpeerconnection.log
 /npm-debug.log*
 /testem.log
 /yarn-error.log
 package-lock.json
 
 # ember-try
 /.node_modules.ember-try/
-/bower.json.ember-try
 /npm-shrinkwrap.json.ember-try
 /package.json.ember-try
 /package-lock.json.ember-try

ui/.prettierignore

@@ -1,25 +1,13 @@
 # unconventional js
 /blueprints/*/files/
-/vendor/
 
 # compiled output
 /dist/
-/tmp/
-
-# dependencies
-/bower_components/
-/node_modules/
 
 # misc
 /coverage/
 !.*
-.eslintcache
-.lint-todo/
+.*/
 
 # ember-try
 /.node_modules.ember-try/
-/bower.json.ember-try
-/npm-shrinkwrap.json.ember-try
-/package.json.ember-try
-/package-lock.json.ember-try
-/yarn.lock.ember-try

ui/.watchmanconfig

@@ -1,3 +1,3 @@
 {
-  "ignore_dirs": ["tmp", "dist"]
+  "ignore_dirs": ["dist"]
 }

ui/README.md

@@ -28,6 +28,7 @@ This README outlines the details of collaborating on this Ember application.
 
 | Vault Version | Ember Version |
 | ------------- | ------------- |
+| 1.17.x        | 5.4.2         |
 | 1.15.x        | 4.12.0        |
 | 1.14.x        | 4.4.0         |
 | 1.13.x        | 4.4.0         |

ui/app/components/dashboard/quick-actions-card.hbs

@@ -53,6 +53,7 @@
 
           <SearchSelect
             class="is-flex-grow-1"
+            @ariaLabel={{this.searchSelectParams.title}}
             @selectLimit="1"
             @models={{array this.searchSelectParams.model}}
             @placeholder={{this.searchSelectParams.placeholder}}

ui/app/helpers/-date-base.js

@@ -27,9 +27,12 @@ export default Helper.extend({
        * as the run loop queue is never clear so tests will stay locked waiting
        * for queue to clear.
        */
-      this.intervalTimer = setTimeout(() => {
-        run(() => this.recompute());
-      }, parseInt(interval, 10));
+      this.intervalTimer = setTimeout(
+        () => {
+          run(() => this.recompute());
+        },
+        parseInt(interval, 10)
+      );
     }
   },
 

ui/app/initializers/deprecation-filter.js

@@ -10,7 +10,7 @@ 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.includes('5.0')) {
+    if (options?.until.includes('5.0') && options?.id.startsWith('ember-data')) {
       return;
     }
     next(message, options);

ui/app/templates/application.hbs

@@ -7,4 +7,5 @@
   <div class="page-container">
     {{outlet}}
   </div>
+  <BasicDropdownWormhole />
 </Sidebar::Frame>

ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs

@@ -35,6 +35,7 @@
       {{! component only computes inputValue on init -- ensure Ember Data hasMany promise has resolved }}
       {{#if @model.mfa_methods.isFulfilled}}
         <SearchSelect
+          @id="methods"
           @placeholder="Type to search for existing MFA methods"
           @inputValue={{map-by "id" @model.mfa_methods}}
           @shouldRenderName={{true}}
@@ -114,6 +115,7 @@
           />
         {{else}}
           <SearchSelect
+            @id="existing-targets"
             @placeholder="Search for an existing target"
             @options={{this.searchSelect.options}}
             @parentManageSelected={{this.searchSelect.selected}}

ui/config/ember-cli-update.json

@@ -3,7 +3,7 @@
   "packages": [
     {
       "name": "ember-cli",
-      "version": "4.12.1",
+      "version": "5.4.2",
       "blueprints": [
         {
           "name": "app",

ui/ember-cli-build.js

@@ -19,9 +19,10 @@ const appConfig = {
     serviceWorkerScope: config.serviceWorkerScope,
     skipWaitingOnMessage: true,
   },
+  babel: {
+    plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
+  },
   svgJar: {
-    //optimize: false,
-    //paths: [],
     optimizer: {},
     sourceDirs: ['public'],
     rootURL: '/ui/',

ui/lib/core/addon/components/search-select.js

@@ -12,6 +12,7 @@ import { resolve } from 'rsvp';
 import { filterOptions, defaultMatcher } from 'ember-power-select/utils/group-utils';
 import { removeFromArray } from 'vault/helpers/remove-from-array';
 import { addToArray } from 'vault/helpers/add-to-array';
+import { assert } from '@ember/debug';
 /**
  * @module SearchSelect
  * The `SearchSelect` is an implementation of the [ember-power-select](https://github.com/cibernox/ember-power-select) used for form elements where options come dynamically from the API.
@@ -74,6 +75,14 @@ export default class SearchSelect extends Component {
   @tracked dropdownOptions = []; // options that will render in dropdown, updates as selections are added/discarded
   @tracked allOptions = []; // both selected and unselected options, used for wildcard filter
 
+  constructor() {
+    super(...arguments);
+    assert(
+      'one of @id, @label, or @ariaLabel must be passed to search-select component',
+      this.args.id || this.args.label || this.args.ariaLabel
+    );
+  }
+
   get hidePowerSelect() {
     return this.selectedOptions.length >= this.args.selectLimit;
   }

ui/lib/core/addon/utils/client-count-utils.ts

@@ -144,10 +144,13 @@ export const formatByNamespace = (namespaceArray: NamespaceObject[]) => {
 // when querying historical data the response will always contain the latest client type keys because the activity log is
 // constructed based on the version of Vault the user is on (key values will be 0)
 export const destructureClientCounts = (verboseObject: Counts | ByNamespaceClients) => {
-  return CLIENT_TYPES.reduce((newObj: Record<ClientTypes, Counts[ClientTypes]>, clientType: ClientTypes) => {
-    newObj[clientType] = verboseObject[clientType];
-    return newObj;
-  }, {} as Record<ClientTypes, Counts[ClientTypes]>);
+  return CLIENT_TYPES.reduce(
+    (newObj: Record<ClientTypes, Counts[ClientTypes]>, clientType: ClientTypes) => {
+      newObj[clientType] = verboseObject[clientType];
+      return newObj;
+    },
+    {} as Record<ClientTypes, Counts[ClientTypes]>
+  );
 };
 
 export const sortMonthsByTimestamp = (monthsArray: ActivityMonthBlock[] | EmptyActivityMonthBlock[]) => {
@@ -173,19 +176,22 @@ export const namespaceArrayToObject = (
       // mounts_by_key is is used to filter further in a namespace and get monthly activity by mount
       // it's an object inside the namespace block where the keys are mount paths
       // and the values include new and total client counts for that mount in that month
-      const mounts_by_key = ns.mounts.reduce((mountObj: { [key: string]: MountByKey }, mount) => {
-        const newMountClients = newNsClients.mounts.find((m) => m.label === mount.label);
-
-        if (newMountClients) {
-          mountObj[mount.label] = {
-            ...mount,
-            timestamp,
-            month,
-            new_clients: { month, timestamp, ...newMountClients },
-          };
-        }
-        return mountObj;
-      }, {} as { [key: string]: MountByKey });
+      const mounts_by_key = ns.mounts.reduce(
+        (mountObj: { [key: string]: MountByKey }, mount) => {
+          const newMountClients = newNsClients.mounts.find((m) => m.label === mount.label);
+
+          if (newMountClients) {
+            mountObj[mount.label] = {
+              ...mount,
+              timestamp,
+              month,
+              new_clients: { month, timestamp, ...newMountClients },
+            };
+          }
+          return mountObj;
+        },
+        {} as { [key: string]: MountByKey }
+      );
 
       nsObject[ns.label] = {
         ...destructureClientCounts(ns),

ui/lib/core/index.js

@@ -7,6 +7,11 @@
 
 module.exports = {
   name: require('./package').name,
+
+  babel: {
+    plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
+  },
+
   isDevelopingAddon() {
     return true;
   },

ui/lib/kubernetes/addon/components/page/overview.hbs

@@ -26,6 +26,7 @@
       <div class="has-top-margin-m is-flex">
         <SearchSelect
           class="is-flex-grow-1"
+          @ariaLabel="Role"
           @placeholder="Type to find a role..."
           @disallowNewItems={{true}}
           @options={{this.roleOptions}}

ui/lib/kubernetes/index.js

@@ -14,6 +14,9 @@ module.exports = buildEngine({
   lazyLoading: {
     enabled: false,
   },
+  babel: {
+    plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
+  },
   isDevelopingAddon() {
     return true;
   },

ui/lib/kv/index.js

@@ -16,6 +16,10 @@ module.exports = buildEngine({
     enabled: false,
   },
 
+  babel: {
+    plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
+  },
+
   isDevelopingAddon() {
     return true;
   },

ui/lib/kv/package.json

@@ -5,6 +5,7 @@
     "ember-engine"
   ],
   "dependencies": {
+    "ember-auto-import": "*",
     "ember-cli-htmlbars": "*",
     "ember-cli-babel": "*",
     "ember-concurrency": "*",
@@ -16,4 +17,4 @@
       "../core"
     ]
   }
-}
+}

ui/lib/ldap/addon/components/page/overview.hbs

@@ -51,6 +51,7 @@
         <div class="has-top-margin-m is-flex">
           <SearchSelect
             class="is-flex-1"
+            @ariaLabel="Role"
             @placeholder="Select a role"
             @disallowNewItems={{true}}
             @options={{@roles}}

ui/lib/ldap/index.js

@@ -16,6 +16,10 @@ module.exports = buildEngine({
     enabled: false,
   }),
 
+  babel: {
+    plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
+  },
+
   isDevelopingAddon() {
     return true;
   },

ui/lib/pki/addon/components/page/pki-issuer-rotate-root.ts

@@ -108,14 +108,14 @@ export default class PagePkiIssuerRotateRootComponent extends Component<Args> {
     const endpoint = `/v1/${this.secretMountPath.currentPath}/issuer/${this.args.newRootModel.issuerId}/${format}`;
     const adapter = this.store.adapterFor('application');
     try {
-      return adapter
-        .rawRequest(endpoint, 'GET', { unauthenticated: true })
-        .then(function (response: Response) {
-          if (format === 'der') {
-            return response.blob();
-          }
-          return response.text();
-        });
+      return adapter.rawRequest(endpoint, 'GET', { unauthenticated: true }).then(function (
+        response: Response
+      ) {
+        if (format === 'der') {
+          return response.blob();
+        }
+        return response.text();
+      });
     } catch (e) {
       return null;
     }

ui/lib/pki/addon/components/page/pki-overview.hbs

@@ -32,6 +32,7 @@
     <div class="has-top-margin-m is-flex">
       <SearchSelect
         class="is-flex-grow-1"
+        @ariaLabel="Role"
         @selectLimit="1"
         @models={{array "pki/role"}}
         @backend={{@engine.id}}
@@ -58,6 +59,7 @@
     <div class="has-top-margin-m {{unless this.certificateValue 'is-flex'}}">
       <SearchSelect
         class="is-flex-grow-1"
+        @ariaLabel="Certificate serial number"
         @selectLimit="1"
         @models={{array "pki/certificate/base"}}
         @backend={{@engine.id}}
@@ -83,6 +85,7 @@
     <div class="has-top-margin-m is-flex">
       <SearchSelect
         class="is-flex-grow-1"
+        @ariaLabel="Issuer name or ID"
         @selectLimit="1"
         @models={{array "pki/issuer"}}
         @backend={{@engine.id}}

ui/lib/pki/index.js

@@ -11,6 +11,9 @@ module.exports = buildEngine({
   lazyLoading: {
     enabled: false,
   },
+  babel: {
+    plugins: [require.resolve('ember-concurrency/async-arrow-task-transform')],
+  },
   isDevelopingAddon() {
     return true;
   },