add crud support for post response variables

Author: jsajal

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

@@ -14,57 +14,75 @@ const RequestNode = ({ id, data }) => {
   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) => {
-    requestNodeAddPreRequestVar(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) => {
-    requestNodeDeletePreRequestVar(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) => {
-    requestNodeChangePreRequestVar(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.preReqVars &&
-          Object.keys(data.preReqVars).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.preReqVars[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.preReqVars[id].value}
+                    value={variables[id].value}
                   >
                     <option value='true'>True</option>
                     <option value='false'>False</option>
                   </select>
                 ) : (
                   <input
-                    type={getInputType(data.preReqVars[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.preReqVars[id].type)}
-                    onChange={(e) => handleVariableChange(e, id)}
-                    value={data.preReqVars[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.preReqVars[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>
@@ -99,23 +117,36 @@ const RequestNode = ({ id, data }) => {
           </div>
           <div>
             Pre Request
-            <button className='p-2' onClick={() => setVariableDialogOpen(true)}>
+            <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()}</div>
+            <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={() => setVariableDialogOpen(true)}>
+            <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()}</div>
+            <div className='p-2 pt-4 border-t border-neutral-300 bg-slate-50'>{renderVariables('post-response')}</div>
           </div>
         </div>
       </div>
       <AddVariableModal
         closeFn={() => setVariableDialogOpen(false)}
         open={variableDialogOpen}
+        modalType={modalType}
         onVariableAdd={handleAddVariable}
       />
     </FlowNode>

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();
                     }}

src/stores/CanvasStore.js

@@ -158,6 +158,69 @@ const useCanvasStore = create((set, get) => ({
       }),
     });
   },
+  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,
+            },
+          };
+        }
+
+        return node;
+      }),
+    });
+  },
   setRequestNodeBody: (nodeId, type, data) => {
     set({
       nodes: get().nodes.map((node) => {