From ecb497accaa98970f1b346b036e5006086801eb7 Mon Sep 17 00:00:00 2001
From: desiprisg <george.desipris.56@gmail.com>
Date: Mon, 9 Dec 2024 11:33:30 +0200
Subject: [PATCH] fix(dashboard): Fix stale data on test workflow page

---
 .../test-workflow/test-workflow-tabs.tsx            |  8 +++++---
 .../src/hooks/use-fetch-workflow-test-data.ts       |  9 +++++++--
 apps/dashboard/src/hooks/use-update-workflow.ts     | 13 +++++--------
 apps/dashboard/src/pages/test-workflow.tsx          |  2 ++
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx
index b748f34efb50..f4b9d757e6df 100644
--- a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx
+++ b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { RiPlayCircleLine } from 'react-icons/ri';
 import { useForm } from 'react-hook-form';
@@ -20,6 +20,7 @@ import { ToastClose, ToastIcon } from '@/components/primitives/sonner';
 
 export const TestWorkflowTabs = ({ testData }: { testData: WorkflowTestDataResponseDto }) => {
   const { environmentSlug = '', workflowSlug = '' } = useParams<{ environmentSlug: string; workflowSlug: string }>();
+
   const { workflow } = useFetchWorkflow({
     workflowSlug,
   });
@@ -37,8 +38,9 @@ export const TestWorkflowTabs = ({ testData }: { testData: WorkflowTestDataRespo
   const form = useForm<TestWorkflowFormType>({
     mode: 'onSubmit',
     resolver: zodResolver(buildDynamicFormSchema({ to: testData?.to ?? {} })),
-    defaultValues: { to, payload: JSON.stringify(payload, null, 2) },
+    values: { to, payload: JSON.stringify(payload, null, 2) },
   });
+
   const { handleSubmit } = form;
   const { triggerWorkflow, isPending } = useTriggerWorkflow();
 
@@ -105,7 +107,7 @@ export const TestWorkflowTabs = ({ testData }: { testData: WorkflowTestDataRespo
       <Form {...form}>
         <form onSubmit={handleSubmit(onSubmit)} className="roun flex h-full flex-1 flex-nowrap">
           <Tabs defaultValue="workflow" className="-mt-[1px] flex flex-1 flex-col" value="trigger">
-            <TabsList variant="regular">
+            <TabsList variant="regular" className="items-center">
               <TabsTrigger value="workflow" asChild variant="regular">
                 <Link
                   to={buildRoute(ROUTES.EDIT_WORKFLOW, {
diff --git a/apps/dashboard/src/hooks/use-fetch-workflow-test-data.ts b/apps/dashboard/src/hooks/use-fetch-workflow-test-data.ts
index 0bbb0c5461a5..78d34cba4c2d 100644
--- a/apps/dashboard/src/hooks/use-fetch-workflow-test-data.ts
+++ b/apps/dashboard/src/hooks/use-fetch-workflow-test-data.ts
@@ -3,11 +3,16 @@ import type { WorkflowTestDataResponseDto } from '@novu/shared';
 import { QueryKeys } from '@/utils/query-keys';
 import { getWorkflowTestData } from '@/api/workflows';
 import { useEnvironment } from '@/context/environment/hooks';
+import { getEncodedId, WORKFLOW_DIVIDER } from '@/utils/step';
 
-export const useFetchWorkflowTestData = ({ workflowSlug }: { workflowSlug?: string }) => {
+export const useFetchWorkflowTestData = ({ workflowSlug }: { workflowSlug: string }) => {
   const { currentEnvironment } = useEnvironment();
   const { data, isPending, error } = useQuery<WorkflowTestDataResponseDto>({
-    queryKey: [QueryKeys.fetchWorkflowTestData, currentEnvironment?._id, workflowSlug],
+    queryKey: [
+      QueryKeys.fetchWorkflowTestData,
+      currentEnvironment?._id,
+      getEncodedId({ slug: workflowSlug, divider: WORKFLOW_DIVIDER }),
+    ],
     queryFn: () => getWorkflowTestData({ environment: currentEnvironment!, workflowSlug }),
     enabled: !!currentEnvironment?._id && !!workflowSlug,
   });
diff --git a/apps/dashboard/src/hooks/use-update-workflow.ts b/apps/dashboard/src/hooks/use-update-workflow.ts
index c4c0da1f4a87..3580dded3d09 100644
--- a/apps/dashboard/src/hooks/use-update-workflow.ts
+++ b/apps/dashboard/src/hooks/use-update-workflow.ts
@@ -18,14 +18,11 @@ export const useUpdateWorkflow = (
     mutationFn: (args: UpdateWorkflowParameters) => updateWorkflow({ environment: currentEnvironment!, ...args }),
     ...options,
     onSuccess: async (data, variables, context) => {
-      await queryClient.setQueryData(
-        [
-          QueryKeys.fetchWorkflow,
-          currentEnvironment?._id,
-          getEncodedId({ slug: data.slug, divider: WORKFLOW_DIVIDER }),
-        ],
-        data
-      );
+      const workflowId = getEncodedId({ slug: data.slug, divider: WORKFLOW_DIVIDER });
+      await queryClient.setQueryData([QueryKeys.fetchWorkflow, currentEnvironment?._id, workflowId], data);
+      await queryClient.invalidateQueries({
+        queryKey: [QueryKeys.fetchWorkflowTestData, currentEnvironment?._id, workflowId],
+      });
       options?.onSuccess?.(data, variables, context);
     },
   });
diff --git a/apps/dashboard/src/pages/test-workflow.tsx b/apps/dashboard/src/pages/test-workflow.tsx
index 675025b0a944..d900c481b42d 100644
--- a/apps/dashboard/src/pages/test-workflow.tsx
+++ b/apps/dashboard/src/pages/test-workflow.tsx
@@ -14,6 +14,8 @@ export const TestWorkflowPage = () => {
   });
   const { testData } = useFetchWorkflowTestData({ workflowSlug });
 
+  console.log(testData);
+
   return (
     <>
       <PageMeta title={`Trigger ${workflow?.name}`} />