Removed manual saving, only autosave now

src/frontend/src/components/chatComponent/index.tsx

@@ -16,7 +16,6 @@ export default function Chat({ flow }: ChatType): JSX.Element {
   const [canOpen, setCanOpen] = useState(false);
   const isBuilt = useFlowStore((state) => state.isBuilt);
   const setIsBuilt = useFlowStore((state) => state.setIsBuilt);
-  const isPending = useFlowStore((state) => state.isPending);
   const currentFlowState = useFlowsManagerStore((state) => state.currentFlowState);
 
   useEffect(() => {
@@ -55,7 +54,6 @@ export default function Chat({ flow }: ChatType): JSX.Element {
       _.cloneDeep(node.data.node?.template)
     );
     if (
-      isPending &&
       JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)
     ) {
       setIsBuilt(false);

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -13,6 +13,7 @@ import ReactFlow, {
   Controls,
   Edge,
   NodeDragHandler,
+  OnMove,
   OnSelectionChangeParams,
   SelectionDragHandler,
   addEdge,
@@ -27,12 +28,13 @@ import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
-import { FlowType, NodeType } from "../../../../types/flow";
+import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
 import {
   generateFlow,
   generateNodeFromFlow,
   getNodeId,
   isValidConnection,
+  scapeJSONParse,
   validateSelection,
 } from "../../../../utils/reactflowUtils";
 import { cn, getRandomName, isWrappedWithClass } from "../../../../utils/utils";
@@ -74,16 +76,13 @@ export default function Page({
   const edges = useFlowStore((state) => state.edges);
   const onNodesChange = useFlowStore((state) => state.onNodesChange);
   const onEdgesChange = useFlowStore((state) => state.onEdgesChange);
-  const onConnect = useFlowStore((state) => state.onConnect);
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
   const deleteNode = useFlowStore((state) => state.deleteNode);
   const deleteEdge = useFlowStore((state) => state.deleteEdge);
-  const setPending = useFlowStore((state) => state.setPending);
   const undo = useFlowsManagerStore((state) => state.undo);
   const redo = useFlowsManagerStore((state) => state.redo);
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
-  const isPending = useFlowStore((state) => state.isPending);
   const paste = useFlowStore((state) => state.paste);
 
   const position = useRef({ x: 0, y: 0 });
@@ -216,10 +215,15 @@ export default function Page({
   }, [takeSnapshot]);
 
   const onNodeDragStop: NodeDragHandler = useCallback(() => {
-    // 👇 make dragging a node undoable
     autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!);
     // 👉 you can place your event handlers here
-  }, [takeSnapshot]);
+  }, [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
+
+  const onMoveEnd: OnMove = useCallback(() => {
+    // 👇 make moving the canvas undoable
+    autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!);
+  }
+  , [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
 
   const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
     // 👇 make dragging a selection undoable
@@ -235,6 +239,39 @@ export default function Page({
     }
   }, []);
 
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      const newEdges = addEdge(
+        {
+          ...connection,
+          data: {
+            targetHandle: scapeJSONParse(connection.targetHandle!),
+            sourceHandle: scapeJSONParse(connection.sourceHandle!),
+          },
+          style: { stroke: "#555" },
+          className:
+            ((scapeJSONParse(connection.targetHandle!) as targetHandleType)
+              .type === "Text"
+              ? "stroke-foreground "
+              : "stroke-foreground ") + " stroke-connection",
+          animated:
+            (scapeJSONParse(connection.targetHandle!) as targetHandleType)
+              .type === "Text",
+        },
+        edges
+      );
+      setEdges(newEdges);
+      useFlowsManagerStore
+        .getState()
+        .autoSaveCurrentFlow(
+          nodes,
+          newEdges,
+          reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
+        );
+    },
+    [nodes, edges, setEdges, reactFlowInstance, addEdge]
+  );
+
   const onDrop = useCallback(
     (event: React.DragEvent) => {
       event.preventDefault();
@@ -345,9 +382,6 @@ export default function Page({
     setFilterEdge([]);
   }, []);
 
-  const onMove = useCallback(() => {
-    if (!isPending) setPending(true);
-  }, [setPending]);
 
   return (
     <div className="flex h-full overflow-hidden">
@@ -370,7 +404,6 @@ export default function Page({
                 </div>
                 <ReactFlow
                   nodes={nodes}
-                  onMove={onMove}
                   edges={edges}
                   onNodesChange={onNodesChange}
                   onEdgesChange={onEdgesChange}
@@ -388,6 +421,7 @@ export default function Page({
                   onSelectionStart={onSelectionStart}
                   connectionLineComponent={ConnectionLineComponent}
                   onDragOver={onDragOver}
+                  onMoveEnd={onMoveEnd}
                   onDrop={onDrop}
                   onSelectionChange={onSelectionChange}
                   deleteKeyCode={[]}

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -42,7 +42,6 @@ export default function ExtraSidebar(): JSX.Element {
   const validApiKey = useStoreStore((state) => state.validApiKey);
 
   const isBuilt = useFlowStore((state) => state.isBuilt);
-  const isPending = useFlowStore((state) => state.isPending);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");
@@ -302,39 +301,6 @@ export default function ExtraSidebar(): JSX.Element {
             )}
           </div>
         </ShadTooltip>
-        <div className="side-bar-button" data-testid="save-button">
-          {currentFlow && currentFlow.data && (
-            <ShadTooltip content="Save" side="top">
-              <button
-                className={
-                  "extra-side-bar-buttons " +
-                  (isPending ? "" : "button-disable")
-                }
-                onClick={(event) => {
-                  saveFlow(
-                    {
-                      ...currentFlow,
-                      data: {
-                        nodes,
-                        edges,
-                        viewport: reactFlowInstance?.getViewport()!,
-                      },
-                    },
-                    true
-                  );
-                }}
-              >
-                <IconComponent
-                  name="Save"
-                  className={
-                    "side-bar-button-size" +
-                    (isPending ? " " : " extra-side-bar-save-disable")
-                  }
-                />
-              </button>
-            </ShadTooltip>
-          )}
-        </div>
       </div>
       <Separator />
       <div className="side-bar-search-div-placement">

src/frontend/src/stores/flowStore.ts

@@ -42,13 +42,11 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     set({
       nodes: applyNodeChanges(changes, get().nodes),
     });
-    if (!get().isPending) set({ isPending: true });
   },
   onEdgesChange: (changes: EdgeChange[]) => {
     set({
       edges: applyEdgeChanges(changes, get().edges),
     });
-    if (!get().isPending) set({ isPending: true });
   },
   setNodes: (change) => {
     let newChange = typeof change === "function" ? change(get().nodes) : change;
@@ -96,29 +94,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   getNode: (id: string) => {
     return get().nodes.find((node) => node.id === id);
   },
-  onConnect: (connection: Connection) => {
-    set({
-      edges: addEdge(
-        {
-          ...connection,
-          data: {
-            targetHandle: scapeJSONParse(connection.targetHandle!),
-            sourceHandle: scapeJSONParse(connection.sourceHandle!),
-          },
-          style: { stroke: "#555" },
-          className:
-            ((scapeJSONParse(connection.targetHandle!) as targetHandleType)
-              .type === "Text"
-              ? "stroke-foreground "
-              : "stroke-foreground ") + " stroke-connection",
-          animated:
-            (scapeJSONParse(connection.targetHandle!) as targetHandleType)
-              .type === "Text",
-        },
-        get().edges
-      ),
-    });
-  },
   deleteNode: (nodeId) => {
     get().setNodes(
       get().nodes.filter((node) =>
@@ -229,10 +204,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
     set({ edges: newEdges });
   },
-  isPending: false,
-  setPending: (pending: boolean) => {
-    set({ isPending: pending });
-  },
 }));
 
 export default useFlowStore;

src/frontend/src/stores/flowsManagerStore.ts

@@ -130,7 +130,6 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
             );
             //update tabs state
 
-            useFlowStore.setState({ isPending: false });
             resolve();
           }
         })

src/frontend/src/types/zustand/flow/index.ts

@@ -18,7 +18,6 @@ export type FlowStoreType = {
   setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
   setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
   getNode: (id: string) => Node | undefined;
-  onConnect: OnConnect;
   deleteNode: (nodeId: string | Array<string>) => void;
   deleteEdge: (edgeId: string | Array<string>) => void;
   paste: (
@@ -27,6 +26,4 @@ export type FlowStoreType = {
   ) => void;
   isBuilt: boolean;
   setIsBuilt: (isBuilt: boolean) => void;
-  isPending: boolean;
-  setPending: (pending: boolean) => void;
 };