@uipath/apollo-react 6.11.2 → 6.12.1

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

@@ -29,7 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../icons/index.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
-const StageTaskEntryConditionIcon = ({ task, small })=>{
+const StageTaskEntryConditionIcon = ({ task })=>{
     if (!task.hasEntryCondition) return null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
         content: "Entry condition",
@@ -41,12 +41,12 @@ const StageTaskEntryConditionIcon = ({ task, small })=>{
                 alignItems: 'center',
                 justifyContent: 'center',
                 color: 'var(--color-icon-default)',
-                flexShrink: 0,
-                transform: small ? 'translateX(1px)' : 'translateX(0.5px)'
+                flexShrink: 0
             },
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.EntryConditionIcon, {
-                w: small ? 16 : 20,
-                h: small ? 16 : 20
+                w: 13,
+                h: 15,
+                tight: true
             })
         })
     });

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

@@ -1,6 +1,5 @@
 import type { StageTaskItem } from './StageNode.types';
-export declare const StageTaskEntryConditionIcon: ({ task, small, }: {
+export declare const StageTaskEntryConditionIcon: ({ task }: {
     task: StageTaskItem;
-    small?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=StageTaskEntryConditionIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StageTaskEntryConditionIcon.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageTaskEntryConditionIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,eAAO,MAAM,2BAA2B,GAAI,kBAGzC;IACD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,mDAuBA,CAAC"}
+{"version":3,"file":"StageTaskEntryConditionIcon.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageTaskEntryConditionIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,eAAO,MAAM,2BAA2B,GAAI,UAAU;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,mDAoB5E,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { EntryConditionIcon } from "../../icons/index.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
-const StageTaskEntryConditionIcon = ({ task, small })=>{
+const StageTaskEntryConditionIcon = ({ task })=>{
     if (!task.hasEntryCondition) return null;
     return /*#__PURE__*/ jsx(CanvasTooltip, {
         content: "Entry condition",
@@ -13,12 +13,12 @@ const StageTaskEntryConditionIcon = ({ task, small })=>{
                 alignItems: 'center',
                 justifyContent: 'center',
                 color: 'var(--color-icon-default)',
-                flexShrink: 0,
-                transform: small ? 'translateX(1px)' : 'translateX(0.5px)'
+                flexShrink: 0
             },
             children: /*#__PURE__*/ jsx(EntryConditionIcon, {
-                w: small ? 16 : 20,
-                h: small ? 16 : 20
+                w: 13,
+                h: 15,
+                tight: true
             })
         })
     });

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

@@ -28,11 +28,41 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
-function TaskBreakpointDotInner({ active, taskId }) {
-    if (!active) return null;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
+const DOT = 'absolute -top-1.5 -left-1.5 z-10 h-3.5 w-3.5 rounded-full bg-(--canvas-error-icon)';
+function TaskBreakpointDotInner({ active, taskId, onToggle }) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const handleClick = (0, external_react_namespaceObject.useCallback)((e)=>{
+        e.stopPropagation();
+        onToggle?.(taskId);
+    }, [
+        onToggle,
+        taskId
+    ]);
+    const stopPointerDown = (0, external_react_namespaceObject.useCallback)((e)=>e.stopPropagation(), []);
+    if (!onToggle) return active ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
         "data-testid": `stage-task-breakpoint-${taskId}`,
-        className: "pointer-events-none absolute -top-1.5 -left-1.5 z-10 h-3.5 w-3.5 rounded-full bg-(--canvas-error-icon)"
+        className: `pointer-events-none ${DOT}`
+    }) : null;
+    const label = active ? _({
+        id: 'stage-node.breakpoint.remove',
+        message: 'Click to remove the breakpoint'
+    }) : _({
+        id: 'stage-node.breakpoint.add',
+        message: 'Click to add a breakpoint'
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+        content: label,
+        placement: "top",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+            type: "button",
+            "data-testid": active ? `stage-task-breakpoint-${taskId}` : `stage-task-add-breakpoint-${taskId}`,
+            "aria-label": label,
+            className: active ? DOT : `task-breakpoint-add ${DOT}`,
+            onClick: handleClick,
+            onPointerDown: stopPointerDown
+        })
     });
 }
 const TaskBreakpointDot = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(TaskBreakpointDotInner);

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

@@ -1,8 +1,9 @@
 export interface TaskBreakpointDotProps {
     active: boolean;
     taskId: string;
+    onToggle?: (taskId: string) => void;
 }
-declare function TaskBreakpointDotInner({ active, taskId }: TaskBreakpointDotProps): import("react/jsx-runtime").JSX.Element | null;
+declare function TaskBreakpointDotInner({ active, taskId, onToggle }: TaskBreakpointDotProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const TaskBreakpointDot: import("react").MemoExoticComponent<typeof TaskBreakpointDotInner>;
 export {};
 //# sourceMappingURL=TaskBreakpointDot.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TaskBreakpointDot.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskBreakpointDot.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;IAErC,MAAM,EAAE,OAAO,CAAC;IAEhB,MAAM,EAAE,MAAM,CAAC;CAChB;AAYD,iBAAS,sBAAsB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,sBAAsB,kDAWzE;AAED,eAAO,MAAM,iBAAiB,oEAA+B,CAAC"}
+{"version":3,"file":"TaskBreakpointDot.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskBreakpointDot.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,sBAAsB;IAErC,MAAM,EAAE,OAAO,CAAC;IAEhB,MAAM,EAAE,MAAM,CAAC;IAOf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAcD,iBAAS,sBAAsB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,sBAAsB,kDAyCnF;AAED,eAAO,MAAM,iBAAiB,oEAA+B,CAAC"}

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

@@ -1,10 +1,40 @@
 import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
-function TaskBreakpointDotInner({ active, taskId }) {
-    if (!active) return null;
-    return /*#__PURE__*/ jsx("span", {
+import { memo, useCallback } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
+import { CanvasTooltip } from "../CanvasTooltip.js";
+const DOT = 'absolute -top-1.5 -left-1.5 z-10 h-3.5 w-3.5 rounded-full bg-(--canvas-error-icon)';
+function TaskBreakpointDotInner({ active, taskId, onToggle }) {
+    const { _ } = useSafeLingui();
+    const handleClick = useCallback((e)=>{
+        e.stopPropagation();
+        onToggle?.(taskId);
+    }, [
+        onToggle,
+        taskId
+    ]);
+    const stopPointerDown = useCallback((e)=>e.stopPropagation(), []);
+    if (!onToggle) return active ? /*#__PURE__*/ jsx("span", {
         "data-testid": `stage-task-breakpoint-${taskId}`,
-        className: "pointer-events-none absolute -top-1.5 -left-1.5 z-10 h-3.5 w-3.5 rounded-full bg-(--canvas-error-icon)"
+        className: `pointer-events-none ${DOT}`
+    }) : null;
+    const label = active ? _({
+        id: 'stage-node.breakpoint.remove',
+        message: 'Click to remove the breakpoint'
+    }) : _({
+        id: 'stage-node.breakpoint.add',
+        message: 'Click to add a breakpoint'
+    });
+    return /*#__PURE__*/ jsx(CanvasTooltip, {
+        content: label,
+        placement: "top",
+        children: /*#__PURE__*/ jsx("button", {
+            type: "button",
+            "data-testid": active ? `stage-task-breakpoint-${taskId}` : `stage-task-add-breakpoint-${taskId}`,
+            "aria-label": label,
+            className: active ? DOT : `task-breakpoint-add ${DOT}`,
+            onClick: handleClick,
+            onPointerDown: stopPointerDown
+        })
     });
 }
 const TaskBreakpointDot = /*#__PURE__*/ memo(TaskBreakpointDotInner);

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

@@ -46,6 +46,7 @@ const external_react_namespaceObject = require("react");
 const external_i18n_index_cjs_namespaceObject = require("../../../i18n/index.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
+const external_formatDuration_cjs_namespaceObject = require("./formatDuration.cjs");
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
 const external_StageTaskEntryConditionIcon_cjs_namespaceObject = require("./StageTaskEntryConditionIcon.cjs");
 const external_useExecutionStatusLabel_cjs_namespaceObject = require("./useExecutionStatusLabel.cjs");
@@ -135,8 +136,8 @@ const TaskPlayButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
         })
     });
 });
-const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ task, taskExecution, isDragging, onTaskPlay })=>{
-    const { _ } = (0, external_i18n_index_cjs_namespaceObject.useSafeLingui)();
+const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ task, taskExecution, isDragging, onTaskPlay, trailingContent })=>{
+    const { _, locale } = (0, external_i18n_index_cjs_namespaceObject.useSafeLingui)();
     const getStatusName = (0, external_useExecutionStatusLabel_cjs_namespaceObject.useExecutionStatusLabel)();
     const hasExecutionStatus = !!taskExecution?.status;
     const retries = taskExecution?.retryCount ?? 0;
@@ -163,10 +164,11 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
     const taskStatusFallbackName = hasExecutionStatus ? getStatusName(taskExecution?.status) : '';
     const taskStatusTooltip = taskExecution?.message || taskStatusFallbackName;
     const showRequiredMarker = task.isRequired && !task.isAdhoc && 'adhoc' !== task.taskGroupType;
-    const durationLabel = taskExecution?.duration ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+    const durationText = taskExecution?.durationMs !== void 0 ? (0, external_formatDuration_cjs_namespaceObject.formatDurationMs)(taskExecution.durationMs, locale) : taskExecution?.duration;
+    const durationLabel = durationText ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
         "data-testid": `stage-task-duration-${task.id}`,
         className: "text-xs text-foreground-muted",
-        children: taskExecution.duration
+        children: durationText
     }) : null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
         flex: 1,
@@ -185,10 +187,23 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap'
                 },
+                "data-testid": `stage-task-identity-${task.id}`,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskIcon, {
-                        "data-testid": `stage-task-icon-${task.id}`,
-                        children: task.icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessCanvasIcon, {})
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                        gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
+                        align: "center",
+                        style: {
+                            flexShrink: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTaskEntryConditionIcon_cjs_namespaceObject.StageTaskEntryConditionIcon, {
+                                task: task
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskIcon, {
+                                "data-testid": `stage-task-icon-${task.id}`,
+                                children: task.icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessCanvasIcon, {})
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                         content: task.label,
@@ -233,6 +248,7 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                 style: {
                     flexShrink: 0
                 },
+                "data-testid": `stage-task-actions-${task.id}`,
                 children: [
                     durationLabel && (taskExecution?.durationTooltip ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                         content: taskExecution.durationTooltip,
@@ -273,9 +289,6 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                             })
                         })
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTaskEntryConditionIcon_cjs_namespaceObject.StageTaskEntryConditionIcon, {
-                        task: task
-                    }),
                     hasExecutionStatus && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                         content: taskStatusTooltip,
                         placement: "top",
@@ -293,7 +306,8 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                     onTaskPlay && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TaskPlayButton, {
                         taskId: task.id,
                         onTaskPlay: onTaskPlay
-                    })
+                    }),
+                    trailingContent
                 ]
             })
         ]

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

@@ -4,6 +4,7 @@ export interface TaskContentProps {
     taskExecution?: StageTaskExecution;
     isDragging?: boolean;
     onTaskPlay?: (taskId: string) => Promise<void>;
+    trailingContent?: React.ReactNode;
 }
-export declare const TaskContent: import("react").MemoExoticComponent<({ task, taskExecution, isDragging, onTaskPlay }: TaskContentProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TaskContent: import("react").MemoExoticComponent<({ task, taskExecution, isDragging, onTaskPlay, trailingContent }: TaskContentProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=TaskContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TaskContent.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskContent.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAuE3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,WAAW,wFAC4B,gBAAgB,6CAqJnE,CAAC"}
+{"version":3,"file":"TaskContent.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskContent.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAuE3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,yGAC6C,gBAAgB,6CAoKpF,CAAC"}

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

@@ -8,6 +8,7 @@ import { memo, useCallback, useMemo, useState } from "react";
 import { useSafeLingui } from "../../../i18n/index.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
+import { formatDurationMs } from "./formatDuration.js";
 import { StageTaskIcon } from "./StageNode.styles.js";
 import { StageTaskEntryConditionIcon } from "./StageTaskEntryConditionIcon.js";
 import { useExecutionStatusLabel } from "./useExecutionStatusLabel.js";
@@ -97,8 +98,8 @@ const TaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay })=>{
         })
     });
 });
-const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTaskPlay })=>{
-    const { _ } = useSafeLingui();
+const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTaskPlay, trailingContent })=>{
+    const { _, locale } = useSafeLingui();
     const getStatusName = useExecutionStatusLabel();
     const hasExecutionStatus = !!taskExecution?.status;
     const retries = taskExecution?.retryCount ?? 0;
@@ -125,10 +126,11 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
     const taskStatusFallbackName = hasExecutionStatus ? getStatusName(taskExecution?.status) : '';
     const taskStatusTooltip = taskExecution?.message || taskStatusFallbackName;
     const showRequiredMarker = task.isRequired && !task.isAdhoc && 'adhoc' !== task.taskGroupType;
-    const durationLabel = taskExecution?.duration ? /*#__PURE__*/ jsx("span", {
+    const durationText = taskExecution?.durationMs !== void 0 ? formatDurationMs(taskExecution.durationMs, locale) : taskExecution?.duration;
+    const durationLabel = durationText ? /*#__PURE__*/ jsx("span", {
         "data-testid": `stage-task-duration-${task.id}`,
         className: "text-xs text-foreground-muted",
-        children: taskExecution.duration
+        children: durationText
     }) : null;
     return /*#__PURE__*/ jsxs(Row, {
         flex: 1,
@@ -147,10 +149,23 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap'
                 },
+                "data-testid": `stage-task-identity-${task.id}`,
                 children: [
-                    /*#__PURE__*/ jsx(StageTaskIcon, {
-                        "data-testid": `stage-task-icon-${task.id}`,
-                        children: task.icon ?? /*#__PURE__*/ jsx(ProcessCanvasIcon, {})
+                    /*#__PURE__*/ jsxs(Row, {
+                        gap: Spacing.SpacingMicro,
+                        align: "center",
+                        style: {
+                            flexShrink: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(StageTaskEntryConditionIcon, {
+                                task: task
+                            }),
+                            /*#__PURE__*/ jsx(StageTaskIcon, {
+                                "data-testid": `stage-task-icon-${task.id}`,
+                                children: task.icon ?? /*#__PURE__*/ jsx(ProcessCanvasIcon, {})
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsx(CanvasTooltip, {
                         content: task.label,
@@ -195,6 +210,7 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
                 style: {
                     flexShrink: 0
                 },
+                "data-testid": `stage-task-actions-${task.id}`,
                 children: [
                     durationLabel && (taskExecution?.durationTooltip ? /*#__PURE__*/ jsx(CanvasTooltip, {
                         content: taskExecution.durationTooltip,
@@ -235,9 +251,6 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
                             })
                         })
                     }),
-                    /*#__PURE__*/ jsx(StageTaskEntryConditionIcon, {
-                        task: task
-                    }),
                     hasExecutionStatus && /*#__PURE__*/ jsx(CanvasTooltip, {
                         content: taskStatusTooltip,
                         placement: "top",
@@ -255,7 +268,8 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
                     onTaskPlay && /*#__PURE__*/ jsx(TaskPlayButton, {
                         taskId: task.id,
                         onTaskPlay: onTaskPlay
-                    })
+                    }),
+                    trailingContent
                 ]
             })
         ]

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

@@ -29,7 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const CanvasDropdownMenu_cjs_namespaceObject = require("../shared/CanvasDropdownMenu.cjs");
-const TaskMenuComponent = ({ task, getContextMenuItems, disabled }, ref)=>{
+const TaskMenuComponent = ({ task, getContextMenuItems, disabled, hideTrigger }, ref)=>{
     const [isOpen, setIsOpen] = (0, external_react_namespaceObject.useState)(false);
     const [menuItems, setMenuItems] = (0, external_react_namespaceObject.useState)([]);
     const handleOpenChange = (0, external_react_namespaceObject.useCallback)((open)=>{
@@ -64,6 +64,9 @@ const TaskMenuComponent = ({ task, getContextMenuItems, disabled }, ref)=>{
         onItemClick: handleMenuItemClick,
         triggerTestId: `stage-task-menu-${task.id}`,
         triggerAriaLabel: "Task actions",
+        triggerClassName: "-ml-0.5 h-4 w-4 rounded-sm",
+        hideTrigger: hideTrigger,
+        hiddenTriggerClassName: "top-1/2 right-1.5 h-4 w-0 -translate-y-1/2",
         contentClassName: "w-[300px]",
         disabled: disabled
     });

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

@@ -7,6 +7,7 @@ interface TaskMenuProps {
     task: StageTaskItem;
     getContextMenuItems: (task: StageTaskItem) => NodeMenuItem[];
     disabled?: boolean;
+    hideTrigger?: boolean;
 }
 export declare const TaskMenu: import("react").NamedExoticComponent<TaskMenuProps & import("react").RefAttributes<TaskMenuHandle>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TaskMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,aAAa,CAAC;IAEpB,mBAAmB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,YAAY,EAAE,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqDD,eAAO,MAAM,QAAQ,qGAAsC,CAAC"}
+{"version":3,"file":"TaskMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,aAAa,CAAC;IAEpB,mBAAmB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,YAAY,EAAE,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA+DD,eAAO,MAAM,QAAQ,qGAAsC,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, memo, useCallback, useImperativeHandle, useState } from "react";
 import { CanvasDropdownMenu } from "../shared/CanvasDropdownMenu.js";
-const TaskMenuComponent = ({ task, getContextMenuItems, disabled }, ref)=>{
+const TaskMenuComponent = ({ task, getContextMenuItems, disabled, hideTrigger }, ref)=>{
     const [isOpen, setIsOpen] = useState(false);
     const [menuItems, setMenuItems] = useState([]);
     const handleOpenChange = useCallback((open)=>{
@@ -36,6 +36,9 @@ const TaskMenuComponent = ({ task, getContextMenuItems, disabled }, ref)=>{
         onItemClick: handleMenuItemClick,
         triggerTestId: `stage-task-menu-${task.id}`,
         triggerAriaLabel: "Task actions",
+        triggerClassName: "-ml-0.5 h-4 w-4 rounded-sm",
+        hideTrigger: hideTrigger,
+        hiddenTriggerClassName: "top-1/2 right-1.5 h-4 w-0 -translate-y-1/2",
         contentClassName: "w-[300px]",
         disabled: disabled
     });

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

@@ -0,0 +1,63 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    formatDurationMs: ()=>formatDurationMs
+});
+const external_luxon_namespaceObject = require("luxon");
+const UNITS = [
+    'years',
+    'months',
+    'weeks',
+    'days',
+    'hours',
+    'minutes',
+    'seconds'
+];
+function formatDurationMs(ms, locale = 'en', maxUnits = 3) {
+    if (!Number.isFinite(ms) || ms <= 0 || maxUnits < 1) return '';
+    const parts = external_luxon_namespaceObject.Duration.fromMillis(ms).shiftTo(...UNITS).toObject();
+    const largest = {};
+    for (const unit of UNITS){
+        const value = Math.floor(parts[unit] ?? 0);
+        if (!(value <= 0)) {
+            largest[unit] = value;
+            if (Object.keys(largest).length === maxUnits) break;
+        }
+    }
+    if (0 === Object.keys(largest).length) return '';
+    return external_luxon_namespaceObject.Duration.fromObject(largest).reconfigure({
+        locale
+    }).toHuman({
+        unitDisplay: 'short'
+    });
+}
+exports.formatDurationMs = __webpack_exports__.formatDurationMs;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "formatDurationMs"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,2 @@
+export declare function formatDurationMs(ms: number, locale?: string, maxUnits?: number): string;
+//# sourceMappingURL=formatDuration.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"formatDuration.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/formatDuration.ts"],"names":[],"mappings":"AAoBA,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,SAAO,EAAE,QAAQ,SAAI,GAAG,MAAM,CA2BhF"}

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

@@ -0,0 +1,29 @@
+import { Duration } from "luxon";
+const UNITS = [
+    'years',
+    'months',
+    'weeks',
+    'days',
+    'hours',
+    'minutes',
+    'seconds'
+];
+function formatDurationMs(ms, locale = 'en', maxUnits = 3) {
+    if (!Number.isFinite(ms) || ms <= 0 || maxUnits < 1) return '';
+    const parts = Duration.fromMillis(ms).shiftTo(...UNITS).toObject();
+    const largest = {};
+    for (const unit of UNITS){
+        const value = Math.floor(parts[unit] ?? 0);
+        if (!(value <= 0)) {
+            largest[unit] = value;
+            if (Object.keys(largest).length === maxUnits) break;
+        }
+    }
+    if (0 === Object.keys(largest).length) return '';
+    return Duration.fromObject(largest).reconfigure({
+        locale
+    }).toHuman({
+        unitDisplay: 'short'
+    });
+}
+export { formatDurationMs };

package/dist/canvas/components/shared/CanvasDropdownMenu.cjs

@@ -29,7 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
-function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, triggerTestId, triggerAriaLabel = 'Dropdown menu', contentClassName, disabled }) {
+function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, triggerTestId, triggerAriaLabel = 'Dropdown menu', triggerClassName = 'h-6 w-6', hideTrigger, hiddenTriggerClassName, contentClassName, disabled }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DropdownMenu, {
         open: open,
         onOpenChange: onOpenChange,
@@ -37,10 +37,13 @@ function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, trigge
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DropdownMenuTrigger, {
                 asChild: true,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                children: hideTrigger ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    "aria-hidden": true,
+                    className: `pointer-events-none absolute ${hiddenTriggerClassName ?? ''}`
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
                     variant: "ghost",
                     size: "icon",
-                    className: "h-6 w-6",
+                    className: triggerClassName,
                     "data-testid": triggerTestId,
                     "aria-label": triggerAriaLabel,
                     disabled: disabled,

package/dist/canvas/components/shared/CanvasDropdownMenu.d.ts

@@ -6,9 +6,12 @@ interface CanvasDropdownMenuProps {
     onItemClick: (item: NodeMenuAction) => void;
     triggerTestId?: string;
     triggerAriaLabel?: string;
+    triggerClassName?: string;
+    hideTrigger?: boolean;
+    hiddenTriggerClassName?: string;
     contentClassName?: string;
     disabled?: boolean;
 }
-export declare function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, triggerTestId, triggerAriaLabel, contentClassName, disabled, }: CanvasDropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, triggerTestId, triggerAriaLabel, triggerClassName, hideTrigger, hiddenTriggerClassName, contentClassName, disabled, }: CanvasDropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CanvasDropdownMenu.d.ts.map

package/dist/canvas/components/shared/CanvasDropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/shared/CanvasDropdownMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvE,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,WAAW,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAYD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAkC,EAClC,gBAAgB,EAChB,QAAQ,GACT,EAAE,uBAAuB,2CAqCzB"}
+{"version":3,"file":"CanvasDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/shared/CanvasDropdownMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvE,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,WAAW,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAM1B,WAAW,CAAC,EAAE,OAAO,CAAC;IAMtB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAYD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAkC,EAClC,gBAA4B,EAC5B,WAAW,EACX,sBAAsB,EACtB,gBAAgB,EAChB,QAAQ,GACT,EAAE,uBAAuB,2CA+CzB"}

package/dist/canvas/components/shared/CanvasDropdownMenu.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@uipath/apollo-wind";
 import { CanvasIcon } from "../../utils/icon-registry.js";
-function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, triggerTestId, triggerAriaLabel = 'Dropdown menu', contentClassName, disabled }) {
+function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, triggerTestId, triggerAriaLabel = 'Dropdown menu', triggerClassName = 'h-6 w-6', hideTrigger, hiddenTriggerClassName, contentClassName, disabled }) {
     return /*#__PURE__*/ jsxs(DropdownMenu, {
         open: open,
         onOpenChange: onOpenChange,
@@ -9,10 +9,13 @@ function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, trigge
         children: [
             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
                 asChild: true,
-                children: /*#__PURE__*/ jsx(Button, {
+                children: hideTrigger ? /*#__PURE__*/ jsx("span", {
+                    "aria-hidden": true,
+                    className: `pointer-events-none absolute ${hiddenTriggerClassName ?? ''}`
+                }) : /*#__PURE__*/ jsx(Button, {
                     variant: "ghost",
                     size: "icon",
-                    className: "h-6 w-6",
+                    className: triggerClassName,
                     "data-testid": triggerTestId,
                     "aria-label": triggerAriaLabel,
                     disabled: disabled,

package/dist/canvas/icons/EntryConditionIcon.cjs

@@ -27,10 +27,10 @@ __webpack_require__.d(__webpack_exports__, {
     EntryConditionIcon: ()=>EntryConditionIcon
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const EntryConditionIcon = ({ w = 20, h = 20 })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
+const EntryConditionIcon = ({ w = 20, h = 20, tight = false })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
         width: w,
         height: h,
-        viewBox: "0 0 20 20",
+        viewBox: tight ? '3.5 2.5 13 15' : '0 0 20 20',
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {

package/dist/canvas/icons/EntryConditionIcon.d.ts

@@ -1,5 +1,6 @@
-export declare const EntryConditionIcon: ({ w, h, }: {
+export declare const EntryConditionIcon: ({ w, h, tight, }: {
     w?: number | string;
     h?: number | string;
+    tight?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EntryConditionIcon.d.ts.map

package/dist/canvas/icons/EntryConditionIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EntryConditionIcon.d.ts","sourceRoot":"","sources":["../../../src/canvas/icons/EntryConditionIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,GAAI,WAGhC;IACD,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,4CASA,CAAC"}
+{"version":3,"file":"EntryConditionIcon.d.ts","sourceRoot":"","sources":["../../../src/canvas/icons/EntryConditionIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,GAAI,kBAIhC;IACD,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAeA,CAAC"}