From 7d3954ad13791cfaa29e3f5b5dcb8f43289d73b8 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 8 Sep 2023 14:58:42 +0200
Subject: [PATCH 1/5] Modernize DiskUsageSummary component

- Convert to script setup + Typescript
- Adapt tests
---
 .../User/DiskUsage/DiskUsageSummary.test.ts   |  37 ++---
 .../User/DiskUsage/DiskUsageSummary.vue       | 146 ++++++++----------
 .../User/DiskUsage/Quota/model/QuotaUsage.ts  |   8 +-
 client/src/stores/userStore.ts                |   5 +-
 4 files changed, 91 insertions(+), 105 deletions(-)

diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts b/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts
index c2fe85c41ed0..40508d6323a5 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts
@@ -3,8 +3,6 @@ import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 
-import MockCurrentUser from "@/components/providers/MockCurrentUser";
-import MockProvider from "@/components/providers/MockProvider";
 import { mockFetcher } from "@/schema/__mocks__";
 import { useUserStore } from "@/stores/userStore";
 
@@ -14,17 +12,19 @@ jest.mock("@/schema");
 
 const localVue = getLocalVue();
 
-const quotaUsageSummaryComponentId = "quota-usage-summary";
-const basicDiskUsageSummaryId = "basic-disk-usage-summary";
+const quotaUsageClassSelector = ".quota-usage";
+const basicDiskUsageSummaryId = "#basic-disk-usage-summary";
 
-const fakeUser = {
+const fakeUserWithQuota = {
+    id: "fakeUser",
+    email: "fakeUserEmail",
+    tags_used: [],
+    isAnonymous: false,
     total_disk_usage: 1054068,
+    quota_bytes: 1000000000,
+    quota_percent: 0.1,
+    quota_source_label: "Default",
 };
-const CurrentUserMock = MockCurrentUser(fakeUser);
-const QuotaUsageProviderMock = MockProvider({
-    result: [],
-});
-const QuotaUsageSummaryMock = { template: `<div id='${quotaUsageSummaryComponentId}'/>` };
 
 async function mountDiskUsageSummaryWrapper(enableQuotas: boolean) {
     mockFetcher
@@ -33,16 +33,11 @@ async function mountDiskUsageSummaryWrapper(enableQuotas: boolean) {
         .mock({ data: { enable_quotas: enableQuotas } });
     const pinia = createPinia();
     const wrapper = mount(DiskUsageSummary, {
-        stubs: {
-            CurrentUser: CurrentUserMock,
-            QuotaUsageProvider: QuotaUsageProviderMock,
-            QuotaUsageSummary: QuotaUsageSummaryMock,
-        },
         localVue,
         pinia,
     });
     const userStore = useUserStore();
-    userStore.currentUser = { id: "fakeUser", email: "fakeUserEmail", tags_used: [], isAnonymous: false };
+    userStore.currentUser = fakeUserWithQuota;
     await flushPromises();
     return wrapper;
 }
@@ -51,14 +46,16 @@ describe("DiskUsageSummary.vue", () => {
     it("should display basic disk usage summary if quotas are NOT enabled", async () => {
         const enableQuotasInConfig = false;
         const wrapper = await mountDiskUsageSummaryWrapper(enableQuotasInConfig);
-        expect(wrapper.find(`#${basicDiskUsageSummaryId}`).exists()).toBe(true);
-        expect(wrapper.find(`#${quotaUsageSummaryComponentId}`).exists()).toBe(false);
+        expect(wrapper.find(basicDiskUsageSummaryId).exists()).toBe(true);
+        const quotaUsages = wrapper.findAll(quotaUsageClassSelector);
+        expect(quotaUsages.length).toBe(0);
     });
 
     it("should display quota usage summary if quotas are enabled", async () => {
         const enableQuotasInConfig = true;
         const wrapper = await mountDiskUsageSummaryWrapper(enableQuotasInConfig);
-        expect(wrapper.find(`#${basicDiskUsageSummaryId}`).exists()).toBe(false);
-        expect(wrapper.find(`#${quotaUsageSummaryComponentId}`).exists()).toBe(true);
+        expect(wrapper.find(basicDiskUsageSummaryId).exists()).toBe(false);
+        const quotaUsages = wrapper.findAll(quotaUsageClassSelector);
+        expect(quotaUsages.length).toBe(1);
     });
 });
diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.vue b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
index bb1baea3ee65..2cc07c3c1a76 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.vue
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
@@ -1,7 +1,71 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { computed, ref } from "vue";
+
+import { useConfig } from "@/composables/config";
+import { fetcher } from "@/schema";
+import { useUserStore } from "@/stores/userStore";
+import { errorMessageAsString } from "@/utils/simple-error";
+import { bytesToString } from "@/utils/utils";
+
+import { QuotaUsage } from "./Quota/model";
+
+import QuotaUsageSummary from "@/components/User/DiskUsage/Quota/QuotaUsageSummary.vue";
+
+const { config, isConfigLoaded } = useConfig(true);
+const userStore = useUserStore();
+const { currentUser } = storeToRefs(userStore);
+
+const errorMessage = ref<string>();
+const isRecalculating = ref<boolean>(false);
+const dismissCountDown = ref<number>(0);
+
+const niceTotalDiskUsage = computed(() => {
+    if (!currentUser.value || currentUser.value.isAnonymous) {
+        return "Unknown";
+    }
+    return bytesToString(currentUser.value.total_disk_usage, true);
+});
+
+const quotaUsages = computed(() => {
+    if (!currentUser.value || currentUser.value.isAnonymous) {
+        return [];
+    }
+    return [new QuotaUsage(currentUser.value)];
+});
+
+async function displayRecalculationForSeconds(seconds: number) {
+    return new Promise<void>((resolve) => {
+        isRecalculating.value = true;
+        dismissCountDown.value = seconds;
+
+        setTimeout(() => {
+            isRecalculating.value = false;
+            resolve();
+        }, seconds * 1000);
+    });
+}
+
+const recalculateDiskUsage = fetcher.path("/api/users/current/recalculate_disk_usage").method("put").create();
+
+async function onRefresh() {
+    try {
+        await recalculateDiskUsage({});
+        await displayRecalculationForSeconds(30);
+        userStore.loadUser();
+    } catch (e) {
+        errorMessage.value = errorMessageAsString(e);
+    }
+}
+
+function onCountDownChanged(count: number) {
+    dismissCountDown.value = count;
+}
+</script>
 <template>
     <div>
         <b-alert v-if="errorMessage" variant="danger" show>
-            <h2 class="alert-heading h-sm">{{ errorMessageTitle }}</h2>
+            <h2 v-localize class="alert-heading h-sm">Failed to access disk usage details.</h2>
             {{ errorMessage }}
         </b-alert>
         <b-container v-if="currentUser">
@@ -9,7 +73,7 @@
                 <QuotaUsageSummary v-if="quotaUsages" :quota-usages="quotaUsages" />
             </b-row>
             <h2 v-else id="basic-disk-usage-summary" class="text-center my-3">
-                You're using <b>{{ getTotalDiskUsage(currentUser) }}</b> of disk space.
+                You're using <b>{{ niceTotalDiskUsage }}</b> of disk space.
             </h2>
         </b-container>
         <b-container class="text-center mb-5 w-75">
@@ -25,89 +89,15 @@
             </button>
             <b-alert
                 v-if="isRecalculating"
+                v-localize
                 class="mt-2"
                 variant="info"
                 dismissible
                 fade
                 :show="dismissCountDown"
-                @dismiss-count-down="countDownChanged">
+                @dismiss-count-down="onCountDownChanged">
                 Recalculating disk usage... this may take some time, please check back later.
             </b-alert>
         </b-container>
     </div>
 </template>
-
-<script>
-import axios from "axios";
-import QuotaUsageSummary from "components/User/DiskUsage/Quota/QuotaUsageSummary";
-import { getAppRoot } from "onload/loadConfig";
-import { mapActions, mapState } from "pinia";
-import _l from "utils/localization";
-import { rethrowSimple } from "utils/simple-error";
-import { bytesToString } from "utils/utils";
-
-import { useConfig } from "@/composables/config";
-import { useUserStore } from "@/stores/userStore";
-
-import { QuotaUsage } from "./Quota/model";
-
-export default {
-    components: {
-        QuotaUsageSummary,
-    },
-    setup() {
-        const { config, isConfigLoaded } = useConfig(true);
-        return { config, isConfigLoaded };
-    },
-    data() {
-        return {
-            errorMessageTitle: _l("Failed to access disk usage details."),
-            errorMessage: null,
-            isRecalculating: false,
-            dismissCountDown: 0,
-        };
-    },
-    computed: {
-        ...mapState(useUserStore, ["currentUser"]),
-        quotaUsages() {
-            return [new QuotaUsage(this.currentUser)];
-        },
-    },
-    methods: {
-        ...mapActions(useUserStore, ["loadUser"]),
-        getTotalDiskUsage(user) {
-            return bytesToString(user.total_disk_usage, true);
-        },
-        onError(errorMessage) {
-            this.errorMessage = errorMessage;
-        },
-        async onRefresh() {
-            await this.requestDiskUsageRecalculation();
-            await this.displayRecalculationForSeconds(30);
-
-            this.loadUser();
-        },
-        async requestDiskUsageRecalculation() {
-            try {
-                await axios.put(`${getAppRoot()}api/users/current/recalculate_disk_usage`);
-            } catch (e) {
-                rethrowSimple(e);
-            }
-        },
-        async displayRecalculationForSeconds(seconds) {
-            return new Promise((resolve) => {
-                this.isRecalculating = true;
-                this.dismissCountDown = seconds;
-
-                setTimeout(() => {
-                    this.isRecalculating = false;
-                    resolve();
-                }, seconds * 1000);
-            });
-        },
-        countDownChanged(dismissCountDown) {
-            this.dismissCountDown = dismissCountDown;
-        },
-    },
-};
-</script>
diff --git a/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.ts b/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.ts
index 28ce5dfb1b84..b34eeb57f10c 100644
--- a/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.ts
+++ b/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.ts
@@ -1,13 +1,9 @@
+import type { components } from "@/schema";
 import { bytesToString } from "@/utils/utils";
 
 export const DEFAULT_QUOTA_SOURCE_LABEL = "Default";
 
-export interface QuotaUsageResponse {
-    quota_source_label?: string;
-    quota_bytes?: number;
-    total_disk_usage: number;
-    quota_percent?: number;
-}
+type QuotaUsageResponse = components["schemas"]["UserQuotaUsage"];
 
 /**
  * Contains information about quota usage for a particular ObjectStore.
diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index 5cb89f483c41..43dfb82c0b7a 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
+import { components } from "@/schema";
 import { useHistoryStore } from "@/stores/historyStore";
 import {
     addFavoriteToolQuery,
@@ -10,7 +11,9 @@ import {
     setCurrentThemeQuery,
 } from "@/stores/users/queries";
 
-interface User {
+type QuotaUsageResponse = components["schemas"]["UserQuotaUsage"];
+
+interface User extends QuotaUsageResponse {
     id: string;
     email: string;
     tags_used: string[];

From 9163f376dc292fce08bb5a0ec17a57bfb1c5d5a1 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 8 Sep 2023 15:52:07 +0200
Subject: [PATCH 2/5] Enhance reactivity of disk usage recalculation

If we have the task ID of the recalculation task we use it to track when it finishes instead of waiting a fixed amount of time.
---
 .../User/DiskUsage/DiskUsageSummary.vue       | 50 +++++++++++--------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.vue b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
index 2cc07c3c1a76..ed561346c6f5 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.vue
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { useConfig } from "@/composables/config";
+import { useTaskMonitor } from "@/composables/taskMonitor";
 import { fetcher } from "@/schema";
 import { useUserStore } from "@/stores/userStore";
 import { errorMessageAsString } from "@/utils/simple-error";
@@ -15,10 +16,10 @@ import QuotaUsageSummary from "@/components/User/DiskUsage/Quota/QuotaUsageSumma
 const { config, isConfigLoaded } = useConfig(true);
 const userStore = useUserStore();
 const { currentUser } = storeToRefs(userStore);
+const { isRunning: isRecalculateTaskRunning, waitForTask } = useTaskMonitor();
 
 const errorMessage = ref<string>();
 const isRecalculating = ref<boolean>(false);
-const dismissCountDown = ref<number>(0);
 
 const niceTotalDiskUsage = computed(() => {
     if (!currentUser.value || currentUser.value.isAnonymous) {
@@ -34,10 +35,23 @@ const quotaUsages = computed(() => {
     return [new QuotaUsage(currentUser.value)];
 });
 
+const isRefreshing = computed(() => {
+    return isRecalculateTaskRunning.value || isRecalculating.value;
+});
+
+watch(
+    () => isRefreshing.value,
+    (newValue, oldValue) => {
+        // Make sure we reload the user when the recalculation is done
+        if (oldValue && !newValue) {
+            userStore.loadUser();
+        }
+    }
+);
+
 async function displayRecalculationForSeconds(seconds: number) {
     return new Promise<void>((resolve) => {
         isRecalculating.value = true;
-        dismissCountDown.value = seconds;
 
         setTimeout(() => {
             isRecalculating.value = false;
@@ -50,17 +64,19 @@ const recalculateDiskUsage = fetcher.path("/api/users/current/recalculate_disk_u
 
 async function onRefresh() {
     try {
-        await recalculateDiskUsage({});
-        await displayRecalculationForSeconds(30);
-        userStore.loadUser();
+        const response = await recalculateDiskUsage({});
+        if (response.status == 200) {
+            // Wait for the task to complete
+            waitForTask(response.data.id);
+        } else if (response.status == 204) {
+            // We cannot track any task, so just display the
+            // recalculation message for a reasonable amount of time
+            await displayRecalculationForSeconds(30);
+        }
     } catch (e) {
         errorMessage.value = errorMessageAsString(e);
     }
 }
-
-function onCountDownChanged(count: number) {
-    dismissCountDown.value = count;
-}
 </script>
 <template>
     <div>
@@ -79,23 +95,15 @@ function onCountDownChanged(count: number) {
         <b-container class="text-center mb-5 w-75">
             <button
                 title="Recalculate disk usage"
-                :disabled="isRecalculating"
+                :disabled="isRefreshing"
                 variant="outline-secondary"
                 size="sm"
                 pill
                 @click="onRefresh">
-                <b-spinner v-if="isRecalculating" small />
+                <b-spinner v-if="isRefreshing" small />
                 <span v-else>Refresh</span>
             </button>
-            <b-alert
-                v-if="isRecalculating"
-                v-localize
-                class="mt-2"
-                variant="info"
-                dismissible
-                fade
-                :show="dismissCountDown"
-                @dismiss-count-down="onCountDownChanged">
+            <b-alert v-if="isRefreshing" class="mt-2" variant="info" show dismissible fade>
                 Recalculating disk usage... this may take some time, please check back later.
             </b-alert>
         </b-container>

From 7deccad2133b95bda5ab2f90a85045a86b2fb665 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 8 Sep 2023 17:08:30 +0200
Subject: [PATCH 3/5] Load user's histories conditionally

We may want to load the updated user values without reloading histories.
---
 .../components/User/DiskUsage/DiskUsageSummary.vue   |  3 ++-
 client/src/stores/userStore.ts                       | 12 +++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.vue b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
index ed561346c6f5..ffac1b71b614 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.vue
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
@@ -44,7 +44,8 @@ watch(
     (newValue, oldValue) => {
         // Make sure we reload the user when the recalculation is done
         if (oldValue && !newValue) {
-            userStore.loadUser();
+            const includeHistories = false;
+            userStore.loadUser(includeHistories);
         }
     }
 );
diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index 43dfb82c0b7a..13093688433c 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -57,20 +57,22 @@ export const useUserStore = defineStore("userStore", () => {
         currentUser.value = user;
     }
 
-    function loadUser() {
+    function loadUser(includeHistories = true) {
         if (!loadPromise) {
             loadPromise = getCurrentUser()
                 .then(async (user) => {
-                    const historyStore = useHistoryStore();
                     currentUser.value = { ...user, isAnonymous: !user.email };
                     currentPreferences.value = user?.preferences ?? null;
                     // TODO: This is a hack to get around the fact that the API returns a string
                     if (currentPreferences.value?.favorites) {
                         currentPreferences.value.favorites = JSON.parse(user?.preferences?.favorites ?? { tools: [] });
                     }
-                    await historyStore.loadCurrentHistory();
-                    // load first few histories for user to start pagination
-                    await historyStore.loadHistories();
+                    if (includeHistories) {
+                        const historyStore = useHistoryStore();
+                        await historyStore.loadCurrentHistory();
+                        // load first few histories for user to start pagination
+                        await historyStore.loadHistories();
+                    }
                 })
                 .catch((e) => {
                     console.error("Failed to load user", e);

From 929c62d93f991959192142b769f9059c7bc778ad Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 8 Sep 2023 17:36:15 +0200
Subject: [PATCH 4/5] Display all user's quota sources in dashboard

---
 .../src/components/Page/PageDropdown.test.ts  | 16 ++++++++--
 .../User/DiskUsage/DiskUsageSummary.vue       | 30 ++++++++++++-------
 .../DiskUsage/Quota/model/QuotaUsage.test.ts  |  8 ++---
 .../User/DiskUsage/Quota/model/QuotaUsage.ts  |  6 ++--
 .../User/DiskUsage/Quota/model/index.js       |  2 +-
 5 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Page/PageDropdown.test.ts b/client/src/components/Page/PageDropdown.test.ts
index 222f892ed48d..33e0b548d313 100644
--- a/client/src/components/Page/PageDropdown.test.ts
+++ b/client/src/components/Page/PageDropdown.test.ts
@@ -52,7 +52,13 @@ describe("PageDropdown.vue", () => {
                 pinia: pinia,
             });
             const userStore = useUserStore();
-            userStore.currentUser = { email: "my@email", id: "1", tags_used: [], isAnonymous: false };
+            userStore.currentUser = {
+                email: "my@email",
+                id: "1",
+                tags_used: [],
+                isAnonymous: false,
+                total_disk_usage: 1048576,
+            };
         });
 
         it("should show page title", async () => {
@@ -113,7 +119,13 @@ describe("PageDropdown.vue", () => {
                 },
             });
             const userStore = useUserStore();
-            userStore.currentUser = { email: "my@email", id: "1", tags_used: [], isAnonymous: false };
+            userStore.currentUser = {
+                email: "my@email",
+                id: "1",
+                tags_used: [],
+                isAnonymous: false,
+                total_disk_usage: 1048576,
+            };
             wrapper.find(".page-dropdown").trigger("click");
             await wrapper.vm.$nextTick();
             wrapper.find(".dropdown-item-delete").trigger("click");
diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.vue b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
index ffac1b71b614..f409ad79228a 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.vue
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 import { useConfig } from "@/composables/config";
 import { useTaskMonitor } from "@/composables/taskMonitor";
@@ -9,7 +9,7 @@ import { useUserStore } from "@/stores/userStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 import { bytesToString } from "@/utils/utils";
 
-import { QuotaUsage } from "./Quota/model";
+import { QuotaUsage, UserQuotaUsageData } from "./Quota/model";
 
 import QuotaUsageSummary from "@/components/User/DiskUsage/Quota/QuotaUsageSummary.vue";
 
@@ -18,6 +18,7 @@ const userStore = useUserStore();
 const { currentUser } = storeToRefs(userStore);
 const { isRunning: isRecalculateTaskRunning, waitForTask } = useTaskMonitor();
 
+const quotaUsages = ref<QuotaUsage[]>();
 const errorMessage = ref<string>();
 const isRecalculating = ref<boolean>(false);
 
@@ -28,13 +29,6 @@ const niceTotalDiskUsage = computed(() => {
     return bytesToString(currentUser.value.total_disk_usage, true);
 });
 
-const quotaUsages = computed(() => {
-    if (!currentUser.value || currentUser.value.isAnonymous) {
-        return [];
-    }
-    return [new QuotaUsage(currentUser.value)];
-});
-
 const isRefreshing = computed(() => {
     return isRecalculateTaskRunning.value || isRecalculating.value;
 });
@@ -42,10 +36,11 @@ const isRefreshing = computed(() => {
 watch(
     () => isRefreshing.value,
     (newValue, oldValue) => {
-        // Make sure we reload the user when the recalculation is done
+        // Make sure we reload the user and the quota usages when the recalculation is done
         if (oldValue && !newValue) {
             const includeHistories = false;
             userStore.loadUser(includeHistories);
+            loadQuotaUsages();
         }
     }
 );
@@ -78,6 +73,21 @@ async function onRefresh() {
         errorMessage.value = errorMessageAsString(e);
     }
 }
+
+const fetchQuotaUsages = fetcher.path("/api/users/{user_id}/usage").method("get").create();
+
+async function loadQuotaUsages() {
+    try {
+        const { data } = await fetchQuotaUsages({ user_id: "current" });
+        quotaUsages.value = data.map((u: UserQuotaUsageData) => new QuotaUsage(u));
+    } catch (e) {
+        errorMessage.value = errorMessageAsString(e);
+    }
+}
+
+onMounted(async () => {
+    await loadQuotaUsages();
+});
 </script>
 <template>
     <div>
diff --git a/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.test.ts b/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.test.ts
index 134aaa510b06..006440faf1a2 100644
--- a/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.test.ts
+++ b/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.test.ts
@@ -1,20 +1,20 @@
-import { DEFAULT_QUOTA_SOURCE_LABEL, QuotaUsage, type QuotaUsageResponse } from "./QuotaUsage";
+import { DEFAULT_QUOTA_SOURCE_LABEL, QuotaUsage, type UserQuotaUsageData } from "./QuotaUsage";
 
-const RAW_DEFAULT_QUOTA_USAGE: QuotaUsageResponse = {
+const RAW_DEFAULT_QUOTA_USAGE: UserQuotaUsageData = {
     quota_source_label: undefined,
     quota_bytes: 68468436,
     total_disk_usage: 4546654,
     quota_percent: 20,
 };
 
-const RAW_LIMITED_SOURCE_QUOTA_USAGE: QuotaUsageResponse = {
+const RAW_LIMITED_SOURCE_QUOTA_USAGE: UserQuotaUsageData = {
     quota_source_label: "The source",
     quota_bytes: 68468436,
     total_disk_usage: 4546654,
     quota_percent: 20,
 };
 
-const RAW_UNLIMITED_SOURCE_QUOTA_USAGE: QuotaUsageResponse = {
+const RAW_UNLIMITED_SOURCE_QUOTA_USAGE: UserQuotaUsageData = {
     quota_source_label: "The unlimited source",
     quota_bytes: undefined,
     total_disk_usage: 4546654,
diff --git a/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.ts b/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.ts
index b34eeb57f10c..9f0c2577bf11 100644
--- a/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.ts
+++ b/client/src/components/User/DiskUsage/Quota/model/QuotaUsage.ts
@@ -3,15 +3,15 @@ import { bytesToString } from "@/utils/utils";
 
 export const DEFAULT_QUOTA_SOURCE_LABEL = "Default";
 
-type QuotaUsageResponse = components["schemas"]["UserQuotaUsage"];
+export type UserQuotaUsageData = components["schemas"]["UserQuotaUsage"];
 
 /**
  * Contains information about quota usage for a particular ObjectStore.
  */
 export class QuotaUsage {
-    private _data: QuotaUsageResponse;
+    private _data: UserQuotaUsageData;
 
-    constructor(data: QuotaUsageResponse) {
+    constructor(data: UserQuotaUsageData) {
         this._data = data;
     }
 
diff --git a/client/src/components/User/DiskUsage/Quota/model/index.js b/client/src/components/User/DiskUsage/Quota/model/index.js
index 43c68fd60b0b..c5818f3a191e 100644
--- a/client/src/components/User/DiskUsage/Quota/model/index.js
+++ b/client/src/components/User/DiskUsage/Quota/model/index.js
@@ -1 +1 @@
-export { QuotaUsage } from "./QuotaUsage";
+export { QuotaUsage, UserQuotaUsageData } from "./QuotaUsage";

From 8be06f05e0f70e8431d859ae82b8bbedd9f68a99 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 8 Sep 2023 18:47:25 +0200
Subject: [PATCH 5/5] Increase test coverage for DiskUsageSummary

---
 .../User/DiskUsage/DiskUsageSummary.test.ts   | 63 ++++++++++++++++++-
 .../User/DiskUsage/DiskUsageSummary.vue       |  3 +-
 2 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts b/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts
index 40508d6323a5..f6f657de91d1 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts
@@ -4,11 +4,15 @@ import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 
 import { mockFetcher } from "@/schema/__mocks__";
+import { getCurrentUser } from "@/stores/users/queries";
 import { useUserStore } from "@/stores/userStore";
 
+import { UserQuotaUsageData } from "./Quota/model";
+
 import DiskUsageSummary from "./DiskUsageSummary.vue";
 
 jest.mock("@/schema");
+jest.mock("@/stores/users/queries");
 
 const localVue = getLocalVue();
 
@@ -20,17 +24,38 @@ const fakeUserWithQuota = {
     email: "fakeUserEmail",
     tags_used: [],
     isAnonymous: false,
-    total_disk_usage: 1054068,
-    quota_bytes: 1000000000,
-    quota_percent: 0.1,
+    total_disk_usage: 1048576,
+    quota_bytes: 104857600,
+    quota_percent: 1,
     quota_source_label: "Default",
 };
 
+// TODO: Replace this with a mockFetcher when #16608 is merged
+const mockGetCurrentUser = getCurrentUser as jest.Mock;
+mockGetCurrentUser.mockImplementation(() => Promise.resolve(fakeUserWithQuota));
+
+const fakeQuotaUsages: UserQuotaUsageData[] = [
+    {
+        quota_source_label: "Default",
+        quota_bytes: 104857600,
+        total_disk_usage: 1048576,
+    },
+];
+
+const fakeTaskId = "fakeTaskId";
+
 async function mountDiskUsageSummaryWrapper(enableQuotas: boolean) {
     mockFetcher
         .path("/api/configuration")
         .method("get")
         .mock({ data: { enable_quotas: enableQuotas } });
+    mockFetcher.path("/api/users/{user_id}/usage").method("get").mock({ data: fakeQuotaUsages });
+    mockFetcher
+        .path("/api/users/current/recalculate_disk_usage")
+        .method("put")
+        .mock({ status: 200, data: { id: fakeTaskId } });
+    mockFetcher.path("/api/tasks/{task_id}/state").method("get").mock({ data: "SUCCESS" });
+
     const pinia = createPinia();
     const wrapper = mount(DiskUsageSummary, {
         localVue,
@@ -58,4 +83,36 @@ describe("DiskUsageSummary.vue", () => {
         const quotaUsages = wrapper.findAll(quotaUsageClassSelector);
         expect(quotaUsages.length).toBe(1);
     });
+
+    it("should display the correct quota usage", async () => {
+        const enableQuotasInConfig = true;
+        const wrapper = await mountDiskUsageSummaryWrapper(enableQuotasInConfig);
+        const quotaUsage = wrapper.find(quotaUsageClassSelector);
+        expect(quotaUsage.text()).toContain("1 MB");
+    });
+
+    it("should refresh the quota usage when the user clicks the refresh button", async () => {
+        const enableQuotasInConfig = true;
+        const wrapper = await mountDiskUsageSummaryWrapper(enableQuotasInConfig);
+        const quotaUsage = wrapper.find(quotaUsageClassSelector);
+        expect(quotaUsage.text()).toContain("1 MB");
+        const updatedFakeQuotaUsages: UserQuotaUsageData[] = [
+            {
+                quota_source_label: "Default",
+                quota_bytes: 104857600,
+                total_disk_usage: 2097152,
+            },
+        ];
+        mockFetcher.path("/api/users/{user_id}/usage").method("get").mock({ data: updatedFakeQuotaUsages });
+        await wrapper.find("#refresh-disk-usage").trigger("click");
+        await flushPromises();
+        const refreshingAlert = wrapper.find(".refreshing-alert");
+        expect(refreshingAlert.exists()).toBe(true);
+        // Make sure the refresh has finished before checking the quota usage
+        await flushPromises();
+        await flushPromises();
+        // The refreshing alert should disappear and the quota usage should be updated
+        expect(refreshingAlert.exists()).toBe(false);
+        expect(quotaUsage.text()).toContain("2 MB");
+    });
 });
diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.vue b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
index f409ad79228a..2aca40bb11e8 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.vue
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
@@ -105,6 +105,7 @@ onMounted(async () => {
         </b-container>
         <b-container class="text-center mb-5 w-75">
             <button
+                id="refresh-disk-usage"
                 title="Recalculate disk usage"
                 :disabled="isRefreshing"
                 variant="outline-secondary"
@@ -114,7 +115,7 @@ onMounted(async () => {
                 <b-spinner v-if="isRefreshing" small />
                 <span v-else>Refresh</span>
             </button>
-            <b-alert v-if="isRefreshing" class="mt-2" variant="info" show dismissible fade>
+            <b-alert v-if="isRefreshing" class="refreshing-alert mt-2" variant="info" show dismissible fade>
                 Recalculating disk usage... this may take some time, please check back later.
             </b-alert>
         </b-container>