@rancher/shell 1.2.1 → 1.2.3

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

@@ -398,276 +398,6 @@ 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, defineComponent } from 'vue';
+import Vue, { PropType } 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 defineComponent({
+export default Vue.extend({
 
   name:       'StringList',
   components: { LabeledInput },
@@ -82,19 +82,12 @@ export default defineComponent({
         return {} as ErrorMessages;
       },
     },
-    /**
-     * Enables bulk addition and defines the delimiter to split the input string.
-     */
-    bulkAdditionDelimiter: {
-      type:    RegExp,
-      default: null,
-    }
   },
   data() {
     return {
-      value:        undefined as string | undefined,
+      value:        null as string | null,
       selected:     null as string | null,
-      editedItem:   undefined as string | undefined,
+      editedItem:   null as string | null,
       isCreateItem: false,
       errors:       { duplicate: false } as Record<Error, boolean>
     };
@@ -132,9 +125,13 @@ export default defineComponent({
   },
 
   methods: {
-    onChange(value: string, index?: number) {
+    onChange(value: string) {
       this.value = value;
-      const items = this.addValueToItems(this.items, value, index);
+
+      const items = [
+        ...this.items,
+        this.value
+      ];
 
       this.toggleError(
         'duplicate',
@@ -281,7 +278,7 @@ export default defineComponent({
         this.isCreateItem = true;
         this.setFocus(INPUT.create);
       } else {
-        this.value = undefined;
+        this.value = null;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
@@ -303,11 +300,11 @@ export default defineComponent({
         this.editedItem = item || '';
         this.setFocus(INPUT.edit);
       } else {
-        this.value = undefined;
+        this.value = null;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
-        this.editedItem = undefined;
+        this.editedItem = null;
       }
     },
 
@@ -324,7 +321,10 @@ export default defineComponent({
       const value = this.value?.trim();
 
       if (value) {
-        const items = this.addValueToItems(this.items, value);
+        const items = [
+          ...this.items,
+          value,
+        ];
 
         if (!hasDuplicatedStrings(items, this.caseSensitive)) {
           this.updateItems(items);
@@ -343,8 +343,12 @@ export default defineComponent({
       const value = this.value?.trim();
 
       if (value) {
-        const index = findStringIndex(this.items, item, false);
-        const items = index !== -1 ? this.addValueToItems(this.items, value, index) : this.items;
+        const items = [...this.items];
+        const index = findStringIndex(items, item, false);
+
+        if (index !== -1) {
+          items[index] = value;
+        }
 
         if (!hasDuplicatedStrings(items, this.caseSensitive)) {
           this.updateItems(items);
@@ -356,49 +360,6 @@ export default defineComponent({
       }
     },
 
-    /**
-     * 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
      */
@@ -432,7 +393,7 @@ export default defineComponent({
       @dblclick="onClickEmptyBody()"
     >
       <div
-        v-for="(item, index) in items"
+        v-for="item in items"
         :key="item"
         :ref="item"
         :class="{
@@ -460,7 +421,7 @@ export default defineComponent({
           :data-testid="`item-edit-${item}`"
           class="edit-input static"
           :value="value != null ? value : item"
-          @input="onChange($event, index)"
+          @input="onChange($event)"
           @blur.prevent="updateItem(item)"
           @keydown.native.enter="updateItem(item, !errors.duplicate)"
         />
@@ -502,7 +463,7 @@ export default defineComponent({
         <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/scripts/publish-shell.sh

@@ -57,6 +57,7 @@ function publish() {
   # For now, copy the rancher components into the shell and ship them with it
   if [ "$NAME" == "Shell" ]; then
     echo "Adding Rancher Components"
+    rm -rf ./rancher-components
     cp -R ${BASE_DIR}/pkg/rancher-components/src/components ./rancher-components/
   fi
 

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

@@ -1,45 +0,0 @@
-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/Accordion/Accordion.vue

@@ -1,86 +0,0 @@
-<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/Accordion/index.ts

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

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

@@ -1,12 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { BadgeState } from './index';
-
-describe('BadgeState.vue', () => {
-  it('renders props.msg when passed', () => {
-    const label = 'Hello, World!';
-
-    const wrapper = shallowMount(BadgeState, { propsData: { label } });
-
-    expect(wrapper.find('span').text()).toMatch(label);
-  });
-});

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

@@ -1,45 +0,0 @@
-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);
-  });
-});