UI: Ember deprecation - addObject, removeObject

ui/app/adapters/database/role.js

@@ -144,7 +144,7 @@ export default ApplicationAdapter.extend({
   async _updateAllowedRoles(store, { role, backend, db, type = 'add' }) {
     const connection = await store.queryRecord('database/connection', { backend, id: db });
     const roles = [...(connection.allowed_roles || [])];
-    const allowedRoles = type === 'add' ? addToArray([roles, role]) : removeFromArray([roles, role]);
+    const allowedRoles = type === 'add' ? addToArray(roles, role) : removeFromArray(roles, role);
     connection.allowed_roles = allowedRoles;
     return connection.save();
   },

ui/app/adapters/ldap/role.js

@@ -7,6 +7,7 @@ import NamedPathAdapter from 'vault/adapters/named-path';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 import { service } from '@ember/service';
 import AdapterError from '@ember-data/adapter/error';
+import { addManyToArray } from 'vault/helpers/add-to-array';
 
 export default class LdapRoleAdapter extends NamedPathAdapter {
   @service flashMessages;
@@ -33,7 +34,7 @@ export default class LdapRoleAdapter extends NamedPathAdapter {
   async query(store, type, query, recordArray, options) {
     const { showPartialError } = options.adapterOptions || {};
     const { backend } = query;
-    const roles = [];
+    let roles = [];
     const errors = [];
 
     for (const roleType of ['static', 'dynamic']) {
@@ -42,7 +43,7 @@ export default class LdapRoleAdapter extends NamedPathAdapter {
         const models = await this.ajax(url, 'GET', { data: { list: true } }).then((resp) => {
           return resp.data.keys.map((name) => ({ id: name, name, backend, type: roleType }));
         });
-        roles.addObjects(models);
+        roles = addManyToArray(roles, models);
       } catch (error) {
         if (error.httpStatus !== 404) {
           errors.push(error);

ui/app/components/auth-form.js

@@ -6,7 +6,7 @@
 import Ember from 'ember';
 import { next } from '@ember/runloop';
 import { service } from '@ember/service';
-import { match, alias, or } from '@ember/object/computed';
+import { match, or } from '@ember/object/computed';
 import { dasherize } from '@ember/string';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
@@ -166,9 +166,12 @@ export default Component.extend(DEFAULTS, {
     return templateName;
   }),
 
-  hasCSPError: alias('csp.connectionViolations'),
-
-  cspErrorText: `This is a standby Vault node but can't communicate with the active node via request forwarding. Sign in at the active node to use the Vault UI.`,
+  cspError: computed('csp.connectionViolations.length', function () {
+    if (this.csp.connectionViolations.length) {
+      return `This is a standby Vault node but can't communicate with the active node via request forwarding. Sign in at the active node to use the Vault UI.`;
+    }
+    return '';
+  }),
 
   allSupportedMethods: computed('methodsToShow', 'hasMethodsWithPath', 'authMethods', function () {
     const hasMethodsWithPath = this.hasMethodsWithPath;

ui/app/components/clients/horizontal-bar-chart.js

@@ -175,7 +175,9 @@ export default class HorizontalBarChart extends Component {
         this.isLabel = false;
         this.tooltipText = []; // clear stats
         this.args.chartLegend.forEach(({ key, label }) => {
-          this.tooltipText.pushObject(`${formatNumber([data[key]])} ${label}`);
+          // since we're relying on D3 not ember reactivity,
+          // pushing directly to this.tooltipText updates the DOM
+          this.tooltipText.push(`${formatNumber([data[key]])} ${label}`);
         });
 
         select(hoveredElement).style('opacity', 1);

ui/app/components/clients/vertical-bar-chart.js

@@ -155,7 +155,9 @@ export default class VerticalBarChart extends Component {
       this.tooltipStats = []; // clear stats
       this.args.chartLegend.forEach(({ key, label }) => {
         stackedNumbers.push(data[key]);
-        this.tooltipStats.pushObject(`${formatNumber([data[key]])} ${label}`);
+        // since we're relying on D3 not ember reactivity,
+        // pushing directly to this.tooltipStats updates the DOM
+        this.tooltipStats.push(`${formatNumber([data[key]])} ${label}`);
       });
       this.tooltipTotal = `${formatNumber([calculateSum(stackedNumbers)])} ${
         data.new_clients ? 'total' : 'new'

ui/app/components/keymgmt/provider-edit.js

@@ -9,6 +9,7 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
+import { removeFromArray } from 'vault/helpers/remove-from-array';
 
 /**
  * @module KeymgmtProviderEdit
@@ -94,8 +95,9 @@ export default class KeymgmtProviderEdit extends Component {
   @action
   async onDeleteKey(model) {
     try {
+      const providerKeys = removeFromArray(this.args.model.keys, model);
       await model.destroyRecord();
-      this.args.model.keys.removeObject(model);
+      this.args.model.keys = providerKeys;
     } catch (error) {
       this.flashMessages.danger(error.errors.join('. '));
     }

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

@@ -8,7 +8,8 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { task } from 'ember-concurrency';
-import handleHasManySelection from 'core/utils/search-select-has-many';
+import { addManyToArray, addToArray } from 'vault/helpers/add-to-array';
+import { removeFromArray } from 'vault/helpers/remove-from-array';
 
 /**
  * @module MfaLoginEnforcementForm
@@ -64,7 +65,7 @@ export default class MfaLoginEnforcementForm extends Component {
     for (const { label, key } of this.targetTypes) {
       const targetArray = await this.args.model[key];
       const targets = targetArray.map((value) => ({ label, key, value }));
-      this.targets.addObjects(targets);
+      this.targets = addManyToArray(this.targets, targets);
     }
   }
   async resetTargetState() {
@@ -102,7 +103,6 @@ export default class MfaLoginEnforcementForm extends Component {
 
   updateModelForKey(key) {
     const newValue = this.targets.filter((t) => t.key === key).map((t) => t.value);
-    // Set the model value directly instead of using Array methods (like .addObject)
     this.args.model[key] = newValue;
   }
 
@@ -126,8 +126,18 @@ export default class MfaLoginEnforcementForm extends Component {
 
   @action
   async onMethodChange(selectedIds) {
+    // first make sure the async relationship is loaded
     const methods = await this.args.model.mfa_methods;
-    handleHasManySelection(selectedIds, methods, this.store, 'mfa-method');
+    // then remove items that are no longer selected
+    const updatedList = methods.filter((model) => {
+      return selectedIds.includes(model.id);
+    });
+    // then add selected items that don't exist in the list already
+    const modelIds = updatedList.map((model) => model.id);
+    const toAdd = selectedIds
+      .filter((id) => !modelIds.includes(id))
+      .map((id) => this.store.peekRecord('mfa-method', id));
+    this.args.model.mfa_methods = addManyToArray(updatedList, toAdd);
   }
 
   @action
@@ -150,15 +160,15 @@ export default class MfaLoginEnforcementForm extends Component {
   addTarget() {
     const { label, key } = this.selectedTarget;
     const value = this.selectedTargetValue;
-    this.targets.addObject({ label, value, key });
+    this.targets = addToArray(this.targets, { label, value, key });
     // recalculate value for appropriate model property
     this.updateModelForKey(key);
     this.selectedTargetValue = null;
     this.resetTargetState();
   }
   @action
   removeTarget(target) {
-    this.targets.removeObject(target);
+    this.targets = removeFromArray(this.targets, target);
     // recalculate value for appropriate model property
     this.updateModelForKey(target.key);
   }

ui/app/components/secret-create-or-update.js

@@ -195,6 +195,7 @@ export default class SecretCreateOrUpdate extends Component {
     if (isBlank(item.name)) {
       return;
     }
+    // secretData is a KVObject/ArrayProxy so removeObject is fine here
     data.removeObject(item);
     this.checkRows();
     this.handleChange();

ui/app/controllers/vault/cluster/access/mfa/methods/create.js

@@ -9,6 +9,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { capitalize } from '@ember/string';
 import { task } from 'ember-concurrency';
+import { addToArray } from 'vault/helpers/add-to-array';
 
 export default class MfaMethodCreateController extends Controller {
   @service store;
@@ -95,7 +96,8 @@ export default class MfaMethodCreateController extends Controller {
         // first save method
         yield this.method.save();
         if (this.enforcement) {
-          this.enforcement.mfa_methods.addObject(this.method);
+          // mfa_methods is type PromiseManyArray so slice in necessary to convert it to an Array
+          this.enforcement.mfa_methods = addToArray(this.enforcement.mfa_methods.slice(), this.method);
           try {
             // now save enforcement and catch error separately
             yield this.enforcement.save();

ui/app/helpers/add-to-array.js

@@ -10,7 +10,13 @@ function dedupe(items) {
   return items.filter((v, i) => items.indexOf(v) === i);
 }
 
-export function addToArray([array, string]) {
+export function addManyToArray(array, otherArray) {
+  assert(`Both values must be an array`, Array.isArray(array) && Array.isArray(otherArray));
+  const newArray = [...array].concat(otherArray);
+  return dedupe(newArray);
+}
+
+export function addToArray(array, string) {
   if (!Array.isArray(array)) {
     assert(`Value provided is not an array`, false);
   }
@@ -19,4 +25,9 @@ export function addToArray([array, string]) {
   return dedupe(newArray);
 }
 
-export default buildHelper(addToArray);
+export default buildHelper(function ([array, string]) {
+  if (Array.isArray(string)) {
+    return addManyToArray(array, string);
+  }
+  return addToArray(array, string);
+});

ui/app/helpers/remove-from-array.js

@@ -10,10 +10,14 @@ function dedupe(items) {
   return items.filter((v, i) => items.indexOf(v) === i);
 }
 
-export function removeFromArray([array, string]) {
-  if (!Array.isArray(array)) {
-    assert(`Value provided is not an array`, false);
-  }
+export function removeManyFromArray(array, toRemove) {
+  assert(`Both values must be an array`, Array.isArray(array) && Array.isArray(toRemove));
+  const a = [...(array || [])];
+  return a.filter((v) => !toRemove.includes(v));
+}
+
+export function removeFromArray(array, string) {
+  assert(`Value provided is not an array`, Array.isArray(array));
   const newArray = [...array];
   const idx = newArray.indexOf(string);
   if (idx >= 0) {
@@ -22,4 +26,9 @@ export function removeFromArray([array, string]) {
   return dedupe(newArray);
 }
 
-export default buildHelper(removeFromArray);
+export default buildHelper(function ([array, string]) {
+  if (Array.isArray(string)) {
+    return removeManyFromArray(array, string);
+  }
+  return removeFromArray(array, string);
+});

ui/app/lib/console-helpers.ts

@@ -241,7 +241,8 @@ export function shiftCommandIndex(keyCode: number, history: CommandLog[], index:
   }
 
   if (newInputValue !== '') {
-    newInputValue = history.objectAt(index)?.content;
+    const objAt = history[index];
+    newInputValue = objAt?.content;
   }
 
   return [index, newInputValue];

ui/app/models/kmip/role.js

@@ -8,14 +8,15 @@ import { computed } from '@ember/object';
 import fieldToAttrs, { expandAttributeMeta } from 'vault/utils/field-to-attrs';
 import apiPath from 'vault/utils/api-path';
 import lazyCapabilities from 'vault/macros/lazy-capabilities';
+import { removeManyFromArray } from 'vault/helpers/remove-from-array';
 
 export const COMPUTEDS = {
   operationFields: computed('newFields', function () {
     return this.newFields.filter((key) => key.startsWith('operation'));
   }),
 
   operationFieldsWithoutSpecial: computed('operationFields', function () {
-    return this.operationFields.slice().removeObjects(['operationAll', 'operationNone']);
+    return removeManyFromArray(this.operationFields, ['operationAll', 'operationNone']);
   }),
 
   tlsFields: computed(function () {
@@ -25,12 +26,12 @@ export const COMPUTEDS = {
   // For rendering on the create/edit pages
   defaultFields: computed('newFields', 'operationFields', 'tlsFields', function () {
     const excludeFields = ['role'].concat(this.operationFields, this.tlsFields);
-    return this.newFields.slice().removeObjects(excludeFields);
+    return removeManyFromArray(this.newFields, excludeFields);
   }),
 
   // For adapter/serializer
   nonOperationFields: computed('newFields', 'operationFields', function () {
-    return this.newFields.slice().removeObjects(this.operationFields);
+    return removeManyFromArray(this.newFields, this.operationFields);
   }),
 };
 
@@ -64,9 +65,11 @@ export default Model.extend(COMPUTEDS, {
 
     const attributes = ['operationAddAttribute', 'operationGetAttributes'];
     const server = ['operationDiscoverVersions'];
-    const others = this.operationFieldsWithoutSpecial
-      .slice()
-      .removeObjects(objects.concat(attributes, server));
+    const others = removeManyFromArray(this.operationFieldsWithoutSpecial, [
+      ...objects,
+      ...attributes,
+      ...server,
+    ]);
     const groups = [
       { 'Managed Cryptographic Objects': objects },
       { 'Object Attributes': attributes },

ui/app/models/mfa-login-enforcement.js

@@ -10,6 +10,7 @@ import { methods } from 'vault/helpers/mountable-auth-methods';
 import { withModelValidations } from 'vault/decorators/model-validations';
 import { isPresent } from '@ember/utils';
 import { service } from '@ember/service';
+import { addManyToArray, addToArray } from 'vault/helpers/add-to-array';
 
 const validations = {
   name: [{ type: 'presence', message: 'Name is required' }],
@@ -52,7 +53,7 @@ export default class MfaLoginEnforcementModel extends Model {
 
   async prepareTargets() {
     let authMethods;
-    const targets = [];
+    let targets = [];
 
     if (this.auth_method_accessors.length || this.auth_method_types.length) {
       // fetch all auth methods and lookup by accessor to get mount path and type
@@ -68,7 +69,8 @@ export default class MfaLoginEnforcementModel extends Model {
       const selectedAuthMethods = authMethods.filter((model) => {
         return this.auth_method_accessors.includes(model.accessor);
       });
-      targets.addObjects(
+      targets = addManyToArray(
+        targets,
         selectedAuthMethods.map((method) => ({
           icon: this.iconForMount(method.type),
           link: 'vault.cluster.access.method',
@@ -82,7 +84,7 @@ export default class MfaLoginEnforcementModel extends Model {
     this.auth_method_types.forEach((type) => {
       const icon = this.iconForMount(type);
       const mountCount = authMethods.filterBy('type', type).length;
-      targets.addObject({
+      targets = addToArray(targets, {
         key: 'auth_method_types',
         icon,
         title: type,
@@ -92,7 +94,7 @@ export default class MfaLoginEnforcementModel extends Model {
 
     for (const key of ['identity_entities', 'identity_groups']) {
       (await this[key]).forEach((model) => {
-        targets.addObject({
+        targets = addToArray(targets, {
           key,
           icon: 'user',
           link: 'vault.cluster.access.identity.show',

ui/app/serializers/sync/destination.js

@@ -50,7 +50,7 @@ export default class SyncDestinationSerializer extends ApplicationSerializer {
         const type = key.replace(/\/$/, '');
         const id = `${type}/${name}`;
         // create object with destination's id and attributes, add to payload
-        transformedPayload.pushObject({ id, name, type });
+        transformedPayload.push({ id, name, type });
       });
     }
     return transformedPayload;

ui/app/services/auth.js

@@ -17,6 +17,7 @@ import { resolve, reject } from 'rsvp';
 import getStorage from 'vault/lib/token-storage';
 import ENV from 'vault/config/environment';
 import { allSupportedAuthBackends } from 'vault/helpers/supported-auth-backends';
+import { addToArray } from 'vault/helpers/add-to-array';
 
 const TOKEN_SEPARATOR = '☃';
 const TOKEN_PREFIX = 'vault-';
@@ -250,7 +251,6 @@ export default Service.extend({
 
   persistAuthData() {
     const [firstArg, resp] = arguments;
-    const tokens = this.tokens;
     const currentNamespace = this.namespaceService.path || '';
     // dropdown vs tab format
     const mountPath = firstArg?.data?.path || firstArg?.selectedAuth;
@@ -303,8 +303,7 @@ export default Service.extend({
     if (!data.displayName) {
       data.displayName = (this.getTokenData(tokenName) || {}).displayName;
     }
-    tokens.addObject(tokenName);
-    this.set('tokens', tokens);
+    this.set('tokens', addToArray(this.tokens, tokenName));
     this.set('allowExpiration', false);
     this.setTokenData(tokenName, data);
     return resolve({