@rancher/shell 0.4.0 → 0.5.1

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

@@ -82,6 +82,13 @@ 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 {
@@ -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',
@@ -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)"
         />

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,85 @@
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+export default Vue.extend({
+  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/Form/LabeledInput/LabeledInput.test.ts

@@ -1,4 +1,3 @@
-
 import { mount } from '@vue/test-utils';
 import { LabeledInput } from './index';
 
@@ -6,7 +5,7 @@ describe('component: LabeledInput', () => {
   it('should emit input only once', () => {
     const value = '2';
     const delay = 1;
-    const wrapper = mount(LabeledInput, {
+    const wrapper = mount(LabeledInput as any, {
       propsData: { delay },
       mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
     });
@@ -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);
+  });
 });

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

@@ -90,7 +90,7 @@ export default (
     delay: {
       type:    Number,
       default: 0
-    }
+    },
   },
 
   data() {
@@ -216,6 +216,9 @@ export default (
     /**
      * Emit on input with delay. Note: Arrow function is avoided due context
      * binding.
+     *
+     * NOTE: In multiline, TextAreaAutoGrow emits a string with the value
+     * https://github.com/rancher/dashboard/issues/10249
      */
     delayInput(value: string): void {
       this.$emit('input', value);

package/scripts/.gitlab/workflows/build-extension-catalog.gitlab-ci.yml

@@ -0,0 +1,50 @@
+.podman-setup: &podman-setup
+  - zypper --non-interactive install jq podman
+  - usermod --add-subuids 100000-165535 --add-subgids 100000-165535 $(id -nu)
+  - podman login -u $REGISTRY_USER -p $REGISTRY_PASSWORD $REGISTRY
+
+check_version_collisions:
+  stage: check_version
+  rules:
+    - changes:
+        - package.json
+  script:
+    - *podman-setup
+    - |
+      PACKAGE_VERSION=`jq -r .version package.json`
+      PACKAGE_NAME=`jq -r .name package.json`
+
+      readarray -t VERSIONS < <(podman search $REGISTRY/$IMAGE_NAMESPACE/ui-extension-$PACKAGE_NAME --list-tags --format {{.Tag}})
+
+      echo -e "Checking for version collisions with Extension version: ${PACKAGE_VERSION}"
+      for version in ${VERSIONS[@]}; do
+        if [[ ${version} == ${PACKAGE_VERSION} ]]; then
+          echo "Cannot overwrite production image version ${version} since it already exists."
+          podman logout $REGISTRY
+          exit 1
+        fi
+      done
+
+      echo -e "Published image not found for version ${PACKAGE_VERSION}, continuing build..."
+  tags:
+    - linux
+
+build_and_release:
+  stage: build_catalog
+  rules:
+    - changes:
+        - package.json
+  script:
+    - *podman-setup
+    - zypper addrepo https://download.opensuse.org/repositories/devel:languages:nodejs/SLE_12_SP5/devel:languages:nodejs.repo
+    - zypper --non-interactive --no-gpg-checks refresh
+    - zypper --non-interactive install go git nodejs14 npm helm
+    - YQ_URL="https://github.com/mikefarah/yq/releases/download/v4.35.2/yq_linux_amd64"
+    - curl -sLf ${YQ_URL} -o /usr/bin/yq && chmod +x /usr/bin/yq
+    - npm install -g --unsafe-perm yarn
+    - yarn
+    - yarn publish-pkgs -cl -r $REGISTRY -o $IMAGE_NAMESPACE
+    - podman push `podman images -f reference!=registry.suse.com/bci/bci-base --format "{{index .Names 0}}"`
+    - podman logout $REGISTRY
+  tags:
+    - linux

package/scripts/extension/parse-tag-name

@@ -5,7 +5,7 @@ GITHUB_RUN_ID=$2
 GITHUB_WORKFLOW_TYPE=$3
 
 # Check packages for released tag name
-if [[ "${GITHUB_WORKFLOW_TYPE}" == "container" ]]; then
+if [[ "${GITHUB_WORKFLOW_TYPE}" == "charts" ]]; then
   for d in pkg/*/ ; do
     pkg=$(basename $d)
 
@@ -27,4 +27,4 @@ else
     echo -e "tag: ${GITHUB_RELEASE_TAG}"
     gh run cancel ${GITHUB_RUN_ID}
   fi
-fi
+fi

package/scripts/publish-shell.sh

@@ -8,6 +8,8 @@ BASE_DIR="$(
 SHELL_DIR=$BASE_DIR/shell/
 TMP_DIR=$BASE_DIR/tmp
 PUBLISH_ARGS="--no-git-tag-version --access public $PUBLISH_ARGS"
+FORCE_PUBLISH_TO_NPM="false"
+DEFAULT_YARN_REGISTRY="https://registry.npmjs.org"
 
 if [ ! -d "${BASE_DIR}/node_modules" ]; then
   echo "You need to run 'yarn install' first"
@@ -16,6 +18,14 @@ fi
 
 echo "Publishing Shell Packages"
 
+if [ "$1" == "--npm" ]; then
+  FORCE_PUBLISH_TO_NPM="true"
+fi
+
+if [ "$FORCE_PUBLISH_TO_NPM" == "true" ]; then
+  export YARN_REGISTRY=$DEFAULT_YARN_REGISTRY
+fi
+
 # We use the version from the shell package for the creator packages
 # Need to copy them to a temporary location, so we can patch the version number
 # before publishing