dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.2

package/components/form/ResourceQuota/Project.vue

@@ -57,14 +57,14 @@ export default {
 </script>
 <template>
   <div>
-    <div style="justify-content: right;" class="headers mb-10">
-      <div style="width: 400px;">
+    <div style="justify-content: left;" class="headers mb-10">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.resourceType') }}</label>
       </div>
-      <div style="width: 400px;">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.projectLimit') }}</label>
       </div>
-      <div style="width: 400px;">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.namespaceDefaultLimit') }}</label>
       </div>
     </div>

package/components/form/ResourceQuota/ProjectRow.vue

@@ -70,44 +70,49 @@ export default {
 <template>
   <div
     v-if="typeOption"
-    style="justify-content: right;"
     class="rowNew"
   >
-    <Select
-      :value="type"
-      :mode="mode"
-      :options="types"
-      data-testid="projectrow-type-input"
-      @update:value="updateType($event)"
-    />
-    <UnitInput
-      :value="resourceQuotaLimit[type]"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-project-quota-input"
-      @update:value="updateQuotaLimit('resourceQuota', type, $event)"
-    />
-    <UnitInput
-      :value="namespaceDefaultResourceQuotaLimit[type]"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-namespace-quota-input"
-      @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
-    />
+    <div style="width: 450px;">
+      <Select
+        :value="type"
+        :mode="mode"
+        :options="types"
+        data-testid="projectrow-type-input"
+        @update:value="updateType($event)"
+      />
+    </div>
+    <div style="width: 450px;">
+      <UnitInput
+        :value="resourceQuotaLimit[type]"
+        :mode="mode"
+        :placeholder="typeOption.placeholder"
+        :increment="typeOption.increment"
+        :input-exponent="typeOption.inputExponent"
+        :base-unit="typeOption.baseUnit"
+        :output-modifier="true"
+        data-testid="projectrow-project-quota-input"
+        @update:value="updateQuotaLimit('resourceQuota', type, $event)"
+      />
+    </div>
+    <div style="width: 450px;">
+      <UnitInput
+        :value="namespaceDefaultResourceQuotaLimit[type]"
+        :mode="mode"
+        :placeholder="typeOption.placeholder"
+        :increment="typeOption.increment"
+        :input-exponent="typeOption.inputExponent"
+        :base-unit="typeOption.baseUnit"
+        :output-modifier="true"
+        data-testid="projectrow-namespace-quota-input"
+        @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
+      />
+    </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
   .rowNew {
     display: flex;
-    justify-content: space-between;
+    justify-content: left;
   }
 </style>

package/components/form/ResourceSelector.vue

@@ -2,10 +2,11 @@
 import { Banner } from '@components/Banner';
 import MatchExpressions from '@shell/components/form/MatchExpressions';
 import ResourceTable from '@shell/components/ResourceTable';
-import { allHash } from '@shell/utils/promise';
 import { _EDIT } from '@shell/config/query-params';
-import { convert, matching, simplify } from '@shell/utils/selector';
+import { convert, simplify } from '@shell/utils/selector';
 import throttle from 'lodash/throttle';
+import { COUNT } from '@shell/config/types';
+import { matching } from '@shell/utils/selector-typed';
 
 export default {
   name: 'ResourceSelector',
@@ -36,11 +37,6 @@ export default {
   },
 
   async fetch() {
-    // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
-    const hash = await allHash({ allResources: this.$store.dispatch('cluster/findAll', { type: this.type }) });
-
-    this.allResources = hash.allResources;
-
     this.updateMatchingResources();
   },
 
@@ -53,11 +49,10 @@ export default {
         sample:  null,
         total:   0,
       },
-      allResources:        [],
-      allResourcesInScope: [],
-      tableHeaders:        this.$store.getters['type-map/headersFor'](
+      tableHeaders: this.$store.getters['type-map/headersFor'](
         this.$store.getters['cluster/schemaFor'](this.type)
       ),
+      inStore: this.$store.getters['currentProduct'].inStore,
     };
   },
 
@@ -71,6 +66,9 @@ export default {
     schema() {
       return this.$store.getters['cluster/schemaFor'](this.type);
     },
+    /**
+     * of type matchExpression aka `KubeLabelSelectorExpression[]`
+     */
     selectorExpressions: {
       get() {
         return convert(
@@ -85,22 +83,28 @@ export default {
         this.value['matchExpressions'] = matchExpressions;
       }
     },
+    allResourcesInScope() {
+      const counts = this.$store.getters[`${ this.inStore }/all`](COUNT)?.[0]?.counts || {};
+
+      if (this.namespace) {
+        return counts?.[this.type].namespaces[this.namespace]?.count || 0;
+      }
+
+      return counts[this.type]?.summary?.count || 0;
+    }
   },
 
   methods: {
-    updateMatchingResources: throttle(function() {
-      this.allResourcesInScope = this.namespace ? this.allResources.filter((res) => res.metadata.namespace === this.namespace) : this.allResources;
-      const match = matching(this.allResourcesInScope, this.selectorExpressions);
-      const matched = match.length || 0;
-      const sample = match[0]?.nameDisplay;
-
-      this.matchingResources = {
-        matched,
-        matches: match,
-        none:    matched === 0,
-        sample,
-        total:   this.allResourcesInScope.length,
-      };
+    updateMatchingResources: throttle(async function() {
+      this.matchingResources = await matching({
+        labelSelector: { matchExpressions: this.selectorExpressions },
+        type:          this.type,
+        inStore:       this.inStore,
+        $store:        this.$store,
+        inScopeCount:  this.allResourcesInScope,
+        namespace:     this.namespace,
+        transient:     true,
+      });
     }, 250, { leading: true }),
   }
 
@@ -121,7 +125,7 @@ export default {
       </div>
     </div>
     <div class="row">
-      <div class="col span-12">
+      <div class="span-12">
         <Banner :color="(matchingResources.none ? 'warning' : 'success')">
           <span v-clean-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
         </Banner>

package/components/form/ResourceTabs/index.vue

@@ -68,6 +68,10 @@ export default {
     extensionParams: {
       type:    Object,
       default: null
+    },
+    useHash: {
+      type:    Boolean,
+      default: true
     }
   },
 
@@ -195,7 +199,7 @@ export default {
         pagination.filters = [];
       }
 
-      const field = `involvedObject.uid`; // Pending API Support - https://github.com/rancher/rancher/issues/48603
+      const field = `involvedObject.uid`;
 
       // of type PaginationParamFilter
       let existing = null;
@@ -232,6 +236,8 @@ export default {
   <Tabbed
     v-bind="$attrs"
     :default-tab="defaultTab"
+    :resource="value"
+    :use-hash="useHash"
     @changed="tabChange"
   >
     <slot />

package/components/form/SSHKnownHosts/index.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import KnownHostsEditDialog from './KnownHostsEditDialog.vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
 export default defineComponent({
@@ -20,8 +19,6 @@ export default defineComponent({
     },
   },
 
-  components: { KnownHostsEditDialog },
-
   computed: {
     isViewMode() {
       return this.mode === _VIEW;
@@ -40,7 +37,20 @@ export default defineComponent({
   methods: {
     openDialog() {
       (this.$refs.button as HTMLInputElement)?.blur();
-      (this.$refs.editDialog as any).showDialog();
+
+      this.$store.dispatch('management/promptModal', {
+        component:           'KnownHostsEditDialog',
+        returnFocusSelector: '#known-ssh-hosts-trigger',
+        testId:              'sshKnownHostsDialog',
+        height:              'auto',
+        componentProps:      {
+          mode:   this.mode,
+          value:  this.value,
+          closed: (res: any) => {
+            this.dialogClosed(res);
+          }
+        }
+      });
     },
 
     dialogClosed(result: any) {
@@ -78,13 +88,6 @@ export default defineComponent({
           :alt="t('secret.ssh.editKnownHosts.title')"
         />
       </button>
-
-      <KnownHostsEditDialog
-        ref="editDialog"
-        :value="value"
-        :mode="mode"
-        @closed="dialogClosed"
-      />
     </template>
   </div>
 </template>

package/components/form/SecretSelector.vue

@@ -138,6 +138,13 @@ export default {
     }
   },
 
+  watch: {
+    namespace() {
+      // Namespace has changed, reset the selections
+      this.$emit('update:value', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: undefined, [this.keyKey]: '' } } });
+    }
+  },
+
   methods: {
     /**
      * Provide a set of options for the LabelSelect ([none, ...{label, value}])
@@ -173,11 +180,18 @@ export default {
     paginatePageOptions(opts) {
       const { opts: { filter } } = opts;
 
-      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({
+        field: 'metadata.name', value: filter, exact: false, equals: true
+      })] : [];
 
       filters.push(
         PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.namespace }),
-        PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
+        PaginationParamFilter.createMultipleFields(this.types.map((t) => ({
+          field:  'metadata.fields.1',
+          equals: true,
+          exact:  true,
+          value:  t
+        })))
       );
 
       return {
@@ -201,6 +215,7 @@ export default {
     <div class="input-container">
       <!-- key by namespace to ensure label select current page is recreated on ns change -->
       <ResourceLabeledSelect
+        :key="namespace"
         v-model:value="name"
         :disabled="!isView && disabled"
         :label="secretNameLabel"
@@ -212,6 +227,7 @@ export default {
       />
       <LabeledSelect
         v-if="showKeySelector"
+        :key="namespace"
         v-model:value="key"
         class="col span-6"
         :disabled="isKeyDisabled"

package/components/form/Security.vue

@@ -157,7 +157,6 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
     <div>
       <div class="row">
@@ -191,11 +190,10 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
     <div
       data-testid="input-security-runAsUser"
-      class="row mb-10"
+      class="row"
     >
       <div class="col span-6">
         <LabeledInput

package/components/form/Select.vue

@@ -5,6 +5,9 @@ import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { generateRandomAlphaString } from '@shell/utils/string';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
+import { _VIEW } from '@shell/config/query-params';
+import { useClickOutside } from '@shell/composables/useClickOutside';
+import { ref } from 'vue';
 
 export default {
   emits: ['update:value', 'createdListItem', 'on-open', 'on-close'],
@@ -81,7 +84,7 @@ export default {
     },
     closeOnSelect: {
       type:    Boolean,
-      default: true
+      default: true,
     },
 
     compact: {
@@ -93,11 +96,18 @@ export default {
       default: false
     }
   },
+  setup() {
+    const select = ref(null);
+    const isOpen = ref(false);
+
+    useClickOutside(select, () => {
+      isOpen.value = false;
+    });
+
+    return { isOpen, select };
+  },
   data() {
-    return {
-      isOpen:       false,
-      generatedUid: `s-uid-${ generateRandomAlphaString(12) }`
-    };
+    return { generatedUid: `s-uid-${ generateRandomAlphaString(12) }` };
   },
   methods: {
     // resizeHandler = in mixin
@@ -124,24 +134,20 @@ export default {
       calculatePosition(dropdownList, component, width, this.placement);
     },
 
-    focusSearch() {
-      // we need this override as in a "closeOnSelect" type of component
-      // if we don't have this override, it would open again
-      if (this.overridesMixinPreventDoubleTriggerKeysOpen) {
-        this.$nextTick(() => {
-          const el = this.$refs['select'];
-
-          if ( el ) {
-            el.focus();
-          }
+    // Ensure we only focus on open, otherwise we re-open on close
+    clickSelect(ev) {
+      if (this.mode === _VIEW || this.loading === true || this.disabled === true) {
+        return;
+      }
 
-          this.overridesMixinPreventDoubleTriggerKeysOpen = false;
-        });
+      this.isOpen = !this.isOpen;
 
-        return;
+      if (this.isOpen) {
+        this.focusSearch(ev);
       }
-      this.$refs['select-input'].open = true;
+    },
 
+    focusSearch() {
       this.$nextTick(() => {
         const el = this.$refs['select-input']?.searchEl;
 
@@ -151,6 +157,10 @@ export default {
       });
     },
 
+    focusWrapper() {
+      this.$refs.select.focus();
+    },
+
     get,
 
     onClickOption(option, event) {
@@ -203,19 +213,36 @@ export default {
     },
 
     handleDropdownOpen(args) {
+      if (!this.isOpen) {
+        return false;
+      }
+
       // function that prevents the "opening dropdown on focus"
       // default behaviour of v-select
       return args.noDrop || args.disabled ? false : args.open;
     },
     onOpen() {
-      this.isOpen = true;
+      this.focusSearch();
       this.$emit('on-open');
       this.resizeHandler();
     },
 
-    onClose() {
+    closeOnSelecting() {
+      if (!this.closeOnSelect) {
+        return;
+      }
+
+      this.close();
+    },
+
+    close() {
       this.isOpen = false;
+      this.onClose();
+    },
+
+    onClose() {
       this.$emit('on-close');
+      this.focusWrapper();
     },
   },
   computed: {
@@ -280,11 +307,12 @@ export default {
     role="combobox"
     :aria-expanded="isOpen"
     :aria-label="$attrs['aria-label'] || undefined"
+    :aria-labelledby="$attrs['aria-labelledby'] || undefined"
     :aria-describedby="$attrs['aria-describedby'] || undefined"
-    @click="focusSearch"
-    @keydown.enter="focusSearch"
-    @keydown.down.prevent="focusSearch"
-    @keydown.space.prevent="focusSearch"
+    @click="clickSelect"
+    @keydown.self.enter="clickSelect"
+    @keydown.self.down.prevent="clickSelect"
+    @keydown.self.space.prevent="clickSelect"
   >
     <v-select
       ref="select-input"
@@ -299,7 +327,7 @@ export default {
       :get-option-label="(opt) => getOptionLabel(opt)"
       :label="optionLabel"
       :options="options"
-      :close-on-select="closeOnSelect"
+      :close-on-select="false"
       :map-keydown="mappedKeys"
       :placeholder="placeholder"
       :reduce="(x) => reduce(x)"
@@ -317,6 +345,9 @@ export default {
       @open="onOpen"
       @close="onClose"
       @option:created="(e) => $emit('createdListItem', e)"
+      @option:selecting="closeOnSelecting"
+      @option:selected="closeOnSelect && close"
+      @keydown.enter.stop
     >
       <template #no-options>
         暂无数据
@@ -360,6 +391,11 @@ export default {
 <style lang="scss" scoped>
   .unlabeled-select {
     position: relative;
+    width: 100%;
+
+    :deep() .vs__actions:after {
+      // padding-top: 2px;
+    }
 
     :deep() .v-select.select-input-view {
       .vs__actions {
@@ -372,13 +408,14 @@ export default {
     }
 
     :deep() .labeled-tooltip.error .status-icon {
-      top: 7px;
-      right: 2px;
+      top: 7px !important;
+      right: 2px !important;
     }
 
     :deep() .vs__selected-options {
       display: flex;
-      margin: 3px;
+      align-items: center;
+      margin: 0px;
 
       .vs__selected {
           width: initial;

package/components/form/SelectOrCreateAuthSecret.vue

@@ -237,7 +237,7 @@ export default {
       let filteredSecrets = [];
 
       if (this.allSecrets) {
-        // Fitler secrets given their namespace and required secret type
+        // Filter secrets given their namespace and required secret type
         filteredSecrets = this.allSecrets
           .filter((x) => this.filterByNamespace ? x.metadata.namespace === this.namespace : true
           )
@@ -450,6 +450,7 @@ export default {
             ),
           ],
         }),
+        watch: this.cacheSecrets,
       };
 
       if (this.cacheSecrets) {
@@ -464,9 +465,11 @@ export default {
         null,
         findPageArgs
       );
-      const res = await this.$store.dispatch(`cluster/request`, { url });
+      // Strictly speaking this could be any store (request action should be agnostic)
+      const res = await this.$store.dispatch(`${ this.inStore }/request`, { url });
 
-      return res?.data || [];
+      // Classify
+      return await this.$store.dispatch(`${ this.inStore }/createMany`, res?.data || []);
     },
 
     updateKeyVal() {

package/components/form/ServiceNameSelect.vue

@@ -120,11 +120,8 @@ export default {
 
 <template>
   <div>
-    <div class="spacer" />
-    <div class="row mb-10">
-      <h3 class="col span-6">
-        {{ t('workload.serviceAccountName.label') }}
-      </h3>
+    <div class="row mb-10 mt-40">
+      <h3>{{ t('workload.serviceAccountName.label') }}</h3>
     </div>
     <div class="row span-6">
       <LabeledSelect