Merge pull request #17529 from itisAliRH/workflow-actions-right-click

Enable workflow buttons right click

client/src/components/Workflow/InvocationsList.test.js

@@ -134,9 +134,6 @@ describe("InvocationsList.vue", () => {
             axiosMock
                 .onGet("/api/invocations", { params: { limit: 50, offset: 0, include_terminal: false } })
                 .reply(200, [mockInvocationData], { total_matches: "1" });
-            const mockRouter = {
-                push: jest.fn(),
-            };
             const propsData = {
                 ownerGrid: false,
                 loading: false,
@@ -163,9 +160,6 @@ describe("InvocationsList.vue", () => {
                 },
                 localVue,
                 pinia,
-                mocks: {
-                    $router: mockRouter,
-                },
             });
         });
 
@@ -201,10 +195,10 @@ describe("InvocationsList.vue", () => {
             expect(mockMethod).toHaveBeenCalled();
         });
 
-        it("calls executeWorkflow", async () => {
-            await wrapper.find('[data-workflow-run="workflowId"').trigger("click");
-            expect(wrapper.vm.$router.push).toHaveBeenCalledTimes(1);
-            expect(wrapper.vm.$router.push).toHaveBeenCalledWith("/workflows/run?id=workflowId");
+        it("check run button", async () => {
+            const runButton = await wrapper.find('[data-workflow-run="workflowId"');
+
+            expect(runButton.attributes("href")).toBe("/workflows/run?id=workflowId");
         });
 
         it("should not render pager", async () => {

client/src/components/Workflow/WorkflowActions.vue

@@ -13,7 +13,6 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, type ComputedRef } from "vue";
-import { useRouter } from "vue-router/composables";
 
 import { getGalaxyInstance } from "@/app";
 import { deleteWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
@@ -43,7 +42,7 @@ type BaseAction = {
     size: "sm" | "md" | "lg";
     component: "async" | "button";
     variant: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
-    onClick?: () => Promise<void> | void;
+    onClick?: (e?: MouseEvent | KeyboardEvent) => void;
 };
 
 interface AAction extends BaseAction {
@@ -53,8 +52,7 @@ interface AAction extends BaseAction {
 
 interface BAction extends BaseAction {
     component: "button";
-    href?: string;
-    onClick?: () => Promise<void> | void;
+    to?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -66,7 +64,6 @@ const emit = defineEmits<{
     (e: "toggleShowPreview", a?: boolean): void;
 }>();
 
-const router = useRouter();
 const userStore = useUserStore();
 const { isAnonymous } = storeToRefs(userStore);
 const { confirm } = useConfirmDialog();
@@ -88,16 +85,15 @@ const sourceType = computed(() => {
     }
 });
 
-function onExport() {
-    router.push(`/workflows/export?id=${props.workflow.id}`);
-}
-
 async function onToggleBookmark(checked: boolean) {
     await updateWorkflow(props.workflow.id, {
         show_in_tool_panel: checked,
     });
+
     emit("refreshList", true);
+
     Toast.info(`Workflow ${checked ? "added to" : "removed from"} bookmarks`);
+
     if (checked) {
         getGalaxyInstance().config.stored_workflow_menu_entries.push({
             id: props.workflow.id,
@@ -206,7 +202,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
             icon: faFileExport,
             size: props.buttonSize,
             variant: "link",
-            onClick: () => onExport(),
+            to: `/workflows/export?id=${props.workflow.id}`,
         },
     ];
 });
@@ -235,6 +231,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
                 :size="action.size"
                 :title="action.tooltip"
                 :href="action.href"
+                :to="action.to"
                 @click="action.onClick">
                 <FontAwesomeIcon :icon="action.icon" fixed-width />
             </BButton>
@@ -257,9 +254,10 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
                 v-for="action in menuActions.filter((a) => a.condition).reverse()"
                 :key="action.class"
                 :class="action.class"
-                :href="action.href ?? undefined"
+                :href="action.href"
                 :title="action.title"
                 :target="action.target"
+                :to="action.to"
                 @click="action.onClick?.()">
                 <FontAwesomeIcon :icon="action.icon" fixed-width />
                 <span>{{ action.title }}</span>

client/src/components/Workflow/WorkflowActionsExtend.vue

@@ -14,7 +14,6 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
-import { useRouter } from "vue-router/composables";
 
 import { copyWorkflow, undeleteWorkflow } from "@/components/Workflow/workflows.services";
 import { useConfirmDialog } from "@/composables/confirmDialog";
@@ -36,10 +35,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-    (e: "refreshList", a?: boolean): void;
+    (e: "refreshList", overlayLoading?: boolean): void;
 }>();
 
-const router = useRouter();
 const userStore = useUserStore();
 const { confirm } = useConfirmDialog();
 const { isAnonymous } = storeToRefs(useUserStore());
@@ -55,10 +53,6 @@ const shared = computed(() => {
     }
 });
 
-function onShare() {
-    router.push(`/workflows/sharing?id=${props.workflow.id}`);
-}
-
 async function onCopy() {
     const confirmed = await confirm("Are you sure you want to make a copy of this workflow?", "Copy workflow");
 
@@ -114,7 +108,7 @@ async function onRestore() {
                 :size="buttonSize"
                 title="Share"
                 variant="outline-primary"
-                @click="onShare">
+                :to="`/workflows/sharing?id=${workflow.id}`">
                 <FontAwesomeIcon :icon="faShareAlt" fixed-width />
                 <span class="compact-view">Share</span>
             </BButton>

client/src/components/Workflow/WorkflowCard.vue

@@ -5,7 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
-import { useRouter } from "vue-router/composables";
 
 import { copyWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
 import { Toast } from "@/composables/toast";
@@ -36,11 +35,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-    (e: "refreshList", a?: boolean, b?: boolean): void;
-    (e: "tagClick", a: string): void;
+    (e: "tagClick", tag: string): void;
+    (e: "refreshList", overlayLoading?: boolean, b?: boolean): void;
 }>();
 
-const router = useRouter();
 const userStore = useUserStore();
 
 const { isAnonymous } = storeToRefs(userStore);
@@ -93,10 +91,6 @@ const runButtonTitle = computed(() => {
     }
 });
 
-function onEdit() {
-    router.push(`/workflows/edit?id=${workflow.value.id}`);
-}
-
 async function onImport() {
     await copyWorkflow(workflow.value.id, workflow.value.owner);
     Toast.success("Workflow imported successfully");
@@ -194,7 +188,7 @@ async function onTagClick(tag: string) {
                             class="workflow-edit-button"
                             :title="editButtonTitle"
                             variant="outline-primary"
-                            @click="onEdit">
+                            :to="`/workflows/edit?id=${workflow.id}`">
                             <FontAwesomeIcon :icon="faEdit" fixed-width />
                             Edit
                         </BButton>

client/src/components/Workflow/WorkflowInvocationsCount.vue

@@ -3,7 +3,6 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faClock, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { onMounted, ref } from "vue";
-import { useRouter } from "vue-router/composables";
 
 import { invocationCountsFetcher } from "@/api/workflows";
 import localize from "@/utils/localization";
@@ -16,8 +15,6 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const router = useRouter();
-
 const count = ref<number | undefined>(undefined);
 
 async function initCounts() {
@@ -32,10 +29,6 @@ async function initCounts() {
 }
 
 onMounted(initCounts);
-
-function onInvocations() {
-    router.push(`/workflows/${props.workflow.id}/invocations`);
-}
 </script>
 
 <template>
@@ -46,8 +39,9 @@ function onInvocations() {
             pill
             :title="localize('View workflow invocations')"
             class="outline-badge cursor-pointer list-view"
-            @click="onInvocations">
-            <FontAwesomeIcon :icon="faSitemap" />
+            :to="`/workflows/${props.workflow.id}/invocations`">
+            <FontAwesomeIcon :icon="faSitemap" fixed-width />
+
             <span v-if="count > 0">
                 workflow runs:
                 {{ count }}
@@ -62,7 +56,7 @@ function onInvocations() {
             class="inline-icon-button"
             variant="link"
             size="sm"
-            @click="onInvocations">
+            :to="`/workflows/${props.workflow.id}/invocations`">
             <FontAwesomeIcon :icon="faSitemap" fixed-width />
         </BButton>
     </div>

client/src/components/Workflow/WorkflowRunButton.test.ts

@@ -1,4 +1,4 @@
-import { shallowMount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
 import { generateRandomString } from "./testUtils";
@@ -11,16 +11,9 @@ const WORKFLOW_ID = generateRandomString();
 const WORKFLOW_RUN_BUTTON_SELECTOR = `[data-workflow-run="${WORKFLOW_ID}"]`;
 
 async function mountWorkflowRunButton(props?: { id: string; full?: boolean }) {
-    const mockRouter = {
-        push: jest.fn(),
-    };
-
-    const wrapper = shallowMount(WorkflowRunButton as object, {
+    const wrapper = mount(WorkflowRunButton as object, {
         propsData: { ...props },
         localVue,
-        mocks: {
-            $router: mockRouter,
-        },
     });
 
     return { wrapper };
@@ -38,10 +31,8 @@ describe("WorkflowRunButton.vue", () => {
     it("should redirect to workflow run page", async () => {
         const { wrapper } = await mountWorkflowRunButton({ id: WORKFLOW_ID });
 
-        await wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).trigger("click");
-        await wrapper.vm.$nextTick();
+        const runButton = await wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR);
 
-        expect(wrapper.vm.$router.push).toHaveBeenCalledTimes(1);
-        expect(wrapper.vm.$router.push).toHaveBeenCalledWith(`/workflows/run?id=${WORKFLOW_ID}`);
+        expect(runButton.attributes("href")).toBe(`/workflows/run?id=${WORKFLOW_ID}`);
     });
 });

client/src/components/Workflow/WorkflowRunButton.vue

@@ -3,7 +3,6 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPlay } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
-import { useRouter } from "vue-router/composables";
 
 library.add(faPlay);
 
@@ -14,13 +13,7 @@ interface Props {
     disabled?: boolean;
 }
 
-const props = defineProps<Props>();
-
-const router = useRouter();
-
-function ExecuteWorkflow() {
-    router.push(`/workflows/run?id=${props.id}`);
-}
+defineProps<Props>();
 </script>
 
 <template>
@@ -32,8 +25,9 @@ function ExecuteWorkflow() {
         variant="primary"
         size="sm"
         :disabled="disabled"
-        @click.stop="ExecuteWorkflow">
-        <FontAwesomeIcon :icon="faPlay" />
+        :to="`/workflows/run?id=${id}`">
+        <FontAwesomeIcon :icon="faPlay" fixed-width />
+
         <span v-if="full" v-localize>Run</span>
     </BButton>
 </template>