diff --git a/client/src/components/Panels/Common/Tool.test.js b/client/src/components/Panels/Common/Tool.test.js index d61ea9d0826..7f29a13dc1e 100644 --- a/client/src/components/Panels/Common/Tool.test.js +++ b/client/src/components/Panels/Common/Tool.test.js @@ -1,3 +1,4 @@ +import { createTestingPinia } from "@pinia/testing"; import { mount } from "@vue/test-utils"; import { getLocalVue } from "tests/jest/helpers"; @@ -7,11 +8,15 @@ const localVue = getLocalVue(); describe("Tool", () => { test("test tool", () => { + const pinia = createTestingPinia(); const wrapper = mount(Tool, { propsData: { - tool: {}, + tool: { + id: "test_tool", + }, }, localVue, + pinia, }); const nameElement = wrapper.findAll(".name"); expect(nameElement.at(0).text()).toBe(""); @@ -25,15 +30,18 @@ describe("Tool", () => { expect(wrapper.emitted().onOperation).toBeDefined(); }); test("test tool operation", () => { + const pinia = createTestingPinia(); const wrapper = mount(Tool, { propsData: { tool: { + id: "test_tool", name: "name", }, operationIcon: "operationIconClass", operationTitle: "operationTitle", }, localVue, + pinia, }); const nameElement = wrapper.findAll(".name"); expect(nameElement.at(0).text()).toBe("name"); @@ -43,15 +51,18 @@ describe("Tool", () => { expect(title).toBe("operationTitle"); }); test("test tool hide name, test description", () => { + const pinia = createTestingPinia(); const wrapper = mount(Tool, { propsData: { tool: { + id: "test_tool", name: "name", description: "description", }, hideName: true, }, localVue, + pinia, }); const nameElement = wrapper.findAll(".name"); expect(nameElement.length).toBe(0); diff --git a/client/src/components/Panels/Common/Tool.vue b/client/src/components/Panels/Common/Tool.vue index c8fddc6a33d..fab5bff449c 100644 --- a/client/src/components/Panels/Common/Tool.vue +++ b/client/src/components/Panels/Common/Tool.vue @@ -8,8 +8,8 @@ v-else :class="targetClass" :data-tool-id="tool.id" - :href="tool.link" - :target="tool.target" + :href="toolLink" + :target="toolTarget" :title="tool.help" @click="onClick"> @@ -36,6 +36,8 @@ import BootstrapVue from "bootstrap-vue"; import ariaAlert from "utils/ariaAlert"; import Vue from "vue"; +import { useToolStore } from "@/stores/toolStore"; + Vue.use(BootstrapVue); export default { @@ -66,7 +68,20 @@ export default { default: false, }, }, + setup() { + const toolStore = useToolStore(); + return { + getLinkById: toolStore.getLinkById, + getTargetById: toolStore.getTargetById, + }; + }, computed: { + toolLink() { + return this.getLinkById(this.tool.id); + }, + toolTarget() { + return this.getTargetById(this.tool.id); + }, targetClass() { if (this.toolKey) { return `tool-menu-item-${this.tool[this.toolKey]} title-link cursor-pointer`; diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts index ef824ff42de..305137f6955 100644 --- a/client/src/stores/toolStore.ts +++ b/client/src/stores/toolStore.ts @@ -103,6 +103,28 @@ export const useToolStore = defineStore("toolStore", () => { return toolSections.value[effectiveView] || {}; }); + const getLinkById = computed(() => { + return (toolId: string) => { + const tool = toolsById.value[toolId]; + const appRoot = getAppRoot(); + if (tool && tool.model_class === "DataSourceTool") { + return `${appRoot}tool_runner/data_source_redirect?tool_id=${encodeURIComponent(toolId)}`; + } else if (tool?.model_class) { + return `${appRoot}?tool_id=${encodeURIComponent(toolId)}&version=latest`; + } else { + // accommodates hacky toolbox markdown directive overload + return undefined; + } + }; + }); + + const getTargetById = computed(() => { + return (toolId: string) => { + const tool = toolsById.value[toolId]; + return tool?.model_class === "DataSourceTool" ? "_top" : "galaxy_main"; + }; + }); + const getToolsById = computed(() => { return (q?: string) => { if (!q?.trim()) { @@ -299,6 +321,8 @@ export const useToolStore = defineStore("toolStore", () => { fetchPanels, fetchToolForId, fetchTools, + getLinkById, + getTargetById, helpDataCached, initializePanel, isPanelPopulated, diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml index 797c17b2a97..0c5599bc3b3 100644 --- a/client/src/utils/navigation/navigation.yml +++ b/client/src/utils/navigation/navigation.yml @@ -399,8 +399,8 @@ tool_panel: selectors: edam_link: 'a[href^="https://edamontology.github.io/edam-browser"]' tool_box: '[data-description="panel toolbox"]' - tool_link: 'a[href$$="tool_runner?tool_id=${tool_id}"]' - outer_tool_link: '.toolTitle a[href$$="tool_runner?tool_id=${tool_id}"]' + tool_link: 'a[href$$="/?tool_id=${tool_id}&version=latest"]' + outer_tool_link: '.toolTitle a[href$$="/?tool_id=${tool_id}&version=latest"]' data_source_tool_link: 'a[href$$="tool_runner/data_source_redirect?tool_id=${tool_id}"]' search: '.search-query' toolbox: '[data-description="panel toolbox"]'