Replace QuotaUsageProvider with Pinia store

Removes the old quota source usage provider component and introduces a Pinia store to manage quota usage state and fetching logic across the application. Adopts the store pattern throughout all relevant components, replacing provider logic and updating all quota usage retrieval and reactivity to use the store. Centralizes state, simplifies usage, and makes quota usage handling more maintainable and testable. Updates tests and supporting files to mock or use the store as appropriate.

Author: davelopez

client/src/components/Common/FilterMenuDropdown.vue

@@ -4,9 +4,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BDropdown, BDropdownItem, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";
 
-import { fetchCurrentUserQuotaUsages, type QuotaUsage } from "@/api/users";
+import type { QuotaUsage } from "@/api/users";
+import { useQuotaUsageStore } from "@/stores/quotaUsageStore";
 import type { FilterType, ValidFilter } from "@/utils/filtering";
-import { errorMessageAsString } from "@/utils/simple-error";
 import { capitalizeFirstLetter } from "@/utils/strings";
 
 import GModal from "../BaseComponents/GModal.vue";
@@ -77,25 +77,22 @@ function onHelp(_: string, value: string) {
 }
 
 // Quota Source refs and operations
-const quotaUsages = ref<QuotaUsage[]>([]);
-const errorMessage = ref<string>();
+const quotaUsageStore = useQuotaUsageStore();
+const quotaUsages = computed<QuotaUsage[]>(() => quotaUsageStore.quotaUsages ?? []);
+
 async function loadQuotaUsages() {
-    try {
-        quotaUsages.value = await fetchCurrentUserQuotaUsages();
-
-        // if the propValue is a string, find the corresponding QuotaUsage object and update the localValue
-        if (propValue.value && typeof propValue.value === "string") {
-            localValue.value = quotaUsages.value.find(
-                (quotaUsage) => props.filter.handler.converter!(quotaUsage) === propValue.value,
-            );
-        }
-    } catch (e) {
-        errorMessage.value = errorMessageAsString(e);
+    await quotaUsageStore.loadQuotaUsages();
+
+    // if the propValue is a string, find the corresponding QuotaUsage object and update the localValue
+    if (propValue.value && typeof propValue.value === "string") {
+        localValue.value = quotaUsages.value.find(
+            (quotaUsage) => props.filter.handler.converter!(quotaUsage) === propValue.value,
+        );
     }
 }
 
 const hasMultipleQuotaSources = computed<boolean>(() => {
-    return !!(quotaUsages.value && quotaUsages.value.length > 1);
+    return quotaUsages.value.length > 1;
 });
 
 onMounted(async () => {

client/src/components/ConfigTemplates/SourceOptionCard.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { IconDefinition } from "font-awesome-6";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 
 import type { UserConcreteObjectStoreModel } from "@/api";
 import type { FileSourceTemplateSummary } from "@/api/fileSources";
 import type { ObjectStoreTemplateSummary } from "@/api/objectStores.templates";
 import type { CardAction } from "@/components/Common/GCard.types";
-import { QuotaSourceUsageProvider } from "@/components/User/DiskUsage/Quota/QuotaUsageProvider.js";
+import { useQuotaUsageStore } from "@/stores/quotaUsageStore";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GCard from "@/components/Common/GCard.vue";
@@ -69,11 +69,32 @@ const buttonTooltip = computed(() => {
 });
 const quotaSourceLabel = computed(() => {
     if ("quota" in props.sourceOption && props.sourceOption.quota.enabled) {
-        return props.sourceOption.quota.source;
+        return props.sourceOption.quota.source ?? null;
     }
 
-    return "";
+    return null;
 });
+const quotaSourceKey = computed(() => quotaSourceLabel.value ?? "__null__");
+
+const quotaUsageStore = useQuotaUsageStore();
+
+const isLoadingUsage = computed(() => Boolean(quotaUsageStore.loadingBySource[quotaSourceKey.value]));
+const quotaUsage = computed(() => quotaUsageStore.getQuotaUsageBySourceLabel(quotaSourceLabel.value) ?? null);
+
+watch(
+    () => {
+        const hasQuota = "quota" in props.sourceOption && props.sourceOption.quota.enabled;
+        return [hasQuota, quotaSourceLabel.value] as const;
+    },
+    ([hasQuota, sourceLabel]) => {
+        if (!hasQuota) {
+            return;
+        }
+
+        void quotaUsageStore.loadQuotaUsageForSource(sourceLabel, true);
+    },
+    { immediate: true },
+);
 
 const primaryActions = computed<CardAction[]>(() => [
     {
@@ -118,14 +139,10 @@ const primaryActions = computed<CardAction[]>(() => [
         </template>
 
         <template v-if="'quota' in props.sourceOption && props.sourceOption.quota.enabled" v-slot:tags>
-            <QuotaSourceUsageProvider
-                ref="quotaUsageProvider"
-                v-slot="{ result: quotaUsage, loading: isLoadingUsage }"
-                class="w-100"
-                :quota-source-label="quotaSourceLabel">
+            <div class="w-100">
                 <LoadingSpan v-if="isLoadingUsage" message="Loading usage" />
                 <QuotaUsageBar v-else-if="quotaUsage" :quota-usage="quotaUsage" :embedded="true" />
-            </QuotaSourceUsageProvider>
+            </div>
         </template>
     </GCard>
 </template>

client/src/components/ObjectStore/DescribeObjectStore.test.js

@@ -1,10 +1,13 @@
+import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/vitest/helpers";
 import { shallowMount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { PiniaVuePlugin, setActivePinia } from "pinia";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import DescribeObjectStore from "./DescribeObjectStore.vue";
 
 const localVue = getLocalVue();
+localVue.use(PiniaVuePlugin);
 
 const DESCRIPTION = "My cool **markdown**";
 
@@ -31,11 +34,18 @@ const TEST_STORAGE_API_RESPONSE_WITH_NAME = {
 
 describe("DescribeObjectStore.vue", () => {
     let wrapper;
+    let pinia;
+
+    beforeEach(() => {
+        pinia = createTestingPinia({ createSpy: vi.fn });
+        setActivePinia(pinia);
+    });
 
     async function mountWithResponse(response) {
         wrapper = shallowMount(DescribeObjectStore, {
             propsData: { storageInfo: response, what: "where i am throwing my test dataset" },
             localVue,
+            pinia,
         });
     }
 

client/src/components/ObjectStore/DescribeObjectStore.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, watch } from "vue";
 
-import { QuotaSourceUsageProvider } from "@/components/User/DiskUsage/Quota/QuotaUsageProvider.js";
+import { useQuotaUsageStore } from "@/stores/quotaUsageStore";
 
 import type { AnyStorageDescription } from "./types";
 
@@ -22,14 +22,22 @@ const isPrivate = computed(() => props.storageInfo.private);
 const badges = computed(() => props.storageInfo.badges);
 const userDefined = computed(() => props.storageInfo.object_store_id?.startsWith("user_objects://"));
 
-const quotaUsageProvider = ref(null);
+const quotaUsageStore = useQuotaUsageStore();
+const quotaSourceKey = computed(() => quotaSourceLabel.value ?? "__null__");
+const isLoadingUsage = computed(() => Boolean(quotaUsageStore.loadingBySource[quotaSourceKey.value]));
+const quotaUsage = computed(() => quotaUsageStore.getQuotaUsageBySourceLabel(quotaSourceLabel.value) ?? null);
 
-watch(props, async () => {
-    if (quotaUsageProvider.value) {
-        // @ts-ignore
-        quotaUsageProvider.value.update({ quotaSourceLabel: quotaSourceLabel.value });
-    }
-});
+watch(
+    () => [props.storageInfo.quota?.enabled, quotaSourceLabel.value] as const,
+    ([enabled, sourceLabel]) => {
+        if (!enabled) {
+            return;
+        }
+
+        void quotaUsageStore.loadQuotaUsageForSource(sourceLabel, true);
+    },
+    { immediate: true },
+);
 
 defineExpose({
     isPrivate,
@@ -59,14 +67,10 @@ export default {
             >.
         </div>
         <ObjectStoreBadges :badges="badges"> </ObjectStoreBadges>
-        <QuotaSourceUsageProvider
-            v-if="storageInfo.quota && storageInfo.quota.enabled"
-            ref="quotaUsageProvider"
-            v-slot="{ result: quotaUsage, loading: isLoadingUsage }"
-            :quota-source-label="quotaSourceLabel">
+        <div v-if="storageInfo.quota && storageInfo.quota.enabled">
             <b-spinner v-if="isLoadingUsage" />
             <QuotaUsageBar v-else-if="quotaUsage" :quota-usage="quotaUsage" :embedded="true" />
-        </QuotaSourceUsageProvider>
+        </div>
         <div v-else>Galaxy has no quota configured for this storage.</div>
         <ConfigurationMarkdown
             v-if="storageInfo.description"

client/src/components/ObjectStore/ShowSelectedObjectStore.test.js

@@ -1,7 +1,8 @@
+import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
 import { useServerMock } from "@/api/client/__mocks__";
 
@@ -44,19 +45,23 @@ const USER_OBJECT_STORE_DATA = {
     variables: {},
 };
 
-describe("ShowSelectedObjectStore", () => {
-    let wrapper;
+function mountWithPreferredStoreId(preferredObjectStoreId) {
+    const wrapper = mount(ShowSelectedObjectStore, {
+        propsData: { preferredObjectStoreId, forWhat: "Data goes into..." },
+        localVue,
+        pinia: createTestingPinia({ createSpy: vi.fn }),
+    });
+    return wrapper;
+}
 
+describe("ShowSelectedObjectStore", () => {
     it("should show a loading message and then a DescribeObjectStore component", async () => {
         server.use(
             http.get("/api/object_stores/{object_store_id}", ({ response }) => {
                 return response(200).json(OBJECT_STORE_DATA);
             }),
         );
-        wrapper = mount(ShowSelectedObjectStore, {
-            propsData: { preferredObjectStoreId: TEST_OBJECT_ID, forWhat: "Data goes into..." },
-            localVue,
-        });
+        const wrapper = mountWithPreferredStoreId(TEST_OBJECT_ID);
         let loadingEl = wrapper.findComponent(LoadingSpan);
         expect(loadingEl.exists()).toBeTruthy();
         expect(loadingEl.find(".loading-message").text()).toContain("Loading Galaxy storage details");
@@ -73,10 +78,7 @@ describe("ShowSelectedObjectStore", () => {
             }),
         );
 
-        wrapper = mount(ShowSelectedObjectStore, {
-            propsData: { preferredObjectStoreId: TEST_USER_OBJECT_STORE_ID, forWhat: "Data goes into..." },
-            localVue,
-        });
+        const wrapper = mountWithPreferredStoreId(TEST_USER_OBJECT_STORE_ID);
         let loadingEl = wrapper.findComponent(LoadingSpan);
         expect(loadingEl.exists()).toBeTruthy();
         expect(loadingEl.find(".loading-message").text()).toContain("Loading Galaxy storage details");

client/src/components/User/DiskUsage/DiskUsageSummary.vue

@@ -5,9 +5,9 @@ import { storeToRefs } from "pinia";
 import { computed, onMounted, ref, watch } from "vue";
 
 import { type AsyncTaskResultSummary, GalaxyApi } from "@/api";
-import { fetchCurrentUserQuotaUsages, type QuotaUsage } from "@/api/users";
 import { useConfig } from "@/composables/config";
 import { useTaskMonitor } from "@/composables/taskMonitor";
+import { useQuotaUsageStore } from "@/stores/quotaUsageStore";
 import { useUserStore } from "@/stores/userStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 import { bytesToString } from "@/utils/utils";
@@ -17,9 +17,10 @@ import QuotaUsageSummary from "@/components/User/DiskUsage/Quota/QuotaUsageSumma
 const { config, isConfigLoaded } = useConfig(true);
 const userStore = useUserStore();
 const { currentUser } = storeToRefs(userStore);
+const quotaUsageStore = useQuotaUsageStore();
 const { isRunning: isRecalculateTaskRunning, waitForTask } = useTaskMonitor();
 
-const quotaUsages = ref<QuotaUsage[]>();
+const quotaUsages = computed(() => quotaUsageStore?.quotaUsages);
 const errorMessage = ref<string>();
 const isRecalculating = ref<boolean>(false);
 
@@ -39,9 +40,8 @@ watch(
     (newValue, oldValue) => {
         // 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();
+            userStore.refreshUser();
+            quotaUsageStore.applyRecalculationCompletedRefresh();
         }
     },
 );
@@ -76,17 +76,12 @@ async function onRefresh() {
     }
 }
 
-async function loadQuotaUsages() {
+onMounted(async () => {
     try {
-        const currentUserQuotaUsages = await fetchCurrentUserQuotaUsages();
-        quotaUsages.value = currentUserQuotaUsages;
+        await quotaUsageStore.loadQuotaUsages();
     } catch (error) {
         errorMessage.value = errorMessageAsString(error);
     }
-}
-
-onMounted(async () => {
-    await loadQuotaUsages();
 });
 </script>
 <template>

client/src/components/User/DiskUsage/Management/StorageManager.vue

@@ -2,6 +2,8 @@
 import { ref } from "vue";
 
 import { useConfig } from "@/composables/config";
+import { useQuotaUsageStore } from "@/stores/quotaUsageStore";
+import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 import { wait } from "@/utils/utils";
 
@@ -25,6 +27,8 @@ const breadcrumbItems = [
 
 const { config } = useConfig();
 const { cleanupCategories } = useCleanupCategories();
+const quotaUsageStore = useQuotaUsageStore();
+const userStore = useUserStore();
 
 const currentOperation = ref<CleanupOperation>();
 const currentTotalItems = ref(0);
@@ -49,6 +53,8 @@ async function onConfirmCleanupSelected(selectedItems: CleanableItem[]) {
         cleanupResult.value = await currentOperation.value.cleanupItems(selectedItems);
         if (cleanupResult.value.hasUpdatedResults) {
             refreshOperationId.value = currentOperation.value.id.toString();
+            quotaUsageStore.requestRefreshDebounced();
+            userStore.refreshUser();
         }
     }
 }