Merge pull request #269 from Tauffer-Consulting/fix/minor-react-query…

…-bugs

fix: disable auto-fetch

frontend/src/features/myWorkflows/api/runs/useRunTasks.ts

@@ -38,7 +38,7 @@ export const useRunTasks = (
     },
     enabled: !!(workspaceId && workflowId && runId),
     getNextPageParam: (res, _, page) =>
-      res.metadata?.last_page === page ? page + 1 : page,
+      (res.metadata?.last_page ?? 0) > page ? page + 1 : null,
     ...config,
   });
 };

frontend/src/features/myWorkflows/components/WorkflowDetail/WorkflowRunDetail.tsx

@@ -49,7 +49,7 @@ export const WorkflowRunDetail: React.FC<Props> = ({
       taskTryNumber: String(taskData?.try_number),
     },
     {
-      refetchInterval: autoUpdate ? 1500 : undefined,
+      refetchInterval: () => (autoUpdate ? 1500 : false),
     },
   );
 

frontend/src/features/myWorkflows/components/WorkflowDetail/WorkflowRunsTable.tsx

@@ -18,7 +18,6 @@ interface Props {
   selectedRun: IWorkflowRuns | null;
   onSelectedRunChange: (run: IWorkflowRuns | null) => void;
   triggerRun: () => void;
-  refresh: () => void;
 }
 
 export const WorkflowRunsTable: React.FC<Props> = ({
@@ -27,7 +26,6 @@ export const WorkflowRunsTable: React.FC<Props> = ({
   selectedRun,
   onSelectedRunChange: setSelectedRun,
   triggerRun,
-  refresh,
 }) => {
   const navigation = useNavigate();
   const [paginationModel, setPaginationModel] = useState({
@@ -37,15 +35,19 @@ export const WorkflowRunsTable: React.FC<Props> = ({
 
   const { workspace } = useWorkspaces();
 
-  const { data: workflowRuns, isLoading } = useRuns(
+  const {
+    data: workflowRuns,
+    isLoading,
+    refetch,
+  } = useRuns(
     {
       workspaceId: workspace?.id,
       page: paginationModel.page,
       pageSize: paginationModel.pageSize,
       workflowId,
     },
     {
-      refetchInterval: autoUpdate ? 1500 : undefined,
+      refetchInterval: () => (autoUpdate ? 1500 : false),
     },
   );
 
@@ -182,7 +184,7 @@ export const WorkflowRunsTable: React.FC<Props> = ({
                 footer: WorkflowRunTableFooter,
               }}
               slotProps={{
-                footer: { triggerRun, refresh },
+                footer: { triggerRun, refresh: refetch },
               }}
               sx={{
                 "&.MuiDataGrid-root .MuiDataGrid-cell:focus": {

frontend/src/features/myWorkflows/components/WorkflowDetail/index.tsx

@@ -56,17 +56,28 @@ export const WorkflowDetail: React.FC = () => {
     workflowId: id as string,
   });
 
-  const { data: allTasks } = useRunTasks(
+  const {
+    data: allTasks,
+    fetchNextPage,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useRunTasks(
     {
       workspaceId: workspace?.id,
       workflowId: id as string,
       runId: selectedRun?.workflow_run_id,
     },
     {
-      refetchInterval: autoUpdate ? 1500 : undefined,
+      refetchInterval: () => (autoUpdate ? 1500 : false),
     },
   );
 
+  useEffect(() => {
+    if (hasNextPage && !isFetchingNextPage) {
+      void fetchNextPage();
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+
   const { mutateAsync: handleRunWorkflow } = useStartRun(
     {
       workspaceId: workspace?.id,
@@ -124,25 +135,27 @@ export const WorkflowDetail: React.FC = () => {
     return { nodes, edges, tasks };
   }, [allTasks, workflow]);
 
-  const triggerRun = async () => {
+  const triggerRun = useCallback(async () => {
     if (workflow?.id) {
       await handleRunWorkflow({ workflowId: String(workflow.id) });
       setSelectedRun(null);
     }
-  };
+  }, [workflow, handleRunWorkflow, setSelectedRun]);
 
   useEffect(() => {
     workflowPanelRef.current?.setNodes(nodes);
     workflowPanelRef.current?.setEdges(edges);
     setTasks(tasks);
   }, [nodes, edges, tasks]);
 
-  const refresh = useCallback(async () => {
+  useEffect(() => {
     if (
       selectedRun &&
       (selectedRun.state === "success" || selectedRun.state === "failed")
     ) {
-      setAutoUpdate(false);
+      setTimeout(() => {
+        setAutoUpdate(false);
+      }, 3000);
     } else {
       setAutoUpdate(true);
     }
@@ -173,7 +186,6 @@ export const WorkflowDetail: React.FC = () => {
             <WorkflowRunsTable
               autoUpdate={autoUpdate}
               triggerRun={triggerRun}
-              refresh={refresh}
               selectedRun={selectedRun}
               onSelectedRunChange={handleSelectRun}
               workflowId={id as string}