@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.3

package/components/fleet/__tests__/FleetClusters.test.ts

@@ -90,36 +90,36 @@ describe('component: FleetClusters', () => {
       const wrapper = createWrapper();
       const reposReady = wrapper.vm.headers.find((h: any) => h.name === 'reposReady');
 
-      expect(reposReady.labelKey).toBe('tableHeaders.reposReady');
-      expect(reposReady.value).toBe('status.readyGitRepos');
-      expect(reposReady.search).toBe(false);
+      expect(reposReady?.labelKey).toBe('tableHeaders.reposReady');
+      expect(reposReady?.value).toBe('status.readyGitRepos');
+      expect(reposReady?.search).toBe(false);
     });
 
     it('should configure helmOpsReady column correctly', () => {
       const wrapper = createWrapper();
       const helmOpsReady = wrapper.vm.headers.find((h: any) => h.name === 'helmOpsReady');
 
-      expect(helmOpsReady.labelKey).toBe('tableHeaders.helmOpsReady');
-      expect(helmOpsReady.value).toBe('status.readyHelmOps');
-      expect(helmOpsReady.search).toBe(false);
+      expect(helmOpsReady?.labelKey).toBe('tableHeaders.helmOpsReady');
+      expect(helmOpsReady?.value).toBe('status.readyHelmOps');
+      expect(helmOpsReady?.search).toBe(false);
     });
 
     it('should configure bundlesReady column correctly', () => {
       const wrapper = createWrapper();
       const bundlesReady = wrapper.vm.headers.find((h: any) => h.name === 'bundlesReady');
 
-      expect(bundlesReady.labelKey).toBe('tableHeaders.bundlesReady');
-      expect(bundlesReady.value).toBe('status.display.readyBundles');
-      expect(bundlesReady.search).toBe(false);
+      expect(bundlesReady?.labelKey).toBe('tableHeaders.bundlesReady');
+      expect(bundlesReady?.value).toBe('status.display.readyBundles');
+      expect(bundlesReady?.search).toBe(false);
     });
 
     it('should configure lastSeen column with LiveDate formatter', () => {
       const wrapper = createWrapper();
       const lastSeen = wrapper.vm.headers.find((h: any) => h.name === 'lastSeen');
 
-      expect(lastSeen.formatter).toBe('LiveDate');
-      expect(lastSeen.formatterOpts).toStrictEqual({ addSuffix: true });
-      expect(lastSeen.width).toBe(120);
+      expect(lastSeen?.formatter).toBe('LiveDate');
+      expect(lastSeen?.formatterOpts).toStrictEqual({ addSuffix: true });
+      expect(lastSeen?.width).toBe(120);
     });
   });
 

package/components/form/InputWithSelect.vue

@@ -1,18 +1,22 @@
 <script>
-import labeledFormElement from '@shell/mixins/labeled-form-element';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Select from '@shell/components/form/Select';
+import { computed } from 'vue';
+import { _VIEW, _EDIT } from '@shell/config/query-params';
+
 export default {
-  name:       'InputWithSelect',
+  name: 'InputWithSelect',
+
+  inheritAttrs: false,
+
   emits:      ['update:value'],
   components: {
     LabeledInput,
     LabeledSelect,
     Select,
   },
-  mixins: [labeledFormElement],
-  props:  {
+  props: {
     disabled: {
       type:    Boolean,
       default: false,
@@ -84,10 +88,20 @@ export default {
     selectRules: {
       default: () => [],
       type:    Array,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
     }
 
   },
 
+  setup(props) {
+    const isView = computed(() => props.mode === _VIEW);
+
+    return { isView };
+  },
+
   data() {
     return {
       selected: this.selectValue || this.options[0].value,
@@ -95,12 +109,6 @@ export default {
     };
   },
 
-  computed: {
-    canPaginate() {
-      return false;
-    }
-  },
-
   methods: {
     focus() {
       const comp = this.$refs.text;

package/components/form/KeyValue.vue

@@ -778,11 +778,16 @@ export default {
                     @onInput="onInputMarkdownMultiline(i, $event)"
                     @onFocus="onFocusMarkdownMultiline(i, $event)"
                   />
+                  <div
+                    v-else-if="valueConcealed"
+                    class="concealed-value conceal"
+                    data-testid="concealed-value"
+                    :aria-label="t('generic.ariaLabel.value', {index: i+1})"
+                  />
                   <TextAreaAutoGrow
                     v-else-if="valueMultiline && row[valueName] !== undefined"
                     v-model:value="row[valueName]"
                     data-testid="value-multiline"
-                    :class="{'conceal': valueConcealed}"
                     :disabled="disabled"
                     :mode="mode"
                     :placeholder="_valuePlaceholder"
@@ -809,6 +814,7 @@ export default {
                     class="btn btn-sm role-secondary file-selector"
                     :label="t('generic.upload')"
                     :include-file-name="true"
+                    :accept="readAccept"
                     :aria-label="t('generic.ariaLabel.value', {index: i+1})"
                     @selected="onValueFileSelected(i, $event)"
                   />
@@ -896,6 +902,7 @@ export default {
           class="role-tertiary"
           :label="t('generic.readFromFile')"
           :include-file-name="true"
+          :accept="readAccept"
           data-testid="read_all_key_value_button"
           @selected="onFileSelected"
         />
@@ -941,6 +948,15 @@ export default {
         padding: 10px 10px 10px 10px;
       }
 
+      .concealed-value {
+        padding: 10px;
+        min-height: 40px;
+        user-select: none;
+        &::before {
+          content: '••••••••••••••••••••';
+        }
+      }
+
       .text-monospace:not(.conceal) {
         font-family: monospace, monospace;
       }

package/components/form/LabeledSelect.vue

@@ -1,17 +1,19 @@
 <script>
 import CompactInput from '@shell/mixins/compact-input';
-import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import { get } from '@shell/utils/object';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { calculatePosition } from '@shell/utils/select';
 import { generateRandomAlphaString } from '@shell/utils/string';
-import LabeledSelectPagination from '@shell/components/form/labeled-select-utils/labeled-select-pagination';
+import { useLabeledSelectPagination, labeledSelectPaginationProps } from '@shell/components/form/labeled-select-utils/useLabeledSelectPagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
 import { mapGetters } from 'vuex';
 import { _VIEW } from '@shell/config/query-params';
 import { useClickOutside } from '@shell/composables/useClickOutside';
-import { ref } from 'vue';
+import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
+import { useLabeledSelect } from '@shell/composables/useLabeledSelect';
+import { ref, toRef } from 'vue';
+import { useVeeValidateField } from '@shell/composables/useVeeValidateField';
 
 export default {
   name: 'LabeledSelect',
@@ -21,14 +23,18 @@ export default {
   components: { LabeledTooltip },
   mixins:     [
     CompactInput,
-    LabeledFormElement,
     VueSelectOverrides,
-    LabeledSelectPagination
   ],
 
-  emits: ['on-open', 'on-close', 'selecting', 'deselecting', 'search', 'update:validation', 'update:value'],
+  emits: ['on-open', 'on-close', 'on-focus', 'on-blur', 'selecting', 'deselecting', 'search', 'update:validation', 'update:value'],
 
   props: {
+    ...labeledFormElementProps,
+    ...labeledSelectPaginationProps,
+    value: {
+      default: null,
+      type:    [String, Object, Number, Array, Boolean]
+    },
     appendToBody: {
       default: true,
       type:    Boolean,
@@ -37,14 +43,6 @@ export default {
       default: false,
       type:    Boolean
     },
-    disabled: {
-      default: false,
-      type:    Boolean
-    },
-    required: {
-      default: false,
-      type:    Boolean
-    },
     hoverTooltip: {
       default: true,
       type:    Boolean
@@ -99,14 +97,18 @@ export default {
       default: null,
       type:    [String, Object]
     },
-    value: {
-      default: null,
-      type:    [String, Object, Number, Array, Boolean]
-    },
     options: {
       type:    Array,
       default: () => ([])
     },
+    searchable: {
+      default: false,
+      type:    Boolean
+    },
+    filterable: {
+      default: true,
+      type:    Boolean
+    },
     closeOnSelect: {
       type:    Boolean,
       default: true
@@ -114,10 +116,15 @@ export default {
     noOptionsLabelKey: {
       type:    String,
       default: 'labelSelect.noOptions.empty'
+    },
+
+    name: {
+      type:    String,
+      default: null
     }
   },
 
-  setup() {
+  setup(props, { emit }) {
     const select = ref(null);
     const isOpen = ref(false);
 
@@ -125,7 +132,76 @@ export default {
       isOpen.value = false;
     });
 
-    return { isOpen, select };
+    const {
+      raised,
+      focused,
+      blurred,
+      empty,
+      isView,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField
+    } = useLabeledFormElement(props, emit);
+
+    const {
+      canPaginate,
+      canLoadMore,
+      optionCounts,
+      _options,
+      pages,
+      totalResults,
+      paginating,
+      loadMore,
+      setPaginationFilter,
+    } = useLabeledSelectPagination(props);
+
+    const {
+      isSearchable,
+      isFilterable,
+      resizeHandler: resizeHandlerFn
+    } = useLabeledSelect(props, canPaginate);
+
+    const resizeHandler = () => {
+      resizeHandlerFn(select);
+    };
+
+    const { effectiveValidationMessage, veeHandleBlur, veeValidate } = useVeeValidateField({
+      name:  toRef(props, 'name'),
+      rules: toRef(props, 'rules'),
+      value: toRef(props, 'value'),
+      validationMessage,
+    });
+
+    return {
+      isOpen,
+      select,
+      raised,
+      focused,
+      blurred,
+      empty,
+      isView,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage: effectiveValidationMessage,
+      requiredField,
+      isSearchable,
+      isFilterable,
+      resizeHandler,
+      canPaginate,
+      canLoadMore,
+      optionCounts,
+      _options,
+      pages,
+      totalResults,
+      paginating,
+      loadMore,
+      setPaginationFilter,
+      veeHandleBlur,
+      veeValidate,
+    };
   },
 
   data() {
@@ -148,11 +224,6 @@ export default {
       return this.canPaginate ? !!this._options.find((o) => o.kind === 'group' && !!o.icon) : false;
     },
 
-    _options() {
-      // If we're paginated show the page as provided by `paginate`. See label-select-pagination mixin
-      return this.canPaginate ? this.page : this.options;
-    },
-
     filteredAttrs() {
       const {
         class: _class,
@@ -165,7 +236,7 @@ export default {
     // update placeholder text to inform user they can add their own opts when none are found
     showTagPrompts() {
       return !this.options.length && this.$attrs.taggable && this.isSearchable;
-    }
+    },
   },
 
   methods: {
@@ -207,13 +278,17 @@ export default {
     },
 
     onFocus() {
+      this.$emit('on-focus');
       this.selectedVisibility = 'hidden';
       this.onFocusLabeled();
     },
 
     onBlur() {
+      this.$emit('on-blur');
       this.selectedVisibility = 'visible';
       this.onBlurLabeled();
+      this.veeHandleBlur(undefined, false);
+      this.veeValidate();
     },
 
     onOpen() {

package/components/form/NameNsDescription.vue

@@ -164,6 +164,14 @@ export default {
       }),
       type: Object,
     },
+    nameFieldName: {
+      type:    String,
+      default: null,
+    },
+    namespaceFieldName: {
+      type:    String,
+      default: null,
+    },
 
     /**
      * Inherited global identifier prefix for tests
@@ -438,6 +446,7 @@ export default {
       <LabeledInput
         ref="namespaceInput"
         v-model:value="namespace"
+        :name="namespaceFieldName"
         :label="t('namespace.label')"
         :placeholder="t('namespace.createNamespace')"
         :disabled="namespaceReallyDisabled"
@@ -464,6 +473,7 @@ export default {
       <LabeledSelect
         v-show="!createNamespace"
         v-model:value="namespace"
+        :name="namespaceFieldName"
         :clearable="true"
         :options="options"
         :disabled="namespaceReallyDisabled"
@@ -487,6 +497,7 @@ export default {
         ref="nameInput"
         key="name"
         v-model:value="name"
+        :name="nameFieldName"
         data-testid="NameNsDescriptionNameInput"
         :label="t(nameLabel)"
         :placeholder="t(namePlaceholder)"

package/components/form/Security.vue

@@ -140,11 +140,12 @@ export default {
         this.afterPrivilegedTickedMessage = this.t('workload.container.security.privileged.afterTick.false');
       }
 
-      if (securityContext.fsGroup === '') {
+      // Drop empty values so we don't send a string for int64 fields.
+      if (securityContext.fsGroup === '' || securityContext.fsGroup === null || securityContext.fsGroup === undefined) {
         delete securityContext.fsGroup;
       }
 
-      if (securityContext.runAsUser === '') {
+      if (securityContext.runAsUser === '' || securityContext.runAsUser === null || securityContext.runAsUser === undefined) {
         delete securityContext.runAsUser;
       }
 
@@ -175,6 +176,7 @@ export default {
             ref="firstFocusable"
             v-model:value.number="securityContext.fsGroup"
             type="number"
+            min="0"
             :mode="mode"
             :label="t('workload.container.security.fsGroup')"
             @update:value="update"
@@ -283,6 +285,8 @@ export default {
           </legend>
           <LabeledInput
             v-model:value.number="securityContext.runAsUser"
+            type="number"
+            min="0"
             :label="t('workload.container.security.runAsUser.label')"
             :mode="mode"
             @update:value="update"

package/components/form/Select.vue

@@ -1,39 +1,38 @@
 <script>
 import { get } from '@shell/utils/object';
-import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { generateRandomAlphaString } from '@shell/utils/string';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import { calculatePosition } from '@shell/utils/select';
 import { _VIEW } from '@shell/config/query-params';
 import { useClickOutside } from '@shell/composables/useClickOutside';
+import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
+import { useLabeledSelect } from '@shell/composables/useLabeledSelect';
 import { ref } from 'vue';
 
 export default {
-  emits: ['update:value', 'createdListItem', 'on-open', 'on-close'],
+  inheritAttrs: false,
+
+  emits: ['update:value', 'createdListItem', 'on-open', 'on-close', 'on-focus', 'on-blur', 'update:validation'],
 
   components: { LabeledTooltip },
   mixins:     [
-    LabeledFormElement,
     VueSelectOverrides,
   ],
   props: {
+    ...labeledFormElementProps,
+    value: {
+      default: null,
+      type:    [String, Object, Number, Array, Boolean],
+    },
     appendToBody: {
       default: true,
       type:    Boolean,
     },
-    disabled: {
-      default: false,
-      type:    Boolean,
-    },
     getKeyForOption: {
       default: null,
       type:    Function
     },
-    mode: {
-      default: 'edit',
-      type:    String,
-    },
     optionKey: {
       default: null,
       type:    String,
@@ -46,10 +45,6 @@ export default {
       default: null,
       type:    String,
     },
-    placeholder: {
-      type:    String,
-      default: '',
-    },
     popperOverride: {
       type:    Function,
       default: null,
@@ -78,10 +73,6 @@ export default {
       type:    String,
       default: null,
     },
-    value: {
-      default: null,
-      type:    [String, Object, Number, Array, Boolean],
-    },
     closeOnSelect: {
       type:    Boolean,
       default: true,
@@ -99,8 +90,20 @@ export default {
       default: false,
       type:    Boolean
     },
+    options: {
+      type:    Array,
+      default: () => ([])
+    },
+    searchable: {
+      default: false,
+      type:    Boolean
+    },
+    filterable: {
+      default: true,
+      type:    Boolean
+    },
   },
-  setup() {
+  setup(props, { emit }) {
     const select = ref(null);
     const isOpen = ref(false);
 
@@ -108,13 +111,61 @@ export default {
       isOpen.value = false;
     });
 
-    return { isOpen, select };
+    const {
+      raised,
+      focused,
+      blurred,
+      empty,
+      isView,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField
+    } = useLabeledFormElement(props, emit);
+
+    const onFocus = () => {
+      emit('on-focus');
+      onFocusLabeled();
+    };
+
+    const onBlur = () => {
+      emit('on-blur');
+      onBlurLabeled();
+    };
+
+    const {
+      isSearchable,
+      isFilterable,
+      resizeHandler: resizeHandlerFn
+    } = useLabeledSelect(props);
+
+    const resizeHandler = () => {
+      resizeHandlerFn(select);
+    };
+
+    return {
+      isOpen,
+      select,
+      raised,
+      focused,
+      blurred,
+      empty,
+      isView,
+      onFocus,
+      onBlur,
+      isDisabled,
+      validationMessage,
+      requiredField,
+      isSearchable,
+      isFilterable,
+      resizeHandler
+    };
   },
   data() {
     return { generatedUid: `s-uid-${ generateRandomAlphaString(12) }` };
   },
   methods: {
-    // resizeHandler = in mixin
     getOptionLabel(option) {
       if (this.$attrs['get-option-label']) {
         return this.$attrs['get-option-label'](option);
@@ -252,40 +303,6 @@ export default {
     },
   },
   computed: {
-    requiredField() {
-      // using "any" for a type on "rule" here is dirty but the use of the optional chaining operator makes it safe for what we're doing here.
-      return (this.required || this.rules.some((rule) => rule?.name === 'required'));
-    },
-    validationMessage() {
-      // we want to grab the required rule passed in if we can but if it's not there then we can just grab it from the formRulesGenerator
-      const requiredRule = this.rules.find((rule) => rule?.name === 'required');
-      const ruleMessages = [];
-      const value = this?.value;
-
-      if (requiredRule && this.blurred && !this.focused) {
-        const message = requiredRule(value);
-
-        if (!!message) {
-          return message;
-        }
-      }
-
-      for (const rule of this.rules) {
-        const message = rule(value);
-
-        if (!!message && rule.name !== 'required') { // we're catching 'required' above so we can ignore it here
-          ruleMessages.push(message);
-        }
-      }
-      if (ruleMessages.length > 0 && (this.blurred || this.focused)) {
-        return ruleMessages.join(', ');
-      } else {
-        return undefined;
-      }
-    },
-    canPaginate() {
-      return false;
-    },
     deClassedAttrs() {
       const { class: _, ...rest } = this.$attrs;
 

package/components/form/ServiceNameSelect.vue

@@ -1,16 +1,16 @@
 <script>
-import labeledFormElement from '@shell/mixins/labeled-form-element';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { Banner } from '@components/Banner';
 import { _VIEW } from '@shell/config/query-params';
+import { computed } from 'vue';
 
 export default {
+  inheritAttrs: false,
+
   emits: ['update:value'],
 
   components: { LabeledSelect, Banner },
 
-  mixins: [labeledFormElement],
-
   props: {
     disabled: {
       type:    Boolean,
@@ -66,6 +66,16 @@ export default {
       type:    Boolean,
       default: false,
     },
+    value: {
+      type:    String,
+      default: null
+    }
+  },
+
+  setup(props) {
+    const isView = computed(() => props.mode === _VIEW);
+
+    return { isView };
   },
 
   data() {
@@ -73,10 +83,6 @@ export default {
   },
 
   computed: {
-    isView() {
-      return this.mode === _VIEW;
-    },
-
     serviceNameNew() {
       if (!this.selected) {
         return false;
@@ -88,10 +94,6 @@ export default {
     serviceName() {
       return this.reduce(this.selected);
     },
-
-    canPaginate() {
-      return false;
-    },
   },
 
   methods: {