Migrate configuration store to Pinia

client/src/components/AboutGalaxy.vue

@@ -12,7 +12,7 @@ import ExternalLink from "@/components/ExternalLink.vue";
 import License from "@/components/License/License.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
-const { config, isLoaded } = useConfig();
+const { config, isConfigLoaded } = useConfig();
 
 const clientBuildDate = __buildTimestamp__ || new Date().toISOString();
 const apiDocsLink = `${getAppRoot()}api/docs`;
@@ -27,7 +27,7 @@ const versionUserDocumentationUrl = computed(() => {
 </script>
 
 <template>
-    <div v-if="isLoaded" class="about-galaxy">
+    <div v-if="isConfigLoaded" class="about-galaxy">
         <Heading h1 :icon="['gxd', 'galaxyLogo']" size="xl">About This Galaxy</Heading>
         <div>
             <!-- Galaxy version (detailed), with a link to the release notes -->

client/src/components/ActivityBar/ActivityBar.test.js

@@ -12,7 +12,7 @@ import mountTarget from "./ActivityBar.vue";
 jest.mock("composables/config");
 useConfig.mockReturnValue({
     config: {},
-    isLoaded: true,
+    isConfigLoaded: true,
 });
 
 jest.mock("vue-router/composables", () => ({

client/src/components/Collections/common/CollectionEditView.vue

@@ -25,7 +25,7 @@
                     </div>
                 </DbKeyProvider>
             </b-tab>
-            <SuitableConvertersProvider :id="collection_id" v-slot="{ item }">
+            <SuitableConvertersProvider :id="collectionId" v-slot="{ item }">
                 <b-tab
                     v-if="item && item.length"
                     title-link-class="collection-edit-convert-datatype-nav"
@@ -34,24 +34,22 @@
                     <SuitableConvertersTab :suitable-converters="item" @clicked-convert="clickedConvert" />
                 </b-tab>
             </SuitableConvertersProvider>
-            <ConfigProvider v-slot="{ config }">
-                <b-tab
-                    v-if="config.enable_celery_tasks"
-                    title-link-class="collection-edit-change-datatype-nav"
-                    @click="updateInfoMessage(expectWaitTimeMessage)">
-                    <template v-slot:title> <FontAwesomeIcon icon="database" /> &nbsp; {{ l("Datatypes") }} </template>
-                    <DatatypesProvider v-slot="{ item, loading }">
-                        <div v-if="loading"><LoadingSpan :message="loadingString" /></div>
-                        <div v-else>
-                            <ChangeDatatypeTab
-                                v-if="item && datatypeFromElements"
-                                :datatype-from-elements="datatypeFromElements"
-                                :datatypes="item"
-                                @clicked-save="clickedDatatypeChange" />
-                        </div>
-                    </DatatypesProvider>
-                </b-tab>
-            </ConfigProvider>
+            <b-tab
+                v-if="isConfigLoaded && config.enable_celery_tasks"
+                title-link-class="collection-edit-change-datatype-nav"
+                @click="updateInfoMessage(expectWaitTimeMessage)">
+                <template v-slot:title> <FontAwesomeIcon icon="database" /> &nbsp; {{ l("Datatypes") }} </template>
+                <DatatypesProvider v-slot="{ item, loading }">
+                    <div v-if="loading"><LoadingSpan :message="loadingString" /></div>
+                    <div v-else>
+                        <ChangeDatatypeTab
+                            v-if="item && datatypeFromElements"
+                            :datatype-from-elements="datatypeFromElements"
+                            :datatypes="item"
+                            @clicked-save="clickedDatatypeChange" />
+                    </div>
+                </DatatypesProvider>
+            </b-tab>
         </b-tabs>
     </div>
 </template>
@@ -62,12 +60,12 @@ import { faBars, faCog, faDatabase, faTable, faUser } from "@fortawesome/free-so
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
 import BootstrapVue from "bootstrap-vue";
-import ConfigProvider from "components/providers/ConfigProvider";
 import { mapState } from "pinia";
 import { prependPath } from "utils/redirect";
 import { errorMessageAsString } from "utils/simple-error";
 import Vue from "vue";
 
+import { useConfig } from "@/composables/config";
 import { useHistoryStore } from "@/stores/historyStore";
 
 import { DatatypesProvider, DbKeyProvider, SuitableConvertersProvider } from "../../providers";
@@ -87,17 +85,20 @@ export default {
         FontAwesomeIcon,
         DbKeyProvider,
         SuitableConvertersProvider,
-        ConfigProvider,
         ChangeDatatypeTab,
         DatatypesProvider,
         LoadingSpan,
     },
     props: {
-        collection_id: {
+        collectionId: {
             type: String,
             required: true,
         },
     },
+    setup() {
+        const { config, isConfigLoaded } = useConfig(true);
+        return { config, isConfigLoaded };
+    },
     data: function () {
         return {
             attributesData: {},
@@ -128,15 +129,15 @@ export default {
             this.infoMessage = strMessage;
         },
         getCollectionDataAndAttributes: async function () {
-            let attributesGet = this.$store.getters.getCollectionAttributes(this.collection_id);
+            let attributesGet = this.$store.getters.getCollectionAttributes(this.collectionId);
             if (attributesGet == null) {
-                await this.$store.dispatch("fetchCollectionAttributes", this.collection_id);
-                attributesGet = this.$store.getters.getCollectionAttributes(this.collection_id);
+                await this.$store.dispatch("fetchCollectionAttributes", this.collectionId);
+                attributesGet = this.$store.getters.getCollectionAttributes(this.collectionId);
             }
             this.attributesData = attributesGet;
         },
         clickedSave: function (attribute, newValue) {
-            const url = prependPath(`/api/dataset_collections/${this.collection_id}/copy`);
+            const url = prependPath(`/api/dataset_collections/${this.collectionId}/copy`);
             const data = {};
             if (attribute == "dbkey") {
                 data["dbkey"] = newValue.id;
@@ -151,7 +152,7 @@ export default {
             const url = prependPath(`/api/tools/${selectedConverter.tool_id}/convert`);
             const data = {
                 src: "hdca",
-                id: this.collection_id,
+                id: this.collectionId,
                 source_type: selectedConverter.original_type,
                 target_type: selectedConverter.target_type,
             };
@@ -164,7 +165,7 @@ export default {
                 items: [
                     {
                         history_content_type: "dataset_collection",
-                        id: this.collection_id,
+                        id: this.collectionId,
                     },
                 ],
                 params: {

client/src/components/DatasetInformation/DatasetDetails.vue

@@ -1,55 +1,53 @@
 <template>
-    <ConfigProvider v-slot="{ config }">
-        <DatasetProvider
-            :id="datasetId"
-            v-slot="{ result: dataset, loading: isDatasetLoading, error: datasetLoadingError }">
-            <div aria-labelledby="dataset-details-heading">
-                <h1 id="dataset-details-heading" class="sr-only">Dataset Details</h1>
-                <LoadingSpan v-if="isDatasetLoading" />
-                <Alert v-else-if="datasetLoadingError" :message="datasetLoadingError" variant="error" />
-                <div v-else>
-                    <JobDetailsProvider
-                        v-if="!isDatasetLoading && dataset.creating_job !== null"
-                        v-slot="{ result: job, loading: isJobLoading }"
-                        :job-id="dataset.creating_job"
-                        auto-refresh>
-                        <div v-if="!isJobLoading" class="details">
-                            <DatasetInformation :hda_id="datasetId" />
-                            <JobParameters dataset_type="hda" :dataset-id="datasetId" />
-                            <JobInformation :job_id="dataset.creating_job" />
-                            <DatasetStorage :dataset-id="datasetId" />
-                            <InheritanceChain :dataset-id="datasetId" :dataset-name="dataset.name" />
-                            <JobMetrics
-                                v-if="config"
-                                :dataset-id="datasetId"
-                                :carbon-intensity="config.carbon_intensity"
-                                :geographical-server-location-name="config.geographical_server_location_name"
-                                :power-usage-effectiveness="config.power_usage_effectiveness"
-                                :should-show-aws-estimate="config.aws_estimate"
-                                :should-show-carbon-emissions-estimates="config.carbon_emissions_estimates" />
-                            <JobDestinationParams v-if="currentUser.is_admin" :job-id="dataset.creating_job" />
-                            <JobDependencies :dependencies="job.dependencies"></JobDependencies>
-                            <div v-if="dataset.peek">
-                                <h2 class="h-md">Dataset Peek</h2>
-                                <div v-html="dataset.peek" />
-                            </div>
-                        </div>
-                    </JobDetailsProvider>
-                    <div v-else-if="!isDatasetLoading" class="details">
+    <DatasetProvider
+        :id="datasetId"
+        v-slot="{ result: dataset, loading: isDatasetLoading, error: datasetLoadingError }">
+        <div aria-labelledby="dataset-details-heading">
+            <h1 id="dataset-details-heading" class="sr-only">Dataset Details</h1>
+            <LoadingSpan v-if="isDatasetLoading" />
+            <Alert v-else-if="datasetLoadingError" :message="datasetLoadingError" variant="error" />
+            <div v-else>
+                <JobDetailsProvider
+                    v-if="!isDatasetLoading && dataset.creating_job !== null"
+                    v-slot="{ result: job, loading: isJobLoading }"
+                    :job-id="dataset.creating_job"
+                    auto-refresh>
+                    <div v-if="!isJobLoading" class="details">
                         <DatasetInformation :hda_id="datasetId" />
+                        <JobParameters dataset_type="hda" :dataset-id="datasetId" />
+                        <JobInformation :job_id="dataset.creating_job" />
                         <DatasetStorage :dataset-id="datasetId" />
-                        <div>
-                            <h2 class="h-md">Job Not Found</h2>
-                            <p>
-                                No job associated with this dataset is recorded in Galaxy. Galaxy cannot determine full
-                                dataset provenance and history for this dataset.
-                            </p>
+                        <InheritanceChain :dataset-id="datasetId" :dataset-name="dataset.name" />
+                        <JobMetrics
+                            v-if="isConfigLoaded"
+                            :dataset-id="datasetId"
+                            :carbon-intensity="config.carbon_intensity"
+                            :geographical-server-location-name="config.geographical_server_location_name"
+                            :power-usage-effectiveness="config.power_usage_effectiveness"
+                            :should-show-aws-estimate="config.aws_estimate"
+                            :should-show-carbon-emissions-estimates="config.carbon_emissions_estimates" />
+                        <JobDestinationParams v-if="currentUser.is_admin" :job-id="dataset.creating_job" />
+                        <JobDependencies :dependencies="job.dependencies"></JobDependencies>
+                        <div v-if="dataset.peek">
+                            <h2 class="h-md">Dataset Peek</h2>
+                            <div v-html="dataset.peek" />
                         </div>
                     </div>
+                </JobDetailsProvider>
+                <div v-else-if="!isDatasetLoading" class="details">
+                    <DatasetInformation :hda_id="datasetId" />
+                    <DatasetStorage :dataset-id="datasetId" />
+                    <div>
+                        <h2 class="h-md">Job Not Found</h2>
+                        <p>
+                            No job associated with this dataset is recorded in Galaxy. Galaxy cannot determine full
+                            dataset provenance and history for this dataset.
+                        </p>
+                    </div>
                 </div>
             </div>
-        </DatasetProvider>
-    </ConfigProvider>
+        </div>
+    </DatasetProvider>
 </template>
 
 <script>
@@ -65,8 +63,8 @@ import JobMetrics from "@/components/JobMetrics/JobMetrics";
 import JobParameters from "@/components/JobParameters/JobParameters";
 import LoadingSpan from "@/components/LoadingSpan";
 import { DatasetProvider } from "@/components/providers";
-import ConfigProvider from "@/components/providers/ConfigProvider";
 import { JobDetailsProvider } from "@/components/providers/JobProvider";
+import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 
 import InheritanceChain from "../InheritanceChain/InheritanceChain";
@@ -85,14 +83,17 @@ export default {
         JobDestinationParams,
         DatasetProvider,
         JobDetailsProvider,
-        ConfigProvider,
     },
     props: {
         datasetId: {
             type: String,
             required: true,
         },
     },
+    setup() {
+        const { config, isConfigLoaded } = useConfig(true);
+        return { config, isConfigLoaded };
+    },
     computed: {
         ...mapState(useUserStore, ["currentUser"]),
     },

client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.test.js

@@ -1,12 +1,16 @@
 import { shallowMount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import MockConfigProvider from "components/providers/MockConfigProvider";
 import flushPromises from "flush-promises";
+import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 
+import { mockFetcher } from "@/schema/__mocks__";
+
 import SelectionOperations from "./SelectionOperations.vue";
 
+jest.mock("@/schema");
+
 const localVue = getLocalVue();
 
 const FAKE_HISTORY_ID = "fake_history_id";
@@ -29,23 +33,20 @@ const getPurgedContentSelection = () => new Map([["FAKE_ID", { purged: true }]])
 const getNonPurgedContentSelection = () => new Map([["FAKE_ID", { purged: false }]]);
 
 async function mountSelectionOperationsWrapper(config) {
-    const wrapper = shallowMount(
-        SelectionOperations,
-        {
-            propsData: {
-                history: FAKE_HISTORY,
-                filterText: "",
-                contentSelection: new Map(),
-                selectionSize: 1,
-                isQuerySelection: false,
-                totalItemsInQuery: 5,
-            },
-            stubs: {
-                ConfigProvider: MockConfigProvider(config),
-            },
+    mockFetcher.path("/api/configuration").method("get").mock({ data: config });
+    const pinia = createPinia();
+    const wrapper = shallowMount(SelectionOperations, {
+        propsData: {
+            history: FAKE_HISTORY,
+            filterText: "",
+            contentSelection: new Map(),
+            selectionSize: 1,
+            isQuerySelection: false,
+            totalItemsInQuery: 5,
         },
-        localVue
-    );
+        localVue,
+        pinia,
+    });
     await flushPromises();
     return wrapper;
 }