dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

package/components/form/Labels.vue

@@ -1,6 +1,74 @@
-<script>
-import KeyValue from '@shell/components/form/KeyValue';
+<script lang="ts">
+import { pickBy, omitBy, mapValues } from 'lodash';
+import { matchesSomeRegex } from '@shell/utils/string';
+import { LABELS_TO_IGNORE_REGEX, ANNOTATIONS_TO_IGNORE_REGEX } from '@shell/config/labels-annotations';
+import KeyValue from '@shell/components/form/KeyValue.vue';
 import { ToggleSwitch } from '@components/Form/ToggleSwitch';
+import { _VIEW } from '@shell/config/query-params';
+
+export class Factory {
+  private protectedKeys: string[] = [];
+  private protectedRegexes: RegExp[] = [];
+  private protectedWarning = '';
+
+  private isProtected(key: string) {
+    return this.protectedKeys.includes(key) || matchesSomeRegex(key, this.protectedRegexes);
+  }
+
+  private omitProtected(obj: object) {
+    return omitBy(obj, (_, key) => this.isProtected(key));
+  }
+
+  private pickProtected(obj: object) {
+    return pickBy(obj, (_, key) => this.isProtected(key));
+  }
+
+  private keyErrorMap(elems: object) {
+    return mapValues(this.pickProtected(elems), () => this.protectedWarning);
+  }
+
+  constructor(protectedKeys: string[], protectedRegexes: RegExp[], msg: string, initValue: object) {
+    // Init privates
+    this.protectedKeys = protectedKeys || [];
+    this.protectedRegexes = protectedRegexes || [];
+    this.protectedWarning = msg || '';
+
+    this.initValue = initValue || {};
+    this.value = this.omitProtected(this.initValue);
+    this.keyErrors = this.keyErrorMap(this.value);
+    this.hasProtectedKeys = Object.keys(this.pickProtected(this.initValue)).length > 0;
+  }
+
+  initValue: object = {};
+  value: object = {};
+  keyErrors: object = {};
+  hasProtectedKeys = false;
+
+  /**
+   * Updates resource's model and discard new protected keys
+   * Old protected keys remain untouched on edit
+   *
+   * @param value edited labels/annotations
+   * @param callbackFn function to set model's labels/annotations
+   */
+  update(value: Record<string, string>, callbackFn: (value: object) => void) {
+    const neu = value || {};
+
+    callbackFn({
+      ...this.omitProtected(neu),
+      ...this.pickProtected(this.initValue),
+    });
+
+    this.value = neu;
+    this.keyErrors = this.keyErrorMap(neu);
+  }
+}
+
+interface DataType {
+  labels: Factory,
+  annotations: Factory,
+  toggler: boolean,
+}
 
 export default {
   components: {
@@ -60,8 +128,14 @@ export default {
     },
   },
 
-  data() {
-    return { toggler: false };
+  data(): DataType {
+    const protectedWarning = this.t('labels.protectedWarning');
+
+    return {
+      labels:      new Factory(this.value.systemLabels, LABELS_TO_IGNORE_REGEX, protectedWarning, this.value.labels),
+      annotations: new Factory(this.value.systemAnnotations, ANNOTATIONS_TO_IGNORE_REGEX, protectedWarning, this.value.annotations),
+      toggler:     false
+    };
   },
 
   computed: {
@@ -75,6 +149,10 @@ export default {
 
     columnsClass() {
       return `${ this.displaySideBySide ? 'col span-6' : 'row' }`.trim();
+    },
+
+    showToggler() {
+      return this.mode === _VIEW && (this.labels.hasProtectedKeys || this.annotations.hasProtectedKeys);
     }
   }
 };
@@ -84,14 +162,11 @@ export default {
     <div :class="defaultSectionClass">
       <div class="labels">
         <div class="labels__header">
-          <div
-            v-if="showLabelTitle"
-            class="clearFix mb-20"
-          >
+          <div v-if="showLabelTitle">
             <t k="labels.labels.title" />
           </div>
           <ToggleSwitch
-            v-if="value.hasSystemLabels"
+            v-if="showToggler"
             v-model:value="toggler"
             name="label-system-toggle"
             :on-label="t('labels.labels.show')"
@@ -101,21 +176,17 @@ export default {
           <t k="labels.labels.description" />
         </p>
         <div :class="columnsClass">
-          <slot
-            name="labels"
-            :toggler="toggler"
-          >
+          <slot name="labels">
             <KeyValue
               key="labels"
-              :value="value.labels"
-              :protected-keys="value.systemLabels || []"
-              :toggle-filter="toggler"
+              :value="toggler ? labels.initValue : labels.value"
               :add-label="t('labels.addLabel')"
               :add-icon="addIcon"
               :mode="mode"
               :read-allowed="false"
               :value-can-be-empty="true"
-              @update:value="value.setLabels($event)"
+              :key-errors="labels.keyErrors"
+              @update:value="labels.update($event, (x) => value.setLabels(x))"
             />
           </slot>
         </div>
@@ -128,17 +199,16 @@ export default {
     >
       <KeyValue
         key="annotations"
-        :value="value.annotations"
+        :value="toggler ? annotations.initValue : annotations.value"
         :add-label="t('labels.addAnnotation')"
         :add-icon="addIcon"
         :mode="mode"
-        :protected-keys="value.systemAnnotations || []"
-        :toggle-filter="toggler"
         :title="t('labels.annotations.title')"
         :title-protip="annotationTitleTooltip"
         :read-allowed="false"
         :value-can-be-empty="true"
-        @update:value="value.setAnnotations($event)"
+        :key-errors="annotations.keyErrors"
+        @update:value="annotations.update($event, (x) => value.setAnnotations(x))"
       />
     </div>
   </div>

package/components/form/MatchExpressions.vue

@@ -8,7 +8,7 @@ import { convert, simplify } from '@shell/utils/selector';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {
-  emits: ['update:value', 'remove'],
+  emits: ['update:value', 'add', 'remove'],
 
   components: { Select, LabeledSelect },
   props:      {
@@ -25,7 +25,11 @@ export default {
       default: 'edit'
     },
 
-    // pod/node affinity types have different operator options
+    /**
+     * pod/node affinity types have different operator options
+     *
+     * Note - This prop should just be isNode
+     */
     type: {
       type:    String,
       default: NODE
@@ -50,6 +54,26 @@ export default {
       default: true
     },
 
+    labelKey: {
+      type:    String,
+      default: '',
+    },
+
+    addLabel: {
+      type:    String,
+      default: '',
+    },
+
+    addIcon: {
+      type:    String,
+      default: '',
+    },
+
+    addClass: {
+      type:    String,
+      default: '',
+    },
+
     // whether or not to show remove rule button right side of the rule
     showRemoveButton: {
       type:    Boolean,
@@ -142,6 +166,10 @@ export default {
       return this.mode === 'view';
     },
 
+    _addLabel() {
+      return this.addLabel || this.t('workload.scheduling.affinity.matchExpressions.addRule');
+    },
+
     node() {
       return NODE;
     },
@@ -208,12 +236,21 @@ export default {
       }
 
       this.rules.push(newRule);
+
+      this.$nextTick(() => {
+        this.focus(this.rules.length - 1);
+
+        this.$emit('add');
+      });
     },
 
     update() {
       this.$nextTick(() => {
         const out = this.rules.map((rule) => {
-          const expression = { key: rule.key, operator: rule.operator };
+          const expression = {
+            key:      rule.key.trim(),
+            operator: rule.operator
+          };
 
           if (this.matchingSelectorDisplay) {
             expression.matching = rule.matching;
@@ -238,6 +275,10 @@ export default {
           this.$emit('update:value', simplify(out));
         }
       });
+    },
+
+    focus(index = 0) {
+      this.$refs[`input-match-expression-key-${ index }`]?.[0]?.focus();
     }
   }
 };
@@ -267,7 +308,7 @@ export default {
         {{ t('workload.scheduling.affinity.matchExpressions.matchType') }}
       </label>
       <label>
-        {{ t('workload.scheduling.affinity.matchExpressions.key') }}
+        {{ labelKey || t('workload.scheduling.affinity.matchExpressions.key') }}
       </label>
       <label>
         {{ t('workload.scheduling.affinity.matchExpressions.operator') }}
@@ -290,7 +331,6 @@ export default {
       >
         <div v-if="isView">
           {{ row.matching }}
-          <!-- {{ row.matching }} -->
         </div>
         <LabeledSelect
           v-else
@@ -309,6 +349,7 @@ export default {
         </div>
         <input
           v-else-if="!hasKeySelectOptions"
+          :ref="`input-match-expression-key-${index}`"
           v-model="row.key"
           :mode="mode"
           :data-testid="`input-match-expression-key-control-${index}`"
@@ -316,6 +357,7 @@ export default {
         >
         <LabeledSelect
           v-else
+          :ref="`input-match-expression-key-${index}`"
           v-model:value="row.key"
           :mode="mode"
           :options="keysSelectOptions"
@@ -383,15 +425,20 @@ export default {
     </div>
     <div
       v-if="!isView && showAddButton"
-      class="mt-20"
+      class="mmt-4"
     >
       <button
         type="button"
         class="btn role-tertiary add"
-        :data-testid="`input-match-expression-add-rule`"
+        :class="[addClass]"
+        data-testid="input-match-expression-add-rule"
         @click="addRule"
       >
-        <t k="workload.scheduling.affinity.matchExpressions.addRule" />
+        <i
+          v-if="addIcon"
+          class="mr-5 icon"
+          :class="[addIcon]"
+        /> {{ _addLabel }}
       </button>
     </div>
   </div>
@@ -468,4 +515,4 @@ export default {
   .view-item-value{
     width: 400px;
   }
-</style>
+</style>

package/components/form/NameNsDescription.vue

@@ -31,6 +31,10 @@ export default {
       type:     String,
       required: true,
     },
+    nameHidden: {
+      type:    Boolean,
+      default: false,
+    },
     nameNsHidden: {
       type:    Boolean,
       default: false,
@@ -319,7 +323,7 @@ export default {
     }
 
     if (props.descriptionKey) {
-      description.value = get(v, props.descriptionKey);
+      description.value = get(v.value, props.descriptionKey);
     } else {
       description.value = metadata?.annotations?.[DESCRIPTION];
     }
@@ -356,7 +360,7 @@ export default {
 
     colSpan() {
       if (!this.horizontal) {
-        return `span-5`;
+        return `span-6`;
       }
       // Name and namespace take up two columns.
       // let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
@@ -435,8 +439,8 @@ export default {
     <div
       v-if="namespaced && !nameNsHidden && createNamespace"
       :data-testid="componentTestid + '-namespace-create'"
-      class="col span-5"
-      :class=" isDialog? 'namespace-item-row mb-20': 'col span-5'"
+      class="col span-6"
+      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
       style="display: flex;"
     >
 
@@ -455,7 +459,7 @@ export default {
 
       <!-- 取消创建命名空间按钮 -->
       <button
-        aria="Cancel create"
+        :aria-label="t('namespace.cancelCreateAriaLabel')"
         @click="cancelCreateNamespace"
       >
         <i
@@ -469,7 +473,7 @@ export default {
     <div
       v-if="namespaced && !nameNsHidden && !createNamespace"
       :data-testid="componentTestid + '-namespace'"
-      :class=" isDialog? 'namespace-item-row mb-20': 'col span-5'"
+      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
     >
       <LabeledSelect
         v-show="!createNamespace"
@@ -490,7 +494,7 @@ export default {
 
     <!-- 名称输入框 -->
     <div
-      v-if="!nameNsHidden"
+      v-if="!nameHidden && !nameNsHidden"
       :data-testid="componentTestid + '-name'"
       :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
     >
@@ -514,7 +518,7 @@ export default {
     <!-- <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
-      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-5']"
+      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-6']"
     > -->
 
     <!-- 额外的动态列 -->

package/components/form/Networking.vue

@@ -31,28 +31,23 @@ export default {
     const t = this.$store.getters['i18n/t'];
 
     return {
-      dnsPolicy:   this.value.dnsPolicy || 'ClusterFirst',
-      networkMode: this.value.hostNetwork ? { label: t('workload.networking.networkMode.options.hostNetwork'), value: true } : { label: t('workload.networking.networkMode.options.normal'), value: false },
-      hostAliases: [],
-      nameservers: null,
-      searches:    null,
-      hostname:    null,
-      subdomain:   null,
-      options:     null,
+      dnsPolicy:      this.value.dnsPolicy || 'ClusterFirst',
+      networkMode:    this.value.hostNetwork ? { label: t('workload.networking.networkMode.options.hostNetwork'), value: true } : { label: t('workload.networking.networkMode.options.normal'), value: false },
+      tmpHostAliases: [],
+      nameservers:    null,
+      searches:       null,
+      hostname:       null,
+      subdomain:      null,
+      options:        null,
     };
   },
 
   created() {
-    const hostAliases = (this.value.hostAliases || []).map((entry) => {
-      return {
-        ip:        entry.ip,
-        hostnames: entry.hostnames.join(', ')
-      };
-    });
+    const hostAliases = this.value.hostAliases || [];
     const { dnsConfig = {}, hostname, subdomain } = this.value;
     const { nameservers, searches, options } = dnsConfig;
 
-    this.hostAliases = hostAliases;
+    this.tmpHostAliases = hostAliases;
     this.nameservers = nameservers;
     this.searches = searches;
     this.hostname = hostname;
@@ -89,6 +84,15 @@ export default {
       ];
     },
 
+    hostAliases() {
+      return (this.value.hostAliases || []).map((entry) => {
+        return {
+          ip:        entry.ip,
+          hostnames: entry.hostnames?.join(', ') ?? ''
+        };
+      });
+    },
+
     ...mapGetters({ t: 'i18n/t' })
   },
 
@@ -121,12 +125,12 @@ export default {
 
   methods: {
     updateHostAliases(neu) {
-      this.hostAliases = neu.map((entry) => {
+      this.tmpHostAliases = neu.map((entry) => {
         const ip = entry.ip.trim();
         const hostnames = entry.hostnames.trim().split(/[\s,]+/).filter((x) => !!x);
 
         return { ip, hostnames };
-      }).filter((entry) => entry.ip && entry.hostnames.length);
+      });
       this.update();
     },
 
@@ -142,7 +146,7 @@ export default {
         dnsConfig,
         dnsPolicy:   this.dnsPolicy,
         hostname:    this.hostname,
-        hostAliases: this.hostAliases,
+        hostAliases: this.tmpHostAliases,
         subdomain:   this.subdomain,
         hostNetwork: this.networkMode.value
       };
@@ -256,7 +260,8 @@ export default {
       <div class="col span-12">
         <KeyValue
           key="hostAliases"
-          v-model:value="hostAliases"
+          data-test="hostAliases"
+          :value="hostAliases"
           :mode="mode"
           :title="t('workload.networking.hostAliases.label')"
           :protip="t('workload.networking.hostAliases.tip')"

package/components/form/NotificationSettings.vue

@@ -21,7 +21,12 @@ export default ({
         return [_EDIT, _VIEW].includes(value);
       },
       default: _EDIT,
-    }
+    },
+
+    hiddenAriaDescribedLabel: {
+      type:    String,
+      default: ''
+    },
   },
 
 });
@@ -29,12 +34,20 @@ export default ({
 
 <template>
   <div>
+    <p
+      v-if="hiddenAriaDescribedLabel"
+      id="hidden-label-notification-settings"
+      class="sr-only"
+    >
+      {{ hiddenAriaDescribedLabel }}
+    </p>
     <div class="row mb-20">
       <div class="col span-6">
         <Checkbox
           :mode="mode"
           :value="value.showMessage === 'true'"
           :label="t('notifications.loginError.showCheckboxLabel')"
+          aria-describedby="hidden-label-notification-settings"
           @update:value="value.showMessage = $event.toString()"
         />
       </div>
@@ -48,6 +61,7 @@ export default ({
               :mode="mode"
               :disabled="value.showMessage === 'false'"
               :label="t('notifications.loginError.messageLabel')"
+              aria-describedby="hidden-label-notification-settings"
             />
           </div>
         </div>

package/components/form/ResourceLabeledSelect.vue

@@ -34,7 +34,7 @@ export default defineComponent({
 
     inStore: {
       type:    String,
-      default: 'cluster',
+      default: undefined,
     },
 
     /**
@@ -63,7 +63,20 @@ export default defineComponent({
   },
 
   data() {
-    return { paginate: false };
+    let validInStore = this.inStore;
+
+    if (!validInStore && this.resourceType) {
+      validInStore = this.$store.getters['currentStore'](this.resourceType);
+    }
+
+    if (!validInStore) {
+      validInStore = 'cluster';
+    }
+
+    return {
+      paginate: false,
+      validInStore,
+    };
   },
 
   async fetch() {
@@ -72,13 +85,13 @@ export default defineComponent({
       this.paginate = false;
       break;
     case RESOURCE_LABEL_SELECT_MODE.DYNAMIC:
-      this.paginate = this.$store.getters[`${ this.inStore }/paginationEnabled`](this.resourceType);
+      this.paginate = this.$store.getters[`${ this.validInStore }/paginationEnabled`](this.resourceType);
       break;
     }
 
     if (!this.paginate) {
       // The resource won't be paginated and component expects everything up front
-      await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.resourceType });
+      await this.$store.dispatch(`${ this.validInStore }/findAll`, { type: this.resourceType });
     }
   },
 
@@ -104,7 +117,7 @@ export default defineComponent({
         return [];
       }
 
-      const all = this.$store.getters[`${ this.inStore }/all`](this.resourceType);
+      const all = this.$store.getters[`${ this.validInStore }/all`](this.resourceType);
 
       return this.allResourcesSettings?.updateResources ? this.allResourcesSettings.updateResources(all) : all;
     }
@@ -127,9 +140,10 @@ export default defineComponent({
       const defaultOptions: LabelSelectPaginationFunctionOptions = {
         opts,
         filters,
-        type: this.resourceType,
-        ctx:  { getters: this.$store.getters, dispatch: this.$store.dispatch },
-        sort: [{ asc: true, field: 'metadata.name' }],
+        type:  this.resourceType,
+        ctx:   { getters: this.$store.getters, dispatch: this.$store.dispatch },
+        sort:  [{ asc: true, field: 'metadata.name' }],
+        store: this.validInStore
       };
       const options = this.paginatedResourceSettings?.requestSettings ? this.paginatedResourceSettings.requestSettings(defaultOptions) : defaultOptions;
       const res = await labelSelectPaginationFunction(options);

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 }),
   }