Add pagination to workflow tasks (#647)

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,31 +64,42 @@ 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>
+        <div className="rounded-md border">
           <Table>
             <TableHeader>
               <TableRow>
-              <TableHead className="w-1/2">ID</TableHead>
+                <TableHead className="w-1/3">ID</TableHead>
-              <TableHead className="w-1/2">Status</TableHead>
+                <TableHead className="w-1/3">Status</TableHead>
+                <TableHead className="w-1/3">Created At</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {isLoading ? (
                 <TableRow>
-                <TableCell colSpan={2}>Loading...</TableCell>
+                  <TableCell colSpan={3}>Loading...</TableCell>
                 </TableRow>
               ) : workflowRuns?.length === 0 ? (
                 <TableRow>
-                <TableCell colSpan={2}>No workflow runs found</TableCell>
+                  <TableCell colSpan={3}>No workflow runs found</TableCell>
                 </TableRow>
               ) : (
                 workflowRuns?.map((workflowRun) => (
                   <TableRow
                     key={workflowRun.workflow_run_id}
-                  onClick={() => {
+                    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"
@@ -96,6 +108,9 @@ function WorkflowPage() {
                     <TableCell>
                       <StatusBadge status={workflowRun.status} />
                     </TableCell>
+                    <TableCell>
+                      {basicTimeFormat(workflowRun.created_at)}
+                    </TableCell>
                   </TableRow>
                 ))
               )}
@@ -132,6 +147,7 @@ function WorkflowPage() {
           </Pagination>
         </div>
       </div>
+    </div>
   );
 }
 

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}>
+                  <TableCell colSpan={5}>No tasks</TableCell>
-                    This workflow run does not have any 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">