@rancher/shell 0.3.26 → 0.3.28

package/rancher-components/StringList/StringList.vue

@@ -30,10 +30,10 @@ const CLASS = {
  * Manage a list of strings
  */
 export default Vue.extend({
-
-  name:       'StringList',
   components: { LabeledInput },
 
+  name: 'StringList',
+
   props: {
     /**
      * The items source
@@ -85,11 +85,11 @@ export default Vue.extend({
   },
   data() {
     return {
-      value:        null as string | null,
-      selected:     null as string | null,
-      editedItem:   null as string | null,
-      isCreateItem: false,
-      errors:       { duplicate: false } as Record<Error, boolean>
+      value:             null as string | null,
+      selected:          null as string | null,
+      isEditItem:        null as string | null,
+      isCreateItem:      false,
+      errors:            { duplicate: false } as Record<Error, boolean>
     };
   },
 
@@ -100,8 +100,8 @@ export default Vue.extend({
      */
     errorMessagesArray(): string[] {
       return (Object.keys(this.errors) as Error[])
-        .filter((f) => this.errors[f] && this.errorMessages[f])
-        .map((k) => this.errorMessages[k]);
+        .filter(f => !!(this.errors)[f])
+        .map(k => this.errorMessages[k]);
     },
   },
 
@@ -113,35 +113,23 @@ export default Vue.extend({
       this.toggleEditMode(false);
       this.toggleCreateMode(false);
     },
-    value(val) {
-      this.$emit('type:item', val);
-    },
-    errors: {
-      handler(val) {
-        this.$emit('errors', val);
-      },
-      deep: true
-    }
   },
 
   methods: {
     onChange(value: string) {
       this.value = value;
-
-      const items = [
-        ...this.items,
-        this.value
-      ];
-
+      /**
+       * Remove duplicate error when a new value is typed
+       */
       this.toggleError(
         'duplicate',
-        hasDuplicatedStrings(items, this.caseSensitive),
-        this.isCreateItem ? INPUT.create : INPUT.edit
+        false,
+        this.isCreateItem ? INPUT.create : INPUT.edit,
       );
     },
 
     onSelect(item: string) {
-      if (this.readonly || this.isCreateItem || this.editedItem === item) {
+      if (this.isCreateItem || this.isEditItem === item) {
         return;
       }
       this.selected = item;
@@ -172,7 +160,7 @@ export default Vue.extend({
     },
 
     onClickEmptyBody() {
-      if (!this.isCreateItem && !this.editedItem) {
+      if (!this.isCreateItem && !this.isEditItem) {
         this.toggleCreateMode(true);
       }
     },
@@ -188,43 +176,38 @@ export default Vue.extend({
 
         return;
       }
-      if (this.editedItem) {
-        this.deleteAndSelectNext(this.editedItem);
+      if (this.isEditItem) {
         this.toggleEditMode(false);
 
         return;
       }
       if (this.selected) {
-        this.deleteAndSelectNext(this.selected);
-      }
-    },
-
-    deleteAndSelectNext(currItem: string) {
-      const index = findStringIndex(this.items, currItem, false);
+        const index = findStringIndex(this.items, this.selected, false);
 
-      if (index !== -1) {
-        /**
-         * Select the next item in the list.
-         */
-        const item = (this.items[index + 1] || this.items[index - 1]);
+        if (index !== -1) {
+          /**
+           * Select the next item in the list when an item is to be deleted.
+           */
+          const item = (this.items[index + 1] || this.items[index - 1]);
 
-        this.onSelect(item);
-        this.setFocus(item);
+          this.onSelect(item);
+          this.setFocus(item);
 
-        this.deleteItem(this.items[index]);
+          this.deleteItem(this.items[index]);
+        }
       }
     },
 
     setFocus(refId: string) {
-      this.$nextTick(() => (this.getElemByRef(refId) as Vue & HTMLElement)?.focus());
+      this.$nextTick(() => this.getElemByRef(refId)?.focus());
     },
 
     /**
      * Move scrollbar when the selected item is over the top or bottom side of the box
      */
     moveScrollbar(arrow: Arrow, value?: number) {
-      const box = this.getElemByRef(BOX) as HTMLElement;
-      const item = this.getElemByRef(this.selected || '') as HTMLElement;
+      const box = this.getElemByRef(BOX);
+      const item = this.getElemByRef(this.selected || '');
 
       if (box && item && item.className.includes(CLASS.item)) {
         const boxRect = box.getClientRects()[0];
@@ -246,14 +229,13 @@ export default Vue.extend({
      */
     toggleError(type: Error, val: boolean, refId?: string) {
       this.errors[type] = val;
-
       if (refId) {
         this.toggleErrorClass(refId, val);
       }
     },
 
     toggleErrorClass(refId: string, val: boolean) {
-      const input = (this.getElemByRef(refId) as Vue)?.$el;
+      const input = this.getElemByRef(refId)?.$el;
 
       if (input) {
         if (val) {
@@ -268,11 +250,7 @@ export default Vue.extend({
      * Show/Hide the input line to create new item
      */
     toggleCreateMode(show: boolean) {
-      if (this.readonly) {
-        return;
-      }
       if (show) {
-        this.toggleEditMode(false);
         this.value = '';
 
         this.isCreateItem = true;
@@ -290,34 +268,31 @@ export default Vue.extend({
      * Show/Hide the in-line editing to edit an existing item
      */
     toggleEditMode(show: boolean, item?: string) {
-      if (this.readonly) {
-        return;
-      }
       if (show) {
         this.toggleCreateMode(false);
-        this.value = this.editedItem;
+        this.value = this.isEditItem;
 
-        this.editedItem = item || '';
+        this.isEditItem = item || '';
         this.setFocus(INPUT.edit);
       } else {
         this.value = null;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
-        this.editedItem = null;
+        this.isEditItem = null;
       }
     },
 
     getElemByRef(id: string) {
       const ref = this.$refs[id];
 
-      return Array.isArray(ref) ? ref[0] : ref;
+      return (Array.isArray(ref) ? ref[0] : ref) as any;
     },
 
     /**
      * Create a new item and insert in the items list
      */
-    saveItem(closeInput = true) {
+    saveItem() {
       const value = this.value?.trim();
 
       if (value) {
@@ -326,20 +301,21 @@ export default Vue.extend({
           value,
         ];
 
-        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
-          this.updateItems(items);
+        if (hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.toggleError('duplicate', true, INPUT.create);
+
+          return;
         }
-      }
 
-      if (closeInput) {
-        this.toggleCreateMode(false);
+        this.updateItems(items);
       }
+      this.toggleCreateMode(false);
     },
 
     /**
      * Update an existing item in the items list
      */
-    updateItem(item: string, closeInput = true) {
+    updateItem(item: string) {
       const value = this.value?.trim();
 
       if (value) {
@@ -350,21 +326,22 @@ export default Vue.extend({
           items[index] = value;
         }
 
-        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
-          this.updateItems(items);
+        if (hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.toggleError('duplicate', true, INPUT.edit);
+
+          return;
         }
-      }
 
-      if (closeInput) {
-        this.toggleEditMode(false);
+        this.updateItems(items);
       }
+      this.toggleEditMode(false);
     },
 
     /**
      * Remove an item from items list
      */
     deleteItem(item?: string) {
-      const items = this.items.filter((f) => f !== item);
+      const items = this.items.filter(f => f !== item);
 
       this.updateItems(items);
     },
@@ -410,20 +387,19 @@ export default Vue.extend({
         @blur="onSelectLeave(item)"
       >
         <span
-          v-if="!editedItem || editedItem !== item"
+          v-if="!isEditItem || isEditItem !== item"
           class="label static"
         >
           {{ item }}
         </span>
         <LabeledInput
-          v-if="editedItem && editedItem === item"
+          v-if="isEditItem && isEditItem === item"
           ref="item-edit"
-          :data-testid="`item-edit-${item}`"
           class="edit-input static"
           :value="value != null ? value : item"
           @input="onChange($event)"
-          @blur.prevent="updateItem(item)"
-          @keydown.native.enter="updateItem(item, !errors.duplicate)"
+          @blur.prevent="toggleEditMode(false)"
+          @keydown.native.enter="updateItem(item)"
         />
       </div>
       <div
@@ -432,14 +408,12 @@ export default Vue.extend({
       >
         <LabeledInput
           ref="item-create"
-          data-testid="item-create"
           class="create-input static"
           type="text"
           :value="value"
           :placeholder="placeholder"
           @input="onChange($event)"
-          @blur.prevent="saveItem"
-          @keydown.native.enter="saveItem(!errors.duplicate)"
+          @keydown.native.enter="saveItem"
         />
       </div>
     </div>
@@ -453,32 +427,25 @@ export default Vue.extend({
         class="action-buttons"
       >
         <button
-          data-testid="button-remove"
           class="btn btn-sm role-tertiary remove-button"
-          :disabled="!selected && !isCreateItem && !editedItem"
+          :disabled="!selected && !isCreateItem && !isEditItem"
           @mousedown.prevent="onClickMinusButton"
         >
           <span class="icon icon-minus icon-sm" />
         </button>
         <button
-          data-testid="button-add"
           class="btn btn-sm role-tertiary add-button"
-          :disabled="isCreateItem || editedItem"
+          :disabled="isCreateItem"
           @click.prevent="onClickPlusButton"
         >
           <span class="icon icon-plus icon-sm" />
         </button>
       </div>
       <div class="messages">
-        <i
-          v-if="errorMessagesArray.length > 0"
-          data-testid="i-warning-icon"
-          class="icon icon-warning icon-lg"
-        />
+        <i v-if="errorMessagesArray.length > 0" class="icon icon-warning icon-lg" />
         <span
           v-for="(msg, idx) in errorMessagesArray"
           :key="idx"
-          :data-testid="`span-error-message-${msg}`"
           class="error"
         >
           {{ idx > 0 ? '; ' : '' }}
@@ -532,7 +499,6 @@ export default Vue.extend({
         width: auto;
         user-select: none;
         overflow: hidden;
-        white-space: no-wrap;
         text-overflow: ellipsis;
         padding-top: 1px;
       }

package/rancher-components/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/components/Form/Radio/RadioGroup.vue

@@ -169,6 +169,7 @@ export default Vue.extend({
 
 <template>
   <div>
+    <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
       class="radio-group label"
@@ -195,6 +196,8 @@ export default Vue.extend({
         </h3>
       </slot>
     </div>
+
+    <!-- Group -->
     <div
       class="radio-group"
       :class="{'row':row}"
@@ -212,6 +215,7 @@ export default Vue.extend({
           :is-disabled="isDisabled"
           :name="i"
         >
+          <!-- Default input -->
           <RadioButton
             :key="name+'-'+i"
             :name="name"

package/rancher-components/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'];