Skyvern Forms UI (#1330)

skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx

@@ -1,18 +1,7 @@
 import { getClient } from "@/api/AxiosClient";
-import { TaskApiResponse } from "@/api/types";
-import { useCredentialGetter } from "@/hooks/useCredentialGetter";
-import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { PAGE_SIZE } from "../constants";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { TaskListSkeletonRows } from "./TaskListSkeletonRows";
+import { Status, TaskApiResponse } from "@/api/types";
+import { StatusBadge } from "@/components/StatusBadge";
+import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
 import {
   Pagination,
   PaginationContent,
@@ -21,16 +10,69 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination";
-import { StatusBadge } from "@/components/StatusBadge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
 import { cn } from "@/util/utils";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { TaskActions } from "./TaskActions";
+import { TaskListSkeletonRows } from "./TaskListSkeletonRows";
+
+type StatusDropdownItem = {
+  label: string;
+  value: Status;
+};
+
+const statusDropdownItems: Array<StatusDropdownItem> = [
+  {
+    label: "Completed",
+    value: Status.Completed,
+  },
+  {
+    label: "Failed",
+    value: Status.Failed,
+  },
+  {
+    label: "Running",
+    value: Status.Running,
+  },
+  {
+    label: "Queued",
+    value: Status.Queued,
+  },
+  {
+    label: "Terminated",
+    value: Status.Terminated,
+  },
+  {
+    label: "Canceled",
+    value: Status.Canceled,
+  },
+  {
+    label: "Timed Out",
+    value: Status.TimedOut,
+  },
+  {
+    label: "Created",
+    value: Status.Created,
+  },
+];
 
 function TaskHistory() {
   const credentialGetter = useCredentialGetter();
   const [searchParams, setSearchParams] = useSearchParams();
   const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
   const navigate = useNavigate();
+  const [statusFilters, setStatusFilters] = useState<Array<Status>>([]);
 
   const {
     data: tasks,
@@ -38,17 +80,15 @@ function TaskHistory() {
     isError,
     error,
   } = useQuery<Array<TaskApiResponse>>({
-    queryKey: ["tasks", "history", page],
+    queryKey: ["tasks", { statusFilters }, page],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
+
       const params = new URLSearchParams();
       params.append("page", String(page));
-      params.append("page_size", String(PAGE_SIZE));
-      params.append("task_status", "completed");
-      params.append("task_status", "failed");
-      params.append("task_status", "terminated");
-      params.append("task_status", "timed_out");
-      params.append("task_status", "canceled");
+      statusFilters.forEach((status) => {
+        params.append("task_status", status);
+      });
       params.append("only_standalone_tasks", "true");
 
       return client
@@ -76,7 +116,15 @@ function TaskHistory() {
   }
 
   return (
-    <>
+    <div className="space-y-4">
+      <header className="flex items-center justify-between">
+        <h1 className="text-2xl">Task Runs</h1>
+        <StatusFilterDropdown
+          values={statusFilters}
+          onChange={setStatusFilters}
+          options={statusDropdownItems}
+        />
+      </header>
       <div className="rounded-md border">
         <Table>
           <TableHeader>
@@ -133,38 +181,37 @@ function TaskHistory() {
             )}
           </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>
-
-      <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>
   );
 }
 

skyvern-frontend/src/routes/tasks/list/TaskList.tsx

@@ -1,59 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { QueuedTasks } from "../running/QueuedTasks";
-import { RunningTasks } from "../running/RunningTasks";
-import { TaskHistory } from "./TaskHistory";
-import { Button } from "@/components/ui/button";
-import { Link } from "react-router-dom";
-import { PlusIcon } from "@radix-ui/react-icons";
-
-function TaskList() {
-  return (
-    <div className="space-y-8">
-      <header className="flex justify-end">
-        <Button asChild>
-          <Link to="/create">
-            <PlusIcon className="mr-2 h-4 w-4" />
-            Create New Task
-          </Link>
-        </Button>
-      </header>
-      <Card>
-        <CardHeader className="border-b-2">
-          <CardTitle className="text-xl">Running Tasks</CardTitle>
-          <CardDescription>Tasks that are currently running</CardDescription>
-        </CardHeader>
-        <CardContent className="p-4">
-          <div className="grid grid-cols-4 gap-4">
-            <RunningTasks />
-          </div>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader className="border-b-2">
-          <CardTitle className="text-xl">Queued Tasks</CardTitle>
-          <CardDescription>Tasks that are waiting to run</CardDescription>
-        </CardHeader>
-        <CardContent className="p-4">
-          <QueuedTasks />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader className="border-b-2">
-          <CardTitle className="text-xl">Task History</CardTitle>
-          <CardDescription>Tasks you have run previously</CardDescription>
-        </CardHeader>
-        <CardContent className="p-4">
-          <TaskHistory />
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-export { TaskList };

skyvern-frontend/src/routes/tasks/list/TasksPage.tsx

@@ -0,0 +1,43 @@
+import { TaskHistory } from "./TaskHistory";
+import { PromptBox } from "../create/PromptBox";
+import { useState } from "react";
+import { cn } from "@/util/utils";
+import { SavedTasks } from "../create/SavedTasks";
+
+function TasksPage() {
+  const [view, setView] = useState<"history" | "myTasks">("history");
+
+  return (
+    <div className="space-y-8">
+      <PromptBox />
+      <div className="flex w-fit gap-1 rounded-sm border border-slate-700 p-2">
+        <div
+          className={cn(
+            "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+            {
+              "bg-slate-700": view === "history",
+            },
+          )}
+          onClick={() => setView("history")}
+        >
+          Run History
+        </div>
+        <div
+          className={cn(
+            "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+            {
+              "bg-slate-700": view === "myTasks",
+            },
+          )}
+          onClick={() => setView("myTasks")}
+        >
+          My Tasks
+        </div>
+      </div>
+      {view === "history" && <TaskHistory />}
+      {view === "myTasks" && <SavedTasks />}
+    </div>
+  );
+}
+
+export { TasksPage };