Merge pull request #55 from FlowTestAI/flow-state-store

Flow canvas state store

Author: jsajal

package.json

@@ -29,6 +29,7 @@
     "react-router": "^6.15.0",
     "react-router-dom": "^6.22.2",
     "react-scripts": "5.0.1",
+    "react-toastify": "^10.0.5",
     "react-tooltip": "^5.26.2",
     "reactflow": "^11.8.3",
     "socket.io-client": "^4.7.4",

src/components/atoms/Tabs.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { useTabStore } from 'stores/TabStore';
 import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
+import { isEqual } from 'lodash';
 
 const Tabs = () => {
   const tabs = useTabStore((state) => state.tabs);
@@ -12,28 +13,31 @@ const Tabs = () => {
   const closeTab = useTabStore((state) => state.closeTab);
   const [closingTabId, setClosingTabId] = useState('');
   const [closingCollectionId, setClosingCollectionId] = useState('');
+
   const activeTabStyles =
     'before:absolute before:h-[0.25rem] before:w-full before:bg-slate-300 before:content-[""] before:bottom-0 before:left-0';
   const tabCommonStyles =
     'tab flex items-center gap-x-2 border-r border-neutral-300 bg-transparent pr-0 tracking-[0.15em] transition duration-500 ease-in text-sm';
   const messageForConfirmActionModal = 'You have unsaved changes in the flowtest, are you sure you want to close it?';
-  const handleCloseTab = (event) => {
+
+  const handleCloseTab = (event, tab) => {
     event.stopPropagation();
     event.preventDefault();
-    const tabId = event.currentTarget.dataset.tabId;
-    const { isDirty, collectionId } = tabs.find((tab) => {
-      if (tab.id === tabId) return tab;
-    });
-    setClosingTabId(tabId);
-    setClosingCollectionId(collectionId);
+    // const tabId = event.currentTarget.dataset.tabId;
+    // const { isDirty, collectionId } = tabs.find((tab) => {
+    //   if (tab.id === tabId) return tab;
+    // });
+    setClosingTabId(tab.id);
+    setClosingCollectionId(tab.collectionId);
 
-    if (isDirty) {
-      console.debug(`Confirm close for tabId: ${tabId} : collectionId: ${collectionId}`);
+    if (tab.flowDataDraft && !isEqual(tab.flowData, tab.flowDataDraft)) {
+      console.debug(`Confirm close for tabId: ${tab.id} : collectionId: ${tab.collectionId}`);
       setConfirmActionModalOpen(true);
       return;
     }
-    closeTab(tabId, collectionId);
+    closeTab(tab.id, tab.collectionId);
   };
+
   return (
     <div role='tablist' className='tabs tabs-lg'>
       {tabs
@@ -55,11 +59,11 @@ const Tabs = () => {
               <a>{tab.name}</a>
               {/* close needs to be a separate clickable component other wise it gets confused with above */}
               <div
-                className='flex items-center h-full px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
+                className='flex h-full items-center px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
                 data-tab-id={tab.id}
-                onClick={handleCloseTab}
+                onClick={(e) => handleCloseTab(e, tab)}
               >
-                <XMarkIcon className='w-4 h-4' />
+                <XMarkIcon className='h-4 w-4' />
               </div>
             </div>
           );

src/components/molecules/flow/graph/Graph.js

@@ -1,5 +1,6 @@
 // assumption is that apis are giving json as output
 
+import useCanvasStore from 'stores/CanvasStore';
 import useCollectionStore from 'stores/CollectionStore';
 import { useTabStore } from 'stores/TabStore';
 import { computeAuthNode } from './compute/authnode';
@@ -69,7 +70,7 @@ class Graph {
 
       if (node.type === 'outputNode') {
         this.logs.push(`Output: ${JSON.stringify(prevNodeOutputData)}`);
-        node.data.setOutput(prevNodeOutputData);
+        useCanvasStore.getState().setOutputNode(node.id, prevNodeOutputData);
         result = ['Success', node, prevNodeOutput];
       }
 
@@ -94,7 +95,7 @@ class Graph {
       }
 
       if (node.type === 'authNode') {
-        this.auth = computeAuthNode(node.data.auth, this.env);
+        this.auth = node.data.type ? computeAuthNode(node.data, this.env) : undefined;
         result = ['Success', node, prevNodeOutput];
       }
 
@@ -134,7 +135,7 @@ class Graph {
     // reset every output node for a fresh run
     this.nodes.forEach((node) => {
       if (node.type === 'outputNode') {
-        node.data.setOutput(undefined);
+        useCanvasStore.getState().unSetOutputNode(node.id);
       }
     });
     this.graphRunNodeOutput = {};

src/components/molecules/flow/graph/compute/requestnode.js

@@ -38,7 +38,7 @@ const formulateRequest = (node, finalUrl, variablesDict, auth, logs) => {
     data: requestData,
   };
 
-  if (auth.type === 'basic-auth') {
+  if (auth && auth.type === 'basic-auth') {
     options.auth = {};
     options.auth.username = auth.username;
     options.auth.password = auth.password;

src/components/molecules/flow/index.js

@@ -3,6 +3,7 @@ import { PropTypes } from 'prop-types';
 import ReactFlow, { useNodesState, useEdgesState, addEdge, Controls, Background, ControlButton } from 'reactflow';
 import 'reactflow/dist/style.css';
 import { cloneDeep, isEqual } from 'lodash';
+import { toast } from 'react-toastify';
 
 // css
 import './index.css';
@@ -27,12 +28,15 @@ import FlowNode from 'components/atoms/flow/FlowNode';
 import { Popover } from '@headlessui/react';
 import { generateFlowData } from './flowtestai';
 import { GENAI_MODELS } from 'constants/Common';
+import useCanvasStore from 'stores/CanvasStore';
+
+import { shallow } from 'zustand/shallow';
 
 const StartNode = () => (
   <FlowNode title='Start' handleLeft={false} handleRight={true} handleRightData={{ type: 'source' }}></FlowNode>
 );
 
-const init = (flowData) => {
+export const init = (flowData) => {
   // Initialization
   if (flowData && flowData.nodes && flowData.edges) {
     return {
@@ -95,36 +99,19 @@ const init = (flowData) => {
   }
 };
 
-const Flow = ({ tabId, collectionId, flowData }) => {
-  useEffect(() => {
-    // Action to perform on tab change
-    console.log(`Tab changed to: ${tabId}`);
-    console.log(flowData);
-    // perform actions based on the new tabId
-    const result = init(cloneDeep(flowData));
-    setNodes(result.nodes);
-    setEdges(result.edges);
-  }, [tabId]);
+const selector = (state) => ({
+  nodes: state.nodes,
+  edges: state.edges,
+  onNodesChange: state.onNodesChange,
+  onEdgesChange: state.onEdgesChange,
+  onConnect: state.onConnect,
+  setNodes: state.setNodes,
+  setEdges: state.setEdges,
+});
 
-  const setCanvasDirty = () => {
-    console.debug('set canvas dirty');
-    const tab = useTabStore.getState().tabs.find((t) => t.id === tabId);
-    if (tab) {
-      tab.isDirty = true;
-      tab.flowData = {
-        nodes: nodes.map((node) => {
-          const _node = JSON.parse(JSON.stringify(node));
-          return { ..._node };
-        }),
-        edges: edges.map((edge) => {
-          return {
-            ...edge,
-            animated: false,
-          };
-        }),
-      };
-    }
-  };
+const Flow = ({ collectionId }) => {
+  const { nodes, edges, onNodesChange, onEdgesChange, onConnect, setNodes, setEdges } = useCanvasStore(selector);
+  //console.log(nodes);
 
   // notification
   // eslint-disable-next-line no-unused-vars
@@ -151,29 +138,6 @@ const Flow = ({ tabId, collectionId, flowData }) => {
     [],
   );
 
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-
-  useEffect(() => {
-    // skip inital render
-    if (flowData === undefined || (isEqual(nodes, []) && isEqual(edges, []))) {
-      return;
-    }
-    if (flowData && isEqual(JSON.parse(JSON.stringify(nodes)), flowData.nodes) && isEqual(edges, flowData.edges)) {
-      console.debug('canvas is unchanged');
-      return;
-    }
-    setCanvasDirty();
-  }, [nodes, edges]);
-
-  const onConnect = (params) => {
-    const newEdge = {
-      ...params,
-      type: 'buttonedge',
-    };
-    setEdges((eds) => addEdge(newEdge, eds));
-  };
-
   const runnableEdges = (runnable) => {
     const updatedEdges = reactFlowInstance.getEdges().map((edge) => {
       return {
@@ -220,7 +184,7 @@ const Flow = ({ tabId, collectionId, flowData }) => {
       };
       console.debug('Dropped node: ', newNode);
 
-      setNodes((nds) => nds.concat(newNode));
+      setNodes([...useCanvasStore.getState().nodes, newNode]);
     },
     [reactFlowInstance],
   );
@@ -279,7 +243,7 @@ const Flow = ({ tabId, collectionId, flowData }) => {
         onInit={setReactFlowInstance}
         onDrop={onDrop}
         onDragOver={onDragOver}
-        onNodeDragStop={() => setCanvasDirty()}
+        //onNodeDragStop={() => setCanvasDirty()}
         isValidConnection={isValidConnection}
         //fitView
       >
@@ -313,8 +277,8 @@ const Flow = ({ tabId, collectionId, flowData }) => {
                   setEdges(result.edges);
                 })
                 .catch((error) => {
-                  // TODO: show error in UI
                   console.log(error);
+                  toast.error(`Error while generating flow data`);
                 });
             }}
           >
@@ -328,9 +292,7 @@ const Flow = ({ tabId, collectionId, flowData }) => {
 };
 
 Flow.propTypes = {
-  tabId: PropTypes.string.isRequired,
   collectionId: PropTypes.string.isRequired,
-  flowData: PropTypes.object.isRequired,
 };
 
 export default Flow;

src/components/molecules/flow/nodes/AuthNode.js

@@ -1,36 +1,18 @@
 import * as React from 'react';
 import { PropTypes } from 'prop-types';
 import FlowNode from 'components/atoms/flow/FlowNode';
+import useCanvasStore from 'stores/CanvasStore';
 
-const AuthNode = ({ data }) => {
-  /* its better to have no space strings as values since they are less error/bug prone */
-  const initState = () => {
-    if (data.auth && data.auth.type) {
-      return data.auth.type; // should return basic-auth
-    } else {
-      data.auth = {};
-      data.auth.type = 'no-auth';
-      return 'no-auth';
-    }
-  };
-
-  // const [anchorEl, setAnchorEl] = React.useState(null);
-  const [auth, setAuth] = React.useState(initState());
+const AuthNode = ({ id, data }) => {
+  const setAuthNodeType = useCanvasStore((state) => state.setAuthNodeType);
+  const setBasicAuthValues = useCanvasStore((state) => state.setBasicAuthValues);
 
-  /**
-   * Not sure whether you need to set the value for data props/param or not.
-   * Technically you should not set the value for a prop/param in a component
-   * Check this and other places in this file once
-   */
   const handleChange = (value, option) => {
-    data.auth[option] = value;
+    setBasicAuthValues(id, option, value);
   };
 
   const handleSelection = (event) => {
-    const selectedValue = event.target?.value;
-    setAuth(selectedValue);
-    data.auth = {};
-    data.auth.type = selectedValue;
+    setAuthNodeType(id, event.target?.value);
   };
 
   return (
@@ -47,25 +29,27 @@ const AuthNode = ({ data }) => {
           <select
             onChange={handleSelection}
             name='auth-type'
-            value={auth}
-            className='w-full px-1 py-2 border rounded-lg border-neutral-500 text-neutral-500 outline-0 focus:ring-0'
+            value={data.type ? data.type : 'no-auth'}
+            className='w-full rounded-lg border border-neutral-500 px-1 py-2 text-neutral-500 outline-0 focus:ring-0'
           >
             <option value='no-auth'>No Auth</option>
             <option value='basic-auth'>Basic Auth</option>
           </select>
         </div>
-        {auth === 'basic-auth' && (
+        {data.type === 'basic-auth' && (
           <div>
             <input
               type='text'
-              placeholder={data.auth.username ? data.auth.username : 'Username'}
+              placeholder='Username'
+              value={data.username ? data.username : ''}
               className='nodrag nowheel  mb-2 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'
               name='username'
               onChange={(e) => handleChange(e.target.value, 'username')}
             />
             <input
               type='text'
-              placeholder={data.auth.password ? data.auth.password : 'Password'}
+              placeholder='Password'
+              value={data.password ? data.password : ''}
               className='nodrag nowheel block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'
               name='password'
               onChange={(e) => handleChange(e.target.value, 'password')}

src/components/molecules/flow/nodes/DelayNode.js

@@ -1,21 +1,17 @@
 import * as React from 'react';
 import { PropTypes } from 'prop-types';
 import FlowNode from 'components/atoms/flow/FlowNode';
+import useCanvasStore from 'stores/CanvasStore';
 
-/**
- * I have commented the code which is not required but do check it once
- */
-const DelayNode = ({ data }) => {
-  const [value, setValue] = React.useState(data.delay ? data.delay : 0);
-  data.delay = value;
+const DelayNode = ({ id, data }) => {
+  const setDelayNodeValue = useCanvasStore((state) => state.setDelayNodeValue);
 
   /**
    * ToDo: Implement Debouncing for this function
    */
   const handleDelayInMsInputChange = (event) => {
     event.preventDefault();
-    const delayInMs = event.target.value;
-    setValue(delayInMs);
+    setDelayNodeValue(id, event.target.value);
   };
 
   return (