@uipath/apollo-react 4.24.2 → 4.25.0

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

@@ -38,6 +38,18 @@ const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../Execu
 const ExecutionStatusIcon_cjs_namespaceObject = require("../ExecutionStatusIcon/ExecutionStatusIcon.cjs");
 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_useStageNodeLabels_cjs_namespaceObject = require("./useStageNodeLabels.cjs");
+const SLA_ICON_CONFIG = {
+    warning: {
+        icon: 'triangle-alert',
+        iconColor: 'var(--canvas-warning-icon)'
+    },
+    error: {
+        icon: 'circle-alert',
+        iconColor: 'var(--canvas-error-icon)'
+    }
+};
 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,
@@ -61,183 +73,126 @@ const CHIP_ICONS = {
     })
 };
 const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTaskAddClick })=>{
-    const { id, stageDetails, execution, addTaskLabel = 'Add task', onTaskAdd, onAddTaskFromToolbox, onStageTitleChange, loadingTaskIds } = props;
+    const labels = (0, external_useStageNodeLabels_cjs_namespaceObject.useStageNodeLabels)();
+    const { id, stageDetails, execution, onTaskAdd, onAddTaskFromToolbox, onStageTitleChange, loadingTaskIds } = props;
     const isAddTaskDisabled = (loadingTaskIds?.size ?? 0) > 0;
     const icon = stageDetails?.icon;
     const statusLabel = execution?.stageStatus?.label;
     const stageDuration = execution?.stageStatus?.duration;
-    const isStageTitleEditable = !!onStageTitleChange && !isReadOnly;
-    const [isStageTitleEditing, setIsStageTitleEditing] = (0, external_react_namespaceObject.useState)(false);
-    const stageTitleRef = (0, external_react_namespaceObject.useRef)(null);
-    const [label, setLabel] = (0, external_react_namespaceObject.useState)(props.stageDetails.label);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        setLabel(props.stageDetails.label);
-    }, [
-        props.stageDetails.label
-    ]);
-    const handleStageTitleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
-        setIsStageTitleEditing(true);
-        setLabel(e.target.value);
-    }, []);
-    const handleStageTitleClickToSave = (0, external_react_namespaceObject.useCallback)((e)=>{
-        if (isStageTitleEditing && !stageTitleRef.current?.contains(e.target)) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) {
-                if ('' === label.trim()) setLabel('Untitled Stage');
-                onStageTitleChange(label);
-            }
-        }
-    }, [
-        isStageTitleEditing,
-        onStageTitleChange,
-        label
-    ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (isStageTitleEditing) document.addEventListener('click', handleStageTitleClickToSave);
-        return ()=>{
-            document.removeEventListener('click', handleStageTitleClickToSave);
-        };
-    }, [
-        handleStageTitleClickToSave,
-        isStageTitleEditing
-    ]);
-    const handleStageTitleBlurToSave = (0, external_react_namespaceObject.useCallback)(()=>{
-        if (isStageTitleEditing) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) {
-                if ('' === label.trim()) setLabel('Untitled Stage');
-                onStageTitleChange(label);
-            }
-        }
-    }, [
-        isStageTitleEditing,
-        onStageTitleChange,
-        label
-    ]);
-    const handleStageTitleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
-        if ('Enter' === e.key) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) onStageTitleChange(label);
-        }
-        if ('Escape' !== e.key) e.stopPropagation();
-    }, [
-        onStageTitleChange,
-        label
-    ]);
+    const slaText = execution?.stageStatus?.slaText;
+    const slaIcon = execution?.stageStatus?.slaIcon;
+    const slaIndicator = slaIcon ? SLA_ICON_CONFIG[slaIcon] : void 0;
     return /*#__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,
-                align: "center",
-                flex: 1,
-                minW: 0,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-start justify-between gap-1",
                 children: [
-                    icon,
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-                        py: 2,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                        gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
+                        align: "center",
                         flex: 1,
                         minW: 0,
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: (0, apollo_wind_namespaceObject.cn)('text-sm', !isStageTitleEditing && 'font-bold'),
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                    content: label,
-                                    placement: "top",
-                                    delay: true,
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTitleContainer, {
-                                        isEditing: isStageTitleEditing,
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTitleInput, {
-                                            name: "Stage Title",
-                                            isStageTitleEditable: isStageTitleEditable,
-                                            value: label,
-                                            ref: stageTitleRef,
-                                            isEditing: isStageTitleEditing,
-                                            ...onStageTitleChange && {
-                                                onFocus: ()=>setIsStageTitleEditing(true),
-                                                onInput: handleStageTitleChange,
-                                                onKeyDown: handleStageTitleKeyDown,
-                                                onBlur: handleStageTitleBlurToSave
-                                            },
-                                            readOnly: !isStageTitleEditable
-                                        })
+                            icon,
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTitleInput_cjs_namespaceObject.StageTitleInput, {
+                                label: stageDetails.label,
+                                onChange: isReadOnly ? void 0 : onStageTitleChange,
+                                className: "flex-1 min-w-0"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                        gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
+                        align: "start",
+                        py: apollo_core_namespaceObject.Padding.PadS,
+                        children: [
+                            status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                                content: statusLabel,
+                                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,
+                                    children: 'NotExecuted' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                        icon: "hourglass",
+                                        size: 20,
+                                        color: (0, ExecutionStatusIcon_cjs_namespaceObject.getExecutionStatusColor)('NotExecuted')
+                                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
+                                        status: status,
+                                        size: 20
                                     })
                                 })
                             }),
-                            stageDuration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: "text-xs text-foreground-muted",
-                                children: stageDuration
-                            }),
-                            stageDetails.headerChips && stageDetails.headerChips.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageHeaderChipsRow, {
-                                children: stageDetails.headerChips.map((chip)=>{
-                                    const button = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageChip, {
-                                        type: "button",
-                                        "aria-label": 'string' == typeof chip.tooltip ? chip.tooltip : chip.type,
-                                        onClick: (e)=>{
-                                            e.stopPropagation();
-                                            chip.onClick?.();
-                                        },
-                                        children: [
-                                            CHIP_ICONS[chip.type],
-                                            void 0 !== chip.count && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                className: "text-xs",
-                                                children: chip.count
-                                            })
-                                        ]
-                                    }, chip.type);
-                                    if (chip.tooltip) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                        placement: "bottom",
-                                        content: chip.tooltip,
-                                        children: button
-                                    }, chip.type);
-                                    return button;
+                            (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                                content: labels.addTask,
+                                placement: "top",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                    variant: "ghost",
+                                    size: "icon",
+                                    className: "h-6 w-6",
+                                    onClick: handleTaskAddClick,
+                                    "aria-label": labels.addTask,
+                                    disabled: isAddTaskDisabled,
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                        icon: "plus",
+                                        size: 20
+                                    })
                                 })
                             })
                         ]
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
-                align: "start",
-                py: apollo_core_namespaceObject.Padding.PadS,
+            (slaText || stageDetails.headerChips && stageDetails.headerChips.length > 0) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "mt-1 flex flex-wrap items-center justify-between gap-2",
                 children: [
-                    status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                        content: statusLabel,
-                        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,
-                            children: 'NotExecuted' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                                icon: "hourglass",
-                                size: 20,
-                                color: (0, ExecutionStatusIcon_cjs_namespaceObject.getExecutionStatusColor)('NotExecuted')
-                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
-                                status: status,
-                                size: 20
-                            })
-                        })
+                    slaText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                        className: "inline-flex items-center gap-1 text-xs text-foreground-muted",
+                        "data-testid": `stage-sla-${id}`,
+                        "data-sla-icon": slaIcon,
+                        children: [
+                            slaIndicator && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                icon: slaIndicator.icon,
+                                size: 16,
+                                color: slaIndicator.iconColor
+                            }),
+                            slaText
+                        ]
                     }),
-                    (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                        content: addTaskLabel,
-                        placement: "top",
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
-                            variant: "ghost",
-                            size: "icon",
-                            className: "h-6 w-6",
-                            onClick: handleTaskAddClick,
-                            "aria-label": addTaskLabel,
-                            disabled: isAddTaskDisabled,
-                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                                icon: "plus",
-                                size: 20
-                            })
+                    stageDetails.headerChips && stageDetails.headerChips.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "flex flex-wrap items-center gap-1",
+                        children: stageDetails.headerChips.map((chip)=>{
+                            const button = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageChip, {
+                                type: "button",
+                                "aria-label": 'string' == typeof chip.tooltip ? chip.tooltip : chip.type,
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    chip.onClick?.();
+                                },
+                                children: [
+                                    CHIP_ICONS[chip.type],
+                                    void 0 !== chip.count && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "text-xs",
+                                        children: chip.count
+                                    })
+                                ]
+                            }, chip.type);
+                            if (chip.tooltip) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                                placement: "bottom",
+                                content: chip.tooltip,
+                                children: button
+                            }, chip.type);
+                            return button;
                         })
                     })
                 ]
+            }),
+            stageDuration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "mt-1 text-xs text-foreground-muted",
+                children: stageDuration
             })
         ]
     });

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":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAoMrE,eAAO,MAAM,eAAe,wGAnLzB;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,6CA6KwD,CAAC"}
+{"version":3,"file":"StageNodeHeader.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeHeader.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAgB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAqJnF,eAAO,MAAM,eAAe,wGAvHzB;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,6CAiHwD,CAAC"}

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

@@ -1,15 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Icon, Padding, Spacing } from "@uipath/apollo-core";
-import { Column, Row } from "../../layouts/index.js";
-import { Button, cn } from "@uipath/apollo-wind";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Row } from "../../layouts/index.js";
+import { Button } from "@uipath/apollo-wind";
+import { memo } from "react";
 import { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from "../../icons/index.js";
 import { CanvasIcon } from "../../utils/icon-registry.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
 import { getExecutionStatusColor } from "../ExecutionStatusIcon/ExecutionStatusIcon.js";
-import { StageChip, StageHeader, StageHeaderChipsRow, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
+import { StageChip, StageHeader } from "./StageNode.styles.js";
 import { StageHeaderChipType } from "./StageNode.types.js";
+import { StageTitleInput } from "./StageTitleInput.js";
+import { useStageNodeLabels } from "./useStageNodeLabels.js";
+const SLA_ICON_CONFIG = {
+    warning: {
+        icon: 'triangle-alert',
+        iconColor: 'var(--canvas-warning-icon)'
+    },
+    error: {
+        icon: 'circle-alert',
+        iconColor: 'var(--canvas-error-icon)'
+    }
+};
 const CHIP_ICONS = {
     [StageHeaderChipType.Entry]: /*#__PURE__*/ jsx(EntryConditionIcon, {
         w: Icon.IconXs,
@@ -33,183 +45,126 @@ const CHIP_ICONS = {
     })
 };
 const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTaskAddClick })=>{
-    const { id, stageDetails, execution, addTaskLabel = 'Add task', onTaskAdd, onAddTaskFromToolbox, onStageTitleChange, loadingTaskIds } = props;
+    const labels = useStageNodeLabels();
+    const { id, stageDetails, execution, onTaskAdd, onAddTaskFromToolbox, onStageTitleChange, loadingTaskIds } = props;
     const isAddTaskDisabled = (loadingTaskIds?.size ?? 0) > 0;
     const icon = stageDetails?.icon;
     const statusLabel = execution?.stageStatus?.label;
     const stageDuration = execution?.stageStatus?.duration;
-    const isStageTitleEditable = !!onStageTitleChange && !isReadOnly;
-    const [isStageTitleEditing, setIsStageTitleEditing] = useState(false);
-    const stageTitleRef = useRef(null);
-    const [label, setLabel] = useState(props.stageDetails.label);
-    useEffect(()=>{
-        setLabel(props.stageDetails.label);
-    }, [
-        props.stageDetails.label
-    ]);
-    const handleStageTitleChange = useCallback((e)=>{
-        setIsStageTitleEditing(true);
-        setLabel(e.target.value);
-    }, []);
-    const handleStageTitleClickToSave = useCallback((e)=>{
-        if (isStageTitleEditing && !stageTitleRef.current?.contains(e.target)) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) {
-                if ('' === label.trim()) setLabel('Untitled Stage');
-                onStageTitleChange(label);
-            }
-        }
-    }, [
-        isStageTitleEditing,
-        onStageTitleChange,
-        label
-    ]);
-    useEffect(()=>{
-        if (isStageTitleEditing) document.addEventListener('click', handleStageTitleClickToSave);
-        return ()=>{
-            document.removeEventListener('click', handleStageTitleClickToSave);
-        };
-    }, [
-        handleStageTitleClickToSave,
-        isStageTitleEditing
-    ]);
-    const handleStageTitleBlurToSave = useCallback(()=>{
-        if (isStageTitleEditing) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) {
-                if ('' === label.trim()) setLabel('Untitled Stage');
-                onStageTitleChange(label);
-            }
-        }
-    }, [
-        isStageTitleEditing,
-        onStageTitleChange,
-        label
-    ]);
-    const handleStageTitleKeyDown = useCallback((e)=>{
-        if ('Enter' === e.key) {
-            setIsStageTitleEditing(false);
-            if (onStageTitleChange) onStageTitleChange(label);
-        }
-        if ('Escape' !== e.key) e.stopPropagation();
-    }, [
-        onStageTitleChange,
-        label
-    ]);
+    const slaText = execution?.stageStatus?.slaText;
+    const slaIcon = execution?.stageStatus?.slaIcon;
+    const slaIndicator = slaIcon ? SLA_ICON_CONFIG[slaIcon] : void 0;
     return /*#__PURE__*/ jsxs(StageHeader, {
         isException: isException,
         "data-testid": `stage-header-${id}`,
         children: [
-            /*#__PURE__*/ jsxs(Row, {
-                gap: Spacing.SpacingMicro,
-                align: "center",
-                flex: 1,
-                minW: 0,
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-start justify-between gap-1",
                 children: [
-                    icon,
-                    /*#__PURE__*/ jsxs(Column, {
-                        py: 2,
+                    /*#__PURE__*/ jsxs(Row, {
+                        gap: Spacing.SpacingMicro,
+                        align: "center",
                         flex: 1,
                         minW: 0,
                         children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: cn('text-sm', !isStageTitleEditing && 'font-bold'),
-                                children: /*#__PURE__*/ jsx(CanvasTooltip, {
-                                    content: label,
-                                    placement: "top",
-                                    delay: true,
-                                    children: /*#__PURE__*/ jsx(StageTitleContainer, {
-                                        isEditing: isStageTitleEditing,
-                                        children: /*#__PURE__*/ jsx(StageTitleInput, {
-                                            name: "Stage Title",
-                                            isStageTitleEditable: isStageTitleEditable,
-                                            value: label,
-                                            ref: stageTitleRef,
-                                            isEditing: isStageTitleEditing,
-                                            ...onStageTitleChange && {
-                                                onFocus: ()=>setIsStageTitleEditing(true),
-                                                onInput: handleStageTitleChange,
-                                                onKeyDown: handleStageTitleKeyDown,
-                                                onBlur: handleStageTitleBlurToSave
-                                            },
-                                            readOnly: !isStageTitleEditable
-                                        })
+                            icon,
+                            /*#__PURE__*/ jsx(StageTitleInput, {
+                                label: stageDetails.label,
+                                onChange: isReadOnly ? void 0 : onStageTitleChange,
+                                className: "flex-1 min-w-0"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Row, {
+                        gap: Spacing.SpacingMicro,
+                        align: "start",
+                        py: Padding.PadS,
+                        children: [
+                            status && /*#__PURE__*/ jsx(CanvasTooltip, {
+                                content: statusLabel,
+                                placement: "top",
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    variant: "ghost",
+                                    size: "icon",
+                                    className: "h-6 w-6",
+                                    "aria-label": statusLabel,
+                                    children: 'NotExecuted' === status ? /*#__PURE__*/ jsx(CanvasIcon, {
+                                        icon: "hourglass",
+                                        size: 20,
+                                        color: getExecutionStatusColor('NotExecuted')
+                                    }) : /*#__PURE__*/ jsx(ExecutionStatusIcon, {
+                                        status: status,
+                                        size: 20
                                     })
                                 })
                             }),
-                            stageDuration && /*#__PURE__*/ jsx("span", {
-                                className: "text-xs text-foreground-muted",
-                                children: stageDuration
-                            }),
-                            stageDetails.headerChips && stageDetails.headerChips.length > 0 && /*#__PURE__*/ jsx(StageHeaderChipsRow, {
-                                children: stageDetails.headerChips.map((chip)=>{
-                                    const button = /*#__PURE__*/ jsxs(StageChip, {
-                                        type: "button",
-                                        "aria-label": 'string' == typeof chip.tooltip ? chip.tooltip : chip.type,
-                                        onClick: (e)=>{
-                                            e.stopPropagation();
-                                            chip.onClick?.();
-                                        },
-                                        children: [
-                                            CHIP_ICONS[chip.type],
-                                            void 0 !== chip.count && /*#__PURE__*/ jsx("span", {
-                                                className: "text-xs",
-                                                children: chip.count
-                                            })
-                                        ]
-                                    }, chip.type);
-                                    if (chip.tooltip) return /*#__PURE__*/ jsx(CanvasTooltip, {
-                                        placement: "bottom",
-                                        content: chip.tooltip,
-                                        children: button
-                                    }, chip.type);
-                                    return button;
+                            (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(CanvasTooltip, {
+                                content: labels.addTask,
+                                placement: "top",
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    variant: "ghost",
+                                    size: "icon",
+                                    className: "h-6 w-6",
+                                    onClick: handleTaskAddClick,
+                                    "aria-label": labels.addTask,
+                                    disabled: isAddTaskDisabled,
+                                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                        icon: "plus",
+                                        size: 20
+                                    })
                                 })
                             })
                         ]
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxs(Row, {
-                gap: Spacing.SpacingMicro,
-                align: "start",
-                py: Padding.PadS,
+            (slaText || stageDetails.headerChips && stageDetails.headerChips.length > 0) && /*#__PURE__*/ jsxs("div", {
+                className: "mt-1 flex flex-wrap items-center justify-between gap-2",
                 children: [
-                    status && /*#__PURE__*/ jsx(CanvasTooltip, {
-                        content: statusLabel,
-                        placement: "top",
-                        children: /*#__PURE__*/ jsx(Button, {
-                            variant: "ghost",
-                            size: "icon",
-                            className: "h-6 w-6",
-                            "aria-label": statusLabel,
-                            children: 'NotExecuted' === status ? /*#__PURE__*/ jsx(CanvasIcon, {
-                                icon: "hourglass",
-                                size: 20,
-                                color: getExecutionStatusColor('NotExecuted')
-                            }) : /*#__PURE__*/ jsx(ExecutionStatusIcon, {
-                                status: status,
-                                size: 20
-                            })
-                        })
+                    slaText && /*#__PURE__*/ jsxs("span", {
+                        className: "inline-flex items-center gap-1 text-xs text-foreground-muted",
+                        "data-testid": `stage-sla-${id}`,
+                        "data-sla-icon": slaIcon,
+                        children: [
+                            slaIndicator && /*#__PURE__*/ jsx(CanvasIcon, {
+                                icon: slaIndicator.icon,
+                                size: 16,
+                                color: slaIndicator.iconColor
+                            }),
+                            slaText
+                        ]
                     }),
-                    (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(CanvasTooltip, {
-                        content: addTaskLabel,
-                        placement: "top",
-                        children: /*#__PURE__*/ jsx(Button, {
-                            variant: "ghost",
-                            size: "icon",
-                            className: "h-6 w-6",
-                            onClick: handleTaskAddClick,
-                            "aria-label": addTaskLabel,
-                            disabled: isAddTaskDisabled,
-                            children: /*#__PURE__*/ jsx(CanvasIcon, {
-                                icon: "plus",
-                                size: 20
-                            })
+                    stageDetails.headerChips && stageDetails.headerChips.length > 0 && /*#__PURE__*/ jsx("div", {
+                        className: "flex flex-wrap items-center gap-1",
+                        children: stageDetails.headerChips.map((chip)=>{
+                            const button = /*#__PURE__*/ jsxs(StageChip, {
+                                type: "button",
+                                "aria-label": 'string' == typeof chip.tooltip ? chip.tooltip : chip.type,
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    chip.onClick?.();
+                                },
+                                children: [
+                                    CHIP_ICONS[chip.type],
+                                    void 0 !== chip.count && /*#__PURE__*/ jsx("span", {
+                                        className: "text-xs",
+                                        children: chip.count
+                                    })
+                                ]
+                            }, chip.type);
+                            if (chip.tooltip) return /*#__PURE__*/ jsx(CanvasTooltip, {
+                                placement: "bottom",
+                                content: chip.tooltip,
+                                children: button
+                            }, chip.type);
+                            return button;
                         })
                     })
                 ]
+            }),
+            stageDuration && /*#__PURE__*/ jsx("span", {
+                className: "mt-1 text-xs text-foreground-muted",
+                children: stageDuration
             })
         ]
     });