UI: Dependency bumps 1.17.x

changelog/26346.txt

@@ -0,0 +1,3 @@
+```release-note:change
+ui: Update dependencies including D3 libraries
+```

ui/.template-lintrc.js

@@ -15,6 +15,11 @@ module.exports = {
     },
     'require-input-label': 'off',
     'no-array-prototype-extensions': 'off',
+    // from bump to [email protected]
+    'no-builtin-form-components': 'off',
+    'no-at-ember-render-modifiers': 'off',
+    'no-unnecessary-curly-strings': 'off',
+    'no-unnecessary-curly-parens': 'off',
   },
   overrides: [
     {

ui/lib/ldap/addon/routes/libraries/library/check-out.ts

@@ -35,7 +35,7 @@ export default class LdapLibraryCheckOutRoute extends Route {
     }
   }
   model(_params: object, transition: Transition) {
-    const { ttl } = transition.to.queryParams;
+    const ttl = transition.to?.queryParams['ttl'];
     const library = this.modelFor('libraries.library') as LdapLibraryModel;
     return library.checkOutAccount(ttl);
   }

ui/lib/sync/addon/routes/secrets/destinations/destination.ts

@@ -34,10 +34,9 @@ export default class SyncSecretsDestinationsDestinationRoute extends Route {
     // if transitioning from either of the mentioned routes and a purge has been initiated redirect to the secrets view
     const baseRoute = 'vault.cluster.sync.secrets.destinations.destination';
     const routes = [`${baseRoute}.edit`, `${baseRoute}.sync`];
-    if (routes.includes(transition.to.name) && model.purgeInitiatedAt) {
-      // const target = transition.to.name.
-      // this.flashMessages.info('Actions are ')
-      const action = transition.to.localName === 'edit' ? 'Editing a destination' : 'Syncing secrets';
+    const toRoute = transition.to?.name;
+    if (toRoute && routes.includes(toRoute) && model.purgeInitiatedAt) {
+      const action = transition.to?.localName === 'edit' ? 'Editing a destination' : 'Syncing secrets';
       this.flashMessages.info(`${action} is not permitted once a purge has been initiated.`);
       this.router.replaceWith('vault.cluster.sync.secrets.destinations.destination.secrets');
     }

ui/package.json

@@ -109,13 +109,12 @@
     "codemirror": "^5.58.2",
     "columnify": "^1.5.4",
     "concurrently": "^8.2.2",
-    "d3-axis": "^1.0.8",
-    "d3-ease": "^1.0.5",
-    "d3-scale": "^1.0.7",
-    "d3-selection": "^1.3.0",
-    "d3-time-format": "^2.1.1",
-    "d3-tip": "^0.9.1",
-    "d3-transition": "^1.2.0",
+    "d3-array": "^3.2.4",
+    "d3-axis": "^3.0.0",
+    "d3-format": "^3.1.0",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^1.2.2",
     "deepmerge": "^4.0.0",
@@ -142,7 +141,6 @@
     "ember-composable-helpers": "5.0.0",
     "ember-concurrency": "2.3.4",
     "ember-copy": "2.0.1",
-    "ember-d3": "^0.5.1",
     "ember-data": "~4.12.4",
     "ember-engines": "0.8.23",
     "ember-exam": "^9.0.0",
@@ -164,7 +162,7 @@
     "ember-source": "~4.12.0",
     "ember-style-modifier": "^4.1.0",
     "ember-svg-jar": "2.4.0",
-    "ember-template-lint": "5.7.2",
+    "ember-template-lint": "^6.0.0",
     "ember-template-lint-plugin-prettier": "4.0.0",
     "ember-test-selectors": "6.0.0",
     "ember-tether": "3.0.0",
@@ -209,16 +207,17 @@
     "xstate": "^3.3.3"
   },
   "resolutions": {
+    "ansi-html": "^0.0.8",
+    "async": "^2.6.4",
     "eslint-utils": "^1.4.1",
     "ember-basic-dropdown": "6.0.1",
     "highlight.js": "^10.4.1",
     "https-proxy-agent": "^2.2.3",
     "ini": "^1.3.6",
     "kind-of": "^6.0.3",
-    "minimatch": "^3.0.2",
     "node-notifier": "^8.0.1",
+    "nth-check": "^2.0.1",
     "prismjs": "^1.21.0",
-    "qs": "^6.3.0",
     "serialize-javascript": "^3.1.0",
     "underscore": "^1.12.1",
     "xmlhttprequest-ssl": "^1.6.2",

ui/tests/acceptance/access/identity/_shared-alias-tests.js

@@ -4,6 +4,7 @@
  */
 
 import { currentRouteName, find, settled, waitUntil } from '@ember/test-helpers';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 import page from 'vault/tests/pages/access/identity/aliases/add';
 import aliasIndexPage from 'vault/tests/pages/access/identity/aliases/index';
 import aliasShowPage from 'vault/tests/pages/access/identity/aliases/show';
@@ -61,10 +62,7 @@ export const testAliasCRUD = async function (name, itemType, assert) {
   await settled();
   await aliasIndexPage.confirmDelete();
   await settled();
-  assert.ok(
-    aliasIndexPage.flashMessage.latestMessage.startsWith('Successfully deleted'),
-    `${itemType}: shows flash message`
-  );
+  assert.dom(GENERAL.latestFlashContent).includesText(`Successfully deleted`);
 
   assert.strictEqual(
     aliasIndexPage.items.filterBy('id', aliasID).length,
@@ -109,10 +107,7 @@ export const testAliasDeleteFromForm = async function (name, itemType, assert) {
   await page.editForm.waitForConfirm();
   await page.editForm.confirmDelete();
   await settled();
-  assert.ok(
-    aliasIndexPage.flashMessage.latestMessage.startsWith('Successfully deleted'),
-    `${itemType}: shows flash message`
-  );
+  assert.dom(GENERAL.latestFlashContent).includesText(`Successfully deleted`);
   assert.strictEqual(
     currentRouteName(),
     'vault.cluster.access.identity.aliases.index',

ui/tests/acceptance/access/identity/_shared-tests.js

@@ -8,6 +8,7 @@ import { selectChoose, clickTrigger } from 'ember-power-select/test-support/help
 import page from 'vault/tests/pages/access/identity/create';
 import showPage from 'vault/tests/pages/access/identity/show';
 import indexPage from 'vault/tests/pages/access/identity/index';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 const SELECTORS = {
   identityRow: (name) => `[data-test-identity-row="${name}"]`,
   popupMenu: '[data-test-popup-menu-trigger]',
@@ -18,10 +19,7 @@ export const testCRUD = async (name, itemType, assert) => {
   await settled();
   await page.editForm.name(name).submit();
   await settled();
-  assert.ok(
-    showPage.flashMessage.latestMessage.startsWith('Successfully saved'),
-    `${itemType}: shows a flash message`
-  );
+  assert.dom(GENERAL.latestFlashContent).includesText('Successfully saved');
   assert.strictEqual(
     currentRouteName(),
     'vault.cluster.access.identity.show',
@@ -41,10 +39,7 @@ export const testCRUD = async (name, itemType, assert) => {
   await click(SELECTORS.menuDelete);
   await indexPage.confirmDelete();
   await settled();
-  assert.ok(
-    indexPage.flashMessage.latestMessage.startsWith('Successfully deleted'),
-    `${itemType}: shows flash message`
-  );
+  assert.dom(GENERAL.latestFlashContent).includesText('Successfully deleted');
   assert.strictEqual(indexPage.items.filterBy('name', name).length, 0, `${itemType}: the row is deleted`);
 };
 
@@ -73,10 +68,7 @@ export const testDeleteFromForm = async (name, itemType, assert) => {
   await settled();
   await page.editForm.confirmDelete();
   await settled();
-  assert.ok(
-    indexPage.flashMessage.latestMessage.startsWith('Successfully deleted'),
-    `${itemType}: shows flash message`
-  );
+  assert.dom(GENERAL.latestFlashContent).includesText('Successfully deleted');
   assert.strictEqual(
     currentRouteName(),
     'vault.cluster.access.identity.index',

ui/tests/acceptance/init-test.js

@@ -3,23 +3,12 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+import { waitFor } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
-
-import initPage from 'vault/tests/pages/init';
-import Pretender from 'pretender';
 import { setRunOptions } from 'ember-a11y-testing/test-support';
-
-const HEALTH_RESPONSE = {
-  initialized: false,
-  sealed: true,
-  standby: true,
-  performance_standby: false,
-  replication_performance_mode: 'unknown',
-  replication_dr_mode: 'unknown',
-  server_time_utc: 1538066726,
-  version: '1.13.0-dev1',
-};
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import initPage from 'vault/tests/pages/init';
 
 const CLOUD_SEAL_RESPONSE = {
   keys: [],
@@ -83,28 +72,7 @@ const assertRequest = (req, assert, isCloud) => {
 
 module('Acceptance | init', function (hooks) {
   setupApplicationTest(hooks);
-
-  const setInitResponse = (server, resp) => {
-    server.put('/v1/sys/init', () => {
-      return [200, { 'Content-Type': 'application/json' }, JSON.stringify(resp)];
-    });
-  };
-  const setStatusResponse = (server, resp) => {
-    server.get('/v1/sys/seal-status', () => {
-      return [200, { 'Content-Type': 'application/json' }, JSON.stringify(resp)];
-    });
-  };
-  hooks.beforeEach(function () {
-    this.server = new Pretender();
-    this.server.get('/v1/sys/health', () => {
-      return [200, { 'Content-Type': 'application/json' }, JSON.stringify(HEALTH_RESPONSE)];
-    });
-    this.server.get('/v1/sys/internal/ui/feature-flags', this.server.passthrough);
-  });
-
-  hooks.afterEach(function () {
-    this.server.shutdown();
-  });
+  setupMirage(hooks);
 
   test('cloud seal init', async function (assert) {
     // continue button is disabled, violating color-contrast
@@ -114,39 +82,38 @@ module('Acceptance | init', function (hooks) {
       },
     });
     assert.expect(6);
-
-    setInitResponse(this.server, CLOUD_SEAL_RESPONSE);
-    setStatusResponse(this.server, CLOUD_SEAL_STATUS_RESPONSE);
+    this.server.put('/sys/init', (schema, req) => {
+      assertRequest(req, assert, true);
+      return CLOUD_SEAL_RESPONSE;
+    });
+    this.server.get('/sys/seal-status', () => {
+      return CLOUD_SEAL_STATUS_RESPONSE;
+    });
 
     await initPage.init(5, 3);
-
+    await waitFor('[data-test-advance-button]');
     assert.strictEqual(
       initPage.keys.length,
       CLOUD_SEAL_RESPONSE.recovery_keys.length,
       'shows all of the recovery keys'
     );
     assert.strictEqual(initPage.buttonText, 'Continue to Authenticate', 'links to authenticate');
-    assertRequest(
-      this.server.handledRequests.find((req) => req.url === '/v1/sys/init'),
-      assert,
-      true
-    );
   });
 
   test('shamir seal init', async function (assert) {
     assert.expect(6);
 
-    setInitResponse(this.server, SEAL_RESPONSE);
-    setStatusResponse(this.server, SEAL_STATUS_RESPONSE);
+    this.server.put('/sys/init', (schema, req) => {
+      assertRequest(req, assert, false);
+      return SEAL_RESPONSE;
+    });
+    this.server.get('/sys/seal-status', () => {
+      return SEAL_STATUS_RESPONSE;
+    });
 
     await initPage.init(3, 2);
-
+    await waitFor('[data-test-advance-button]');
     assert.strictEqual(initPage.keys.length, SEAL_RESPONSE.keys.length, 'shows all of the recovery keys');
     assert.strictEqual(initPage.buttonText, 'Continue to Unseal', 'links to unseal');
-    assertRequest(
-      this.server.handledRequests.find((r) => r.url === '/v1/sys/init'),
-      assert,
-      false
-    );
   });
 });

ui/tests/acceptance/secrets/backend/database/secret-test.js

@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
-import { currentURL, settled, click, visit, fillIn, typeIn } from '@ember/test-helpers';
+import { currentURL, settled, click, visit, fillIn, typeIn, waitFor } from '@ember/test-helpers';
 import { create } from 'ember-cli-page-object';
 import { selectChoose, clickTrigger } from 'ember-power-select/test-support/helpers';
 
@@ -289,6 +289,7 @@ module('Acceptance | secrets/database/*', function (hooks) {
         .hasText('Rotate your root credentials?', 'Modal appears asking to rotate root credentials');
       assert.dom('[data-test-enable-connection]').exists('Enable button exists');
       await click('[data-test-enable-connection]');
+      await waitFor('[data-test-component="info-table-row"]');
       assert.ok(
         currentURL().startsWith(`/vault/secrets/${backend}/show/${testCase.name}`),
         `Saves connection and takes you to show page for ${testCase.name}`

ui/tests/acceptance/tools-test.js

@@ -174,6 +174,7 @@ module('Acceptance | tools', function (hooks) {
     await fillIn('[data-test-tools-input="wrapping-token"]', 'sometoken');
     await click('[data-test-tools-submit]');
 
+    await waitFor('.CodeMirror');
     assert.deepEqual(
       JSON.parse(codemirror().getValue()),
       AUTH_RESPONSE.auth,

ui/tests/helpers/general-selectors.ts

@@ -15,6 +15,8 @@ export const GENERAL = {
   icon: (name: string) => `[data-test-icon="${name}"]`,
   tab: (name: string) => `[data-test-tab="${name}"]`,
   secretTab: (name: string) => `[data-test-secret-list-tab="${name}"]`,
+  flashMessage: '[data-test-flash-message]',
+  latestFlashContent: '[data-test-flash-message]:last-of-type [data-test-flash-message-body]',
 
   filter: (name: string) => `[data-test-filter="${name}"]`,
   filterInput: '[data-test-filter-input]',