From 8bdaca777f233f8193f2a2d70fb41ffc38800118 Mon Sep 17 00:00:00 2001
From: "andy.lee" <andy.lee@suse.com>
Date: Fri, 10 Jan 2025 14:37:50 +0800
Subject: [PATCH] fix: delete VM modal style and wording

Signed-off-by: andy.lee <andy.lee@suse.com>
(cherry picked from commit 7e32ea453be28b5f848bff71b133522929c372c8)
---
 .../models/kubevirt.io.virtualmachine.js      |  4 -
 .../kubevirt.io.virtualmachine.vue            | 77 +++++++++++--------
 2 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/pkg/harvester/models/kubevirt.io.virtualmachine.js b/pkg/harvester/models/kubevirt.io.virtualmachine.js
index 1d0ea6d6..2e05d306 100644
--- a/pkg/harvester/models/kubevirt.io.virtualmachine.js
+++ b/pkg/harvester/models/kubevirt.io.virtualmachine.js
@@ -1120,10 +1120,6 @@ export default class VirtVm extends HarvesterResource {
     return qemu?.status === 'True';
   }
 
-  get warnDeletionMessage() {
-    return this.t('harvester.virtualMachine.promptRemove.tips');
-  }
-
   get instanceLabels() {
     const all = this.spec?.template?.metadata?.labels || {};
 
diff --git a/pkg/harvester/promptRemove/kubevirt.io.virtualmachine.vue b/pkg/harvester/promptRemove/kubevirt.io.virtualmachine.vue
index 3ce2a2ae..4ecbae33 100644
--- a/pkg/harvester/promptRemove/kubevirt.io.virtualmachine.vue
+++ b/pkg/harvester/promptRemove/kubevirt.io.virtualmachine.vue
@@ -4,6 +4,7 @@ import { isEmpty } from '@shell/utils/object';
 import Parse from 'url-parse';
 import { resourceNames } from '@shell/utils/string';
 import { HCI } from '../types';
+import { alternateLabel as alternateLabelButton } from '@shell/utils/platform';
 
 export default {
   name: 'HarvesterPromptRemove',
@@ -39,8 +40,9 @@ export default {
 
   data() {
     return {
-      checkedList: [],
-      checkAll:    true
+      checkedList:    [],
+      checkAll:       true,
+      alternateLabel: alternateLabelButton
     };
   },
 
@@ -138,44 +140,53 @@ export default {
 </script>
 
 <template>
-  <div class="mt-10">
-    {{ t('promptRemove.attemptingToRemove', {type}) }}
-    <span v-clean-html="resourceNames(names, plusMore, t)"></span>
-
+  <div>
     <div class="mt-10">
-      {{ t('harvester.virtualMachine.promptRemove.title') }}
-    </div>
-    <div v-if="value.length === 1">
-      <span
-        v-for="(name, i) in removeNameArr[value[0].id]"
-        :key="i"
-      >
-        <label class="checkbox-container mr-15"><input
-                                                  v-model="checkedList"
-                                                  type="checkbox"
-                                                  :label="name"
-                                                  :value="name"
-                                                />
+      {{ t('promptRemove.attemptingToRemove', {type}) }}
+      <span v-clean-html="resourceNames(names, plusMore, t)"></span>
+
+      <div class="mt-10">
+        {{ t('harvester.virtualMachine.promptRemove.title') }}
+      </div>
+      <div v-if="value.length === 1">
+        <span
+          v-for="(name, i) in removeNameArr[value[0].id]"
+          :key="i"
+        >
+          <label class="checkbox-container mr-15">
+            <input
+              v-model="checkedList"
+              type="checkbox"
+              :label="name"
+              :value="name"
+            />
+            <span
+              class="checkbox-custom mr-5"
+              role="checkbox"
+            />
+            {{ name }}
+          </label>
+        </span>
+      </div>
+      <div v-else>
+        <label class="checkbox-container mr-15">
+          <input
+            v-model="checkedList"
+            type="checkbox"
+          />
           <span
             class="checkbox-custom mr-5"
             role="checkbox"
           />
-          {{ name }}
+          {{ t('harvester.virtualMachine.promptRemove.deleteAll') }}
         </label>
-      </span>
+      </div>
     </div>
-
-    <div v-else>
-      <label class="checkbox-container mr-15"><input
-                                                v-model="checkAll"
-                                                type="checkbox"
-                                              />
-        <span
-          class="checkbox-custom mr-5"
-          role="checkbox"
-        />
-        {{ t('harvester.virtualMachine.promptRemove.deleteAll') }}
-      </label>
+    <div class="text-warning mb-10 mt-10">
+      {{ t('harvester.virtualMachine.promptRemove.tips') }}
+    </div>
+    <div class="text-info mt-20">
+      {{ t('promptRemove.protip', { alternateLabel }) }}
     </div>
   </div>
 </template>