Import missing components to CleanupResultDialog: BModal, BAlert, and BSpinner

Author: itisAliRH

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BAlert, BModal, BSpinner } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { TableField } from "@/components/Common/GTable.types";
@@ -50,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" />
+
+            <BSpinner v-if="isLoading" class="mx-auto" data-test-id="loading-spinner" />
             <div v-else-if="result">
-                <b-alert v-if="result.hasFailed" show variant="danger" data-test-id="error-alert">
+                <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>
@@ -68,18 +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>
+
                 <GTable
                     v-if="result.hasSomeErrors"
                     :fields="errorFields"
                     :items="result.errors"
                     data-test-id="errors-table" />
             </div>
         </div>
-    </b-modal>
+    </BModal>
 </template>