Merge pull request #16928 from ahmedhamidawan/change_api_tool_panel_r…

…oute

Change `api/tool_panel` to `api/tool_panels/...`

client/src/components/Panels/ToolBox.test.js

@@ -15,8 +15,11 @@ useConfig.mockReturnValue({
 });
 
 describe("ToolBox", () => {
-    const toolsMock = toolsList.tools;
-    const toolPanelMock = toolsListInPanel.default;
+    const toolsMock = toolsList.reduce((acc, item) => {
+        acc[item.id] = item;
+        return acc;
+    }, {});
+    const toolPanelMock = toolsListInPanel;
     const resultsMock = ["liftOver1", "__FILTER_EMPTY_DATASETS__", "__UNZIP_COLLECTION__"];
     let axiosMock;
 
@@ -26,9 +29,9 @@ describe("ToolBox", () => {
 
     it("test filter functions correctly matching: (1) Tools store array-of-objects with (2) Results array", async () => {
         axiosMock
-            .onGet(`/api/tool_panel`)
+            .onGet(`/api/tool_panels/default`)
             .replyOnce(200, toolsListInPanel)
-            .onGet(`/api/tool_panel?in_panel=False`)
+            .onGet(`/api/tools?in_panel=False`)
             .replyOnce(200, toolsMock)
             .onGet(/api\/tools?.*/)
             .replyOnce(200, resultsMock);

client/src/components/Panels/ToolPanel.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import axios from "axios";
 import { storeToRefs } from "pinia";
-import { ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 
-import { useConfig } from "@/composables/config";
+import { getAppRoot } from "@/onload";
 import { useToolStore } from "@/stores/toolStore";
 import localize from "@/utils/localization";
 
@@ -26,49 +27,55 @@ const emit = defineEmits<{
     (e: "onInsertWorkflowSteps", workflowId: string, workflowStepCount: number | undefined): void;
 }>();
 
-const { isConfigLoaded, config } = useConfig();
+const arePanelsFetched = ref(false);
+const defaultPanelView = ref("");
 const toolStore = useToolStore();
 const { currentPanelView, isPanelPopulated } = storeToRefs(toolStore);
 
 const query = ref("");
 const panelViews = ref(null);
 const showAdvanced = ref(false);
 
+onMounted(async () => {
+    await axios
+        .get(`${getAppRoot()}api/tool_panels`)
+        .then(async ({ data }) => {
+            const { default_panel_view, views } = data;
+            defaultPanelView.value = default_panel_view;
+            panelViews.value = views;
+            await initializeTools();
+        })
+        .catch((error) => {
+            console.error(error);
+        })
+        .finally(() => {
+            arePanelsFetched.value = true;
+        });
+});
+
 watch(
     () => currentPanelView.value,
     () => {
         query.value = "";
     }
 );
 
-// as soon as config is loaded, load tools
-watch(
-    () => isConfigLoaded.value,
-    async (newVal) => {
-        if (newVal) {
-            await loadTools();
-        }
-    },
-    { immediate: true }
-);
-
 // if currentPanelView ever becomes null || "", load tools
 watch(
     () => currentPanelView.value,
     async (newVal) => {
-        if (!newVal && isConfigLoaded.value) {
-            await loadTools();
+        if (!newVal && arePanelsFetched.value) {
+            await initializeTools();
         }
     }
 );
 
-async function loadTools() {
-    panelViews.value = panelViews.value === null ? config.value.panel_views : panelViews.value;
+async function initializeTools() {
     try {
         await toolStore.fetchTools();
-        await toolStore.initCurrentPanelView(config.value.default_panel_view);
+        await toolStore.initCurrentPanelView(defaultPanelView.value);
     } catch (error: any) {
-        console.error("ToolPanel - Load tools error:", error);
+        console.error("ToolPanel - Intialize error:", error);
     }
 }
 
@@ -94,7 +101,7 @@ function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | u
 </script>
 
 <template>
-    <div v-if="isConfigLoaded" class="unified-panel" aria-labelledby="toolbox-heading">
+    <div v-if="arePanelsFetched" class="unified-panel" aria-labelledby="toolbox-heading">
         <div unselectable="on">
             <div class="unified-panel-header-inner">
                 <nav class="d-flex justify-content-between mx-3 my-2">

client/src/components/Panels/utilities.test.js

@@ -80,8 +80,8 @@ describe("test helpers in tool searching utilities", () => {
                     "__ZIP_COLLECTION__",
                 ],
                 keys: { description: 1, name: 0 },
-                tools: Object.values(toolsList.tools),
-                panel: toolsListInPanel.default,
+                tools: toolsList,
+                panel: toolsListInPanel,
             },
             {
                 // name prioritized
@@ -93,16 +93,16 @@ describe("test helpers in tool searching utilities", () => {
                     "__FILTER_EMPTY_DATASETS__",
                 ],
                 keys: { description: 0, name: 1 },
-                tools: Object.values(toolsList.tools),
-                panel: toolsListInPanel.default,
+                tools: toolsList,
+                panel: toolsListInPanel,
             },
             {
                 // whitespace precedes to ensure query.trim() works
                 q: " filter empty datasets",
                 expectedResults: ["__FILTER_EMPTY_DATASETS__"],
                 keys: { description: 1, name: 2, combined: 0 },
-                tools: Object.values(toolsList.tools),
-                panel: toolsListInPanel.default,
+                tools: toolsList,
+                panel: toolsListInPanel,
             },
             {
                 // hyphenated tool-name is searchable
@@ -125,16 +125,16 @@ describe("test helpers in tool searching utilities", () => {
                 q: "__ZIP_COLLECTION__",
                 expectedResults: [],
                 keys: { description: 1, name: 2 },
-                tools: Object.values(toolsList.tools),
-                panel: toolsListInPanel.default,
+                tools: toolsList,
+                panel: toolsListInPanel,
             },
             {
                 // id is searchable if provided "id:"
                 q: "id:__ZIP_COLLECTION__",
                 expectedResults: ["__ZIP_COLLECTION__"],
                 keys: { description: 1, name: 2 },
-                tools: Object.values(toolsList.tools),
-                panel: toolsListInPanel.default,
+                tools: toolsList,
+                panel: toolsListInPanel,
             },
             {
                 // id is searchable if provided "tool_id:"
@@ -152,8 +152,8 @@ describe("test helpers in tool searching utilities", () => {
                 q: "filter datasets",
                 expectedResults: ["__FILTER_FAILED_DATASETS__", "__FILTER_EMPTY_DATASETS__"],
                 keys: { combined: 1, wordMatch: 0 },
-                tools: Object.values(toolsList.tools),
-                panel: toolsListInPanel.default,
+                tools: toolsList,
+                panel: toolsListInPanel,
             },
         ];
         searches.forEach((search) => {
@@ -168,55 +168,41 @@ describe("test helpers in tool searching utilities", () => {
         // Testing if just names work with DL search
         const filterQueries = ["Fillter", "FILYER", " Fitler", " filtr"];
         filterQueries.forEach((q) => {
-            const { results, closestTerm } = searchToolsByKeys(
-                Object.values(toolsList.tools),
-                keys,
-                q,
-                "default",
-                toolsListInPanel.default
-            );
+            const { results, closestTerm } = searchToolsByKeys(toolsList, keys, q, "default", toolsListInPanel);
             expect(results).toEqual(expectedResults);
             expect(closestTerm).toEqual("filter");
         });
         // Testing if names and description function with DL search
         let queries = ["datases from a collection", "from a colleection", "from a colleection"];
         queries.forEach((q) => {
-            const { results } = searchToolsByKeys(
-                Object.values(toolsList.tools),
-                keys,
-                q,
-                "default",
-                toolsListInPanel.default
-            );
+            const { results } = searchToolsByKeys(toolsList, keys, q, "default", toolsListInPanel);
             expect(results).toEqual(expectedResults);
         });
         // Testing if different length queries correctly trigger changes in max DL distance
         queries = ["datae", "ppasetsfrom", "datass from a cppollection"];
         queries.forEach((q) => {
-            const { results } = searchToolsByKeys(
-                Object.values(toolsList.tools),
-                keys,
-                q,
-                "default",
-                toolsListInPanel.default
-            );
+            const { results } = searchToolsByKeys(toolsList, keys, q, "default", toolsListInPanel);
             expect(results).toEqual(expectedResults);
         });
     });
 
     it("test tool filtering helpers on toolsList given list of ids", async () => {
         const ids = ["__FILTER_FAILED_DATASETS__", "liftOver1"];
         // check length of first section from imported const toolsList
-        expect(toolsListInPanel.default["collection_operations"].tools).toHaveLength(4);
+        expect(toolsListInPanel["collection_operations"].tools).toHaveLength(4);
         // check length of same section from filtered toolsList
         const matchedTools = ids.map((id) => {
             return { id: id, sections: [], order: 0 };
         });
-        const toolResultsPanel = createSortedResultObject(matchedTools, toolsListInPanel.default);
+        const toolResultsPanel = createSortedResultObject(matchedTools, toolsListInPanel);
         const toolResultsSection = toolResultsPanel.resultPanel["collection_operations"];
         expect(toolResultsSection.tools).toHaveLength(1);
         // check length of filtered tools (regardless of sections)
-        const filteredToolIds = Object.keys(filterTools(toolsList.tools, ids));
+        const toolsById = toolsList.reduce((acc, item) => {
+            acc[item.id] = item;
+            return acc;
+        }, {});
+        const filteredToolIds = Object.keys(filterTools(toolsById, ids));
         expect(filteredToolIds).toHaveLength(2);
     });
 });

client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.test.js

@@ -18,15 +18,18 @@ describe("ToolSchemaJson/ToolsView.vue", () => {
 
     beforeEach(async () => {
         axiosMock = new MockAdapter(axios);
-        axiosMock.onGet("/api/tool_panel?in_panel=False&tool_help=True").reply(200, testToolsListResponse);
-        axiosMock.onGet("/api/tool_panel").reply(200, testToolsListInPanelResponse);
+        axiosMock.onGet("/api/tools?in_panel=False&tool_help=True").reply(200, testToolsListResponse);
+        axiosMock.onGet("/api/tool_panels/default").reply(200, testToolsListInPanelResponse);
         wrapper = shallowMount(ToolsJson, { localVue });
         await flushPromises();
     });
 
     it("schema.org script element is created", async () => {
-        const toolsList = testToolsListResponse.tools;
-        const toolsListInPanel = testToolsListInPanelResponse.default;
+        const toolsList = testToolsListResponse.reduce((acc, item) => {
+            acc[item.id] = item;
+            return acc;
+        }, {});
+        const toolsListInPanel = testToolsListInPanelResponse;
         const tools = wrapper.vm.createToolsJson(toolsList, toolsListInPanel);
         const schemaElement = document.getElementById("schema-json");
         const schemaText = JSON.parse(schemaElement.text);

client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.vue

@@ -11,28 +11,31 @@ export default {
         return { schemaTagObj: {} };
     },
     async created() {
-        let tools = {};
+        let tools = [];
         await axios
-            .get(`${getAppRoot()}api/tool_panel?in_panel=False&tool_help=True`)
+            .get(`${getAppRoot()}api/tools?in_panel=False&tool_help=True`)
             .then(({ data }) => {
-                tools = data.tools;
+                tools = data.reduce((acc, item) => {
+                    acc[item.id] = item;
+                    return acc;
+                }, {});
             })
             .catch((error) => {
-                console.error("All tools by id not loaded", error);
+                console.error("List of all tools not loaded", error);
             });
         if (Object.keys(tools).length > 0) {
             await axios
-                .get(`${getAppRoot()}api/tool_panel`)
+                .get(`${getAppRoot()}api/tool_panels/default`)
                 .then(({ data }) => {
-                    this.schemaTagObj = this.createToolsJson(tools, data.default);
+                    this.schemaTagObj = this.createToolsJson(tools, data);
                     const el = document.createElement("script");
                     el.id = "schema-json";
                     el.type = "application/ld+json";
                     el.text = JSON.stringify(this.schemaTagObj);
                     document.head.appendChild(el);
                 })
                 .catch((error) => {
-                    console.error("Tool sections not loaded", error);
+                    console.error("Tool sections by id not loaded", error);
                 });
         }
     },