@rancher/shell 3.0.11 → 3.0.12-rc.2

package/components/form/LabeledSelect.vue

@@ -1,16 +1,17 @@
 <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 { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
+import { useLabeledSelect } from '@shell/composables/useLabeledSelect';
 import { ref } from 'vue';
 
 export default {
@@ -21,14 +22,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 +42,6 @@ export default {
       default: false,
       type:    Boolean
     },
-    disabled: {
-      default: false,
-      type:    Boolean
-    },
-    required: {
-      default: false,
-      type:    Boolean
-    },
     hoverTooltip: {
       default: true,
       type:    Boolean
@@ -99,14 +96,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
@@ -117,7 +118,7 @@ export default {
     }
   },
 
-  setup() {
+  setup(props, { emit }) {
     const select = ref(null);
     const isOpen = ref(false);
 
@@ -125,7 +126,67 @@ 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);
+    };
+
+    return {
+      isOpen,
+      select,
+      raised,
+      focused,
+      blurred,
+      empty,
+      isView,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField,
+      isSearchable,
+      isFilterable,
+      resizeHandler,
+      canPaginate,
+      canLoadMore,
+      optionCounts,
+      _options,
+      pages,
+      totalResults,
+      paginating,
+      loadMore,
+      setPaginationFilter,
+    };
   },
 
   data() {
@@ -148,11 +209,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,
@@ -207,11 +263,13 @@ export default {
     },
 
     onFocus() {
+      this.$emit('on-focus');
       this.selectedVisibility = 'hidden';
       this.onFocusLabeled();
     },
 
     onBlur() {
+      this.$emit('on-blur');
       this.selectedVisibility = 'visible';
       this.onBlurLabeled();
     },

package/components/form/NodeScheduling.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { RadioGroup } from '@components/Form/Radio';
 import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import NodeAffinity from '@shell/components/form/NodeAffinity.vue';
 import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 import { _VIEW } from '@shell/config/query-params';
@@ -18,6 +19,7 @@ const parseNode = (node: string | KubeNode) => typeof node === 'string' ? node :
 export default {
   components: {
     RadioGroup,
+    LabeledSelect,
     ResourceLabeledSelect,
     NodeAffinity,
   },
@@ -35,7 +37,7 @@ export default {
      */
     nodes: {
       type:    Array,
-      default: () => []
+      default: () => null
     },
 
     mode: {
@@ -218,14 +220,14 @@ export default {
       handler(nodeSelector) {
         // Harvester specific code should not live in rancher/dashboard components
         // This was brought into harvester/dashboard via https://github.com/harvester/dashboard/pull/342
-        // rancher/dashboard via https://github.com/rancher/dashboard/pull/6310
+        // and then rancher/dashboard via https://github.com/rancher/dashboard/pull/6310
         if (this.isHarvester && nodeSelector?.[HOSTNAME]) {
           this.selectNode = 'nodeSelector';
           const nodeName = nodeSelector[HOSTNAME];
 
           this.nodeName = nodeName;
 
-          const array = this.nodes.map((n) => n.value);
+          const array = this.nodes?.map((n) => n.value) || [];
 
           if (nodeName && !array.includes(nodeName)) {
             this.$store.dispatch('growl/error', {
@@ -259,7 +261,19 @@ export default {
     <template v-if="selectNode === 'nodeSelector'">
       <div class="row">
         <div class="col span-6">
+          <LabeledSelect
+            v-if="nodes"
+            v-model:value="nodeName"
+            :label="t('workload.scheduling.affinity.nodeName')"
+            :options="nodes || []"
+            :mode="mode"
+            :multiple="false"
+            :loading="loading"
+            :data-testid="'node-scheduling-nodeSelector'"
+            @update:value="update"
+          />
           <ResourceLabeledSelect
+            v-else
             v-model:value="nodeName"
             :label="t('workload.scheduling.affinity.nodeName')"
             :resource-type="NODE"

package/components/form/PrivateRegistry.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import Banner from '@components/Banner/Banner.vue';
+import { Checkbox } from '@components/Form/Checkbox';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+
+const props = defineProps<{
+  value?: string | null;
+  enabled?: boolean;
+  mode?: string;
+  rules?: Function[];
+  checkboxTestId?: string;
+  inputTestId?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:value': [val: string | null];
+  'update:enabled': [val: boolean];
+}>();
+
+const showInput = ref(!!props.value);
+
+watch(() => props.enabled, (neu) => {
+  if (typeof neu === 'boolean' && neu !== showInput.value) {
+    showInput.value = neu;
+  }
+});
+
+watch(showInput, (neu, old) => {
+  if (neu !== props.enabled) {
+    emit('update:enabled', neu);
+  }
+  if (!neu && old && props.value) {
+    emit('update:value', null);
+  }
+});
+
+watch(() => props.value, (neu) => {
+  if (!!neu && !showInput.value) {
+    showInput.value = true;
+  }
+});
+</script>
+
+<template>
+  <Banner
+    color="info"
+    class="mt-0"
+    label-key="cluster.privateRegistry.importedDescription"
+  />
+  <Checkbox
+    v-model:value="showInput"
+    class="mb-20"
+    :mode="mode"
+    :label="t('cluster.privateRegistry.label')"
+    :data-testid="checkboxTestId"
+  />
+  <LabeledInput
+    v-if="showInput"
+    :value="value as string"
+    :mode="mode"
+    :rules="rules"
+    :required="true"
+    label-key="catalog.chart.registry.custom.inputLabel"
+    :data-testid="inputTestId"
+    :placeholder="t('catalog.chart.registry.custom.placeholder')"
+    @update:value="(val) => emit('update:value', val)"
+  />
+</template>

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: {

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

@@ -177,6 +177,72 @@ describe('component: KeyValue', () => {
     expect(firstValueInput.element.value).toBe('testvalue1');
   });
 
+  describe('valueConcealed', () => {
+    it('should not render actual secret values in the DOM when valueConcealed is true', () => {
+      const secretValue = 'super-secret-api-key-12345';
+      const wrapper = mount(KeyValue, {
+        props: {
+          value:          { mySecret: secretValue },
+          mode:           'view',
+          valueConcealed: true,
+        },
+
+        global: {
+          mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+          stubs: { CodeMirror: true },
+        },
+      });
+
+      const concealedEl = wrapper.find('[data-testid="concealed-value"]');
+
+      expect(concealedEl.exists()).toBe(true);
+      expect(wrapper.html()).not.toContain(secretValue);
+    });
+
+    it('should render a TextAreaAutoGrow with the real value when valueConcealed is false', () => {
+      const secretValue = 'visible-value';
+      const wrapper = mount(KeyValue, {
+        props: {
+          value:          { myKey: secretValue },
+          mode:           'view',
+          valueConcealed: false,
+        },
+
+        global: {
+          mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+          stubs: { CodeMirror: true },
+        },
+      });
+
+      const concealedEl = wrapper.find('[data-testid="concealed-value"]');
+
+      expect(concealedEl.exists()).toBe(false);
+
+      const multilineEl = wrapper.find('[data-testid="value-multiline"]');
+
+      expect(multilineEl.exists()).toBe(true);
+    });
+
+    it('should have user-select none on the concealed placeholder to prevent text selection', () => {
+      const wrapper = mount(KeyValue, {
+        props: {
+          value:          { mySecret: 'secret' },
+          mode:           'view',
+          valueConcealed: true,
+        },
+
+        global: {
+          mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+          stubs: { CodeMirror: true },
+        },
+      });
+
+      const concealedEl = wrapper.find('[data-testid="concealed-value"]');
+
+      expect(concealedEl.classes()).toContain('concealed-value');
+    });
+  });
+
   it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
     const value = [{ key: 'testkey1', value: 'testvalue1' }];
 

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

@@ -1,9 +1,18 @@
 import { mount } from '@vue/test-utils';
 import NodeScheduling from '@shell/components/form/NodeScheduling.vue';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
+import { createStore } from 'vuex';
 
 const requiredSetup = () => {
   return {
+    provide: {
+      store: createStore({
+        getters: {
+          currentStore:                () => 'cluster',
+          'cluster/paginationEnabled': () => () => false,
+        },
+      }),
+    },
     global: {
       mocks: {
         $fetchState: { pending: false },