@uipath/apollo-react 4.31.0 → 4.32.0

package/dist/canvas/components/LoopNode/LoopNode.cjs

@@ -160,6 +160,7 @@ function LoopNodeComponent(props) {
     const { id, type, data, selected = false, dragging = false, width = 0, height = 0, onAddFirstChild, onResize, toolbarConfig: toolbarConfigProp, adornments: adornmentsProp, executionStatusOverride, suggestionType: suggestionTypeProp, iterationState: iterationStateProp } = props;
     const nodeTypeRegistry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
+    const [isResizing, setIsResizing] = (0, external_react_namespaceObject.useState)(false);
     const resolvedData = data ?? EMPTY_DATA;
     const isLoading = !!resolvedData.loading;
     const suggestionType = suggestionTypeProp ?? resolvedData.suggestionType;
@@ -208,8 +209,10 @@ function LoopNodeComponent(props) {
     const isDropTarget = true === resolvedData.isDropTarget;
     const containerWidth = width || container_cjs_namespaceObject.DEFAULT_CONTAINER_WIDTH;
     const containerHeight = height || container_cjs_namespaceObject.DEFAULT_CONTAINER_HEIGHT;
-    const showResizeControls = selected && !dragging && isDesignMode;
-    const resizeMinimums = useContainerResizeMinimums(id, containerWidth, containerHeight, showResizeControls);
+    const resizeControlsMounted = isDesignMode && !dragging;
+    const resizeControlsVisible = resizeControlsMounted && (selected || isResizing);
+    const resizeMinimumsEnabled = resizeControlsMounted && (selected || isHovered || isResizing);
+    const resizeMinimums = useContainerResizeMinimums(id, containerWidth, containerHeight, resizeMinimumsEnabled);
     const nodeSizeStyle = {
         width: containerWidth,
         height: containerHeight,
@@ -259,6 +262,8 @@ function LoopNodeComponent(props) {
     }, [
         onResize
     ]);
+    const handleResizeStart = (0, external_react_namespaceObject.useCallback)(()=>setIsResizing(true), []);
+    const handleResizeEnd = (0, external_react_namespaceObject.useCallback)(()=>setIsResizing(false), []);
     const handleEmptyClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onAddFirstChild?.();
     }, [
@@ -312,11 +317,13 @@ function LoopNodeComponent(props) {
                     children: adornments[slot]
                 }, slot) : null),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ResizeCornerIndicators, {
-                visible: showResizeControls
+                visible: resizeControlsVisible
             }),
-            showResizeControls ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ResizeControls, {
+            resizeControlsMounted ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ResizeControls, {
                 minimums: resizeMinimums,
-                onResize: handleResize
+                onResize: handleResize,
+                onResizeStart: handleResizeStart,
+                onResizeEnd: handleResizeEnd
             }) : null,
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
                 title: displayTitle,
@@ -382,6 +389,7 @@ function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAd
         paddingLeft: hasTopLeftAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0,
         paddingRight: hasTopRightAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0
     } : void 0;
+    const executionModeIcon = isParallel ? 'columns-3' : 'rows-3';
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: (0, apollo_wind_namespaceObject.cn)('flex shrink-0 cursor-grab items-center justify-between gap-2.5 rounded-t-[18px]', '-mb-2.5 bg-surface-overlay px-3.5 pb-2.5 pt-2.5 text-foreground', 'active:cursor-grabbing'),
         style: headerStyle,
@@ -404,11 +412,11 @@ function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAd
                         className: "flex h-6 shrink-0 items-center gap-1 rounded-full border border-border bg-surface px-2.5 text-[11px] font-semibold leading-4 text-foreground shadow-sm",
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: (0, apollo_wind_namespaceObject.cn)('flex shrink-0', isParallel && 'rotate-90'),
+                                className: "flex shrink-0",
                                 "aria-hidden": true,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                                    icon: "align-justify",
-                                    size: 11
+                                    icon: executionModeIcon,
+                                    size: 12
                                 })
                             }),
                             isParallel ? 'Parallel' : 'Sequential'
@@ -441,14 +449,16 @@ function BodyFrame({ isEmpty, isLoading }) {
         }) : null
     });
 }
-function ResizeControls({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize }) {
+function ResizeControls({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize, onResizeStart, onResizeEnd }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
         children: RESIZE_CONTROLS.map(({ position, widthSide, heightSide, cursor })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
                 style: RESIZE_CONTROL_STYLE,
                 position: position,
                 minWidth: minimums[widthSide],
                 minHeight: minimums[heightSide],
+                onResizeStart: onResizeStart,
                 onResize: onResize,
+                onResizeEnd: onResizeEnd,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                     className: "absolute bottom-0 right-0 h-5 w-5 pointer-events-auto",
                     style: {
@@ -462,6 +472,7 @@ function ResizeCornerIndicators({ visible }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
         children: RESIZE_CONTROLS.map(({ position, indicatorClassName })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 "aria-hidden": true,
+                "data-testid": `loop-resize-corner-indicator-${position}`,
                 className: (0, apollo_wind_namespaceObject.cn)('pointer-events-none absolute h-2 w-2 rounded-full bg-brand transition-opacity', indicatorClassName, visible ? 'opacity-100' : 'opacity-0')
             }, position))
     });

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

@@ -1 +1 @@
-{"version":3,"file":"LoopNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAsB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAsI1E,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CA0P9C;AAED,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}
+{"version":3,"file":"LoopNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAsB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAsI1E,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CAoQ9C;AAED,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}

package/dist/canvas/components/LoopNode/LoopNode.js

@@ -132,6 +132,7 @@ function LoopNodeComponent(props) {
     const { id, type, data, selected = false, dragging = false, width = 0, height = 0, onAddFirstChild, onResize, toolbarConfig: toolbarConfigProp, adornments: adornmentsProp, executionStatusOverride, suggestionType: suggestionTypeProp, iterationState: iterationStateProp } = props;
     const nodeTypeRegistry = useOptionalNodeTypeRegistry();
     const [isHovered, setIsHovered] = useState(false);
+    const [isResizing, setIsResizing] = useState(false);
     const resolvedData = data ?? EMPTY_DATA;
     const isLoading = !!resolvedData.loading;
     const suggestionType = suggestionTypeProp ?? resolvedData.suggestionType;
@@ -180,8 +181,10 @@ function LoopNodeComponent(props) {
     const isDropTarget = true === resolvedData.isDropTarget;
     const containerWidth = width || DEFAULT_CONTAINER_WIDTH;
     const containerHeight = height || DEFAULT_CONTAINER_HEIGHT;
-    const showResizeControls = selected && !dragging && isDesignMode;
-    const resizeMinimums = useContainerResizeMinimums(id, containerWidth, containerHeight, showResizeControls);
+    const resizeControlsMounted = isDesignMode && !dragging;
+    const resizeControlsVisible = resizeControlsMounted && (selected || isResizing);
+    const resizeMinimumsEnabled = resizeControlsMounted && (selected || isHovered || isResizing);
+    const resizeMinimums = useContainerResizeMinimums(id, containerWidth, containerHeight, resizeMinimumsEnabled);
     const nodeSizeStyle = {
         width: containerWidth,
         height: containerHeight,
@@ -231,6 +234,8 @@ function LoopNodeComponent(props) {
     }, [
         onResize
     ]);
+    const handleResizeStart = useCallback(()=>setIsResizing(true), []);
+    const handleResizeEnd = useCallback(()=>setIsResizing(false), []);
     const handleEmptyClick = useCallback(()=>{
         onAddFirstChild?.();
     }, [
@@ -284,11 +289,13 @@ function LoopNodeComponent(props) {
                     children: adornments[slot]
                 }, slot) : null),
             /*#__PURE__*/ jsx(ResizeCornerIndicators, {
-                visible: showResizeControls
+                visible: resizeControlsVisible
             }),
-            showResizeControls ? /*#__PURE__*/ jsx(ResizeControls, {
+            resizeControlsMounted ? /*#__PURE__*/ jsx(ResizeControls, {
                 minimums: resizeMinimums,
-                onResize: handleResize
+                onResize: handleResize,
+                onResizeStart: handleResizeStart,
+                onResizeEnd: handleResizeEnd
             }) : null,
             /*#__PURE__*/ jsx(Header, {
                 title: displayTitle,
@@ -354,6 +361,7 @@ function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAd
         paddingLeft: hasTopLeftAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0,
         paddingRight: hasTopRightAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0
     } : void 0;
+    const executionModeIcon = isParallel ? 'columns-3' : 'rows-3';
     return /*#__PURE__*/ jsxs("div", {
         className: cn('flex shrink-0 cursor-grab items-center justify-between gap-2.5 rounded-t-[18px]', '-mb-2.5 bg-surface-overlay px-3.5 pb-2.5 pt-2.5 text-foreground', 'active:cursor-grabbing'),
         style: headerStyle,
@@ -376,11 +384,11 @@ function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAd
                         className: "flex h-6 shrink-0 items-center gap-1 rounded-full border border-border bg-surface px-2.5 text-[11px] font-semibold leading-4 text-foreground shadow-sm",
                         children: [
                             /*#__PURE__*/ jsx("span", {
-                                className: cn('flex shrink-0', isParallel && 'rotate-90'),
+                                className: "flex shrink-0",
                                 "aria-hidden": true,
                                 children: /*#__PURE__*/ jsx(CanvasIcon, {
-                                    icon: "align-justify",
-                                    size: 11
+                                    icon: executionModeIcon,
+                                    size: 12
                                 })
                             }),
                             isParallel ? 'Parallel' : 'Sequential'
@@ -413,14 +421,16 @@ function BodyFrame({ isEmpty, isLoading }) {
         }) : null
     });
 }
-function ResizeControls({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize }) {
+function ResizeControls({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize, onResizeStart, onResizeEnd }) {
     return /*#__PURE__*/ jsx(Fragment, {
         children: RESIZE_CONTROLS.map(({ position, widthSide, heightSide, cursor })=>/*#__PURE__*/ jsx(NodeResizeControl, {
                 style: RESIZE_CONTROL_STYLE,
                 position: position,
                 minWidth: minimums[widthSide],
                 minHeight: minimums[heightSide],
+                onResizeStart: onResizeStart,
                 onResize: onResize,
+                onResizeEnd: onResizeEnd,
                 children: /*#__PURE__*/ jsx("div", {
                     className: "absolute bottom-0 right-0 h-5 w-5 pointer-events-auto",
                     style: {
@@ -434,6 +444,7 @@ function ResizeCornerIndicators({ visible }) {
     return /*#__PURE__*/ jsx(Fragment, {
         children: RESIZE_CONTROLS.map(({ position, indicatorClassName })=>/*#__PURE__*/ jsx("div", {
                 "aria-hidden": true,
+                "data-testid": `loop-resize-corner-indicator-${position}`,
                 className: cn('pointer-events-none absolute h-2 w-2 rounded-full bg-brand transition-opacity', indicatorClassName, visible ? 'opacity-100' : 'opacity-0')
             }, position))
     });

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

@@ -40,6 +40,7 @@ const ExecutionStatusIcon_cjs_namespaceObject = require("../ExecutionStatusIcon/
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
 const external_StageNode_types_cjs_namespaceObject = require("./StageNode.types.cjs");
 const external_StageTitleInput_cjs_namespaceObject = require("./StageTitleInput.cjs");
+const external_useExecutionStatusLabel_cjs_namespaceObject = require("./useExecutionStatusLabel.cjs");
 const external_useStageNodeLabels_cjs_namespaceObject = require("./useStageNodeLabels.cjs");
 const SLA_ICON_CONFIG = {
     warning: {
@@ -70,6 +71,7 @@ const CHIP_ICONS = {
 };
 const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTaskAddClick })=>{
     const labels = (0, external_useStageNodeLabels_cjs_namespaceObject.useStageNodeLabels)();
+    const getStatusName = (0, external_useExecutionStatusLabel_cjs_namespaceObject.useExecutionStatusLabel)();
     const { id, stageDetails, execution, onTaskAdd, onAddTaskFromToolbox, onStageTitleChange, loadingTaskIds } = props;
     const isAddTaskDisabled = (loadingTaskIds?.size ?? 0) > 0;
     const icon = stageDetails?.icon;
@@ -78,6 +80,8 @@ const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTa
     const slaText = execution?.stageStatus?.slaText;
     const slaIcon = execution?.stageStatus?.slaIcon;
     const slaIndicator = slaIcon ? SLA_ICON_CONFIG[slaIcon] : void 0;
+    const statusFallbackName = status ? getStatusName(status) : '';
+    const statusTooltip = statusLabel || statusFallbackName;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageHeader, {
         isException: isException,
         "data-testid": `stage-header-${id}`,
@@ -106,13 +110,13 @@ const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTa
                         py: apollo_core_namespaceObject.Padding.PadS,
                         children: [
                             status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                content: statusLabel,
+                                content: statusTooltip,
                                 placement: "top",
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
                                     variant: "ghost",
                                     size: "icon",
                                     className: "h-6 w-6",
-                                    "aria-label": statusLabel,
+                                    "aria-label": statusTooltip,
                                     children: 'NotExecuted' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                                         icon: "hourglass",
                                         size: 20,

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

@@ -1 +1 @@
-{"version":3,"file":"StageNodeHeader.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeHeader.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAgB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAqJnF,eAAO,MAAM,eAAe,wGAxHzB;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kBAAkB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACvD,6CAkHwD,CAAC"}
+{"version":3,"file":"StageNodeHeader.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeHeader.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAgB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAyJnF,eAAO,MAAM,eAAe,wGA3HzB;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kBAAkB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACvD,6CAqHwD,CAAC"}

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

@@ -12,6 +12,7 @@ import { getExecutionStatusColor } from "../ExecutionStatusIcon/ExecutionStatusI
 import { StageChip, StageHeader } from "./StageNode.styles.js";
 import { StageHeaderChipType } from "./StageNode.types.js";
 import { StageTitleInput } from "./StageTitleInput.js";
+import { useExecutionStatusLabel } from "./useExecutionStatusLabel.js";
 import { useStageNodeLabels } from "./useStageNodeLabels.js";
 const SLA_ICON_CONFIG = {
     warning: {
@@ -42,6 +43,7 @@ const CHIP_ICONS = {
 };
 const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTaskAddClick })=>{
     const labels = useStageNodeLabels();
+    const getStatusName = useExecutionStatusLabel();
     const { id, stageDetails, execution, onTaskAdd, onAddTaskFromToolbox, onStageTitleChange, loadingTaskIds } = props;
     const isAddTaskDisabled = (loadingTaskIds?.size ?? 0) > 0;
     const icon = stageDetails?.icon;
@@ -50,6 +52,8 @@ const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTa
     const slaText = execution?.stageStatus?.slaText;
     const slaIcon = execution?.stageStatus?.slaIcon;
     const slaIndicator = slaIcon ? SLA_ICON_CONFIG[slaIcon] : void 0;
+    const statusFallbackName = status ? getStatusName(status) : '';
+    const statusTooltip = statusLabel || statusFallbackName;
     return /*#__PURE__*/ jsxs(StageHeader, {
         isException: isException,
         "data-testid": `stage-header-${id}`,
@@ -78,13 +82,13 @@ const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTa
                         py: Padding.PadS,
                         children: [
                             status && /*#__PURE__*/ jsx(CanvasTooltip, {
-                                content: statusLabel,
+                                content: statusTooltip,
                                 placement: "top",
                                 children: /*#__PURE__*/ jsx(Button, {
                                     variant: "ghost",
                                     size: "icon",
                                     className: "h-6 w-6",
-                                    "aria-label": statusLabel,
+                                    "aria-label": statusTooltip,
                                     children: 'NotExecuted' === status ? /*#__PURE__*/ jsx(CanvasIcon, {
                                         icon: "hourglass",
                                         size: 20,

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

@@ -47,6 +47,7 @@ const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs
 const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.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");
 const ProcessCanvasIcon = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
@@ -147,9 +148,12 @@ const TaskPlayButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
     });
 });
 const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ task, taskExecution, isDragging, onTaskPlay })=>{
+    const getStatusName = (0, external_useExecutionStatusLabel_cjs_namespaceObject.useExecutionStatusLabel)();
     const hasExecutionStatus = !!taskExecution?.status;
     const hasSecondRowContent = taskExecution && (taskExecution.duration || taskExecution.retryDuration || taskExecution.badge);
     const showPlayButtonSmall = onTaskPlay && hasExecutionStatus;
+    const taskStatusFallbackName = hasExecutionStatus ? getStatusName(taskExecution?.status) : '';
+    const taskStatusTooltip = taskExecution?.message || taskStatusFallbackName;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
         flex: 1,
         style: {
@@ -196,21 +200,19 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                             flexShrink: 0
                         },
                         children: [
-                            hasExecutionStatus && (taskExecution.message ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                content: taskExecution.message,
+                            hasExecutionStatus && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                                content: taskStatusTooltip,
                                 placement: "top",
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
                                     variant: "ghost",
                                     size: "icon",
                                     className: "h-4 w-4",
-                                    "aria-label": taskExecution.message,
+                                    "aria-label": taskStatusTooltip,
                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
                                         status: taskExecution.status
                                     })
                                 })
-                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
-                                status: taskExecution.status
-                            })),
+                            }),
                             !hasSecondRowContent && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTaskEntryConditionIcon_cjs_namespaceObject.StageTaskEntryConditionIcon, {
                                 task: task,
                                 small: !!hasExecutionStatus

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":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA+F3E,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,6CAqFnE,CAAC"}
+{"version":3,"file":"TaskContent.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskContent.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAgG3E,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,6CAqFnE,CAAC"}

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

@@ -9,6 +9,7 @@ import { CanvasTooltip } from "../CanvasTooltip.js";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
 import { StageTaskIcon, StageTaskRetryDuration } from "./StageNode.styles.js";
 import { StageTaskEntryConditionIcon } from "./StageTaskEntryConditionIcon.js";
+import { useExecutionStatusLabel } from "./useExecutionStatusLabel.js";
 const ProcessCanvasIcon = ()=>/*#__PURE__*/ jsxs("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
@@ -109,9 +110,12 @@ const TaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay, small })=>{
     });
 });
 const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTaskPlay })=>{
+    const getStatusName = useExecutionStatusLabel();
     const hasExecutionStatus = !!taskExecution?.status;
     const hasSecondRowContent = taskExecution && (taskExecution.duration || taskExecution.retryDuration || taskExecution.badge);
     const showPlayButtonSmall = onTaskPlay && hasExecutionStatus;
+    const taskStatusFallbackName = hasExecutionStatus ? getStatusName(taskExecution?.status) : '';
+    const taskStatusTooltip = taskExecution?.message || taskStatusFallbackName;
     return /*#__PURE__*/ jsxs(Column, {
         flex: 1,
         style: {
@@ -158,21 +162,19 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
                             flexShrink: 0
                         },
                         children: [
-                            hasExecutionStatus && (taskExecution.message ? /*#__PURE__*/ jsx(CanvasTooltip, {
-                                content: taskExecution.message,
+                            hasExecutionStatus && /*#__PURE__*/ jsx(CanvasTooltip, {
+                                content: taskStatusTooltip,
                                 placement: "top",
                                 children: /*#__PURE__*/ jsx(Button, {
                                     variant: "ghost",
                                     size: "icon",
                                     className: "h-4 w-4",
-                                    "aria-label": taskExecution.message,
+                                    "aria-label": taskStatusTooltip,
                                     children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
                                         status: taskExecution.status
                                     })
                                 })
-                            }) : /*#__PURE__*/ jsx(ExecutionStatusIcon, {
-                                status: taskExecution.status
-                            })),
+                            }),
                             !hasSecondRowContent && /*#__PURE__*/ jsx(StageTaskEntryConditionIcon, {
                                 task: task,
                                 small: !!hasExecutionStatus

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

@@ -0,0 +1,89 @@
+"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__, {
+    useExecutionStatusLabel: ()=>useExecutionStatusLabel
+});
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+function useExecutionStatusLabel() {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    return (0, external_react_namespaceObject.useCallback)((status)=>{
+        switch(status){
+            case 'InProgress':
+                return _({
+                    id: 'stage-node.status.in-progress',
+                    message: 'In progress'
+                });
+            case 'Completed':
+                return _({
+                    id: 'stage-node.status.completed',
+                    message: 'Completed'
+                });
+            case 'Paused':
+                return _({
+                    id: 'stage-node.status.paused',
+                    message: 'Paused'
+                });
+            case 'Failed':
+                return _({
+                    id: 'stage-node.status.failed',
+                    message: 'Failed'
+                });
+            case 'Cancelled':
+            case 'UserCancelled':
+                return _({
+                    id: 'stage-node.status.cancelled',
+                    message: 'Cancelled'
+                });
+            case 'Terminated':
+                return _({
+                    id: 'stage-node.status.terminated',
+                    message: 'Terminated'
+                });
+            case 'NotExecuted':
+                return _({
+                    id: 'stage-node.status.not-executed',
+                    message: 'Not started'
+                });
+            case 'Warning':
+                return _({
+                    id: 'stage-node.status.warning',
+                    message: 'Warning'
+                });
+            default:
+                return '';
+        }
+    }, [
+        _
+    ]);
+}
+exports.useExecutionStatusLabel = __webpack_exports__.useExecutionStatusLabel;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "useExecutionStatusLabel"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,3 @@
+import type { StageStatus, StageTaskStatus } from './StageNode.types';
+export declare function useExecutionStatusLabel(): (status: StageStatus | StageTaskStatus | undefined) => string;
+//# sourceMappingURL=useExecutionStatusLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useExecutionStatusLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/useExecutionStatusLabel.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAStE,wBAAgB,uBAAuB,aAI1B,WAAW,GAAG,eAAe,GAAG,SAAS,KAAG,MAAM,CAyB9D"}

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

@@ -0,0 +1,55 @@
+import { useCallback } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
+function useExecutionStatusLabel() {
+    const { _ } = useSafeLingui();
+    return useCallback((status)=>{
+        switch(status){
+            case 'InProgress':
+                return _({
+                    id: 'stage-node.status.in-progress',
+                    message: 'In progress'
+                });
+            case 'Completed':
+                return _({
+                    id: 'stage-node.status.completed',
+                    message: 'Completed'
+                });
+            case 'Paused':
+                return _({
+                    id: 'stage-node.status.paused',
+                    message: 'Paused'
+                });
+            case 'Failed':
+                return _({
+                    id: 'stage-node.status.failed',
+                    message: 'Failed'
+                });
+            case 'Cancelled':
+            case 'UserCancelled':
+                return _({
+                    id: 'stage-node.status.cancelled',
+                    message: 'Cancelled'
+                });
+            case 'Terminated':
+                return _({
+                    id: 'stage-node.status.terminated',
+                    message: 'Terminated'
+                });
+            case 'NotExecuted':
+                return _({
+                    id: 'stage-node.status.not-executed',
+                    message: 'Not started'
+                });
+            case 'Warning':
+                return _({
+                    id: 'stage-node.status.warning',
+                    message: 'Warning'
+                });
+            default:
+                return '';
+        }
+    }, [
+        _
+    ]);
+}
+export { useExecutionStatusLabel };

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.cjs

@@ -47,9 +47,10 @@ const external_remark_breaks_namespaceObject = require("remark-breaks");
 var external_remark_breaks_default = /*#__PURE__*/ __webpack_require__.n(external_remark_breaks_namespaceObject);
 const external_remark_gfm_namespaceObject = require("remark-gfm");
 var external_remark_gfm_default = /*#__PURE__*/ __webpack_require__.n(external_remark_gfm_namespaceObject);
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const external_NodeViewportOverlay_cjs_namespaceObject = require("../NodeViewportOverlay.cjs");
-const index_cjs_namespaceObject = require("../Toolbar/index.cjs");
+const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
 const external_FormattingToolbar_cjs_namespaceObject = require("./FormattingToolbar.cjs");
 const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
 const external_StickyNoteNode_styles_cjs_namespaceObject = require("./StickyNoteNode.styles.cjs");
@@ -60,6 +61,7 @@ const external_useScrollCapture_cjs_namespaceObject = require("./useScrollCaptur
 const minWidth = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize })=>{
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
     const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(!readOnly && (data.autoFocus ?? false));
     const [isResizing, setIsResizing] = (0, external_react_namespaceObject.useState)(false);
@@ -264,7 +266,10 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                     icon: "trash",
                     size: 14
                 }),
-                label: 'Delete',
+                label: _({
+                    id: 'sticky-note.toolbar.delete',
+                    message: 'Delete'
+                }),
                 onAction: handleDelete
             },
             {
@@ -273,7 +278,10 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                     icon: "pencil",
                     size: 14
                 }),
-                label: 'Edit',
+                label: _({
+                    id: 'sticky-note.toolbar.edit',
+                    message: 'Edit'
+                }),
                 onAction: handleEditClick
             },
             {
@@ -291,7 +299,10 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                         border: '1px solid transparent'
                     }
                 }),
-                label: 'Color',
+                label: _({
+                    id: 'sticky-note.toolbar.color',
+                    message: 'Color'
+                }),
                 onAction: handleToggleColorPicker
             }
         ];
@@ -303,6 +314,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             align: 'center'
         };
     }, [
+        _,
         handleEditClick,
         handleToggleColorPicker,
         color,
@@ -440,7 +452,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             })
                         ]
                     }),
-                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.NodeToolbar, {
+                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
                         nodeId: id,
                         config: toolbarConfig,
                         expanded: true,

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

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAgC1E,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAiB,MAAM,wBAAwB,CAAC;AAM7F,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAiaD,eAAO,MAAM,cAAc,sKAjZxB,mBAAmB,6CAiZqC,CAAC"}
+{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAiC1E,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAiB,MAAM,wBAAwB,CAAC;AAM7F,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAkaD,eAAO,MAAM,cAAc,sKAlZxB,mBAAmB,6CAkZqC,CAAC"}