From 628662604dbd2b5d1caf55643abd59935c0e6ed7 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Thu, 2 Jan 2025 04:41:06 -0800
Subject: [PATCH] Link to task diagnostics in block card (#1463)

---
 .../workflows/workflowRun/BlockCard.tsx       | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/BlockCard.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/BlockCard.tsx
index e98da89262..fc24664a80 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/BlockCard.tsx
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/BlockCard.tsx
@@ -1,8 +1,10 @@
-import { CubeIcon } from "@radix-ui/react-icons";
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
 import { WorkflowRunBlock } from "../types/workflowRunTypes";
 import { cn } from "@/util/utils";
 import { WorkflowBlockIcon } from "../editor/nodes/WorkflowBlockIcon";
 import { workflowBlockTitle } from "../editor/nodes/types";
+import { Button } from "@/components/ui/button";
+import { Link } from "react-router-dom";
 
 type Props = {
   active: boolean;
@@ -21,7 +23,7 @@ function BlockCard({ block, onClick, active }: Props) {
       )}
       onClick={onClick}
     >
-      <div className="flex justify-between">
+      <div className="flex items-center justify-between">
         <div className="flex gap-3">
           <WorkflowBlockIcon
             workflowBlockType={block.block_type}
@@ -29,10 +31,18 @@ function BlockCard({ block, onClick, active }: Props) {
           />
           <span>{workflowBlockTitle[block.block_type]}</span>
         </div>
-        <div className="flex items-center gap-1 rounded bg-slate-elevation5 px-2 py-1">
-          <CubeIcon className="size-4" />
-          <span className="text-xs">Block</span>
-        </div>
+        {block.task_id && (
+          <Button
+            title="Go to task diagnostics"
+            asChild
+            size="icon"
+            className="size-8 bg-slate-800 text-primary hover:bg-slate-700"
+          >
+            <Link to={`/tasks/${block.task_id}/diagnostics`}>
+              <ExternalLinkIcon />
+            </Link>
+          </Button>
+        )}
       </div>
     </div>
   );