dynamic rendering of logs button upon graph run

Author: jsajal

src/components/molecules/flow/index.js

@@ -107,10 +107,12 @@ const selector = (state) => ({
   onConnect: state.onConnect,
   setNodes: state.setNodes,
   setEdges: state.setEdges,
+  setLogs: state.setLogs,
 });
 
 const Flow = ({ collectionId }) => {
-  const { nodes, edges, onNodesChange, onEdgesChange, onConnect, setNodes, setEdges } = useCanvasStore(selector);
+  const { nodes, edges, onNodesChange, onEdgesChange, onConnect, setNodes, setEdges, setLogs } =
+    useCanvasStore(selector);
   //console.log(nodes);
 
   // notification
@@ -214,18 +216,19 @@ const Flow = ({ collectionId }) => {
 
   // graph
   // eslint-disable-next-line no-unused-vars
-  const [graphRun, setGraphRun] = useState(false);
-  // eslint-disable-next-line no-unused-vars
-  const [graphRunLogs, setGraphRunLogs] = useState(undefined);
+  // const [graphRun, setGraphRun] = useState(false);
+  // // eslint-disable-next-line no-unused-vars
+  // const [graphRunLogs, setGraphRunLogs] = useState(undefined);
 
   const onGraphComplete = (result, logs) => {
     console.debug('Graph complete callback: ', result);
-    setGraphRun(true);
-    setGraphRunLogs(logs);
+    // setGraphRun(true);
+    // setGraphRunLogs(logs);
+    setLogs(logs);
     if (result[0] == 'Success') {
-      enqueueSnackbar('FlowTest Run Success!', { variant: 'success' });
+      toast.success('FlowTest Run Success! View Logs');
     } else if (result[0] == 'Failed') {
-      enqueueSnackbar('FlowTest Run Failed!', { variant: 'error' });
+      toast.error('FlowTest Run Failed! View Logs');
     }
     runnableEdges(false);
   };

src/components/molecules/headers/TabPanelHeader.js

@@ -13,11 +13,14 @@ import { useTabStore } from 'stores/TabStore';
 import Button from 'components/atoms/common/Button';
 import { BUTTON_TYPES } from 'constants/Common';
 import GenerateFlowTestModal from '../modals/GenerateFlowTestModal';
+import useCanvasStore from 'stores/CanvasStore';
 
 const TabPanelHeader = () => {
-  const focusTabId = useTabStore.getState().focusTabId;
-  const tabs = useTabStore.getState().tabs;
+  const focusTabId = useTabStore((state) => state.focusTabId);
+  const tabs = useTabStore((state) => state.tabs);
   const focusTab = tabs.find((t) => t.id === focusTabId);
+  const graphRunLogs = useCanvasStore((state) => state.logs);
+  console.log('graph logs: ', graphRunLogs);
 
   const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
 
@@ -30,35 +33,43 @@ const TabPanelHeader = () => {
             <div className='flex items-center justify-between pl-4 gap-x-4'>
               <SaveFlowModal tab={focusTab} />
               {/* ToDo: Create our own side sheet component */}
-              <div className='drawer drawer-end'>
-                <input id='graph-logs-side-sheet' type='checkbox' className='drawer-toggle' />
-                <div className='cursor-pointer drawer-content'>
-                  <Tippy content='Logs' placement='top'>
-                    <label htmlFor='graph-logs-side-sheet'>
-                      <DocumentTextIcon className='w-5 h-5' />
-                    </label>
-                  </Tippy>
-                </div>
+              {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'>
+                    <Tippy content='Logs' placement='top'>
+                      <label htmlFor='graph-logs-side-sheet'>
+                        <DocumentTextIcon className='w-5 h-5' />
+                      </label>
+                    </Tippy>
+                  </div>
 
-                <div className='z-50 drawer-side'>
-                  <label htmlFor='graph-logs-side-sheet' aria-label='close sidebar' className='drawer-overlay'></label>
-                  <ul className='min-h-full p-4 menu w-80 bg-base-200 text-base-content'>
-                    <li>
-                      <a>Sidebar Item 1</a>
-                    </li>
-                    <li>
-                      <a>Sidebar Item 2</a>
-                    </li>
-                  </ul>
+                  <div className='z-50 drawer-side'>
+                    <label
+                      htmlFor='graph-logs-side-sheet'
+                      aria-label='close sidebar'
+                      className='drawer-overlay'
+                    ></label>
+                    <ul className='min-h-full p-4 menu w-80 bg-base-200 text-base-content'>
+                      {graphRunLogs.map((item, index) => (
+                        <li key={index}>
+                          <div>{console.log(item)}</div>
+                          <a>{item}</a>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
                 </div>
-              </div>
+              ) : (
+                <></>
+              )}
               <button>
-                <Tippy content='Coming Soon!' placement='top'>
+                <Tippy content='Import - Coming Soon!' placement='top'>
                   <DocumentArrowDownIcon className='w-5 h-5 fill-neutral-200 text-neutral-400' />
                 </Tippy>
               </button>
               <button>
-                <Tippy content='Coming Soon!' placement='top'>
+                <Tippy content='Export - Coming Soon!' placement='top'>
                   <DocumentArrowUpIcon className='w-5 h-5 fill-neutral-200 text-neutral-400' />
                 </Tippy>
               </button>

src/components/molecules/workspace/WorkspaceContent.js

@@ -7,6 +7,7 @@ import TabPanelHeader from '../headers/TabPanelHeader';
 const WorkspaceContent = () => {
   const setNodes = useCanvasStore((state) => state.setNodes);
   const setEdges = useCanvasStore((state) => state.setEdges);
+  const setLogs = useCanvasStore((state) => state.setLogs);
 
   const focusTabId = useTabStore((state) => state.focusTabId);
   const tabs = useTabStore((state) => state.tabs);
@@ -19,10 +20,11 @@ const WorkspaceContent = () => {
     const result = init(focusTab.flowDataDraft ? focusTab.flowDataDraft : focusTab.flowData);
     setNodes(result.nodes);
     setEdges(result.edges);
+    setLogs([]);
   }
 
   return (
-    <div className='flex flex-col h-full'>
+    <div className='flex h-full flex-col'>
       <TabPanelHeader />
       {focusTab ? (
         <Flow collectionId={focusTab.collectionId} />

src/stores/CanvasStore.js

@@ -19,6 +19,7 @@ import { getDefaultValue } from 'utils/common';
 const useCanvasStore = create((set, get) => ({
   nodes: [],
   edges: [],
+  logs: [],
   onNodesChange: (changes) => {
     set({
       nodes: applyNodeChanges(changes, get().nodes),
@@ -49,6 +50,9 @@ const useCanvasStore = create((set, get) => ({
     set({ edges });
     useTabStore.getState().updateFlowTestEdges(get().edges);
   },
+  setLogs: (logs) => {
+    set({ logs });
+  },
   setAuthNodeType: (nodeId, authType) => {
     set({
       nodes: get().nodes.map((node) => {