implement pagination boundary checks and auto-navigation for workflow runs (#2650)

skyvern-frontend/src/routes/workflows/WorkflowPage.tsx

@@ -22,7 +22,7 @@ import {
 import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
 import { cn } from "@/util/utils";
 import { Pencil2Icon, PlayIcon } from "@radix-ui/react-icons";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Link,
   useNavigate,
@@ -40,6 +40,8 @@ function WorkflowPage() {
   const [statusFilters, setStatusFilters] = useState<Array<Status>>([]);
   const navigate = useNavigate();
 
+  const PAGE_SIZE = 10;
+
   const { data: workflowRuns, isLoading } = useWorkflowRunsQuery({
     workflowPermanentId,
     statusFilters,
@@ -47,6 +49,14 @@ function WorkflowPage() {
     refetchOnMount: "always",
   });
 
+  useEffect(() => {
+    if (!isLoading && workflowRuns && workflowRuns.length === 0 && page > 1) {
+      const params = new URLSearchParams();
+      params.set("page", String(page - 1));
+      setSearchParams(params, { replace: true });
+    }
+  }, [workflowRuns, isLoading, page, setSearchParams]);
+
   const { data: workflow, isLoading: workflowIsLoading } = useWorkflowQuery({
     workflowPermanentId,
   });
@@ -170,7 +180,15 @@ function WorkflowPage() {
               </PaginationItem>
               <PaginationItem>
                 <PaginationNext
+                  className={cn({
+                    "cursor-not-allowed":
+                      workflowRuns !== undefined &&
+                      workflowRuns.length < PAGE_SIZE,
+                  })}
                   onClick={() => {
+                    if (workflowRuns && workflowRuns.length < PAGE_SIZE) {
+                      return;
+                    }
                     const params = new URLSearchParams();
                     params.set("page", String(page + 1));
                     setSearchParams(params, { replace: true });