fix(dashboard): Workflow saving status on toast and multiple toasts (#…

…6972)

Co-authored-by: Paweł <[email protected]>

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

@@ -1,4 +1,4 @@
-import { ReactNode, useMemo, useCallback, useRef, useLayoutEffect } from 'react';
+import { ReactNode, useMemo, useCallback, useLayoutEffect, useState } from 'react';
 import { useBlocker, useNavigate, useParams } from 'react-router-dom';
 import { useForm, useFieldArray } from 'react-hook-form';
 // eslint-disable-next-line
@@ -53,10 +53,11 @@ const createStep = (type: StepTypeEnum): Step => ({
 });
 
 export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) => {
-  const changesSavedToastIdRef = useRef<string | number>();
   const { currentEnvironment } = useEnvironment();
   const { workflowSlug = '' } = useParams<{ workflowSlug?: string; stepSlug?: string }>();
   const navigate = useNavigate();
+  const [toastId, setToastId] = useState<string | number>('');
+
   const { workflow, error } = useFetchWorkflow({
     workflowSlug,
   });
@@ -101,6 +102,24 @@ export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) =>
   }, [workflow, error, navigate, resetWorkflowForm, currentEnvironment]);
 
   const { updateWorkflow, isPending } = useUpdateWorkflow({
+    onMutate: () => {
+      setToastId(
+        showToast({
+          children: () => (
+            <>
+              <ToastIcon variant={'default'} />
+              <span className="text-sm">Saving</span>
+            </>
+          ),
+          options: {
+            position: 'bottom-left',
+            classNames: {
+              toast: 'ml-10',
+            },
+          },
+        })
+      );
+    },
     onSuccess: (data) => {
       resetWorkflowForm(data);
 
@@ -109,28 +128,23 @@ export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) =>
         handleValidationIssues({ fields: getValues(), issues: data.issues as any, setError });
       }
 
-      if (changesSavedToastIdRef.current) {
-        return;
-      }
-
-      const id = showToast({
-        children: () => (
-          <>
-            <ToastIcon />
-            <span className="text-sm">Saved</span>
-          </>
-        ),
-        options: {
-          position: 'bottom-left',
-          classNames: {
-            toast: 'ml-10',
-          },
-          onAutoClose: () => {
-            changesSavedToastIdRef.current = undefined;
+      setTimeout(() => {
+        showToast({
+          children: () => (
+            <>
+              <ToastIcon variant="success" />
+              <span className="text-sm">Saved</span>
+            </>
+          ),
+          options: {
+            position: 'bottom-left',
+            classNames: {
+              toast: 'ml-10',
+            },
+            id: toastId,
           },
-        },
-      });
-      changesSavedToastIdRef.current = id;
+        });
+      }, 1000);
     },
   });
 

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

@@ -1,22 +1,17 @@
-import { useMutation } from '@tanstack/react-query';
-import type { UpdateWorkflowDto, WorkflowResponseDto } from '@novu/shared';
 import { updateWorkflow } from '@/api/workflows';
+import type { WorkflowResponseDto } from '@novu/shared';
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
 
-export const useUpdateWorkflow = ({
-  onSuccess,
-  onError,
-}: { onSuccess?: (data: WorkflowResponseDto) => void; onError?: (error: unknown) => void } = {}) => {
-  const { mutateAsync, isPending, error, data } = useMutation({
-    mutationFn: async ({ id, workflow }: { id: string; workflow: UpdateWorkflowDto }) =>
-      updateWorkflow({ id, workflow }),
-    onSuccess,
-    onError,
+export const useUpdateWorkflow = (
+  options?: UseMutationOptions<WorkflowResponseDto, unknown, Parameters<typeof updateWorkflow>[0]>
+) => {
+  const mutation = useMutation({
+    mutationFn: updateWorkflow,
+    ...options,
   });
 
   return {
-    updateWorkflow: mutateAsync,
-    isPending,
-    error,
-    data,
+    ...mutation,
+    updateWorkflow: mutation.mutateAsync,
   };
 };