From 9f0cad5dd8af1cf153f2bb6e83454a9f00b63056 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Thu, 25 Jul 2024 07:35:47 -0700
Subject: [PATCH] Add pagination to workflow tasks (#647)

---
 .../src/routes/workflows/WorkflowPage.tsx     | 138 ++++++++++--------
 .../src/routes/workflows/WorkflowRun.tsx      |  53 ++++++-
 2 files changed, 124 insertions(+), 67 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx b/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
index dcc615b9..d7b2353c 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
@@ -19,6 +19,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { basicTimeFormat } from "@/util/timeFormat";
 import { cn } from "@/util/utils";
 import { useQuery } from "@tanstack/react-query";
 import {
@@ -63,73 +64,88 @@ function WorkflowPage() {
           <Link to="run">Create New Run</Link>
         </Button>
       </header>
-      <div>
+      <div className="space-y-4">
         <header>
           <h1 className="text-lg font-semibold">Past Runs</h1>
         </header>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-1/2">ID</TableHead>
-              <TableHead className="w-1/2">Status</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {isLoading ? (
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
               <TableRow>
-                <TableCell colSpan={2}>Loading...</TableCell>
+                <TableHead className="w-1/3">ID</TableHead>
+                <TableHead className="w-1/3">Status</TableHead>
+                <TableHead className="w-1/3">Created At</TableHead>
               </TableRow>
-            ) : workflowRuns?.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={2}>No workflow runs found</TableCell>
-              </TableRow>
-            ) : (
-              workflowRuns?.map((workflowRun) => (
-                <TableRow
-                  key={workflowRun.workflow_run_id}
-                  onClick={() => {
-                    navigate(`${workflowRun.workflow_run_id}`);
-                  }}
-                  className="cursor-pointer"
-                >
-                  <TableCell>{workflowRun.workflow_run_id}</TableCell>
-                  <TableCell>
-                    <StatusBadge status={workflowRun.status} />
-                  </TableCell>
+            </TableHeader>
+            <TableBody>
+              {isLoading ? (
+                <TableRow>
+                  <TableCell colSpan={3}>Loading...</TableCell>
                 </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-        <Pagination className="pt-2">
-          <PaginationContent>
-            <PaginationItem>
-              <PaginationPrevious
-                className={cn({ "cursor-not-allowed": page === 1 })}
-                onClick={() => {
-                  if (page === 1) {
-                    return;
-                  }
-                  const params = new URLSearchParams();
-                  params.set("page", String(Math.max(1, page - 1)));
-                  setSearchParams(params, { replace: true });
-                }}
-              />
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink>{page}</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationNext
-                onClick={() => {
-                  const params = new URLSearchParams();
-                  params.set("page", String(page + 1));
-                  setSearchParams(params, { replace: true });
-                }}
-              />
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
+              ) : workflowRuns?.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={3}>No workflow runs found</TableCell>
+                </TableRow>
+              ) : (
+                workflowRuns?.map((workflowRun) => (
+                  <TableRow
+                    key={workflowRun.workflow_run_id}
+                    onClick={(event) => {
+                      if (event.ctrlKey || event.metaKey) {
+                        window.open(
+                          window.location.origin +
+                            `/workflows/${workflowPermanentId}/${workflowRun.workflow_run_id}`,
+                          "_blank",
+                          "noopener,noreferrer",
+                        );
+                        return;
+                      }
+                      navigate(`${workflowRun.workflow_run_id}`);
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <TableCell>{workflowRun.workflow_run_id}</TableCell>
+                    <TableCell>
+                      <StatusBadge status={workflowRun.status} />
+                    </TableCell>
+                    <TableCell>
+                      {basicTimeFormat(workflowRun.created_at)}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+          <Pagination className="pt-2">
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious
+                  className={cn({ "cursor-not-allowed": page === 1 })}
+                  onClick={() => {
+                    if (page === 1) {
+                      return;
+                    }
+                    const params = new URLSearchParams();
+                    params.set("page", String(Math.max(1, page - 1)));
+                    setSearchParams(params, { replace: true });
+                  }}
+                />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink>{page}</PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationNext
+                  onClick={() => {
+                    const params = new URLSearchParams();
+                    params.set("page", String(page + 1));
+                    setSearchParams(params, { replace: true });
+                  }}
+                />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
       </div>
     </div>
   );
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index 229e7b57..a51bd553 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -12,14 +12,26 @@ import {
 } from "@/components/ui/table";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows";
 import { basicTimeFormat } from "@/util/timeFormat";
 import { TaskActions } from "../tasks/list/TaskActions";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import { cn } from "@/util/utils";
 
 function WorkflowRun() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
+
   const { workflowRunId, workflowPermanentId } = useParams();
   const credentialGetter = useCredentialGetter();
   const navigate = useNavigate();
@@ -37,11 +49,13 @@ function WorkflowRun() {
   const { data: workflowTasks, isLoading: workflowTasksIsLoading } = useQuery<
     Array<TaskApiResponse>
   >({
-    queryKey: ["workflowTasks", workflowRunId],
+    queryKey: ["workflowTasks", workflowRunId, page],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
+      const params = new URLSearchParams();
+      params.append("page", String(page));
       return client
-        .get(`/tasks?workflow_run_id=${workflowRunId}&page_size=200`)
+        .get(`/tasks?workflow_run_id=${workflowRunId}`, { params })
         .then((response) => response.data);
     },
   });
@@ -90,9 +104,7 @@ function WorkflowRun() {
                 <TaskListSkeletonRows />
               ) : workflowTasks?.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={5}>
-                    This workflow run does not have any tasks
-                  </TableCell>
+                  <TableCell colSpan={5}>No tasks</TableCell>
                 </TableRow>
               ) : (
                 workflowTasks?.map((task) => {
@@ -131,6 +143,35 @@ function WorkflowRun() {
               )}
             </TableBody>
           </Table>
+          <Pagination className="pt-2">
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious
+                  className={cn({ "cursor-not-allowed": page === 1 })}
+                  onClick={() => {
+                    if (page === 1) {
+                      return;
+                    }
+                    const params = new URLSearchParams();
+                    params.set("page", String(Math.max(1, page - 1)));
+                    setSearchParams(params, { replace: true });
+                  }}
+                />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink>{page}</PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationNext
+                  onClick={() => {
+                    const params = new URLSearchParams();
+                    params.set("page", String(page + 1));
+                    setSearchParams(params, { replace: true });
+                  }}
+                />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
         </div>
       </div>
       <div className="space-y-4">