From a8ea0645e49fcc70cdfbc1fde589da92ee0946b0 Mon Sep 17 00:00:00 2001
From: Yi-Ya Chen <yiya.chen@suse.com>
Date: Thu, 16 Jan 2025 17:28:14 +0800
Subject: [PATCH 1/4] feat: add confirm popup

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>
(cherry picked from commit 526d1bb8753fcb039caf7979e554cc59d72ad550)
---
 .../dialog/ConfirmExecutionDialog.vue         | 194 ++++++++++++++++++
 pkg/harvester/l10n/en-us.yaml                 |  26 ++-
 .../models/kubevirt.io.virtualmachine.js      |  42 +++-
 3 files changed, 246 insertions(+), 16 deletions(-)
 create mode 100644 pkg/harvester/dialog/ConfirmExecutionDialog.vue

diff --git a/pkg/harvester/dialog/ConfirmExecutionDialog.vue b/pkg/harvester/dialog/ConfirmExecutionDialog.vue
new file mode 100644
index 00000000..6f7a398a
--- /dev/null
+++ b/pkg/harvester/dialog/ConfirmExecutionDialog.vue
@@ -0,0 +1,194 @@
+<script>
+import { mapState } from 'vuex';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { alternateLabel } from '@shell/utils/platform';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Banner } from '@components/Banner';
+import { Card } from '@components/Card';
+import { escapeHtml } from '@shell/utils/string';
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+
+/**
+ * @name ConfirmExecutionDialog
+ * @description Dialog component to confirm the related resources before executing the action.
+ */
+export default {
+  name: 'ConfirmExecutionDialog',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+    CopyToClipboardText
+  },
+
+  props: {
+    /**
+     * @property resources to be deleted.
+     * @type {Resource[]} Array of the resource model's instance
+     */
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return { errors: [], confirmName: '' };
+  },
+
+  computed: {
+    ...mapState('action-menu', ['modalData']),
+
+    warningMessageKey() {
+      return this.modalData.warningMessageKey;
+    },
+
+    names() {
+      return this.resources.map((obj) => obj.nameDisplay).slice(0, 5);
+    },
+
+    resourceNames() {
+      return this.names.reduce((res, name, i) => {
+        if (i >= 5) {
+          return res;
+        }
+        res += `<b>${ escapeHtml(name) }</b>`;
+        if (i === this.names.length - 1) {
+          res += this.plusMore;
+        } else {
+          res += i === this.resources.length - 2 ? ' and ' : ', ';
+        }
+
+        return res;
+      }, '');
+    },
+
+    nameToMatch() {
+      return this.resources[0].nameDisplay;
+    },
+
+    plusMore() {
+      const remaining = this.resources.length - this.names.length;
+
+      return this.t('dialog.confirmExecution.andOthers', { count: remaining });
+    },
+
+    type() {
+      const types = new Set(this.resources.reduce((array, each) => {
+        array.push(each.type);
+
+        return array;
+      }, []));
+
+      if (types.size > 1) {
+        return this.t('generic.resource', { count: this.resources.length });
+      }
+
+      const schema = this.resources[0]?.schema;
+
+      if ( !schema ) {
+        return `resource${ this.resources.length === 1 ? '' : 's' }`;
+      }
+
+      return this.$store.getters['type-map/labelFor'](schema, this.resources.length);
+    },
+
+    applyDisabled() {
+      return this.confirmName !== this.nameToMatch;
+    },
+
+    protip() {
+      return this.t('dialog.confirmExecution.protip', { alternateLabel });
+    },
+  },
+
+  methods: {
+    escapeHtml,
+
+    close() {
+      this.confirmName = '';
+      this.errors = [];
+      this.$emit('close');
+    },
+
+    async apply(buttonDone) {
+      try {
+        for (const resource of this.resources) {
+          await resource.doActionGrowl(this.modalData.action, {});
+        }
+        buttonDone(true);
+        this.close();
+      } catch (e) {
+        this.errors = exceptionToErrorsArray(e);
+        buttonDone(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card
+    class="prompt-related"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('dialog.confirmExecution.title') }}
+      </h4>
+    </template>
+
+    <template #body>
+      <div class="pl-10 pr-10">
+        <span
+          v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
+        ></span>
+
+        <div class="mt-10 mb-10">
+          <span
+            v-clean-html="t('dialog.confirmExecution.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+          ></span>
+        </div>
+        <div class="mb-10">
+          <CopyToClipboardText :text="nameToMatch" />
+        </div>
+        <input
+          id="confirm"
+          v-model="confirmName"
+          type="text"
+        />
+        <div class="text-info mt-20">
+          {{ protip }}
+        </div>
+        <Banner
+          v-for="(error, i) in errors"
+          :key="i"
+        />
+      </div>
+    </template>
+
+    <template #actions>
+      <button
+        class="btn role-secondary mr-10"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <AsyncButton
+        mode="apply"
+        class="btn bg-error ml-10"
+        :disabled="applyDisabled"
+        @click="apply"
+      />
+    </template>
+  </Card>
+</template>
+
+<style lang='scss' scoped>
+  .actions {
+    text-align: right;
+  }
+</style>
diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index db4e5040..22663d98 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -38,6 +38,22 @@ asyncButton:
     success: Restarted
     waiting: Restarting&hellip;
 
+dialog:
+  confirmExecution:
+    title: Are you sure?
+    andOthers: |-
+      {count, plural,
+      =0 {}
+      =1 { and <b>one other </b>}
+      other { and <b>{count} other </b>}
+      }
+    confirmName: "Enter <b>{nameToMatch}</b> below to confirm:"
+    protip: "Tip: Hold the {alternateLabel} key while clicking action to bypass this confirmation"
+    stop:
+      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}?"
+
 harvester:
   productLabel: 'Harvester'
   modal:
@@ -861,14 +877,14 @@ harvester:
       doc: Read the <a href="{url}" target="_blank">documentation</a> before starting the upgrade process. Ensure that you complete procedures that are relevant to your environment and the version you are upgrading to.
       tip: Unmet system requirements and incorrectly performed procedures may cause complete upgrade failure and other issues that require manual workarounds.
       moreNotes: For more details about the release notes, please visit -
-     
+
   schedule:
     label: Virtual Machine Schedules
     createTitle: Create Schedule
     createButtonText: Create Schedule
     scheduleType: Virtual Machine Schedule Type
     cron: Cron Schedule
-    detail: 
+    detail:
       namespace: Namespace
       sourceVM: Source Virtual Machine
     tabs:
@@ -878,12 +894,12 @@ harvester:
     message:
       noSetting:
         suffix: before creating a backup schedule
-    retain: 
+    retain:
       label: Retain
       count: Count
-      tooltip: Number of up-to-date VM backups to retain. Maximum to 250, minimum to 2. 
+      tooltip: Number of up-to-date VM backups to retain. Maximum to 250, minimum to 2.
     maxFailure:
-      label: Max Failure 
+      label: Max Failure
       count: Count
       tooltip: Max number of consecutive failed backups that could be tolerated. If reach this threshold, Harvester controller will suspend the schedule job. This value should less than retain count
     virtualMachine:
diff --git a/pkg/harvester/models/kubevirt.io.virtualmachine.js b/pkg/harvester/models/kubevirt.io.virtualmachine.js
index 2e05d306..9a1aef89 100644
--- a/pkg/harvester/models/kubevirt.io.virtualmachine.js
+++ b/pkg/harvester/models/kubevirt.io.virtualmachine.js
@@ -102,11 +102,12 @@ export default class VirtVm extends HarvesterResource {
 
     return [
       {
-        action:   'stopVM',
-        enabled:  !!this.actions?.stop,
-        icon:     'icon icon-close',
-        label:    this.t('harvester.action.stop'),
-        bulkable: true
+        action:    'stopVM',
+        altAction: 'altStopVM',
+        enabled:   !!this.actions?.stop,
+        icon:      'icon icon-close',
+        label:     this.t('harvester.action.stop'),
+        bulkable:  true
       },
       {
         action:   'forceStop',
@@ -116,10 +117,11 @@ export default class VirtVm extends HarvesterResource {
         bulkable: true
       },
       {
-        action:  'pauseVM',
-        enabled: !!this.actions?.pause,
-        icon:    'icon icon-pause',
-        label:   this.t('harvester.action.pause')
+        action:    'pauseVM',
+        altAction: 'altPauseVM',
+        enabled:   !!this.actions?.pause,
+        icon:      'icon icon-pause',
+        label:     this.t('harvester.action.pause')
       },
       {
         action:  'unpauseVM',
@@ -402,7 +404,16 @@ export default class VirtVm extends HarvesterResource {
     return node?.id;
   }
 
-  pauseVM() {
+  pauseVM(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      action:            'pause',
+      warningMessageKey: 'dialog.confirmExecution.pause.message',
+      component:         'ConfirmExecutionDialog'
+    });
+  }
+
+  altPauseVM() {
     this.doActionGrowl('pause', {});
   }
 
@@ -417,7 +428,16 @@ export default class VirtVm extends HarvesterResource {
     this.doActionGrowl('unpause', {});
   }
 
-  stopVM() {
+  stopVM(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      action:            'stop',
+      warningMessageKey: 'dialog.confirmExecution.stop.message',
+      component:         'ConfirmExecutionDialog'
+    });
+  }
+
+  altStopVM() {
     this.doActionGrowl('stop', {});
   }
 

From 7194d5200052171b18ee5fefedf28756c9dd6a03 Mon Sep 17 00:00:00 2001
From: Yi-Ya Chen <yiya.chen@suse.com>
Date: Fri, 17 Jan 2025 18:06:04 +0800
Subject: [PATCH 2/4] refactor: remove the confirm input

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>
(cherry picked from commit fdc635955b53e603574ce2e9a773f9602a681b51)
---
 .../dialog/ConfirmExecutionDialog.vue         | 55 ++++++-------------
 1 file changed, 16 insertions(+), 39 deletions(-)

diff --git a/pkg/harvester/dialog/ConfirmExecutionDialog.vue b/pkg/harvester/dialog/ConfirmExecutionDialog.vue
index 6f7a398a..55abeaed 100644
--- a/pkg/harvester/dialog/ConfirmExecutionDialog.vue
+++ b/pkg/harvester/dialog/ConfirmExecutionDialog.vue
@@ -6,7 +6,6 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
 import { Card } from '@components/Card';
 import { escapeHtml } from '@shell/utils/string';
-import CopyToClipboardText from '@shell/components/CopyToClipboardText';
 
 /**
  * @name ConfirmExecutionDialog
@@ -21,7 +20,6 @@ export default {
     AsyncButton,
     Banner,
     Card,
-    CopyToClipboardText
   },
 
   props: {
@@ -36,7 +34,7 @@ export default {
   },
 
   data() {
-    return { errors: [], confirmName: '' };
+    return { errors: [] };
   },
 
   computed: {
@@ -66,10 +64,6 @@ export default {
       }, '');
     },
 
-    nameToMatch() {
-      return this.resources[0].nameDisplay;
-    },
-
     plusMore() {
       const remaining = this.resources.length - this.names.length;
 
@@ -96,10 +90,6 @@ export default {
       return this.$store.getters['type-map/labelFor'](schema, this.resources.length);
     },
 
-    applyDisabled() {
-      return this.confirmName !== this.nameToMatch;
-    },
-
     protip() {
       return this.t('dialog.confirmExecution.protip', { alternateLabel });
     },
@@ -109,7 +99,6 @@ export default {
     escapeHtml,
 
     close() {
-      this.confirmName = '';
       this.errors = [];
       this.$emit('close');
     },
@@ -132,7 +121,6 @@ export default {
 
 <template>
   <Card
-    class="prompt-related"
     :show-highlight-border="false"
   >
     <template #title>
@@ -146,20 +134,6 @@ export default {
         <span
           v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
         ></span>
-
-        <div class="mt-10 mb-10">
-          <span
-            v-clean-html="t('dialog.confirmExecution.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
-          ></span>
-        </div>
-        <div class="mb-10">
-          <CopyToClipboardText :text="nameToMatch" />
-        </div>
-        <input
-          id="confirm"
-          v-model="confirmName"
-          type="text"
-        />
         <div class="text-info mt-20">
           {{ protip }}
         </div>
@@ -171,24 +145,27 @@ export default {
     </template>
 
     <template #actions>
-      <button
-        class="btn role-secondary mr-10"
-        @click="close"
-      >
-        {{ t('generic.cancel') }}
-      </button>
-      <AsyncButton
-        mode="apply"
-        class="btn bg-error ml-10"
-        :disabled="applyDisabled"
-        @click="apply"
-      />
+      <div class="actions">
+        <button
+          class="btn role-secondary"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton
+          mode="apply"
+          class="btn bg-error ml-10"
+          :disabled="applyDisabled"
+          @click="apply"
+        />
+      </div>
     </template>
   </Card>
 </template>
 
 <style lang='scss' scoped>
   .actions {
+    width: 100%;
     text-align: right;
   }
 </style>

From 89b43060df873aa0753de69574f20aaea4608bf9 Mon Sep 17 00:00:00 2001
From: Yi-Ya Chen <yiya.chen@suse.com>
Date: Mon, 20 Jan 2025 10:42:43 +0800
Subject: [PATCH 3/4] feat: handle bulk actions

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>
(cherry picked from commit f2d517222433dde29b1e0742f3b4a27523410831)
---
 pkg/harvester/l10n/en-us.yaml                      |  1 -
 pkg/harvester/models/kubevirt.io.virtualmachine.js | 13 +++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index 22663d98..cf9d09f9 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -47,7 +47,6 @@ dialog:
       =1 { and <b>one other </b>}
       other { and <b>{count} other </b>}
       }
-    confirmName: "Enter <b>{nameToMatch}</b> below to confirm:"
     protip: "Tip: Hold the {alternateLabel} key while clicking action to bypass this confirmation"
     stop:
       message: "Are you sure you want to continue stop the {type} {names}?"
diff --git a/pkg/harvester/models/kubevirt.io.virtualmachine.js b/pkg/harvester/models/kubevirt.io.virtualmachine.js
index 9a1aef89..24b201d6 100644
--- a/pkg/harvester/models/kubevirt.io.virtualmachine.js
+++ b/pkg/harvester/models/kubevirt.io.virtualmachine.js
@@ -102,12 +102,13 @@ export default class VirtVm extends HarvesterResource {
 
     return [
       {
-        action:    'stopVM',
-        altAction: 'altStopVM',
-        enabled:   !!this.actions?.stop,
-        icon:      'icon icon-close',
-        label:     this.t('harvester.action.stop'),
-        bulkable:  true
+        action:     'stopVM',
+        altAction:  'altStopVM',
+        enabled:    !!this.actions?.stop,
+        icon:       'icon icon-close',
+        label:      this.t('harvester.action.stop'),
+        bulkable:   true,
+        bulkAction: 'stopVM',
       },
       {
         action:   'forceStop',

From cf6d44601e16c122e0d43c143e2ff9ca27bccd32 Mon Sep 17 00:00:00 2001
From: Yi-Ya Chen <yiya.chen@suse.com>
Date: Mon, 20 Jan 2025 15:55:17 +0800
Subject: [PATCH 4/4] style: change apply button color

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>
(cherry picked from commit c4e9a89ba5720083e8163a66602d250f4b131758)
---
 pkg/harvester/dialog/ConfirmExecutionDialog.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/pkg/harvester/dialog/ConfirmExecutionDialog.vue b/pkg/harvester/dialog/ConfirmExecutionDialog.vue
index 55abeaed..1e180c5c 100644
--- a/pkg/harvester/dialog/ConfirmExecutionDialog.vue
+++ b/pkg/harvester/dialog/ConfirmExecutionDialog.vue
@@ -120,9 +120,7 @@ export default {
 </script>
 
 <template>
-  <Card
-    :show-highlight-border="false"
-  >
+  <Card :show-highlight-border="false">
     <template #title>
       <h4 class="text-default-text">
         {{ t('dialog.confirmExecution.title') }}
@@ -154,7 +152,7 @@ export default {
         </button>
         <AsyncButton
           mode="apply"
-          class="btn bg-error ml-10"
+          class="btn bg-primary ml-10"
           :disabled="applyDisabled"
           @click="apply"
         />
@@ -164,6 +162,10 @@ export default {
 </template>
 
 <style lang='scss' scoped>
+  .modal-container {
+    max-width: 400px;
+  }
+
   .actions {
     width: 100%;
     text-align: right;