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.
ahmedhamidawan · Dec 3, 2024 · 1415920 · 1415920
1 parent 274da12
commit 1415920
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 19 deletions.
diff --git 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
@@ -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