3923 client - Add polling for workflow execution status in sheets

Author: ivicac

client/src/ee/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx

@@ -5,12 +5,15 @@ import WorkflowExecutionSheetWorkflowPanel from '@/ee/pages/embedded/workflow-ex
 import {useGetComponentDefinitionsQuery} from '@/ee/shared/queries/embedded/componentDefinitions.queries';
 import {useGetIntegrationWorkflowExecutionQuery} from '@/ee/shared/queries/embedded/workflowExecutions.queries';
 import {WorkflowReadOnlyProvider} from '@/pages/platform/workflow-editor/providers/workflowEditorProvider';
-import {useCallback} from 'react';
+import {getWorkflowStatusType} from '@/shared/components/workflow-executions/util/workflowExecution-utils';
+import {useCallback, useMemo} from 'react';
 import {useShallow} from 'zustand/react/shallow';
 
 import useWorkflowExecutionSheetStore from '../../stores/useWorkflowExecutionSheetStore';
 import WorkflowExecutionSheetContent from './WorkflowExecutionSheetContent';
 
+const POLLING_INTERVAL_MS = 2000;
+
 const WorkflowExecutionSheet = () => {
     const {setWorkflowExecutionSheetOpen, workflowExecutionId, workflowExecutionSheetOpen} =
         useWorkflowExecutionSheetStore(
@@ -28,6 +31,20 @@ const WorkflowExecutionSheet = () => {
         workflowExecutionSheetOpen
     );
 
+    const isWorkflowRunning = useMemo(() => {
+        if (!workflowExecution?.job) {
+            return false;
+        }
+
+        return getWorkflowStatusType(workflowExecution.job, workflowExecution.triggerExecution) === 'running';
+    }, [workflowExecution]);
+
+    useGetIntegrationWorkflowExecutionQuery(
+        {id: workflowExecutionId},
+        workflowExecutionSheetOpen && isWorkflowRunning,
+        POLLING_INTERVAL_MS
+    );
+
     const handleOpenChange = useCallback(() => {
         setWorkflowExecutionSheetOpen(!workflowExecutionSheetOpen);
     }, [workflowExecutionSheetOpen, setWorkflowExecutionSheetOpen]);

client/src/ee/shared/queries/embedded/workflowExecutions.queries.ts

@@ -24,9 +24,14 @@ export const useGetIntegrationWorkflowExecutionsQuery = (request: GetWorkflowExe
         queryFn: () => new WorkflowExecutionApi().getWorkflowExecutionsPage(request),
     });
 
-export const useGetIntegrationWorkflowExecutionQuery = (request: GetWorkflowExecutionRequest, isEnabled: boolean) =>
+export const useGetIntegrationWorkflowExecutionQuery = (
+    request: GetWorkflowExecutionRequest,
+    isEnabled: boolean,
+    refetchInterval?: number | false
+) =>
     useQuery<WorkflowExecution, Error>({
         queryKey: WorkflowExecutionKeys.workflowExecution(request.id),
         queryFn: () => new WorkflowExecutionApi().getWorkflowExecution(request),
         enabled: isEnabled,
+        refetchInterval,
     });

client/src/pages/automation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx

@@ -2,17 +2,20 @@ import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components
 import {Sheet, SheetCloseButton, SheetContent, SheetTitle} from '@/components/ui/sheet';
 import {Spinner} from '@/components/ui/spinner';
 import {WorkflowReadOnlyProvider} from '@/pages/platform/workflow-editor/providers/workflowEditorProvider';
+import {getWorkflowStatusType} from '@/shared/components/workflow-executions/util/workflowExecution-utils';
 import {useGetComponentDefinitionsQuery} from '@/shared/queries/automation/componentDefinitions.queries';
 import {useGetProjectWorkflowExecutionQuery} from '@/shared/queries/automation/workflowExecutions.queries';
 import {WorkflowIcon} from 'lucide-react';
 import {VisuallyHidden} from 'radix-ui';
-import {useCallback} from 'react';
+import {useCallback, useMemo} from 'react';
 import {useShallow} from 'zustand/react/shallow';
 
 import useWorkflowExecutionSheetStore from '../../stores/useWorkflowExecutionSheetStore';
 import WorkflowExecutionSheetContent from './WorkflowExecutionSheetContent';
 import WorkflowExecutionSheetWorkflowPanel from './WorkflowExecutionSheetWorkflowPanel';
 
+const POLLING_INTERVAL_MS = 2000;
+
 const WorkflowExecutionSheet = () => {
     const {setWorkflowExecutionSheetOpen, workflowExecutionId, workflowExecutionSheetOpen} =
         useWorkflowExecutionSheetStore(
@@ -30,6 +33,20 @@ const WorkflowExecutionSheet = () => {
         workflowExecutionSheetOpen
     );
 
+    const isWorkflowRunning = useMemo(() => {
+        if (!workflowExecution?.job) {
+            return false;
+        }
+
+        return getWorkflowStatusType(workflowExecution.job, workflowExecution.triggerExecution) === 'running';
+    }, [workflowExecution]);
+
+    useGetProjectWorkflowExecutionQuery(
+        {id: workflowExecutionId},
+        workflowExecutionSheetOpen && isWorkflowRunning,
+        POLLING_INTERVAL_MS
+    );
+
     const handleOpenChange = useCallback(() => {
         setWorkflowExecutionSheetOpen(!workflowExecutionSheetOpen);
     }, [workflowExecutionSheetOpen, setWorkflowExecutionSheetOpen]);

client/src/shared/queries/automation/workflowExecutions.queries.ts

@@ -28,9 +28,14 @@ export const useGetWorkspaceProjectWorkflowExecutionsQuery = (request: GetWorkfl
             }),
     });
 
-export const useGetProjectWorkflowExecutionQuery = (request: GetWorkflowExecutionRequest, enabled?: boolean) =>
+export const useGetProjectWorkflowExecutionQuery = (
+    request: GetWorkflowExecutionRequest,
+    enabled?: boolean,
+    refetchInterval?: number | false
+) =>
     useQuery<WorkflowExecution, Error>({
         queryKey: WorkflowExecutionKeys.workflowExecution(request.id),
         queryFn: () => new WorkflowExecutionApi().getWorkflowExecution(request),
         enabled: enabled === undefined ? true : enabled,
+        refetchInterval,
     });