@uipath/apollo-react 3.68.1 → 3.68.3-pr431.62acd9a

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

@@ -1,26 +1,27 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { FontVariantToken, Icon, Padding, Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../layouts/index.js";
-import { Position, useStore, useViewport } from "../../xyflow/react.js";
-import { ApCircularProgress, ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
-import debounce from "debounce";
+import { Position, useStore, useStoreApi } from "../../xyflow/react.js";
+import { ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { EntryConditionIcon, ExitConditionIcon, PlayIcon, ReturnToOriginIcon } from "../../icons/index.js";
+import { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from "../../icons/index.js";
+import { GroupModificationType } from "../../utils/GroupModificationUtils.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 { useSetNodeSelection } from "../NodePropertiesPanel/hooks/index.js";
 import { Toolbox } from "../Toolbox/index.js";
-import { DraggableTask, TaskContent } from "./DraggableTask.js";
-import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageAdhocHeaderSection, StageAdhocSection, StageChip, StageContainer, StageContent, StageHeader, StageHeaderChipsRow, StageParallelBracket, StageParallelLabel, StageTask, StageTaskGroup, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
+import { AdhocTaskItem } from "./AdhocTask.js";
+import { DraggableTask } from "./DraggableTask.js";
+import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageAdhocHeaderSection, StageAdhocSection, StageChip, StageContainer, StageContent, StageHeader, StageHeaderChipsRow, StageParallelBracket, StageParallelLabel, StageTaskGroup, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
 import { StageHeaderChipType } from "./StageNode.types.js";
 import { flattenTasks, getProjection, reorderTasks } from "./StageNode.utils.js";
 import { getContextMenuItems, getDivider, getMenuItem } from "./StageNodeTaskUtilities.js";
+import { StageTaskDragOverlay } from "./StageTaskDragOverlay.js";
 const CHIP_ICONS = {
     [StageHeaderChipType.Entry]: /*#__PURE__*/ jsx(EntryConditionIcon, {
         w: Icon.IconXs,
@@ -43,54 +44,7 @@ const CHIP_ICONS = {
         size: Icon.IconXs
     })
 };
-const AdhocTaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay })=>{
-    const [playLoading, setPlayLoading] = useState(false);
-    const debouncedTaskPlay = useMemo(()=>debounce(async (id)=>{
-            setPlayLoading(true);
-            try {
-                await onTaskPlay(id);
-            } catch  {} finally{
-                setPlayLoading(false);
-            }
-        }, 500, {
-            immediate: true
-        }), [
-        onTaskPlay
-    ]);
-    const handlePlayClick = useCallback((e)=>{
-        e.stopPropagation();
-        e.preventDefault();
-        debouncedTaskPlay(taskId);
-    }, [
-        debouncedTaskPlay,
-        taskId
-    ]);
-    return /*#__PURE__*/ jsx(ApTooltip, {
-        content: "Trigger task",
-        placement: "top",
-        children: /*#__PURE__*/ jsx(ApIconButton, {
-            "data-testid": `stage-task-play-${taskId}`,
-            onClick: handlePlayClick,
-            onMouseDown: (e)=>e.stopPropagation(),
-            onKeyDown: (e)=>e.stopPropagation(),
-            className: "task-menu-icon-button",
-            sx: {
-                color: 'var(--uix-canvas-primary) !important',
-                minWidth: 'unset !important',
-                width: `${Spacing.SpacingL} !important`,
-                height: `${Spacing.SpacingL} !important`,
-                padding: '0 !important'
-            },
-            children: playLoading ? /*#__PURE__*/ jsx(ApCircularProgress, {
-                size: 20
-            }) : /*#__PURE__*/ jsx(PlayIcon, {
-                w: 20,
-                h: 20
-            })
-        })
-    });
-});
-const StageNodeComponent = (props)=>{
+const StageNodeInner = (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, onTaskPlay, hideParallelOptions } = props;
     const taskWidth = width ? width - STAGE_CONTENT_INSET : void 0;
     const allTasks = useMemo(()=>stageDetails?.tasks || [], [
@@ -99,7 +53,11 @@ const StageNodeComponent = (props)=>{
     const tasks = useMemo(()=>allTasks.filter((group)=>group.some((t)=>!t.isAdhoc)), [
         allTasks
     ]);
-    const adhocTasks = useMemo(()=>allTasks.flat().filter((t)=>t.isAdhoc), [
+    const adhocTasks = useMemo(()=>allTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+                    task,
+                    groupIndex,
+                    taskIndex
+                })).filter(({ task })=>task.isAdhoc)), [
         allTasks
     ]);
     const flatTasks = useMemo(()=>tasks.flat(), [
@@ -116,9 +74,6 @@ const StageNodeComponent = (props)=>{
     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);
@@ -135,6 +90,7 @@ const StageNodeComponent = (props)=>{
         taskIndex: -1
     });
     const isConnecting = useStore((state)=>!!state.connectionClickStartHandle);
+    const storeApi = useStoreApi();
     const connectedHandleIds = useConnectedHandles(id);
     const [isAddingTask, setIsAddingTask] = useState(false);
     const [isReplacingTask, setIsReplacingTask] = useState(false);
@@ -174,7 +130,6 @@ const StageNodeComponent = (props)=>{
         tasks,
         activeDragId
     ]);
-    const { zoom } = useViewport();
     const projected = useMemo(()=>{
         if (!activeDragId || !overId) return null;
         return getProjection(tasks, activeDragId, overId, offsetLeft);
@@ -257,18 +212,26 @@ const StageNodeComponent = (props)=>{
         handleStageTitleClickToSave,
         isStageTitleEditing
     ]);
-    const contextMenuItems = useCallback((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
+    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
+    const buildContextMenuItems = useCallback((groupIndex, taskIndex)=>{
+        const taskGroup = tasks[groupIndex] ?? [];
+        const isParallel = taskGroup.length > 1;
         const items = [];
         if (onReplaceTaskFromToolbox) {
             items.push(getMenuItem('replace-task', 'Replace task', ()=>{
-                const taskId = tasks[groupIndex]?.[taskIndex]?.id;
+                taskStateReference.current = {
+                    isParallel,
+                    groupIndex,
+                    taskIndex
+                };
+                const taskId = taskGroup[taskIndex]?.id;
                 if (taskId) onTaskClick?.(taskId);
                 setIsReplacingTask(true);
             }));
             items.push(getDivider());
         }
         if (onTaskGroupModification) {
-            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction, hideParallelOptions);
+            const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, onTaskGroupModification, hideParallelOptions);
             return [
                 ...items,
                 ...reGroupOptions
@@ -279,11 +242,31 @@ const StageNodeComponent = (props)=>{
         onReplaceTaskFromToolbox,
         onTaskClick,
         onTaskGroupModification,
-        reGroupTaskFunction,
         tasks,
         hideParallelOptions
     ]);
-    const { setSelectedNodeId } = useNodeSelection();
+    const getAdhocContextMenuItems = useCallback((groupIndex, taskIndex, taskId)=>{
+        const items = [];
+        if (onReplaceTaskFromToolbox) items.push(getMenuItem('replace-task', 'Replace task', ()=>{
+            taskStateReference.current = {
+                isParallel: false,
+                groupIndex,
+                taskIndex
+            };
+            onTaskClick?.(taskId);
+            setIsReplacingTask(true);
+        }));
+        if (onTaskGroupModification) {
+            if (items.length > 0) items.push(getDivider());
+            items.push(getMenuItem('remove-task', 'Delete task', ()=>onTaskGroupModification(GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
+        }
+        return items;
+    }, [
+        onReplaceTaskFromToolbox,
+        onTaskClick,
+        onTaskGroupModification
+    ]);
+    const { setSelectedNodeId } = useSetNodeSelection();
     const handleStageClick = useCallback(()=>{
         onStageClick?.();
     }, [
@@ -406,9 +389,9 @@ const StageNodeComponent = (props)=>{
         setActiveDragId(event.active.id);
     }, []);
     const handleDragMove = useCallback((event)=>{
-        setOffsetLeft(event.delta.x / zoom);
+        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
     }, [
-        zoom
+        storeApi
     ]);
     const handleDragOver = useCallback((event)=>{
         setOverId(event.over?.id ?? null);
@@ -444,12 +427,6 @@ const StageNodeComponent = (props)=>{
         } : void 0, [
         taskWidth
     ]);
-    const dragOverlayStyle = useMemo(()=>({
-            transform: `scale(${zoom})`,
-            transformOrigin: 'top left'
-        }), [
-        zoom
-    ]);
     return /*#__PURE__*/ jsxs("div", {
         "data-testid": `stage-${id}`,
         style: {
@@ -467,6 +444,7 @@ const StageNodeComponent = (props)=>{
                 children: [
                     /*#__PURE__*/ jsxs(StageHeader, {
                         isException: isException,
+                        "data-testid": `stage-header-${id}`,
                         children: [
                             /*#__PURE__*/ jsxs(Row, {
                                 gap: Spacing.SpacingMicro,
@@ -631,19 +609,13 @@ const StageNodeComponent = (props)=>{
                                                                             taskExecution: taskExecution,
                                                                             isSelected: selectedTaskId === 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),
+                                                                            groupIndex: groupIndex,
+                                                                            taskIndex: taskIndex,
                                                                             onTaskClick: handleTaskClick,
                                                                             projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
                                                                             isDragDisabled: !onTaskReorder,
-                                                                            zoom: zoom,
-                                                                            ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
-                                                                                onMenuOpen: ()=>{
-                                                                                    taskStateReference.current = {
-                                                                                        isParallel,
-                                                                                        groupIndex,
-                                                                                        taskIndex
-                                                                                    };
-                                                                                }
+                                                                            ...hasContextMenu && {
+                                                                                getContextMenuItems: buildContextMenuItems
                                                                             }
                                                                         }, task.id);
                                                                     })
@@ -654,23 +626,11 @@ const StageNodeComponent = (props)=>{
                                                 })
                                             })
                                         }),
-                                        /*#__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(StageTaskDragOverlay, {
+                                            activeTask: activeTask,
+                                            isActiveTaskParallel: isActiveTaskParallel,
+                                            taskWidthStyle: taskWidthStyle
+                                        })
                                     ]
                                 }),
                                 adhocTasks.length > 0 && /*#__PURE__*/ jsxs(StageAdhocSection, {
@@ -686,23 +646,17 @@ const StageNodeComponent = (props)=>{
                                             })
                                         }),
                                         /*#__PURE__*/ jsx(StageTaskList, {
-                                            children: adhocTasks.map((task)=>{
+                                            children: adhocTasks.map(({ task, groupIndex, taskIndex })=>{
                                                 const taskExecution = execution?.taskStatus?.[task.id];
-                                                return /*#__PURE__*/ jsxs(StageTask, {
-                                                    "data-testid": `stage-task-${task.id}`,
-                                                    selected: selectedTaskId === task.id,
-                                                    status: taskExecution?.status,
-                                                    onClick: (e)=>handleTaskClick(e, task.id),
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(TaskContent, {
-                                                            task: task,
-                                                            taskExecution: taskExecution
-                                                        }),
-                                                        onTaskPlay && /*#__PURE__*/ jsx(AdhocTaskPlayButton, {
-                                                            taskId: task.id,
-                                                            onTaskPlay: onTaskPlay
-                                                        })
-                                                    ]
+                                                return /*#__PURE__*/ jsx(AdhocTaskItem, {
+                                                    task: task,
+                                                    taskExecution: taskExecution,
+                                                    isSelected: selectedTaskId === task.id,
+                                                    onTaskClick: handleTaskClick,
+                                                    onTaskPlay: onTaskPlay,
+                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
+                                                        getContextMenuItems: ()=>getAdhocContextMenuItems(groupIndex, taskIndex, task.id)
+                                                    }
                                                 }, task.id);
                                             })
                                         })
@@ -746,5 +700,30 @@ const StageNodeComponent = (props)=>{
         ]
     });
 };
-const StageNode = /*#__PURE__*/ memo(StageNodeComponent);
+const StageNodeInnerMemo = /*#__PURE__*/ memo(StageNodeInner);
+const StageNode = ({ dragging, selected, id, width, execution, stageDetails, addTaskLabel, addTaskLoading, replaceTaskLabel, taskOptions, menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay, hideParallelOptions })=>/*#__PURE__*/ jsx(StageNodeInnerMemo, {
+        dragging: dragging,
+        selected: selected,
+        id: id,
+        width: width,
+        execution: execution,
+        stageDetails: stageDetails,
+        addTaskLabel: addTaskLabel,
+        addTaskLoading: addTaskLoading,
+        replaceTaskLabel: replaceTaskLabel,
+        taskOptions: taskOptions,
+        menuItems: menuItems,
+        pendingReplaceTask: pendingReplaceTask,
+        onStageClick: onStageClick,
+        onTaskAdd: onTaskAdd,
+        onAddTaskFromToolbox: onAddTaskFromToolbox,
+        onTaskToolboxSearch: onTaskToolboxSearch,
+        onTaskClick: onTaskClick,
+        onTaskGroupModification: onTaskGroupModification,
+        onStageTitleChange: onStageTitleChange,
+        onTaskReorder: onTaskReorder,
+        onReplaceTaskFromToolbox: onReplaceTaskFromToolbox,
+        onTaskPlay: onTaskPlay,
+        hideParallelOptions: hideParallelOptions
+    });
 export { StageNode };