@uipath/apollo-react 6.2.0 → 6.4.0

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

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Padding, Spacing } from "@uipath/apollo-core";
-import { Column, Row } from "../../layouts/index.js";
+import { Spacing } from "@uipath/apollo-core";
+import { Row } from "../../layouts/index.js";
 import { Badge, Button, Spinner } from "@uipath/apollo-wind";
 import debounce from "debounce";
-import { CirclePlay } from "lucide-react";
+import { CirclePlay, Redo2, RotateCcw } from "lucide-react";
 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 { StageTaskIcon, StageTaskRetryDuration } from "./StageNode.styles.js";
+import { StageTaskIcon } from "./StageNode.styles.js";
 import { StageTaskEntryConditionIcon } from "./StageTaskEntryConditionIcon.js";
 import { useExecutionStatusLabel } from "./useExecutionStatusLabel.js";
 const ProcessCanvasIcon = ()=>/*#__PURE__*/ jsxs("svg", {
@@ -47,7 +47,7 @@ const ProcessCanvasIcon = ()=>/*#__PURE__*/ jsxs("svg", {
             })
         ]
     });
-const TaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay, small })=>{
+const TaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay })=>{
     const [playLoading, setPlayLoading] = useState(false);
     const { _ } = useSafeLingui();
     const triggerTaskLabel = _({
@@ -85,7 +85,7 @@ const TaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay, small })=>{
             onMouseDown: (e)=>e.stopPropagation(),
             onKeyDown: (e)=>e.stopPropagation(),
             "aria-label": triggerTaskLabel,
-            className: small ? 'task-menu-icon-button h-4 w-4 [&_svg]:size-3.5 rounded-sm' : 'task-menu-icon-button h-4 w-4 rounded-sm',
+            className: "task-menu-icon-button h-4 w-4 rounded-sm",
             style: {
                 color: 'var(--canvas-icon-default)',
                 minWidth: 'unset',
@@ -101,174 +101,153 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
     const { _ } = useSafeLingui();
     const getStatusName = useExecutionStatusLabel();
     const hasExecutionStatus = !!taskExecution?.status;
-    const badgeText = useMemo(()=>{
-        if (!taskExecution?.badge) return;
-        if (taskExecution.retryCount && taskExecution.retryCount > 1) {
-            if ('InProgress' === taskExecution.status) return _({
-                id: 'stage-node.task-badge.running-again',
-                message: 'Running again'
-            });
-            return _({
-                id: 'stage-node.task-badge.ran-n-times',
-                message: '{count, plural, one {Ran # time} other {Ran # times}}',
-                values: {
-                    count: taskExecution.retryCount
-                }
-            });
+    const retries = taskExecution?.retryCount ?? 0;
+    const hasRuns = retries > 0;
+    const totalRuns = retries + 1;
+    const runsTooltip = taskExecution?.status === 'InProgress' ? _({
+        id: 'stage-node.task-badge.running-again',
+        message: 'Running again'
+    }) : _({
+        id: 'stage-node.task-badge.ran-n-times',
+        message: '{count, plural, one {Ran # time} other {Ran # times}}',
+        values: {
+            count: totalRuns
         }
-        return taskExecution.badge;
-    }, [
-        taskExecution?.badge,
-        taskExecution?.retryCount,
-        taskExecution?.status,
-        _
-    ]);
-    const hasSecondRowContent = taskExecution && (taskExecution.duration || taskExecution.retryDuration || badgeText);
-    const showTaskPlayButton = onTaskPlay && hasExecutionStatus;
+    });
+    const hasRework = !!taskExecution?.retryDuration;
+    const reworkTooltip = _({
+        id: 'stage-node.task-badge.rework-time',
+        message: 'Reworked (+{duration})',
+        values: {
+            duration: taskExecution?.retryDuration ?? ''
+        }
+    });
     const taskStatusFallbackName = hasExecutionStatus ? getStatusName(taskExecution?.status) : '';
     const taskStatusTooltip = taskExecution?.message || taskStatusFallbackName;
-    const durationLabel = useMemo(()=>taskExecution?.duration ? /*#__PURE__*/ jsx("span", {
-            className: "text-xs text-foreground-muted",
-            children: taskExecution.duration
-        }) : null, [
-        taskExecution?.duration
-    ]);
-    return /*#__PURE__*/ jsxs(Column, {
+    const showRequiredMarker = task.isRequired && !task.isAdhoc && 'adhoc' !== task.taskGroupType;
+    const durationLabel = taskExecution?.duration ? /*#__PURE__*/ jsx("span", {
+        className: "text-xs text-foreground-muted",
+        children: taskExecution.duration
+    }) : null;
+    return /*#__PURE__*/ jsxs(Row, {
         flex: 1,
+        align: "center",
+        justify: "space-between",
+        gap: Spacing.SpacingXs,
         style: {
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
+            overflow: 'hidden'
         },
-        gap: Padding.PadXs,
         children: [
             /*#__PURE__*/ jsxs(Row, {
-                align: "center",
-                justify: "space-between",
                 gap: Spacing.SpacingXs,
+                align: "center",
+                style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap'
+                },
                 children: [
-                    /*#__PURE__*/ jsxs(Row, {
-                        gap: Spacing.SpacingXs,
-                        align: "center",
-                        style: {
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap'
+                    /*#__PURE__*/ jsx(StageTaskIcon, {
+                        children: task.icon ?? /*#__PURE__*/ jsx(ProcessCanvasIcon, {})
+                    }),
+                    /*#__PURE__*/ jsx(CanvasTooltip, {
+                        content: task.label,
+                        placement: "top",
+                        smartTooltip: true,
+                        ...isDragging && {
+                            isOpen: false
                         },
-                        children: [
-                            /*#__PURE__*/ jsx(StageTaskIcon, {
-                                children: task.icon ?? /*#__PURE__*/ jsx(ProcessCanvasIcon, {})
-                            }),
-                            /*#__PURE__*/ jsx(CanvasTooltip, {
-                                content: task.label,
-                                placement: "top",
-                                smartTooltip: true,
-                                ...isDragging && {
-                                    isOpen: false
-                                },
-                                children: /*#__PURE__*/ jsxs(Row, {
-                                    gap: '2px',
-                                    align: "center",
+                        children: /*#__PURE__*/ jsxs(Row, {
+                            gap: '2px',
+                            align: "center",
+                            style: {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap'
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "text-sm truncate",
                                     style: {
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        whiteSpace: 'nowrap'
+                                        minWidth: 0
                                     },
-                                    children: [
-                                        /*#__PURE__*/ jsx("span", {
-                                            className: "text-sm truncate",
-                                            style: {
-                                                minWidth: 0
-                                            },
-                                            children: task.label
-                                        }),
-                                        task.isRequired && /*#__PURE__*/ jsx("span", {
-                                            className: "text-sm",
-                                            style: {
-                                                flexShrink: 0
-                                            },
-                                            children: '*'
-                                        })
-                                    ]
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(Row, {
-                        align: "center",
-                        gap: Spacing.SpacingXs,
-                        style: {
-                            flexShrink: 0
-                        },
-                        children: [
-                            hasExecutionStatus && /*#__PURE__*/ jsx(CanvasTooltip, {
-                                content: taskStatusTooltip,
-                                placement: "top",
-                                children: /*#__PURE__*/ jsx(Button, {
-                                    variant: "ghost",
-                                    size: "icon",
-                                    className: "h-4 w-4 rounded-sm",
-                                    "aria-label": taskStatusTooltip,
-                                    children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
-                                        status: taskExecution.status
-                                    })
+                                    children: task.label
+                                }),
+                                showRequiredMarker && /*#__PURE__*/ jsx("span", {
+                                    className: "text-sm",
+                                    style: {
+                                        flexShrink: 0
+                                    },
+                                    children: '*'
                                 })
-                            }),
-                            !hasSecondRowContent && /*#__PURE__*/ jsx(StageTaskEntryConditionIcon, {
-                                task: task
-                            }),
-                            showTaskPlayButton && !hasSecondRowContent && /*#__PURE__*/ jsx(TaskPlayButton, {
-                                taskId: task.id,
-                                onTaskPlay: onTaskPlay
-                            }),
-                            onTaskPlay && !hasExecutionStatus && /*#__PURE__*/ jsx(TaskPlayButton, {
-                                taskId: task.id,
-                                onTaskPlay: onTaskPlay
-                            })
-                        ]
+                            ]
+                        })
                     })
                 ]
             }),
-            taskExecution && hasSecondRowContent && /*#__PURE__*/ jsxs(Row, {
+            /*#__PURE__*/ jsxs(Row, {
                 align: "center",
-                justify: "space-between",
+                gap: Spacing.SpacingMicro,
+                style: {
+                    flexShrink: 0
+                },
                 children: [
-                    /*#__PURE__*/ jsxs(Row, {
-                        gap: '2px',
-                        children: [
-                            durationLabel && (taskExecution?.durationTooltip ? /*#__PURE__*/ jsx(CanvasTooltip, {
-                                content: taskExecution.durationTooltip,
-                                placement: "top",
-                                hide: isDragging,
-                                children: durationLabel
-                            }) : durationLabel),
-                            taskExecution?.retryDuration && /*#__PURE__*/ jsx(StageTaskRetryDuration, {
-                                status: taskExecution.badgeStatus ?? 'warning',
-                                children: /*#__PURE__*/ jsx("span", {
-                                    className: "text-xs",
-                                    children: `(+${taskExecution.retryDuration})`
-                                })
+                    durationLabel && (taskExecution?.durationTooltip ? /*#__PURE__*/ jsx(CanvasTooltip, {
+                        content: taskExecution.durationTooltip,
+                        placement: "top",
+                        hide: isDragging,
+                        children: durationLabel
+                    }) : durationLabel),
+                    hasRuns && /*#__PURE__*/ jsx(CanvasTooltip, {
+                        content: runsTooltip,
+                        placement: "top",
+                        hide: isDragging,
+                        children: /*#__PURE__*/ jsxs(Badge, {
+                            variant: "warning",
+                            role: "img",
+                            "aria-label": runsTooltip,
+                            className: "h-[14px] gap-px rounded-full px-1 py-0 text-[11px] leading-none [&>svg]:size-3",
+                            children: [
+                                /*#__PURE__*/ jsx(Redo2, {
+                                    "aria-hidden": true
+                                }),
+                                totalRuns
+                            ]
+                        })
+                    }),
+                    hasRework && /*#__PURE__*/ jsx(CanvasTooltip, {
+                        content: reworkTooltip,
+                        placement: "top",
+                        hide: isDragging,
+                        children: /*#__PURE__*/ jsx(Badge, {
+                            variant: "warning",
+                            role: "img",
+                            "aria-label": reworkTooltip,
+                            className: "h-[14px] rounded-full px-1 py-0 [&>svg]:size-3",
+                            children: /*#__PURE__*/ jsx(RotateCcw, {
+                                "aria-hidden": true
                             })
-                        ]
+                        })
                     }),
-                    /*#__PURE__*/ jsxs(Row, {
-                        align: "center",
-                        gap: Spacing.SpacingXs,
-                        children: [
-                            badgeText && /*#__PURE__*/ jsx(Badge, {
-                                variant: taskExecution.badgeStatus,
-                                children: badgeText
-                            }),
-                            /*#__PURE__*/ jsx(StageTaskEntryConditionIcon, {
-                                task: task,
-                                small: true
-                            }),
-                            showTaskPlayButton && /*#__PURE__*/ jsx(TaskPlayButton, {
-                                taskId: task.id,
-                                onTaskPlay: onTaskPlay,
-                                small: true
+                    /*#__PURE__*/ jsx(StageTaskEntryConditionIcon, {
+                        task: task
+                    }),
+                    hasExecutionStatus && /*#__PURE__*/ jsx(CanvasTooltip, {
+                        content: taskStatusTooltip,
+                        placement: "top",
+                        children: /*#__PURE__*/ jsx(Button, {
+                            variant: "ghost",
+                            size: "icon",
+                            className: "h-4 w-4 rounded-sm",
+                            "aria-label": taskStatusTooltip,
+                            children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
+                                status: taskExecution.status
                             })
-                        ]
+                        })
+                    }),
+                    onTaskPlay && /*#__PURE__*/ jsx(TaskPlayButton, {
+                        taskId: task.id,
+                        onTaskPlay: onTaskPlay
                     })
                 ]
             })