Cleanup TaskDetails

Author: camielvs

src/components/shared/Dialogs/ComponentDetailsDialog.tsx

@@ -140,6 +140,7 @@ const ComponentDetailsDialogContent = withSuspenseWrapper(
                   url={url}
                   actions={actions}
                   onDelete={onDelete}
+                  hasTwoStepDeletion
                 />
               </TabsContent>
 

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

@@ -1,5 +1,4 @@
 import { useNavigate } from "@tanstack/react-router";
-import { CircleFadingArrowUp, CopyIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { TooltipButtonProps } from "@/components/shared/Buttons/TooltipButton";
@@ -126,38 +125,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),
@@ -166,11 +153,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/TaskOverview/TaskOverview.tsx

@@ -85,6 +85,7 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
         <ComponentDetailsDialog
           displayName={name}
           component={taskSpec.componentRef}
+          onDelete={callbacks.onDelete}
         />
         {readOnly && <StatusIcon status={status} tooltip label="task" />}
       </InlineStack>
@@ -128,7 +129,6 @@ const TaskOverview = ({ taskNode, actions }: TaskOverviewProps) => {
               url={taskSpec.componentRef.url}
               onDelete={callbacks.onDelete}
               status={status}
-              hasDeletionConfirmation={false}
               readOnly={readOnly}
               actions={detailActions}
             />

src/components/shared/TaskDetails/Actions.tsx

@@ -0,0 +1,127 @@
+import { type ReactNode, useState } from "react";
+import { FaPython } from "react-icons/fa";
+
+import { Icon } from "@/components/ui/icon";
+import { InlineStack } from "@/components/ui/layout";
+import { Paragraph } from "@/components/ui/typography";
+import useToastNotification from "@/hooks/useToastNotification";
+import type { ComponentSpec } from "@/utils/componentSpec";
+import { downloadYamlFromComponentText } from "@/utils/URL";
+import copyToYaml from "@/utils/yaml";
+
+import {
+  ActionBlock,
+  type ActionOrReactNode,
+} from "../ContextPanel/Blocks/ActionBlock";
+
+interface TaskActionsProps {
+  displayName: string;
+  componentSpec: ComponentSpec;
+  actions?: ReactNode[];
+  onDelete?: () => void;
+  hasTwoStepDeletion?: boolean;
+  readOnly?: boolean;
+  className?: string;
+}
+
+const TaskActions = ({
+  displayName,
+  componentSpec,
+  actions = [],
+  onDelete,
+  hasTwoStepDeletion = false,
+  readOnly = false,
+  className,
+}: TaskActionsProps) => {
+  const notify = useToastNotification();
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const pythonOriginalCode =
+    componentSpec?.metadata?.annotations?.original_python_code;
+
+  const stringToPythonCodeDownload = () => {
+    if (!pythonOriginalCode) return;
+
+    const blob = new Blob([pythonOriginalCode], { type: "text/x-python" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${componentSpec?.name || displayName}.py`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleDownloadYaml = () => {
+    downloadYamlFromComponentText(componentSpec, displayName);
+  };
+
+  const handleCopyYaml = () => {
+    copyToYaml(
+      componentSpec,
+      (message) => notify(message, "success"),
+      (message) => notify(message, "error"),
+    );
+  };
+
+  const handleDelete = () => {
+    if (confirmDelete || !hasTwoStepDeletion) {
+      try {
+        onDelete?.();
+      } catch (error) {
+        console.error("Error deleting component:", error);
+        notify(`Error deleting component`, "error");
+      }
+    } else if (hasTwoStepDeletion) {
+      setConfirmDelete(true);
+    }
+  };
+
+  const orderedActions: ActionOrReactNode[] = [];
+
+  orderedActions.push({
+    label: "Download YAML",
+    icon: "Download",
+    onClick: handleDownloadYaml,
+  });
+
+  orderedActions.push({
+    label: "Download Python Code",
+    content: <FaPython />,
+    hidden: !pythonOriginalCode,
+    onClick: stringToPythonCodeDownload,
+  });
+
+  orderedActions.push({
+    label: "Copy YAML",
+    icon: "Clipboard",
+    onClick: handleCopyYaml,
+  });
+
+  orderedActions.push(...actions);
+
+  orderedActions.push({
+    label:
+      confirmDelete && hasTwoStepDeletion
+        ? "Confirm Delete. This action cannot be undone."
+        : "Delete Component",
+    content: (
+      <InlineStack gap="2" blockAlign="center">
+        <Icon name="Trash" />
+        {confirmDelete && hasTwoStepDeletion && (
+          <Paragraph size="xs" className="text-white">
+            Confirm Delete
+          </Paragraph>
+        )}
+      </InlineStack>
+    ),
+    destructive: true,
+    hidden: !onDelete || readOnly,
+    onClick: handleDelete,
+  });
+
+  return <ActionBlock actions={orderedActions} className={className} />;
+};
+
+export default TaskActions;