From 25439aee65ea900fe1aca9e52db51140babf3365 Mon Sep 17 00:00:00 2001
From: Andy Lee <andy.lee@suse.com>
Date: Mon, 31 Mar 2025 16:27:13 +0800
Subject: [PATCH] Fix error banner position in all dialogs (#226)

* fix error banner position in all dialogs

Signed-off-by: Andy Lee <andy.lee@suse.com>

* update HarvesterImageDownloader.vue

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>
---
 pkg/harvester/dialog/ConfirmExecutionDialog.vue     |  2 ++
 .../dialog/ConfirmRelatedToRemoveDialog.vue         |  2 ++
 pkg/harvester/dialog/DeepCloneVmDialog.vue          | 13 ++++++-------
 pkg/harvester/dialog/HarvesterAddHotplugModal.vue   | 11 ++++++-----
 pkg/harvester/dialog/HarvesterBackupModal.vue       | 13 ++++++-------
 pkg/harvester/dialog/HarvesterCloneTemplate.vue     | 11 ++++++-----
 pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue  | 13 ++++++-------
 pkg/harvester/dialog/HarvesterExportImageDialog.vue | 11 ++++++-----
 pkg/harvester/dialog/HarvesterImageDownloader.vue   | 11 +++++------
 pkg/harvester/dialog/HarvesterMigrationDialog.vue   | 12 ++++++------
 pkg/harvester/dialog/HarvesterQuotaDialog.vue       | 12 ++++++------
 pkg/harvester/dialog/HarvesterRestoreDialog.vue     | 11 ++++++-----
 pkg/harvester/dialog/HarvesterUnplugVolume.vue      | 13 ++++++-------
 pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue  | 11 ++++++-----
 .../dialog/HarvesterVlanConfigMigrateDialog.vue     | 11 ++++++-----
 pkg/harvester/dialog/RestartVMDialog.vue            | 12 ++++++------
 pkg/harvester/dialog/RestoreSnapshotDialog.vue      | 10 ++++++----
 pkg/harvester/dialog/SnapshotDialog.vue             | 12 ++++++------
 pkg/harvester/dialog/VolumeCloneDialog.vue          | 10 ++++++----
 19 files changed, 105 insertions(+), 96 deletions(-)

diff --git a/pkg/harvester/dialog/ConfirmExecutionDialog.vue b/pkg/harvester/dialog/ConfirmExecutionDialog.vue
index 1e180c5c..edbb0ba9 100644
--- a/pkg/harvester/dialog/ConfirmExecutionDialog.vue
+++ b/pkg/harvester/dialog/ConfirmExecutionDialog.vue
@@ -138,6 +138,8 @@ export default {
         <Banner
           v-for="(error, i) in errors"
           :key="i"
+          :label="error"
+          color="error"
         />
       </div>
     </template>
diff --git a/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue b/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue
index f044d56f..13258eaf 100644
--- a/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue
+++ b/pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue
@@ -166,6 +166,8 @@ export default {
         <Banner
           v-for="(error, i) in errors"
           :key="i"
+          :label="error"
+          color="error"
         />
       </div>
     </template>
diff --git a/pkg/harvester/dialog/DeepCloneVmDialog.vue b/pkg/harvester/dialog/DeepCloneVmDialog.vue
index e89f08de..77faeea5 100644
--- a/pkg/harvester/dialog/DeepCloneVmDialog.vue
+++ b/pkg/harvester/dialog/DeepCloneVmDialog.vue
@@ -106,6 +106,12 @@ export default {
         :label="t('harvester.modal.cloneVM.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        :label="err"
+        color="error"
+      />
     </template>
 
     <template #actions>
@@ -125,13 +131,6 @@ export default {
             @click="create"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/HarvesterAddHotplugModal.vue b/pkg/harvester/dialog/HarvesterAddHotplugModal.vue
index ba64bb21..cc3bcf24 100644
--- a/pkg/harvester/dialog/HarvesterAddHotplugModal.vue
+++ b/pkg/harvester/dialog/HarvesterAddHotplugModal.vue
@@ -137,6 +137,12 @@ export default {
         class="mt-20"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        :label="err"
+        color="error"
+      />
     </template>
 
     <template #actions>
@@ -156,11 +162,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/HarvesterBackupModal.vue b/pkg/harvester/dialog/HarvesterBackupModal.vue
index e4b1b6c3..6b411fe6 100644
--- a/pkg/harvester/dialog/HarvesterBackupModal.vue
+++ b/pkg/harvester/dialog/HarvesterBackupModal.vue
@@ -103,6 +103,12 @@ export default {
         :label="t('generic.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -121,13 +127,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/HarvesterCloneTemplate.vue b/pkg/harvester/dialog/HarvesterCloneTemplate.vue
index bfcf1241..029966a7 100644
--- a/pkg/harvester/dialog/HarvesterCloneTemplate.vue
+++ b/pkg/harvester/dialog/HarvesterCloneTemplate.vue
@@ -120,6 +120,12 @@ export default {
         v-model:value="description"
         :label="t('harvester.modal.createTemplate.description')"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -138,11 +144,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue b/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue
index cf46508d..08ac33c4 100644
--- a/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue
+++ b/pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue
@@ -128,6 +128,12 @@ export default {
       <Banner color="warning">
         <span>{{ t('harvester.modal.ejectCDROM.warnTip') }}</span>
       </Banner>
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -147,13 +153,6 @@ export default {
             @click="remove"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/HarvesterExportImageDialog.vue b/pkg/harvester/dialog/HarvesterExportImageDialog.vue
index 28072ff0..fac32d18 100644
--- a/pkg/harvester/dialog/HarvesterExportImageDialog.vue
+++ b/pkg/harvester/dialog/HarvesterExportImageDialog.vue
@@ -187,6 +187,12 @@ export default {
         class="mt-20"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -205,11 +211,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/HarvesterImageDownloader.vue b/pkg/harvester/dialog/HarvesterImageDownloader.vue
index abfb5013..2bf61030 100644
--- a/pkg/harvester/dialog/HarvesterImageDownloader.vue
+++ b/pkg/harvester/dialog/HarvesterImageDownloader.vue
@@ -122,16 +122,15 @@ export default {
         </Banner>
         {{ t('harvester.modal.downloadImage.startMessage') }}
         <br /><br />
-      </template>
-
-      <template #actions>
         <Banner
           v-for="(err, i) in errors"
           :key="i"
           color="error"
-        >
-          {{ err }}
-        </Banner>
+          :label="err"
+        />
+      </template>
+
+      <template #actions>
         <div class="actions">
           <div class="buttons">
             <button
diff --git a/pkg/harvester/dialog/HarvesterMigrationDialog.vue b/pkg/harvester/dialog/HarvesterMigrationDialog.vue
index 40225d69..f498b297 100644
--- a/pkg/harvester/dialog/HarvesterMigrationDialog.vue
+++ b/pkg/harvester/dialog/HarvesterMigrationDialog.vue
@@ -161,6 +161,12 @@ export default {
         :placeholder="t('harvester.modal.migration.fields.nodeName.placeholder')"
         :options="nodeNameList"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template
@@ -181,12 +187,6 @@ export default {
           @click="apply"
         />
       </div>
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        color="error"
-        :label="err"
-      />
     </template>
   </Card>
 </template>
diff --git a/pkg/harvester/dialog/HarvesterQuotaDialog.vue b/pkg/harvester/dialog/HarvesterQuotaDialog.vue
index 3129951b..b83eaebe 100644
--- a/pkg/harvester/dialog/HarvesterQuotaDialog.vue
+++ b/pkg/harvester/dialog/HarvesterQuotaDialog.vue
@@ -96,6 +96,12 @@ export default {
         :suffix="GIBIBYTE"
         class="mb-20"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -109,12 +115,6 @@ export default {
           </button>
           <AsyncButton @click="save" />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/HarvesterRestoreDialog.vue b/pkg/harvester/dialog/HarvesterRestoreDialog.vue
index a57075b6..e5a6bfb0 100644
--- a/pkg/harvester/dialog/HarvesterRestoreDialog.vue
+++ b/pkg/harvester/dialog/HarvesterRestoreDialog.vue
@@ -136,6 +136,12 @@ export default {
         :options="backupOption"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -154,11 +160,6 @@ export default {
             @click="saveRestore"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/HarvesterUnplugVolume.vue b/pkg/harvester/dialog/HarvesterUnplugVolume.vue
index 8d362b06..dd72f8b8 100644
--- a/pkg/harvester/dialog/HarvesterUnplugVolume.vue
+++ b/pkg/harvester/dialog/HarvesterUnplugVolume.vue
@@ -90,6 +90,12 @@ export default {
         v-clean-html="t('harvester.virtualMachine.unplug.title', { name: diskName })"
         class="text-default-text"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -111,13 +117,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue b/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue
index d7a5bd77..e7a32e7d 100644
--- a/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue
+++ b/pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue
@@ -132,6 +132,12 @@ export default {
         :label="t('generic.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -150,11 +156,6 @@ export default {
             @click="save"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue b/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue
index cb6ca07c..c65707cd 100644
--- a/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue
+++ b/pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue
@@ -107,6 +107,12 @@ export default {
         :placeholder="t('harvester.harvesterVlanConfigMigrateDialog.targetClusterNetwork.placeholder')"
         :options="clusterNetworks"
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -125,11 +131,6 @@ export default {
             @click="apply"
           />
         </div>
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/RestartVMDialog.vue b/pkg/harvester/dialog/RestartVMDialog.vue
index 437050df..19b05b91 100644
--- a/pkg/harvester/dialog/RestartVMDialog.vue
+++ b/pkg/harvester/dialog/RestartVMDialog.vue
@@ -70,16 +70,16 @@ export default {
           v-clean-html="t('harvester.modal.restart.tip')"
           class="pl-10 pr-10"
         />
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
       </template>
 
       <template #actions>
         <div class="bottom">
-          <Banner
-            v-for="(err, i) in errors"
-            :key="i"
-            color="error"
-            :label="err"
-          />
           <div class="buttons">
             <button
               class="btn role-secondary mr-10"
diff --git a/pkg/harvester/dialog/RestoreSnapshotDialog.vue b/pkg/harvester/dialog/RestoreSnapshotDialog.vue
index b5ae36cf..4e595b64 100644
--- a/pkg/harvester/dialog/RestoreSnapshotDialog.vue
+++ b/pkg/harvester/dialog/RestoreSnapshotDialog.vue
@@ -145,6 +145,12 @@ export default {
         class="mt-20"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -162,10 +168,6 @@ export default {
             @click="save"
           />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/SnapshotDialog.vue b/pkg/harvester/dialog/SnapshotDialog.vue
index abc15a57..de725308 100644
--- a/pkg/harvester/dialog/SnapshotDialog.vue
+++ b/pkg/harvester/dialog/SnapshotDialog.vue
@@ -79,6 +79,12 @@ export default {
         :label="t('harvester.modal.snapshot.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -96,12 +102,6 @@ export default {
             @click="save"
           />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
       </div>
     </template>
   </Card>
diff --git a/pkg/harvester/dialog/VolumeCloneDialog.vue b/pkg/harvester/dialog/VolumeCloneDialog.vue
index 38b98d21..6f469d7f 100644
--- a/pkg/harvester/dialog/VolumeCloneDialog.vue
+++ b/pkg/harvester/dialog/VolumeCloneDialog.vue
@@ -98,6 +98,12 @@ export default {
         :label="t('harvester.modal.volumeClone.name')"
         required
       />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </template>
 
     <template #actions>
@@ -115,10 +121,6 @@ export default {
             @click="save"
           />
         </div>
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-        />
       </div>
     </template>
   </Card>