Integrate selected timeout to graph run

Author: jsajal

src/components/molecules/flow/graph/Graph.js

@@ -14,7 +14,7 @@ class Graph {
     this.nodes = nodes;
     this.edges = edges;
     this.logs = initialLogs;
-    this.timeout = 60000; //ms
+    this.timeout = useCanvasStore.getState().timeout;
     this.startTime = startTime;
     this.graphRunNodeOutput = {};
     this.auth = undefined;

src/components/molecules/flow/utils.js

@@ -116,3 +116,11 @@ export const initFlowData = {
     },
   ],
 };
+
+export const timeoutForGraphRun = [
+  { value: '60000', label: '1 minute' },
+  { value: '300000', label: '5 minutes' },
+  { value: '600000', label: '10 minutes' },
+  { value: '900000', label: '15 minutes' },
+  { value: '1800000', label: '30 minutes' },
+];

src/components/molecules/headers/TabPanelHeader.js

@@ -17,13 +17,15 @@ import useCanvasStore from 'stores/CanvasStore';
 import SlidingPane from 'react-sliding-pane';
 import 'react-sliding-pane/dist/react-sliding-pane.css';
 import TimeSelector from 'components/atoms/common/TimeSelector';
+import { timeoutForGraphRun } from '../flow/utils';
 
 const TabPanelHeader = () => {
   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);
+  const setTimeout = useCanvasStore((state) => state.setTimeout);
 
   const [slidingPaneState, setSlidingPaneState] = useState({
     isPaneOpen: false,
@@ -34,28 +36,21 @@ const TabPanelHeader = () => {
 
   const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
 
-  const sampleArrayForOptionsData = [
-    { value: '1', label: '5 seconds' },
-    { value: '2', label: '10 seconds' },
-    { value: '3', label: '15 seconds' },
-    { value: '4', label: '20 seconds' },
-    { value: '5', label: '25 seconds' },
-  ];
   return (
     <div className='flex items-center justify-between gap-4 px-6 py-2 border-b border-neutral-300'>
       {focusTab ? (
         <>
           <div className='text-base tracking-[0.15em]'>{focusTab.name}</div>
           <div className='flex items-center justify-between gap-4 border-l border-neutral-300'>
-            <TimeSelector
-              defaultOptionData={{ value: 'select_timer', label: 'Select Timer' }}
-              optionsData={sampleArrayForOptionsData}
-              onSelectHandler={(event) => {
-                console.log(`\n \n onselectHandler`);
-                console.log(event.target?.value);
-                console.log(`\n \n`);
-              }}
-            />
+            {focusTab.type === OBJ_TYPES.flowtest && (
+              <TimeSelector
+                defaultOptionData={{ value: 'select_timer', label: 'Select Timer' }}
+                optionsData={timeoutForGraphRun}
+                onSelectHandler={(event) => {
+                  setTimeout(event.target?.value);
+                }}
+              />
+            )}
 
             <SaveFlowModal tab={focusTab} />
             {focusTab.type === OBJ_TYPES.flowtest && graphRunLogs.length != 0 ? (

src/stores/CanvasStore.js

@@ -9,6 +9,7 @@ const useCanvasStore = create((set, get) => ({
   edges: [],
   logs: [],
   collectionId: '',
+  timeout: '60000',
   onNodesChange: (changes) => {
     set({
       nodes: applyNodeChanges(changes, get().nodes),
@@ -45,6 +46,9 @@ const useCanvasStore = create((set, get) => ({
   setCollectionId: (collectionId) => {
     set({ collectionId });
   },
+  setTimeout: (timeout) => {
+    set({ timeout });
+  },
   setAuthNodeType: (nodeId, authType) => {
     set({
       nodes: get().nodes.map((node) => {