Merge pull request galaxyproject#17119 from davelopez/migrate_job_des…

…tination_params_store_pinia

Migrate job destination parameters store to Pinia

client/src/api/jobs.ts

@@ -1,4 +1,8 @@
-import { fetcher } from "@/api/schema";
+import { components, fetcher } from "@/api/schema";
+
+export type JobDestinationParams = components["schemas"]["JobDestinationParams"];
 
 export const jobLockStatus = fetcher.path("/api/job_lock").method("get").create();
 export const jobLockUpdate = fetcher.path("/api/job_lock").method("put").create();
+
+export const fetchJobDestinationParams = fetcher.path("/api/jobs/{job_id}/destination_params").method("get").create();

client/src/components/JobDestinationParams/JobDestinationParams.test.ts

@@ -0,0 +1,72 @@
+import { shallowMount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { createPinia } from "pinia";
+import { getLocalVue } from "tests/jest/helpers";
+
+import { mockFetcher } from "@/api/schema/__mocks__";
+import { useUserStore } from "@/stores/userStore";
+
+import jobDestinationResponseData from "./testData/jobDestinationResponse.json";
+
+import JobDestinationParams from "./JobDestinationParams.vue";
+
+const JOB_ID = "foo_job_id";
+
+jest.mock("@/api/schema");
+
+const localVue = getLocalVue();
+
+const jobDestinationResponse = jobDestinationResponseData as Record<string, string | null>;
+
+async function mountJobDestinationParams() {
+    mockFetcher.path("/api/jobs/{job_id}/destination_params").method("get").mock({ data: jobDestinationResponse });
+
+    const pinia = createPinia();
+    const wrapper = shallowMount(JobDestinationParams as object, {
+        propsData: {
+            jobId: JOB_ID,
+        },
+        localVue,
+        pinia,
+    });
+
+    const userStore = useUserStore();
+    userStore.currentUser = {
+        email: "admin@email",
+        id: "1",
+        tags_used: [],
+        isAnonymous: false,
+        total_disk_usage: 1048576,
+        is_admin: true,
+    };
+
+    await flushPromises();
+
+    return wrapper;
+}
+
+describe("JobDestinationParams/JobDestinationParams.vue", () => {
+    const responseKeys = Object.keys(jobDestinationResponse);
+    expect(responseKeys.length > 0).toBeTruthy();
+
+    it("should render destination parameters", async () => {
+        const wrapper = await mountJobDestinationParams();
+
+        const paramsTable = wrapper.find("#destination_parameters");
+        expect(paramsTable.exists()).toBe(true);
+        const params = paramsTable.findAll("tbody > tr");
+        expect(params.length).toBe(responseKeys.length);
+
+        for (let counter = 0; counter < responseKeys.length - 1; counter++) {
+            const parameter = params.at(counter).findAll("td");
+            const parameterTitle = parameter.at(0).text();
+            const parameterValue = parameter.at(1).text();
+
+            expect(responseKeys.includes(parameterTitle)).toBeTruthy();
+            // since we render null as an empty string, rendered empty string should always equal null in test data
+            expect(
+                jobDestinationResponse[parameterTitle] === (parameterValue === "" ? null : parameterValue)
+            ).toBeTruthy();
+        }
+    });
+});

client/src/components/JobDestinationParams/JobDestinationParams.vue

@@ -1,3 +1,24 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+
+import { useJobDestinationParametersStore } from "@/stores/jobDestinationParametersStore";
+import { useUserStore } from "@/stores/userStore";
+
+const { currentUser } = storeToRefs(useUserStore());
+const jobDestinationParametersStore = useJobDestinationParametersStore();
+
+interface Props {
+    jobId: string;
+}
+
+const props = defineProps<Props>();
+
+const jobDestinationParams = computed(() => {
+    return jobDestinationParametersStore.getJobDestinationParams(props.jobId);
+});
+</script>
+
 <template>
     <div v-if="currentUser?.is_admin">
         <h2 class="h-md">Destination Parameters</h2>
@@ -11,31 +32,3 @@
         </table>
     </div>
 </template>
-
-<script>
-import { mapState } from "pinia";
-import { mapCacheActions } from "vuex-cache";
-
-import { useUserStore } from "@/stores/userStore";
-
-export default {
-    props: {
-        jobId: {
-            type: String,
-            required: true,
-        },
-    },
-    computed: {
-        ...mapState(useUserStore, ["currentUser"]),
-        jobDestinationParams: function () {
-            return this.$store.getters.jobDestinationParams(this.jobId);
-        },
-    },
-    created: function () {
-        this.fetchJobDestinationParams(this.jobId);
-    },
-    methods: {
-        ...mapCacheActions(["fetchJobDestinationParams"]),
-    },
-};
-</script>

client/src/store/index.js

@@ -13,7 +13,6 @@ import { datasetExtFilesStore } from "./datasetExtFilesStore";
 import { datasetPathDestinationStore } from "./datasetPathDestinationStore";
 import { gridSearchStore } from "./gridSearchStore";
 import { invocationStore } from "./invocationStore";
-import { jobDestinationParametersStore } from "./jobDestinationParametersStore";
 import { syncVuextoGalaxy } from "./syncVuextoGalaxy";
 import { tagStore } from "./tagStore";
 
@@ -42,7 +41,6 @@ export function createStore() {
     const storeConfig = {
         plugins: [createCache(), panelsPersistence.plugin],
         modules: {
-            destinationParameters: jobDestinationParametersStore,
             datasetExtFiles: datasetExtFilesStore,
             datasetPathDestination: datasetPathDestinationStore,
             invocations: invocationStore,

client/src/stores/jobDestinationParametersStore.ts

@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { computed, del, ref, set } from "vue";
+
+import { fetchJobDestinationParams, type JobDestinationParams } from "@/api/jobs";
+
+export const useJobDestinationParametersStore = defineStore("jobDestinationParametersStore", () => {
+    const storedJobDestinationParameters = ref<{ [key: string]: JobDestinationParams }>({});
+    const loadingParameters = ref<{ [key: string]: boolean }>({});
+
+    const getJobDestinationParams = computed(() => {
+        return (jobId: string) => {
+            const destinationParams = storedJobDestinationParameters.value[jobId];
+            if (!destinationParams && !loadingParameters.value[jobId]) {
+                fetchJobDestinationParamsByJobId({ id: jobId });
+            }
+            return destinationParams ?? null;
+        };
+    });
+
+    const isLoadingJobDestinationParams = computed(() => {
+        return (jobId: string) => {
+            return loadingParameters.value[jobId] ?? false;
+        };
+    });
+
+    async function fetchJobDestinationParamsByJobId(params: { id: string }) {
+        const jobId = params.id;
+        set(loadingParameters.value, jobId, true);
+        try {
+            const { data: destinationParams } = await fetchJobDestinationParams({ job_id: jobId });
+            set(storedJobDestinationParameters.value, jobId, destinationParams);
+            return destinationParams;
+        } finally {
+            del(loadingParameters.value, jobId);
+        }
+    }
+
+    return {
+        storedJobDestinationParameters,
+        getJobDestinationParams,
+        isLoadingJobDestinationParams,
+    };
+});

client/src/stores/userStore.ts

@@ -23,6 +23,7 @@ export interface User extends QuotaUsageResponse {
 
 export interface AnonymousUser {
     isAnonymous: true;
+    is_admin?: false;
 }
 
 export type GenericUser = User | AnonymousUser;