create util (#16130)

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

@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
+import handleHasManySelection from 'core/utils/search-select-has-many';
 
 /**
  * @module MfaLoginEnforcementForm
@@ -115,21 +116,9 @@ export default class MfaLoginEnforcementForm extends Component {
   @action
   async onMethodChange(selectedIds) {
     const methods = await this.args.model.mfa_methods;
-    // first check for existing methods that have been removed from selection
-    methods.forEach((method) => {
-      if (!selectedIds.includes(method.id)) {
-        methods.removeObject(method);
-      }
-    });
-    // now check for selected items that don't exist and add them to the model
-    const methodIds = methods.mapBy('id');
-    selectedIds.forEach((id) => {
-      if (!methodIds.includes(id)) {
-        const model = this.store.peekRecord('mfa-method', id);
-        methods.addObject(model);
-      }
-    });
+    handleHasManySelection(selectedIds, methods, this.store, 'mfa-method');
   }
+
   @action
   onTargetSelect(type) {
     this.selectedTargetType = type;

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

@@ -15,7 +15,7 @@ import layout from '../templates/components/search-select';
  *
  * @param {string} id - The name of the form field
  * @param {Array} models - An array of model types to fetch from the API.
- * @param {function} onChange - The onchange action for this form field.
+ * @param {function} onChange - The onchange action for this form field. ** SEE UTIL ** search-select-has-many.js if selecting models from a hasMany relationship
  * @param {string | Array} inputValue -  A comma-separated string or an array of strings -- array of ids for models.
  * @param {string} label - Label for this form field
  * @param {string} fallbackComponent - name of component to be rendered if the API call 403s

ui/lib/core/addon/utils/search-select-has-many.js

@@ -0,0 +1,33 @@
+/**
+ * Util to add/remove models in a hasMany relationship via the search-select component
+ *
+ * @example of using the util within an action in a component
+ *```js
+ * @action
+ * async onSearchSelectChange(selectedIds) {
+ *    const methods = await this.args.model.mfa_methods;
+ *   handleHasManySelection(selectedIds, methods, this.store, 'mfa-method');
+ *  }
+ *
+ * @param selectedIds array of selected options from search-select component
+ * @param modelCollection array-like, list of models from the hasMany relationship
+ * @param store the store so we can call peekRecord()
+ * @param modelRecord string passed to peekRecord
+ */
+
+export default function handleHasManySelection(selectedIds, modelCollection, store, modelRecord) {
+  // first check for existing models that have been removed from selection
+  modelCollection.forEach((model) => {
+    if (!selectedIds.includes(model.id)) {
+      modelCollection.removeObject(model);
+    }
+  });
+  // now check for selected items that don't exist and add them to the model
+  const modelIds = modelCollection.mapBy('id');
+  selectedIds.forEach((id) => {
+    if (!modelIds.includes(id)) {
+      const model = store.peekRecord(modelRecord, id);
+      modelCollection.addObject(model);
+    }
+  });
+}