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

package/components/form/KeyValue.vue

@@ -12,6 +12,7 @@ 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';
+import { LabeledTooltip } from '@components/LabeledTooltip';
 
 export default {
   name: 'KeyValue',
@@ -22,7 +23,8 @@ export default {
     CodeMirror,
     Select,
     TextAreaAutoGrow,
-    FileSelector
+    FileSelector,
+    LabeledTooltip
   },
   props: {
     value: {
@@ -64,6 +66,12 @@ export default {
       type:    [String, Boolean],
       default: '',
     },
+
+    protipValue: {
+      type:    [String, Boolean],
+      default: '',
+    },
+
     // For asMap=false, the name of the field that goes into the row objects
     keyName: {
       type:    String,
@@ -95,20 +103,6 @@ export default {
       type:    String,
       default: '',
     },
-    /**
-     * List of keys which needs to be disabled and hidden based on toggler
-     */
-    protectedKeys: {
-      type:    Array,
-      default: () => [],
-    },
-    /**
-     * Conditionally display protected keys, if any
-     */
-    toggleFilter: {
-      type:    Boolean,
-      default: false,
-    },
     separatorLabel: {
       type:    String,
       default: '',
@@ -184,6 +178,10 @@ export default {
       type:    String,
       default: '',
     },
+    addClass: {
+      type:    String,
+      default: '',
+    },
     addAllowed: {
       type:    Boolean,
       default: true,
@@ -210,7 +208,7 @@ export default {
     },
     removeIcon: {
       type:    String,
-      default: 'icon-minus',
+      default: '',
     },
     removeAllowed: {
       type:    Boolean,
@@ -240,6 +238,10 @@ export default {
       default: false,
       type:    Boolean
     },
+    keyErrors: {
+      type:    Object,
+      default: () => ({})
+    }
   },
   data() {
     const rows = this.getRows(this.value);
@@ -252,6 +254,10 @@ export default {
   },
   computed: {
     _protip() {
+      if (this.protip === false) {
+        return null;
+      }
+
       return this.protip || this.t('keyValue.protip', null, true);
     },
     _keyLabel() {
@@ -323,10 +329,6 @@ export default {
       }
     },
 
-    isProtected(key) {
-      return this.protectedKeys && this.protectedKeys.includes(key);
-    },
-
     getRows(value) {
       let rows = [];
 
@@ -388,6 +390,17 @@ export default {
         });
       }
 
+      rows = rows.map((item) => {
+        if (item?.key?.includes('harvester')) {
+          item.key = item.key?.replace('harvester', 'cloud');
+        }
+        if (item?.value?.includes('harvester')) {
+          item.value = item.value?.replace('harvester', 'cloud');
+        }
+
+        return item;
+      });
+
       return rows;
     },
 
@@ -398,12 +411,22 @@ export default {
         [this.valueName]: value,
       };
 
+      obj.key = obj.key?.replace('harvester', 'cloud');
+      obj.value = obj.value?.replace('harvester', 'cloud');
       obj.binary = false;
       obj.canEncode = this.handleBase64;
       obj.supported = true;
-       // 上传镜像问题
-      const s = this.rows.filter(item => item.key !== obj.key);
-      this.rows = s
+
+      // 上传镜像问题
+      const s = this.rows.filter(item => {
+        // 如果 item.key 或 obj.key 为空，直接保留
+        if (!item.key || !obj.key) {
+          return true;
+        }
+        // 两者都有值时才比较
+        return item.key !== obj.key;
+      });
+      this.rows = s;
 
       this.rows.push(obj);
       this.queueUpdate();
@@ -471,8 +494,8 @@ export default {
           // let value = (row[valueName] || '');
           // const key = (row[keyName] || '').trim();
 
-          const key = (row[keyName] || '').trim();
-          let value = (row[valueName] || '').trim();
+          const key = (row[keyName]?.replace('cloud', 'harvester') || '').trim();
+          let value = (row[valueName]?.replace('cloud', 'harvester') || '').trim();
 
           if (value && typeOf(value) === 'object') {
             out[key] = JSON.parse(JSON.stringify(value));
@@ -522,10 +545,16 @@ export default {
       const text = event.clipboardData.getData('text/plain');
       const lines = text.split('\n');
       const splits = lines.map((line) => {
-        const splitter = this.parserSeparators.find((sep) => line.includes(sep));
+        const separatorIndex = line.search(new RegExp(this.parserSeparators.join('|')));
+
+        if (separatorIndex === -1) {
+          return [];
+        }
+        const key = line.substring(0, separatorIndex).trim();
+        const value = line.substring(separatorIndex + 1).trim();
 
-        return splitter ? line.split(splitter) : '';
-      }).filter((split) => split && split.length > 0);
+        return [key, value];
+      }).filter((split) => split.length > 0);
 
       if (splits.length === 0 || (splits.length === 1 && splits[0].length < 2)) {
         return;
@@ -587,6 +616,7 @@ export default {
 </script>
 <template>
   <div class="key-value">
+    <!-- 标题部分：如果传了 title 或者插槽 title 才显示 -->
     <div
       v-if="title || $slots.title"
       class="clearfix"
@@ -594,6 +624,7 @@ export default {
       <slot name="title">
         <h3>
           {{ title }}
+          <!-- 标题右侧提示信息 -->
           <i
             v-if="titleProtip"
             v-clean-tooltip="titleProtip"
@@ -602,18 +633,23 @@ export default {
         </h3>
       </slot>
     </div>
+    
+    <!-- 整个 Key-Value 表格容器 -->
     <div
       class="kv-container"
       role="grid"
+      :aria-label="title || t('generic.ariaLabel.keyValue')"
       :aria-rowcount="rows.length"
       :aria-colcount="extraColumns.length + 2"
       :style="containerStyle"
     >
+
+      <!-- 表头：有数据或者处于 view 模式才显示 -->
       <template v-if="rows.length || isView">
         <div class="rowgroup">
           <div class="row">
-            <label
-              class="text-label"
+            <div
+              class="text-label key-value-label"
               role="columnheader"
             >
               {{ _keyLabel }}
@@ -623,21 +659,32 @@ export default {
                 v-stripped-aria-label="_protip"
                 class="icon icon-info"
                 tabindex="0"
+                role="tooltip"
               />
-            </label>
-            <label
-              class="text-label"
+            </div>
+            <div
+              class="text-label key-value-label"
               role="columnheader"
             >
               {{ _valueLabel }}
-            </label>
-            <label
+              <i
+                v-if="protipValue && !isView && addAllowed"
+                v-clean-tooltip="{content: protipValue, triggers: ['hover', 'touch', 'focus'] }"
+                v-stripped-aria-label="protipValue"
+                class="icon icon-info"
+                tabindex="0"
+                role="tooltip"
+              />
+            </div>
+            <div
               v-for="(c, i) in extraColumns"
               :key="i"
               role="columnheader"
             >
-              <slot :name="'label:'+c">{{ c }}</slot>
-            </label>
+              <slot :name="'label:'+c">
+                {{ c }}
+              </slot>
+            </div>
             <slot
               v-if="canRemove"
               name="remove"
@@ -647,6 +694,8 @@ export default {
           </div>
         </div>
       </template>
+
+      <!-- 如果是 view 模式但没有数据，显示占位符 -->
       <template v-if="!rows.length && isView">
         <div class="rowgroup">
           <div class="row">
@@ -665,15 +714,14 @@ export default {
           </div>
         </div>
       </template>
+
+      <!-- 遍历 rows 渲染每一行 -->
       <template
         v-for="(row,i) in rows"
         v-else
         :key="i"
       >
-        <div
-          class="rowgroup"
-          :class="{'hide': isProtected(row.key) && !toggleFilter}"
-        >
+        <div class="rowgroup">
           <div class="row">
             <!-- Key -->
             <div
@@ -681,6 +729,10 @@ export default {
               role="gridcell"
               :aria-rowindex="i+1"
               :aria-colindex="1"
+              :class="{
+                'labeled-input-key': keyErrors[row.key],
+                'v-popper--has-tooltip': keyErrors[row.key],
+              }"
             >
               <slot
                 name="key"
@@ -696,25 +748,30 @@ export default {
                   ref="key"
                   v-model:value="row[keyName]"
                   :searchable="true"
-                  :disabled="disabled || isProtected(row.key)"
+                  :disabled="disabled"
                   :clearable="false"
                   :taggable="keyTaggable"
                   :options="calculateOptions(row[keyName])"
                   :data-testid="`select-kv-item-key-${i}`"
-                  :aria-label="t('generic.ariaLabel.key', {index: i})"
+                  :aria-label="t('generic.ariaLabel.key', {index: i+1})"
                   @update:value="queueUpdate"
                 />
                 <input
                   v-else
                   ref="key"
                   v-model="row[keyName]"
-                  :disabled="isView || disabled || !keyEditable || isProtected(row.key)"
+                  :disabled="isView || disabled || !keyEditable"
                   :placeholder="_keyPlaceholder"
                   :data-testid="`input-kv-item-key-${i}`"
-                  :aria-label="t('generic.ariaLabel.key', {index: i})"
+                  :aria-label="t('generic.ariaLabel.key', {index: i+1})"
                   @input="queueUpdate"
                   @paste="onPaste(i, $event)"
                 >
+                <LabeledTooltip
+                  v-if="keyErrors[row.key]"
+                  :value="keyErrors[row.key]"
+                  :hover="true"
+                />
               </slot>
             </div>
 
@@ -764,25 +821,25 @@ export default {
                     v-model:value="row[valueName]"
                     data-testid="value-multiline"
                     :class="{'conceal': valueConcealed}"
-                    :disabled="disabled || isProtected(row.key)"
+                    :disabled="disabled"
                     :mode="mode"
                     :placeholder="_valuePlaceholder"
                     :min-height="32"
                     :spellcheck="false"
-                    :aria-label="t('generic.ariaLabel.value', {index: i})"
+                    :aria-label="t('generic.ariaLabel.value', {index: i+1})"
                     @update:value="queueUpdate"
                   />
                   <input
                     v-else
                     v-model="row[valueName]"
-                    :disabled="isView || disabled || isProtected(row.key)"
+                    :disabled="isView || disabled"
                     :type="valueConcealed ? 'password' : 'text'"
                     :placeholder="_valuePlaceholder"
                     autocorrect="off"
                     autocapitalize="off"
                     spellcheck="false"
                     :data-testid="`input-kv-item-value-${i}`"
-                    :aria-label="t('generic.ariaLabel.value', {index: i})"
+                    :aria-label="t('generic.ariaLabel.value', {index: i+1})"
                     @input="queueUpdate"
                   >
                   <FileSelector
@@ -790,7 +847,7 @@ export default {
                     class="btn btn-sm role-secondary file-selector"
                     :label="t('generic.upload')"
                     :include-file-name="true"
-                    :aria-label="t('generic.ariaLabel.value', {index: i})"
+                    :aria-label="t('generic.ariaLabel.value', {index: i+1})"
                     @selected="onValueFileSelected(i, $event)"
                   />
                 </div>
@@ -829,12 +886,16 @@ export default {
                 <button
                   type="button"
                   role="button"
-                  :disabled="isView || isProtected(row.key) || disabled"
-                  :aria-label="`${removeLabel || t('generic.remove')} ${ i+1 }`"
+                  :disabled="isView || disabled"
+                  :aria-label="t('generic.ariaLabel.remove', {index: i+1})"
                   class="btn role-link"
                   @click="remove(i)"
                 >
                   {{ removeLabel || t('generic.remove') }}
+                  <i
+                    v-if="removeIcon"
+                    :class="[removeIcon]"
+                  />
                 </button>
               </slot>
             </div>
@@ -842,6 +903,8 @@ export default {
         </div>
       </template>
     </div>
+
+    <!-- 底部新增/从文件导入 -->
     <div
       v-if="(addAllowed || readAllowed) && !isView"
       class="footer mt-10"
@@ -850,14 +913,17 @@ export default {
         name="add"
         :add="add"
       >
+
+        <!-- 添加按钮 -->
         <button
           v-if="addAllowed"
           type="button"
           role="button"
           class="btn role-tertiary add"
+          :class="[addClass]"
           data-testid="add_row_item_button"
           :disabled="loading || disabled || (keyOptions && filteredKeyOptions.length === 0)"
-          :aria-label="_addLabel"
+          :aria-label="t('generic.ariaLabel.addKeyValue')"
           @click="add()"
         >
           <i
@@ -865,12 +931,16 @@ export default {
             :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
           /> {{ _addLabel }}
         </button>
+
+        <!-- 从文件读取 -->
         <FileSelector
           v-if="readAllowed"
+          :aria-label="t('generic.ariaLabel.readKeyValue')"
           :disabled="isView"
           class="role-tertiary"
           :label="t('generic.readFromFile')"
           :include-file-name="true"
+          data-testid="read_all_key_value_button"
           @selected="onFileSelected"
         />
       </slot>
@@ -889,7 +959,8 @@ export default {
     display: grid;
     /* align-items: center; */
     column-gap: 10px;
-    label {
+
+    .key-value-label {
       margin-bottom: 0;
     }
     & .kv-item {
@@ -914,7 +985,7 @@ export default {
         padding: 10px 10px 10px 10px;
         min-height:32px;
         line-height: 12px; 
-        border: solid var(--border-width) var(--input-border);       
+        border: solid var(--border-width) var(--input-border); 
       }
 
       .text-monospace:not(.conceal) {
@@ -943,6 +1014,7 @@ export default {
   .remove {
     text-align: center;
     BUTTON {
+      min-width: auto;
       padding: 0px;
     }
   }
@@ -975,4 +1047,15 @@ export default {
     padding: 0px 0px 0px 10px;
   }
 }
+
+.labeled-input-key {
+  position: relative;
+  display: flex;
+  border-collapse: separate;
+  z-index: 0; // Prevent label from cover other elements outside of the input
+}
+
+h3{
+  font-size: 14px;
+}
 </style>