refactor: the promptRemove.confirmRelatedResource message needs to be refactored (#293)

* feat: change dialog wordings

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

* refactor: update protip wording

Co-authored-by: Jillian Maroket <67180770+jillian-maroket@users.noreply.github.com>
Signed-off-by: Yiya Chen <yiya.chen@suse.com>

---------

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>
Signed-off-by: Yiya Chen <yiya.chen@suse.com>
Co-authored-by: Jillian Maroket <67180770+jillian-maroket@users.noreply.github.com>

pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue

@@ -42,8 +42,25 @@ export default {
   computed: {
     ...mapState('action-menu', ['modalData']),
 
-    warningMessageKey() {
-      return this.modalData.warningMessageKey;
+    title() {
+      return this.modalData.title || 'dialog.promptRemove.title';
+    },
+
+    formattedType() {
+      return this.type.toLowerCase();
+    },
+
+    warningMessage() {
+      if (this.modalData.warningMessage) return this.t(this.modalData.warningMessage);
+
+      const isPlural = this.type.endsWith('s');
+      const thisOrThese = isPlural ? 'these' : 'this';
+      const defaultMessage = this.t('dialog.promptRemove.warningMessage', {
+        type: this.formattedType,
+        thisOrThese,
+      });
+
+      return defaultMessage;
     },
 
     names() {
@@ -101,7 +118,7 @@ export default {
     },
 
     protip() {
-      return this.t('promptRemove.protip', { alternateLabel });
+      return this.t('dialog.promptRemove.protip', { alternateLabel });
     },
   },
 
@@ -137,19 +154,22 @@ export default {
   >
     <template #title>
       <h4 class="text-default-text">
-        {{ t('promptRemove.title') }}
+        {{ t(title, { type }, true) }}
       </h4>
     </template>
 
     <template #body>
       <div class="pl-10 pr-10">
         <span
-          v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
+          v-clean-html="warningMessage"
         ></span>
 
         <div class="mt-10 mb-10">
           <span
-            v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+            v-clean-html="t('dialog.promptRemove.confirmName', {
+              type: formattedType,
+              nameToMatch: escapeHtml(nameToMatch)
+            }, true)"
           ></span>
         </div>
         <div class="mb-10">

pkg/harvester/l10n/en-us.yaml

@@ -52,6 +52,11 @@ dialog:
       message: "Are you sure you want to continue stop the {type} {names}?"
     pause:
       message: "Are you sure you want to continue pause the {type} {names}?"
+  promptRemove:
+    title: "Delete {type}"
+    warningMessage: "Deleting the selected {type} permanently removes all resources on {thisOrThese} {type}. This action is irreversible. Do you want to continue?"
+    confirmName: "Type <b>{nameToMatch}</b> to delete the {type}:"
+    protip: "Tip: Hold the {alternateLabel} key while clicking Delete to bypass the confirmation step."
 
 harvester:
   branding:

pkg/harvester/models/harvester/namespace.js

@@ -67,7 +67,6 @@ export default class HciNamespace extends namespace {
   promptRemove(resources = this) {
     this.$dispatch('promptModal', {
       resources,
-      warningMessageKey: 'promptRemove.confirmRelatedResource',
       component: 'ConfirmRelatedToRemoveDialog'
     });
   }

pkg/harvester/models/harvester/node.js

@@ -115,7 +115,6 @@ export default class HciNode extends HarvesterResource {
   promptRemove(resources = this) {
     this.$dispatch('promptModal', {
       resources,
-      warningMessageKey: 'promptRemove.confirmRelatedResource',
       component: 'ConfirmRelatedToRemoveDialog'
     });
   }