Add status filters to workflow runs UI (#1639)

skyvern-frontend/src/components/StatusFilterDropdown.tsx

@@ -8,18 +8,60 @@ import {
 import { Checkbox } from "./ui/checkbox";
 import { Status } from "@/api/types";
 
+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,
+  },
+];
+
 type Item = {
   label: string;
   value: Status;
 };
 
 type Props = {
-  options: Array<Item>;
   values: Array<Status>;
   onChange: (values: Array<Status>) => void;
+  options?: Array<Item>;
 };
 
 function StatusFilterDropdown({ options, values, onChange }: Props) {
+  const dropdownOptions = options ?? statusDropdownItems; // allow options to be overridden by the user of this component
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -28,7 +70,7 @@ function StatusFilterDropdown({ options, values, onChange }: Props) {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        {options.map((item) => {
+        {dropdownOptions.map((item) => {
           return (
             <div
               key={item.value}

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

@@ -30,46 +30,6 @@ import { Button } from "@/components/ui/button";
 import { DownloadIcon } from "@radix-ui/react-icons";
 import { downloadBlob } from "@/util/downloadBlob";
 
-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();
@@ -152,7 +112,6 @@ function TaskHistory() {
           <StatusFilterDropdown
             values={statusFilters}
             onChange={setStatusFilters}
-            options={statusDropdownItems}
           />
           <Button variant="secondary" onClick={handleExport}>
             <DownloadIcon className="mr-2" />

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

@@ -1,5 +1,5 @@
 import { getClient } from "@/api/AxiosClient";
-import { WorkflowRunApiResponse } from "@/api/types";
+import { Status, WorkflowRunApiResponse } from "@/api/types";
 import { StatusBadge } from "@/components/StatusBadge";
 import { Button } from "@/components/ui/button";
 import {
@@ -32,18 +32,21 @@ import {
 } from "react-router-dom";
 import { WorkflowApiResponse } from "./types/workflowTypes";
 import { WorkflowActions } from "./WorkflowActions";
+import { useState } from "react";
+import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
 
 function WorkflowPage() {
   const credentialGetter = useCredentialGetter();
   const { workflowPermanentId } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
+  const [statusFilters, setStatusFilters] = useState<Array<Status>>([]);
   const navigate = useNavigate();
 
   const { data: workflowRuns, isLoading } = useQuery<
     Array<WorkflowRunApiResponse>
   >({
-    queryKey: ["workflowRuns", workflowPermanentId, page],
+    queryKey: ["workflowRuns", workflowPermanentId, { statusFilters }, page],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
       const params = new URLSearchParams();
@@ -110,8 +113,12 @@ function WorkflowPage() {
         </div>
       </header>
       <div className="space-y-4">
-        <header>
-          <h1 className="text-lg font-semibold">Past Runs</h1>
+        <header className="flex justify-between">
+          <h1 className="text-2xl">Past Runs</h1>
+          <StatusFilterDropdown
+            values={statusFilters}
+            onChange={setStatusFilters}
+          />
         </header>
         <div className="rounded-md border">
           <Table>

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

@@ -1,5 +1,5 @@
 import { getClient } from "@/api/AxiosClient";
-import { WorkflowRunApiResponse } from "@/api/types";
+import { Status, WorkflowRunApiResponse } from "@/api/types";
 import { StatusBadge } from "@/components/StatusBadge";
 import { Button } from "@/components/ui/button";
 import {
@@ -35,11 +35,14 @@ import { WorkflowApiResponse } from "./types/workflowTypes";
 import { WorkflowActions } from "./WorkflowActions";
 import { WorkflowsPageBanner } from "./WorkflowsPageBanner";
 import { WorkflowTitle } from "./WorkflowTitle";
+import { useState } from "react";
+import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
 
 function Workflows() {
   const credentialGetter = useCredentialGetter();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
+  const [statusFilters, setStatusFilters] = useState<Array<Status>>([]);
   const workflowsPage = searchParams.get("workflowsPage")
     ? Number(searchParams.get("workflowsPage"))
     : 1;
@@ -65,11 +68,14 @@ function Workflows() {
   const { data: workflowRuns, isLoading: workflowRunsIsLoading } = useQuery<
     Array<WorkflowRunApiResponse>
   >({
-    queryKey: ["workflowRuns", workflowRunsPage],
+    queryKey: ["workflowRuns", { statusFilters }, workflowRunsPage],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
       const params = new URLSearchParams();
       params.append("page", String(workflowRunsPage));
+      statusFilters.forEach((status) => {
+        params.append("status", status);
+      });
       return client
         .get("/workflows/runs", {
           params,
@@ -277,10 +283,16 @@ function Workflows() {
         <header>
           <div className="flex justify-between">
             <h1 className="text-2xl font-semibold">Workflow Runs</h1>
-            <Button variant="secondary" onClick={handleExport}>
-              <DownloadIcon className="mr-2" />
-              Export CSV
-            </Button>
+            <div className="flex gap-2">
+              <StatusFilterDropdown
+                values={statusFilters}
+                onChange={setStatusFilters}
+              />
+              <Button variant="secondary" onClick={handleExport}>
+                <DownloadIcon className="mr-2" />
+                Export CSV
+              </Button>
+            </div>
           </div>
         </header>
         <div className="rounded-md border">