Add descriptions to several components

Signed-off-by: Volker Theile <[email protected]>
harvester · Aug 12, 2024 · 8284df3 · 8284df3
1 parent 729ef76
commit 8284df3
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
@@ -751,6 +751,7 @@ export default {
           :mode="mode"
           :read-allowed="false"
           :value-can-be-empty="true"
+          :description="t(`harvester.virtualMachine.labels.description`)"
           @input="value.setLabels($event)"
         />
       </Tab>
@@ -767,6 +768,7 @@ export default {
           :display-side-by-side="false"
           :show-annotations="false"
           :show-label-title="false"
+          :label-description="t(`harvester.virtualMachine.instanceLabels.description`)"
         >
           <template #labels="{toggler}">
             <KeyValue

diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
@@ -662,6 +662,10 @@ harvester:
         inNamespaces: "Workloads in these namespaces"
       namespaces:
         label: Namespaces
+    labels:
+      description: Foo bar baz
+    instanceLabels:
+      description: These labels are automatically synchronized to the Virtual Machine Instance.
 
   volume:
     label: Volumes

diff --git a/shell/components/form/KeyValue.vue b/shell/components/form/KeyValue.vue
@@ -251,6 +251,10 @@ export default {
       default: false,
       type:    Boolean
     },
+    description: {
+      default: '',
+      type:    String,
+    },
   },
   data() {
     const rows = this.getRows(this.value);
@@ -565,6 +569,11 @@ export default {
         </h3>
       </slot>
     </div>
+    <div v-if="description">
+      <p class="mt-10 mb-10">
+        {{ description }}
+      </p>
+    </div>
     <div
       class="kv-container"
       :style="containerStyle"

diff --git a/shell/components/form/Labels.vue b/shell/components/form/Labels.vue
@@ -53,6 +53,16 @@ export default {
       type:    Boolean,
       default: true,
     },
+
+    showLabelDescription: {
+      type:    Boolean,
+      default: true,
+    },
+
+    labelDescription: {
+      type:    String,
+      default: '',
+    },
   },
 
   data() {
@@ -89,8 +99,10 @@ 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