Rework Task Action Buttons into Action Framework

camielvs · camielvs · commit fe07e23756b7 · 2025-12-11T15:09:14.000-08:00
diff --git a/src/components/shared/Dialogs/ComponentDetailsDialog.tsx b/src/components/shared/Dialogs/ComponentDetailsDialog.tsx
@@ -17,8 +17,8 @@ import { useHydrateComponentReference } from "@/hooks/useHydrateComponentReferen
 import type { ComponentReference } from "@/utils/componentSpec";
 
 import InfoIconButton from "../Buttons/InfoIconButton";
-import TooltipButton from "../Buttons/TooltipButton";
 import { ComponentEditorDialog } from "../ComponentEditor/ComponentEditorDialog";
+import type { Action } from "../ContextPanel/Blocks/ActionBlock";
 import { ComponentFavoriteToggle } from "../FavoriteComponentToggle";
 import { InfoBox } from "../InfoBox";
 import { PublishComponent } from "../ManageComponent/PublishComponent";
@@ -32,7 +32,7 @@ interface ComponentDetailsProps {
   component: ComponentReference;
   displayName: string;
   trigger?: ReactNode;
-  actions?: ReactNode[];
+  customActions?: Action[];
   onClose?: () => void;
   onDelete?: () => void;
 }
@@ -67,7 +67,7 @@ const ComponentDetailsDialogContent = withSuspenseWrapper(
   ({
     component,
     displayName,
-    actions = [],
+    customActions = [],
     onDelete,
   }: ComponentDetailsProps) => {
     const remoteComponentLibrarySearchEnabled = useBetaFlagValue(
@@ -138,7 +138,7 @@ const ComponentDetailsDialogContent = withSuspenseWrapper(
                   componentSpec={componentSpec}
                   componentDigest={componentDigest}
                   url={url}
-                  actions={actions}
+                  customActions={customActions}
                   onDelete={onDelete}
                 />
               </TabsContent>
@@ -175,7 +175,7 @@ const ComponentDetails = ({
   component,
   displayName,
   trigger,
-  actions = [],
+  customActions = [],
   onClose,
   onDelete,
 }: ComponentDetailsProps) => {
@@ -212,22 +212,12 @@ const ComponentDetails = ({
     setIsEditDialogOpen(true);
   }, []);
 
-  const actionsWithEdit = useMemo(() => {
-    if (!hasEnabledInAppEditor) return actions;
-
-    const EditButton = (
-      <TooltipButton
-        variant="secondary"
-        onClick={handleEditComponent}
-        tooltip="Edit Component Definition"
-        key={`${displayName}-edit-button`}
-      >
-        <Icon name="FilePenLine" />
-      </TooltipButton>
-    );
-
-    return [...actions, EditButton];
-  }, [actions, hasEnabledInAppEditor, handleEditComponent]);
+  customActions.push({
+    label: "Edit Component Definition",
+    icon: "FilePenLine",
+    hidden: !hasEnabledInAppEditor,
+    onClick: handleEditComponent,
+  });
 
   return (
     <>
@@ -256,7 +246,7 @@ const ComponentDetails = ({
               component={component}
               displayName={displayName}
               trigger={dialogTriggerButton}
-              actions={actionsWithEdit}
+              customActions={customActions}
               onClose={onClose}
               onDelete={onDelete}
             />
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx
@@ -1,8 +1,8 @@
 import { useNavigate } from "@tanstack/react-router";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-import type { TooltipButtonProps } from "@/components/shared/Buttons/TooltipButton";
 import { ComponentEditorDialog } from "@/components/shared/ComponentEditor/ComponentEditorDialog";
+import type { Action } from "@/components/shared/ContextPanel/Blocks/ActionBlock";
 import { PublishedComponentBadge } from "@/components/shared/ManageComponent/PublishedComponentBadge";
 import { trimDigest } from "@/components/shared/ManageComponent/utils/digest";
 import { useBetaFlagValue } from "@/components/shared/Settings/useBetaFlags";
@@ -113,6 +113,20 @@ const TaskNodeCard = () => {
     }
   }, []);
 
+  const handleDuplicateTask = useCallback(() => {
+    callbacks.onDuplicate?.();
+  }, [callbacks]);
+
+  const handleUpgradeTask = useCallback(() => {
+    callbacks.onUpgrade?.();
+  }, [callbacks]);
+
+  const handleEnterSubgraph = useCallback(() => {
+    if (taskId) {
+      navigateToSubgraph(taskId);
+    }
+  }, [navigateToSubgraph, taskId]);
+
   const handleEditComponent = useCallback(() => {
     setIsEditDialogOpen(true);
   }, []);
@@ -122,45 +136,40 @@ const TaskNodeCard = () => {
   }, []);
 
   const taskConfigMarkup = useMemo(() => {
-    const actions: Array<TooltipButtonProps> = [];
-
-    if (!readOnly) {
-      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: <Icon name="Workflow" size="sm" />,
-        variant: "outline",
-        tooltip: `Enter Subgraph: ${subgraphDescription}`,
-        onClick: () => navigateToSubgraph(taskId),
-      });
-    }
-
-    if (isInAppEditorEnabled) {
-      actions.push({
-        children: <Icon name="FilePenLine" size="sm" />,
-        variant: "outline",
-        tooltip: "Edit Component Definition",
+    const customActions: Action[] = [
+      {
+        label: "Duplicate Task",
+        icon: "Copy",
+        hidden: readOnly,
+        onClick: handleDuplicateTask,
+      },
+      {
+        label: "Update Task from Source URL",
+        icon: "CircleFadingArrowUp",
+        hidden: readOnly || isCustomComponent,
+        onClick: handleUpgradeTask,
+      },
+      {
+        label: `Enter Subgraph: ${subgraphDescription}`,
+        icon: "Workflow",
+        hidden: !isSubgraphNode || !isSubgraphNavigationEnabled,
+        onClick: handleEnterSubgraph,
+      },
+      {
+        label: "Edit Component Definition",
+        icon: "FilePenLine",
+        hidden: !isInAppEditorEnabled,
         onClick: handleEditComponent,
-      });
-    }
-
-    return <TaskOverview taskNode={taskNode} key={nodeId} actions={actions} />;
+      },
+    ];
+
+    return (
+      <TaskOverview
+        key={nodeId}
+        taskNode={taskNode}
+        customActions={customActions}
+      />
+    );
   }, [
     nodeId,
     readOnly,
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/TaskOverview.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/TaskOverview.tsx
@@ -7,9 +7,8 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 
-import type { TooltipButtonProps } from "@/components/shared/Buttons/TooltipButton";
-import TooltipButton from "@/components/shared/Buttons/TooltipButton";
 import { CodeViewer } from "@/components/shared/CodeViewer";
+import type { Action } from "@/components/shared/ContextPanel/Blocks/ActionBlock";
 import { ComponentDetailsDialog } from "@/components/shared/Dialogs";
 import { ComponentFavoriteToggle } from "@/components/shared/FavoriteComponentToggle";
 import { StatusIcon } from "@/components/shared/Status";
@@ -32,10 +31,10 @@ import RenameTask from "./RenameTask";
 
 interface TaskOverviewProps {
   taskNode: TaskNodeContextType;
-  actions?: TooltipButtonProps[];
+  customActions?: Action[];
 }
 
-const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
+const TaskOverview = ({ taskNode, customActions }: TaskOverviewProps) => {
   const { name, taskSpec, taskId, state, callbacks } = taskNode;
 
   const [isYamlFullscreen, setIsYamlFullscreen] = useState(false);
@@ -63,18 +62,17 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
   const executionId = details?.child_task_execution_ids?.[taskId];
   const canRename = !readOnly && isSubgraph;
 
-  const detailActions = [
-    ...(actions?.map((action) => (
-      <TooltipButton {...action} key={action.tooltip?.toString()} />
-    )) ?? []),
-    <TooltipButton
-      variant="outline"
-      tooltip="View YAML"
-      onClick={() => setIsYamlFullscreen(true)}
-    >
-      <Icon name="FileCodeCorner" />
-    </TooltipButton>,
-  ];
+  const customActionsExtended: Action[] = [];
+
+  if (customActions) {
+    customActionsExtended.push(...customActions);
+  }
+
+  customActionsExtended.push({
+    label: "View YAML",
+    icon: "FileCodeCorner",
+    onClick: () => setIsYamlFullscreen(true),
+  });
 
   return (
     <>
@@ -136,7 +134,7 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
                 onDelete={callbacks.onDelete}
                 status={status}
                 readOnly={readOnly}
-                actions={detailActions}
+                customActions={customActionsExtended}
               />
             </TabsContent>
             <TabsContent value="io">
diff --git a/src/components/shared/TaskDetails/Actions.tsx b/src/components/shared/TaskDetails/Actions.tsx
@@ -1,4 +1,3 @@
-import { type ReactNode } from "react";
 import { FaPython } from "react-icons/fa";
 
 import useToastNotification from "@/hooks/useToastNotification";
@@ -8,13 +7,14 @@ import copyToYaml from "@/utils/yaml";
 
 import {
   ActionBlock,
+  type Action,
   type ActionOrReactNode,
 } from "../ContextPanel/Blocks/ActionBlock";
 
 interface TaskActionsProps {
   displayName: string;
   componentSpec: ComponentSpec;
-  actions?: ReactNode[];
+  customActions?: Action[];
   onDelete?: () => void;
   readOnly?: boolean;
   className?: string;
@@ -23,7 +23,7 @@ interface TaskActionsProps {
 const TaskActions = ({
   displayName,
   componentSpec,
-  actions = [],
+  customActions = [],
   onDelete,
   readOnly = false,
   className,
@@ -85,7 +85,7 @@ const TaskActions = ({
       icon: "Clipboard",
       onClick: handleCopyYaml,
     },
-    ...actions,
+    ...customActions,
     {
       label: "Delete Component",
       icon: "Trash",
diff --git a/src/components/shared/TaskDetails/Details.tsx b/src/components/shared/TaskDetails/Details.tsx
@@ -8,6 +8,7 @@ import { TextBlock } from "../ContextPanel/Blocks/TextBlock";
 import TaskActions from "./Actions";
 import { ExecutionDetails } from "./ExecutionDetails";
 import { GithubDetails } from "./GithubDetails";
+import type { Action } from "../ContextPanel/Blocks/ActionBlock";
 
 interface TaskDetailsProps {
   displayName: string;
@@ -16,7 +17,7 @@ interface TaskDetailsProps {
   taskId?: string;
   componentDigest?: string;
   url?: string;
-  actions?: ReactNode[];
+  customActions?: Action[];
   onDelete?: () => void;
   status?: string;
   readOnly?: boolean;
@@ -36,7 +37,7 @@ const TaskDetails = ({
   taskId,
   componentDigest,
   url,
-  actions = [],
+  customActions = [],
   onDelete,
   status,
   readOnly = false,
@@ -128,7 +129,7 @@ const TaskDetails = ({
       <TaskActions
         displayName={displayName}
         componentSpec={componentSpec}
-        actions={actions}
+        customActions={customActions}
         onDelete={onDelete}
         readOnly={readOnly}
         className={BASE_BLOCK_CLASS}
