@uipath/apollo-react 3.69.0 → 3.69.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas/components/StageNode/AdhocTask.cjs +3 -67
- package/dist/canvas/components/StageNode/AdhocTask.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/AdhocTask.js +3 -57
- package/dist/canvas/components/StageNode/DraggableTask.cjs +5 -143
- package/dist/canvas/components/StageNode/DraggableTask.d.ts +1 -2
- package/dist/canvas/components/StageNode/DraggableTask.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/DraggableTask.js +5 -140
- package/dist/canvas/components/StageNode/DraggableTask.types.d.ts +0 -5
- package/dist/canvas/components/StageNode/DraggableTask.types.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/StageNode.stories.cjs +63 -3
- package/dist/canvas/components/StageNode/StageNode.stories.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/StageNode.stories.js +63 -3
- package/dist/canvas/components/StageNode/StageTaskDragOverlay.cjs +2 -2
- package/dist/canvas/components/StageNode/StageTaskDragOverlay.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/StageTaskDragOverlay.js +1 -1
- package/dist/canvas/components/StageNode/TaskContent.cjs +273 -0
- package/dist/canvas/components/StageNode/TaskContent.d.ts +9 -0
- package/dist/canvas/components/StageNode/TaskContent.d.ts.map +1 -0
- package/dist/canvas/components/StageNode/TaskContent.js +229 -0
- package/dist/canvas/icons/TimelinePlayIcon.cjs +1 -1
- package/dist/canvas/icons/TimelinePlayIcon.js +1 -1
- package/dist/canvas/icons/index.cjs +1 -5
- package/dist/canvas/icons/index.d.ts +0 -1
- package/dist/canvas/icons/index.d.ts.map +1 -1
- package/dist/canvas/icons/index.js +1 -2
- package/package.json +4 -4
- package/dist/canvas/icons/PlayIcon.cjs +0 -46
- package/dist/canvas/icons/PlayIcon.d.ts +0 -5
- package/dist/canvas/icons/PlayIcon.d.ts.map +0 -1
- package/dist/canvas/icons/PlayIcon.js +0 -12
|
@@ -2135,15 +2135,75 @@ const AdhocTasks = {
|
|
|
2135
2135
|
[
|
|
2136
2136
|
{
|
|
2137
2137
|
id: '3',
|
|
2138
|
+
label: 'Adhoc - Bkgd Check',
|
|
2139
|
+
icon: /*#__PURE__*/ jsx(VerificationIcon, {}),
|
|
2140
|
+
isAdhoc: true
|
|
2141
|
+
}
|
|
2142
|
+
],
|
|
2143
|
+
[
|
|
2144
|
+
{
|
|
2145
|
+
id: '4',
|
|
2146
|
+
label: 'Adhoc - Review Docs',
|
|
2147
|
+
icon: /*#__PURE__*/ jsx(DocumentIcon, {}),
|
|
2148
|
+
isAdhoc: true
|
|
2149
|
+
}
|
|
2150
|
+
],
|
|
2151
|
+
[
|
|
2152
|
+
{
|
|
2153
|
+
id: '5',
|
|
2138
2154
|
label: 'Regular Processing',
|
|
2139
2155
|
icon: /*#__PURE__*/ jsx(ProcessIcon, {})
|
|
2140
2156
|
}
|
|
2141
2157
|
]
|
|
2142
2158
|
]
|
|
2143
2159
|
},
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2160
|
+
execution: {
|
|
2161
|
+
stageStatus: {
|
|
2162
|
+
status: 'InProgress',
|
|
2163
|
+
label: 'In progress',
|
|
2164
|
+
duration: 'SLA: 3h 45m'
|
|
2165
|
+
},
|
|
2166
|
+
taskStatus: {
|
|
2167
|
+
1: {
|
|
2168
|
+
status: 'Completed',
|
|
2169
|
+
label: 'Verify Address',
|
|
2170
|
+
duration: '1h 20m',
|
|
2171
|
+
retryDuration: '35m',
|
|
2172
|
+
badge: 'Reworked',
|
|
2173
|
+
badgeStatus: 'warning',
|
|
2174
|
+
retryCount: 2
|
|
2175
|
+
},
|
|
2176
|
+
2: {
|
|
2177
|
+
status: 'Failed',
|
|
2178
|
+
label: 'Verify Identity',
|
|
2179
|
+
duration: '45m',
|
|
2180
|
+
message: 'Identity verification failed - document expired',
|
|
2181
|
+
badge: 'Action needed',
|
|
2182
|
+
badgeStatus: 'error'
|
|
2183
|
+
},
|
|
2184
|
+
3: {
|
|
2185
|
+
status: 'InProgress',
|
|
2186
|
+
label: 'Background Check'
|
|
2187
|
+
},
|
|
2188
|
+
4: {
|
|
2189
|
+
status: 'InProgress',
|
|
2190
|
+
label: 'Review Docs',
|
|
2191
|
+
duration: '30m',
|
|
2192
|
+
retryDuration: '10m',
|
|
2193
|
+
badge: 'Reworked',
|
|
2194
|
+
badgeStatus: 'info',
|
|
2195
|
+
retryCount: 1
|
|
2196
|
+
},
|
|
2197
|
+
5: {
|
|
2198
|
+
status: 'InProgress',
|
|
2199
|
+
label: 'Regular Processing'
|
|
2200
|
+
}
|
|
2201
|
+
}
|
|
2202
|
+
},
|
|
2203
|
+
onTaskPlay: (taskId)=>new Promise((resolve)=>setTimeout(()=>{
|
|
2204
|
+
resolve();
|
|
2205
|
+
console.log(`Play task: ${taskId}`);
|
|
2206
|
+
}, 5000))
|
|
2147
2207
|
}
|
|
2148
2208
|
}
|
|
2149
2209
|
]
|
|
@@ -31,8 +31,8 @@ const core_namespaceObject = require("@dnd-kit/core");
|
|
|
31
31
|
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
32
32
|
const external_react_namespaceObject = require("react");
|
|
33
33
|
const external_react_dom_namespaceObject = require("react-dom");
|
|
34
|
-
const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs");
|
|
35
34
|
const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
|
|
35
|
+
const external_TaskContent_cjs_namespaceObject = require("./TaskContent.cjs");
|
|
36
36
|
const StageTaskDragOverlay = ({ activeTask, isActiveTaskParallel, taskWidthStyle })=>{
|
|
37
37
|
const zoom = (0, react_cjs_namespaceObject.useStore)((state)=>state.transform[2]);
|
|
38
38
|
const dragOverlayStyle = (0, external_react_namespaceObject.useMemo)(()=>({
|
|
@@ -52,7 +52,7 @@ const StageTaskDragOverlay = ({ activeTask, isActiveTaskParallel, taskWidthStyle
|
|
|
52
52
|
cursor: 'grabbing',
|
|
53
53
|
...taskWidthStyle
|
|
54
54
|
},
|
|
55
|
-
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
|
|
55
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskContent_cjs_namespaceObject.TaskContent, {
|
|
56
56
|
task: activeTask,
|
|
57
57
|
isDragging: true
|
|
58
58
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StageTaskDragOverlay.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageTaskDragOverlay.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StageTaskDragOverlay.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageTaskDragOverlay.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,eAAO,MAAM,oBAAoB,GAAI,uDAIlC,yBAAyB,uCA4B3B,CAAC"}
|
|
@@ -3,8 +3,8 @@ import { DragOverlay } from "@dnd-kit/core";
|
|
|
3
3
|
import { useStore } from "../../xyflow/react.js";
|
|
4
4
|
import { useMemo } from "react";
|
|
5
5
|
import { createPortal } from "react-dom";
|
|
6
|
-
import { TaskContent } from "./DraggableTask.js";
|
|
7
6
|
import { StageTask } from "./StageNode.styles.js";
|
|
7
|
+
import { TaskContent } from "./TaskContent.js";
|
|
8
8
|
const StageTaskDragOverlay = ({ activeTask, isActiveTaskParallel, taskWidthStyle })=>{
|
|
9
9
|
const zoom = useStore((state)=>state.transform[2]);
|
|
10
10
|
const dragOverlayStyle = useMemo(()=>({
|
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.n = (module)=>{
|
|
5
|
+
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
|
|
6
|
+
__webpack_require__.d(getter, {
|
|
7
|
+
a: getter
|
|
8
|
+
});
|
|
9
|
+
return getter;
|
|
10
|
+
};
|
|
11
|
+
})();
|
|
12
|
+
(()=>{
|
|
13
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
14
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: definition[key]
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
})();
|
|
20
|
+
(()=>{
|
|
21
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
22
|
+
})();
|
|
23
|
+
(()=>{
|
|
24
|
+
__webpack_require__.r = (exports1)=>{
|
|
25
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
26
|
+
value: 'Module'
|
|
27
|
+
});
|
|
28
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
29
|
+
value: true
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
})();
|
|
33
|
+
var __webpack_exports__ = {};
|
|
34
|
+
__webpack_require__.r(__webpack_exports__);
|
|
35
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
36
|
+
TaskContent: ()=>TaskContent
|
|
37
|
+
});
|
|
38
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
39
|
+
const apollo_core_namespaceObject = require("@uipath/apollo-core");
|
|
40
|
+
const index_cjs_namespaceObject = require("../../layouts/index.cjs");
|
|
41
|
+
const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
|
|
42
|
+
const external_debounce_namespaceObject = require("debounce");
|
|
43
|
+
var external_debounce_default = /*#__PURE__*/ __webpack_require__.n(external_debounce_namespaceObject);
|
|
44
|
+
const external_react_namespaceObject = require("react");
|
|
45
|
+
const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
|
|
46
|
+
const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
|
|
47
|
+
const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
|
|
48
|
+
const ProcessNodeIcon = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
|
|
49
|
+
viewBox: "0 0 24 24",
|
|
50
|
+
fill: "none",
|
|
51
|
+
stroke: "currentColor",
|
|
52
|
+
strokeWidth: "1.5",
|
|
53
|
+
children: [
|
|
54
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
|
|
55
|
+
x: "3",
|
|
56
|
+
y: "3",
|
|
57
|
+
width: "7",
|
|
58
|
+
height: "7",
|
|
59
|
+
rx: "1"
|
|
60
|
+
}),
|
|
61
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
|
|
62
|
+
x: "14",
|
|
63
|
+
y: "3",
|
|
64
|
+
width: "7",
|
|
65
|
+
height: "7",
|
|
66
|
+
rx: "1"
|
|
67
|
+
}),
|
|
68
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
|
|
69
|
+
x: "3",
|
|
70
|
+
y: "14",
|
|
71
|
+
width: "7",
|
|
72
|
+
height: "7",
|
|
73
|
+
rx: "1"
|
|
74
|
+
}),
|
|
75
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
|
|
76
|
+
x: "14",
|
|
77
|
+
y: "14",
|
|
78
|
+
width: "7",
|
|
79
|
+
height: "7",
|
|
80
|
+
rx: "1"
|
|
81
|
+
})
|
|
82
|
+
]
|
|
83
|
+
});
|
|
84
|
+
const generateBadgeText = (taskExecution)=>{
|
|
85
|
+
if (!taskExecution.badge) return;
|
|
86
|
+
if (taskExecution.retryCount && taskExecution.retryCount > 1) return `${taskExecution.badge} x${taskExecution.retryCount}`;
|
|
87
|
+
return taskExecution.badge;
|
|
88
|
+
};
|
|
89
|
+
const TaskPlayButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ taskId, onTaskPlay, small })=>{
|
|
90
|
+
const [playLoading, setPlayLoading] = (0, external_react_namespaceObject.useState)(false);
|
|
91
|
+
const debouncedTaskPlay = (0, external_react_namespaceObject.useMemo)(()=>external_debounce_default()(async (id)=>{
|
|
92
|
+
setPlayLoading(true);
|
|
93
|
+
try {
|
|
94
|
+
await onTaskPlay(id);
|
|
95
|
+
} catch {} finally{
|
|
96
|
+
setPlayLoading(false);
|
|
97
|
+
}
|
|
98
|
+
}, 500, {
|
|
99
|
+
immediate: true
|
|
100
|
+
}), [
|
|
101
|
+
onTaskPlay
|
|
102
|
+
]);
|
|
103
|
+
const handlePlayClick = (0, external_react_namespaceObject.useCallback)((e)=>{
|
|
104
|
+
e.stopPropagation();
|
|
105
|
+
e.preventDefault();
|
|
106
|
+
debouncedTaskPlay(taskId);
|
|
107
|
+
}, [
|
|
108
|
+
debouncedTaskPlay,
|
|
109
|
+
taskId
|
|
110
|
+
]);
|
|
111
|
+
const iconSize = small ? 18 : 22;
|
|
112
|
+
const buttonSize = small ? '20px' : apollo_core_namespaceObject.Spacing.SpacingL;
|
|
113
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
|
|
114
|
+
content: "Trigger task",
|
|
115
|
+
placement: "top",
|
|
116
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
|
|
117
|
+
"data-testid": `stage-task-play-${taskId}`,
|
|
118
|
+
onClick: handlePlayClick,
|
|
119
|
+
onMouseDown: (e)=>e.stopPropagation(),
|
|
120
|
+
onKeyDown: (e)=>e.stopPropagation(),
|
|
121
|
+
className: "task-menu-icon-button",
|
|
122
|
+
sx: {
|
|
123
|
+
color: 'var(--uix-canvas-icon-default) !important',
|
|
124
|
+
minWidth: 'unset !important',
|
|
125
|
+
width: `${buttonSize} !important`,
|
|
126
|
+
height: `${buttonSize} !important`,
|
|
127
|
+
padding: '0 !important',
|
|
128
|
+
...small && {
|
|
129
|
+
marginRight: '-2px'
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
children: playLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApCircularProgress, {
|
|
133
|
+
size: iconSize - 2
|
|
134
|
+
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.TimelinePlayIcon, {
|
|
135
|
+
w: iconSize,
|
|
136
|
+
h: iconSize
|
|
137
|
+
})
|
|
138
|
+
})
|
|
139
|
+
});
|
|
140
|
+
});
|
|
141
|
+
const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ task, taskExecution, isDragging, onTaskPlay })=>{
|
|
142
|
+
const hasExecutionStatus = !!taskExecution?.status;
|
|
143
|
+
const hasSecondRowContent = taskExecution && (taskExecution.duration || taskExecution.retryDuration || taskExecution.badge);
|
|
144
|
+
const showPlayButtonSmall = onTaskPlay && hasExecutionStatus;
|
|
145
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
|
|
146
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
|
|
147
|
+
flex: 1,
|
|
148
|
+
style: {
|
|
149
|
+
overflow: 'hidden',
|
|
150
|
+
textOverflow: 'ellipsis',
|
|
151
|
+
whiteSpace: 'nowrap'
|
|
152
|
+
},
|
|
153
|
+
gap: apollo_core_namespaceObject.Padding.PadXs,
|
|
154
|
+
children: [
|
|
155
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
|
|
156
|
+
align: "center",
|
|
157
|
+
justify: "space-between",
|
|
158
|
+
children: [
|
|
159
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
|
|
160
|
+
gap: apollo_core_namespaceObject.Spacing.SpacingXs,
|
|
161
|
+
align: "center",
|
|
162
|
+
style: {
|
|
163
|
+
overflow: 'hidden',
|
|
164
|
+
textOverflow: 'ellipsis',
|
|
165
|
+
whiteSpace: 'nowrap'
|
|
166
|
+
},
|
|
167
|
+
children: [
|
|
168
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskIcon, {
|
|
169
|
+
children: task.icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessNodeIcon, {})
|
|
170
|
+
}),
|
|
171
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
|
|
172
|
+
content: task.label,
|
|
173
|
+
placement: "top",
|
|
174
|
+
smartTooltip: true,
|
|
175
|
+
...isDragging && {
|
|
176
|
+
isOpen: false
|
|
177
|
+
},
|
|
178
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
|
|
179
|
+
variant: apollo_core_namespaceObject.FontVariantToken.fontSizeM,
|
|
180
|
+
color: "var(--uix-canvas-foreground)",
|
|
181
|
+
style: {
|
|
182
|
+
overflow: 'hidden',
|
|
183
|
+
textOverflow: 'ellipsis',
|
|
184
|
+
whiteSpace: 'nowrap'
|
|
185
|
+
},
|
|
186
|
+
children: task.label
|
|
187
|
+
})
|
|
188
|
+
})
|
|
189
|
+
]
|
|
190
|
+
}),
|
|
191
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
|
|
192
|
+
align: "center",
|
|
193
|
+
gap: apollo_core_namespaceObject.Spacing.SpacingXs,
|
|
194
|
+
style: {
|
|
195
|
+
flexShrink: 0
|
|
196
|
+
},
|
|
197
|
+
children: [
|
|
198
|
+
hasExecutionStatus && (taskExecution.message ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
|
|
199
|
+
content: taskExecution.message,
|
|
200
|
+
placement: "top",
|
|
201
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
|
|
202
|
+
size: "small",
|
|
203
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
|
|
204
|
+
status: taskExecution.status
|
|
205
|
+
})
|
|
206
|
+
})
|
|
207
|
+
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
|
|
208
|
+
status: taskExecution.status
|
|
209
|
+
})),
|
|
210
|
+
showPlayButtonSmall && !hasSecondRowContent && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TaskPlayButton, {
|
|
211
|
+
taskId: task.id,
|
|
212
|
+
onTaskPlay: onTaskPlay,
|
|
213
|
+
small: true
|
|
214
|
+
}),
|
|
215
|
+
onTaskPlay && !hasExecutionStatus && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TaskPlayButton, {
|
|
216
|
+
taskId: task.id,
|
|
217
|
+
onTaskPlay: onTaskPlay
|
|
218
|
+
})
|
|
219
|
+
]
|
|
220
|
+
})
|
|
221
|
+
]
|
|
222
|
+
}),
|
|
223
|
+
taskExecution && hasSecondRowContent && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
|
|
224
|
+
align: "center",
|
|
225
|
+
justify: "space-between",
|
|
226
|
+
children: [
|
|
227
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
|
|
228
|
+
gap: '2px',
|
|
229
|
+
children: [
|
|
230
|
+
taskExecution?.duration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
|
|
231
|
+
variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
|
|
232
|
+
color: "var(--uix-canvas-foreground-de-emp)",
|
|
233
|
+
children: taskExecution.duration
|
|
234
|
+
}),
|
|
235
|
+
taskExecution?.retryDuration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskRetryDuration, {
|
|
236
|
+
status: taskExecution.badgeStatus ?? 'warning',
|
|
237
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
|
|
238
|
+
variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
|
|
239
|
+
color: "inherit",
|
|
240
|
+
children: `(+${taskExecution.retryDuration})`
|
|
241
|
+
})
|
|
242
|
+
})
|
|
243
|
+
]
|
|
244
|
+
}),
|
|
245
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
|
|
246
|
+
align: "center",
|
|
247
|
+
gap: apollo_core_namespaceObject.Spacing.SpacingXs,
|
|
248
|
+
children: [
|
|
249
|
+
taskExecution?.badge && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApBadge, {
|
|
250
|
+
size: external_material_index_cjs_namespaceObject.BadgeSize.SMALL,
|
|
251
|
+
status: taskExecution.badgeStatus,
|
|
252
|
+
label: generateBadgeText(taskExecution) ?? ''
|
|
253
|
+
}),
|
|
254
|
+
showPlayButtonSmall && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TaskPlayButton, {
|
|
255
|
+
taskId: task.id,
|
|
256
|
+
onTaskPlay: onTaskPlay,
|
|
257
|
+
small: true
|
|
258
|
+
})
|
|
259
|
+
]
|
|
260
|
+
})
|
|
261
|
+
]
|
|
262
|
+
})
|
|
263
|
+
]
|
|
264
|
+
})
|
|
265
|
+
});
|
|
266
|
+
});
|
|
267
|
+
exports.TaskContent = __webpack_exports__.TaskContent;
|
|
268
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
269
|
+
"TaskContent"
|
|
270
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
271
|
+
Object.defineProperty(exports, '__esModule', {
|
|
272
|
+
value: true
|
|
273
|
+
});
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { StageTaskExecution, StageTaskItem } from './StageNode.types';
|
|
2
|
+
export interface TaskContentProps {
|
|
3
|
+
task: StageTaskItem;
|
|
4
|
+
taskExecution?: StageTaskExecution;
|
|
5
|
+
isDragging?: boolean;
|
|
6
|
+
onTaskPlay?: (taskId: string) => Promise<void>;
|
|
7
|
+
}
|
|
8
|
+
export declare const TaskContent: import("react").MemoExoticComponent<({ task, taskExecution, isDragging, onTaskPlay }: TaskContentProps) => import("react/jsx-runtime").JSX.Element>;
|
|
9
|
+
//# sourceMappingURL=TaskContent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TaskContent.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskContent.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA4F3E,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,6CA6FnE,CAAC"}
|
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
|
|
3
|
+
import { Column, Row } from "../../layouts/index.js";
|
|
4
|
+
import { ApBadge, ApCircularProgress, ApIconButton, ApTooltip, ApTypography, BadgeSize } from "../../../material/index.js";
|
|
5
|
+
import debounce from "debounce";
|
|
6
|
+
import { memo, useCallback, useMemo, useState } from "react";
|
|
7
|
+
import { TimelinePlayIcon } from "../../icons/index.js";
|
|
8
|
+
import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
|
|
9
|
+
import { StageTaskIcon, StageTaskRetryDuration } from "./StageNode.styles.js";
|
|
10
|
+
const ProcessNodeIcon = ()=>/*#__PURE__*/ jsxs("svg", {
|
|
11
|
+
viewBox: "0 0 24 24",
|
|
12
|
+
fill: "none",
|
|
13
|
+
stroke: "currentColor",
|
|
14
|
+
strokeWidth: "1.5",
|
|
15
|
+
children: [
|
|
16
|
+
/*#__PURE__*/ jsx("rect", {
|
|
17
|
+
x: "3",
|
|
18
|
+
y: "3",
|
|
19
|
+
width: "7",
|
|
20
|
+
height: "7",
|
|
21
|
+
rx: "1"
|
|
22
|
+
}),
|
|
23
|
+
/*#__PURE__*/ jsx("rect", {
|
|
24
|
+
x: "14",
|
|
25
|
+
y: "3",
|
|
26
|
+
width: "7",
|
|
27
|
+
height: "7",
|
|
28
|
+
rx: "1"
|
|
29
|
+
}),
|
|
30
|
+
/*#__PURE__*/ jsx("rect", {
|
|
31
|
+
x: "3",
|
|
32
|
+
y: "14",
|
|
33
|
+
width: "7",
|
|
34
|
+
height: "7",
|
|
35
|
+
rx: "1"
|
|
36
|
+
}),
|
|
37
|
+
/*#__PURE__*/ jsx("rect", {
|
|
38
|
+
x: "14",
|
|
39
|
+
y: "14",
|
|
40
|
+
width: "7",
|
|
41
|
+
height: "7",
|
|
42
|
+
rx: "1"
|
|
43
|
+
})
|
|
44
|
+
]
|
|
45
|
+
});
|
|
46
|
+
const generateBadgeText = (taskExecution)=>{
|
|
47
|
+
if (!taskExecution.badge) return;
|
|
48
|
+
if (taskExecution.retryCount && taskExecution.retryCount > 1) return `${taskExecution.badge} x${taskExecution.retryCount}`;
|
|
49
|
+
return taskExecution.badge;
|
|
50
|
+
};
|
|
51
|
+
const TaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay, small })=>{
|
|
52
|
+
const [playLoading, setPlayLoading] = useState(false);
|
|
53
|
+
const debouncedTaskPlay = useMemo(()=>debounce(async (id)=>{
|
|
54
|
+
setPlayLoading(true);
|
|
55
|
+
try {
|
|
56
|
+
await onTaskPlay(id);
|
|
57
|
+
} catch {} finally{
|
|
58
|
+
setPlayLoading(false);
|
|
59
|
+
}
|
|
60
|
+
}, 500, {
|
|
61
|
+
immediate: true
|
|
62
|
+
}), [
|
|
63
|
+
onTaskPlay
|
|
64
|
+
]);
|
|
65
|
+
const handlePlayClick = useCallback((e)=>{
|
|
66
|
+
e.stopPropagation();
|
|
67
|
+
e.preventDefault();
|
|
68
|
+
debouncedTaskPlay(taskId);
|
|
69
|
+
}, [
|
|
70
|
+
debouncedTaskPlay,
|
|
71
|
+
taskId
|
|
72
|
+
]);
|
|
73
|
+
const iconSize = small ? 18 : 22;
|
|
74
|
+
const buttonSize = small ? '20px' : Spacing.SpacingL;
|
|
75
|
+
return /*#__PURE__*/ jsx(ApTooltip, {
|
|
76
|
+
content: "Trigger task",
|
|
77
|
+
placement: "top",
|
|
78
|
+
children: /*#__PURE__*/ jsx(ApIconButton, {
|
|
79
|
+
"data-testid": `stage-task-play-${taskId}`,
|
|
80
|
+
onClick: handlePlayClick,
|
|
81
|
+
onMouseDown: (e)=>e.stopPropagation(),
|
|
82
|
+
onKeyDown: (e)=>e.stopPropagation(),
|
|
83
|
+
className: "task-menu-icon-button",
|
|
84
|
+
sx: {
|
|
85
|
+
color: 'var(--uix-canvas-icon-default) !important',
|
|
86
|
+
minWidth: 'unset !important',
|
|
87
|
+
width: `${buttonSize} !important`,
|
|
88
|
+
height: `${buttonSize} !important`,
|
|
89
|
+
padding: '0 !important',
|
|
90
|
+
...small && {
|
|
91
|
+
marginRight: '-2px'
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
children: playLoading ? /*#__PURE__*/ jsx(ApCircularProgress, {
|
|
95
|
+
size: iconSize - 2
|
|
96
|
+
}) : /*#__PURE__*/ jsx(TimelinePlayIcon, {
|
|
97
|
+
w: iconSize,
|
|
98
|
+
h: iconSize
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
});
|
|
102
|
+
});
|
|
103
|
+
const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTaskPlay })=>{
|
|
104
|
+
const hasExecutionStatus = !!taskExecution?.status;
|
|
105
|
+
const hasSecondRowContent = taskExecution && (taskExecution.duration || taskExecution.retryDuration || taskExecution.badge);
|
|
106
|
+
const showPlayButtonSmall = onTaskPlay && hasExecutionStatus;
|
|
107
|
+
return /*#__PURE__*/ jsx(Fragment, {
|
|
108
|
+
children: /*#__PURE__*/ jsxs(Column, {
|
|
109
|
+
flex: 1,
|
|
110
|
+
style: {
|
|
111
|
+
overflow: 'hidden',
|
|
112
|
+
textOverflow: 'ellipsis',
|
|
113
|
+
whiteSpace: 'nowrap'
|
|
114
|
+
},
|
|
115
|
+
gap: Padding.PadXs,
|
|
116
|
+
children: [
|
|
117
|
+
/*#__PURE__*/ jsxs(Row, {
|
|
118
|
+
align: "center",
|
|
119
|
+
justify: "space-between",
|
|
120
|
+
children: [
|
|
121
|
+
/*#__PURE__*/ jsxs(Row, {
|
|
122
|
+
gap: Spacing.SpacingXs,
|
|
123
|
+
align: "center",
|
|
124
|
+
style: {
|
|
125
|
+
overflow: 'hidden',
|
|
126
|
+
textOverflow: 'ellipsis',
|
|
127
|
+
whiteSpace: 'nowrap'
|
|
128
|
+
},
|
|
129
|
+
children: [
|
|
130
|
+
/*#__PURE__*/ jsx(StageTaskIcon, {
|
|
131
|
+
children: task.icon ?? /*#__PURE__*/ jsx(ProcessNodeIcon, {})
|
|
132
|
+
}),
|
|
133
|
+
/*#__PURE__*/ jsx(ApTooltip, {
|
|
134
|
+
content: task.label,
|
|
135
|
+
placement: "top",
|
|
136
|
+
smartTooltip: true,
|
|
137
|
+
...isDragging && {
|
|
138
|
+
isOpen: false
|
|
139
|
+
},
|
|
140
|
+
children: /*#__PURE__*/ jsx(ApTypography, {
|
|
141
|
+
variant: FontVariantToken.fontSizeM,
|
|
142
|
+
color: "var(--uix-canvas-foreground)",
|
|
143
|
+
style: {
|
|
144
|
+
overflow: 'hidden',
|
|
145
|
+
textOverflow: 'ellipsis',
|
|
146
|
+
whiteSpace: 'nowrap'
|
|
147
|
+
},
|
|
148
|
+
children: task.label
|
|
149
|
+
})
|
|
150
|
+
})
|
|
151
|
+
]
|
|
152
|
+
}),
|
|
153
|
+
/*#__PURE__*/ jsxs(Row, {
|
|
154
|
+
align: "center",
|
|
155
|
+
gap: Spacing.SpacingXs,
|
|
156
|
+
style: {
|
|
157
|
+
flexShrink: 0
|
|
158
|
+
},
|
|
159
|
+
children: [
|
|
160
|
+
hasExecutionStatus && (taskExecution.message ? /*#__PURE__*/ jsx(ApTooltip, {
|
|
161
|
+
content: taskExecution.message,
|
|
162
|
+
placement: "top",
|
|
163
|
+
children: /*#__PURE__*/ jsx(ApIconButton, {
|
|
164
|
+
size: "small",
|
|
165
|
+
children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
|
|
166
|
+
status: taskExecution.status
|
|
167
|
+
})
|
|
168
|
+
})
|
|
169
|
+
}) : /*#__PURE__*/ jsx(ExecutionStatusIcon, {
|
|
170
|
+
status: taskExecution.status
|
|
171
|
+
})),
|
|
172
|
+
showPlayButtonSmall && !hasSecondRowContent && /*#__PURE__*/ jsx(TaskPlayButton, {
|
|
173
|
+
taskId: task.id,
|
|
174
|
+
onTaskPlay: onTaskPlay,
|
|
175
|
+
small: true
|
|
176
|
+
}),
|
|
177
|
+
onTaskPlay && !hasExecutionStatus && /*#__PURE__*/ jsx(TaskPlayButton, {
|
|
178
|
+
taskId: task.id,
|
|
179
|
+
onTaskPlay: onTaskPlay
|
|
180
|
+
})
|
|
181
|
+
]
|
|
182
|
+
})
|
|
183
|
+
]
|
|
184
|
+
}),
|
|
185
|
+
taskExecution && hasSecondRowContent && /*#__PURE__*/ jsxs(Row, {
|
|
186
|
+
align: "center",
|
|
187
|
+
justify: "space-between",
|
|
188
|
+
children: [
|
|
189
|
+
/*#__PURE__*/ jsxs(Row, {
|
|
190
|
+
gap: '2px',
|
|
191
|
+
children: [
|
|
192
|
+
taskExecution?.duration && /*#__PURE__*/ jsx(ApTypography, {
|
|
193
|
+
variant: FontVariantToken.fontSizeS,
|
|
194
|
+
color: "var(--uix-canvas-foreground-de-emp)",
|
|
195
|
+
children: taskExecution.duration
|
|
196
|
+
}),
|
|
197
|
+
taskExecution?.retryDuration && /*#__PURE__*/ jsx(StageTaskRetryDuration, {
|
|
198
|
+
status: taskExecution.badgeStatus ?? 'warning',
|
|
199
|
+
children: /*#__PURE__*/ jsx(ApTypography, {
|
|
200
|
+
variant: FontVariantToken.fontSizeS,
|
|
201
|
+
color: "inherit",
|
|
202
|
+
children: `(+${taskExecution.retryDuration})`
|
|
203
|
+
})
|
|
204
|
+
})
|
|
205
|
+
]
|
|
206
|
+
}),
|
|
207
|
+
/*#__PURE__*/ jsxs(Row, {
|
|
208
|
+
align: "center",
|
|
209
|
+
gap: Spacing.SpacingXs,
|
|
210
|
+
children: [
|
|
211
|
+
taskExecution?.badge && /*#__PURE__*/ jsx(ApBadge, {
|
|
212
|
+
size: BadgeSize.SMALL,
|
|
213
|
+
status: taskExecution.badgeStatus,
|
|
214
|
+
label: generateBadgeText(taskExecution) ?? ''
|
|
215
|
+
}),
|
|
216
|
+
showPlayButtonSmall && /*#__PURE__*/ jsx(TaskPlayButton, {
|
|
217
|
+
taskId: task.id,
|
|
218
|
+
onTaskPlay: onTaskPlay,
|
|
219
|
+
small: true
|
|
220
|
+
})
|
|
221
|
+
]
|
|
222
|
+
})
|
|
223
|
+
]
|
|
224
|
+
})
|
|
225
|
+
]
|
|
226
|
+
})
|
|
227
|
+
});
|
|
228
|
+
});
|
|
229
|
+
export { TaskContent };
|
|
@@ -27,7 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
27
27
|
TimelinePlayIcon: ()=>TimelinePlayIcon
|
|
28
28
|
});
|
|
29
29
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
|
-
const TimelinePlayIcon = ({ w = 24, h = 25, color = '
|
|
30
|
+
const TimelinePlayIcon = ({ w = 24, h = 25, color = 'currentColor' })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
|
|
31
31
|
"data-testid": "timeline-play-icon",
|
|
32
32
|
xmlns: "http://www.w3.org/2000/svg",
|
|
33
33
|
width: w,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
const TimelinePlayIcon = ({ w = 24, h = 25, color = '
|
|
2
|
+
const TimelinePlayIcon = ({ w = 24, h = 25, color = 'currentColor' })=>/*#__PURE__*/ jsx("svg", {
|
|
3
3
|
"data-testid": "timeline-play-icon",
|
|
4
4
|
xmlns: "http://www.w3.org/2000/svg",
|
|
5
5
|
width: w,
|