improvement: move Task Actions out of details tab

Author: camielvs

src/components/shared/Dialogs/ComponentDetailsDialog.tsx

@@ -24,6 +24,7 @@ import { PublishedComponentDetails } from "../ManageComponent/PublishedComponent
 import { useFlagValue } from "../Settings/useFlags";
 import { withSuspenseWrapper } from "../SuspenseWrapper";
 import { TaskDetails, TaskImplementation, TaskIO } from "../TaskDetails";
+import TaskActions from "../TaskDetails/Actions";
 import { DialogContext } from "./dialog.context";
 
 interface ComponentDetailsProps {
@@ -120,11 +121,12 @@ const ComponentDetailsDialogContent = withSuspenseWrapper(
 
             <div className="overflow-auto h-[40vh]">
               <TabsContent value="details" className="h-full">
-                {remoteComponentLibrarySearchEnabled ? (
+                {remoteComponentLibrarySearchEnabled && (
                   <PublishedComponentDetails component={componentRef} />
-                ) : null}
+                )}
 
                 <TaskDetails componentRef={componentRef} />
+                <TaskActions componentRef={componentRef} className="mt-2" />
               </TabsContent>
 
               <TabsContent value="io" className="h-full">

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

@@ -10,11 +10,13 @@ import { ComponentDetailsDialog } from "@/components/shared/Dialogs";
 import { ComponentFavoriteToggle } from "@/components/shared/FavoriteComponentToggle";
 import { StatusIcon } from "@/components/shared/Status";
 import { TaskDetails } from "@/components/shared/TaskDetails";
+import TaskActions from "@/components/shared/TaskDetails/Actions";
 import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Text } from "@/components/ui/typography";
+import { useHydrateComponentReference } from "@/hooks/useHydrateComponentReference";
 import { useExecutionDataOptional } from "@/providers/ExecutionDataProvider";
 import { type TaskNodeContextType } from "@/providers/TaskNodeProvider";
 import { isGraphImplementation } from "@/utils/componentSpec";
@@ -33,6 +35,10 @@ interface TaskOverviewProps {
 const TaskOverview = ({ taskNode }: TaskOverviewProps) => {
   const { displayName, taskSpec, taskId, state, callbacks } = taskNode;
 
+  const hydratedComponentRef = useHydrateComponentReference(
+    taskSpec?.componentRef ?? {},
+  );
+
   const executionData = useExecutionDataOptional();
   const details = executionData?.details;
 
@@ -57,8 +63,12 @@ const TaskOverview = ({ taskNode }: TaskOverviewProps) => {
   const canRename = !readOnly && isSubgraph;
 
   return (
-    <BlockStack className="h-full" data-context-panel="task-overview">
-      <InlineStack gap="2" className="px-2 pb-2">
+    <BlockStack
+      gap="4"
+      className="h-full px-2"
+      data-context-panel="task-overview"
+    >
+      <InlineStack gap="2">
         {isSubgraph && <Icon name="Workflow" />}
         <Text size="lg" weight="semibold" className="wrap-anywhere">
           {displayName}
@@ -72,7 +82,15 @@ const TaskOverview = ({ taskNode }: TaskOverviewProps) => {
         {readOnly && <StatusIcon status={status} tooltip label="task" />}
       </InlineStack>
 
-      <div className="px-4 overflow-y-auto pb-4 h-full w-full">
+      {!!hydratedComponentRef && (
+        <TaskActions
+          componentRef={hydratedComponentRef}
+          taskNode={taskNode}
+          readOnly={readOnly}
+        />
+      )}
+
+      <div className="overflow-y-auto pb-4 h-full w-full">
         <Tabs defaultValue="io" className="h-full">
           <TabsList className="mb-2">
             <TabsTrigger value="io" className="flex-1">

src/components/shared/TaskDetails/Actions.tsx

@@ -80,7 +80,13 @@ const TaskActions = ({
     deleteComponent,
   ].filter(Boolean);
 
-  return <ActionBlock actions={actions} className={className} />;
+  return (
+    <ActionBlock
+      actions={actions}
+      className={className}
+      data-testid="task-actions"
+    />
+  );
 };
 
 export default TaskActions;

src/components/shared/TaskDetails/Details.tsx

@@ -11,7 +11,6 @@ import { KeyValueList } from "../ContextPanel/Blocks/KeyValueList";
 import { TextBlock } from "../ContextPanel/Blocks/TextBlock";
 import { InlineEditor } from "../InlineEditor/InlineEditor";
 import { withSuspenseWrapper } from "../SuspenseWrapper";
-import TaskActions from "./Actions";
 import { DisplayNameEditor } from "./DisplayNameEditor";
 import { ExecutionDetails } from "./ExecutionDetails";
 import { GithubDetails } from "./GithubDetails";
@@ -180,13 +179,6 @@ const TaskDetailsInternal = ({
           />
         </ContentBlock>
       )}
-
-      <TaskActions
-        componentRef={hydratedComponentRef}
-        taskNode={taskNode}
-        readOnly={readOnly}
-        className={BASE_BLOCK_CLASS}
-      />
     </BlockStack>
   );
 };

tests/e2e/helpers.ts

@@ -236,16 +236,29 @@ export async function removeComponentFromCanvas(
   componentName: string,
 ): Promise<void> {
   const node = locateNodeByName(page, componentName);
+
   await node.click();
-  await node.press("Delete");
+  await expect(node).toHaveClass(/selected/);
+
+  await waitForContextPanel(page, "task-overview");
+
+  const flowWrapper = page.locator(".react-flow");
+  await flowWrapper.focus();
+
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(100);
+
+  await page.keyboard.press("Delete");
 
-  // Wait for confirmation dialog to appear and be interactive
   const confirmDialog = page.locator('[role="alertdialog"]');
-  const continueButton = confirmDialog.getByText("Continue");
+  await expect(confirmDialog).toBeVisible({ timeout: 10000 });
+
+  const continueButton = confirmDialog.getByRole("button", {
+    name: "Continue",
+  });
   await expect(continueButton).toBeVisible();
   await continueButton.click();
 
-  // Wait for the node to be removed from the DOM
   await expect(node).toBeHidden();
   await expect(confirmDialog).toBeHidden();
 }