dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

package/components/form/ResourceTabs/index.vue

@@ -68,6 +68,10 @@ export default {
     extensionParams: {
       type:    Object,
       default: null
+    },
+    useHash: {
+      type:    Boolean,
+      default: true
     }
   },
 
@@ -195,7 +199,7 @@ export default {
         pagination.filters = [];
       }
 
-      const field = `involvedObject.uid`; // Pending API Support - https://github.com/rancher/rancher/issues/48603
+      const field = `involvedObject.uid`;
 
       // of type PaginationParamFilter
       let existing = null;
@@ -232,6 +236,8 @@ export default {
   <Tabbed
     v-bind="$attrs"
     :default-tab="defaultTab"
+    :resource="value"
+    :use-hash="useHash"
     @changed="tabChange"
   >
     <slot />

package/components/form/SSHKnownHosts/index.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import KnownHostsEditDialog from './KnownHostsEditDialog.vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
 export default defineComponent({
@@ -20,8 +19,6 @@ export default defineComponent({
     },
   },
 
-  components: { KnownHostsEditDialog },
-
   computed: {
     isViewMode() {
       return this.mode === _VIEW;
@@ -40,7 +37,20 @@ export default defineComponent({
   methods: {
     openDialog() {
       (this.$refs.button as HTMLInputElement)?.blur();
-      (this.$refs.editDialog as any).showDialog();
+
+      this.$store.dispatch('management/promptModal', {
+        component:           'KnownHostsEditDialog',
+        returnFocusSelector: '#known-ssh-hosts-trigger',
+        testId:              'sshKnownHostsDialog',
+        height:              'auto',
+        componentProps:      {
+          mode:   this.mode,
+          value:  this.value,
+          closed: (res: any) => {
+            this.dialogClosed(res);
+          }
+        }
+      });
     },
 
     dialogClosed(result: any) {
@@ -78,13 +88,6 @@ export default defineComponent({
           :alt="t('secret.ssh.editKnownHosts.title')"
         />
       </button>
-
-      <KnownHostsEditDialog
-        ref="editDialog"
-        :value="value"
-        :mode="mode"
-        @closed="dialogClosed"
-      />
     </template>
   </div>
 </template>

package/components/form/SecretSelector.vue

@@ -138,6 +138,13 @@ export default {
     }
   },
 
+  watch: {
+    namespace() {
+      // Namespace has changed, reset the selections
+      this.$emit('update:value', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: undefined, [this.keyKey]: '' } } });
+    }
+  },
+
   methods: {
     /**
      * Provide a set of options for the LabelSelect ([none, ...{label, value}])
@@ -173,11 +180,18 @@ export default {
     paginatePageOptions(opts) {
       const { opts: { filter } } = opts;
 
-      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({
+        field: 'metadata.name', value: filter, exact: false, equals: true
+      })] : [];
 
       filters.push(
         PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.namespace }),
-        PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
+        PaginationParamFilter.createMultipleFields(this.types.map((t) => ({
+          field:  'metadata.fields.1',
+          equals: true,
+          exact:  true,
+          value:  t
+        })))
       );
 
       return {
@@ -201,6 +215,7 @@ export default {
     <div class="input-container">
       <!-- key by namespace to ensure label select current page is recreated on ns change -->
       <ResourceLabeledSelect
+        :key="namespace"
         v-model:value="name"
         :disabled="!isView && disabled"
         :label="secretNameLabel"
@@ -212,6 +227,7 @@ export default {
       />
       <LabeledSelect
         v-if="showKeySelector"
+        :key="namespace"
         v-model:value="key"
         class="col span-6"
         :disabled="isKeyDisabled"

package/components/form/Select.vue

@@ -5,6 +5,9 @@ import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { generateRandomAlphaString } from '@shell/utils/string';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
+import { _VIEW } from '@shell/config/query-params';
+import { useClickOutside } from '@shell/composables/useClickOutside';
+import { ref } from 'vue';
 
 export default {
   emits: ['update:value', 'createdListItem', 'on-open', 'on-close'],
@@ -81,7 +84,7 @@ export default {
     },
     closeOnSelect: {
       type:    Boolean,
-      default: true
+      default: true,
     },
 
     compact: {
@@ -93,11 +96,18 @@ export default {
       default: false
     }
   },
+  setup() {
+    const select = ref(null);
+    const isOpen = ref(false);
+
+    useClickOutside(select, () => {
+      isOpen.value = false;
+    });
+
+    return { isOpen, select };
+  },
   data() {
-    return {
-      isOpen:       false,
-      generatedUid: `s-uid-${ generateRandomAlphaString(12) }`
-    };
+    return { generatedUid: `s-uid-${ generateRandomAlphaString(12) }` };
   },
   methods: {
     // resizeHandler = in mixin
@@ -124,24 +134,20 @@ export default {
       calculatePosition(dropdownList, component, width, this.placement);
     },
 
-    focusSearch() {
-      // we need this override as in a "closeOnSelect" type of component
-      // if we don't have this override, it would open again
-      if (this.overridesMixinPreventDoubleTriggerKeysOpen) {
-        this.$nextTick(() => {
-          const el = this.$refs['select'];
-
-          if ( el ) {
-            el.focus();
-          }
+    // Ensure we only focus on open, otherwise we re-open on close
+    clickSelect(ev) {
+      if (this.mode === _VIEW || this.loading === true || this.disabled === true) {
+        return;
+      }
 
-          this.overridesMixinPreventDoubleTriggerKeysOpen = false;
-        });
+      this.isOpen = !this.isOpen;
 
-        return;
+      if (this.isOpen) {
+        this.focusSearch(ev);
       }
-      this.$refs['select-input'].open = true;
+    },
 
+    focusSearch() {
       this.$nextTick(() => {
         const el = this.$refs['select-input']?.searchEl;
 
@@ -151,6 +157,10 @@ export default {
       });
     },
 
+    focusWrapper() {
+      this.$refs.select.focus();
+    },
+
     get,
 
     onClickOption(option, event) {
@@ -203,19 +213,36 @@ export default {
     },
 
     handleDropdownOpen(args) {
+      if (!this.isOpen) {
+        return false;
+      }
+
       // function that prevents the "opening dropdown on focus"
       // default behaviour of v-select
       return args.noDrop || args.disabled ? false : args.open;
     },
     onOpen() {
-      this.isOpen = true;
+      this.focusSearch();
       this.$emit('on-open');
       this.resizeHandler();
     },
 
-    onClose() {
+    closeOnSelecting() {
+      if (!this.closeOnSelect) {
+        return;
+      }
+
+      this.close();
+    },
+
+    close() {
       this.isOpen = false;
+      this.onClose();
+    },
+
+    onClose() {
       this.$emit('on-close');
+      this.focusWrapper();
     },
   },
   computed: {
@@ -280,11 +307,12 @@ export default {
     role="combobox"
     :aria-expanded="isOpen"
     :aria-label="$attrs['aria-label'] || undefined"
+    :aria-labelledby="$attrs['aria-labelledby'] || undefined"
     :aria-describedby="$attrs['aria-describedby'] || undefined"
-    @click="focusSearch"
-    @keydown.enter="focusSearch"
-    @keydown.down.prevent="focusSearch"
-    @keydown.space.prevent="focusSearch"
+    @click="clickSelect"
+    @keydown.self.enter="clickSelect"
+    @keydown.self.down.prevent="clickSelect"
+    @keydown.self.space.prevent="clickSelect"
   >
     <v-select
       ref="select-input"
@@ -299,7 +327,7 @@ export default {
       :get-option-label="(opt) => getOptionLabel(opt)"
       :label="optionLabel"
       :options="options"
-      :close-on-select="closeOnSelect"
+      :close-on-select="false"
       :map-keydown="mappedKeys"
       :placeholder="placeholder"
       :reduce="(x) => reduce(x)"
@@ -317,6 +345,9 @@ export default {
       @open="onOpen"
       @close="onClose"
       @option:created="(e) => $emit('createdListItem', e)"
+      @option:selecting="closeOnSelecting"
+      @option:selected="closeOnSelect && close"
+      @keydown.enter.stop
     >
       <template #no-options>
         暂无数据

package/components/form/SelectOrCreateAuthSecret.vue

@@ -237,7 +237,7 @@ export default {
       let filteredSecrets = [];
 
       if (this.allSecrets) {
-        // Fitler secrets given their namespace and required secret type
+        // Filter secrets given their namespace and required secret type
         filteredSecrets = this.allSecrets
           .filter((x) => this.filterByNamespace ? x.metadata.namespace === this.namespace : true
           )
@@ -450,6 +450,7 @@ export default {
             ),
           ],
         }),
+        watch: this.cacheSecrets,
       };
 
       if (this.cacheSecrets) {
@@ -464,9 +465,11 @@ export default {
         null,
         findPageArgs
       );
-      const res = await this.$store.dispatch(`cluster/request`, { url });
+      // Strictly speaking this could be any store (request action should be agnostic)
+      const res = await this.$store.dispatch(`${ this.inStore }/request`, { url });
 
-      return res?.data || [];
+      // Classify
+      return await this.$store.dispatch(`${ this.inStore }/createMany`, res?.data || []);
     },
 
     updateKeyVal() {

package/components/form/SimpleSecretSelector.vue

@@ -76,8 +76,11 @@ export default {
       key:                props.initialKey,
       none:               NONE,
       SECRET,
+      /**
+       * Of type @ResourceLabeledSelectSettings
+       */
       allSecretsSettings: {
-        mapResult: (secrets) => {
+        updateResources: (secrets) => {
           const allSecretsInNamespace = secrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
           const mappedSecrets = this.mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
 
@@ -86,9 +89,12 @@ export default {
           return mappedSecrets;
         }
       },
+      /**
+       * Of type @ResourceLabeledSelectPaginateSettings
+       */
       paginateSecretsSetting: {
         requestSettings: this.paginatePageOptions,
-        mapResult:       (secrets) => {
+        updateResources: (secrets) => {
           const mappedSecrets = this.mapSecrets(secrets);
 
           this.secrets = secrets; // We need the key from the selected secret. When paginating we won't touch the store, so just pass back here
@@ -151,11 +157,18 @@ export default {
     paginatePageOptions(opts) {
       const { opts: { filter } } = opts;
 
-      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({
+        field: 'metadata.name', value: filter, exact: false, equals: true
+      })] : [];
 
       filters.push(
         PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.namespace }),
-        PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
+        PaginationParamFilter.createMultipleFields(this.types.map((t) => ({
+          field:  'metadata.fields.1',
+          equals: true,
+          exact:  true,
+          value:  t
+        })))
       );
 
       return {

package/components/form/Taints.vue

@@ -30,7 +30,19 @@ export default {
     effectValues: {
       type:    Object,
       default: () => DEFAULT_EFFECT_VALUES
-    }
+    },
+    title: {
+      type:    String,
+      default: ''
+    },
+    addIcon: {
+      type:    String,
+      default: '',
+    },
+    addClass: {
+      type:    String,
+      default: '',
+    },
   },
 
   data() {
@@ -38,6 +50,10 @@ export default {
   },
 
   computed: {
+    _title() {
+      return this.title || this.t('tableHeaders.taints');
+    },
+
     localValue: {
       get() {
         return this.value;
@@ -60,7 +76,7 @@ export default {
     <KeyValue
       :value="value"
       data-testid="taints-keyvalue"
-      :title="t('tableHeaders.taints')"
+      :title="_title"
       :mode="mode"
       :as-map="false"
       :read-allowed="false"
@@ -70,6 +86,8 @@ export default {
       :extra-columns="['effect']"
       :preserve-keys="['effect']"
       :add-label="t('labels.addTaint')"
+      :add-icon="addIcon"
+      :add-class="addClass"
       :disabled="disabled"
       @update:value="(e) => $emit('update:value', e)"
     >
@@ -82,6 +100,7 @@ export default {
           v-model:value="row.effect"
           :data-testid="`taints-effect-row-${i}`"
           :options="effectOptions"
+          :mode="mode"
           :disabled="disabled"
           class="compact-select"
           @update:value="queueUpdate"

package/components/form/UnitInput.vue

@@ -2,6 +2,7 @@
 import { parseSi, formatSi, UNITS, FRACTIONAL } from '@shell/utils/units';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { _EDIT } from '@shell/config/query-params';
+import { generateRandomAlphaString } from '@shell/utils/string';
 
 export default {
   components: { LabeledInput },
@@ -134,6 +135,22 @@ export default {
       type:    Boolean,
       default: false,
     },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * The sub-label for the Labeled Input.
+     */
+    subLabel: {
+      type:    String,
+      default: null
+    }
+  },
+
+  data() {
+    return { describedById: `unit-describedbyid-${ generateRandomAlphaString(12) }` };
   },
 
   computed: {
@@ -227,6 +244,7 @@ export default {
     type="number"
     :min="min"
     :mode="mode"
+    :disabled="disabled"
     :label="label"
     :delay="delay"
     :label-key="labelKey"
@@ -235,12 +253,15 @@ export default {
     :required="required"
     :placeholder="placeholder"
     :hide-arrows="hideArrows"
+    :aria-describedby="displayUnit ? describedById : undefined"
+    :sub-label="subLabel"
     @update:value="update"
     @blur="update($event.target.value)"
   >
     <template #suffixNew>
       <div
         v-if="displayUnit"
+        :id="describedById"
         class="addonNew"
         :class="{'with-tooltip': tooltip || tooltipKey}"
       >

package/components/form/ValueFromResource.vue

@@ -25,6 +25,20 @@ export default {
         return { valueFrom: {} };
       }
     },
+    options: {
+      type:    Array,
+      default: () => {
+        return [
+          { value: 'simple', label: 'Key/Value Pair' },
+          { value: 'resourceFieldRef', label: 'Resource' },
+          { value: 'configMapKeyRef', label: 'ConfigMap Key' },
+          { value: 'secretKeyRef', label: 'Secret Key' },
+          { value: 'fieldRef', label: 'Pod Field' },
+          { value: 'secretRef', label: 'Secret' },
+          { value: 'configMapRef', label: 'ConfigMap' },
+        ];
+      },
+    },
     allConfigMaps: {
       type:    Array,
       default: () => []
@@ -46,15 +60,6 @@ export default {
 
   data() {
     return {
-      typeOpts: [
-        { value: 'simple', label: 'Key/Value Pair' },
-        { value: 'resourceFieldRef', label: 'Resource' },
-        { value: 'configMapKeyRef', label: 'ConfigMap Key' },
-        { value: 'secretKeyRef', label: 'Secret key' },
-        { value: 'fieldRef', label: 'Pod Field' },
-        { value: 'secretRef', label: 'Secret' },
-        { value: 'configMapRef', label: 'ConfigMap' },
-      ],
       secrets:         this.allSecrets,
       resourceKeyOpts: ['limits.cpu', 'limits.ephemeral-storage', 'limits.memory', 'requests.cpu', 'requests.ephemeral-storage', 'requests.memory'],
     };
@@ -70,7 +75,7 @@ export default {
     } else if (props.value.value) {
       type.value = 'simple';
     } else if (props.value.valueFrom) {
-      type.value = Object.keys((props.value.valueFrom))[0] || 'simple';
+      type.value = Object.keys((props.value.valueFrom))[0] || props.options[0].value || 'simple';
     }
 
     const refName = ref('');
@@ -84,13 +89,13 @@ export default {
     switch (type.value) {
     case 'resourceFieldRef':
       name.value = props.value.name;
-      refName.value = props.value.valueFrom[type.value].containerName;
-      key.value = props.value.valueFrom[type.value].resource || '';
+      refName.value = props.value.valueFrom?.[type.value]?.containerName;
+      key.value = props.value.valueFrom?.[type.value]?.resource || '';
       break;
     case 'configMapKeyRef':
       name.value = props.value.name;
-      key.value = props.value.valueFrom[type.value].key || '';
-      refName.value = props.value.valueFrom[type.value].name;
+      key.value = props.value.valueFrom?.[type.value]?.key || '';
+      refName.value = props.value.valueFrom?.[type.value]?.name;
       referenced.value = props.allConfigMaps.filter((resource) => {
         return resource.metadata.name === refName.value;
       })[0];
@@ -101,12 +106,12 @@ export default {
     case 'secretRef':
     case 'configMapRef':
       name.value = props.value.prefix;
-      refName.value = props.value[type.value].name;
+      refName.value = props.value[type.value]?.name;
       break;
     case 'secretKeyRef':
       name.value = props.value.name;
-      key.value = props.value.valueFrom[type.value].key || '';
-      refName.value = props.value.valueFrom[type.value].name;
+      key.value = props.value.valueFrom?.[type.value]?.key || '';
+      refName.value = props.value.valueFrom?.[type.value]?.name;
       referenced.value = props.allSecrets.filter((resource) => {
         return resource.metadata.name === refName.value;
       })[0];
@@ -269,6 +274,10 @@ export default {
     extraColumn() {
       return ['resourceFieldRef', 'configMapKeyRef', 'secretKeyRef'].includes(this.type);
     },
+
+    hideVariableName() {
+      return this.options?.find((opt) => opt.value === this.type)?.hideVariableName || false;
+    }
   },
 };
 </script>
@@ -280,7 +289,7 @@ export default {
         v-model:value="type"
         :mode="mode"
         :multiple="false"
-        :options="typeOpts"
+        :options="options"
         option-label="label"
         :searchable="false"
         :reduce="e=>e.value"
@@ -289,7 +298,10 @@ export default {
       />
     </div>
 
-    <div class="name">
+    <div
+      v-if="!hideVariableName"
+      class="name"
+    >
       <LabeledInput
         v-model:value="name"
         :label="nameLabel"

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

@@ -80,6 +80,38 @@ describe('the ArrayList', () => {
     expect(arrayListButtons).toHaveLength(0);
   });
 
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const value = ['string 0', 'string 1', 'string 2'];
+
+    const wrapper = mount(ArrayList, {
+      props: {
+        value:      ['string 0', 'string 1', 'string 2'],
+        mode:       _EDIT,
+        showHeader: true,
+        a11yLabel:  'some-a11y-label',
+        title:      'some-title'
+      },
+    });
+
+    const mainContainer = wrapper.find('.array-list-main-container');
+    const colHeaderGroup = wrapper.find('.array-list-header-group');
+    const valueGroup = wrapper.find('[data-testid="array-list-box0"]');
+    const firstValueInput = wrapper.find('[data-testid="array-list-input-0"]');
+    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({ value: value[0] });
+
+    expect(mainContainer.attributes('role')).toBe('group');
+    expect(mainContainer.attributes('aria-label')).toBe('some-title');
+    expect(colHeaderGroup.attributes('role')).toBe('group');
+    expect(colHeaderGroup.find('label').text()).toBe('Value');
+    expect(valueGroup.attributes('role')).toBe('group');
+    expect(firstValueInput.attributes('aria-label')).toBe('some-a11y-label %generic.ariaLabel.genericRow%');
+    expect(rowRemove.attributes('aria-label')).toBe('%generic.ariaLabel.remove%');
+    expect(rowAdd.attributes('aria-label')).toBe('%generic.ariaLabel.genericAddRow%');
+  });
+
   describe('onPaste', () => {
     it('should emit value with updated row text', () => {
       const text = 'test';

package/components/form/__tests__/ColorInput.test.ts

@@ -24,4 +24,39 @@ describe('colorInput.vue', () => {
     expect(colorWrapper.classes()).not.toContain('disabled');
     expect(Object.keys(colorInput.attributes())).not.toContain('disabled');
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', () => {
+    const label = 'some-label';
+    const describeById = 'some-id';
+
+    const wrapper = shallowMount(ColorInput, {
+      props: { label },
+      attrs: { 'aria-describedby': describeById }
+    });
+
+    const colorInput = wrapper.find('input');
+    const ariaDisabled = colorInput.attributes('aria-disabled');
+    const ariaLabel = colorInput.attributes('aria-label');
+    const ariaDescribedBy = colorInput.attributes('aria-describedby');
+
+    expect(ariaDisabled).toBe('false');
+    expect(ariaLabel).toBe(label);
+    expect(ariaDescribedBy).toBe(describeById);
+  });
+
+  it('a11y: adding aria-label ($attrs) from parent should override label-based aria-label', () => {
+    const inputLabel = 'some-label';
+    const overrideLabel = 'some-override-label';
+
+    const wrapper = shallowMount(ColorInput, {
+      props: { label: inputLabel },
+      attrs: { 'aria-label': overrideLabel }
+    });
+
+    const colorInput = wrapper.find('input');
+    const ariaLabel = colorInput.attributes('aria-label');
+
+    expect(ariaLabel).toBe(overrideLabel);
+    expect(ariaLabel).not.toBe(inputLabel);
+  });
 });