Introduce pre request variables in request node

Author: jsajal

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

@@ -50,7 +50,7 @@ const formulateRequest = (node, finalUrl, variablesDict, auth, logs) => {
 
 export const computeRequestNode = async (node, prevNodeOutputData, env, 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,

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

@@ -10,22 +10,22 @@ 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 [variableDialogOpen, setVariableDialogOpen] = useState(false);
 
   const handleAddVariable = (name, type) => {
-    requestNodeAddVariable(id, name, type);
+    requestNodeAddPreRequestVar(id, name, type);
   };
 
   const handleDeleteVariable = (event, vId) => {
-    requestNodeDeleteVariable(id, vId);
+    requestNodeDeletePreRequestVar(id, vId);
   };
 
   const handleVariableChange = (event, vId) => {
-    requestNodeChangeVariable(id, vId, event.target.value);
+    requestNodeChangePreRequestVar(id, vId, event.target.value);
   };
 
   const handleUrlInputChange = (event) => {
@@ -35,33 +35,33 @@ const RequestNode = ({ id, data }) => {
   const renderVariables = () => {
     return (
       <>
-        {data.variables &&
-          Object.keys(data.variables).map((id) => (
+        {data.preReqVars &&
+          Object.keys(data.preReqVars).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' ? (
+                {data.preReqVars[id].type === 'Boolean' ? (
                   <select
                     onChange={(e) => handleVariableChange(e, 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={data.preReqVars[id].value}
                   >
                     <option value='true'>True</option>
                     <option value='false'>False</option>
                   </select>
                 ) : (
                   <input
-                    type={getInputType(data.variables[id].type)}
+                    type={getInputType(data.preReqVars[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)}
+                    data-type={getInputType(data.preReqVars[id].type)}
                     onChange={(e) => handleVariableChange(e, id)}
-                    value={data.variables[id].value}
+                    value={data.preReqVars[id].value}
                   />
                 )}
                 <div className='px-4 py-2 border-l rounded-br-md rounded-tr-md border-l-neutral-500'>
-                  {data.variables[id].type}
+                  {data.preReqVars[id].type}
                 </div>
               </div>
               <div onClick={(e) => handleDeleteVariable(e, id)} className='p-2 text-neutral-500'>
@@ -96,11 +96,21 @@ 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>
+          </div>
+          <div>
+            Pre Request
+            <button className='p-2' onClick={() => setVariableDialogOpen(true)}>
+              <PlusIcon className='w-4 h-4' />
+            </button>
+            <div className='p-2 pt-4 border-t border-neutral-300 bg-slate-50'>{renderVariables()}</div>
+          </div>
+          <div>
+            Post Response
             <button className='p-2' onClick={() => setVariableDialogOpen(true)}>
               <PlusIcon className='w-4 h-4' />
             </button>
+            <div className='p-2 pt-4 border-t border-neutral-300 bg-slate-50'>{renderVariables()}</div>
           </div>
-          <div className='p-2 pt-4 border-t border-neutral-300 bg-slate-50'>{renderVariables()}</div>
         </div>
       </div>
       <AddVariableModal

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,37 @@ 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,
             },
           };