dashboard-shell-shell 1.0.10000011121 → 1.6.0-alpha.1

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);
     }
   }
 };
@@ -83,15 +161,12 @@ export default {
   <div :class="containerClass">
     <div :class="defaultSectionClass">
       <div class="labels">
-        <div class="labels__header">
-          <div
-            v-if="showLabelTitle"
-            class="clearFix mb-20"
-          >
+        <div class="labels__header mb-20">
+          <div v-if="showLabelTitle" style="font-size: 14px;">
             <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') }}
@@ -289,8 +330,7 @@ export default {
         :data-testid="`input-match-type-field-${index}`"
       >
         <div v-if="isView">
-          {{ row.matching }}
-          <!-- {{ row.matching }} -->
+          {{ row.matching.replace('harvester', 'cloud') }}
         </div>
         <LabeledSelect
           v-else
@@ -305,10 +345,11 @@ export default {
         :data-testid="`input-match-expression-key-${index}`"
       >
         <div v-if="isView" class="view-item-value">
-          {{ row.key }}
+          {{ row.key.replace('harvester', 'cloud') }}
         </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"
@@ -323,6 +365,7 @@ export default {
         />
       </div>
       <div
+        style="width: 400px;"
         :data-testid="`input-match-expression-operator-${index}`"
       >
         <div v-if="isView" class="view-item-value">
@@ -371,7 +414,7 @@ export default {
           v-if="!isView"
           type="button"
           class="btn role-link"
-          :style="{padding:'0px'}"
+          :style="{padding:'0px', minWidth: 'auto'}"
 
           :disabled="mode==='view'"
           :data-testid="`input-match-expression-remove-control-${index}`"
@@ -383,15 +426,19 @@ export default {
     </div>
     <div
       v-if="!isView && showAddButton"
-      class="mt-20"
     >
       <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/Members/ClusterMembershipEditor.vue

@@ -56,6 +56,6 @@ export default {
     :type="NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING"
     :mode="mode"
     parent-key="clusterId"
-    :parent-id="parentId"
+    :parent-id="parentId"
   />
 </template>

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -161,11 +161,11 @@ export default {
           value:       'member'
         },
         ...customRoles,
-        {
-          label:       this.t('members.clusterPermissions.custom.label'),
-          description: this.t('members.clusterPermissions.custom.description'),
-          value:       'custom'
-        }
+        // {
+        //   label:       this.t('members.clusterPermissions.custom.label'),
+        //   description: this.t('members.clusterPermissions.custom.description'),
+        //   value:       'custom'
+        // }
       ];
     },
     principal() {
@@ -232,11 +232,10 @@ export default {
     v-else
     class="cluster-permissions-editor"
   >
-    <div class="row mt-10">
+    <div class="row mt-10 mb-20">
       <div class="col span-12">
         <SelectPrincipal
           v-focus
-          class="mb-20"
           :mode="mode"
           :retain-selection="true"
           data-testid="cluster-member-select"
@@ -259,31 +258,34 @@ export default {
         </div>
       </template>
       <template v-slot:body>
-        <RadioGroup
-          v-model:value="permissionGroup"
-          :options="options"
-          name="permission-group"
-        />
-        <div
-          v-if="permissionGroup === 'custom'"
-          class="custom-permissions ml-20 mt-10"
-          :class="{'two-column': useTwoColumnsForCustom}"
-        >
+        <div style="max-height: 250px; overflow: auto;">
+          <RadioGroup
+            v-model:value="permissionGroup"
+            :options="options"
+            :flexDirection="'column'"
+            name="permission-group"
+          />
           <div
-            v-for="(permission, i) in customPermissionsUpdate"
-            :key="i"
+            v-if="permissionGroup === 'custom'"
+            class="custom-permissions ml-20 mt-10"
+            :class="{'two-column': useTwoColumnsForCustom}"
           >
-            <Checkbox
-              v-model:value="permission.value"
-              :disabled="permission.locked"
-              class="mb-5"
-              :label="permission.label"
-            />
-            <i
-              v-if="permission.locked"
-              v-clean-tooltip="permission.tooltip"
-              class="icon icon-lock icon-fw"
-            />
+            <div
+              v-for="(permission, i) in customPermissionsUpdate"
+              :key="i"
+            >
+              <Checkbox
+                v-model:value="permission.value"
+                :disabled="permission.locked"
+                class="mb-5"
+                :label="permission.label"
+              />
+              <i
+                v-if="permission.locked"
+                v-clean-tooltip="permission.tooltip"
+                class="icon icon-lock icon-fw"
+              />
+            </div>
           </div>
         </div>
       </template>

package/components/form/Members/MembershipEditor.vue

@@ -170,7 +170,7 @@ export default {
   >
     <template #column-headers>
       <div class="box mb-0">
-        <div class="column-headers row">
+        <div class="column-headers row" style="width: calc(100% - 100px);">
           <div class="col span-6">
             <label class="text-label">{{ t('membershipEditor.user') }}</label>
           </div>
@@ -181,7 +181,7 @@ export default {
       </div>
     </template>
     <template #columns="{row, i}">
-      <div class="columns row">
+      <div style="width: 100%;" class="columns row">
         <div class="col span-6">
           <Principal
             :value="row.value.principalId"

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,
@@ -252,7 +256,7 @@ export default {
       const options = namespaces
         .map((namespace) => ({ nameDisplay: namespace, id: namespace }))
         .map(props.namespaceMapper || ((obj) => ({
-          label: obj.nameDisplay,
+          label: obj.nameDisplay.replace('harvester', 'cloud'),
           value: obj.id,
         })));
 
@@ -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];
     }
@@ -430,12 +434,17 @@ export default {
 
 <template>
   <div class="row">
+
+    <!-- 命名空间创建输入框 -->
     <div
       v-if="namespaced && !nameNsHidden && createNamespace"
       :data-testid="componentTestid + '-namespace-create'"
       class="col span-6"
       :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
+      style="display: flex;"
     >
+
+      <!-- 输入命名空间名称 -->
       <LabeledInput
         ref="namespaceInput"
         v-model:value="namespace"
@@ -447,8 +456,10 @@ export default {
         :required="nameRequired"
         :rules="rules.namespace"
       />
+
+      <!-- 取消创建命名空间按钮 -->
       <button
-        aria="Cancel create"
+        :aria-label="t('namespace.cancelCreateAriaLabel')"
         @click="cancelCreateNamespace"
       >
         <i
@@ -457,6 +468,8 @@ export default {
         />
       </button>
     </div>
+
+    <!-- 命名空间选择下拉框 -->
     <div
       v-if="namespaced && !nameNsHidden && !createNamespace"
       :data-testid="componentTestid + '-namespace'"
@@ -479,8 +492,9 @@ export default {
       />
     </div>
 
+    <!-- 名称输入框 -->
     <div
-      v-if="!nameNsHidden"
+      v-if="!nameHidden && !nameNsHidden"
       :data-testid="componentTestid + '-name'"
       :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
     >
@@ -499,12 +513,15 @@ export default {
       />
     </div>
 
+    <!-- 自定义插槽，可插入额外内容 -->
     <slot name="customize" />
     <!-- <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
       :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-6']"
     > -->
+
+    <!-- 额外的动态列 -->
     <div
       v-for="(slot, i) in extraColumns"
       :key="i"
@@ -512,6 +529,8 @@ export default {
     >
       <slot :name="slot" />
     </div>
+
+    <!-- 描述输入框 -->
     <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
@@ -529,12 +548,15 @@ export default {
       />
     </div>
 
+    <!-- 底部插槽 -->
     <div
       v-if="$slots.bottom"
       style="width: 100%;"
     >
       <slot name="bottom" />
     </div>
+
+    <!-- 间隔占位符 -->
     <div
       v-if="showSpacer"
       class="spacer"
@@ -545,13 +567,8 @@ export default {
 <style lang="scss" scoped>
 button {
   all: unset;
-  height: 0;
-  position: relative;
-  top: -35px;
-  float: right;
-  margin-right: 7px;
-
   cursor: pointer;
+  margin-left: 10px;
 
   .align-value {
     padding-top: 7px;