Merge pull request #21729 from itisAliRH/btable-to-gtable-cleanup-result-dialog

Migrate CleanupResultDialog from BTable to GTable

Author: davelopez

client/src/components/User/DiskUsage/Management/Cleanup/CleanupResultDialog.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import { BAlert, BModal, BSpinner } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
+import type { TableField } from "@/components/Common/GTable.types";
 import localize from "@/utils/localization";
 
 import type { CleanupResult } from "./model";
 
 import Alert from "@/components/Alert.vue";
+import GTable from "@/components/Common/GTable.vue";
 
 interface CleanupResultDialogProps {
     result?: CleanupResult;
@@ -33,7 +36,7 @@ const title = computed<string>(() => {
     return message;
 });
 
-const errorFields = [
+const errorFields: TableField[] = [
     { key: "name", label: localize("Name") },
     { key: "reason", label: localize("Reason") },
 ];
@@ -48,16 +51,17 @@ defineExpose({
 </script>
 
 <template>
-    <b-modal id="cleanup-result-modal" v-model="showModal" :title="title" title-tag="h2" hide-footer static>
+    <BModal id="cleanup-result-modal" v-model="showModal" :title="title" title-tag="h2" hide-footer static>
         <div class="text-center">
             <Alert
                 variant="info"
                 message="After the operation, the storage space that will be freed up will only be for the unique items. This means that some items may not free up any storage space because they are duplicates of other items." />
-            <b-spinner v-if="isLoading" class="mx-auto" data-test-id="loading-spinner" />
-            <div v-else>
-                <b-alert v-if="result.hasFailed" show variant="danger" data-test-id="error-alert">
+
+            <BSpinner v-if="isLoading" class="mx-auto" data-test-id="loading-spinner" />
+            <div v-else-if="result">
+                <BAlert v-if="result.hasFailed" show variant="danger" data-test-id="error-alert">
                     {{ result.errorMessage }}
-                </b-alert>
+                </BAlert>
                 <h3 v-else-if="result.success" data-test-id="success-info">
                     You've cleared <b>{{ result.niceTotalFreeBytes }}</b>
                 </h3>
@@ -66,19 +70,19 @@ defineExpose({
                         You've successfully cleared <b>{{ result.totalCleaned }}</b> items for a total of
                         <b>{{ result.niceTotalFreeBytes }}</b> but...
                     </h3>
-                    <b-alert v-if="result.hasSomeErrors" show variant="warning">
+                    <BAlert v-if="result.hasSomeErrors" show variant="warning">
                         <h3 class="mb-0">
                             <b>{{ result.errors.length }}</b> items couldn't be cleared
                         </h3>
-                    </b-alert>
+                    </BAlert>
                 </div>
-                <b-table-lite
+
+                <GTable
                     v-if="result.hasSomeErrors"
                     :fields="errorFields"
                     :items="result.errors"
-                    small
                     data-test-id="errors-table" />
             </div>
         </div>
-    </b-modal>
+    </BModal>
 </template>