Merge pull request #65 from FlowTestAI/pre-post-vars

jsajal · web-flow · commit 82ede9285b05 · 2024-04-03T16:15:40.000-07:00
Pre post vars
diff --git a/src/components/molecules/flow/graph/Graph.js b/src/components/molecules/flow/graph/Graph.js
@@ -1,5 +1,6 @@
 // assumption is that apis are giving json as output
 
+import { cloneDeep } from 'lodash';
 import useCanvasStore from 'stores/CanvasStore';
 import useCollectionStore from 'stores/CollectionStore';
 import { useTabStore } from 'stores/TabStore';
@@ -9,6 +10,10 @@ import { computeRequestNode } from './compute/requestnode';
 
 class Graph {
   constructor(nodes, edges, collectionId, onGraphComplete) {
+    const activeEnv = useCollectionStore
+      .getState()
+      .collections.find((c) => c.id === collectionId)
+      ?.environments.find((e) => e.name === useTabStore.getState().selectedEnv);
     this.nodes = nodes;
     this.edges = edges;
     this.onGraphComplete = onGraphComplete;
@@ -17,10 +22,7 @@ class Graph {
     this.startTime = Date.now();
     this.graphRunNodeOutput = {};
     this.auth = undefined;
-    this.env = useCollectionStore
-      .getState()
-      .collections.find((c) => c.id === collectionId)
-      ?.environments.find((e) => e.name === useTabStore.getState().selectedEnv);
+    this.envVariables = activeEnv ? cloneDeep(activeEnv.variables) : undefined;
   }
 
   #checkTimeout() {
@@ -95,12 +97,19 @@ class Graph {
       }
 
       if (node.type === 'authNode') {
-        this.auth = node.data.type ? computeAuthNode(node.data, this.env) : undefined;
+        this.auth = node.data.type ? computeAuthNode(node.data, this.envVariables) : undefined;
         result = ['Success', node, prevNodeOutput];
       }
 
       if (node.type === 'requestNode') {
-        result = await computeRequestNode(node, prevNodeOutputData, this.env, this.auth, this.logs);
+        result = await computeRequestNode(node, prevNodeOutputData, this.envVariables, this.auth, this.logs);
+        // add post response variables if any
+        if (result[3]) {
+          this.envVariables = {
+            ...this.envVariables,
+            ...result[3],
+          };
+        }
       }
 
       if (this.#checkTimeout()) {
diff --git a/src/components/molecules/flow/graph/compute/authnode.js b/src/components/molecules/flow/graph/compute/authnode.js
@@ -1,9 +1,9 @@
 import { computeVariables } from './utils';
 
-export const computeAuthNode = (auth, env) => {
+export const computeAuthNode = (auth, envVariables) => {
   if (auth.type === 'basic-auth') {
-    auth.username = computeVariables(auth.username, env?.variables);
-    auth.password = computeVariables(auth.password, env?.variables);
+    auth.username = computeVariables(auth.username, envVariables);
+    auth.password = computeVariables(auth.password, envVariables);
 
     return auth;
   } else if (auth.type === 'no-auth') {
diff --git a/src/components/molecules/flow/graph/compute/requestnode.js b/src/components/molecules/flow/graph/compute/requestnode.js
@@ -48,12 +48,12 @@ const formulateRequest = (node, finalUrl, variablesDict, auth, logs) => {
   return options;
 };
 
-export const computeRequestNode = async (node, prevNodeOutputData, env, auth, logs) => {
+export const computeRequestNode = async (node, prevNodeOutputData, envVariables, auth, logs) => {
   // step1 evaluate variables of this node
-  const evalVariables = computeNodeVariables(node.data.variables, prevNodeOutputData);
+  const evalVariables = computeNodeVariables(node.data.preReqVars, prevNodeOutputData);
 
   const variablesDict = {
-    ...env?.variables,
+    ...envVariables,
     ...evalVariables,
   };
 
@@ -76,6 +76,10 @@ export const computeRequestNode = async (node, prevNodeOutputData, env, auth, lo
   } else {
     logs.push(`Request successful: ${JSON.stringify(res)}`);
     console.debug('Response: ', JSON.stringify(res));
+    if (node.data.postRespVars) {
+      const evalPostRespVars = computeNodeVariables(node.data.postRespVars, res.data);
+      return ['Success', node, res, evalPostRespVars];
+    }
     return ['Success', node, res];
   }
 };
diff --git a/src/components/molecules/flow/nodes/RequestNode.js b/src/components/molecules/flow/nodes/RequestNode.js
@@ -10,61 +10,79 @@ import useCanvasStore from 'stores/CanvasStore';
 
 const RequestNode = ({ id, data }) => {
   const setRequestNodeUrl = useCanvasStore((state) => state.setRequestNodeUrl);
-  const requestNodeAddVariable = useCanvasStore((state) => state.requestNodeAddVariable);
-  const requestNodeDeleteVariable = useCanvasStore((state) => state.requestNodeDeleteVariable);
-  const requestNodeChangeVariable = useCanvasStore((state) => state.requestNodeChangeVariable);
+  const requestNodeAddPreRequestVar = useCanvasStore((state) => state.requestNodeAddPreRequestVar);
+  const requestNodeDeletePreRequestVar = useCanvasStore((state) => state.requestNodeDeletePreRequestVar);
+  const requestNodeChangePreRequestVar = useCanvasStore((state) => state.requestNodeChangePreRequestVar);
+
+  const requestNodeAddPostResponseVar = useCanvasStore((state) => state.requestNodeAddPostResponseVar);
+  const requestNodeDeletePostResponseVar = useCanvasStore((state) => state.requestNodeDeletePostResponseVar);
+  const requestNodeChangePostResponseVar = useCanvasStore((state) => state.requestNodeChangePostResponseVar);
 
   const [variableDialogOpen, setVariableDialogOpen] = useState(false);
+  const [modalType, setModalType] = useState('');
 
-  const handleAddVariable = (name, type) => {
-    requestNodeAddVariable(id, name, type);
+  const handleAddVariable = (vType, name, type) => {
+    if (vType === 'pre-request') {
+      requestNodeAddPreRequestVar(id, name, type);
+    } else if (vType === 'post-response') {
+      requestNodeAddPostResponseVar(id, name, type);
+    }
   };
 
-  const handleDeleteVariable = (event, vId) => {
-    requestNodeDeleteVariable(id, vId);
+  const handleDeleteVariable = (event, vType, vId) => {
+    if (vType === 'pre-request') {
+      requestNodeDeletePreRequestVar(id, vId);
+    } else if (vType === 'post-response') {
+      requestNodeDeletePostResponseVar(id, vId);
+    }
   };
 
-  const handleVariableChange = (event, vId) => {
-    requestNodeChangeVariable(id, vId, event.target.value);
+  const handleVariableChange = (event, vType, vId) => {
+    if (vType === 'pre-request') {
+      requestNodeChangePreRequestVar(id, vId, event.target.value);
+    } else if (vType === 'post-response') {
+      requestNodeChangePostResponseVar(id, vId, event.target.value);
+    }
   };
 
   const handleUrlInputChange = (event) => {
     setRequestNodeUrl(id, event.target.value);
   };
 
-  const renderVariables = () => {
+  const renderVariables = (vType) => {
+    const variables = vType === 'pre-request' ? data.preReqVars : data.postRespVars;
     return (
       <>
-        {data.variables &&
-          Object.keys(data.variables).map((id) => (
+        {variables &&
+          Object.keys(variables).map((id) => (
             <div className='flex items-center justify-between pb-2' key={id}>
               <div className='flex items-center justify-between text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
                 <label className='px-4 py-2 border-r rounded-bl-md rounded-tl-md border-r-neutral-500'>{id}</label>
-                {data.variables[id].type === 'Boolean' ? (
+                {variables[id].type === 'Boolean' ? (
                   <select
-                    onChange={(e) => handleVariableChange(e, id)}
+                    onChange={(e) => handleVariableChange(e, vType, id)}
                     name='boolean-val'
                     className='nodrag h-9 w-full rounded-br-md rounded-tr-md  p-2.5 px-1 '
-                    value={data.variables[id].value}
+                    value={variables[id].value}
                   >
                     <option value='true'>True</option>
                     <option value='false'>False</option>
                   </select>
                 ) : (
                   <input
-                    type={getInputType(data.variables[id].type)}
+                    type={getInputType(variables[id].type)}
                     className='nodrag nowheel block h-9 w-full rounded-bl-md rounded-tl-md  p-2.5'
                     name='variable-value'
-                    data-type={getInputType(data.variables[id].type)}
-                    onChange={(e) => handleVariableChange(e, id)}
-                    value={data.variables[id].value}
+                    data-type={getInputType(variables[id].type)}
+                    onChange={(e) => handleVariableChange(e, vType, id)}
+                    value={variables[id].value}
                   />
                 )}
                 <div className='px-4 py-2 border-l rounded-br-md rounded-tr-md border-l-neutral-500'>
-                  {data.variables[id].type}
+                  {variables[id].type}
                 </div>
               </div>
-              <div onClick={(e) => handleDeleteVariable(e, id)} className='p-2 text-neutral-500'>
+              <div onClick={(e) => handleDeleteVariable(e, vType, id)} className='p-2 text-neutral-500'>
                 <TrashIcon className='w-4 h-4' />
               </div>
             </div>
@@ -96,16 +114,39 @@ const RequestNode = ({ id, data }) => {
         <div className='border-t border-neutral-300 bg-slate-100'>
           <div className='flex items-center justify-between px-2 py-4 font-medium'>
             <h3>Variables</h3>
-            <button className='p-2' onClick={() => setVariableDialogOpen(true)}>
+          </div>
+          <div>
+            Pre Request
+            <button
+              className='p-2'
+              onClick={() => {
+                setModalType('pre-request');
+                setVariableDialogOpen(true);
+              }}
+            >
+              <PlusIcon className='w-4 h-4' />
+            </button>
+            <div className='p-2 pt-4 border-t border-neutral-300 bg-slate-50'>{renderVariables('pre-request')}</div>
+          </div>
+          <div>
+            Post Response
+            <button
+              className='p-2'
+              onClick={() => {
+                setModalType('post-response');
+                setVariableDialogOpen(true);
+              }}
+            >
               <PlusIcon className='w-4 h-4' />
             </button>
+            <div className='p-2 pt-4 border-t border-neutral-300 bg-slate-50'>{renderVariables('post-response')}</div>
           </div>
-          <div className='p-2 pt-4 border-t border-neutral-300 bg-slate-50'>{renderVariables()}</div>
         </div>
       </div>
       <AddVariableModal
         closeFn={() => setVariableDialogOpen(false)}
         open={variableDialogOpen}
+        modalType={modalType}
         onVariableAdd={handleAddVariable}
       />
     </FlowNode>
diff --git a/src/components/molecules/modals/flow/AddVariableModal.js b/src/components/molecules/modals/flow/AddVariableModal.js
@@ -22,7 +22,7 @@ const variableTypes = [
   },
 ];
 
-const AddVariableModal = ({ closeFn = () => null, open = false, onVariableAdd }) => {
+const AddVariableModal = ({ closeFn = () => null, open = false, modalType, onVariableAdd }) => {
   const [variableName, setVariableName] = useState('');
   const [variableType, setVariableType] = useState('String');
 
@@ -97,7 +97,7 @@ const AddVariableModal = ({ closeFn = () => null, open = false, onVariableAdd })
                     className='inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-green-900 bg-green-100 border border-transparent rounded-md grow basis-0 hover:bg-green-400'
                     onClick={() => {
                       if (variableName.trim() != '') {
-                        onVariableAdd(variableName, variableType);
+                        onVariableAdd(modalType, variableName, variableType);
                       }
                       closeFn();
                     }}
diff --git a/src/stores/CanvasStore.js b/src/stores/CanvasStore.js
@@ -95,7 +95,7 @@ const useCanvasStore = create((set, get) => ({
       }),
     });
   },
-  requestNodeAddVariable: (nodeId, name, type) => {
+  requestNodeAddPreRequestVar: (nodeId, name, type) => {
     set({
       nodes: get().nodes.map((node) => {
         if (node.id === nodeId) {
@@ -107,8 +107,8 @@ const useCanvasStore = create((set, get) => ({
           };
           node.data = {
             ...node.data,
-            variables: {
-              ...node.data.variables,
+            preReqVars: {
+              ...node.data.preReqVars,
               [newId]: newVar,
             },
           };
@@ -118,37 +118,100 @@ const useCanvasStore = create((set, get) => ({
       }),
     });
   },
-  requestNodeDeleteVariable: (nodeId, id) => {
+  requestNodeDeletePreRequestVar: (nodeId, id) => {
     set({
       nodes: get().nodes.map((node) => {
         if (node.id === nodeId) {
           // it's important to create a new object here, to inform React Flow about the cahnges
-          const { [id]: _, ...newVariables } = node.data.variables;
+          const { [id]: _, ...newVariables } = node.data.preReqVars;
 
           node.data = {
             ...node.data,
-            variables: newVariables,
+            preReqVars: newVariables,
           };
         }
 
         return node;
       }),
     });
   },
-  requestNodeChangeVariable: (nodeId, id, value) => {
+  requestNodeChangePreRequestVar: (nodeId, id, value) => {
     set({
       nodes: get().nodes.map((node) => {
         if (node.id === nodeId) {
           // it's important to create a new object here, to inform React Flow about the cahnges
           const updateVar = {
-            type: node.data.variables[id].type,
+            type: node.data.preReqVars[id].type,
             value,
           };
 
           node.data = {
             ...node.data,
-            variables: {
-              ...node.data.variables,
+            preReqVars: {
+              ...node.data.preReqVars,
+              [id]: updateVar,
+            },
+          };
+        }
+
+        return node;
+      }),
+    });
+  },
+  requestNodeAddPostResponseVar: (nodeId, name, type) => {
+    set({
+      nodes: get().nodes.map((node) => {
+        if (node.id === nodeId) {
+          // it's important to create a new object here, to inform React Flow about the cahnges
+          const newId = name;
+          const newVar = {
+            type: type,
+            value: getDefaultValue(type),
+          };
+          node.data = {
+            ...node.data,
+            postRespVars: {
+              ...node.data.postRespVars,
+              [newId]: newVar,
+            },
+          };
+        }
+
+        return node;
+      }),
+    });
+  },
+  requestNodeDeletePostResponseVar: (nodeId, id) => {
+    set({
+      nodes: get().nodes.map((node) => {
+        if (node.id === nodeId) {
+          // it's important to create a new object here, to inform React Flow about the cahnges
+          const { [id]: _, ...newVariables } = node.data.postRespVars;
+
+          node.data = {
+            ...node.data,
+            postRespVars: newVariables,
+          };
+        }
+
+        return node;
+      }),
+    });
+  },
+  requestNodeChangePostResponseVar: (nodeId, id, value) => {
+    set({
+      nodes: get().nodes.map((node) => {
+        if (node.id === nodeId) {
+          // it's important to create a new object here, to inform React Flow about the cahnges
+          const updateVar = {
+            type: node.data.postRespVars[id].type,
+            value,
+          };
+
+          node.data = {
+            ...node.data,
+            postRespVars: {
+              ...node.data.postRespVars,
               [id]: updateVar,
             },
           };
