fix: save and deploy change

keep-ui/app/workflows/builder/ReactFlowEditor.tsx

@@ -21,15 +21,24 @@ const ReactFlowEditor = ({
   };
   onDefinitionChange: (def: Definition) => void
 }) => {
-  const { selectedNode, changes, v2Properties, nodes, edges, setOpneGlobalEditor, synced, setSynced } = useStore();
+  const { selectedNode, changes, v2Properties, nodes, edges, setOpneGlobalEditor, synced, setSynced, setCanDeploy } = useStore();
   const [isOpen, setIsOpen] = useState(false);
   const stepEditorRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const isTrigger = ['interval', 'manual', 'alert'].includes(selectedNode || '')
+  const saveRef = useRef<boolean>(false);
+  useEffect(()=>{
+      if(saveRef.current && synced){
+        setCanDeploy(true);
+        saveRef.current = false;
+      }
+  }, [saveRef?.current, synced])
+
 
   useEffect(() => {
     setIsOpen(true);
     if (selectedNode) {
+      saveRef.current = false;
       const timer = setTimeout(() => {
         if (isTrigger) {
           setOpneGlobalEditor(true);
@@ -114,9 +123,16 @@ const ReactFlowEditor = ({
           </button>
           <div className="flex-1 p-2 bg-white border-2 overflow-y-auto">
             <div style={{ width: "300px" }}>
-              <GlobalEditorV2 synced={synced} />
+              <GlobalEditorV2 synced={synced} 
+                saveRef={saveRef}
+              />
               {!selectedNode?.includes('empty') && !isTrigger && <Divider ref={stepEditorRef} />}
-              {!selectedNode?.includes('empty') && !isTrigger && <StepEditorV2 providers={providers} installedProviders={installedProviders} setSynced={setSynced} />}
+              {!selectedNode?.includes('empty') && !isTrigger && <StepEditorV2 
+              providers={providers}
+              installedProviders={installedProviders}
+              setSynced={setSynced}
+              saveRef={saveRef}
+               />}
             </div>
           </div>
         </div>

keep-ui/app/workflows/builder/builder-store.tsx

@@ -149,6 +149,8 @@ export type FlowState = {
   errorNode: string | null;
   synced: boolean;
   setSynced: (synced: boolean) => void;
+  canDeploy: boolean;
+  setCanDeploy: (deploy: boolean) => void;
 };
 
 
@@ -260,6 +262,8 @@ const useStore = create<FlowState>((set, get) => ({
   firstInitilisationDone: false,
   errorNode: null,
   synced: true,
+  canDeploy: false,
+  setCanDeploy: (deploy)=>set({canDeploy: deploy}),
   setSynced: (sync) => set({ synced: sync }),
   setErrorNode: (id) => set({ errorNode: id }),
   setFirstInitilisationDone: (firstInitilisationDone) => set({ firstInitilisationDone }),
@@ -291,7 +295,7 @@ const useStore = create<FlowState>((set, get) => ({
       });
       set({
         nodes: updatedNodes,
-        changes: get().changes + 1
+        changes: get().changes + 1,
       });
     }
   },

keep-ui/app/workflows/builder/builder.tsx

@@ -27,6 +27,7 @@ import { WorkflowExecution, WorkflowExecutionFailure } from "./types";
 import ReactFlowBuilder from "./ReactFlowBuilder";
 import { ReactFlowProvider } from "@xyflow/react";
 import useStore, { ReactFlowDefinition, V2Step, Definition as FlowDefinition } from "./builder-store";
+import { toast } from "react-toastify";
 
 interface Props {
   loadedAlertFile: string | null;
@@ -76,7 +77,7 @@ function Builder({
   const [compiledAlert, setCompiledAlert] = useState<Alert | null>(null);
 
   const searchParams = useSearchParams();
-  const { setErrorNode } = useStore();
+  const { errorNode, setErrorNode, canDeploy, synced } = useStore();
 
   const setStepValidationErrorV2 = (step: V2Step, error: string | null) => {
     setStepValidationError(error);
@@ -210,7 +211,12 @@ function Builder({
   }, [triggerRun]);
 
   useEffect(() => {
+
     if (triggerSave) {
+      if(!synced) {
+        toast('Please save the previous step or wait while properties sync with the workflow.');
+        return;
+      }
       if (workflowId) {
         updateWorkflow();
       } else {
@@ -220,6 +226,20 @@ function Builder({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [triggerSave]);
 
+  useEffect(()=>{
+    if (canDeploy && !errorNode && definition.isValid) {
+      if(!synced) {
+        toast('Please save the previous step or wait while properties sync with the workflow.');
+        return;
+      }
+      if (workflowId) {
+        updateWorkflow();
+      } else {
+        addWorkflow();
+      }
+    }
+  }, [canDeploy, errorNode, definition?.isValid])
+
   useEffect(() => {
     enableGenerate(
       (definition.isValid &&