From 9b5c4f018f4353c00f960c30282cc5b2915646af Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Wed, 5 Feb 2025 00:45:15 +0800
Subject: [PATCH] Add title and remove type from the runs table (#1717)

---
 skyvern-frontend/src/api/types.ts             | 25 +++++++++++++++++++
 skyvern-frontend/src/hooks/useRunsQuery.ts    |  6 ++---
 .../src/routes/history/RunHistory.tsx         | 21 +++++++++-------
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/skyvern-frontend/src/api/types.ts b/skyvern-frontend/src/api/types.ts
index 7a923640..189d189d 100644
--- a/skyvern-frontend/src/api/types.ts
+++ b/skyvern-frontend/src/api/types.ts
@@ -82,6 +82,31 @@ export type StepApiResponse = {
   step_cost: number;
 };
 
+export type Task = {
+  task_id: string;
+  status: Status;
+  created_at: string; // ISO 8601
+  modified_at: string; // ISO 8601
+  extracted_information: Record<string, unknown> | string | null;
+  screenshot_url: string | null;
+  recording_url: string | null;
+  organization_id: string;
+  workflow_run_id: string | null;
+  order: number | null;
+  retry: number | null;
+  max_steps_per_run: number | null;
+  errors: Array<Record<string, unknown>>;
+  title: string | null;
+  url: string;
+  webhook_callback_url: string | null;
+  navigation_goal: string | null;
+  data_extraction_goal: string | null;
+  navigation_payload: Record<string, unknown> | string | null;
+  complete_criterion: string | null;
+  terminate_criterion: string | null;
+  application: string | null;
+};
+
 export type TaskApiResponse = {
   request: CreateTaskRequest;
   task_id: string;
diff --git a/skyvern-frontend/src/hooks/useRunsQuery.ts b/skyvern-frontend/src/hooks/useRunsQuery.ts
index 48646e85..2f2cff99 100644
--- a/skyvern-frontend/src/hooks/useRunsQuery.ts
+++ b/skyvern-frontend/src/hooks/useRunsQuery.ts
@@ -1,9 +1,9 @@
 import { getClient } from "@/api/AxiosClient";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
-import { Status, TaskApiResponse, WorkflowRunApiResponse } from "@/api/types";
+import { Status, Task, WorkflowRunApiResponse } from "@/api/types";
 
-type QueryReturnType = Array<TaskApiResponse | WorkflowRunApiResponse>;
+type QueryReturnType = Array<Task | WorkflowRunApiResponse>;
 type UseQueryOptions = Omit<
   Parameters<typeof useQuery<QueryReturnType>>[0],
   "queryKey" | "queryFn"
@@ -16,7 +16,7 @@ type Props = {
 
 function useRunsQuery({ page = 1, statusFilters }: Props) {
   const credentialGetter = useCredentialGetter();
-  return useQuery<Array<TaskApiResponse | WorkflowRunApiResponse>>({
+  return useQuery<Array<Task | WorkflowRunApiResponse>>({
     queryKey: ["runs", { statusFilters }, page],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
diff --git a/skyvern-frontend/src/routes/history/RunHistory.tsx b/skyvern-frontend/src/routes/history/RunHistory.tsx
index 30367aa7..56dae575 100644
--- a/skyvern-frontend/src/routes/history/RunHistory.tsx
+++ b/skyvern-frontend/src/routes/history/RunHistory.tsx
@@ -1,4 +1,4 @@
-import { Status, TaskApiResponse, WorkflowRunApiResponse } from "@/api/types";
+import { Status, Task, WorkflowRunApiResponse } from "@/api/types";
 import { StatusBadge } from "@/components/StatusBadge";
 import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
 import {
@@ -23,10 +23,9 @@ import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
 import { cn } from "@/util/utils";
 import { useState } from "react";
 import { useSearchParams, useNavigate } from "react-router-dom";
+import { WorkflowTitle } from "../workflows/WorkflowTitle";
 
-function isTaskApiResponse(
-  run: TaskApiResponse | WorkflowRunApiResponse,
-): run is TaskApiResponse {
+function isTask(run: Task | WorkflowRunApiResponse): run is Task {
   return "task_id" in run;
 }
 
@@ -62,9 +61,9 @@ function RunHistory() {
           <TableHeader className="rounded-t-lg bg-slate-elevation2">
             <TableRow>
               <TableHead className="w-1/4 rounded-tl-lg text-slate-400">
-                Type
+                Run ID
               </TableHead>
-              <TableHead className="w-1/4 text-slate-400">Run ID</TableHead>
+              <TableHead className="w-1/4 text-slate-400">Title</TableHead>
               <TableHead className="w-1/4 text-slate-400">Status</TableHead>
               <TableHead className="w-1/4 rounded-tr-lg text-slate-400">
                 Created At
@@ -89,7 +88,7 @@ function RunHistory() {
               </TableRow>
             ) : null}
             {runs?.map((run) => {
-              if (isTaskApiResponse(run)) {
+              if (isTask(run)) {
                 return (
                   <TableRow
                     key={run.task_id}
@@ -98,8 +97,8 @@ function RunHistory() {
                       handleNavigate(event, `/tasks/${run.task_id}/actions`);
                     }}
                   >
-                    <TableCell>Task</TableCell>
                     <TableCell>{run.task_id}</TableCell>
+                    <TableCell>{run.title ?? "Untitled Task"}</TableCell>
                     <TableCell>
                       <StatusBadge status={run.status} />
                     </TableCell>
@@ -120,8 +119,12 @@ function RunHistory() {
                     );
                   }}
                 >
-                  <TableCell>Workflow</TableCell>
                   <TableCell>{run.workflow_run_id}</TableCell>
+                  <TableCell>
+                    <WorkflowTitle
+                      workflowPermanentId={run.workflow_permanent_id}
+                    />
+                  </TableCell>
                   <TableCell>
                     <StatusBadge status={run.status} />
                   </TableCell>