Open task in new tab when cmd or ctrl (#514)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

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={() => {
+                      onClick={(event) => handleNavigate(event, task.task_id)}
-                        navigate(`${task.task_id}/actions`);
-                      }}
                     >
                       {task.task_id}
                     </TableCell>
                     <TableCell
                       className="w-1/4 cursor-pointer max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis"
-                      onClick={() => {
+                      onClick={(event) => handleNavigate(event, task.task_id)}
-                        navigate(`${task.task_id}/actions`);
-                      }}
                     >
                       {task.request.url}
                     </TableCell>
                     <TableCell
                       className="w-1/6 cursor-pointer"
-                      onClick={() => {
+                      onClick={(event) => handleNavigate(event, task.task_id)}
-                        navigate(`${task.task_id}/actions`);
-                      }}
                     >
                       <StatusBadge status={task.status} />
                     </TableCell>
                     <TableCell
                       className="w-1/4 cursor-pointer"
-                      onClick={() => {
+                      onClick={(event) => handleNavigate(event, task.task_id)}
-                        navigate(`${task.task_id}/actions`);
-                      }}
                     >
                       {basicTimeFormat(task.created_at)}
                     </TableCell>

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={() => {
+                  onClick={(event) => handleNavigate(event, task.task_id)}
-                    navigate(`${task.task_id}/actions`);
-                  }}
                 >
                   <TableCell className="w-1/4">{task.task_id}</TableCell>
                   <TableCell className="w-1/4 max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis">

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={() => {
+        onClick={(event) => handleNavigate(event, task.task_id)}
-          navigate(`/tasks/${task.task_id}/actions`);
-        }}
       >
         <CardHeader>
           <CardTitle className="overflow-hidden text-ellipsis whitespace-nowrap">