From cca254e5c9f319a50ceeff3fd671ada0c0bac9f9 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Tue, 19 Nov 2024 12:46:56 -0800
Subject: [PATCH] Adjust responsiveness of workflow run tasks tabe (#1221)

---
 .../WorkflowBlockCollapsibleContent.tsx       | 29 ++++++++++-----
 .../src/routes/workflows/WorkflowRun.tsx      | 36 +++++++++++++++----
 2 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/WorkflowBlockCollapsibleContent.tsx b/skyvern-frontend/src/routes/workflows/WorkflowBlockCollapsibleContent.tsx
index 1a9bcf25..949a076f 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowBlockCollapsibleContent.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowBlockCollapsibleContent.tsx
@@ -34,14 +34,22 @@ function WorkflowBlockCollapsibleContent({ task, onNavigate }: Props) {
     />
   ) : null;
 
+  const isCanceled = task?.status === Status.Canceled;
+
   const showFailureReason =
     task?.status === Status.Failed ||
     task?.status === Status.Terminated ||
-    task?.status === Status.TimedOut;
+    task?.status === Status.TimedOut ||
+    task?.status === Status.Canceled;
+
   const failureReason = showFailureReason ? (
     <CodeEditor
       language="json"
-      value={JSON.stringify(task.failure_reason, null, 2)}
+      value={JSON.stringify(
+        task.failure_reason ?? (isCanceled && "This task was canceled."),
+        null,
+        2,
+      )}
       readOnly
       minHeight={"96px"}
       maxHeight={"500px"}
@@ -59,7 +67,7 @@ function WorkflowBlockCollapsibleContent({ task, onNavigate }: Props) {
         >
           <TableCell>
             <CollapsibleTrigger asChild>
-              <div className="w-fit cursor-pointer rounded-full p-2 hover:bg-muted">
+              <div className="w-10 cursor-pointer rounded-full p-2 hover:bg-muted">
                 {open ? (
                   <ChevronDownIcon className="size-6" />
                 ) : (
@@ -68,11 +76,15 @@ function WorkflowBlockCollapsibleContent({ task, onNavigate }: Props) {
               </div>
             </CollapsibleTrigger>
           </TableCell>
-          <TableCell className="w-1/4 cursor-pointer">
+          <TableCell
+            className="w-1/5 max-w-0 cursor-pointer truncate"
+            title={task.request.title ?? undefined}
+          >
             {task.request.title}
           </TableCell>
           <TableCell
-            className="w-1/4 cursor-pointer"
+            className="w-1/6 max-w-0 cursor-pointer truncate"
+            title={task.task_id}
             onClick={(event) => {
               onNavigate(event, task.task_id);
             }}
@@ -80,19 +92,20 @@ function WorkflowBlockCollapsibleContent({ task, onNavigate }: Props) {
             {task.task_id}
           </TableCell>
           <TableCell
-            className="w-1/4 max-w-64 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap"
+            className="w-1/4 max-w-0 cursor-pointer truncate"
+            title={task.request.url}
             onClick={(event) => onNavigate(event, task.task_id)}
           >
             {task.request.url}
           </TableCell>
           <TableCell
-            className="w-1/6 cursor-pointer"
+            className="w-1/8 cursor-pointer"
             onClick={(event) => onNavigate(event, task.task_id)}
           >
             <StatusBadge status={task.status} />
           </TableCell>
           <TableCell
-            className="w-1/4 cursor-pointer whitespace-nowrap"
+            className="w-1/5 max-w-0 cursor-pointer truncate"
             onClick={(event) => onNavigate(event, task.task_id)}
             title={basicTimeFormat(task.created_at)}
           >
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index 5c21586d..5ead151b 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -68,7 +68,6 @@ import {
   useParams,
   useSearchParams,
 } from "react-router-dom";
-import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows";
 import {
   statusIsFinalized,
   statusIsNotFinalized,
@@ -354,6 +353,29 @@ function WorkflowRun() {
     </div>
   ) : null;
 
+  const skeleton = (
+    <TableRow>
+      <TableCell className="w-10">
+        <Skeleton className="h-6 w-full" />
+      </TableCell>
+      <TableCell className="w-1/5">
+        <Skeleton className="h-6 w-full" />
+      </TableCell>
+      <TableCell className="w-1/6">
+        <Skeleton className="h-6 w-full" />
+      </TableCell>
+      <TableCell className="w-1/4">
+        <Skeleton className="h-6 w-full" />
+      </TableCell>
+      <TableCell className="w-1/8">
+        <Skeleton className="h-6 w-full" />
+      </TableCell>
+      <TableCell className="w-1/5">
+        <Skeleton className="h-6 w-full" />
+      </TableCell>
+    </TableRow>
+  );
+
   return (
     <div className="space-y-8">
       <header className="flex justify-between">
@@ -522,21 +544,21 @@ function WorkflowRun() {
           <Table>
             <TableHeader className="rounded-t-md bg-slate-elevation2">
               <TableRow>
-                <TableHead className="rounded-tl-md"></TableHead>
-                <TableHead className="w-1/4 text-slate-400">
+                <TableHead className="w-10 rounded-tl-md"></TableHead>
+                <TableHead className="w-1/5 text-slate-400">
                   Task Title
                 </TableHead>
-                <TableHead className="w-1/4 text-slate-400">ID</TableHead>
+                <TableHead className="w-1/6 text-slate-400">ID</TableHead>
                 <TableHead className="w-1/4 text-slate-400">URL</TableHead>
-                <TableHead className="w-1/6 text-slate-400">Status</TableHead>
-                <TableHead className="w-1/4 rounded-tr-md text-slate-400">
+                <TableHead className="w-1/8 text-slate-400">Status</TableHead>
+                <TableHead className="w-1/5 rounded-tr-md text-slate-400">
                   Created At
                 </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {workflowTasksIsLoading ? (
-                <TaskListSkeletonRows />
+                skeleton
               ) : workflowTasks?.length === 0 ? (
                 <TableRow>
                   <TableCell colSpan={6}>Could not find any tasks</TableCell>