diff --git a/client/src/api/datasets.ts b/client/src/api/datasets.ts
index 642aa0c03a22..63b8b5714d9c 100644
--- a/client/src/api/datasets.ts
+++ b/client/src/api/datasets.ts
@@ -38,6 +38,8 @@ export async function getDatasets(options: GetDatasetsOptions = {}) {
 
 export const fetchDataset = fetcher.path("/api/datasets/{dataset_id}").method("get").create();
 
+export const fetchDatasetStorage = fetcher.path("/api/datasets/{dataset_id}/storage").method("get").create();
+
 export async function fetchDatasetDetails(params: { id: string }): Promise<DatasetDetails> {
     const { data } = await fetchDataset({ dataset_id: params.id, view: "detailed" });
     // We know that the server will return a DatasetDetails object because of the view parameter
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index 0003833819fa..83da2479adbc 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -27,6 +27,11 @@ export type DatasetSummary = components["schemas"]["HDASummary"];
  */
 export type DatasetDetails = components["schemas"]["HDADetailed"];
 
+/**
+ * Contains storage (object store, quota, etc..) details for a dataset.
+ */
+export type DatasetStorageDetails = components["schemas"]["DatasetStorageDetails"];
+
 /**
  * Represents a HistoryDatasetAssociation with either summary or detailed information.
  */
diff --git a/client/src/api/schema/__mocks__/fetcher.ts b/client/src/api/schema/__mocks__/fetcher.ts
index 5af41cc7e146..56c8a56ed3ef 100644
--- a/client/src/api/schema/__mocks__/fetcher.ts
+++ b/client/src/api/schema/__mocks__/fetcher.ts
@@ -48,7 +48,8 @@ function getMockReturn(path: Path, method: Method, args: any[]) {
         }
     }
 
-    return null;
+    // if no mock has been setup, never resolve API request
+    return new Promise(() => {});
 }
 
 function setMockReturn(path: Path | RegExp, method: Method, value: any) {
diff --git a/client/src/api/schema/schema.ts b/client/src/api/schema/schema.ts
index 3a2bbc468ebb..3207d1fb351c 100644
--- a/client/src/api/schema/schema.ts
+++ b/client/src/api/schema/schema.ts
@@ -2925,6 +2925,19 @@ export interface components {
             private: boolean;
             quota: components["schemas"]["QuotaModel"];
         };
+        /** ConcreteObjectStoreQuotaSourceDetails */
+        ConcreteObjectStoreQuotaSourceDetails: {
+            /**
+             * Enabled
+             * @description Whether the object store tracks quota on the data (independent of Galaxy's configuration)
+             */
+            enabled: boolean;
+            /**
+             * Source
+             * @description The quota source label corresponding to the object store the dataset is stored in (or would be stored in)
+             */
+            source: string | null;
+        };
         /** ContentsObject */
         ContentsObject: {
             /**
@@ -3775,9 +3788,9 @@ export interface components {
         DatasetStorageDetails: {
             /**
              * Badges
-             * @description A mapping of object store labels to badges describing object store properties.
+             * @description A list of badges describing object store properties for concrete object store dataset is stored in.
              */
-            badges: Record<string, never>[];
+            badges: components["schemas"]["BadgeDict"][];
             /**
              * Dataset State
              * @description The model state of the supplied dataset instance.
@@ -3808,11 +3821,8 @@ export interface components {
              * @description The percentage indicating how full the store is.
              */
             percent_used: number | null;
-            /**
-             * Quota
-             * @description Information about quota sources around dataset storage.
-             */
-            quota: Record<string, never>;
+            /** @description Information about quota sources around dataset storage. */
+            quota: components["schemas"]["ConcreteObjectStoreQuotaSourceDetails"];
             /**
              * Shareable
              * @description Is this dataset shareable.
diff --git a/client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js b/client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js
index f8218abbe934..1a8a5a7cf7f1 100644
--- a/client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js
+++ b/client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js
@@ -1,11 +1,13 @@
 import { shallowMount } from "@vue/test-utils";
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
 import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
 
+import { mockFetcher } from "@/api/schema/__mocks__";
+
 import DatasetStorage from "./DatasetStorage";
 
+jest.mock("@/api/schema");
+
 const localVue = getLocalVue();
 
 const TEST_STORAGE_API_RESPONSE_WITHOUT_ID = {
@@ -13,17 +15,12 @@ const TEST_STORAGE_API_RESPONSE_WITHOUT_ID = {
     private: false,
 };
 const TEST_DATASET_ID = "1";
-const TEST_STORAGE_URL = `/api/datasets/${TEST_DATASET_ID}/storage`;
+const STORAGE_FETCH_URL = "/api/datasets/{dataset_id}/storage";
 const TEST_ERROR_MESSAGE = "Opps all errors.";
 
 describe("DatasetStorage.vue", () => {
-    let axiosMock;
     let wrapper;
 
-    beforeEach(async () => {
-        axiosMock = new MockAdapter(axios);
-    });
-
     function mount() {
         wrapper = shallowMount(DatasetStorage, {
             propsData: { datasetId: TEST_DATASET_ID },
@@ -32,7 +29,7 @@ describe("DatasetStorage.vue", () => {
     }
 
     async function mountWithResponse(response) {
-        axiosMock.onGet(TEST_STORAGE_URL).reply(200, response);
+        mockFetcher.path(STORAGE_FETCH_URL).method("get").mock({ data: response });
         mount();
         await flushPromises();
     }
@@ -45,9 +42,12 @@ describe("DatasetStorage.vue", () => {
     });
 
     it("test error rendering...", async () => {
-        axiosMock.onGet(TEST_STORAGE_URL).reply(400, {
-            err_msg: TEST_ERROR_MESSAGE,
-        });
+        mockFetcher
+            .path(STORAGE_FETCH_URL)
+            .method("get")
+            .mock(() => {
+                throw Error(TEST_ERROR_MESSAGE);
+            });
         mount();
         await flushPromises();
         expect(wrapper.findAll(".error").length).toBe(1);
@@ -59,10 +59,5 @@ describe("DatasetStorage.vue", () => {
         await mountWithResponse(TEST_STORAGE_API_RESPONSE_WITHOUT_ID);
         expect(wrapper.findAll("loadingspan-stub").length).toBe(0);
         expect(wrapper.findAll("describeobjectstore-stub").length).toBe(1);
-        expect(wrapper.vm.storageInfo.private).toEqual(false);
-    });
-
-    afterEach(() => {
-        axiosMock.restore();
     });
 });
diff --git a/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue b/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
index 6e8dd47508e7..90706afe28ea 100644
--- a/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
+++ b/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
@@ -1,3 +1,63 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+import { DatasetStorageDetails } from "@/api";
+import { fetchDatasetStorage } from "@/api/datasets";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import DescribeObjectStore from "@/components/ObjectStore/DescribeObjectStore.vue";
+
+interface DatasetStorageProps {
+    datasetId: string;
+    datasetType?: "hda" | "ldda";
+    includeTitle?: boolean;
+}
+
+const props = withDefaults(defineProps<DatasetStorageProps>(), {
+    datasetType: "hda",
+    includeTitle: true,
+});
+
+const storageInfo = ref<DatasetStorageDetails | null>(null);
+const errorMessage = ref<string | null>(null);
+
+const discarded = computed(() => {
+    return storageInfo.value?.dataset_state == "discarded";
+});
+
+const deferred = computed(() => {
+    return storageInfo.value?.dataset_state == "deferred";
+});
+
+const sourceUri = computed(() => {
+    const sources = storageInfo.value?.sources;
+    if (!sources) {
+        return null;
+    }
+    const rootSources = sources.filter((source) => !source.extra_files_path);
+    if (rootSources.length == 0) {
+        return null;
+    }
+    return rootSources[0]?.source_uri;
+});
+
+watch(
+    props,
+    async () => {
+        const datasetId = props.datasetId;
+        const datasetType = props.datasetType;
+        try {
+            const response = await fetchDatasetStorage({ dataset_id: datasetId, hda_ldda: datasetType });
+            storageInfo.value = response.data;
+        } catch (error) {
+            errorMessage.value = errorMessageAsString(error);
+        }
+    },
+    { immediate: true }
+);
+</script>
+
 <template>
     <div>
         <h2 v-if="includeTitle" class="h-md">Dataset Storage</h2>
@@ -20,72 +80,3 @@
         </div>
     </div>
 </template>
-
-<script>
-import axios from "axios";
-import LoadingSpan from "components/LoadingSpan";
-import DescribeObjectStore from "components/ObjectStore/DescribeObjectStore";
-import { getAppRoot } from "onload/loadConfig";
-import { errorMessageAsString } from "utils/simple-error";
-
-export default {
-    components: {
-        DescribeObjectStore,
-        LoadingSpan,
-    },
-    props: {
-        datasetId: {
-            type: String,
-        },
-        datasetType: {
-            type: String,
-            default: "hda",
-        },
-        includeTitle: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    data() {
-        return {
-            storageInfo: null,
-            errorMessage: null,
-        };
-    },
-    computed: {
-        discarded() {
-            return this.storageInfo.dataset_state == "discarded";
-        },
-        deferred() {
-            return this.storageInfo.dataset_state == "deferred";
-        },
-        sourceUri() {
-            const sources = this.storageInfo.sources;
-            if (!sources) {
-                return null;
-            }
-            const rootSources = sources.filter((source) => !source.extra_files_path);
-            if (rootSources.length == 0) {
-                return null;
-            }
-            return rootSources[0].source_uri;
-        },
-    },
-    created() {
-        const datasetId = this.datasetId;
-        const datasetType = this.datasetType;
-        axios
-            .get(`${getAppRoot()}api/datasets/${datasetId}/storage`, { hda_ldda: datasetType })
-            .then(this.handleResponse)
-            .catch((errorMessage) => {
-                this.errorMessage = errorMessageAsString(errorMessage);
-            });
-    },
-    methods: {
-        handleResponse(response) {
-            const storageInfo = response.data;
-            this.storageInfo = storageInfo;
-        },
-    },
-};
-</script>
diff --git a/client/src/components/HistoryExport/Index.vue b/client/src/components/HistoryExport/Index.vue
index dfbe79cf5dc9..2b1552006b54 100644
--- a/client/src/components/HistoryExport/Index.vue
+++ b/client/src/components/HistoryExport/Index.vue
@@ -5,6 +5,7 @@ import { useFileSources } from "@/composables/fileSources";
 
 import ToLink from "./ToLink.vue";
 import ToRemoteFile from "./ToRemoteFile.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const { isLoading: initializingFileSources, hasWritable: hasWritableFileSources } = useFileSources();
 
@@ -18,7 +19,7 @@ const props = defineProps<ExportHistoryProps>();
     <span class="history-export-component">
         <h1 class="h-lg">Export history archive</h1>
         <span v-if="initializingFileSources">
-            <loading-span message="Loading file sources configuration from Galaxy server." />
+            <LoadingSpan message="Loading file sources configuration from Galaxy server." />
         </span>
         <span v-else-if="hasWritableFileSources">
             <BCard no-body>
diff --git a/client/src/components/LoadingSpan.vue b/client/src/components/LoadingSpan.vue
index c4c3b9d26b5e..3babd0a618d7 100644
--- a/client/src/components/LoadingSpan.vue
+++ b/client/src/components/LoadingSpan.vue
@@ -6,6 +6,7 @@
 </template>
 <script>
 export default {
+    name: "LoadingSpan",
     props: {
         classes: {
             type: String,
diff --git a/client/src/components/ObjectStore/DescribeObjectStore.vue b/client/src/components/ObjectStore/DescribeObjectStore.vue
index 3fc63aed7ce1..f8fffc5e4d5e 100644
--- a/client/src/components/ObjectStore/DescribeObjectStore.vue
+++ b/client/src/components/ObjectStore/DescribeObjectStore.vue
@@ -26,6 +26,12 @@ defineExpose({
 });
 </script>
 
+<script lang="ts">
+export default {
+    name: "DescribeObjectStore",
+};
+</script>
+
 <template>
     <div>
         <div>
diff --git a/client/src/components/ObjectStore/ShowSelectedObjectStore.test.js b/client/src/components/ObjectStore/ShowSelectedObjectStore.test.js
index b0a29cafe4f6..c20e3b861656 100644
--- a/client/src/components/ObjectStore/ShowSelectedObjectStore.test.js
+++ b/client/src/components/ObjectStore/ShowSelectedObjectStore.test.js
@@ -27,10 +27,6 @@ describe("ShowSelectedObjectStore", () => {
         wrapper = mount(ShowSelectedObjectStore, {
             propsData: { preferredObjectStoreId: TEST_OBJECT_ID, forWhat: "Data goes into..." },
             localVue,
-            stubs: {
-                LoadingSpan: true,
-                DescribeObjectStore: true,
-            },
         });
         let loadingEl = wrapper.findComponent(LoadingSpan);
         expect(loadingEl.exists()).toBeTruthy();
diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts b/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts
index 6ed02898967c..06565d77b385 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.test.ts
@@ -1,6 +1,4 @@
 import { mount } from "@vue/test-utils";
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
@@ -69,16 +67,6 @@ async function mountDiskUsageSummaryWrapper(enableQuotas: boolean) {
 }
 
 describe("DiskUsageSummary.vue", () => {
-    let axiosMock: MockAdapter;
-
-    beforeEach(async () => {
-        axiosMock = new MockAdapter(axios);
-    });
-
-    afterEach(async () => {
-        axiosMock.reset();
-    });
-
     it("should display basic disk usage summary if quotas are NOT enabled", async () => {
         const enableQuotasInConfig = false;
         const wrapper = await mountDiskUsageSummaryWrapper(enableQuotasInConfig);
@@ -115,7 +103,7 @@ describe("DiskUsageSummary.vue", () => {
             },
         ];
         mockFetcher.path("/api/users/{user_id}/usage").method("get").mock({ data: updatedFakeQuotaUsages });
-        axiosMock.onGet(`/api/tasks/${FAKE_TASK_ID}/state`).reply(200, "SUCCESS");
+        mockFetcher.path("/api/tasks/{task_id}/state").method("get").mock({ data: "SUCCESS" });
         const refreshButton = wrapper.find("#refresh-disk-usage");
         await refreshButton.trigger("click");
         const refreshingAlert = wrapper.find(".refreshing-alert");
diff --git a/lib/galaxy/webapps/galaxy/services/datasets.py b/lib/galaxy/webapps/galaxy/services/datasets.py
index 074996d89fc5..442e4d44c898 100644
--- a/lib/galaxy/webapps/galaxy/services/datasets.py
+++ b/lib/galaxy/webapps/galaxy/services/datasets.py
@@ -48,6 +48,7 @@
 )
 from galaxy.managers.lddas import LDDAManager
 from galaxy.model.base import transaction
+from galaxy.objectstore.badges import BadgeDict
 from galaxy.schema import (
     FilterQueryParams,
     SerializationParams,
@@ -145,9 +146,11 @@ class DatasetStorageDetails(Model):
     shareable: bool = Field(
         description="Is this dataset shareable.",
     )
-    quota: dict = Field(description="Information about quota sources around dataset storage.")
-    badges: List[Dict[str, Any]] = Field(
-        description="A mapping of object store labels to badges describing object store properties."
+    quota: ConcreteObjectStoreQuotaSourceDetails = Field(
+        description="Information about quota sources around dataset storage."
+    )
+    badges: List[BadgeDict] = Field(
+        description="A list of badges describing object store properties for concrete object store dataset is stored in."
     )
 
 
@@ -418,15 +421,14 @@ def show_storage(
             # not implemented on nestedobjectstores yet.
             percent_used = None
         except FileNotFoundError:
-            # uninitalized directory (emtpy) disk object store can cause this...
+            # uninitialized directory (empty) disk object store can cause this...
             percent_used = None
 
         quota_source = dataset.quota_source_info
         quota = ConcreteObjectStoreQuotaSourceDetails(
             source=quota_source.label,
             enabled=quota_source.use,
-        ).model_dump()  # TODO: could we bypass the dump?
-
+        )
         dataset_state = dataset.state
         hashes = [h.to_dict() for h in dataset.hashes]
         sources = [s.to_dict() for s in dataset.sources]