@rancher/shell 0.5.3 → 2.0.0

package/components/form/KeyValue.vue

@@ -11,6 +11,7 @@ import FileSelector from '@shell/components/form/FileSelector';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { asciiLike } from '@shell/utils/string';
 import CodeMirror from '@shell/components/CodeMirror';
+import isEqual from 'lodash/isEqual';
 
 export default {
   name: 'KeyValue',
@@ -58,10 +59,8 @@ export default {
     },
 
     protip: {
-      type: [String, Boolean],
-      default() {
-        return this.$store.getters['i18n/t']('keyValue.protip', null, true);
-      },
+      type:    [String, Boolean],
+      default: '',
     },
     // For asMap=false, the name of the field that goes into the row objects
     keyName: {
@@ -69,10 +68,8 @@ export default {
       default: 'key',
     },
     keyLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.key');
-      },
+      type:    String,
+      default: '',
     },
     keyEditable: {
       type:    Boolean,
@@ -93,10 +90,8 @@ export default {
       default: false,
     },
     keyPlaceholder: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('keyValue.keyPlaceholder');
-      },
+      type:    String,
+      default: '',
     },
     /**
      * List of keys which needs to be disabled and hidden based on toggler
@@ -122,16 +117,12 @@ export default {
       default: 'value',
     },
     valueLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.value');
-      },
+      type:    String,
+      default: '',
     },
     valuePlaceholder: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('keyValue.valuePlaceholder');
-      },
+      type:    String,
+      default: '',
     },
     valueCanBeEmpty: {
       type:    Boolean,
@@ -184,10 +175,8 @@ export default {
       default: () => {},
     },
     addLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.add');
-      },
+      type:    String,
+      default: '',
     },
     addIcon: {
       type:    String,
@@ -197,12 +186,6 @@ export default {
       type:    Boolean,
       default: true,
     },
-    readLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.readFromFile');
-      },
-    },
     readIcon: {
       type:    String,
       default: 'icon-upload',
@@ -237,7 +220,7 @@ export default {
     },
     parserSeparators: {
       type:    Array,
-      default: () => [': ', '='],
+      default: () => [':', '='],
     },
     loading: {
       default: false,
@@ -262,10 +245,29 @@ export default {
     return {
       rows,
       codeMirrorFocus: {},
+      lastUpdated:     null
     };
   },
-
   computed: {
+    _protip() {
+      return this.protip || this.t('keyValue.protip', null, true);
+    },
+    _keyLabel() {
+      return this.keyLabel || this.t('generic.key');
+    },
+    _keyPlaceholder() {
+      return this.keyPlaceholder || this.t('keyValue.keyPlaceholder');
+    },
+    _valueLabel() {
+      return this.valueLabel || this.t('generic.value');
+    },
+    _valuePlaceholder() {
+      return this.valuePlaceholder || this.t('keyValue.valuePlaceholder');
+    },
+    _addLabel() {
+      return this.addLabel || this.t('generic.add');
+    },
+
     isView() {
       return this.mode === _VIEW;
     },
@@ -303,14 +305,28 @@ export default {
     this.queueUpdate = debounce(this.update, 500);
   },
   watch: {
-    defaultValue(neu) {
-      if (Array.isArray(neu)) {
-        this.rows = this.getRows(neu);
-        this.$emit('input', neu);
+    /**
+     * KV works with v-model=value
+     * value is transformed into this.rows (base64 decode, mark supported etc)
+     * on input, this.update constructs a new value from this.rows and emits
+     * if the parent component changes value, KV needs to re-compute this.rows
+     * If the value changes because the user has edited it using KV, then KV should NOT re-compute rows
+     * the value watcher will compare the last value KV emitted with the new value KV detects and re-compute rows if they don't match
+     */
+    value: {
+      deep: true,
+      handler(neu, old) {
+        this.valuePropChanged(neu, old);
       }
     }
   },
   methods: {
+    valuePropChanged(neu) {
+      if (!isEqual(neu, this.lastUpdated)) {
+        this.rows = this.getRows(neu);
+      }
+    },
+
     isProtected(key) {
       return this.protectedKeys && this.protectedKeys.includes(key);
     },
@@ -495,16 +511,18 @@ export default {
           return entry;
         });
       }
+      this.lastUpdated = out;
+
       this.$emit('input', out);
     },
-    onPaste(index, event, pastedValue) {
+    onPaste(index, event) {
       const text = event.clipboardData.getData('text/plain');
       const lines = text.split('\n');
       const splits = lines.map((line) => {
-        const splitter = !line.includes(':') || ((line.indexOf('=') < line.indexOf(':')) && line.includes(':')) ? '=' : ':';
+        const splitter = this.parserSeparators.find((sep) => line.includes(sep));
 
-        return line.split(splitter);
-      });
+        return splitter ? line.split(splitter) : '';
+      }).filter((split) => split && split.length > 0);
 
       if (splits.length === 0 || (splits.length === 1 && splits[0].length < 2)) {
         return;
@@ -587,15 +605,15 @@ export default {
     >
       <template v-if="rows.length || isView">
         <label class="text-label">
-          {{ keyLabel }}
+          {{ _keyLabel }}
           <i
-            v-if="protip && !isView && addAllowed"
-            v-clean-tooltip="protip"
+            v-if="_protip && !isView && addAllowed"
+            v-clean-tooltip="_protip"
             class="icon icon-info"
           />
         </label>
         <label class="text-label">
-          {{ valueLabel }}
+          {{ _valueLabel }}
         </label>
         <label
           v-for="c in extraColumns"
@@ -653,7 +671,7 @@ export default {
               ref="key"
               v-model="row[keyName]"
               :disabled="isView || disabled || !keyEditable || isProtected(row.key)"
-              :placeholder="keyPlaceholder"
+              :placeholder="_keyPlaceholder"
               :data-testid="`input-kv-item-key-${i}`"
               @input="queueUpdate"
               @paste="onPaste(i, $event)"
@@ -704,7 +722,7 @@ export default {
                 :class="{'conceal': valueConcealed}"
                 :disabled="disabled || isProtected(row.key)"
                 :mode="mode"
-                :placeholder="valuePlaceholder"
+                :placeholder="_valuePlaceholder"
                 :min-height="40"
                 :spellcheck="false"
                 @input="queueUpdate"
@@ -714,10 +732,11 @@ export default {
                 v-model="row[valueName]"
                 :disabled="isView || disabled || isProtected(row.key)"
                 :type="valueConcealed ? 'password' : 'text'"
-                :placeholder="valuePlaceholder"
+                :placeholder="_valuePlaceholder"
                 autocorrect="off"
                 autocapitalize="off"
                 spellcheck="false"
+                :data-testid="`input-kv-item-value-${i}`"
                 @input="queueUpdate"
               >
               <FileSelector
@@ -784,7 +803,7 @@ export default {
           <i
             v-if="loading"
             class="mr-5 icon icon-spinner icon-spin icon-lg"
-          /> {{ addLabel }}
+          /> {{ _addLabel }}
         </button>
         <FileSelector
           v-if="readAllowed"

package/components/form/LabeledSelect.vue

@@ -5,13 +5,16 @@ import { get } from '@shell/utils/object';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
-import isEqual from 'lodash/isEqual';
+import LabeledSelectPagination from '@shell/components/form/labeled-select-utils/labeled-select-pagination';
+import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
+
+// In theory this would be nicer as LabeledSelect/index.vue, however that would break a lot of places where we import this (which includes extensions)
 
 export default {
   name: 'LabeledSelect',
 
   components: { LabeledTooltip },
-  mixins:     [CompactInput, LabeledFormElement, VueSelectOverrides],
+  mixins:     [CompactInput, LabeledFormElement, VueSelectOverrides, LabeledSelectPagination],
 
   props: {
     appendToBody: {
@@ -67,7 +70,7 @@ export default {
     selectable: {
       default: (opt) => {
         if ( opt ) {
-          if ( opt.disabled || opt.kind === 'group' || opt.kind === 'divider' || opt.loading ) {
+          if ( opt.disabled || LABEL_SELECT_NOT_OPTION_KINDS.includes(opt.kind) || opt.loading ) {
             return false;
           }
         }
@@ -89,13 +92,17 @@ export default {
       type:    [String, Object, Number, Array, Boolean]
     },
     options: {
-      type:     Array,
-      required: true
+      type:    Array,
+      default: () => ([])
     },
     closeOnSelect: {
       type:    Boolean,
       default: true
     },
+    noOptionsLabelKey: {
+      type:    String,
+      default: 'labelSelect.noOptions.empty'
+    }
   },
 
   data() {
@@ -109,6 +116,16 @@ export default {
     hasLabel() {
       return this.isCompact ? false : !!this.label || !!this.labelKey || !!this.$slots.label;
     },
+
+    hasGroupIcon() {
+      // Required for option.icon. Note that we only apply if paginating as well (there might be 2 x performance issues with 2k entries. one to iterate through this list, the other with conditional class per entry in dom)
+      return this.canPaginate ? !!this._options.find((o) => o.kind === 'group' && !!o.icon) : false;
+    },
+
+    _options() {
+      // If we're paginated show the page as provided by `paginate`. See label-select-pagination mixin
+      return this.canPaginate ? this.page : this.options;
+    }
   },
 
   methods: {
@@ -153,18 +170,6 @@ export default {
         return;
       }
 
-      // This check is only needed if its possible for an option's label to change without the option's value changing - we can skip this if options are just strings or numbers
-      // HOWEVER even if strings are passed to v-select the 'option' in the slot is normalized to {label: <option>} so we have to check the options prop here instead of the 'option' itself
-      if (typeof this.options[0] === 'object') {
-        const newOption = this.getUpdatedOption(option);
-
-        if (newOption) {
-          const label = get(newOption, this.optionLabel);
-
-          return this.localizedLabel ? this.$store.getters['i18n/t'](label) || label : label;
-        }
-      }
-
       if (this.$attrs['get-option-label']) {
         return this.$attrs['get-option-label'](option);
       }
@@ -181,14 +186,6 @@ export default {
       }
     },
 
-    // If the option's label changed in parent but value did not, the label wont be automatically updated here
-    // Ensure that the label being shown is still present in the options prop and find the new one if not
-    getUpdatedOption(option) {
-      const isOutdated = this.options && !this.options.find((opt) => option[this.optionLabel] === opt[this.optionLabel]);
-
-      return isOutdated ? this.options.find((opt) => isEqual(this.reduce(option), this.reduce(opt))) : undefined;
-    },
-
     positionDropdown(dropdownList, component, { width }) {
       calculatePosition(dropdownList, component, width, this.placement);
     },
@@ -219,8 +216,12 @@ export default {
     },
 
     onSearch(newSearchString) {
-      if (newSearchString) {
-        this.dropdownShouldOpen(this.$refs['select-input'], true);
+      if (this.canPaginate) {
+        this.setPaginationFilter(newSearchString);
+      } else {
+        if (newSearchString) {
+          this.dropdownShouldOpen(this.$refs['select-input'], true);
+        }
       }
     },
 
@@ -276,16 +277,17 @@ export default {
       class="inline"
       :append-to-body="appendToBody"
       :calculate-position="positionDropdown"
-      :class="{ 'no-label': !(label || '').length }"
+      :class="{ 'no-label': !(label || '').length}"
       :clearable="clearable"
       :disabled="isView || disabled || loading"
       :get-option-key="getOptionKey"
       :get-option-label="(opt) => getOptionLabel(opt)"
       :label="optionLabel"
-      :options="options"
+      :options="_options"
       :map-keydown="mappedKeys"
       :placeholder="placeholder"
       :reduce="(x) => reduce(x)"
+      :filterable="isFilterable"
       :searchable="isSearchable"
       :selectable="selectable"
       :value="value != null && !loading ? value : ''"
@@ -301,6 +303,11 @@ export default {
       <template #option="option">
         <template v-if="option.kind === 'group'">
           <div class="vs__option-kind-group">
+            <i
+              v-if="option.icon"
+              class="icon"
+              :class="{ [option.icon]: true}"
+            />
             <b>{{ getOptionLabel(option) }}</b>
             <div v-if="option.badge">
               {{ option.badge }}
@@ -317,6 +324,8 @@ export default {
         </template>
         <div
           v-else
+          class="vs__option-kind"
+          :class="{ 'has-icon' : hasGroupIcon}"
           @mousedown="(e) => onClickOption(option, e)"
         >
           {{ getOptionLabel(option) }}
@@ -337,6 +346,45 @@ export default {
           v-bind="scope"
         />
       </template>
+
+      <div
+        v-if="canPaginate && totalResults"
+        slot="list-footer"
+        class="pagination-slot"
+      >
+        <div class="load-more">
+          <i
+            v-if="paginating"
+            class="icon icon-spinner icon-spin"
+          />
+          <div v-else>
+            <a
+              v-if="canLoadMore"
+              @click="loadMore"
+            > {{ t('labelSelect.pagination.more') }}</a>
+          </div>
+        </div>
+
+        <div class="count">
+          {{ optionCounts }}
+        </div>
+      </div>
+      <template #no-options="{ search }">
+        <div class="no-options-slot">
+          <div
+            v-if="paginating"
+            class="paginating"
+          >
+            <i class="icon icon-spinner icon-spin" />
+          </div>
+          <template v-else-if="search">
+            {{ t('labelSelect.noOptions.noMatch') }}
+          </template>
+          <template v-else>
+            {{ t(noOptionsLabelKey) }}
+          </template>
+        </div>
+      </template>
     </v-select>
     <i
       v-if="loading"
@@ -514,21 +562,73 @@ export default {
   }
 }
 
-// Styling for option group badge
-.vs__dropdown-menu .vs__dropdown-option .vs__option-kind-group {
-  display: flex;
-  > b {
-    flex: 1;
+$icon-size: 18px;
+
+// This represents the drop down area. Note - it might be attached to body and NOT the parent label select div
+.vs__dropdown-menu {
+
+  // Styling for individual options
+  .vs__dropdown-option .vs__option-kind {
+    &-group {
+      display: flex;
+      align-items: center;
+
+      i { // icon
+        width: $icon-size;
+      }
+
+      > b { // group label
+        flex: 1;
+      }
+
+      > div { // badge
+        background-color: var(--primary);
+        border-radius: 4px;
+        color: var(--primary-text);
+        font-size: 12px;
+        height: 18px;
+        line-height: 18px;
+        margin-top: 1px;
+        padding: 0 10px;
+      }
+    }
+
+    &.has-icon {
+      padding-left: $icon-size;
+    }
+  }
+
+    &.has-icon .vs__option-kind div{
+    padding-left: $icon-size;
+  }
+
+  .pagination-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: 5px;
+
+    .load-more {
+      display: flex;
+      align-items: center;
+      height: 19px;
+
+      a {
+        cursor: pointer;
+      }
+    }
+
+    .count {
+      position: absolute;
+      right: 10px;
+    }
   }
-  > div {
-    background-color: var(--primary);
-    border-radius: 4px;
-    color: var(--primary-text);
-    font-size: 12px;
-    height: 18px;
-    line-height: 18px;
-    margin-top: 1px;
-    padding: 0 10px;
+
+  .no-options-slot .paginating {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 

package/components/form/Labels.vue

@@ -52,7 +52,7 @@ export default {
     showLabelTitle: {
       type:    Boolean,
       default: true,
-    },
+    }
   },
 
   data() {
@@ -124,6 +124,8 @@ export default {
         :value="value.annotations"
         :add-label="t('labels.addAnnotation')"
         :mode="mode"
+        :protected-keys="value.systemAnnotations || []"
+        :toggle-filter="toggler"
         :title="t('labels.annotations.title')"
         :title-protip="annotationTitleTooltip"
         :read-allowed="false"

package/components/form/NameNsDescription.vue

@@ -1,6 +1,6 @@
 <script>
 import Vue from 'vue';
-import { mapGetters } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import { NAMESPACE } from '@shell/config/types';
@@ -14,7 +14,7 @@ export default {
   name:       'NameNsDescription',
   components: {
     LabeledInput,
-    LabeledSelect
+    LabeledSelect,
   },
 
   props: {
@@ -215,6 +215,7 @@ export default {
 
   computed: {
     ...mapGetters(['currentProduct', 'currentCluster', 'namespaces', 'allowedNamespaces']),
+    ...mapActions('cru-resource', ['setCreateNamespace']),
     namespaceReallyDisabled() {
       return (
         !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
@@ -289,6 +290,10 @@ export default {
       return this.mode === _CREATE;
     },
 
+    showCustomize() {
+      return this.mode === _CREATE && this.name && this.name.length > 0;
+    },
+
     colSpan() {
       if (!this.horizontal) {
         return `span-8`;
@@ -310,7 +315,7 @@ export default {
 
   watch: {
     name(val) {
-      if ( this.normalizeName ) {
+      if (this.normalizeName) {
         val = normalizeName(val);
       }
 
@@ -370,22 +375,28 @@ export default {
     cancelCreateNamespace(e) {
       this.createNamespace = false;
       this.$parent.$emit('createNamespace', false);
-      // In practise we should always have a defaultNamespace... unless we're in non-kube extension world,  so fall back on options
-      this.namespace = this.$store.getters['defaultNamespace'] || this.options.find((o) => !!o.value)?.value ;
+      // In practice we should always have a defaultNamespace... unless we're in non-kube extension world,  so fall back on options
+      this.namespace = this.$store.getters['defaultNamespace'] || this.options.find((o) => !!o.value)?.value;
     },
 
     selectNamespace(e) {
       if (!e || e.value === '') { // The blank value in the dropdown is labeled "Create a New Namespace"
         this.createNamespace = true;
-        this.$parent.$emit('createNamespace', true);
+        this.$store.dispatch(
+          'cru-resource/setCreateNamespace',
+          true,
+        );
         this.$emit('isNamespaceNew', true);
         Vue.nextTick(() => this.$refs.namespace.focus());
       } else {
         this.createNamespace = false;
-        this.$parent.$emit('createNamespace', false);
+        this.$store.dispatch(
+          'cru-resource/setCreateNamespace',
+          false,
+        );
         this.$emit('isNamespaceNew', false);
       }
-    }
+    },
   },
 };
 </script>
@@ -459,6 +470,8 @@ export default {
       />
     </div>
 
+    <slot name="customize" />
+    <!-- // TODO: here goes the custom component -->
     <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
@@ -505,13 +518,16 @@ button {
     padding-top: 7px;
   }
 }
+
 .row {
   &.name-ns-description {
     max-height: $input-height;
   }
+
   .namespace-select ::v-deep {
     .labeled-select {
       min-width: 40%;
+
       .v-select.inline {
         &.vs--single {
           padding-bottom: 2px;
@@ -527,9 +543,10 @@ button {
       max-height: initial;
     }
 
-    & > div > * {
+    &>div>* {
       margin-bottom: 20px;
     }
   }
+
 }
 </style>