@rancher/shell 1.2.3 → 2.0.1

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;
           }
         }
@@ -88,10 +91,18 @@ export default {
       default: null,
       type:    [String, Object, Number, Array, Boolean]
     },
+    options: {
+      type:    Array,
+      default: () => ([])
+    },
     closeOnSelect: {
       type:    Boolean,
       default: true
     },
+    noOptionsLabelKey: {
+      type:    String,
+      default: 'labelSelect.noOptions.empty'
+    }
   },
 
   data() {
@@ -105,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: {
@@ -149,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);
       }
@@ -177,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);
     },
@@ -215,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);
+        }
       }
     },
 
@@ -272,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 : ''"
@@ -297,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 }}
@@ -313,6 +324,8 @@ export default {
         </template>
         <div
           v-else
+          class="vs__option-kind"
+          :class="{ 'has-icon' : hasGroupIcon}"
           @mousedown="(e) => onClickOption(option, e)"
         >
           {{ getOptionLabel(option) }}
@@ -333,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"
@@ -510,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>

package/components/form/Password.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { CHARSET, randomStr } from '@shell/utils/string';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 export default {
   components: { LabeledInput },
@@ -75,6 +76,7 @@ export default {
     }
   },
   methods: {
+    copyTextToClipboard,
     generatePassword() {
       this.password = randomStr(16, CHARSET.ALPHA_NUM);
     },
@@ -109,7 +111,7 @@ export default {
         >
           <a
             href="#"
-            @click.prevent.stop="$copyText(password)"
+            @click.prevent.stop="copyTextToClipboard(password)"
           >{{ t('action.copy') }}</a>
         </div>
         <div

package/components/form/ResourceLabeledSelect.vue

@@ -0,0 +1,187 @@
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { labelSelectPaginationFunction, LabelSelectPaginationFunctionOptions } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
+import { LabelSelectPaginateFn, LabelSelectPaginateFnOptions, LabelSelectPaginateFnResponse } from '@shell/types/components/labeledSelect';
+
+type PaginateTypeOverridesFn = (opts: LabelSelectPaginationFunctionOptions) => LabelSelectPaginationFunctionOptions;
+
+interface SharedSettings {
+  /**
+   * Provide specific LabelSelect options for this mode (paginated / not paginated)
+   */
+  labelSelectOptions?: { [key: string]: any },
+  /**
+   * Map the resources shown in LabelSelect
+   */
+  mapResult?: (resources: any[]) => any[]
+}
+
+/**
+ * Settings to use when the LabelSelect is paginating
+ */
+export interface ResourceLabeledSelectPaginateSettings extends SharedSettings {
+  /**
+   * Override the convience function which fetches a page of results
+   */
+  overrideRequest?: LabelSelectPaginateFn,
+  /**
+   * Override the default settings used in the convience function to fetch a page of results
+   */
+  requestSettings?: PaginateTypeOverridesFn,
+}
+
+/**
+ * Settings to use when the LabelSelect is fetching all resources (not paginating)
+ */
+export type ResourceLabeledSelectSettings = SharedSettings
+
+/**
+ * Force a specific mode
+ */
+export enum RESOURCE_LABEL_SELECT_MODE {
+  /**
+   * Fetch all resources
+   */
+  ALL_RESOURCES = 'ALL', // eslint-disable-line no-unused-vars
+  /**
+   * Determine if all resources are fetched given system settings
+   */
+  DYNAMIC = 'DYNAMIC', // eslint-disable-line no-unused-vars
+}
+
+/**
+ * Convience wrapper around the LabelSelect component to support pagination
+ *
+ * Handles
+ *
+ * 1) Conditionally enabling the pagination feature given system settings
+ * 2) Helper function to fetch the pagination result
+ *
+ * A number of ways can be provided to override the convienences (see props)
+ */
+export default defineComponent({
+  name: 'ResourceLabeledSelect',
+
+  components: { LabeledSelect },
+
+  props: {
+    /**
+     * Resource to show
+     */
+    resourceType: {
+      type:     String,
+      required: true
+    },
+
+    inStore: {
+      type:    String,
+      default: 'cluster',
+    },
+
+    /**
+     * Determine if pagination is used via settings (DYNAMIC) or hardcode off
+     */
+    paginateMode: {
+      type:    String as PropType<RESOURCE_LABEL_SELECT_MODE>,
+      default: RESOURCE_LABEL_SELECT_MODE.DYNAMIC,
+    },
+
+    /**
+     * Specific settings to use when we're showing all results
+     */
+    allResourcesSettings: {
+      type:    Object as PropType<ResourceLabeledSelectSettings>,
+      default: null,
+    },
+
+    /**
+     * Specific settings to use when we're showing paginated results
+     */
+    paginatedResourceSettings: {
+      type:    Object as PropType<ResourceLabeledSelectPaginateSettings>,
+      default: null,
+    },
+  },
+
+  data() {
+    return { paginate: false };
+  },
+
+  async fetch() {
+    switch (this.paginateMode) {
+    case RESOURCE_LABEL_SELECT_MODE.ALL_RESOURCES:
+      this.paginate = false;
+      break;
+    case RESOURCE_LABEL_SELECT_MODE.DYNAMIC:
+      this.paginate = this.$store.getters[`${ this.inStore }/paginationEnabled`](this.resourceType);
+      break;
+    }
+
+    if (!this.paginate) {
+      await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.resourceType });
+    }
+  },
+
+  computed: {
+    labelSelectAttributes() {
+      return this.paginate ? {
+        ...this.$attrs,
+        ...this.paginatedResourceSettings?.labelSelectOptions || {}
+      } : {
+        ...this.$attrs,
+        ...this.allResourcesSettings?.labelSelectOptions || {}
+      };
+    },
+
+    allOfType() {
+      if (this.$fetchState.pending || this.paginate) {
+        return [];
+      }
+
+      const all = this.$store.getters[`${ this.inStore }/all`](this.resourceType);
+
+      return this.allResourcesSettings?.mapResult ? this.allResourcesSettings.mapResult(all) : all;
+    }
+  },
+
+  methods: {
+    /**
+     * Typeof LabelSelectPaginateFn
+     */
+    async paginateType(opts: LabelSelectPaginateFnOptions): Promise<LabelSelectPaginateFnResponse> {
+      if (this.paginatedResourceSettings?.overrideRequest) {
+        return await this.paginatedResourceSettings.overrideRequest(opts);
+      }
+
+      const { filter } = opts;
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+      const defaultOptions: LabelSelectPaginationFunctionOptions = {
+        opts,
+        filters,
+        type: this.resourceType,
+        ctx:  { getters: this.$store.getters, dispatch: this.$store.dispatch },
+        sort: [{ asc: true, field: 'metadata.name' }],
+      };
+      const options = this.paginatedResourceSettings?.requestSettings ? this.paginatedResourceSettings.requestSettings(defaultOptions) : defaultOptions;
+      const res = await labelSelectPaginationFunction(options);
+
+      return this.paginatedResourceSettings?.mapResult ? {
+        ...res,
+        page: this.paginatedResourceSettings.mapResult(res.page)
+      } : res;
+    },
+  },
+});
+</script>
+
+<template>
+  <LabeledSelect
+    v-bind="labelSelectAttributes"
+    :loading="$fetchState.pending"
+    :options="allOfType"
+    :paginate="paginateType"
+    v-on="$listeners"
+  />
+</template>

package/components/form/ResourceTabs/index.vue

@@ -73,11 +73,13 @@ export default {
     const inStore = this.$store.getters['currentStore'](EVENT);
 
     return {
-      hasEvents:     this.$store.getters[`${ inStore }/schemaFor`](EVENT), // @TODO be smarter about which resources actually ever have events
-      allEvents:     [],
-      selectedTab:   this.defaultTab,
-      didLoadEvents: false,
-      extensionTabs: getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams),
+      hasEvents:      this.$store.getters[`${ inStore }/schemaFor`](EVENT), // @TODO be smarter about which resources actually ever have events
+      allEvents:      [],
+      selectedTab:    this.defaultTab,
+      didLoadEvents:  false,
+      extensionTabs:  getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams),
+      inStore,
+      showConditions: false,
     };
   },
 
@@ -85,16 +87,13 @@ export default {
     this.$store.dispatch('cluster/forgetType', EVENT);
   },
 
-  computed: {
-    showConditions() {
-      const inStore = this.$store.getters['currentStore'](this.value.type);
-
-      if ( this.$store.getters[`${ inStore }/schemaFor`](this.value.type) ) {
-        return this.isView && this.needConditions && this.value?.type && this.$store.getters[`${ inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
-      }
+  fetch() {
+    // By this stage the `value` should be set. Taking a chance that this is true
+    // The alternative is have an expensive watch on the `value` and trigger there (as well)
+    this.setShowConditions();
+  },
 
-      return false;
-    },
+  computed: {
     showEvents() {
       return this.isView && this.needEvents && this.hasEvents;
     },
@@ -166,7 +165,24 @@ export default {
           this.didLoadEvents = true;
         });
       }
-    }
+    },
+
+    /**
+    * Conditions come from a resource's `status`. They are used by both core resources like workloads as well as those from CRDs
+    * - Workloads
+    * - Nodes
+    * - Fleet git repo
+    * - Cluster (provisioning)
+    *
+    * Check here if the resource type contains conditions via the schema resourceFields
+    */
+    async setShowConditions() {
+      if (this.isView && this.needConditions && !!this.value?.type && !!this.schema?.fetchResourceFields) {
+        await this.schema.fetchResourceFields();
+
+        this.showConditions = this.$store.getters[`${ this.inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
+      }
+    },
   }
 };
 </script>