From 13ea3e3c95f10586470e154530b89c4872d37e68 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Tue, 24 Sep 2024 19:21:28 +0200
Subject: [PATCH] Fix slots-template issue in all dialog components

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 pkg/harvester/dialog/CloneVmDialog.vue        |  4 +-
 .../dialog/ConfirmRelatedToRemoveDialog.vue   | 42 ++++++++++--------
 pkg/harvester/dialog/DeepCloneVmDialog.vue    | 30 +++++++------
 pkg/harvester/dialog/EnablePassthrough.vue    | 27 ++++++------
 pkg/harvester/dialog/EnableSriovDevice.vue    |  4 +-
 pkg/harvester/dialog/EnableVGpuDevice.vue     |  4 +-
 .../dialog/HarvesterAddHotplugModal.vue       | 35 +++++++++------
 pkg/harvester/dialog/HarvesterBackupModal.vue | 31 +++++++------
 .../dialog/HarvesterCloneTemplate.vue         | 28 ++++++------
 .../dialog/HarvesterEjectCDROMDialog.vue      | 30 +++++++------
 .../dialog/HarvesterExportImageDialog.vue     | 28 ++++++------
 .../dialog/HarvesterMaintenanceDialog.vue     | 22 +++++-----
 .../dialog/HarvesterMigrationDialog.vue       |  4 +-
 pkg/harvester/dialog/HarvesterQuotaDialog.vue | 31 +++++++------
 .../dialog/HarvesterRestoreDialog.vue         | 28 ++++++------
 .../dialog/HarvesterUnplugVolume.vue          | 43 ++++++++++---------
 .../dialog/HarvesterVMSnapshotDialog.vue      | 31 +++++++------
 .../HarvesterVlanConfigMigrateDialog.vue      | 28 ++++++------
 pkg/harvester/dialog/MessageBox.vue           | 25 +++++------
 .../dialog/RestoreSnapshotDialog.vue          | 29 +++++++------
 pkg/harvester/dialog/SnapshotDialog.vue       | 28 ++++++------
 pkg/harvester/dialog/VolumeCloneDialog.vue    | 28 ++++++------
 22 files changed, 309 insertions(+), 251 deletions(-)

diff --git a/pkg/harvester/dialog/CloneVmDialog.vue b/pkg/harvester/dialog/CloneVmDialog.vue
index 25ce1008..7e00974c 100644
--- a/pkg/harvester/dialog/CloneVmDialog.vue
+++ b/pkg/harvester/dialog/CloneVmDialog.vue
@@ -104,7 +104,7 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
+    <template #actions class="actions">
       <div class="buttons">
         <button class="btn role-secondary mr-10" @click="close">
           {{ t('generic.cancel') }}
@@ -119,7 +119,7 @@ export default {
       </div>
 
       <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue b/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue
index 0ce672bf..063ef662 100644
--- a/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue
+++ b/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue
@@ -132,28 +132,34 @@ export default {
 
 <template>
   <Card class="prompt-related" :show-highlight-border="false">
-    <h4 slot="title" class="text-default-text">
-      {{ t('promptRemove.title') }}
-    </h4>
-    <div slot="body" class="pl-10 pr-10">
-      <span
-        v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
-      ></span>
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('promptRemove.title') }}
+      </h4>
+    </template>
 
-      <div class="mt-10 mb-10">
+    <template #body>
+      <div class="pl-10 pr-10">
         <span
-          v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+          v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
         ></span>
+
+        <div class="mt-10 mb-10">
+          <span
+            v-clean-html="t('promptRemove.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>
-      <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') }}
diff --git a/pkg/harvester/dialog/DeepCloneVmDialog.vue b/pkg/harvester/dialog/DeepCloneVmDialog.vue
index c7cb2eca..1b8cef9d 100644
--- a/pkg/harvester/dialog/DeepCloneVmDialog.vue
+++ b/pkg/harvester/dialog/DeepCloneVmDialog.vue
@@ -104,22 +104,24 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="create"
-          :action-label="cloneData ? t('harvester.modal.cloneVM.action.create') : t('harvester.modal.cloneVM.action.clone')"
-          :disabled="cloneData && !name"
-          @click="create"
-        />
+          <AsyncButton
+            mode="create"
+            :action-label="cloneData ? t('harvester.modal.cloneVM.action.create') : t('harvester.modal.cloneVM.action.clone')"
+            :disabled="cloneData && !name"
+            @click="create"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/EnablePassthrough.vue b/pkg/harvester/dialog/EnablePassthrough.vue
index 66db4652..35516dee 100644
--- a/pkg/harvester/dialog/EnablePassthrough.vue
+++ b/pkg/harvester/dialog/EnablePassthrough.vue
@@ -85,25 +85,28 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <h4
-      slot="title"
-      v-clean-html="t('promptRemove.title')"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('promptRemove.title')"
+        class="text-default-text"
+      />
+    </template>
 
     <template #body>
       {{ t('harvester.pci.enablePassthroughWarning') }}
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton mode="enable" @click="save" />
+          <AsyncButton mode="enable" @click="save" />
+        </div>
       </div>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/EnableSriovDevice.vue b/pkg/harvester/dialog/EnableSriovDevice.vue
index a315ad53..386b4149 100644
--- a/pkg/harvester/dialog/EnableSriovDevice.vue
+++ b/pkg/harvester/dialog/EnableSriovDevice.vue
@@ -67,7 +67,7 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <template v-slot:title>
+    <template #title>
       <h4
         v-clean-html="t('promptRemove.title')"
         class="text-default-text"
@@ -84,7 +84,7 @@ export default {
       />
     </template>
 
-    <template v-slot:actions>
+    <template #actions>
       <div class="buttons actions">
         <button class="btn role-secondary mr-10" @click="close">
           {{ t('generic.cancel') }}
diff --git a/pkg/harvester/dialog/EnableVGpuDevice.vue b/pkg/harvester/dialog/EnableVGpuDevice.vue
index 1a022c9d..ee29237b 100644
--- a/pkg/harvester/dialog/EnableVGpuDevice.vue
+++ b/pkg/harvester/dialog/EnableVGpuDevice.vue
@@ -60,7 +60,7 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <template v-slot:title>
+    <template #title>
       <h4
         v-clean-html="t('harvester.vgpu.enable.title')"
         class="text-default-text"
@@ -81,7 +81,7 @@ export default {
       </div>
     </template>
 
-    <template v-slot:actions>
+    <template #actions>
       <div class="buttons actions">
         <button class="btn role-secondary mr-10" @click="close">
           {{ t('generic.cancel') }}
diff --git a/pkg/harvester/dialog/HarvesterAddHotplugModal.vue b/pkg/harvester/dialog/HarvesterAddHotplugModal.vue
index 2256c6d6..b3830ca0 100644
--- a/pkg/harvester/dialog/HarvesterAddHotplugModal.vue
+++ b/pkg/harvester/dialog/HarvesterAddHotplugModal.vue
@@ -112,7 +112,12 @@ export default {
 
 <template>
   <Card ref="modal" name="modal" :show-highlight-border="false">
-    <h4 slot="title" v-clean-html="t('harvester.modal.hotplug.title')" class="text-default-text" />
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.hotplug.title')"
+        class="text-default-text"
+      />
+    </template>
 
     <template #body>
       <LabeledInput
@@ -130,21 +135,23 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button type="button" class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button type="button" class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="apply"
-          :disabled="!diskName || !volumeName"
-          @click="save"
-        />
+          <AsyncButton
+            mode="apply"
+            :disabled="!diskName || !volumeName"
+            @click="save"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterBackupModal.vue b/pkg/harvester/dialog/HarvesterBackupModal.vue
index f9815bff..040fe6df 100644
--- a/pkg/harvester/dialog/HarvesterBackupModal.vue
+++ b/pkg/harvester/dialog/HarvesterBackupModal.vue
@@ -90,27 +90,30 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <h4
-      slot="title"
-      v-clean-html="t('harvester.modal.backup.addBackup')"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.backup.addBackup')"
+        class="text-default-text"
+      />
+    </template>
 
     <template #body>
       <LabeledInput v-model:value="backUpName" :label="t('generic.name')" required />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton mode="create" :disabled="!backUpName" @click="save" />
+          <AsyncButton mode="create" :disabled="!backUpName" @click="save" />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterCloneTemplate.vue b/pkg/harvester/dialog/HarvesterCloneTemplate.vue
index 020c11ca..f9eac7a8 100644
--- a/pkg/harvester/dialog/HarvesterCloneTemplate.vue
+++ b/pkg/harvester/dialog/HarvesterCloneTemplate.vue
@@ -118,21 +118,23 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="create"
-          :disabled="!templateName"
-          @click="save"
-        />
+          <AsyncButton
+            mode="create"
+            :disabled="!templateName"
+            @click="save"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue b/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue
index 9ce3fcda..6feedd5d 100644
--- a/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue
+++ b/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue
@@ -128,22 +128,24 @@ export default {
       </Banner>
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="delete"
-          :disabled="!diskNames.length"
-          class="btn bg-error ml-10"
-          @click="remove"
-        />
+          <AsyncButton
+            mode="delete"
+            :disabled="!diskNames.length"
+            class="btn bg-error ml-10"
+            @click="remove"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterExportImageDialog.vue b/pkg/harvester/dialog/HarvesterExportImageDialog.vue
index f9ab73a0..390bdb22 100644
--- a/pkg/harvester/dialog/HarvesterExportImageDialog.vue
+++ b/pkg/harvester/dialog/HarvesterExportImageDialog.vue
@@ -166,21 +166,23 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="create"
-          :disabled="disableSave"
-          @click="save"
-        />
+          <AsyncButton
+            mode="create"
+            :disabled="disableSave"
+            @click="save"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterMaintenanceDialog.vue b/pkg/harvester/dialog/HarvesterMaintenanceDialog.vue
index f1f6b636..2b35cc1f 100644
--- a/pkg/harvester/dialog/HarvesterMaintenanceDialog.vue
+++ b/pkg/harvester/dialog/HarvesterMaintenanceDialog.vue
@@ -132,18 +132,20 @@ export default {
       </div>
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="apply"
-          @click="apply"
-        />
+          <AsyncButton
+            mode="apply"
+            @click="apply"
+          />
+        </div>
       </div>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterMigrationDialog.vue b/pkg/harvester/dialog/HarvesterMigrationDialog.vue
index d871f7ef..411406d6 100644
--- a/pkg/harvester/dialog/HarvesterMigrationDialog.vue
+++ b/pkg/harvester/dialog/HarvesterMigrationDialog.vue
@@ -153,7 +153,7 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
+    <template #actions class="actions">
       <div class="buttons">
         <button class="btn role-secondary mr-10" @click="close">
           {{ t('generic.cancel') }}
@@ -167,7 +167,7 @@ export default {
       </div>
 
       <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterQuotaDialog.vue b/pkg/harvester/dialog/HarvesterQuotaDialog.vue
index a0cd3f01..4cdbc57c 100644
--- a/pkg/harvester/dialog/HarvesterQuotaDialog.vue
+++ b/pkg/harvester/dialog/HarvesterQuotaDialog.vue
@@ -74,11 +74,13 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <h4
-      slot="title"
-      v-clean-html="t('harvester.modal.quota.editQuota')"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.quota.editQuota')"
+        class="text-default-text"
+      />
+    </template>
+
     <template #body>
       <Banner color="info">
         {{ t('harvester.modal.quota.bannerMessage') }}
@@ -96,15 +98,18 @@ export default {
         class="mb-20"
       />
     </template>
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton @click="save" />
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton @click="save" />
+        </div>
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterRestoreDialog.vue b/pkg/harvester/dialog/HarvesterRestoreDialog.vue
index b45af3a1..b6be7851 100644
--- a/pkg/harvester/dialog/HarvesterRestoreDialog.vue
+++ b/pkg/harvester/dialog/HarvesterRestoreDialog.vue
@@ -138,21 +138,23 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="create"
-          :disabled="!backupName"
-          @click="saveRestore"
-        />
+          <AsyncButton
+            mode="create"
+            :disabled="!backupName"
+            @click="saveRestore"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterUnplugVolume.vue b/pkg/harvester/dialog/HarvesterUnplugVolume.vue
index fb8a2a41..7d408ccb 100644
--- a/pkg/harvester/dialog/HarvesterUnplugVolume.vue
+++ b/pkg/harvester/dialog/HarvesterUnplugVolume.vue
@@ -81,29 +81,32 @@ export default {
 
 <template>
   <Card ref="modal" name="modal" :show-highlight-border="false">
-    <h4
-      slot="title"
-      v-clean-html="t('harvester.virtualMachine.unplug.title', { name: diskName })"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.virtualMachine.unplug.title', { name: diskName })"
+        class="text-default-text"
+      />
+    </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button type="button" class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button type="button" class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="apply"
-          :action-label="t('harvester.virtualMachine.unplug.actionLabel')"
-          :waiting-label="t('harvester.virtualMachine.unplug.actionLabel')"
-          :success-label="t('harvester.virtualMachine.unplug.actionLabel')"
-          @click="save"
-        />
+          <AsyncButton
+            mode="apply"
+            :action-label="t('harvester.virtualMachine.unplug.actionLabel')"
+            :waiting-label="t('harvester.virtualMachine.unplug.actionLabel')"
+            :success-label="t('harvester.virtualMachine.unplug.actionLabel')"
+            @click="save"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue b/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue
index b5d58aa2..76eea676 100644
--- a/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue
+++ b/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue
@@ -113,28 +113,31 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <h4
-      slot="title"
-      v-clean-html="t('harvester.modal.vmSnapshot.title')"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.vmSnapshot.title')"
+        class="text-default-text"
+      />
+    </template>
 
     <template #body>
       <LabeledInput v-model:value="actionResource.metadata.namespace" :disabled="true" :label="t('generic.namespace')" />
       <LabeledInput v-model:value="snapshotName" class="mt-20" :label="t('generic.name')" required />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton mode="create" :disabled="!snapshotName" @click="save" />
+          <AsyncButton mode="create" :disabled="!snapshotName" @click="save" />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue b/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue
index 29014a31..31d83ba2 100644
--- a/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue
+++ b/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue
@@ -109,21 +109,23 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="apply"
-          :disabled="!clusterNetwork"
-          @click="apply"
-        />
+          <AsyncButton
+            mode="apply"
+            :disabled="!clusterNetwork"
+            @click="apply"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/MessageBox.vue b/pkg/harvester/dialog/MessageBox.vue
index a709741b..27a229a6 100644
--- a/pkg/harvester/dialog/MessageBox.vue
+++ b/pkg/harvester/dialog/MessageBox.vue
@@ -36,24 +36,25 @@ export default {
 
 <template>
   <Card ref="modal" name="modal" :show-highlight-border="false">
-    <h4
-      slot="title"
-      class="text-default-text"
-    >
-      {{ t('generic.tip') }}
-    </h4>
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('generic.tip') }}
+      </h4>
+    </template>
 
     <template #body>
       <p v-clean-html="t(modalData.contentKey)"></p>
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button type="button" class="btn role-secondary mr-10" @click="ok">
-          {{ t('generic.ok') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button type="button" class="btn role-secondary mr-10" @click="ok">
+            {{ t('generic.ok') }}
+          </button>
+        </div>
       </div>
-    </div>
+    </template>
   </Card>
 </template>
 
diff --git a/pkg/harvester/dialog/RestoreSnapshotDialog.vue b/pkg/harvester/dialog/RestoreSnapshotDialog.vue
index bb5a8f19..aefe7d60 100644
--- a/pkg/harvester/dialog/RestoreSnapshotDialog.vue
+++ b/pkg/harvester/dialog/RestoreSnapshotDialog.vue
@@ -127,9 +127,11 @@ export default {
 </script>
 <template>
   <Card :show-highlight-border="false">
+
     <template #title>
       {{ t('harvester.modal.restoreSnapshot.title') }}
     </template>
+
     <template #body>
       <LabeledInput
         v-model:value="name"
@@ -145,19 +147,22 @@ export default {
         required
       />
     </template>
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          mode="create"
-          :disabled="disableSave"
-          @click="save"
-        />
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="create"
+            :disabled="disableSave"
+            @click="save"
+          />
+        </div>
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 <style lang="scss" scoped>
diff --git a/pkg/harvester/dialog/SnapshotDialog.vue b/pkg/harvester/dialog/SnapshotDialog.vue
index 35f57557..b891ec59 100644
--- a/pkg/harvester/dialog/SnapshotDialog.vue
+++ b/pkg/harvester/dialog/SnapshotDialog.vue
@@ -72,6 +72,7 @@ export default {
     <template #title>
       {{ t('harvester.modal.snapshot.title') }}
     </template>
+
     <template #body>
       <LabeledInput
         v-model:value="name"
@@ -79,19 +80,22 @@ export default {
         required
       />
     </template>
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          mode="create"
-          :disabled="disableSave"
-          @click="save"
-        />
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="create"
+            :disabled="disableSave"
+            @click="save"
+          />
+        </div>
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 <style lang="scss" scoped>
diff --git a/pkg/harvester/dialog/VolumeCloneDialog.vue b/pkg/harvester/dialog/VolumeCloneDialog.vue
index 46aef85e..b48ab554 100644
--- a/pkg/harvester/dialog/VolumeCloneDialog.vue
+++ b/pkg/harvester/dialog/VolumeCloneDialog.vue
@@ -83,6 +83,7 @@ export default {
     <template #title>
       {{ t('harvester.modal.volumeClone.title') }}
     </template>
+
     <template #body>
       <Checkbox v-model:value="cloneData" class="mb-10" label-key="harvester.modal.cloneVM.type" />
 
@@ -94,19 +95,22 @@ export default {
         required
       />
     </template>
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          mode="create"
-          :disabled="disableSave"
-          @click="save"
-        />
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="create"
+            :disabled="disableSave"
+            @click="save"
+          />
+        </div>
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 <style lang="scss" scoped>