@uipath/apollo-react 3.44.0 → 3.44.2-pr255.af80ea0

package/dist/canvas/components/StageNode/StageNode.js

@@ -1,108 +1,85 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
-import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../layouts/index.js";
-import { Position, useStore, useViewport } from "../../xyflow/react.js";
+import { Position, useStore } from "../../xyflow/react.js";
 import { ApCircularProgress, ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { useCrossStageDragState } from "../../hooks/CrossStageDragContext.js";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
 import { NodeContextMenu } from "../NodeContextMenu/index.js";
 import { useNodeSelection } from "../NodePropertiesPanel/hooks/index.js";
+import { TaskNodeProvider } from "../TaskNode/TaskNodeContext.js";
+import { DEFAULT_TASK_POSITION_CONFIG, calculateStageContentHeight } from "../TaskNode/useTaskPositions.js";
 import { Toolbox } from "../Toolbox/index.js";
-import { DraggableTask, TaskContent } from "./DraggableTask.js";
-import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageContainer, StageContent, StageHeader, StageParallelBracket, StageParallelLabel, StageTask, StageTaskGroup, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
-import { flattenTasks, getProjection, reorderTasks } from "./StageNode.utils.js";
-import { getContextMenuItems, getMenuItem } from "./StageNodeTaskUtilities.js";
+import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageContainer, StageContent, StageHeader, StageParallelBracket, StageParallelLabel, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
+function calculateExecutionExtraHeight(execution) {
+    if (!execution) return 0;
+    if (execution.duration || execution.retryDuration || execution.badge) if (execution.retryDuration || execution.badge) return 26;
+    else return 18;
+    return 2;
+}
+function calculateParallelGroupY(groupIndex, taskIds, hasStageExecution, taskExecutionData, config = DEFAULT_TASK_POSITION_CONFIG) {
+    const headerHeight = hasStageExecution ? config.headerHeight + config.headerExecutionDescriptionHeight : config.headerHeight;
+    let y = headerHeight + config.contentPaddingTop;
+    for(let i = 0; i < groupIndex; i++){
+        const group = taskIds[i];
+        if (group) {
+            for(let j = 0; j < group.length; j++){
+                const taskId = group[j];
+                const execution = taskId ? taskExecutionData[taskId]?.execution : void 0;
+                const taskHeight = config.taskHeight + calculateExecutionExtraHeight(execution);
+                y += taskHeight;
+                if (j < group.length - 1) y += config.taskGap;
+            }
+            y += config.taskGap;
+        }
+    }
+    return y;
+}
+function calculateParallelGroupHeight(group, taskExecutionData, config = DEFAULT_TASK_POSITION_CONFIG) {
+    let height = 0;
+    for(let i = 0; i < group.length; i++){
+        const taskId = group[i];
+        const execution = taskId ? taskExecutionData[taskId]?.execution : void 0;
+        const taskHeight = config.taskHeight + calculateExecutionExtraHeight(execution);
+        height += taskHeight;
+        if (i < group.length - 1) height += config.taskGap;
+    }
+    return height;
+}
 const StageNodeComponent = (props)=>{
-    const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox } = props;
-    const taskWidth = width ? width - STAGE_CONTENT_INSET : void 0;
-    const tasks = useMemo(()=>stageDetails?.tasks || [], [
-        stageDetails?.tasks
-    ]);
-    const flatTasks = useMemo(()=>tasks.flat(), [
-        tasks
-    ]);
-    const taskIds = useMemo(()=>flatTasks.map((task)=>task.id), [
-        flatTasks
+    const { dragging, selected, id, nodeType = 'stage', width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onReplaceTaskFromToolbox, replaceTaskTarget, onReplaceTaskTargetChange, onTaskClick, onTaskSelect, onStageTitleChange } = props;
+    const taskIds = useMemo(()=>stageDetails?.taskIds || [], [
+        stageDetails?.taskIds
     ]);
     const isException = stageDetails?.isException;
     const isReadOnly = !!stageDetails?.isReadOnly;
     const icon = stageDetails?.icon;
-    const selectedTasks = stageDetails?.selectedTasks;
     const defaultContent = stageDetails?.defaultContent || 'Add first task';
     const status = execution?.stageStatus?.status;
     const statusLabel = execution?.stageStatus?.label;
     const stageDuration = execution?.stageStatus?.duration;
-    const reGroupTaskFunction = useMemo(()=>onTaskGroupModification || (()=>{}), [
-        onTaskGroupModification
-    ]);
     const isStageTitleEditable = !!onStageTitleChange && !isReadOnly;
     const [isHovered, setIsHovered] = useState(false);
     const [label, setLabel] = useState(props.stageDetails.label);
+    const [toolboxMode, setToolboxMode] = useState(null);
+    const replaceTaskRef = useRef(null);
+    const [isStageTitleEditing, setIsStageTitleEditing] = useState(false);
+    const stageTitleRef = useRef(null);
     useEffect(()=>{
         setLabel(props.stageDetails.label);
     }, [
         props.stageDetails.label
     ]);
-    const [isStageTitleEditing, setIsStageTitleEditing] = useState(false);
-    const stageTitleRef = useRef(null);
-    const taskStateReference = useRef({
-        isParallel: false,
-        groupIndex: -1,
-        taskIndex: -1
-    });
     const isConnecting = useStore((state)=>!!state.connectionClickStartHandle);
     const connectedHandleIds = useConnectedHandles(id);
-    const [isAddingTask, setIsAddingTask] = useState(false);
-    const [isReplacingTask, setIsReplacingTask] = useState(false);
-    useEffect(()=>{
-        if (pendingReplaceTask?.groupIndex != null && pendingReplaceTask?.taskIndex != null) {
-            const taskGroup = tasks[pendingReplaceTask.groupIndex];
-            taskStateReference.current = {
-                isParallel: (taskGroup?.length ?? 0) > 1,
-                groupIndex: pendingReplaceTask.groupIndex,
-                taskIndex: pendingReplaceTask.taskIndex
-            };
-            setIsReplacingTask(true);
-        }
-    }, [
-        pendingReplaceTask,
-        tasks
-    ]);
-    const [activeDragId, setActiveDragId] = useState(null);
-    const [offsetLeft, setOffsetLeft] = useState(0);
-    const [overId, setOverId] = useState(null);
-    const activeTask = useMemo(()=>flatTasks.find((t)=>t.id === activeDragId), [
-        flatTasks,
-        activeDragId
-    ]);
-    const isActiveTaskParallel = useMemo(()=>{
-        if (!activeDragId) return false;
-        const group = tasks.find((g)=>g.some((t)=>t.id === activeDragId));
-        return group ? group.length > 1 : false;
-    }, [
-        tasks,
-        activeDragId
-    ]);
-    const { zoom } = useViewport();
-    const projected = useMemo(()=>{
-        if (!activeDragId || !overId) return null;
-        return getProjection(tasks, activeDragId, overId, offsetLeft);
-    }, [
-        tasks,
-        activeDragId,
-        overId,
-        offsetLeft
-    ]);
     useEffect(()=>{
         if (false === selected) {
-            setIsAddingTask(false);
-            setIsReplacingTask(false);
+            setToolboxMode(null);
+            replaceTaskRef.current = null;
         }
     }, [
         selected
@@ -127,19 +104,6 @@ const StageNodeComponent = (props)=>{
         setIsStageTitleEditing(true);
         setLabel(e.target.value);
     }, []);
-    const handleStageTitleClickToSave = useCallback((e)=>{
-        if (isStageTitleEditing && !stageTitleRef.current?.contains(e.target)) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) {
-                if ('' === label.trim()) setLabel('Untitled Stage');
-                onStageTitleChange(label);
-            }
-        }
-    }, [
-        isStageTitleEditing,
-        onStageTitleChange,
-        label
-    ]);
     const handleStageTitleBlurToSave = useCallback(()=>{
         if (isStageTitleEditing) {
             setIsStageTitleEditing(false);
@@ -162,50 +126,17 @@ const StageNodeComponent = (props)=>{
         onStageTitleChange,
         label
     ]);
-    useEffect(()=>{
-        if (isStageTitleEditing) document.addEventListener('click', handleStageTitleClickToSave);
-        return ()=>{
-            document.removeEventListener('click', handleStageTitleClickToSave);
-        };
-    }, [
-        handleStageTitleClickToSave,
-        isStageTitleEditing
-    ]);
-    const contextMenuItems = useCallback((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
-        const items = [];
-        if (onReplaceTaskFromToolbox) items.push(getMenuItem('replace-task', 'Replace Task', ()=>setIsReplacingTask(true)));
-        if (onTaskGroupModification) {
-            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction);
-            return [
-                ...items,
-                ...reGroupOptions
-            ];
-        }
-        return items;
-    }, [
-        onReplaceTaskFromToolbox,
-        onTaskGroupModification,
-        reGroupTaskFunction
-    ]);
     const { setSelectedNodeId } = useNodeSelection();
     const handleStageClick = useCallback(()=>{
         onStageClick?.();
     }, [
         onStageClick
     ]);
-    const handleTaskClick = useCallback((e, taskElementId)=>{
-        e.stopPropagation();
-        onTaskClick?.(taskElementId);
-        setSelectedNodeId(id);
-    }, [
-        onTaskClick,
-        setSelectedNodeId,
-        id
-    ]);
     const handleTaskAddClick = useCallback((event)=>{
         event.stopPropagation();
+        replaceTaskRef.current = null;
         if (onTaskAdd) onTaskAdd();
-        else if (onAddTaskFromToolbox) setIsAddingTask(true);
+        else if (onAddTaskFromToolbox) setToolboxMode('add');
         setSelectedNodeId(id);
     }, [
         onTaskAdd,
@@ -213,25 +144,54 @@ const StageNodeComponent = (props)=>{
         setSelectedNodeId,
         id
     ]);
-    const handleAddTaskToolboxItemSelected = useCallback((item)=>{
-        onAddTaskFromToolbox?.(item);
-        setIsAddingTask(false);
-        setSelectedNodeId(id);
+    useEffect(()=>{
+        if (replaceTaskTarget) {
+            replaceTaskRef.current = replaceTaskTarget;
+            setToolboxMode('replace');
+        }
     }, [
-        onAddTaskFromToolbox,
-        setSelectedNodeId,
-        id
+        replaceTaskTarget
+    ]);
+    useEffect(()=>{
+        if (pendingReplaceTask?.groupIndex != null && pendingReplaceTask?.taskIndex != null) {
+            replaceTaskRef.current = {
+                groupIndex: pendingReplaceTask.groupIndex,
+                taskIndex: pendingReplaceTask.taskIndex
+            };
+            setToolboxMode('replace');
+        }
+    }, [
+        pendingReplaceTask
     ]);
-    const handleReplaceTaskToolboxItemSelected = useCallback((item)=>{
-        setIsReplacingTask(true);
-        onReplaceTaskFromToolbox?.(item, taskStateReference.current.groupIndex, taskStateReference.current.taskIndex);
-        setIsReplacingTask(false);
+    const handleToolboxItemSelected = useCallback((item)=>{
+        if ('replace' === toolboxMode && replaceTaskRef.current && onReplaceTaskFromToolbox) onReplaceTaskFromToolbox(item, replaceTaskRef.current.groupIndex, replaceTaskRef.current.taskIndex);
+        else if ('add' === toolboxMode) onAddTaskFromToolbox?.(item);
+        setToolboxMode(null);
+        replaceTaskRef.current = null;
+        onReplaceTaskTargetChange?.(null);
         setSelectedNodeId(id);
     }, [
+        toolboxMode,
         onReplaceTaskFromToolbox,
+        onAddTaskFromToolbox,
+        onReplaceTaskTargetChange,
         setSelectedNodeId,
         id
     ]);
+    const handleToolboxClose = useCallback(()=>{
+        setToolboxMode(null);
+        replaceTaskRef.current = null;
+        onReplaceTaskTargetChange?.(null);
+    }, [
+        onReplaceTaskTargetChange
+    ]);
+    const taskWidth = width ? width - STAGE_CONTENT_INSET : void 0;
+    const taskWidthStyle = useMemo(()=>taskWidth ? {
+            '--stage-task-width': `${taskWidth}px`,
+            '--stage-task-width-parallel': `${taskWidth - INDENTATION_WIDTH}px`
+        } : void 0, [
+        taskWidth
+    ]);
     const handleConfigurations = useMemo(()=>isException ? [] : [
             {
                 position: Position.Left,
@@ -298,292 +258,277 @@ const StageNodeComponent = (props)=>{
         nodeId: id,
         selected
     });
-    const sensors = useSensors(useSensor(PointerSensor, {
-        activationConstraint: {
-            distance: 3
-        }
-    }), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates
-    }));
-    const resetState = useCallback(()=>{
-        setActiveDragId(null);
-        setOffsetLeft(0);
-        setOverId(null);
-    }, []);
-    const handleDragStart = useCallback((event)=>{
-        setActiveDragId(event.active.id);
-    }, []);
-    const handleDragMove = useCallback((event)=>{
-        setOffsetLeft(event.delta.x / zoom);
-    }, [
-        zoom
+    const taskNodeContextValue = useMemo(()=>({
+            stageId: id,
+            stageNodeType: nodeType,
+            taskIds,
+            isReadOnly,
+            onTaskClick,
+            onTaskSelect
+        }), [
+        id,
+        nodeType,
+        taskIds,
+        isReadOnly,
+        onTaskClick,
+        onTaskSelect
     ]);
-    const handleDragOver = useCallback((event)=>{
-        setOverId(event.over?.id ?? null);
-    }, []);
-    const handleDragEnd = useCallback((event)=>{
-        const { active, over } = event;
-        const currentOffsetLeft = offsetLeft;
-        resetState();
-        if (!over || !onTaskReorder) return;
-        const projection = getProjection(tasks, active.id, over.id, currentOffsetLeft);
-        if (!projection) return;
-        if (active.id === over.id) {
-            const flattened = flattenTasks(tasks);
-            const activeTask = flattened.find((t)=>t.id === active.id);
-            if (activeTask && activeTask.depth === projection.depth) return;
+    const dragState = useCrossStageDragState();
+    const displayTaskIds = useMemo(()=>{
+        if (dragState?.isDragging && dragState.taskId) {
+            if (dragState.targetStageId === id && dragState.dropPosition) {
+                const { groupIndex, taskIndex, isParallel } = dragState.dropPosition;
+                const tempTaskIds = taskIds.map((g)=>[
+                        ...g
+                    ]);
+                for(let gi = 0; gi < tempTaskIds.length; gi++){
+                    const group = tempTaskIds[gi];
+                    if (!group) continue;
+                    const idx = group.indexOf(dragState.taskId);
+                    if (-1 !== idx) group.splice(idx, 1);
+                }
+                const filtered = tempTaskIds.filter((g)=>g && g.length > 0);
+                if (groupIndex >= filtered.length) filtered.push([
+                    '__placeholder__'
+                ]);
+                else if (isParallel && filtered[groupIndex]) filtered[groupIndex].splice(taskIndex, 0, '__placeholder__');
+                else filtered.splice(groupIndex, 0, [
+                    '__placeholder__'
+                ]);
+                return filtered;
+            }
+            if (dragState.sourceStageId === id && dragState.targetStageId !== id) {
+                const tempTaskIds = taskIds.map((g)=>[
+                        ...g
+                    ]);
+                for(let gi = 0; gi < tempTaskIds.length; gi++){
+                    const group = tempTaskIds[gi];
+                    if (!group) continue;
+                    const idx = group.indexOf(dragState.taskId);
+                    if (-1 !== idx) group.splice(idx, 1);
+                }
+                return tempTaskIds.filter((g)=>g && g.length > 0);
+            }
         }
-        const newTasks = reorderTasks(tasks, active.id, over.id, projection.depth);
-        onTaskReorder(newTasks);
+        return taskIds;
     }, [
-        tasks,
-        onTaskReorder,
-        offsetLeft,
-        resetState
+        taskIds,
+        dragState,
+        id
     ]);
-    const handleDragCancel = useCallback(()=>{
-        resetState();
+    const taskNodes = useStore((state)=>state.nodes.filter((n)=>'task' === n.type && n.parentId === id));
+    const taskExecutionData = useMemo(()=>{
+        const data = {};
+        for (const node of taskNodes)data[node.id] = {
+            execution: node.data?.execution
+        };
+        return data;
     }, [
-        resetState
+        taskNodes
     ]);
-    const taskWidthStyle = useMemo(()=>taskWidth ? {
-            '--stage-task-width': `${taskWidth}px`,
-            '--stage-task-width-parallel': `${taskWidth - INDENTATION_WIDTH}px`
-        } : void 0, [
-        taskWidth
+    const parallelGroups = useMemo(()=>{
+        const hasStageExecution = !!stageDuration;
+        return displayTaskIds.map((group, index)=>{
+            const isParallel = group.length > 1;
+            if (!isParallel) return null;
+            const y = calculateParallelGroupY(index, displayTaskIds, hasStageExecution, taskExecutionData);
+            const height = calculateParallelGroupHeight(group, taskExecutionData);
+            return {
+                index,
+                y,
+                height
+            };
+        }).filter((g)=>null !== g);
+    }, [
+        displayTaskIds,
+        stageDuration,
+        taskExecutionData
     ]);
-    const dragOverlayStyle = useMemo(()=>({
-            transform: `scale(${zoom})`,
-            transformOrigin: 'top left'
-        }), [
-        zoom
+    const contentHeight = useMemo(()=>{
+        if (0 === displayTaskIds.length) return 60;
+        return calculateStageContentHeight(displayTaskIds, taskNodes);
+    }, [
+        displayTaskIds,
+        taskNodes,
+        execution
     ]);
-    return /*#__PURE__*/ jsxs("div", {
-        "data-testid": `stage-${id}`,
-        style: {
-            position: 'relative'
-        },
-        onClick: handleStageClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        children: [
-            /*#__PURE__*/ jsxs(StageContainer, {
-                selected: selected,
-                status: status,
-                width: width,
-                style: taskWidthStyle,
-                children: [
-                    /*#__PURE__*/ jsxs(StageHeader, {
-                        isException: isException,
+    return /*#__PURE__*/ jsx(TaskNodeProvider, {
+        value: taskNodeContextValue,
+        children: /*#__PURE__*/ jsxs("div", {
+            "data-testid": `stage-${id}`,
+            style: {
+                position: 'relative',
+                ...taskWidthStyle
+            },
+            onClick: handleStageClick,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            children: [
+                parallelGroups.map(({ index, y, height })=>{
+                    const absoluteY = y;
+                    const absoluteX = DEFAULT_TASK_POSITION_CONFIG.contentPaddingX + DEFAULT_TASK_POSITION_CONFIG.parallelIndent;
+                    const bracketX = absoluteX - 12 - 4 - 12;
+                    return /*#__PURE__*/ jsxs(Row, {
+                        gap: Spacing.SpacingS,
+                        style: {
+                            position: 'absolute',
+                            top: absoluteY,
+                            left: bracketX,
+                            height: height,
+                            pointerEvents: 'none',
+                            zIndex: 1
+                        },
                         children: [
-                            /*#__PURE__*/ jsxs(Row, {
-                                gap: Spacing.SpacingMicro,
-                                align: "center",
-                                children: [
-                                    icon,
-                                    /*#__PURE__*/ jsxs(Column, {
-                                        py: 2,
-                                        children: [
-                                            /*#__PURE__*/ jsx(ApTypography, {
-                                                variant: isStageTitleEditing ? FontVariantToken.fontSizeM : FontVariantToken.fontSizeMBold,
-                                                color: "var(--uix-canvas-foreground)",
-                                                children: /*#__PURE__*/ jsx(ApTooltip, {
-                                                    content: label,
-                                                    placement: "top",
-                                                    delay: true,
-                                                    children: /*#__PURE__*/ jsx(StageTitleContainer, {
-                                                        isEditing: isStageTitleEditing,
-                                                        children: /*#__PURE__*/ jsx(StageTitleInput, {
-                                                            name: "Stage Title",
-                                                            isStageTitleEditable: isStageTitleEditable,
-                                                            value: label,
-                                                            ref: stageTitleRef,
+                            /*#__PURE__*/ jsx(StageParallelBracket, {}),
+                            /*#__PURE__*/ jsx("div", {
+                                style: {
+                                    position: 'relative',
+                                    width: 0,
+                                    height: '100%'
+                                },
+                                children: /*#__PURE__*/ jsx(StageParallelLabel, {
+                                    children: /*#__PURE__*/ jsx(ApTypography, {
+                                        variant: FontVariantToken.fontSizeS,
+                                        children: "Parallel"
+                                    })
+                                })
+                            })
+                        ]
+                    }, `parallel-${index}`);
+                }),
+                /*#__PURE__*/ jsxs(StageContainer, {
+                    selected: selected,
+                    status: status,
+                    width: width,
+                    style: {
+                        minHeight: contentHeight + (execution?.stageStatus?.duration ? DEFAULT_TASK_POSITION_CONFIG.headerHeight + DEFAULT_TASK_POSITION_CONFIG.headerExecutionDescriptionHeight : DEFAULT_TASK_POSITION_CONFIG.headerHeight) + 2 * DEFAULT_TASK_POSITION_CONFIG.stageBorderThickness
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(StageHeader, {
+                            isException: isException,
+                            children: [
+                                /*#__PURE__*/ jsxs(Row, {
+                                    gap: Spacing.SpacingMicro,
+                                    align: "center",
+                                    children: [
+                                        icon,
+                                        /*#__PURE__*/ jsxs(Column, {
+                                            py: 2,
+                                            children: [
+                                                /*#__PURE__*/ jsx(ApTypography, {
+                                                    variant: isStageTitleEditing ? FontVariantToken.fontSizeM : FontVariantToken.fontSizeMBold,
+                                                    color: "var(--uix-canvas-foreground)",
+                                                    children: /*#__PURE__*/ jsx(ApTooltip, {
+                                                        content: label,
+                                                        placement: "top",
+                                                        delay: true,
+                                                        children: /*#__PURE__*/ jsx(StageTitleContainer, {
                                                             isEditing: isStageTitleEditing,
-                                                            ...onStageTitleChange && {
-                                                                onFocus: ()=>setIsStageTitleEditing(true),
-                                                                onInput: handleStageTitleChange,
-                                                                onKeyDown: handleStageTitleKeyDown,
-                                                                onBlur: handleStageTitleBlurToSave
-                                                            },
-                                                            readOnly: !isStageTitleEditable
+                                                            children: /*#__PURE__*/ jsx(StageTitleInput, {
+                                                                name: "Stage Title",
+                                                                isStageTitleEditable: isStageTitleEditable,
+                                                                value: label,
+                                                                ref: stageTitleRef,
+                                                                isEditing: isStageTitleEditing,
+                                                                ...onStageTitleChange && {
+                                                                    onFocus: ()=>setIsStageTitleEditing(true),
+                                                                    onInput: handleStageTitleChange,
+                                                                    onKeyDown: handleStageTitleKeyDown,
+                                                                    onBlur: handleStageTitleBlurToSave
+                                                                },
+                                                                readOnly: !isStageTitleEditable
+                                                            })
                                                         })
                                                     })
+                                                }),
+                                                stageDuration && /*#__PURE__*/ jsx(ApTypography, {
+                                                    variant: FontVariantToken.fontSizeS,
+                                                    color: "var(--uix-canvas-foreground-de-emp)",
+                                                    children: stageDuration
                                                 })
-                                            }),
-                                            stageDuration && /*#__PURE__*/ jsx(ApTypography, {
-                                                variant: FontVariantToken.fontSizeS,
-                                                color: "var(--uix-canvas-foreground-de-emp)",
-                                                children: stageDuration
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs(Row, {
-                                gap: Spacing.SpacingMicro,
-                                align: isReadOnly ? 'start' : 'center',
-                                py: Padding.PadS,
-                                children: [
-                                    status && /*#__PURE__*/ jsx(ApTooltip, {
-                                        content: statusLabel,
-                                        placement: "top",
-                                        children: /*#__PURE__*/ jsx(ApIconButton, {
-                                            size: "small",
-                                            children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
-                                                status: status,
-                                                size: 20
-                                            })
+                                            ]
                                         })
-                                    }),
-                                    (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(ApTooltip, {
-                                        content: addTaskLoading ? 'Loading...' : addTaskLabel,
-                                        placement: "top",
-                                        children: /*#__PURE__*/ jsx("span", {
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(Row, {
+                                    gap: Spacing.SpacingMicro,
+                                    align: isReadOnly ? 'start' : 'center',
+                                    py: Padding.PadS,
+                                    children: [
+                                        status && /*#__PURE__*/ jsx(ApTooltip, {
+                                            content: statusLabel,
+                                            placement: "top",
                                             children: /*#__PURE__*/ jsx(ApIconButton, {
-                                                onClick: handleTaskAddClick,
                                                 size: "small",
-                                                disabled: addTaskLoading,
-                                                label: addTaskLabel,
-                                                children: addTaskLoading ? /*#__PURE__*/ jsx(ApCircularProgress, {
+                                                children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
+                                                    status: status,
                                                     size: 20
-                                                }) : /*#__PURE__*/ jsx(ApIcon, {
-                                                    name: "add",
-                                                    size: "20px"
                                                 })
                                             })
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(StageContent, {
-                        children: tasks && 0 !== tasks.length ? /*#__PURE__*/ jsxs(DndContext, {
-                            collisionDetection: closestCenter,
-                            sensors: sensors,
-                            onDragStart: handleDragStart,
-                            onDragMove: handleDragMove,
-                            onDragOver: handleDragOver,
-                            onDragEnd: handleDragEnd,
-                            onDragCancel: handleDragCancel,
-                            children: [
-                                /*#__PURE__*/ jsx(SortableContext, {
-                                    items: taskIds,
-                                    strategy: verticalListSortingStrategy,
-                                    children: /*#__PURE__*/ jsx(StageTaskList, {
-                                        className: "nodrag nopan",
-                                        children: tasks.map((taskGroup, groupIndex)=>{
-                                            const isParallel = taskGroup.length > 1;
-                                            return /*#__PURE__*/ jsxs(Row, {
-                                                gap: Spacing.SpacingS,
-                                                children: [
-                                                    isParallel && /*#__PURE__*/ jsx(StageParallelBracket, {}),
-                                                    /*#__PURE__*/ jsxs(StageTaskGroup, {
-                                                        isParallel: isParallel,
-                                                        children: [
-                                                            isParallel && /*#__PURE__*/ jsx(StageParallelLabel, {
-                                                                children: /*#__PURE__*/ jsx(ApTypography, {
-                                                                    variant: FontVariantToken.fontSizeS,
-                                                                    children: "Parallel"
-                                                                })
-                                                            }),
-                                                            taskGroup.map((task, taskIndex)=>{
-                                                                const taskExecution = execution?.taskStatus?.[task.id];
-                                                                return /*#__PURE__*/ jsx(DraggableTask, {
-                                                                    task: task,
-                                                                    taskExecution: taskExecution,
-                                                                    isSelected: !!selectedTasks?.includes(task.id),
-                                                                    isParallel: isParallel,
-                                                                    contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
-                                                                    onTaskClick: handleTaskClick,
-                                                                    projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
-                                                                    isDragDisabled: !onTaskReorder,
-                                                                    zoom: zoom,
-                                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
-                                                                        onMenuOpen: ()=>{
-                                                                            taskStateReference.current = {
-                                                                                isParallel,
-                                                                                groupIndex,
-                                                                                taskIndex
-                                                                            };
-                                                                        }
-                                                                    }
-                                                                }, task.id);
-                                                            })
-                                                        ]
+                                        }),
+                                        (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(ApTooltip, {
+                                            content: addTaskLoading ? 'Loading...' : addTaskLabel,
+                                            placement: "top",
+                                            children: /*#__PURE__*/ jsx("span", {
+                                                children: /*#__PURE__*/ jsx(ApIconButton, {
+                                                    onClick: handleTaskAddClick,
+                                                    size: "small",
+                                                    disabled: addTaskLoading,
+                                                    label: addTaskLabel,
+                                                    children: addTaskLoading ? /*#__PURE__*/ jsx(ApCircularProgress, {
+                                                        size: 20
+                                                    }) : /*#__PURE__*/ jsx(ApIcon, {
+                                                        name: "add",
+                                                        size: "20px"
                                                     })
-                                                ]
-                                            }, `group-${groupIndex}`);
-                                        })
-                                    })
-                                }),
-                                /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(DragOverlay, {
-                                    children: activeTask ? /*#__PURE__*/ jsx("div", {
-                                        style: dragOverlayStyle,
-                                        children: /*#__PURE__*/ jsx(StageTask, {
-                                            selected: true,
-                                            isParallel: isActiveTaskParallel,
-                                            style: {
-                                                cursor: 'grabbing',
-                                                ...taskWidthStyle
-                                            },
-                                            children: /*#__PURE__*/ jsx(TaskContent, {
-                                                task: activeTask,
-                                                isDragging: true
+                                                })
                                             })
                                         })
-                                    }) : null
-                                }), document.body)
+                                    ]
+                                })
                             ]
-                        }) : /*#__PURE__*/ jsx(Column, {
-                            py: 2,
-                            children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ jsx(ApLink, {
-                                onClick: addTaskLoading ? void 0 : handleTaskAddClick,
-                                variant: FontVariantToken.fontSizeS,
-                                style: {
-                                    maxWidth: 'fit-content',
-                                    pointerEvents: addTaskLoading ? 'none' : void 0
-                                },
-                                children: defaultContent
-                            }) : /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeS,
-                                color: "var(--uix-canvas-foreground-de-emp)",
-                                children: defaultContent
+                        }),
+                        /*#__PURE__*/ jsx(StageContent, {
+                            children: displayTaskIds && 0 !== displayTaskIds.length ? /*#__PURE__*/ jsx(StageTaskList, {
+                                className: "nodrag nopan"
+                            }) : /*#__PURE__*/ jsx(Column, {
+                                py: 2,
+                                children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ jsx(ApLink, {
+                                    onClick: addTaskLoading ? void 0 : handleTaskAddClick,
+                                    variant: FontVariantToken.fontSizeS,
+                                    style: {
+                                        maxWidth: 'fit-content',
+                                        pointerEvents: addTaskLoading ? 'none' : void 0
+                                    },
+                                    children: defaultContent
+                                }) : /*#__PURE__*/ jsx(ApTypography, {
+                                    variant: FontVariantToken.fontSizeS,
+                                    color: "var(--uix-canvas-foreground-de-emp)",
+                                    children: defaultContent
+                                })
                             })
                         })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(FloatingCanvasPanel, {
+                    open: null !== toolboxMode,
+                    nodeId: id,
+                    offset: 15,
+                    children: /*#__PURE__*/ jsx(Toolbox, {
+                        title: 'replace' === toolboxMode ? replaceTaskLabel : addTaskLabel,
+                        initialItems: taskOptions,
+                        onClose: handleToolboxClose,
+                        onItemSelect: handleToolboxItemSelected,
+                        onSearch: onTaskToolboxSearch
                     })
-                ]
-            }),
-            onAddTaskFromToolbox && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
-                open: isAddingTask,
-                nodeId: id,
-                offset: 15,
-                children: /*#__PURE__*/ jsx(Toolbox, {
-                    title: addTaskLabel,
-                    initialItems: taskOptions,
-                    onClose: ()=>setIsAddingTask(false),
-                    onItemSelect: handleAddTaskToolboxItemSelected,
-                    onSearch: onTaskToolboxSearch
-                })
-            }),
-            onReplaceTaskFromToolbox && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
-                open: isReplacingTask,
-                nodeId: id,
-                offset: 15,
-                children: /*#__PURE__*/ jsx(Toolbox, {
-                    title: replaceTaskLabel,
-                    initialItems: taskOptions,
-                    onClose: ()=>setIsReplacingTask(false),
-                    onItemSelect: handleReplaceTaskToolboxItemSelected,
-                    onSearch: onTaskToolboxSearch
-                })
-            }),
-            menuItems && !dragging && /*#__PURE__*/ jsx(NodeContextMenu, {
-                menuItems: menuItems,
-                isVisible: shouldShowMenu
-            }),
-            handleElements
-        ]
+                }),
+                menuItems && !dragging && /*#__PURE__*/ jsx(NodeContextMenu, {
+                    menuItems: menuItems,
+                    isVisible: shouldShowMenu
+                }),
+                handleElements
+            ]
+        })
     });
 };
 const StageNode = /*#__PURE__*/ memo(StageNodeComponent);