@rancher/shell 0.4.0 → 0.5.0

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" />

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

@@ -0,0 +1,45 @@
+import { shallowMount } from '@vue/test-utils';
+import { Accordion } from './index';
+
+describe('component: Accordion', () => {
+  it('is closed initially by default', () => {
+    const title = 'Test Title';
+
+    const wrapper = shallowMount(Accordion, { propsData: { title } });
+
+    expect(wrapper.find('[data-testid="accordion-body"]').isVisible()).toBe(false);
+    expect(wrapper.find('[data-testid="accordion-header"]').text()).toBe(title);
+  });
+
+  it('is opened initially when openInitially prop is true', () => {
+    const wrapper = shallowMount(Accordion, { propsData: { openInitially: true } });
+
+    expect(wrapper.find('[data-testid="accordion-body"]').isVisible()).toBe(true);
+  });
+
+  it('when closed, opens when the header is clicked', async() => {
+    const wrapper = shallowMount(Accordion, { });
+
+    await wrapper.find('[data-testid="accordion-header"]').trigger('click');
+    expect(wrapper.find('[data-testid="accordion-body"]').isVisible()).toBe(true);
+  });
+
+  it('when open, closes when the header is clicked', async() => {
+    const wrapper = shallowMount(Accordion, { propsData: { openInitially: true } });
+
+    await wrapper.find('[data-testid="accordion-header"]').trigger('click');
+    expect(wrapper.find('[data-testid="accordion-body"]').isVisible()).toBe(false);
+  });
+
+  it('displays a chevron when closed', async() => {
+    const wrapper = shallowMount(Accordion, { propsData: { } });
+
+    expect(wrapper.find('[data-testid="accordion-header"] .icon-chevron-up').exists()).toBe(true);
+  });
+
+  it('displays an inverted chevron when open', async() => {
+    const wrapper = shallowMount(Accordion, { propsData: { openInitially: true } });
+
+    expect(wrapper.find('[data-testid="accordion-header"] .icon-chevron-down').exists()).toBe(true);
+  });
+});

package/rancher-components/components/Accordion/Accordion.vue

@@ -0,0 +1,86 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
+
+export default defineComponent({
+  props: {
+    title: {
+      type:    String,
+      default: ''
+    },
+
+    titleKey: {
+      type:    String,
+      default: null
+    },
+
+    openInitially: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return { isOpen: this.openInitially };
+  },
+
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+
+  methods: {
+    toggle() {
+      this.isOpen = !this.isOpen;
+    }
+  }
+});
+</script>
+
+<template>
+  <div class="accordion-container">
+    <div
+      class="accordion-header"
+      data-testid="accordion-header"
+      @click="toggle"
+    >
+      <i
+        class="icon text-primary"
+        :class="{'icon-chevron-down':isOpen, 'icon-chevron-up':!isOpen}"
+        data-testid="accordion-chevron"
+      />
+      <slot name="header">
+        <h4
+          data-testid="accordion-title-slot-content"
+          class="mb-0"
+        >
+          {{ titleKey ? t(titleKey) : title }}
+        </h4>
+      </slot>
+    </div>
+    <div
+      v-show="isOpen"
+      class="accordion-body"
+      data-testid="accordion-body"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.accordion-container {
+  border: 1px solid var(--border)
+}
+.accordion-header {
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  &>*{
+    padding: 5px 0px 5px 0px;
+  }
+  I {
+    margin: 0px 10px 0px 10px;
+  }
+}
+.accordion-body {
+  padding: 10px;
+}
+</style>

package/rancher-components/components/Accordion/index.ts

@@ -0,0 +1 @@
+export { default as Accordion } from './Accordion.vue';

package/rancher-components/components/BadgeState/BadgeState.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 interface Badge {
   stateBackground: string;
@@ -11,7 +11,7 @@ interface Badge {
  * <p>Represents a badge whose label and color is either taken from the value property or
  * from the label and color properties. The state property takes precedence.</p>
  */
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * A value having the properties `stateBackground` and `stateDisplay`
@@ -59,7 +59,7 @@ export default Vue.extend({
 </script>
 
 <template>
-  <span :class="{'badge-state': true, [bg]: true}">
+  <span :class="['badge-state', bg]">
     <i
       v-if="icon"
       class="icon"

package/rancher-components/components/Banner/Banner.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { nlToBr } from '@shell/utils/string';
 import { stringify } from '@shell/utils/error';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * A color class that represents the color of the banner.

package/rancher-components/components/Card/Card.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, PropType } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name:  'Card',
   props: {
     /**
@@ -22,7 +22,7 @@ export default Vue.extend({
      * The function to invoke when the default action button is clicked.
      */
     buttonAction: {
-      type:    Function,
+      type:    Function as PropType<(event: MouseEvent) => void>,
       default: (): void => { }
     },
     /**

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Checkbox',
 
   props: {
@@ -140,7 +140,7 @@ export default Vue.extend({
     /**
      * Toggles the checked state for the checkbox and emits an 'input' event.
      */
-    clicked(event: MouseEvent): boolean | void {
+    clicked(event: MouseEvent | KeyboardEvent): boolean | void {
       if ((event.target as HTMLLinkElement).tagName === 'A' && (event.target as HTMLLinkElement).href) {
         // Ignore links inside the checkbox label so you can click them
         return true;

package/rancher-components/components/Form/LabeledInput/LabeledInput.test.ts

@@ -1,4 +1,3 @@
-
 import { mount } from '@vue/test-utils';
 import { LabeledInput } from './index';
 
@@ -20,4 +19,22 @@ describe('component: LabeledInput', () => {
     expect(wrapper.emitted('input')).toHaveLength(1);
     expect(wrapper.emitted('input')![0][0]).toBe(value);
   });
+
+  it('using mode "multiline" should emit input value correctly', () => {
+    const value = 'any-string';
+    const delay = 1;
+    const wrapper = mount(LabeledInput as any, {
+      propsData: { delay, multiline: true },
+      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
+    });
+
+    jest.useFakeTimers();
+    wrapper.find('input').setValue('1');
+    wrapper.find('input').setValue(value);
+    jest.advanceTimersByTime(delay);
+    jest.useRealTimers();
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('input')![0][0]).toBe(value);
+  });
 });