@rancher/shell 0.3.13 → 0.3.15

package/rancher-components/StringList/StringList.vue

@@ -0,0 +1,577 @@
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import { findStringIndex, hasDuplicatedStrings } from '@shell/utils/array';
+
+type Error = 'duplicate';
+type ErrorMessages = Record<Error, string>;
+
+type Arrow = 'up' | 'down';
+
+const DIRECTION: Record<Arrow, number> = {
+  up:   -1,
+  down: 1,
+};
+
+const INPUT = {
+  create: 'item-create',
+  edit:   'item-edit',
+};
+
+const BOX = 'box';
+
+const CLASS = {
+  item:  'item',
+  error: 'error',
+};
+
+/**
+ * Manage a list of strings
+ */
+export default Vue.extend({
+  components: { LabeledInput },
+
+  name: 'StringList',
+
+  props: {
+    /**
+     * The items source
+     */
+    items: {
+      type: Array as PropType<string[]>,
+      default() {
+        return [];
+      },
+    },
+    /**
+     * Determines if items with same text will be treated differently, depending on the letters case
+     * It is used to compare items during create/edit actions and detect duplicates.
+     */
+    caseSensitive: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * Determines if the list of items is editable or view-only
+     */
+    readonly: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * The placeholder to show in input field when create or edit items
+     */
+    placeholder: {
+      type:    String,
+      default: null,
+    },
+    /**
+     * Determines the action buttons position at the bottom of the main box
+     */
+    actionsPosition: {
+      type:    String,
+      default: 'right',
+    },
+    /**
+     * Custom Error messages
+     */
+    errorMessages: {
+      type: Object as PropType<ErrorMessages>,
+      default() {
+        return {} as ErrorMessages;
+      },
+    },
+  },
+  data() {
+    return {
+      value:             null as string | null,
+      selected:          null as string | null,
+      isEditItem:        null as string | null,
+      isCreateItem:      false,
+      errors:            { duplicate: false } as Record<Error, boolean>
+    };
+  },
+
+  computed: {
+
+    /**
+     * Create an array of error messages, one for each current error
+     */
+    errorMessagesArray(): string[] {
+      return (Object.keys(this.errors) as Error[])
+        .filter(f => !!(this.errors)[f])
+        .map(k => this.errorMessages[k]);
+    },
+  },
+
+  watch: {
+    /**
+     * Shutdown any user actions on the component when it becomes readonly
+     */
+    readonly() {
+      this.toggleEditMode(false);
+      this.toggleCreateMode(false);
+    },
+  },
+
+  methods: {
+    onChange(value: string) {
+      this.value = value;
+      /**
+       * Remove duplicate error when a new value is typed
+       */
+      this.toggleError(
+        'duplicate',
+        false,
+        this.isCreateItem ? INPUT.create : INPUT.edit,
+      );
+    },
+
+    onSelect(item: string) {
+      if (this.isCreateItem || this.isEditItem === item) {
+        return;
+      }
+      this.selected = item;
+    },
+
+    onSelectNext(arrow: Arrow) {
+      const index = findStringIndex(
+        this.items,
+        this.selected as string,
+      );
+
+      if (index !== -1) {
+        /**
+         * Select next item in the arrow's direction if it exists,
+         * else select again this.selected (do nothing)
+         */
+        const item = (this.items[index + DIRECTION[arrow]] || this.selected) as string;
+
+        this.onSelect(item);
+        this.moveScrollbar(arrow);
+      }
+    },
+
+    onSelectLeave(item?: string) {
+      if (item === this.selected) {
+        this.selected = null;
+      }
+    },
+
+    onClickEmptyBody() {
+      if (!this.isCreateItem && !this.isEditItem) {
+        this.toggleCreateMode(true);
+      }
+    },
+
+    onClickPlusButton() {
+      this.onSelectLeave();
+      this.toggleCreateMode(true);
+    },
+
+    onClickMinusButton() {
+      if (this.isCreateItem) {
+        this.toggleCreateMode(false);
+
+        return;
+      }
+      if (this.isEditItem) {
+        this.toggleEditMode(false);
+
+        return;
+      }
+      if (this.selected) {
+        const index = findStringIndex(this.items, this.selected, false);
+
+        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.deleteItem(this.items[index]);
+        }
+      }
+    },
+
+    setFocus(refId: string) {
+      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);
+      const item = this.getElemByRef(this.selected || '');
+
+      if (box && item && item.className.includes(CLASS.item)) {
+        const boxRect = box.getClientRects()[0];
+        const itemRect = item.getClientRects()[0];
+
+        if (
+          (arrow === 'down' && itemRect.bottom > boxRect.bottom) ||
+          (arrow === 'up' && itemRect.top < boxRect.top)
+        ) {
+          const top = (value ?? itemRect.height) * DIRECTION[arrow];
+
+          box.scrollBy({ top });
+        }
+      }
+    },
+
+    /**
+     * Set an error and eventually assign an error class to the element
+     */
+    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)?.$el;
+
+      if (input) {
+        if (val) {
+          input.classList.add(CLASS.error);
+        } else {
+          input.classList.remove(CLASS.error);
+        }
+      }
+    },
+
+    /**
+     * Show/Hide the input line to create new item
+     */
+    toggleCreateMode(show: boolean) {
+      if (show) {
+        this.value = '';
+
+        this.isCreateItem = true;
+        this.setFocus(INPUT.create);
+      } else {
+        this.value = null;
+        this.toggleError('duplicate', false);
+        this.onSelectLeave();
+
+        this.isCreateItem = false;
+      }
+    },
+
+    /**
+     * Show/Hide the in-line editing to edit an existing item
+     */
+    toggleEditMode(show: boolean, item?: string) {
+      if (show) {
+        this.toggleCreateMode(false);
+        this.value = this.isEditItem;
+
+        this.isEditItem = item || '';
+        this.setFocus(INPUT.edit);
+      } else {
+        this.value = null;
+        this.toggleError('duplicate', false);
+        this.onSelectLeave();
+
+        this.isEditItem = null;
+      }
+    },
+
+    getElemByRef(id: string) {
+      const ref = this.$refs[id];
+
+      return (Array.isArray(ref) ? ref[0] : ref) as any;
+    },
+
+    /**
+     * Create a new item and insert in the items list
+     */
+    saveItem() {
+      const value = this.value?.trim();
+
+      if (value) {
+        const items = [
+          ...this.items,
+          value,
+        ];
+
+        if (hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.toggleError('duplicate', true, INPUT.create);
+
+          return;
+        }
+
+        this.updateItems(items);
+      }
+      this.toggleCreateMode(false);
+    },
+
+    /**
+     * Update an existing item in the items list
+     */
+    updateItem(item: string) {
+      const value = this.value?.trim();
+
+      if (value) {
+        const items = [...this.items];
+        const index = findStringIndex(items, item, false);
+
+        if (index !== -1) {
+          items[index] = value;
+        }
+
+        if (hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.toggleError('duplicate', true, INPUT.edit);
+
+          return;
+        }
+
+        this.updateItems(items);
+      }
+      this.toggleEditMode(false);
+    },
+
+    /**
+     * Remove an item from items list
+     */
+    deleteItem(item?: string) {
+      const items = this.items.filter(f => f !== item);
+
+      this.updateItems(items);
+    },
+
+    /**
+     * Update items list and emit to parent component
+     */
+    updateItems(items: string[]) {
+      this.$emit('change', items);
+    },
+  },
+
+});
+</script>
+
+<template>
+  <div
+    class="string-list"
+    :class="{ readonly }"
+  >
+    <div
+      ref="box"
+      data-testid="div-string-list-box"
+      class="string-list-box"
+      tabindex="0"
+      @dblclick="onClickEmptyBody()"
+    >
+      <div
+        v-for="item in items"
+        :key="item"
+        :ref="item"
+        :class="{
+          selected: selected === item,
+          readonly
+        }"
+        :data-testid="`div-item-${item}`"
+        class="item static"
+        tabindex="0"
+        @mousedown="onSelect(item)"
+        @dblclick.stop="toggleEditMode(true, item)"
+        @keydown.down.prevent="onSelectNext('down')"
+        @keydown.up.prevent="onSelectNext('up')"
+        @blur="onSelectLeave(item)"
+      >
+        <span
+          v-if="!isEditItem || isEditItem !== item"
+          class="label static"
+        >
+          {{ item }}
+        </span>
+        <LabeledInput
+          v-if="isEditItem && isEditItem === item"
+          ref="item-edit"
+          class="edit-input static"
+          :value="value != null ? value : item"
+          @input="onChange($event)"
+          @blur.prevent="toggleEditMode(false)"
+          @keydown.native.enter="updateItem(item)"
+        />
+      </div>
+      <div
+        v-if="isCreateItem"
+        class="create-field static"
+      >
+        <LabeledInput
+          ref="item-create"
+          class="create-input static"
+          type="text"
+          :value="value"
+          :placeholder="placeholder"
+          @input="onChange($event)"
+          @keydown.native.enter="saveItem"
+        />
+      </div>
+    </div>
+    <div
+      v-if="!readonly"
+      class="string-list-footer"
+      :class="{[actionsPosition]: true }"
+    >
+      <div
+        data-testid="div-action-buttons"
+        class="action-buttons"
+      >
+        <button
+          class="btn btn-sm role-tertiary remove-button"
+          :disabled="!selected && !isCreateItem && !isEditItem"
+          @mousedown.prevent="onClickMinusButton"
+        >
+          <span class="icon icon-minus icon-sm" />
+        </button>
+        <button
+          class="btn btn-sm role-tertiary add-button"
+          :disabled="isCreateItem"
+          @click.prevent="onClickPlusButton"
+        >
+          <span class="icon icon-plus icon-sm" />
+        </button>
+      </div>
+      <div class="messages">
+        <i v-if="errorMessagesArray.length > 0" class="icon icon-warning icon-lg" />
+        <span
+          v-for="(msg, idx) in errorMessagesArray"
+          :key="idx"
+          class="error"
+        >
+          {{ idx > 0 ? '; ' : '' }}
+          {{ msg }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+.string-list {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+
+  &.readonly {
+    cursor: default;
+    opacity: 0.4;
+  }
+
+  .string-list-box {
+    min-height: 200px;
+    height: 100%;
+    outline: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border: solid var(--border-width) var(--input-border);
+    padding-top: 3px;
+
+    .static {
+      height: 25px;
+      padding: 3px;
+    }
+
+    .item {
+      outline: none;
+
+      &.selected {
+        background: var(--primary);
+        color: var(--primary-hover-text);
+      }
+
+      &.readonly {
+        pointer-events: none;
+      }
+
+      .label {
+        display: block;
+        width: auto;
+        user-select: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-top: 1px;
+      }
+    }
+
+    .create-field {
+      padding-top: 1px;
+      margin-bottom: 7px;
+    }
+
+    .labeled-input {
+      padding-top: 0;
+      padding-bottom: 0;
+      border-radius: 0;
+      &.error {
+        border: none;
+        box-shadow: 0 0 0 var(--outline-width) var(--error);
+      }
+    }
+  }
+
+  .string-list-footer {
+    --footer-height: 28px;
+    height: var(--footer-height);
+    margin-top: 5px;
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+
+    &.left {
+      flex-direction: row;
+    }
+
+    &.right {
+      flex-direction: row-reverse;
+    }
+
+    .action-buttons {
+      display: flex;
+      flex-direction: row-reverse;
+      gap: 0.5rem;
+
+      .btn {
+        min-height: var(--footer-height);
+        line-height: 0;
+        border-radius: 2px;
+
+        &:disabled {
+          cursor: default;
+          pointer-events: none;
+        }
+      }
+    }
+
+    .messages {
+      line-height: var(--footer-height);
+
+      .error, .icon-warning {
+        color: var(--error);
+        line-height: inherit;
+      }
+    }
+  }
+}
+
+::v-deep {
+  .labeled-input INPUT.no-label,
+  .labeled-input INPUT:hover.no-label,
+  .labeled-input INPUT:focus.no-label {
+    padding: 1px 0px 0px 0px;
+  }
+  .labeled-input.compact-input {
+    min-height: 0;
+  }
+}
+</style>

package/rancher-components/StringList/index.ts

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

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

@@ -1,7 +1,7 @@
 import { shallowMount, Wrapper } from '@vue/test-utils';
 import { Checkbox } from './index';
 
-describe('Checkbox.vue', () => {
+describe('checkbox.vue', () => {
   const event = {
     target:          { tagName: 'input', href: null },
     stopPropagation: () => { },
@@ -63,6 +63,6 @@ describe('Checkbox.vue', () => {
     wrapper.vm.clicked(event);
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.[0][0]).toBe(null);
+    expect(wrapper.emitted().input?.[0][0]).toBeNull();
   });
 });

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

@@ -202,7 +202,7 @@ export default Vue.extend({
      * @param value A collection of values for the checkbox.
      */
     findTrueValues(value: boolean[]): boolean {
-      return value.find(v => v === this.valueWhenTrue) || false;
+      return value.find((v) => v === this.valueWhenTrue) || false;
     }
   }
 });

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

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { RadioButton } from './index';
 import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
-describe('RadioButton.vue', () => {
+describe('radioButton.vue', () => {
   it('renders label slot contents', () => {
     const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' } });
 

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

@@ -17,7 +17,7 @@ export default Vue.extend({
      */
     val: {
       required:  true,
-      validator: x => true
+      validator: () => true
     },
 
     /**
@@ -25,7 +25,7 @@ export default Vue.extend({
      */
     value: {
       required:  true,
-      validator: x => true
+      validator: () => true
     },
 
     /**

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

@@ -152,7 +152,7 @@ export default Vue.extend({
      */
     clickNext(direction: number): void {
       const opts = this.normalizedOptions;
-      const selected = opts.find(x => x.value === this.value);
+      const selected = opts.find((x) => x.value === this.value);
       let newIndex = (selected ? opts.indexOf(selected) : -1) + direction;
 
       if (newIndex >= opts.length) {
@@ -209,7 +209,7 @@ export default Vue.extend({
         <slot
           :listeners="$listeners"
           :option="option"
-          :isDisabled="isDisabled"
+          :is-disabled="isDisabled"
           :name="i"
         >
           <RadioButton

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

@@ -155,6 +155,7 @@ export default Vue.extend({
 <template>
   <textarea
     ref="ta"
+    data-testid="text-area-auto-grow"
     :disabled="isDisabled"
     :style="style"
     :placeholder="placeholder"

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

@@ -1,7 +1,7 @@
 import { shallowMount, Wrapper } from '@vue/test-utils';
 import { ToggleSwitch } from './index';
 
-describe('ToggleSwitch.vue', () => {
+describe('toggleSwitch.vue', () => {
   it('renders falsy by default', () => {
     const wrapper = shallowMount(ToggleSwitch);
 

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

@@ -31,13 +31,6 @@ export default Vue.extend({
     return { state: false as boolean | string | number };
   },
 
-  methods: {
-    toggle(neu: boolean | string | number) {
-      this.state = neu === null ? !this.state : neu;
-      this.$emit('input', this.state ? this.onValue : this.offValue);
-    }
-  },
-
   watch: {
     value: {
       handler() {
@@ -45,6 +38,13 @@ export default Vue.extend({
       },
       immediate: true
     }
+  },
+
+  methods: {
+    toggle(neu: boolean | string | number) {
+      this.state = neu === null ? !this.state : neu;
+      this.$emit('input', this.state ? this.onValue : this.offValue);
+    }
   }
 });
 </script>