From 14159200effda0998467f77d58296d543cc27987 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 3 Dec 2024 12:07:18 -0600
Subject: [PATCH] use `to` prop for edit button in `WorkflowNavigationTitle`

This shows a href route for the button in the browser, and keeping an empty `@click` event means we keep the button styling.
---
 .../Workflow/WorkflowNavigationTitle.test.ts  | 19 ++++---------------
 .../Workflow/WorkflowNavigationTitle.vue      |  6 ++----
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.test.ts b/client/src/components/Workflow/WorkflowNavigationTitle.test.ts
index 75dfa51431a9..8a6888138523 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.test.ts
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.test.ts
@@ -66,17 +66,13 @@ const localVue = getLocalVue();
  * @param version The version of the component to mount (`run_form` or `invocation` view)
  * @param ownsWorkflow Whether the user owns the workflow associated with the invocation
  * @param unimportableWorkflow Whether the workflow import should fail
- * @returns The wrapper object, and the mockRouter object
+ * @returns The wrapper object
  */
 async function mountWorkflowNavigationTitle(
     version: "run_form" | "invocation",
     ownsWorkflow = true,
     unimportableWorkflow = false
 ) {
-    const mockRouter = {
-        push: jest.fn(),
-    };
-
     let workflowId: string;
     let invocation;
     if (version === "invocation") {
@@ -96,9 +92,6 @@ async function mountWorkflowNavigationTitle(
             workflowId,
         },
         localVue,
-        mocks: {
-            $router: mockRouter,
-        },
         pinia: createTestingPinia(),
     });
 
@@ -107,7 +100,7 @@ async function mountWorkflowNavigationTitle(
         username: ownsWorkflow ? WORKFLOW_OWNER : OTHER_USER,
     });
 
-    return { wrapper, mockRouter };
+    return { wrapper };
 }
 
 describe("WorkflowNavigationTitle renders", () => {
@@ -138,15 +131,11 @@ describe("WorkflowNavigationTitle renders", () => {
 
     it("edit button if user owns the workflow", async () => {
         async function findAndClickEditButton(version: "invocation" | "run_form") {
-            const { wrapper, mockRouter } = await mountWorkflowNavigationTitle(version);
+            const { wrapper } = await mountWorkflowNavigationTitle(version);
             const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
 
             const editButton = actionsGroup.find(SELECTORS.EDIT_WORKFLOW_BUTTON);
-            await editButton.trigger("click");
-            await flushPromises();
-
-            expect(mockRouter.push).toHaveBeenCalledTimes(1);
-            expect(mockRouter.push).toHaveBeenCalledWith(
+            expect(editButton.attributes("to")).toBe(
                 `/workflows/edit?id=${SAMPLE_WORKFLOW.id}&version=${SAMPLE_WORKFLOW.version}`
             );
         }
diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
index a0d6afa6dbf5..34b5f7d66fa9 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.vue
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -5,7 +5,6 @@ import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { RouterLink } from "vue-router";
-import { useRouter } from "vue-router/composables";
 
 import { isRegisteredUser } from "@/api";
 import type { WorkflowInvocationElementView } from "@/api/invocations";
@@ -21,8 +20,6 @@ import AsyncButton from "../Common/AsyncButton.vue";
 import ButtonSpinner from "../Common/ButtonSpinner.vue";
 import WorkflowRunButton from "./WorkflowRunButton.vue";
 
-const router = useRouter();
-
 interface Props {
     invocation?: WorkflowInvocationElementView;
     workflowId: string;
@@ -122,7 +119,8 @@ const workflowImportTitle = computed(() => {
                             "
                             variant="link"
                             :disabled="workflow.deleted"
-                            @click="router.push(`/workflows/edit?id=${workflow.id}&version=${workflow.version}`)">
+                            :to="`/workflows/edit?id=${workflow.id}&version=${workflow.version}`"
+                            @click="() => {}">
                             <FontAwesomeIcon :icon="faEdit" fixed-width />
                         </BButton>
                         <AsyncButton