Cleanup TaskDetails

Author: camielvs

src/components/shared/ContextPanel/Blocks/LinkBlock.tsx

@@ -1,11 +1,10 @@
 import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Link } from "@/components/ui/link";
 import { Heading, Paragraph } from "@/components/ui/typography";
 
-import { UrlBlock, type UrlBlockProps } from "./LinkBlock";
-
 export interface ListBlockItemProps {
   name?: string;
-  value?: string | UrlBlockProps;
+  value?: string | { href: string; text: string };
   critical?: boolean;
 }
 
@@ -73,8 +72,17 @@ const ListBlockItem = ({ name, value, critical }: ListBlockItemProps) => {
           {name}:
         </Paragraph>
       )}
-      {isUrlBlock(value) ? (
-        <UrlBlock href={value.href} text={value.text} />
+      {isLink(value) ? (
+        <Link
+          href={value.href}
+          size="xs"
+          variant="classic"
+          external
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {value.text}
+        </Link>
       ) : (
         <Paragraph
           size="xs"
@@ -88,6 +96,8 @@ const ListBlockItem = ({ name, value, critical }: ListBlockItemProps) => {
   );
 };
 
-const isUrlBlock = (val: string | UrlBlockProps): val is UrlBlockProps => {
+const isLink = (
+  val: string | { href: string; text: string },
+): val is { href: string; text: string } => {
   return typeof val === "object" && val !== null && "href" in val;
 };

src/components/shared/ContextPanel/Blocks/ListBlock.tsx

@@ -102,6 +102,10 @@ export const ExecutionDetails = ({
     const executionJobLinks = getExecutionJobLinks(containerState);
     if (executionJobLinks) {
       executionJobLinks.forEach((linkInfo) => {
+        if (!linkInfo.url) {
+          return;
+        }
+
         items.push({
           name: linkInfo.name,
           value: { text: linkInfo.value, href: linkInfo.url },

src/components/shared/ExecutionDetails/ExecutionDetails.tsx

@@ -1,6 +1,5 @@
 import { useNavigate } from "@tanstack/react-router";
 import { useStore } from "@xyflow/react";
-import { CircleFadingArrowUp, CopyIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { TooltipButtonProps } from "@/components/shared/Buttons/TooltipButton";
@@ -132,38 +131,26 @@ const TaskNodeCard = () => {
     const actions: Array<TooltipButtonProps> = [];
 
     if (!readOnly) {
-      actions.push(
-        {
-          children: (
-            <div className="flex items-center gap-2">
-              <CopyIcon />
-            </div>
-          ),
-          variant: "outline",
-          tooltip: "Duplicate Task",
-          onClick: callbacks.onDuplicate,
-        },
-        {
-          children: (
-            <div className="flex items-center gap-2">
-              <CircleFadingArrowUp />
-            </div>
-          ),
-          variant: "outline",
-          className: cn(isCustomComponent && "hidden"),
-          tooltip: "Update Task from Source URL",
-          onClick: callbacks.onUpgrade,
-        },
-      );
+      actions.push({
+        children: <Icon name="Copy" size="sm" />,
+        variant: "outline",
+        tooltip: "Duplicate Task",
+        onClick: callbacks.onDuplicate,
+      });
+    }
+
+    if (!readOnly && !isCustomComponent) {
+      actions.push({
+        children: <Icon name="CircleFadingArrowUp" size="sm" />,
+        variant: "outline",
+        tooltip: "Update Task from Source URL",
+        onClick: callbacks.onUpgrade,
+      });
     }
 
     if (isSubgraphNode && taskId && isSubgraphNavigationEnabled) {
       actions.push({
-        children: (
-          <div className="flex items-center gap-2">
-            <Icon name="Workflow" size="sm" />
-          </div>
-        ),
+        children: <Icon name="Workflow" size="sm" />,
         variant: "outline",
         tooltip: `Enter Subgraph: ${subgraphDescription}`,
         onClick: () => navigateToSubgraph(taskId),
@@ -172,11 +159,7 @@ const TaskNodeCard = () => {
 
     if (isInAppEditorEnabled) {
       actions.push({
-        children: (
-          <div className="flex items-center gap-2">
-            <Icon name="FilePenLine" size="sm" />
-          </div>
-        ),
+        children: <Icon name="FilePenLine" size="sm" />,
         variant: "outline",
         tooltip: "Edit Component Definition",
         onClick: handleEditComponent,

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx

@@ -97,8 +97,8 @@ const IOCellHeader = ({
                       artifactData.is_dir || false,
                     )}
                     external
-                    iconClassName="h-2.5 w-2.5"
-                    className="font-mono break-all text-[10px] text-blue-600 hover:text-blue-800 hover:underline flex gap-1"
+                    size="sm"
+                    variant="classic"
                   >
                     Link
                   </Link>