@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.6

package/components/form/MatchExpressions.vue

@@ -8,7 +8,7 @@ import { convert, simplify } from '@shell/utils/selector';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {
-  emits: ['update:value', 'remove'],
+  emits: ['update:value', 'add', 'remove'],
 
   components: { Select, LabeledSelect },
   props:      {
@@ -54,6 +54,26 @@ export default {
       default: true
     },
 
+    labelKey: {
+      type:    String,
+      default: '',
+    },
+
+    addLabel: {
+      type:    String,
+      default: '',
+    },
+
+    addIcon: {
+      type:    String,
+      default: '',
+    },
+
+    addClass: {
+      type:    String,
+      default: '',
+    },
+
     // whether or not to show remove rule button right side of the rule
     showRemoveButton: {
       type:    Boolean,
@@ -146,6 +166,10 @@ export default {
       return this.mode === 'view';
     },
 
+    _addLabel() {
+      return this.addLabel || this.t('workload.scheduling.affinity.matchExpressions.addRule');
+    },
+
     node() {
       return NODE;
     },
@@ -212,6 +236,12 @@ export default {
       }
 
       this.rules.push(newRule);
+
+      this.$nextTick(() => {
+        this.focus(this.rules.length - 1);
+
+        this.$emit('add');
+      });
     },
 
     update() {
@@ -245,6 +275,10 @@ export default {
           this.$emit('update:value', simplify(out));
         }
       });
+    },
+
+    focus(index = 0) {
+      this.$refs[`input-match-expression-key-${ index }`]?.[0]?.focus();
     }
   }
 };
@@ -274,7 +308,7 @@ export default {
         {{ t('workload.scheduling.affinity.matchExpressions.matchType') }}
       </label>
       <label>
-        {{ t('workload.scheduling.affinity.matchExpressions.key') }}
+        {{ labelKey || t('workload.scheduling.affinity.matchExpressions.key') }}
       </label>
       <label>
         {{ t('workload.scheduling.affinity.matchExpressions.operator') }}
@@ -315,6 +349,7 @@ export default {
         </div>
         <input
           v-else-if="!hasKeySelectOptions"
+          :ref="`input-match-expression-key-${index}`"
           v-model="row.key"
           :mode="mode"
           :data-testid="`input-match-expression-key-control-${index}`"
@@ -322,6 +357,7 @@ export default {
         >
         <LabeledSelect
           v-else
+          :ref="`input-match-expression-key-${index}`"
           v-model:value="row.key"
           :mode="mode"
           :options="keysSelectOptions"
@@ -389,15 +425,20 @@ export default {
     </div>
     <div
       v-if="!isView && showAddButton"
-      class="mt-20"
+      class="mmt-4"
     >
       <button
         type="button"
         class="btn role-tertiary add"
-        :data-testid="`input-match-expression-add-rule`"
+        :class="[addClass]"
+        data-testid="input-match-expression-add-rule"
         @click="addRule"
       >
-        <t k="workload.scheduling.affinity.matchExpressions.addRule" />
+        <i
+          v-if="addIcon"
+          class="mr-5 icon"
+          :class="[addIcon]"
+        /> {{ _addLabel }}
       </button>
     </div>
   </div>

package/components/form/NameNsDescription.vue

@@ -319,7 +319,7 @@ export default {
     }
 
     if (props.descriptionKey) {
-      description.value = get(v, props.descriptionKey);
+      description.value = get(v.value, props.descriptionKey);
     } else {
       description.value = metadata?.annotations?.[DESCRIPTION];
     }

package/components/form/ResourceSelector.vue

@@ -103,6 +103,7 @@ export default {
         $store:        this.$store,
         inScopeCount:  this.allResourcesInScope,
         namespace:     this.namespace,
+        transient:     true,
       });
     }, 250, { leading: true }),
   }

package/components/form/ResourceTabs/index.vue

@@ -68,6 +68,10 @@ export default {
     extensionParams: {
       type:    Object,
       default: null
+    },
+    useHash: {
+      type:    Boolean,
+      default: true
     }
   },
 
@@ -233,6 +237,7 @@ export default {
     v-bind="$attrs"
     :default-tab="defaultTab"
     :resource="value"
+    :use-hash="useHash"
     @changed="tabChange"
   >
     <slot />

package/components/form/SecretSelector.vue

@@ -173,11 +173,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/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,16 +134,20 @@ export default {
       calculatePosition(dropdownList, component, width, this.placement);
     },
 
-    focusSearch(ev) {
-      const searchBox = document.querySelector('.vs__search');
-
-      // added to mitigate https://github.com/rancher/dashboard/issues/14361
-      if (!this.isSearchable || (searchBox && document.activeElement && !searchBox.contains(document.activeElement))) {
-        ev.preventDefault();
+    // 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.$refs['select-input'].open = true;
+      this.isOpen = !this.isOpen;
 
+      if (this.isOpen) {
+        this.focusSearch(ev);
+      }
+    },
+
+    focusSearch() {
       this.$nextTick(() => {
         const el = this.$refs['select-input']?.searchEl;
 
@@ -143,6 +157,10 @@ export default {
       });
     },
 
+    focusWrapper() {
+      this.$refs.select.focus();
+    },
+
     get,
 
     onClickOption(option, event) {
@@ -195,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: {
@@ -272,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="focusSearch"
+    @click="clickSelect"
+    @keydown.self.enter="clickSelect"
+    @keydown.self.down.prevent="clickSelect"
+    @keydown.self.space.prevent="clickSelect"
   >
     <v-select
       ref="select-input"
@@ -291,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)"
@@ -309,6 +345,8 @@ export default {
       @open="onOpen"
       @close="onClose"
       @option:created="(e) => $emit('createdListItem', e)"
+      @option:selecting="closeOnSelecting"
+      @option:selected="closeOnSelect && close"
       @keydown.enter.stop
     >
       <template

package/components/form/SimpleSecretSelector.vue

@@ -75,8 +75,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)));
 
@@ -85,9 +88,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
@@ -150,11 +156,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

@@ -140,6 +140,13 @@ export default {
       type:    Boolean,
       default: false,
     },
+    /**
+     * The sub-label for the Labeled Input.
+     */
+    subLabel: {
+      type:    String,
+      default: null
+    }
   },
 
   data() {
@@ -247,6 +254,7 @@ export default {
     :placeholder="placeholder"
     :hide-arrows="hideArrows"
     :aria-describedby="displayUnit ? describedById : undefined"
+    :sub-label="subLabel"
     @update:value="update"
     @blur="update($event.target.value)"
   >

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__/LabeledSelect.test.ts

@@ -168,9 +168,9 @@ describe('component: LabeledSelect', () => {
 
       await wrapper.trigger('click');
 
-      const dropdownOpen = wrapper.find('.vs--open');
+      const dropdownOpen = wrapper.vm.isOpen;
 
-      expect(dropdownOpen.exists()).toBe(isOpen);
+      expect(dropdownOpen).toBe(isOpen);
     });
   });
 
@@ -208,6 +208,7 @@ describe('component: LabeledSelect', () => {
       const wrapper = mount(ParentComponent);
 
       // https://test-utils.vuejs.org/guide/essentials/event-handling#Asserting-the-arguments-of-the-event
+      await wrapper.trigger('click');
       await wrapper.find('input').trigger('focus');
       await wrapper.find('.vs__dropdown-option').trigger('click');
 
@@ -267,7 +268,8 @@ describe('component: LabeledSelect', () => {
         value,
         label:      'some-label',
         options,
-        searchable: true
+        searchable: true,
+        loading:    false,
       }
     });
 
@@ -281,7 +283,9 @@ describe('component: LabeledSelect', () => {
     await input.trigger('keydown.enter');
 
     // mimic pressing space on search box inside v-select
-    await input.trigger('keydown.space', mockEvent);
+    const search = input.find('input');
+
+    await search.trigger('keydown.space', mockEvent);
 
     // eslint-disable-next-line
     expect(spyFocus).toHaveBeenCalled();