fix(dashboard): Add default values to workflow editor provider form

novuhq · Nov 11, 2024 · 77bac3b · 77bac3b
1 parent be29eb3
commit 77bac3b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx b/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx
@@ -57,16 +57,24 @@ export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) =>
   const { currentEnvironment } = useEnvironment();
   const { workflowSlug } = useParams<{ workflowSlug?: string }>();
   const navigate = useNavigate();
-  const form = useForm<z.infer<typeof workflowSchema>>({ mode: 'onSubmit', resolver: zodResolver(workflowSchema) });
+
+  const { workflow, error } = useFetchWorkflow({
+    workflowSlug,
+  });
+  const defaultFormValues = useMemo(
+    () => ({ ...workflow, steps: workflow?.steps.map((step) => ({ ...step })) }),
+    [workflow]
+  );
+  const form = useForm<z.infer<typeof workflowSchema>>({
+    mode: 'onSubmit',
+    resolver: zodResolver(workflowSchema),
+    defaultValues: defaultFormValues,
+  });
   const { reset, setError } = form;
   const steps = useFieldArray({
     control: form.control,
     name: 'steps',
   });
-
-  const { workflow, error } = useFetchWorkflow({
-    workflowSlug,
-  });
   const isReadOnly = workflow?.origin === WorkflowOriginEnum.EXTERNAL;
 
   useLayoutEffect(() => {
@@ -79,8 +87,8 @@ export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) =>
       return;
     }
 
-    reset({ ...workflow, steps: workflow.steps.map((step) => ({ ...step })) });
-  }, [workflow, error, navigate, reset, currentEnvironment]);
+    reset(defaultFormValues);
+  }, [workflow, defaultFormValues, error, navigate, reset, currentEnvironment]);
 
   const { updateWorkflow, isPending } = useUpdateWorkflow({
     onSuccess: (data) => {

diff --git a/apps/dashboard/src/components/workflow-editor/workflow-editor.tsx b/apps/dashboard/src/components/workflow-editor/workflow-editor.tsx
@@ -17,7 +17,7 @@ export const WorkflowEditor = () => {
 
   return (
     <div className="flex h-full flex-1 flex-nowrap">
-      <Tabs defaultValue="workflow" className="-mt-[1px] flex h-full flex-1 flex-col" value="workflow">
+      <Tabs defaultValue="workflow" className="-mt-px flex h-full flex-1 flex-col" value="workflow">
         <TabsList variant="regular">
           <TabsTrigger value="workflow" asChild variant="regular">
             <Link