Merge pull request #22640 from davelopez/add_quota_store

Replace QuotaUsageProvider with Pinia store + enhancements

Author: mvdbeek

client/src/api/index.ts

@@ -275,6 +275,13 @@ export interface AnonymousUser extends AnonymousUserModel {
 /** Represents any user, including anonymous users or session-less (null) users.**/
 export type AnyUser = RegisteredUser | AnonymousUser | null;
 
+export function toAnyUser(user: UserModel): AnyUser {
+    if ("email" in user) {
+        return { ...user, isAnonymous: false } as RegisteredUser;
+    }
+    return { ...user, isAnonymous: true } as AnonymousUser;
+}
+
 export function isRegisteredUser(user: AnyUser | UserModel): user is RegisteredUser {
     return user !== null && "email" in user;
 }

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();
         }
     }
 }