Revert: Add an id to track members of ArrayList.vue (#14742)

This reverts commit 6ee27db90d.

shell/components/form/ArrayList.vue

@@ -6,8 +6,6 @@ import { removeAt } from '@shell/utils/array';
 import { TextAreaAutoGrow } from '@components/Form/TextArea';
 import { clone } from '@shell/utils/object';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import { randomStr } from '@shell/utils/string';
-
 const DEFAULT_PROTIP = 'Tip: Paste lines into any list field for easy bulk entry';
 
 export default {
@@ -116,12 +114,12 @@ export default {
     const rows = ref([]);
 
     for ( const value of input ) {
-      rows.value.push({ value, id: randomStr() });
+      rows.value.push({ value });
     }
     if ( !rows.value.length && props.initialEmptyRow ) {
       const value = props.defaultAddValue ? clone(props.defaultAddValue) : '';
 
-      rows.value.push({ value, id: randomStr() });
+      rows.value.push({ value });
     }
 
     const isView = computed(() => {
@@ -166,19 +164,9 @@ export default {
 
     watch(
       () => props.value,
-      (newVal) => {
+      () => {
         lastUpdateWasFromValue.value = true;
-        const newRows = (newVal || []).map((value) => {
-          const existingRow = rows.value.find((row) => row.value === value);
-
-          if (existingRow) {
-            return { value, id: existingRow.id };
-          } else {
-            return { value, id: randomStr() };
-          }
-        });
-
-        rows.value = newRows;
+        rows.value = (props.value || []).map((v) => ({ value: v }));
       },
       { deep: true }
     );
@@ -223,10 +211,7 @@ export default {
   },
   methods: {
     add() {
-      this.rows.push({
-        value: clone(this.defaultAddValue),
-        id:    randomStr(),
-      });
+      this.rows.push({ value: clone(this.defaultAddValue) });
       if (this.defaultAddValue) {
         this.queueUpdate();
       }
@@ -316,7 +301,7 @@ export default {
         </div>
         <div
           v-for="(row, idx) in rows"
-          :key="row.id"
+          :key="idx"
           :data-testid="`${componentTestid}-box${ idx }`"
           class="box"
           :class="{'hide-remove-is-view': isView}"

shell/components/form/__tests__/ArrayList.test.ts

@@ -64,7 +64,7 @@ describe('the ArrayList', () => {
 
     expect(wrapper.find('[data-testid="array-list-remove-item-2"]').exists()).toBe(false);
     expect((wrapper.emitted('remove')![0][0] as any).row.value).toStrictEqual('string 1');
-    expect(wrapper.vm.rows).toStrictEqual([{ id: '', value: 'string 0' }, { id: '', value: 'string 2' }]);
+    expect(wrapper.vm.rows).toStrictEqual([{ value: 'string 0' }, { value: 'string 2' }]);
     expect(wrapper.emitted('update:value')![0][0]).toStrictEqual(['string 0', 'string 2']);
   });
 
@@ -100,7 +100,7 @@ describe('the ArrayList', () => {
     const rowRemove = wrapper.find('[data-testid="array-list-remove-item-0"]');
     const rowAdd = wrapper.find('[data-testid="array-list-button"]');
 
-    expect(wrapper.vm.rows[0]).toStrictEqual({ id: '', value: value[0] });
+    expect(wrapper.vm.rows[0]).toStrictEqual({ value: value[0] });
 
     expect(mainContainer.attributes('role')).toBe('group');
     expect(mainContainer.attributes('aria-label')).toBe('some-title');

shell/edit/networking.k8s.io.ingress/Rule.vue

@@ -2,7 +2,6 @@
 import RulePath from '@shell/edit/networking.k8s.io.ingress/RulePath';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { random32 } from '@shell/utils/string';
-import debounce from 'lodash/debounce';
 
 export default {
   emits:      ['update:value', 'remove'],
@@ -42,19 +41,6 @@ export default {
       ruleMode: this.value.asDefault ? 'asDefault' : 'setHost',
     };
   },
-  watch: {
-    host: {
-      handler: debounce(function() {
-        this.update();
-      }, 500),
-    },
-    paths: {
-      handler: debounce(function() {
-        this.update();
-      }, 500),
-      deep: true
-    }
-  },
   methods: {
     update() {
       const http = { paths: this.paths };
@@ -96,6 +82,7 @@ export default {
 
           path.focus();
         }
+        this.update();
       });
     },
     removePath(idx) {
@@ -103,6 +90,7 @@ export default {
 
       neu.splice(idx, 1);
       this.paths = neu;
+      this.update();
     },
     removeRule() {
       this.$emit('remove');
@@ -130,6 +118,7 @@ export default {
           :label="t('ingress.rules.requestHost.label')"
           :placeholder="t('ingress.rules.requestHost.placeholder')"
           :rules="rules.requestHost"
+          @update:value="update"
         />
       </div>
       <div
@@ -172,6 +161,7 @@ export default {
         :ingress="ingress"
         :rules="{path: rules.path, port: rules.port, target: rules.target}"
         @remove="(e) => removePath(i)"
+        @update:value="update"
       />
     </template>
     <button