@rancher/shell 0.3.29 → 0.5.0

package/rancher-components/Form/Radio/RadioButton.vue

@@ -1,8 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
+import { randomStr } from '@shell/utils/string';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * The name of the input, for grouping.
@@ -71,7 +72,10 @@ export default Vue.extend({
   },
 
   data() {
-    return { isChecked: this.value === this.val };
+    return {
+      isChecked:    this.value === this.val,
+      randomString: `${ randomStr() }-radio`,
+    };
   },
 
   computed: {
@@ -115,13 +119,15 @@ export default Vue.extend({
     /**
      * Emits the input event.
      */
-    clicked({ target }: { target?: HTMLElement }) {
-      if (this.isDisabled || target?.tagName === 'A') {
+    clicked(event: MouseEvent | KeyboardEvent) {
+      const target = event.target;
+
+      if (this.isDisabled || (target instanceof HTMLElement && target.tagName === 'A')) {
         return;
       }
 
       this.$emit('input', this.val);
-    }
+    },
   }
 });
 </script>
@@ -134,7 +140,7 @@ export default Vue.extend({
     @click.stop="clicked($event)"
   >
     <input
-      :id="_uid+'-radio'"
+      :id="randomString"
       :disabled="isDisabled"
       :name="name"
       :value="''+val"

package/rancher-components/Form/Radio/RadioGroup.test.ts

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import { RadioGroup } from './index';
+
+describe('component: RadioGroup', () => {
+  describe('when disabled', () => {
+    it.each([true, false])('should expose disabled slot prop for indexed slots for %p', (disabled) => {
+      const wrapper = mount(RadioGroup, {
+        propsData: {
+          name:    'whatever',
+          options: [{ label: 'whatever', value: 'whatever' }],
+          disabled
+        },
+        scopedSlots: {
+          0(props: {isDisabled: boolean}) {
+            return this.$createElement('input', {
+              attrs: {
+                id:       'test',
+                disabled: props.isDisabled
+              }
+            });
+          }
+        }
+      });
+
+      const slot = wrapper.find('#test').element as HTMLInputElement;
+
+      expect(slot.disabled).toBe(disabled);
+    });
+  });
+});

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -1,14 +1,15 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 
 interface Option {
   value: unknown,
-  label: string
+  label: string,
+  description?: string,
 }
 
-export default Vue.extend({
+export default defineComponent({
   components: { RadioButton },
   props:      {
     /**
@@ -169,6 +170,7 @@ export default Vue.extend({
 
 <template>
   <div>
+    <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
       class="radio-group label"
@@ -195,6 +197,8 @@ export default Vue.extend({
         </h3>
       </slot>
     </div>
+
+    <!-- Group -->
     <div
       class="radio-group"
       :class="{'row':row}"
@@ -212,6 +216,7 @@ export default Vue.extend({
           :is-disabled="isDisabled"
           :name="i"
         >
+          <!-- Default input -->
           <RadioButton
             :key="name+'-'+i"
             :name="name"

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
@@ -10,7 +10,7 @@ declare module 'vue/types/vue' {
   }
 }
 
-export default Vue.extend({
+export default defineComponent({
   inheritAttrs: false,
 
   props: {
@@ -115,7 +115,9 @@ export default Vue.extend({
     /**
      * Emits the input event and resizes the Text Area.
     */
-    onInput(val: string): void {
+    onInput(event: Event): void {
+      const val = (event?.target as HTMLInputElement)?.value;
+
       this.$emit('input', val);
       this.queueResize();
     },
@@ -163,7 +165,7 @@ export default Vue.extend({
     v-bind="$attrs"
     :spellcheck="spellcheck"
     @paste="$emit('paste', $event)"
-    @input="onInput($event.target.value)"
+    @input="onInput($event)"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"
   />

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -1,6 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+
+type StateType = boolean | 'true' | 'false' | undefined;
+
+export default defineComponent({
   props: {
     value: {
       type:    [Boolean, String, Number],
@@ -28,7 +31,7 @@ export default Vue.extend({
     },
   },
   data() {
-    return { state: false as boolean | string | number };
+    return { state: false as StateType };
   },
 
   watch: {
@@ -41,7 +44,7 @@ export default Vue.extend({
   },
 
   methods: {
-    toggle(neu: boolean | string | number) {
+    toggle(neu: StateType | null) {
       this.state = neu === null ? !this.state : neu;
       this.$emit('input', this.state ? this.onValue : this.offValue);
     }

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * The Labeled Tooltip value.
@@ -29,9 +29,14 @@ export default Vue.extend({
     }
   },
   computed: {
-    iconClass() {
+    iconClass(): string {
       return this.status === 'error' ? 'icon-warning' : 'icon-info';
     }
+  },
+  methods: {
+    isObject(value: string | Record<string, unknown>): value is Record<string, unknown> {
+      return typeof value === 'object' && value !== null && !!value.content;
+    }
   }
 });
 </script>
@@ -44,7 +49,7 @@ export default Vue.extend({
   >
     <template v-if="hover">
       <i
-        v-clean-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
+        v-clean-tooltip="isObject(value) ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
       />

package/rancher-components/StringList/StringList.test.ts

@@ -398,6 +398,276 @@ describe('stringList.vue', () => {
     });
   });
 
+  describe('bulk delimiter', () => {
+    const delimiter = /;/;
+
+    describe('add', () => {
+      const items: string[] = [];
+
+      beforeEach(() => {
+        wrapper = mount(StringList, {
+          propsData: {
+            items,
+            bulkAdditionDelimiter: delimiter,
+            errorMessages:         { duplicate: 'error, item is duplicate.' },
+          }
+        });
+      });
+
+      it('should split values if delimiter set', async() => {
+        const value = 'test;test1;test2';
+        const result = ['test', 'test1', 'test2'];
+
+        // activate create mode
+        await wrapper.setData({ isCreateItem: true });
+        const inputField = wrapper.find('[data-testid="item-create"]');
+
+        await inputField.setValue(value);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+
+        expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
+      });
+
+      it('should show warning if one of the values is a duplicate', async() => {
+        const value = 'test;test1;test2';
+
+        await wrapper.setProps({ items: ['test1'] });
+
+        // activate create mode
+        await wrapper.setData({ isCreateItem: true });
+        const inputField = wrapper.find('[data-testid="item-create"]');
+
+        await inputField.setValue(value);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const isDuplicate = (wrapper.emitted('errors') || [])[0][0].duplicate;
+
+        expect(isDuplicate).toBe(true);
+      });
+
+      it('should show a warning if the new values are all duplicates', async() => {
+        const value = 'test;test';
+
+        // activate create mode
+        await wrapper.setData({ isCreateItem: true });
+        const inputField = wrapper.find('[data-testid="item-create"]');
+
+        await inputField.setValue(value);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const isDuplicate = (wrapper.emitted('errors') || [])[0][0].duplicate;
+
+        expect(isDuplicate).toBe(true);
+      });
+
+      it('should not consider empty strings at the beginning', async() => {
+        const value = ';test;test1;test2';
+        const result = ['test', 'test1', 'test2'];
+
+        // activate create mode
+        await wrapper.setData({ isCreateItem: true });
+        const inputField = wrapper.find('[data-testid="item-create"]');
+
+        await inputField.setValue(value);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+
+        expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
+      });
+
+      it('should not consider empty strings in the middle', async() => {
+        const value = 'test;test1;;test2';
+        const result = ['test', 'test1', 'test2'];
+
+        // activate create mode
+        await wrapper.setData({ isCreateItem: true });
+        const inputField = wrapper.find('[data-testid="item-create"]');
+
+        await inputField.setValue(value);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+
+        expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
+      });
+
+      it('should not consider empty strings at the end', async() => {
+        const value = 'test;test1;test2;';
+        const result = ['test', 'test1', 'test2'];
+
+        // activate create mode
+        await wrapper.setData({ isCreateItem: true });
+        const inputField = wrapper.find('[data-testid="item-create"]');
+
+        await inputField.setValue(value);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+
+        expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
+      });
+    });
+
+    describe('edit', () => {
+      const items = ['test1', 'test2'];
+
+      beforeEach(() => {
+        wrapper = mount(StringList, {
+          propsData: {
+            items,
+            bulkAdditionDelimiter: delimiter,
+            errorMessages:         { duplicate: 'error, item is duplicate.' },
+          }
+        });
+      });
+
+      it('should split values if delimiter set', async() => {
+        const newValue = 'test1;new;values';
+        const result = ['test1', 'new', 'values', 'test2'];
+
+        await wrapper.setData({ editedItem: items[0] });
+        const inputField = wrapper.find('[data-testid^="item-edit"]');
+
+        await inputField.setValue(newValue);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+
+        expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
+      });
+
+      it('should show warning if one of the values is a duplicate', async() => {
+        const newValue = 'test1;test2';
+
+        await wrapper.setData({ editedItem: items[0] });
+        const inputField = wrapper.find('[data-testid^="item-edit"]');
+
+        await inputField.setValue(newValue);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const isDuplicate = (wrapper.emitted('errors') || [])[0][0].duplicate;
+
+        expect(isDuplicate).toBe(true);
+      });
+
+      it('should show a warning if the new values are all duplicates', async() => {
+        const newValue = 'test;test';
+
+        await wrapper.setData({ editedItem: items[0] });
+        const inputField = wrapper.find('[data-testid^="item-edit"]');
+
+        await inputField.setValue(newValue);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const isDuplicate = (wrapper.emitted('errors') || [])[0][0].duplicate;
+
+        expect(isDuplicate).toBe(true);
+      });
+
+      it('should not consider empty strings at the beginning', async() => {
+        const newValue = ';test1;new;value';
+        const result = ['test1', 'new', 'value', 'test2'];
+
+        await wrapper.setData({ editedItem: items[0] });
+        const inputField = wrapper.find('[data-testid^="item-edit"]');
+
+        await inputField.setValue(newValue);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+
+        expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
+      });
+
+      it('should not consider empty strings in the middle 1', async() => {
+        const newValue = 'test1; ;new;value';
+        const result = ['test1', 'new', 'value', 'test2'];
+
+        await wrapper.setData({ editedItem: items[0] });
+        const inputField = wrapper.find('[data-testid^="item-edit"]');
+
+        await inputField.setValue(newValue);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+
+        expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
+      });
+
+      it('should not consider empty strings in the middle 2', async() => {
+        const newValue = 'test1;;new;value';
+        const result = ['test1', 'new', 'value', 'test2'];
+
+        await wrapper.setData({ editedItem: items[0] });
+        const inputField = wrapper.find('[data-testid^="item-edit"]');
+
+        await inputField.setValue(newValue);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+
+        expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
+      });
+
+      it('should not consider empty strings at the end', async() => {
+        const newValue = 'test1;new;value;';
+        const result = ['test1', 'new', 'value', 'test2'];
+
+        await wrapper.setData({ editedItem: items[0] });
+        const inputField = wrapper.find('[data-testid^="item-edit"]');
+
+        await inputField.setValue(newValue);
+
+        // press enter
+        await inputField.trigger('keydown.enter');
+        await wrapper.vm.$nextTick();
+
+        const itemsResult = (wrapper.emitted('change') || [])[0][0];
+
+        expect(JSON.stringify(itemsResult)).toBe(JSON.stringify(result));
+      });
+    });
+  });
+
   describe('errors handling', () => {
     it('show duplicate warning icon when errorMessages is defined', async() => {
       const items = ['test'];

package/rancher-components/StringList/StringList.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import Vue, { PropType, defineComponent } from 'vue';
 
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { findStringIndex, hasDuplicatedStrings } from '@shell/utils/array';
@@ -29,7 +29,7 @@ const CLASS = {
 /**
  * Manage a list of strings
  */
-export default Vue.extend({
+export default defineComponent({
 
   name:       'StringList',
   components: { LabeledInput },
@@ -82,12 +82,19 @@ export default Vue.extend({
         return {} as ErrorMessages;
       },
     },
+    /**
+     * Enables bulk addition and defines the delimiter to split the input string.
+     */
+    bulkAdditionDelimiter: {
+      type:    RegExp,
+      default: null,
+    }
   },
   data() {
     return {
-      value:        null as string | null,
+      value:        undefined as string | undefined,
       selected:     null as string | null,
-      editedItem:   null as string | null,
+      editedItem:   undefined as string | undefined,
       isCreateItem: false,
       errors:       { duplicate: false } as Record<Error, boolean>
     };
@@ -125,13 +132,9 @@ export default Vue.extend({
   },
 
   methods: {
-    onChange(value: string) {
+    onChange(value: string, index?: number) {
       this.value = value;
-
-      const items = [
-        ...this.items,
-        this.value
-      ];
+      const items = this.addValueToItems(this.items, value, index);
 
       this.toggleError(
         'duplicate',
@@ -278,7 +281,7 @@ export default Vue.extend({
         this.isCreateItem = true;
         this.setFocus(INPUT.create);
       } else {
-        this.value = null;
+        this.value = undefined;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
@@ -300,11 +303,11 @@ export default Vue.extend({
         this.editedItem = item || '';
         this.setFocus(INPUT.edit);
       } else {
-        this.value = null;
+        this.value = undefined;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
-        this.editedItem = null;
+        this.editedItem = undefined;
       }
     },
 
@@ -321,10 +324,7 @@ export default Vue.extend({
       const value = this.value?.trim();
 
       if (value) {
-        const items = [
-          ...this.items,
-          value,
-        ];
+        const items = this.addValueToItems(this.items, value);
 
         if (!hasDuplicatedStrings(items, this.caseSensitive)) {
           this.updateItems(items);
@@ -343,12 +343,8 @@ export default Vue.extend({
       const value = this.value?.trim();
 
       if (value) {
-        const items = [...this.items];
-        const index = findStringIndex(items, item, false);
-
-        if (index !== -1) {
-          items[index] = value;
-        }
+        const index = findStringIndex(this.items, item, false);
+        const items = index !== -1 ? this.addValueToItems(this.items, value, index) : this.items;
 
         if (!hasDuplicatedStrings(items, this.caseSensitive)) {
           this.updateItems(items);
@@ -360,6 +356,49 @@ export default Vue.extend({
       }
     },
 
+    /**
+     * Add a new or update an exiting item in the items list.
+     *
+     * @param items The current items list.
+     * @param value The new value to be added.
+     * @param index The list index of the item to be updated (optional).
+     * @returns Updated items list.
+     */
+    addValueToItems(items: string[], value: string, index?: number): string[] {
+      const updatedItems = [...items];
+
+      // Add new item
+      if (index === undefined) {
+        if (this.bulkAdditionDelimiter && value.search(this.bulkAdditionDelimiter) >= 0) {
+          updatedItems.push(...this.splitBulkValue(value));
+        } else {
+          updatedItems.push(value);
+        }
+      } else { // Update existing item
+        if (this.bulkAdditionDelimiter && value.search(this.bulkAdditionDelimiter) >= 0) {
+          updatedItems.splice(index, 1, ...this.splitBulkValue(value));
+        } else {
+          updatedItems[index] = value;
+        }
+      }
+
+      return updatedItems;
+    },
+
+    /**
+     * Split the value by the defined delimiter and remove empty strings.
+     *
+     * @param value The value to be split.
+     * @returns Array containing split values.
+     */
+    splitBulkValue(value: string): string[] {
+      return value
+        .split(this.bulkAdditionDelimiter)
+        .filter((item) => {
+          return item.trim().length > 0;
+        });
+    },
+
     /**
      * Remove an item from items list
      */
@@ -393,7 +432,7 @@ export default Vue.extend({
       @dblclick="onClickEmptyBody()"
     >
       <div
-        v-for="item in items"
+        v-for="(item, index) in items"
         :key="item"
         :ref="item"
         :class="{
@@ -421,7 +460,7 @@ export default Vue.extend({
           :data-testid="`item-edit-${item}`"
           class="edit-input static"
           :value="value != null ? value : item"
-          @input="onChange($event)"
+          @input="onChange($event, index)"
           @blur.prevent="updateItem(item)"
           @keydown.native.enter="updateItem(item, !errors.duplicate)"
         />
@@ -463,7 +502,7 @@ export default Vue.extend({
         <button
           data-testid="button-add"
           class="btn btn-sm role-tertiary add-button"
-          :disabled="isCreateItem || editedItem"
+          :disabled="!!isCreateItem || !!editedItem"
           @click.prevent="onClickPlusButton"
         >
           <span class="icon icon-plus icon-sm" />