From 3778094a9f2cd915bf06b0f229d8e7ec7f6849a5 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Tue, 25 Jun 2024 13:36:01 -0700
Subject: [PATCH] Open task in new tab when cmd or ctrl (#514)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
---
 .../src/routes/tasks/list/TaskHistory.tsx     | 28 +++++++++++--------
 .../src/routes/tasks/running/QueuedTasks.tsx  | 16 +++++++++--
 .../src/routes/tasks/running/RunningTasks.tsx | 16 +++++++++--
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx b/skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx
index 37ea2539..4fa1c9b0 100644
--- a/skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx
+++ b/skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx
@@ -60,6 +60,18 @@ function TaskHistory() {
     return <div>Error: {error?.message}</div>;
   }
 
+  function handleNavigate(event: React.MouseEvent, id: string) {
+    if (event.ctrlKey || event.metaKey) {
+      window.open(
+        window.location.origin + `/tasks/${id}/actions`,
+        "_blank",
+        "noopener,noreferrer",
+      );
+    } else {
+      navigate(`${id}/actions`);
+    }
+  }
+
   return (
     <>
       <div className="rounded-md border">
@@ -86,33 +98,25 @@ function TaskHistory() {
                   <TableRow key={task.task_id}>
                     <TableCell
                       className="w-1/4 cursor-pointer"
-                      onClick={() => {
-                        navigate(`${task.task_id}/actions`);
-                      }}
+                      onClick={(event) => handleNavigate(event, task.task_id)}
                     >
                       {task.task_id}
                     </TableCell>
                     <TableCell
                       className="w-1/4 cursor-pointer max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis"
-                      onClick={() => {
-                        navigate(`${task.task_id}/actions`);
-                      }}
+                      onClick={(event) => handleNavigate(event, task.task_id)}
                     >
                       {task.request.url}
                     </TableCell>
                     <TableCell
                       className="w-1/6 cursor-pointer"
-                      onClick={() => {
-                        navigate(`${task.task_id}/actions`);
-                      }}
+                      onClick={(event) => handleNavigate(event, task.task_id)}
                     >
                       <StatusBadge status={task.status} />
                     </TableCell>
                     <TableCell
                       className="w-1/4 cursor-pointer"
-                      onClick={() => {
-                        navigate(`${task.task_id}/actions`);
-                      }}
+                      onClick={(event) => handleNavigate(event, task.task_id)}
                     >
                       {basicTimeFormat(task.created_at)}
                     </TableCell>
diff --git a/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx b/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx
index 8aa5b161..dd2b657d 100644
--- a/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx
+++ b/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx
@@ -32,6 +32,18 @@ function QueuedTasks() {
     },
   });
 
+  function handleNavigate(event: React.MouseEvent, id: string) {
+    if (event.ctrlKey || event.metaKey) {
+      window.open(
+        window.location.origin + `/tasks/${id}/actions`,
+        "_blank",
+        "noopener,noreferrer",
+      );
+    } else {
+      navigate(`${id}/actions`);
+    }
+  }
+
   return (
     <div className="rounded-md border">
       <Table>
@@ -54,9 +66,7 @@ function QueuedTasks() {
                 <TableRow
                   key={task.task_id}
                   className="w-4"
-                  onClick={() => {
-                    navigate(`${task.task_id}/actions`);
-                  }}
+                  onClick={(event) => handleNavigate(event, task.task_id)}
                 >
                   <TableCell className="w-1/4">{task.task_id}</TableCell>
                   <TableCell className="w-1/4 max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis">
diff --git a/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx b/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx
index c9eb757d..5c91ce31 100644
--- a/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx
+++ b/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx
@@ -36,14 +36,24 @@ function RunningTasks() {
     return <div>No running tasks</div>;
   }
 
+  function handleNavigate(event: React.MouseEvent, id: string) {
+    if (event.ctrlKey || event.metaKey) {
+      window.open(
+        window.location.origin + `/tasks/${id}/actions`,
+        "_blank",
+        "noopener,noreferrer",
+      );
+    } else {
+      navigate(`/tasks/${id}/actions`);
+    }
+  }
+
   return runningTasks?.map((task) => {
     return (
       <Card
         key={task.task_id}
         className="hover:bg-muted/50 cursor-pointer"
-        onClick={() => {
-          navigate(`/tasks/${task.task_id}/actions`);
-        }}
+        onClick={(event) => handleNavigate(event, task.task_id)}
       >
         <CardHeader>
           <CardTitle className="overflow-hidden text-ellipsis whitespace-nowrap">