Put workflow title in workflow runs table (#591)

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

@@ -0,0 +1,39 @@
+import { getClient } from "@/api/AxiosClient";
+import { WorkflowApiResponse } from "@/api/types";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+
+type Props = {
+  workflowPermanentId: string;
+};
+
+function WorkflowTitle({ workflowPermanentId }: Props) {
+  const credentialGetter = useCredentialGetter();
+
+  const {
+    data: workflow,
+    isError,
+    isLoading,
+  } = useQuery<WorkflowApiResponse>({
+    queryKey: ["workflow", workflowPermanentId],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      return client
+        .get(`/workflows/${workflowPermanentId}`)
+        .then((response) => response.data);
+    },
+  });
+
+  if (isLoading) {
+    return <Skeleton className="w-full h-6" />;
+  }
+
+  if (isError || !workflow) {
+    return <span></span>;
+  }
+
+  return <span>{workflow.title}</span>;
+}
+
+export { WorkflowTitle };

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

@@ -22,6 +22,7 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 import { cn } from "@/util/utils";
+import { WorkflowTitle } from "./WorkflowTitle";
 
 function Workflows() {
   const credentialGetter = useCredentialGetter();
@@ -153,19 +154,20 @@ function Workflows() {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead className="w-1/3">Workflow ID</TableHead>
-              <TableHead className="w-1/3">Workflow Run ID</TableHead>
-              <TableHead className="w-1/3">Status</TableHead>
+              <TableHead className="w-1/4">Workflow ID</TableHead>
+              <TableHead className="w-1/4">Workflow Title</TableHead>
+              <TableHead className="w-1/4">Workflow Run ID</TableHead>
+              <TableHead className="w-1/4">Status</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {workflowRunsIsLoading ? (
               <TableRow>
-                <TableCell colSpan={3}>Loading...</TableCell>
+                <TableCell colSpan={4}>Loading...</TableCell>
               </TableRow>
             ) : workflowRuns?.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={3}>No workflow runs found</TableCell>
+                <TableCell colSpan={4}>No workflow runs found</TableCell>
               </TableRow>
             ) : (
               workflowRuns?.map((workflowRun) => {
@@ -179,13 +181,18 @@ function Workflows() {
                     }}
                     className="cursor-pointer"
                   >
-                    <TableCell className="w-1/3">
+                    <TableCell className="w-1/4">
                       {workflowRun.workflow_permanent_id}
                     </TableCell>
-                    <TableCell className="w-1/3">
+                    <TableCell className="w-1/4">
+                      <WorkflowTitle
+                        workflowPermanentId={workflowRun.workflow_permanent_id}
+                      />
+                    </TableCell>
+                    <TableCell className="w-1/4">
                       {workflowRun.workflow_run_id}
                     </TableCell>
-                    <TableCell className="w-1/3">
+                    <TableCell className="w-1/4">
                       <StatusBadge status={workflowRun.status} />
                     </TableCell>
                   </TableRow>