env tab ui and push updates to it via env tab state store

jsajal · jsajal · commit 691e587861de · 2024-03-26T22:55:16.000-07:00
diff --git a/src/components/atoms/Tabs.js b/src/components/atoms/Tabs.js
@@ -19,7 +19,7 @@ const Tabs = () => {
     '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 messageForConfirmActionModal = `You have unsaved changes in the ${focusTab?.type}, are you sure you want to close it?`;
 
   const handleCloseTab = (event, tab) => {
     event.stopPropagation();
@@ -34,6 +34,12 @@ const Tabs = () => {
         setConfirmActionModalOpen(true);
         return;
       }
+    } else if (tab.type === OBJ_TYPES.environment) {
+      if (tab.variablesDraft && !isEqual(tab.variables, tab.variablesDraft)) {
+        console.debug(`Confirm close for tabId: ${tab.id} : collectionId: ${tab.collectionId}`);
+        setConfirmActionModalOpen(true);
+        return;
+      }
     }
     closeTab(tab.id, tab.collectionId);
   };
diff --git a/src/components/molecules/environment/index.js b/src/components/molecules/environment/index.js
@@ -1,9 +1,33 @@
 import React from 'react';
+import useEnvStore from 'stores/EnvStore';
+import { EditText } from 'react-edit-text';
+import 'react-edit-text/dist/index.css';
+import { toast } from 'react-toastify';
+import { TrashIcon } from '@heroicons/react/24/outline';
+
+const Env = () => {
+  const variables = useEnvStore((state) => state.variables);
+  const handleAddRow = useEnvStore((state) => state.handleAddRow);
+  const handleKeyChange = useEnvStore((state) => state.handleKeyChange);
+  const handleValueChange = useEnvStore((state) => state.handleValueChange);
+
+  const handleSave = ({ name, value, previousValue }) => {
+    console.log('handle save');
+    if (name === 'editVariableKey') {
+      const existingVar = Object.keys(variables).find((key) => key === value);
+      if (existingVar) {
+        toast.error('A variable with the same name already exists');
+      } else {
+        handleKeyChange(value, previousValue);
+      }
+    } else {
+      handleValueChange(name, value);
+    }
+  };
 
-const Env = ({ variables }) => {
   return (
     <div className='p-4'>
-      <div>Test Tab panel for environment</div>
+      {/* <div>Test Tab panel for environment</div> */}
       <div className='overflow-x-auto'>
         <table className='table table-zebra'>
           {/* head */}
@@ -12,63 +36,34 @@ const Env = ({ variables }) => {
               <th></th>
               <th>Key</th>
               <th>Value</th>
-              <th>New Value</th>
+              {/* <th>New Value</th> */}
             </tr>
           </thead>
           <tbody>
-            <tr>
-              <th>1</th>
-              <td>Test variable 1</td>
-              <td>ABC</td>
-              <td>
-                <input
-                  type='text'
-                  className='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'
-                  placeholder='label'
-                  required
-                  onChange={(event) => {
-                    const labelValue = event.target.value;
-                    console.log(`New value for ABC: ${labelValue}`);
-                  }}
-                />
-              </td>
-            </tr>
-            <tr>
-              <th>2</th>
-              <td>Test variable 2</td>
-              <td>DEF</td>
-              <td>
-                <input
-                  type='text'
-                  className='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'
-                  placeholder='label'
-                  required
-                  onChange={(event) => {
-                    const labelValue = event.target.value;
-                    console.log(`New value for DEF: ${labelValue}`);
-                  }}
-                />
-              </td>
-            </tr>
-            <tr>
-              <th>3</th>
-              <td>Test variable 3</td>
-              <td>ZXE</td>
-              <td>
-                <input
-                  type='text'
-                  className='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'
-                  placeholder='label'
-                  required
-                  onChange={(event) => {
-                    const labelValue = event.target.value;
-                    console.log(`New value for ZXE: ${labelValue}`);
-                  }}
-                />
-              </td>
-            </tr>
+            {Object.entries(variables).map(([key, value], index) => (
+              <tr key={index}>
+                <th>{index}</th>
+                <td>
+                  <EditText name='editVariableKey' className='text-xl' value={key} onSave={handleSave} />
+                </td>
+                <td>
+                  <EditText name={key} className='text-xl' value={value} onSave={handleSave} />
+                </td>
+                <td>
+                  <div
+                    className='relative inline-block p-2 text-left transition duration-200 ease-out rounded rounded-l-none hover:bg-slate-200'
+                    onClick={() => {
+                      console.log(`Delete ${key}`);
+                    }}
+                  >
+                    <TrashIcon className='w-4 h-4' aria-hidden='true' />
+                  </div>
+                </td>
+              </tr>
+            ))}
           </tbody>
         </table>
+        <button onClick={handleAddRow}>+ Add Variable</button>
       </div>
     </div>
   );
diff --git a/src/components/molecules/flow/index.js b/src/components/molecules/flow/index.js
@@ -225,7 +225,7 @@ const Flow = ({ collectionId }) => {
         onDragOver={onDragOver}
         //onNodeDragStop={() => setCanvasDirty()}
         isValidConnection={isValidConnection}
-        //fitView
+        fitView
       >
         <Controls>
           <ControlButton
diff --git a/src/components/molecules/flow/nodes/RequestNode.js b/src/components/molecules/flow/nodes/RequestNode.js
@@ -3,7 +3,7 @@ import { PropTypes } from 'prop-types';
 import RequestBody from './RequestBody';
 import FlowNode from 'components/atoms/flow/FlowNode';
 import { getInputType } from 'utils/common';
-import { PlusIcon, TrashIcon } from '@heroicons/react/24/solid';
+import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { getDefaultValue } from 'utils/common';
 import AddVariableModal from 'components/molecules/modals/flow/AddVariableModal';
 import useCanvasStore from 'stores/CanvasStore';
diff --git a/src/components/molecules/headers/TabPanelHeader.js b/src/components/molecules/headers/TabPanelHeader.js
@@ -11,7 +11,7 @@ import SaveFlowModal from '../modals/SaveFlowModal';
 
 import { useTabStore } from 'stores/TabStore';
 import Button from 'components/atoms/common/Button';
-import { BUTTON_TYPES } from 'constants/Common';
+import { BUTTON_TYPES, OBJ_TYPES } from 'constants/Common';
 import GenerateFlowTestModal from '../modals/GenerateFlowTestModal';
 import useCanvasStore from 'stores/CanvasStore';
 
@@ -32,7 +32,7 @@ const TabPanelHeader = () => {
             <div className='flex items-center justify-between pl-4 gap-x-4'>
               <SaveFlowModal tab={focusTab} />
               {/* ToDo: Create our own side sheet component */}
-              {graphRunLogs.length != 0 ? (
+              {focusTab.type === OBJ_TYPES.flowtest && graphRunLogs.length != 0 ? (
                 <div className='drawer drawer-end'>
                   <input id='graph-logs-side-sheet' type='checkbox' className='drawer-toggle' />
                   <div className='cursor-pointer drawer-content'>
@@ -72,23 +72,25 @@ const TabPanelHeader = () => {
                 </Tippy>
               </button>
             </div>
-            <div className='pl-4 border-l gen_ai_button border-neutral-300'>
-              <Button
-                btnType={BUTTON_TYPES.tertiary}
-                isDisabled={false}
-                onClickHandle={() => setGenerateFlowTestModalOpen(true)}
-                fullWidth={true}
-                className='flex items-center justify-between gap-x-4'
-              >
-                <SparklesIcon className='w-5 h-5' />
-                Generate
-              </Button>
-              <GenerateFlowTestModal
-                closeFn={() => setGenerateFlowTestModalOpen(false)}
-                open={generateFlowTestModalOpen}
-                collectionId={focusTab.collectionId}
-              />
-            </div>
+            {focusTab.type === OBJ_TYPES.flowtest && (
+              <div className='pl-4 border-l gen_ai_button border-neutral-300'>
+                <Button
+                  btnType={BUTTON_TYPES.tertiary}
+                  isDisabled={false}
+                  onClickHandle={() => setGenerateFlowTestModalOpen(true)}
+                  fullWidth={true}
+                  className='flex items-center justify-between gap-x-4'
+                >
+                  <SparklesIcon className='w-5 h-5' />
+                  Generate
+                </Button>
+                <GenerateFlowTestModal
+                  closeFn={() => setGenerateFlowTestModalOpen(false)}
+                  open={generateFlowTestModalOpen}
+                  collectionId={focusTab.collectionId}
+                />
+              </div>
+            )}
           </div>
         </>
       ) : (
diff --git a/src/components/molecules/workspace/WorkspaceContent.js b/src/components/molecules/workspace/WorkspaceContent.js
@@ -5,12 +5,15 @@ import useCanvasStore from 'stores/CanvasStore';
 import TabPanelHeader from '../headers/TabPanelHeader';
 import { OBJ_TYPES } from 'constants/Common';
 import Env from '../environment';
+import useEnvStore from 'stores/EnvStore';
 
 const WorkspaceContent = () => {
   const setNodes = useCanvasStore((state) => state.setNodes);
   const setEdges = useCanvasStore((state) => state.setEdges);
   const setLogs = useCanvasStore((state) => state.setLogs);
 
+  const setVariables = useEnvStore((state) => state.setVariables);
+
   const focusTabId = useTabStore((state) => state.focusTabId);
   const tabs = useTabStore((state) => state.tabs);
   const focusTab = tabs.find((t) => t.id === focusTabId);
@@ -24,20 +27,15 @@ const WorkspaceContent = () => {
       setNodes(result.nodes);
       setEdges(result.edges);
       setLogs([]);
+    } else if (focusTab.type === OBJ_TYPES.environment) {
+      setVariables(focusTab.variablesDraft ? focusTab.variablesDraft : focusTab.variables);
     }
   }
 
   return (
     <div className='flex flex-col h-full'>
-      {focusTab &&
-        (focusTab.type === OBJ_TYPES.flowtest ? (
-          <>
-            <TabPanelHeader />
-            <Flow collectionId={focusTab.collectionId} />
-          </>
-        ) : (
-          <Env />
-        ))}
+      <TabPanelHeader />
+      {focusTab && (focusTab.type === OBJ_TYPES.flowtest ? <Flow collectionId={focusTab.collectionId} /> : <Env />)}
     </div>
   );
 };
diff --git a/src/stores/EnvStore.js b/src/stores/EnvStore.js
@@ -0,0 +1,46 @@
+import { create } from 'zustand';
+import { useTabStore } from './TabStore';
+
+const useEnvStore = create((set, get) => ({
+  variables: {},
+  setVariables: (variables) => {
+    set({ variables });
+  },
+  handleAddRow: () => {
+    set({
+      variables: {
+        ...get().variables,
+        '': '',
+      },
+    });
+    useTabStore.getState().updateEnvTab(get().variables);
+  },
+  handleKeyChange: ({ newKey, previousKey }) => {
+    set({
+      variables: Object.keys(get().variables).reduce((newObj, key) => {
+        if (key === previousKey) {
+          newObj[newKey] = get().variables[key];
+        } else {
+          newObj[key] = get().variables[key];
+        }
+        return newObj;
+      }, {}),
+    });
+    useTabStore.getState().updateEnvTab(get().variables);
+  },
+  handleValueChange: ({ key, newValue }) => {
+    set({
+      variables: Object.keys(get().variables).reduce((newObj, k) => {
+        if (k === key) {
+          newObj[k] = newValue;
+        } else {
+          newObj[k] = get().variables[k];
+        }
+        return newObj;
+      }, {}),
+    });
+    useTabStore.getState().updateEnvTab(get().variables);
+  },
+}));
+
+export default useEnvStore;
diff --git a/src/stores/TabStore.js b/src/stores/TabStore.js
@@ -44,6 +44,7 @@ export const useTabStore = create((set, get) => ({
       console.log(existingTab);
     }
   },
+  // these state changes are meant to be triggered by canvas in focus
   updateFlowTestEdges: (edges) => {
     if (get().focusTabId) {
       const existingTab = get().tabs.find((t) => t.id === get().focusTabId);
@@ -68,6 +69,19 @@ export const useTabStore = create((set, get) => ({
     set((state) => ({ tabs: [...state.tabs, newTab] }));
     set(() => ({ focusTabId: newTab.id }));
   },
+  // these state changes are meant to be triggered by env tab in focus
+  updateEnvTab: (variables) => {
+    if (get().focusTabId) {
+      const existingTab = get().tabs.find((t) => t.id === get().focusTabId);
+      if (existingTab) {
+        if (!existingTab.variablesDraft) {
+          existingTab.variablesDraft = cloneDeep(existingTab.variables);
+        }
+        existingTab.variablesDraft = variables;
+      }
+      console.log(existingTab);
+    }
+  },
   closeTab: (id, collectionId) => {
     set((state) => ({ tabs: state.tabs.filter((t) => t.id !== id) }));
     if (get().focusTabId === id) {

Original file line number	Diff line number	Diff line change
`@@ -225,7 +225,7 @@ const Flow = ({ collectionId }) => {`
`225`	`225`	`onDragOver={onDragOver}`
`226`	`226`	`//onNodeDragStop={() => setCanvasDirty()}`
`227`	`227`	`isValidConnection={isValidConnection}`
`228`		`- //fitView`
	`228`	`+ fitView`
`229`	`229`	`>`
`230`	`230`	`<Controls>`
`231`	`231`	`<ControlButton`