Upgrade Ember data 4.11.x to 4.12.x

changelog/25272.txt

@@ -0,0 +1,3 @@
+```release-note:change
+ui: Upgrade Ember data from 4.11.3 to 4.12.4
+```

ui/app/serializers/secret.js

@@ -37,9 +37,8 @@ export default ApplicationSerializer.extend({
     // to `secret_data` so it will be `secretData` in the model
     payload.secret_data = get(payload, path);
     delete payload[path];
-    // return the payload if it's expecting a single object or wrap
-    // it as an array if not
-    return requestType === 'queryRecord' ? payload : [payload];
+
+    return payload;
   },
 
   serialize(snapshot) {

ui/app/services/store.js

@@ -3,7 +3,9 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import Store from '@ember-data/store';
+import Store, { CacheHandler } from '@ember-data/store';
+import RequestManager from '@ember-data/request';
+import { LegacyNetworkHandler } from '@ember-data/legacy-compat';
 import { run, schedule } from '@ember/runloop';
 import { resolve, Promise } from 'rsvp';
 import { dasherize } from '@ember/string';
@@ -33,6 +35,16 @@ export function keyForCache(query) {
 }
 
 export default class StoreService extends Store {
+  requestManager = new RequestManager();
+
+  constructor(args) {
+    super(args);
+    // If at some point we no longer need an extended store, we can remove the @ember-data/legacy-compat dep
+    // See: https://api.emberjs.com/ember-data/4.12/modules/@ember-data%2Frequest
+    this.requestManager.use([LegacyNetworkHandler]);
+    this.requestManager.useCache(CacheHandler);
+  }
+
   lazyCaches = new Map();
 
   setLazyCacheForModel(modelName, key, value) {

ui/mirage/handlers/sync.js

@@ -75,8 +75,15 @@ const createOrUpdateDestination = (schema, req) => {
     }
   }
   const data = { ...apiResponse, type, name };
-  schema.db.syncDestinations.firstOrCreate({ type, name }, data);
-  return schema.db.syncDestinations.update({ type, name }, data);
+  // issue with mirages' update method not returning an id on the payload which causes ember data to error after 4.12.x upgrade.
+  // to work around this, determine if we're creating or updating a record first
+  const records = schema.db.syncDestinations.where({ type, name });
+
+  if (!records.length) {
+    return schema.db.syncDestinations.firstOrCreate({ type, name }, data);
+  } else {
+    return schema.db.syncDestinations.update({ type, name }, data);
+  }
 };
 
 export default function (server) {

ui/package.json

@@ -59,6 +59,7 @@
     "@babel/plugin-proposal-decorators": "^7.21.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
     "@babel/plugin-transform-block-scoping": "^7.12.1",
+    "@ember-data/legacy-compat": "~4.12.4",
     "@ember/legacy-built-in-components": "^0.4.1",
     "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^1.0.2",
@@ -144,7 +145,7 @@
     "ember-concurrency": "2.3.4",
     "ember-copy": "2.0.1",
     "ember-d3": "^0.5.1",
-    "ember-data": "~4.11.3",
+    "ember-data": "~4.12.4",
     "ember-engines": "0.8.23",
     "ember-exam": "^9.0.0",
     "ember-fetch": "^8.1.2",

ui/tests/acceptance/auth-test.js

@@ -75,7 +75,7 @@ module('Acceptance | auth', function (hooks) {
       let included;
       if (backend.type === 'token') {
         keys = lastRequest.requestHeaders;
-        included = 'X-Vault-Token';
+        included = 'x-vault-token';
       } else if (backend.type === 'github') {
         keys = body;
         included = 'token';

ui/tests/acceptance/mfa-login-enforcement-test.js

@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
-import { click, currentRouteName, fillIn, visit } from '@ember/test-helpers';
+import { click, currentRouteName, fillIn, visit, waitFor } from '@ember/test-helpers';
 import authPage from 'vault/tests/pages/auth';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import mfaConfigHandlers from 'vault/mirage/handlers/mfa-config';
@@ -134,6 +134,7 @@ module('Acceptance | mfa-login-enforcement', function (hooks) {
     assert.dom('h1').includesText(enforcement.name, 'Name renders in title');
     assert.dom('h1 svg').hasClass('flight-icon-lock', 'Lock icon renders in title');
     assert.dom('[data-test-tab="targets"]').hasClass('active', 'Targets tab is active by default');
+    await waitFor('[data-test-target]', { timeout: 5000 });
     assert.dom('[data-test-target]').exists({ count: 4 }, 'Targets render in list');
     // targets tab
     const targets = {
@@ -231,6 +232,7 @@ module('Acceptance | mfa-login-enforcement', function (hooks) {
     await click('[data-test-mlef-remove-target="Authentication method"]');
     await click('[data-test-mlef-save]');
 
+    await waitFor('[data-test-target]', { timeout: 5000 });
     assert.strictEqual(
       currentRouteName(),
       'vault.cluster.access.mfa.enforcements.enforcement.index',

ui/tests/acceptance/mfa-login-test.js

@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
-import { click, currentRouteName, fillIn, visit, waitUntil, find } from '@ember/test-helpers';
+import { click, currentRouteName, fillIn, visit, waitUntil, find, waitFor } from '@ember/test-helpers';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import mfaLoginHandler, { validationHandler } from '../../mirage/handlers/mfa-login';
 
@@ -35,7 +35,11 @@ module('Acceptance | mfa-login', function (hooks) {
     await fillIn('[data-test-password]', 'test');
     await click('[data-test-auth-submit]');
   };
-  const didLogin = (assert) => {
+  const didLogin = async (assert) => {
+    await waitFor('[data-test-dashboard-card-header]', {
+      timeout: 5000,
+      timeoutMessage: 'timed out waiting for dashboard title to render',
+    });
     assert.strictEqual(currentRouteName(), 'vault.cluster.dashboard', 'Route transitions after login');
   };
   const validate = async (multi) => {
@@ -58,7 +62,7 @@ module('Acceptance | mfa-login', function (hooks) {
     assert.dom('[data-test-mfa-select]').doesNotExist('Select is hidden for single method');
     assert.dom('[data-test-mfa-passcode]').exists({ count: 1 }, 'Single passcode input renders');
     await validate();
-    didLogin(assert);
+    await didLogin(assert);
   });
 
   test('it should handle single mfa constraint with push method', async function (assert) {
@@ -84,7 +88,7 @@ module('Acceptance | mfa-login', function (hooks) {
     });
 
     await login('mfa-b');
-    didLogin(assert);
+    await didLogin(assert);
   });
 
   test('it should handle single mfa constraint with 2 passcode methods', async function (assert) {
@@ -99,15 +103,15 @@ module('Acceptance | mfa-login', function (hooks) {
     assert.dom('[data-test-mfa-passcode]').doesNotExist('Passcode input hidden until selection is made');
     await this.select();
     await validate();
-    didLogin(assert);
+    await didLogin(assert);
   });
 
   test('it should handle single mfa constraint with 2 push methods', async function (assert) {
     assert.expect(1);
     await login('mfa-d');
     await this.select();
     await click('[data-test-mfa-validate]');
-    didLogin(assert);
+    await didLogin(assert);
   });
 
   test('it should handle single mfa constraint with 1 passcode and 1 push method', async function (assert) {
@@ -118,7 +122,7 @@ module('Acceptance | mfa-login', function (hooks) {
     await this.select();
     assert.dom('[data-test-mfa-passcode]').doesNotExist('Passcode input is hidden for push method');
     await click('[data-test-mfa-validate]');
-    didLogin(assert);
+    await didLogin(assert);
   });
 
   test('it should handle multiple mfa constraints with 1 passcode method each', async function (assert) {
@@ -132,13 +136,13 @@ module('Acceptance | mfa-login', function (hooks) {
       );
     assert.dom('[data-test-mfa-select]').doesNotExist('Selects do not render for single methods');
     await validate(true);
-    didLogin(assert);
+    await didLogin(assert);
   });
 
   test('it should handle multi mfa constraint with 1 push method each', async function (assert) {
     assert.expect(1);
     await login('mfa-g');
-    didLogin(assert);
+    await didLogin(assert);
   });
 
   test('it should handle multiple mfa constraints with 1 passcode and 1 push method', async function (assert) {
@@ -153,7 +157,7 @@ module('Acceptance | mfa-login', function (hooks) {
     assert.dom('[data-test-mfa-select]').doesNotExist('Select is hidden for single method');
     assert.dom('[data-test-mfa-passcode]').exists({ count: 1 }, 'Passcode input renders');
     await validate();
-    didLogin(assert);
+    await didLogin(assert);
   });
 
   test('it should handle multiple mfa constraints with multiple mixed methods', async function (assert) {
@@ -168,11 +172,12 @@ module('Acceptance | mfa-login', function (hooks) {
     await this.select();
     await fillIn('[data-test-mfa-passcode="1"]', 'test');
     await click('[data-test-mfa-validate]');
-    didLogin(assert);
+    await didLogin(assert);
   });
 
   test('it should render unauthorized message for push failure', async function (assert) {
     await login('mfa-j');
+    await waitFor('[data-test-empty-state-title]');
     assert.dom('[data-test-auth-form]').doesNotExist('Auth form hidden when mfa fails');
     assert.dom('[data-test-empty-state-title]').hasText('Unauthorized', 'Error title renders');
     assert

ui/tests/acceptance/mfa-setup-test.js

@@ -7,7 +7,7 @@ import { module, test } from 'qunit';
 import { create } from 'ember-cli-page-object';
 import { v4 as uuidv4 } from 'uuid';
 import { setupApplicationTest } from 'ember-qunit';
-import { click, fillIn } from '@ember/test-helpers';
+import { click, fillIn, waitFor } from '@ember/test-helpers';
 import authPage from 'vault/tests/pages/auth';
 import enablePage from 'vault/tests/pages/settings/auth/enable';
 import consoleClass from 'vault/tests/pages/components/console/ui-panel';
@@ -77,9 +77,11 @@ module('Acceptance | mfa-setup', function (hooks) {
     });
     await fillIn('[data-test-input="uuid"]', 123);
     await click('[data-test-verify]');
+    await waitFor('[data-test-qrcode]', { timeout: 5000 });
     assert.dom('[data-test-qrcode]').exists('the qrCode is shown.');
     assert.dom('[data-test-mfa-enabled-warning]').doesNotExist('warning does not show.');
     await click('[data-test-restart]');
+    await waitFor('[data-test-step-one]', { timeout: 5000 });
     assert.dom('[data-test-step-one]').exists('back to step one.');
   });
 
@@ -95,6 +97,7 @@ module('Acceptance | mfa-setup', function (hooks) {
 
     await fillIn('[data-test-input="uuid"]', 123);
     await click('[data-test-verify]');
+    await waitFor('[data-test-mfa-enabled-warning]', { timeout: 5000 });
     assert.dom('[data-test-qrcode]').doesNotExist('the qrCode is not shown.');
     assert.dom('[data-test-mfa-enabled-warning]').exists('the mfa-enabled warning shows.');
   });