@uipath/apollo-react 3.68.1 → 3.68.3-pr431.8e3b0c3

package/dist/canvas/components/StageNode/StageNode.cjs

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -42,11 +33,9 @@ const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
-const external_debounce_namespaceObject = require("debounce");
-var external_debounce_default = /*#__PURE__*/ __webpack_require__.n(external_debounce_namespaceObject);
 const external_react_namespaceObject = require("react");
-const external_react_dom_namespaceObject = require("react-dom");
 const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
+const GroupModificationUtils_cjs_namespaceObject = require("../../utils/GroupModificationUtils.cjs");
 const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
 const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
 const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
@@ -54,11 +43,13 @@ const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../Float
 const external_NodeContextMenu_index_cjs_namespaceObject = require("../NodeContextMenu/index.cjs");
 const hooks_index_cjs_namespaceObject = require("../NodePropertiesPanel/hooks/index.cjs");
 const external_Toolbox_index_cjs_namespaceObject = require("../Toolbox/index.cjs");
+const external_AdhocTask_cjs_namespaceObject = require("./AdhocTask.cjs");
 const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs");
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
 const external_StageNode_types_cjs_namespaceObject = require("./StageNode.types.cjs");
 const external_StageNode_utils_cjs_namespaceObject = require("./StageNode.utils.cjs");
 const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
+const external_StageTaskDragOverlay_cjs_namespaceObject = require("./StageTaskDragOverlay.cjs");
 const CHIP_ICONS = {
     [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.EntryConditionIcon, {
         w: apollo_core_namespaceObject.Icon.IconXs,
@@ -81,54 +72,7 @@ const CHIP_ICONS = {
         size: apollo_core_namespaceObject.Icon.IconXs
     })
 };
-const AdhocTaskPlayButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ taskId, onTaskPlay })=>{
-    const [playLoading, setPlayLoading] = (0, external_react_namespaceObject.useState)(false);
-    const debouncedTaskPlay = (0, external_react_namespaceObject.useMemo)(()=>external_debounce_default()(async (id)=>{
-            setPlayLoading(true);
-            try {
-                await onTaskPlay(id);
-            } catch  {} finally{
-                setPlayLoading(false);
-            }
-        }, 500, {
-            immediate: true
-        }), [
-        onTaskPlay
-    ]);
-    const handlePlayClick = (0, external_react_namespaceObject.useCallback)((e)=>{
-        e.stopPropagation();
-        e.preventDefault();
-        debouncedTaskPlay(taskId);
-    }, [
-        debouncedTaskPlay,
-        taskId
-    ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
-        content: "Trigger task",
-        placement: "top",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.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: `${apollo_core_namespaceObject.Spacing.SpacingL} !important`,
-                height: `${apollo_core_namespaceObject.Spacing.SpacingL} !important`,
-                padding: '0 !important'
-            },
-            children: playLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApCircularProgress, {
-                size: 20
-            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.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 - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
     const allTasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
@@ -137,7 +81,11 @@ const StageNodeComponent = (props)=>{
     const tasks = (0, external_react_namespaceObject.useMemo)(()=>allTasks.filter((group)=>group.some((t)=>!t.isAdhoc)), [
         allTasks
     ]);
-    const adhocTasks = (0, external_react_namespaceObject.useMemo)(()=>allTasks.flat().filter((t)=>t.isAdhoc), [
+    const adhocTasks = (0, external_react_namespaceObject.useMemo)(()=>allTasks.flatMap((group, groupIndex)=>group.map((task, taskIndex)=>({
+                    task,
+                    groupIndex,
+                    taskIndex
+                })).filter(({ task })=>task.isAdhoc)), [
         allTasks
     ]);
     const flatTasks = (0, external_react_namespaceObject.useMemo)(()=>tasks.flat(), [
@@ -154,9 +102,6 @@ const StageNodeComponent = (props)=>{
     const status = execution?.stageStatus?.status;
     const statusLabel = execution?.stageStatus?.label;
     const stageDuration = execution?.stageStatus?.duration;
-    const reGroupTaskFunction = (0, external_react_namespaceObject.useMemo)(()=>onTaskGroupModification || (()=>{}), [
-        onTaskGroupModification
-    ]);
     const isStageTitleEditable = !!onStageTitleChange && !isReadOnly;
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
     const [label, setLabel] = (0, external_react_namespaceObject.useState)(props.stageDetails.label);
@@ -173,6 +118,7 @@ const StageNodeComponent = (props)=>{
         taskIndex: -1
     });
     const isConnecting = (0, react_cjs_namespaceObject.useStore)((state)=>!!state.connectionClickStartHandle);
+    const storeApi = (0, react_cjs_namespaceObject.useStoreApi)();
     const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(id);
     const [isAddingTask, setIsAddingTask] = (0, external_react_namespaceObject.useState)(false);
     const [isReplacingTask, setIsReplacingTask] = (0, external_react_namespaceObject.useState)(false);
@@ -212,7 +158,6 @@ const StageNodeComponent = (props)=>{
         tasks,
         activeDragId
     ]);
-    const { zoom } = (0, react_cjs_namespaceObject.useViewport)();
     const projected = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!activeDragId || !overId) return null;
         return (0, external_StageNode_utils_cjs_namespaceObject.getProjection)(tasks, activeDragId, overId, offsetLeft);
@@ -295,18 +240,26 @@ const StageNodeComponent = (props)=>{
         handleStageTitleClickToSave,
         isStageTitleEditing
     ]);
-    const contextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
+    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
+    const buildContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex)=>{
+        const taskGroup = tasks[groupIndex] ?? [];
+        const isParallel = taskGroup.length > 1;
         const items = [];
         if (onReplaceTaskFromToolbox) {
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.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((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
         }
         if (onTaskGroupModification) {
-            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction, hideParallelOptions);
+            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.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
@@ -317,11 +270,31 @@ const StageNodeComponent = (props)=>{
         onReplaceTaskFromToolbox,
         onTaskClick,
         onTaskGroupModification,
-        reGroupTaskFunction,
         tasks,
         hideParallelOptions
     ]);
-    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
+    const getAdhocContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex, taskId)=>{
+        const items = [];
+        if (onReplaceTaskFromToolbox) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
+            taskStateReference.current = {
+                isParallel: false,
+                groupIndex,
+                taskIndex
+            };
+            onTaskClick?.(taskId);
+            setIsReplacingTask(true);
+        }));
+        if (onTaskGroupModification) {
+            if (items.length > 0) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
+            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('remove-task', 'Delete task', ()=>onTaskGroupModification(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.REMOVE_TASK, groupIndex, taskIndex)));
+        }
+        return items;
+    }, [
+        onReplaceTaskFromToolbox,
+        onTaskClick,
+        onTaskGroupModification
+    ]);
+    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useSetNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onStageClick?.();
     }, [
@@ -444,9 +417,9 @@ const StageNodeComponent = (props)=>{
         setActiveDragId(event.active.id);
     }, []);
     const handleDragMove = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setOffsetLeft(event.delta.x / zoom);
+        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
     }, [
-        zoom
+        storeApi
     ]);
     const handleDragOver = (0, external_react_namespaceObject.useCallback)((event)=>{
         setOverId(event.over?.id ?? null);
@@ -482,12 +455,6 @@ const StageNodeComponent = (props)=>{
         } : void 0, [
         taskWidth
     ]);
-    const dragOverlayStyle = (0, external_react_namespaceObject.useMemo)(()=>({
-            transform: `scale(${zoom})`,
-            transformOrigin: 'top left'
-        }), [
-        zoom
-    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         "data-testid": `stage-${id}`,
         style: {
@@ -505,6 +472,7 @@ const StageNodeComponent = (props)=>{
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageHeader, {
                         isException: isException,
+                        "data-testid": `stage-header-${id}`,
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
                                 gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
@@ -669,19 +637,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);
                                                                     })
@@ -692,23 +654,11 @@ const StageNodeComponent = (props)=>{
                                                 })
                                             })
                                         }),
-                                        /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DragOverlay, {
-                                            children: activeTask ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                style: dragOverlayStyle,
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTask, {
-                                                    selected: true,
-                                                    isParallel: isActiveTaskParallel,
-                                                    style: {
-                                                        cursor: 'grabbing',
-                                                        ...taskWidthStyle
-                                                    },
-                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.TaskContent, {
-                                                        task: activeTask,
-                                                        isDragging: true
-                                                    })
-                                                })
-                                            }) : null
-                                        }), document.body)
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTaskDragOverlay_cjs_namespaceObject.StageTaskDragOverlay, {
+                                            activeTask: activeTask,
+                                            isActiveTaskParallel: isActiveTaskParallel,
+                                            taskWidthStyle: taskWidthStyle
+                                        })
                                     ]
                                 }),
                                 adhocTasks.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageAdhocSection, {
@@ -724,23 +674,17 @@ const StageNodeComponent = (props)=>{
                                             })
                                         }),
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskList, {
-                                            children: adhocTasks.map((task)=>{
+                                            children: adhocTasks.map(({ task, groupIndex, taskIndex })=>{
                                                 const taskExecution = execution?.taskStatus?.[task.id];
-                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageTask, {
-                                                    "data-testid": `stage-task-${task.id}`,
-                                                    selected: selectedTaskId === task.id,
-                                                    status: taskExecution?.status,
-                                                    onClick: (e)=>handleTaskClick(e, task.id),
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.TaskContent, {
-                                                            task: task,
-                                                            taskExecution: taskExecution
-                                                        }),
-                                                        onTaskPlay && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AdhocTaskPlayButton, {
-                                                            taskId: task.id,
-                                                            onTaskPlay: onTaskPlay
-                                                        })
-                                                    ]
+                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_AdhocTask_cjs_namespaceObject.AdhocTaskItem, {
+                                                    task: task,
+                                                    taskExecution: taskExecution,
+                                                    isSelected: selectedTaskId === task.id,
+                                                    onTaskClick: handleTaskClick,
+                                                    onTaskPlay: onTaskPlay,
+                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
+                                                        getContextMenuItems: ()=>getAdhocContextMenuItems(groupIndex, taskIndex, task.id)
+                                                    }
                                                 }, task.id);
                                             })
                                         })
@@ -784,7 +728,32 @@ const StageNodeComponent = (props)=>{
         ]
     });
 };
-const StageNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeComponent);
+const StageNodeInnerMemo = /*#__PURE__*/ (0, external_react_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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
+    });
 exports.StageNode = __webpack_exports__.StageNode;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "StageNode"

package/dist/canvas/components/StageNode/StageNode.d.ts

@@ -1,3 +1,3 @@
 import type { StageNodeProps } from './StageNode.types';
-export declare const StageNode: import("react").MemoExoticComponent<(props: StageNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare 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, }: StageNodeProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StageNode.d.ts.map

package/dist/canvas/components/StageNode/StageNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AA4DA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAgzBxD,eAAO,MAAM,SAAS,8CAtuBa,cAAc,6CAsuBA,CAAC"}
+{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAyDA,OAAO,KAAK,EAAuB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA6vB7E,eAAO,MAAM,SAAS,GAAI,iWAwBvB,cAAc,4CA4BhB,CAAC"}