@rancher/shell 0.2.4 → 0.3.0

package/rancher-components/components/StringList/StringList.vue

@@ -0,0 +1,605 @@
+<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,
+      editedItem:   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] && this.errorMessages[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);
+    },
+    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
+      ];
+
+      this.toggleError(
+        'duplicate',
+        hasDuplicatedStrings(items, this.caseSensitive),
+        this.isCreateItem ? INPUT.create : INPUT.edit
+      );
+    },
+
+    onSelect(item: string) {
+      if (this.readonly || this.isCreateItem || this.editedItem === 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.editedItem) {
+        this.toggleCreateMode(true);
+      }
+    },
+
+    onClickPlusButton() {
+      this.onSelectLeave();
+      this.toggleCreateMode(true);
+    },
+
+    onClickMinusButton() {
+      if (this.isCreateItem) {
+        this.toggleCreateMode(false);
+
+        return;
+      }
+      if (this.editedItem) {
+        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 (this.readonly) {
+        return;
+      }
+      if (show) {
+        this.toggleEditMode(false);
+        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 (this.readonly) {
+        return;
+      }
+      if (show) {
+        this.toggleCreateMode(false);
+        this.value = this.editedItem;
+
+        this.editedItem = item || '';
+        this.setFocus(INPUT.edit);
+      } else {
+        this.value = null;
+        this.toggleError('duplicate', false);
+        this.onSelectLeave();
+
+        this.editedItem = 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(closeInput = true) {
+      const value = this.value?.trim();
+
+      if (value) {
+        const items = [
+          ...this.items,
+          value,
+        ];
+
+        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.updateItems(items);
+        }
+      }
+
+      if (closeInput) {
+        this.toggleCreateMode(false);
+      }
+    },
+
+    /**
+     * Update an existing item in the items list
+     */
+    updateItem(item: string, closeInput = true) {
+      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.updateItems(items);
+        }
+      }
+
+      if (closeInput) {
+        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="!editedItem || editedItem !== item"
+          class="label static"
+        >
+          {{ item }}
+        </span>
+        <LabeledInput
+          v-if="editedItem && editedItem === 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)"
+        />
+      </div>
+      <div
+        v-if="isCreateItem"
+        class="create-field static"
+      >
+        <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)"
+        />
+      </div>
+    </div>
+    <div
+      v-if="!readonly"
+      class="string-list-footer"
+      :class="{[actionsPosition]: true }"
+    >
+      <div
+        data-testid="div-action-buttons"
+        class="action-buttons"
+      >
+        <button
+          data-testid="button-remove"
+          class="btn btn-sm role-tertiary remove-button"
+          :disabled="!selected && !isCreateItem && !editedItem"
+          @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"
+          @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"
+        />
+        <span
+          v-for="(msg, idx) in errorMessagesArray"
+          :key="idx"
+          :data-testid="`span-error-message-${msg}`"
+          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/components/StringList/index.ts

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