Enhance KeyValue and Labels shell components to set custom descriptions

Allow to set a custom description for the `KeyValue` and `Labels` shell components. Additional add the ability to hide the label description for `Labels`. Related to: #13397 Signed-off-by: Volker Theile <[email protected]>
rancher · Feb 13, 2025 · 558f724 · 558f724
1 parent 2be006f
commit 558f724
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/shell/components/form/KeyValue.vue b/shell/components/form/KeyValue.vue
@@ -240,6 +240,10 @@ export default {
       default: false,
       type:    Boolean
     },
+    description: {
+      default: '',
+      type:    String,
+    },
   },
   data() {
     const rows = this.getRows(this.value);
@@ -601,6 +605,11 @@ export default {
         </h3>
       </slot>
     </div>
+    <div v-if="description">
+      <p class="mt-10 mb-10">
+        {{ description }}
+      </p>
+    </div>
     <div
       class="kv-container"
       role="grid"

diff --git a/shell/components/form/Labels.vue b/shell/components/form/Labels.vue
@@ -52,7 +52,17 @@ export default {
     showLabelTitle: {
       type:    Boolean,
       default: true,
-    }
+    },
+
+    showLabelDescription: {
+      type:    Boolean,
+      default: true,
+    },
+
+    labelDescription: {
+      type:    String,
+      default: '',
+    },
   },
 
   data() {
@@ -89,8 +99,15 @@ export default {
             :on-label="t('labels.labels.show')"
           />
         </div>
-        <p class="mt-10 mb-10">
-          <t k="labels.labels.description" />
+        <p
+          v-if="showLabelDescription"
+          class="mt-10 mb-10"
+        >
+          <span v-if="labelDescription">{{ labelDescription }}</span>
+          <t
+            v-if="!labelDescription"
+            k="labels.labels.description"
+          />
         </p>
         <div :class="columnsClass">
           <slot