@rancher/shell 0.1.0

package/components/form/ArrayList.vue

@@ -0,0 +1,354 @@
+<script>
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { removeAt } from '@shell/utils/array';
+import TextAreaAutoGrow from '@shell/components/form/TextAreaAutoGrow';
+import { clone } from '@shell/utils/object';
+
+const DEFAULT_PROTIP = 'Tip: Paste lines into any list field for easy bulk entry';
+
+export default {
+  components: { TextAreaAutoGrow },
+
+  props: {
+    value: {
+      type:    Array,
+      default: null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    initialEmptyRow: {
+      type:    Boolean,
+      default: false,
+    },
+
+    title: {
+      type:    String,
+      default: ''
+    },
+    protip: {
+      type:    [String, Boolean],
+      default: DEFAULT_PROTIP,
+    },
+    showHeader: {
+      type:    Boolean,
+      default: false,
+    },
+
+    valueLabel: {
+      type:    String,
+      default: 'Value',
+    },
+    valuePlaceholder: {
+      type:    String,
+      default: 'e.g. bar'
+    },
+    valueMultiline: {
+      type:    Boolean,
+      default: false,
+    },
+
+    addLabel: {
+      type: String,
+      default() {
+        return this.$store.getters['i18n/t']('generic.add');
+      },
+    },
+    addAllowed: {
+      type:    Boolean,
+      default: true,
+    },
+
+    removeLabel: {
+      type: String,
+      default() {
+        return this.$store.getters['i18n/t']('generic.remove');
+      },
+    },
+    removeAllowed: {
+      type:    Boolean,
+      default: true,
+    },
+
+    defaultAddValue: {
+      type:    [String, Number, Object, Array],
+      default: ''
+    },
+
+    loading: {
+      type:    Boolean,
+      default: false
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
+    }
+  },
+
+  data() {
+    const input = (this.value || []).slice();
+    const rows = [];
+
+    for ( const value of input ) {
+      rows.push({ value });
+    }
+
+    if ( !rows.length && this.initialEmptyRow ) {
+      const value = this.defaultAddValue ? clone(this.defaultAddValue) : '';
+
+      rows.push({ value });
+    }
+
+    return { rows, lastUpdateWasFromValue: false };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    showAdd() {
+      return this.addAllowed;
+    },
+
+    showRemove() {
+      return this.removeAllowed;
+    },
+
+    isDefaultProtip() {
+      return this.protip === DEFAULT_PROTIP;
+    },
+
+    showProtip() {
+      if (this.protip && !this.isDefaultProtip) {
+        return true;
+      }
+
+      return !this.valueMultiline && this.protip;
+    }
+  },
+
+  watch: {
+    value() {
+      this.lastUpdateWasFromValue = true;
+      this.rows = (this.value || []).map(v => ({ value: v }));
+    },
+    rows: {
+      deep: true,
+      handler(newValue, oldValue) {
+        // lastUpdateWasFromValue is used to break a cycle where when rows are updated
+        // this was called which then forced rows to updated again
+        if (!this.lastUpdateWasFromValue) {
+          this.queueUpdate();
+        }
+        this.lastUpdateWasFromValue = false;
+      }
+    }
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 50);
+  },
+
+  methods: {
+    add() {
+      this.rows.push({ value: clone(this.defaultAddValue) });
+      if (this.defaultAddValue) {
+        this.queueUpdate();
+      }
+
+      this.$nextTick(() => {
+        const inputs = this.$refs.value;
+
+        if ( inputs && inputs.length > 0 ) {
+          inputs[inputs.length - 1].focus();
+        }
+
+        this.$emit('add');
+      });
+    },
+
+    /**
+     * Remove item and emits removed row and its own index value
+     */
+    remove(row, index) {
+      this.$emit('remove', { row, index });
+      removeAt(this.rows, index);
+      this.queueUpdate();
+    },
+
+    update() {
+      if ( this.isView ) {
+        return;
+      }
+
+      const out = [];
+
+      for ( const row of this.rows ) {
+        const trim = !this.valueMultiline && (typeof row.value === 'string');
+        const value = trim ? row.value.trim() : row.value;
+
+        if ( typeof value !== 'undefined' ) {
+          out.push(value);
+        }
+      }
+
+      this.$emit('input', out);
+    },
+
+    onPaste(index, event) {
+      if (this.valueMultiline) {
+        return;
+      }
+
+      event.preventDefault();
+      const text = event.clipboardData.getData('text/plain');
+      const split = text.split('\n').map(value => ({ value }));
+
+      this.rows.splice(index, 1, ...split);
+      this.update();
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="title" class="clearfix">
+      <slot name="title">
+        <h3>
+          {{ title }}
+          <i v-if="showProtip" v-tooltip="protip" class="icon icon-info" />
+        </h3>
+      </slot>
+    </div>
+
+    <template v-if="rows.length">
+      <div v-if="showHeader">
+        <slot name="column-headers">
+          <label class="value text-label mb-10">
+            {{ valueLabel }}
+          </label>
+        </slot>
+      </div>
+      <div
+        v-for="(row, idx) in rows"
+        :key="idx"
+        class="box"
+      >
+        <slot
+          name="columns"
+          :queueUpdate="queueUpdate"
+          :i="idx"
+          :rows="rows"
+          :row="row"
+          :mode="mode"
+          :isView="isView"
+        >
+          <div class="value">
+            <slot
+              name="value"
+              :row="row"
+              :mode="mode"
+              :isView="isView"
+              :queue-update="queueUpdate"
+            >
+              <TextAreaAutoGrow
+                v-if="valueMultiline"
+                ref="value"
+                v-model="row.value"
+                :placeholder="valuePlaceholder"
+                :mode="mode"
+                :disabled="disabled"
+                @paste="onPaste(idx, $event)"
+                @input="queueUpdate"
+              />
+              <input
+                v-else
+                ref="value"
+                v-model="row.value"
+                :placeholder="valuePlaceholder"
+                :disabled="isView || disabled"
+                @paste="onPaste(idx, $event)"
+                @input="queueUpdate"
+              />
+            </slot>
+          </div>
+        </slot>
+        <div v-if="showRemove" class="remove">
+          <slot
+            name="remove-button"
+            :remove="() => remove(row, idx)"
+            :i="idx"
+            :row="row"
+          >
+            <button
+              type="button"
+              :disabled="isView"
+              class="btn role-link"
+              :data-testid="`remove-item-${idx}`"
+              @click="remove(row, idx)"
+            >
+              {{ removeLabel }}
+            </button>
+          </slot>
+        </div>
+      </div>
+    </template>
+    <div v-else-if="mode==='view'" class="text-muted">
+      &mdash;
+    </div>
+    <div v-else>
+      <slot name="empty" />
+    </div>
+    <div v-if="showAdd && !isView" class="footer">
+      <slot v-if="showAdd" name="add">
+        <button
+          type="button"
+          class="btn role-tertiary add"
+          :disabled="loading"
+          data-testid="add-item"
+          @click="add()"
+        >
+          <i v-if="loading" class="mr-5 icon icon-spinner icon-spin icon-lg" />
+          {{ addLabel }}
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .title {
+    margin-bottom: 10px;
+
+  }
+
+  .box {
+    display: grid;
+    grid-template-columns: auto $array-list-remove-margin;
+    align-items: center;
+
+    margin-bottom: 10px;
+    .value {
+      flex: 1;
+      INPUT {
+        height: $input-height;
+      }
+    }
+  }
+
+  .remove {
+    text-align: right;
+  }
+
+  .footer {
+    .protip {
+      float: right;
+      padding: 5px 0;
+    }
+  }
+</style>

package/components/form/ArrayListGrouped.vue

@@ -0,0 +1,113 @@
+<script>
+import ArrayList from '@shell/components/form/ArrayList';
+import InfoBox from '@shell/components/InfoBox';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+export default {
+  components: { ArrayList, InfoBox },
+  props:      {
+    /**
+     * Allow to remove items by value or computation
+     */
+    canRemove: {
+      type:    [Boolean, Function],
+      default: true,
+    },
+
+    /**
+     * Allow to extend list
+     */
+    canAdd: {
+      type:    Boolean,
+      default: true,
+    },
+
+    /**
+     * Form mode for the component
+     */
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+  },
+
+  computed:   {
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+
+  methods: {
+    /**
+     * Verify if row can be removed by mode, function and declaration
+     */
+    canRemoveRow(row, idx) {
+      if ( this.isView ) {
+        return false;
+      }
+
+      if ( typeof this.canRemove === 'function' ) {
+        return this.canRemove(row, idx);
+      }
+
+      return this.canRemove;
+    }
+  }
+};
+</script>
+
+<template>
+  <ArrayList
+    class="array-list-grouped"
+    v-bind="$attrs"
+    :add-allowed="canAdd && !isView"
+    :mode="mode"
+    @input="$emit('input', $event)"
+    @add="$emit('add')"
+    @remove="$emit('remove', $event)"
+  >
+    <template v-slot:columns="scope">
+      <InfoBox>
+        <slot v-bind="scope" />
+      </InfoBox>
+    </template>
+    <template v-slot:remove-button="scope">
+      <button
+        v-if="canRemoveRow(scope.row, scope.i)"
+        type="button"
+        class="btn role-link close btn-sm"
+        :data-testid="`remove-item-${scope.i}`"
+        @click="scope.remove"
+      >
+        <i class="icon icon-2x icon-x" />
+      </button>
+      <span v-else></span>
+    </template>
+    <!-- Pass down templates provided by the caller -->
+    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </ArrayList>
+</template>
+
+<style lang="scss">
+.array-list-grouped {
+    & > .box {
+      position: relative;
+      display: block;
+
+      & > .remove {
+        position: absolute;
+
+        padding: 0px;
+
+        top: 0;
+        right: 0;
+      }
+
+      & > .info-box {
+        margin-bottom: 0;
+      }
+    }
+}
+</style>

package/components/form/ArrayListSelect.vue

@@ -0,0 +1,77 @@
+<script>
+import ArrayList from '@shell/components/form/ArrayList';
+import Select from '@shell/components/form/Select';
+
+export default {
+  components: { ArrayList, Select },
+  props:      {
+    value: {
+      type:     Array,
+      required: true
+    },
+    options: {
+      default:   null,
+      type:      Array
+    },
+    selectProps: {
+      type:    Object,
+      default: null,
+    },
+    arrayListProps: {
+      type:    Object,
+      default: null
+    },
+    loading: {
+      type:    Boolean,
+      default: false
+    }
+  },
+  computed:   {
+    filteredOptions() {
+      return this.options
+        .filter(option => !this.value.includes(option.value));
+    },
+
+    addAllowed() {
+      return this.filteredOptions.length > 0;
+    }
+  },
+
+  methods: {
+    updateRow(index, value) {
+      this.value.splice(index, 1, value);
+      this.$emit(value);
+    },
+    calculateOptions(value) {
+      const valueOption = this.options.find(o => o.value === value);
+
+      if (valueOption) {
+        return [valueOption, ...this.filteredOptions];
+      }
+
+      return this.filteredOptions;
+    }
+  }
+};
+</script>
+
+<template>
+  <ArrayList
+    v-bind="arrayListProps"
+    :value="value"
+    class="array-list-select"
+    :add-allowed="addAllowed || loading"
+    :loading="loading"
+    @input="$emit('input', $event)"
+  >
+    <template v-slot:columns="scope">
+      <Select :value="scope.row.value" v-bind="selectProps" :options="calculateOptions(scope.row.value)" @input="updateRow(scope.i, $event)" />
+    </template>
+  </ArrayList>
+</template>
+
+<style lang="scss" scoped>
+::v-deep .unlabeled-select {
+    height: 61px;
+}
+</style>