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

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,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/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 },