fix(dashboard): Fix stale data on test workflow page (#7245)

apps/dashboard/src/components/workflow-editor/nodes.tsx

@@ -12,7 +12,7 @@ import { STEP_TYPE_TO_COLOR } from '@/utils/color';
 import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
 import { WorkflowOriginEnum } from '@novu/shared';
 import { createStep } from '@/components/workflow-editor/steps/step-provider';
-import { getEncodedId, STEP_DIVIDER } from '@/utils/step';
+import { getWorkflowIdFromSlug, STEP_DIVIDER } from '@/utils/step';
 
 export type NodeData = {
   name?: string;
@@ -54,8 +54,8 @@ const StepNode = (props: StepNodeProps) => {
   }>();
 
   const isSelected =
-    getEncodedId({ slug: stepSlug ?? '', divider: STEP_DIVIDER }) ===
-    getEncodedId({ slug: data.stepSlug ?? '', divider: STEP_DIVIDER });
+    getWorkflowIdFromSlug({ slug: stepSlug ?? '', divider: STEP_DIVIDER }) ===
+    getWorkflowIdFromSlug({ slug: data.stepSlug ?? '', divider: STEP_DIVIDER });
 
   return <Node aria-selected={isSelected} className={cn('group', className)} {...rest} />;
 };

apps/dashboard/src/components/workflow-editor/steps/step-provider.tsx

@@ -6,7 +6,7 @@ import { StepDataDto, StepIssuesDto, StepTypeEnum } from '@novu/shared';
 import { createContextHook } from '@/utils/context';
 import { Step } from '@/utils/types';
 import { STEP_DIVIDER } from '@/utils/step';
-import { getEncodedId } from '@/utils/step';
+import { getWorkflowIdFromSlug } from '@/utils/step';
 import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
 
 export type StepEditorContextType = {
@@ -40,8 +40,8 @@ export const StepProvider = ({ children }: { children: ReactNode }) => {
   const issues = useMemo(() => {
     const newIssues = workflow?.steps.find(
       (s) =>
-        getEncodedId({ slug: s.slug, divider: STEP_DIVIDER }) ===
-        getEncodedId({ slug: stepSlug, divider: STEP_DIVIDER })
+        getWorkflowIdFromSlug({ slug: s.slug, divider: STEP_DIVIDER }) ===
+        getWorkflowIdFromSlug({ slug: stepSlug, divider: STEP_DIVIDER })
     )?.issues;
 
     return { ...newIssues };

apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx

@@ -1,25 +1,26 @@
 import { useMemo } from 'react';
-import { Link, useParams } from 'react-router-dom';
-import { RiPlayCircleLine } from 'react-icons/ri';
 import { useForm } from 'react-hook-form';
+import { RiPlayCircleLine } from 'react-icons/ri';
+import { Link, useParams } from 'react-router-dom';
 // eslint-disable-next-line
 // @ts-ignore
+import { ToastClose, ToastIcon } from '@/components/primitives/sonner';
+import { useFetchWorkflow } from '@/hooks/use-fetch-workflow';
+import { useTriggerWorkflow } from '@/hooks/use-trigger-workflow';
+import { buildRoute, LEGACY_ROUTES, ROUTES } from '@/utils/routes';
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { WorkflowTestDataResponseDto } from '@novu/shared';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../primitives/tabs';
-import { buildRoute, LEGACY_ROUTES, ROUTES } from '@/utils/routes';
-import { useFetchWorkflow } from '@/hooks/use-fetch-workflow';
-import { Form } from '../../primitives/form/form';
+import { toast } from 'sonner';
 import { Button } from '../../primitives/button';
-import { useTriggerWorkflow } from '@/hooks/use-trigger-workflow';
+import { Form } from '../../primitives/form/form';
 import { showToast } from '../../primitives/sonner-helpers';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../primitives/tabs';
 import { buildDynamicFormSchema, makeObjectFromSchema, TestWorkflowFormType } from '../schema';
 import { TestWorkflowForm } from './test-workflow-form';
-import { toast } from 'sonner';
-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, {

apps/dashboard/src/hooks/use-fetch-step.tsx

@@ -5,7 +5,7 @@ import type { StepDataDto, StepUpdateDto } from '@novu/shared';
 import { QueryKeys } from '@/utils/query-keys';
 import { useEnvironment } from '@/context/environment/hooks';
 import { getStep } from '@/api/steps';
-import { getEncodedId, STEP_DIVIDER, WORKFLOW_DIVIDER } from '@/utils/step';
+import { getWorkflowIdFromSlug, STEP_DIVIDER, WORKFLOW_DIVIDER } from '@/utils/step';
 
 export const useFetchStep = ({ workflowSlug, stepSlug }: { workflowSlug: string; stepSlug: string }) => {
   const client = useQueryClient();
@@ -14,8 +14,8 @@ export const useFetchStep = ({ workflowSlug, stepSlug }: { workflowSlug: string;
     () => [
       QueryKeys.fetchWorkflow,
       currentEnvironment?._id,
-      getEncodedId({ slug: workflowSlug, divider: WORKFLOW_DIVIDER }),
-      getEncodedId({ slug: stepSlug, divider: STEP_DIVIDER }),
+      getWorkflowIdFromSlug({ slug: workflowSlug, divider: WORKFLOW_DIVIDER }),
+      getWorkflowIdFromSlug({ slug: stepSlug, divider: STEP_DIVIDER }),
     ],
     [currentEnvironment?._id, workflowSlug, stepSlug]
   );

apps/dashboard/src/hooks/use-fetch-workflow-test-data.ts

@@ -3,15 +3,23 @@ import type { WorkflowTestDataResponseDto } from '@novu/shared';
 import { QueryKeys } from '@/utils/query-keys';
 import { getWorkflowTestData } from '@/api/workflows';
 import { useEnvironment } from '@/context/environment/hooks';
+import { getWorkflowIdFromSlug, 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,
+      getWorkflowIdFromSlug({ slug: workflowSlug, divider: WORKFLOW_DIVIDER }),
+    ],
     queryFn: () => getWorkflowTestData({ environment: currentEnvironment!, workflowSlug }),
     enabled: !!currentEnvironment?._id && !!workflowSlug,
+    gcTime: 0,
   });
 
+  console.log(data);
+
   return {
     testData: data,
     isPending,

apps/dashboard/src/hooks/use-fetch-workflow.ts

@@ -4,12 +4,12 @@ import type { WorkflowResponseDto } from '@novu/shared';
 import { QueryKeys } from '@/utils/query-keys';
 import { getWorkflow } from '@/api/workflows';
 import { useEnvironment } from '@/context/environment/hooks';
-import { getEncodedId, WORKFLOW_DIVIDER } from '@/utils/step';
+import { getWorkflowIdFromSlug, WORKFLOW_DIVIDER } from '@/utils/step';
 
 export const useFetchWorkflow = ({ workflowSlug }: { workflowSlug?: string }) => {
   const { currentEnvironment } = useEnvironment();
   const workflowId = useMemo(
-    () => getEncodedId({ slug: workflowSlug ?? '', divider: WORKFLOW_DIVIDER }),
+    () => getWorkflowIdFromSlug({ slug: workflowSlug ?? '', divider: WORKFLOW_DIVIDER }),
     [workflowSlug]
   );
 

apps/dashboard/src/hooks/use-update-workflow.ts

@@ -1,4 +1,4 @@
-import { getEncodedId, WORKFLOW_DIVIDER } from '@/utils/step';
+import { getWorkflowIdFromSlug, WORKFLOW_DIVIDER } from '@/utils/step';
 import { OmitEnvironmentFromParameters } from '@/utils/types';
 import { QueryKeys } from '@/utils/query-keys';
 import { updateWorkflow } from '@/api/workflows';
@@ -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 = getWorkflowIdFromSlug({ 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);
     },
   });

apps/dashboard/src/utils/step.ts

@@ -3,7 +3,7 @@ import { ShortIsPrefixEnum } from '@novu/shared';
 export const WORKFLOW_DIVIDER = `_${ShortIsPrefixEnum.WORKFLOW}`;
 export const STEP_DIVIDER = `_${ShortIsPrefixEnum.STEP}`;
 
-export const getEncodedId = ({ slug, divider }: { slug: string; divider: string }) => {
+export const getWorkflowIdFromSlug = ({ slug, divider }: { slug: string; divider: string }) => {
   const parts = slug.split(divider);
   return parts[parts.length - 1];
 };