From 20f0fe932133c0fdb976dd1fa9adcf850f409b01 Mon Sep 17 00:00:00 2001
From: Prakash Maheshwaran
 <73785492+Prakashmaheshwaran@users.noreply.github.com>
Date: Thu, 12 Jun 2025 05:02:14 -0400
Subject: [PATCH] implement pagination boundary checks and auto-navigation for
 workflow runs (#2650)

---
 .../src/routes/workflows/WorkflowPage.tsx     | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx b/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
index c22cc2b3..d4d715ff 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
+++ b/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 });