@uipath/apollo-react 3.44.2 → 3.44.3
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/StageNode.cjs +27 -21
- package/dist/canvas/components/StageNode/StageNode.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/StageNode.js +27 -21
- package/dist/canvas/components/StageNode/StageNode.stories.cjs +35 -14
- package/dist/canvas/components/StageNode/StageNode.stories.d.ts.map +1 -1
- package/dist/canvas/components/StageNode/StageNode.stories.js +35 -14
- package/dist/canvas/components/StageNode/StageNode.types.d.ts +2 -5
- package/dist/canvas/components/StageNode/StageNode.types.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/Toolbox.cjs +43 -32
- package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/Toolbox.js +43 -32
- package/package.json +1 -1
|
@@ -61,7 +61,7 @@ const StageNodeComponent = (props)=>{
|
|
|
61
61
|
const isException = stageDetails?.isException;
|
|
62
62
|
const isReadOnly = !!stageDetails?.isReadOnly;
|
|
63
63
|
const icon = stageDetails?.icon;
|
|
64
|
-
const
|
|
64
|
+
const selectedTaskId = stageDetails?.selectedTaskId;
|
|
65
65
|
const defaultContent = stageDetails?.defaultContent || 'Add first task';
|
|
66
66
|
const status = execution?.stageStatus?.status;
|
|
67
67
|
const statusLabel = execution?.stageStatus?.label;
|
|
@@ -89,17 +89,24 @@ const StageNodeComponent = (props)=>{
|
|
|
89
89
|
const [isAddingTask, setIsAddingTask] = (0, external_react_namespaceObject.useState)(false);
|
|
90
90
|
const [isReplacingTask, setIsReplacingTask] = (0, external_react_namespaceObject.useState)(false);
|
|
91
91
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
92
|
-
if (pendingReplaceTask
|
|
93
|
-
const
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
92
|
+
if (pendingReplaceTask) {
|
|
93
|
+
const match = tasks.flatMap((group, gi)=>group.map((task, ti)=>({
|
|
94
|
+
task,
|
|
95
|
+
groupIndex: gi,
|
|
96
|
+
taskIndex: ti
|
|
97
|
+
}))).find(({ task })=>task.id === selectedTaskId);
|
|
98
|
+
if (match) {
|
|
99
|
+
taskStateReference.current = {
|
|
100
|
+
isParallel: (tasks[match.groupIndex]?.length ?? 0) > 1,
|
|
101
|
+
groupIndex: match.groupIndex,
|
|
102
|
+
taskIndex: match.taskIndex
|
|
103
|
+
};
|
|
104
|
+
setIsReplacingTask(true);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
101
107
|
}, [
|
|
102
108
|
pendingReplaceTask,
|
|
109
|
+
selectedTaskId,
|
|
103
110
|
tasks
|
|
104
111
|
]);
|
|
105
112
|
const [activeDragId, setActiveDragId] = (0, external_react_namespaceObject.useState)(null);
|
|
@@ -202,7 +209,11 @@ const StageNodeComponent = (props)=>{
|
|
|
202
209
|
const contextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
|
|
203
210
|
const items = [];
|
|
204
211
|
if (onReplaceTaskFromToolbox) {
|
|
205
|
-
items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>
|
|
212
|
+
items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
|
|
213
|
+
const taskId = tasks[groupIndex]?.[taskIndex]?.id;
|
|
214
|
+
if (taskId) onTaskClick?.(taskId);
|
|
215
|
+
setIsReplacingTask(true);
|
|
216
|
+
}));
|
|
206
217
|
items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
|
|
207
218
|
}
|
|
208
219
|
if (onTaskGroupModification) {
|
|
@@ -215,8 +226,10 @@ const StageNodeComponent = (props)=>{
|
|
|
215
226
|
return items;
|
|
216
227
|
}, [
|
|
217
228
|
onReplaceTaskFromToolbox,
|
|
229
|
+
onTaskClick,
|
|
218
230
|
onTaskGroupModification,
|
|
219
|
-
reGroupTaskFunction
|
|
231
|
+
reGroupTaskFunction,
|
|
232
|
+
tasks
|
|
220
233
|
]);
|
|
221
234
|
const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
|
|
222
235
|
const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
@@ -254,17 +267,10 @@ const StageNodeComponent = (props)=>{
|
|
|
254
267
|
id
|
|
255
268
|
]);
|
|
256
269
|
const handleReplaceTaskToolboxItemSelected = (0, external_react_namespaceObject.useCallback)((item)=>{
|
|
257
|
-
setIsReplacingTask(true);
|
|
258
|
-
const groupIndex = taskStateReference.current.groupIndex;
|
|
259
|
-
const taskIndex = taskStateReference.current.taskIndex;
|
|
260
|
-
const taskId = tasks[groupIndex]?.[taskIndex]?.id;
|
|
261
|
-
if (taskId) onTaskClick?.(taskId);
|
|
262
270
|
onReplaceTaskFromToolbox?.(item, taskStateReference.current.groupIndex, taskStateReference.current.taskIndex);
|
|
263
271
|
setIsReplacingTask(false);
|
|
264
272
|
}, [
|
|
265
|
-
onReplaceTaskFromToolbox
|
|
266
|
-
onTaskClick,
|
|
267
|
-
tasks
|
|
273
|
+
onReplaceTaskFromToolbox
|
|
268
274
|
]);
|
|
269
275
|
const handleConfigurations = (0, external_react_namespaceObject.useMemo)(()=>isException ? [] : [
|
|
270
276
|
{
|
|
@@ -526,7 +532,7 @@ const StageNodeComponent = (props)=>{
|
|
|
526
532
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.DraggableTask, {
|
|
527
533
|
task: task,
|
|
528
534
|
taskExecution: taskExecution,
|
|
529
|
-
isSelected:
|
|
535
|
+
isSelected: selectedTaskId === task.id,
|
|
530
536
|
isParallel: isParallel,
|
|
531
537
|
contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
|
|
532
538
|
onTaskClick: handleTaskClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAspBxD,eAAO,MAAM,SAAS,8CA5oBa,cAAc,6CA4oBA,CAAC"}
|
|
@@ -33,7 +33,7 @@ const StageNodeComponent = (props)=>{
|
|
|
33
33
|
const isException = stageDetails?.isException;
|
|
34
34
|
const isReadOnly = !!stageDetails?.isReadOnly;
|
|
35
35
|
const icon = stageDetails?.icon;
|
|
36
|
-
const
|
|
36
|
+
const selectedTaskId = stageDetails?.selectedTaskId;
|
|
37
37
|
const defaultContent = stageDetails?.defaultContent || 'Add first task';
|
|
38
38
|
const status = execution?.stageStatus?.status;
|
|
39
39
|
const statusLabel = execution?.stageStatus?.label;
|
|
@@ -61,17 +61,24 @@ const StageNodeComponent = (props)=>{
|
|
|
61
61
|
const [isAddingTask, setIsAddingTask] = useState(false);
|
|
62
62
|
const [isReplacingTask, setIsReplacingTask] = useState(false);
|
|
63
63
|
useEffect(()=>{
|
|
64
|
-
if (pendingReplaceTask
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
64
|
+
if (pendingReplaceTask) {
|
|
65
|
+
const match = tasks.flatMap((group, gi)=>group.map((task, ti)=>({
|
|
66
|
+
task,
|
|
67
|
+
groupIndex: gi,
|
|
68
|
+
taskIndex: ti
|
|
69
|
+
}))).find(({ task })=>task.id === selectedTaskId);
|
|
70
|
+
if (match) {
|
|
71
|
+
taskStateReference.current = {
|
|
72
|
+
isParallel: (tasks[match.groupIndex]?.length ?? 0) > 1,
|
|
73
|
+
groupIndex: match.groupIndex,
|
|
74
|
+
taskIndex: match.taskIndex
|
|
75
|
+
};
|
|
76
|
+
setIsReplacingTask(true);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
73
79
|
}, [
|
|
74
80
|
pendingReplaceTask,
|
|
81
|
+
selectedTaskId,
|
|
75
82
|
tasks
|
|
76
83
|
]);
|
|
77
84
|
const [activeDragId, setActiveDragId] = useState(null);
|
|
@@ -174,7 +181,11 @@ const StageNodeComponent = (props)=>{
|
|
|
174
181
|
const contextMenuItems = useCallback((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
|
|
175
182
|
const items = [];
|
|
176
183
|
if (onReplaceTaskFromToolbox) {
|
|
177
|
-
items.push(getMenuItem('replace-task', 'Replace task', ()=>
|
|
184
|
+
items.push(getMenuItem('replace-task', 'Replace task', ()=>{
|
|
185
|
+
const taskId = tasks[groupIndex]?.[taskIndex]?.id;
|
|
186
|
+
if (taskId) onTaskClick?.(taskId);
|
|
187
|
+
setIsReplacingTask(true);
|
|
188
|
+
}));
|
|
178
189
|
items.push(getDivider());
|
|
179
190
|
}
|
|
180
191
|
if (onTaskGroupModification) {
|
|
@@ -187,8 +198,10 @@ const StageNodeComponent = (props)=>{
|
|
|
187
198
|
return items;
|
|
188
199
|
}, [
|
|
189
200
|
onReplaceTaskFromToolbox,
|
|
201
|
+
onTaskClick,
|
|
190
202
|
onTaskGroupModification,
|
|
191
|
-
reGroupTaskFunction
|
|
203
|
+
reGroupTaskFunction,
|
|
204
|
+
tasks
|
|
192
205
|
]);
|
|
193
206
|
const { setSelectedNodeId } = useNodeSelection();
|
|
194
207
|
const handleStageClick = useCallback(()=>{
|
|
@@ -226,17 +239,10 @@ const StageNodeComponent = (props)=>{
|
|
|
226
239
|
id
|
|
227
240
|
]);
|
|
228
241
|
const handleReplaceTaskToolboxItemSelected = useCallback((item)=>{
|
|
229
|
-
setIsReplacingTask(true);
|
|
230
|
-
const groupIndex = taskStateReference.current.groupIndex;
|
|
231
|
-
const taskIndex = taskStateReference.current.taskIndex;
|
|
232
|
-
const taskId = tasks[groupIndex]?.[taskIndex]?.id;
|
|
233
|
-
if (taskId) onTaskClick?.(taskId);
|
|
234
242
|
onReplaceTaskFromToolbox?.(item, taskStateReference.current.groupIndex, taskStateReference.current.taskIndex);
|
|
235
243
|
setIsReplacingTask(false);
|
|
236
244
|
}, [
|
|
237
|
-
onReplaceTaskFromToolbox
|
|
238
|
-
onTaskClick,
|
|
239
|
-
tasks
|
|
245
|
+
onReplaceTaskFromToolbox
|
|
240
246
|
]);
|
|
241
247
|
const handleConfigurations = useMemo(()=>isException ? [] : [
|
|
242
248
|
{
|
|
@@ -498,7 +504,7 @@ const StageNodeComponent = (props)=>{
|
|
|
498
504
|
return /*#__PURE__*/ jsx(DraggableTask, {
|
|
499
505
|
task: task,
|
|
500
506
|
taskExecution: taskExecution,
|
|
501
|
-
isSelected:
|
|
507
|
+
isSelected: selectedTaskId === task.id,
|
|
502
508
|
isParallel: isParallel,
|
|
503
509
|
contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
|
|
504
510
|
onTaskClick: handleTaskClick,
|
|
@@ -1339,6 +1339,13 @@ const initialTasksForAddReplace = [
|
|
|
1339
1339
|
label: 'Document Review',
|
|
1340
1340
|
icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
|
|
1341
1341
|
}
|
|
1342
|
+
],
|
|
1343
|
+
[
|
|
1344
|
+
{
|
|
1345
|
+
id: 'task-3',
|
|
1346
|
+
label: 'Process Validation',
|
|
1347
|
+
icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
|
|
1348
|
+
}
|
|
1342
1349
|
]
|
|
1343
1350
|
];
|
|
1344
1351
|
const availableTaskOptions = [
|
|
@@ -1408,7 +1415,7 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1408
1415
|
const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
|
|
1409
1416
|
stage: external_StageEdge_cjs_namespaceObject.StageEdge
|
|
1410
1417
|
}), []);
|
|
1411
|
-
const [pendingReplaceTask, setPendingReplaceTask] = (0, external_react_namespaceObject.useState)();
|
|
1418
|
+
const [pendingReplaceTask, setPendingReplaceTask] = (0, external_react_namespaceObject.useState)(false);
|
|
1412
1419
|
const [selectedTaskId, setSelectedTaskId] = (0, external_react_namespaceObject.useState)();
|
|
1413
1420
|
const [menuAnchorEl, setMenuAnchorEl] = (0, external_react_namespaceObject.useState)(null);
|
|
1414
1421
|
const [nodesState, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)([
|
|
@@ -1482,7 +1489,8 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1482
1489
|
}
|
|
1483
1490
|
};
|
|
1484
1491
|
}));
|
|
1485
|
-
setPendingReplaceTask(
|
|
1492
|
+
setPendingReplaceTask(false);
|
|
1493
|
+
setSelectedTaskId(void 0);
|
|
1486
1494
|
}, [
|
|
1487
1495
|
setNodes
|
|
1488
1496
|
]);
|
|
@@ -1511,17 +1519,28 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1511
1519
|
const handleTaskClick = (0, external_react_namespaceObject.useCallback)((taskId)=>{
|
|
1512
1520
|
setSelectedTaskId(taskId);
|
|
1513
1521
|
}, []);
|
|
1522
|
+
const handlePaneClick = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
1523
|
+
setSelectedTaskId(void 0);
|
|
1524
|
+
setPendingReplaceTask(false);
|
|
1525
|
+
}, []);
|
|
1526
|
+
const handleNodesChange = (0, external_react_namespaceObject.useCallback)((...args)=>{
|
|
1527
|
+
onNodesChange(...args);
|
|
1528
|
+
const deselected = args[0].some((c)=>'select' === c.type && 'add-replace-stage' === c.id && !c.selected);
|
|
1529
|
+
if (deselected) {
|
|
1530
|
+
setPendingReplaceTask(false);
|
|
1531
|
+
setSelectedTaskId(void 0);
|
|
1532
|
+
}
|
|
1533
|
+
}, [
|
|
1534
|
+
onNodesChange
|
|
1535
|
+
]);
|
|
1514
1536
|
const currentTasks = nodesState.find((n)=>'add-replace-stage' === n.id)?.data.stageDetails.tasks || [];
|
|
1515
|
-
const taskMenuItems = (0, external_react_namespaceObject.useMemo)(()=>currentTasks.flatMap((group
|
|
1537
|
+
const taskMenuItems = (0, external_react_namespaceObject.useMemo)(()=>currentTasks.flatMap((group)=>group.map((task)=>({
|
|
1516
1538
|
title: task.label,
|
|
1517
1539
|
variant: 'item',
|
|
1518
1540
|
startIcon: task.icon,
|
|
1519
1541
|
onClick: ()=>{
|
|
1520
1542
|
setSelectedTaskId(task.id);
|
|
1521
|
-
setPendingReplaceTask(
|
|
1522
|
-
groupIndex,
|
|
1523
|
-
taskIndex
|
|
1524
|
-
});
|
|
1543
|
+
setPendingReplaceTask(true);
|
|
1525
1544
|
setMenuAnchorEl(null);
|
|
1526
1545
|
}
|
|
1527
1546
|
}))), [
|
|
@@ -1531,12 +1550,12 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1531
1550
|
...node,
|
|
1532
1551
|
data: {
|
|
1533
1552
|
...node.data,
|
|
1534
|
-
|
|
1553
|
+
...selectedTaskId && {
|
|
1554
|
+
pendingReplaceTask
|
|
1555
|
+
},
|
|
1535
1556
|
stageDetails: {
|
|
1536
1557
|
...node.data.stageDetails,
|
|
1537
|
-
|
|
1538
|
-
selectedTaskId
|
|
1539
|
-
] : void 0
|
|
1558
|
+
selectedTaskId
|
|
1540
1559
|
},
|
|
1541
1560
|
onAddTaskFromToolbox: handleAddTask,
|
|
1542
1561
|
onReplaceTaskFromToolbox: handleReplaceTask,
|
|
@@ -1556,13 +1575,14 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1556
1575
|
setEdges
|
|
1557
1576
|
]);
|
|
1558
1577
|
const replaceButtonLabel = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
1559
|
-
if (pendingReplaceTask) {
|
|
1560
|
-
const taskBeingReplaced = currentTasks
|
|
1578
|
+
if (pendingReplaceTask && selectedTaskId) {
|
|
1579
|
+
const taskBeingReplaced = currentTasks.flat().find((t)=>t.id === selectedTaskId);
|
|
1561
1580
|
if (taskBeingReplaced) return `Replacing Task: ${taskBeingReplaced.label}`;
|
|
1562
1581
|
}
|
|
1563
1582
|
return 'Replace Task';
|
|
1564
1583
|
}, [
|
|
1565
1584
|
pendingReplaceTask,
|
|
1585
|
+
selectedTaskId,
|
|
1566
1586
|
currentTasks
|
|
1567
1587
|
]);
|
|
1568
1588
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
@@ -1574,9 +1594,10 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1574
1594
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
|
|
1575
1595
|
nodes: nodesWithMetadata,
|
|
1576
1596
|
edges: edges,
|
|
1577
|
-
onNodesChange:
|
|
1597
|
+
onNodesChange: handleNodesChange,
|
|
1578
1598
|
onEdgesChange: onEdgesChange,
|
|
1579
1599
|
onConnect: onConnect,
|
|
1600
|
+
onPaneClick: handlePaneClick,
|
|
1580
1601
|
nodeTypes: nodeTypes,
|
|
1581
1602
|
edgeTypes: edgeTypes,
|
|
1582
1603
|
mode: "design",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KA2DrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;
|
|
1
|
+
{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KA2DrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AAkVF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAuHF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}
|
|
@@ -1303,6 +1303,13 @@ const initialTasksForAddReplace = [
|
|
|
1303
1303
|
label: 'Document Review',
|
|
1304
1304
|
icon: /*#__PURE__*/ jsx(DocumentIcon, {})
|
|
1305
1305
|
}
|
|
1306
|
+
],
|
|
1307
|
+
[
|
|
1308
|
+
{
|
|
1309
|
+
id: 'task-3',
|
|
1310
|
+
label: 'Process Validation',
|
|
1311
|
+
icon: /*#__PURE__*/ jsx(ProcessIcon, {})
|
|
1312
|
+
}
|
|
1306
1313
|
]
|
|
1307
1314
|
];
|
|
1308
1315
|
const availableTaskOptions = [
|
|
@@ -1372,7 +1379,7 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1372
1379
|
const edgeTypes = useMemo(()=>({
|
|
1373
1380
|
stage: StageEdge
|
|
1374
1381
|
}), []);
|
|
1375
|
-
const [pendingReplaceTask, setPendingReplaceTask] = useState();
|
|
1382
|
+
const [pendingReplaceTask, setPendingReplaceTask] = useState(false);
|
|
1376
1383
|
const [selectedTaskId, setSelectedTaskId] = useState();
|
|
1377
1384
|
const [menuAnchorEl, setMenuAnchorEl] = useState(null);
|
|
1378
1385
|
const [nodesState, setNodes, onNodesChange] = useNodesState([
|
|
@@ -1446,7 +1453,8 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1446
1453
|
}
|
|
1447
1454
|
};
|
|
1448
1455
|
}));
|
|
1449
|
-
setPendingReplaceTask(
|
|
1456
|
+
setPendingReplaceTask(false);
|
|
1457
|
+
setSelectedTaskId(void 0);
|
|
1450
1458
|
}, [
|
|
1451
1459
|
setNodes
|
|
1452
1460
|
]);
|
|
@@ -1475,17 +1483,28 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1475
1483
|
const handleTaskClick = useCallback((taskId)=>{
|
|
1476
1484
|
setSelectedTaskId(taskId);
|
|
1477
1485
|
}, []);
|
|
1486
|
+
const handlePaneClick = useCallback(()=>{
|
|
1487
|
+
setSelectedTaskId(void 0);
|
|
1488
|
+
setPendingReplaceTask(false);
|
|
1489
|
+
}, []);
|
|
1490
|
+
const handleNodesChange = useCallback((...args)=>{
|
|
1491
|
+
onNodesChange(...args);
|
|
1492
|
+
const deselected = args[0].some((c)=>'select' === c.type && 'add-replace-stage' === c.id && !c.selected);
|
|
1493
|
+
if (deselected) {
|
|
1494
|
+
setPendingReplaceTask(false);
|
|
1495
|
+
setSelectedTaskId(void 0);
|
|
1496
|
+
}
|
|
1497
|
+
}, [
|
|
1498
|
+
onNodesChange
|
|
1499
|
+
]);
|
|
1478
1500
|
const currentTasks = nodesState.find((n)=>'add-replace-stage' === n.id)?.data.stageDetails.tasks || [];
|
|
1479
|
-
const taskMenuItems = useMemo(()=>currentTasks.flatMap((group
|
|
1501
|
+
const taskMenuItems = useMemo(()=>currentTasks.flatMap((group)=>group.map((task)=>({
|
|
1480
1502
|
title: task.label,
|
|
1481
1503
|
variant: 'item',
|
|
1482
1504
|
startIcon: task.icon,
|
|
1483
1505
|
onClick: ()=>{
|
|
1484
1506
|
setSelectedTaskId(task.id);
|
|
1485
|
-
setPendingReplaceTask(
|
|
1486
|
-
groupIndex,
|
|
1487
|
-
taskIndex
|
|
1488
|
-
});
|
|
1507
|
+
setPendingReplaceTask(true);
|
|
1489
1508
|
setMenuAnchorEl(null);
|
|
1490
1509
|
}
|
|
1491
1510
|
}))), [
|
|
@@ -1495,12 +1514,12 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1495
1514
|
...node,
|
|
1496
1515
|
data: {
|
|
1497
1516
|
...node.data,
|
|
1498
|
-
|
|
1517
|
+
...selectedTaskId && {
|
|
1518
|
+
pendingReplaceTask
|
|
1519
|
+
},
|
|
1499
1520
|
stageDetails: {
|
|
1500
1521
|
...node.data.stageDetails,
|
|
1501
|
-
|
|
1502
|
-
selectedTaskId
|
|
1503
|
-
] : void 0
|
|
1522
|
+
selectedTaskId
|
|
1504
1523
|
},
|
|
1505
1524
|
onAddTaskFromToolbox: handleAddTask,
|
|
1506
1525
|
onReplaceTaskFromToolbox: handleReplaceTask,
|
|
@@ -1520,13 +1539,14 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1520
1539
|
setEdges
|
|
1521
1540
|
]);
|
|
1522
1541
|
const replaceButtonLabel = useMemo(()=>{
|
|
1523
|
-
if (pendingReplaceTask) {
|
|
1524
|
-
const taskBeingReplaced = currentTasks
|
|
1542
|
+
if (pendingReplaceTask && selectedTaskId) {
|
|
1543
|
+
const taskBeingReplaced = currentTasks.flat().find((t)=>t.id === selectedTaskId);
|
|
1525
1544
|
if (taskBeingReplaced) return `Replacing Task: ${taskBeingReplaced.label}`;
|
|
1526
1545
|
}
|
|
1527
1546
|
return 'Replace Task';
|
|
1528
1547
|
}, [
|
|
1529
1548
|
pendingReplaceTask,
|
|
1549
|
+
selectedTaskId,
|
|
1530
1550
|
currentTasks
|
|
1531
1551
|
]);
|
|
1532
1552
|
return /*#__PURE__*/ jsx("div", {
|
|
@@ -1538,9 +1558,10 @@ const AddAndReplaceTasksStory = ()=>{
|
|
|
1538
1558
|
children: /*#__PURE__*/ jsxs(BaseCanvas, {
|
|
1539
1559
|
nodes: nodesWithMetadata,
|
|
1540
1560
|
edges: edges,
|
|
1541
|
-
onNodesChange:
|
|
1561
|
+
onNodesChange: handleNodesChange,
|
|
1542
1562
|
onEdgesChange: onEdgesChange,
|
|
1543
1563
|
onConnect: onConnect,
|
|
1564
|
+
onPaneClick: handlePaneClick,
|
|
1544
1565
|
nodeTypes: nodeTypes,
|
|
1545
1566
|
edgeTypes: edgeTypes,
|
|
1546
1567
|
mode: "design",
|
|
@@ -23,10 +23,7 @@ export interface StageNodeProps extends NodeProps {
|
|
|
23
23
|
dragging: boolean;
|
|
24
24
|
selected: boolean;
|
|
25
25
|
id: string;
|
|
26
|
-
pendingReplaceTask?:
|
|
27
|
-
groupIndex: number;
|
|
28
|
-
taskIndex: number;
|
|
29
|
-
};
|
|
26
|
+
pendingReplaceTask?: boolean;
|
|
30
27
|
stageDetails: {
|
|
31
28
|
label: string;
|
|
32
29
|
defaultContent?: string;
|
|
@@ -38,7 +35,7 @@ export interface StageNodeProps extends NodeProps {
|
|
|
38
35
|
isException?: boolean;
|
|
39
36
|
isReadOnly?: boolean;
|
|
40
37
|
tasks: StageTaskItem[][];
|
|
41
|
-
|
|
38
|
+
selectedTaskId?: string;
|
|
42
39
|
};
|
|
43
40
|
addTaskLabel?: string;
|
|
44
41
|
addTaskLoading?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StageNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEjE,aAAK,mBAAmB;IACtB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,aAAa,kBAAkB;IAC/B,MAAM,WAAW;IACjB,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,MAAM,WAAW;IACjB,UAAU,eAAe;CAC1B;AAED,MAAM,MAAM,WAAW,GAAG,GAAG,mBAAmB,EAAE,CAAC;AACnD,MAAM,MAAM,eAAe,GAAG,GAAG,mBAAmB,EAAE,CAAC;AAEvD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC3B;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,kBAAkB,CAAC,EAAE
|
|
1
|
+
{"version":3,"file":"StageNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -71,6 +71,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
71
71
|
const [isTransitioning, setIsTransitioning] = (0, external_react_namespaceObject.useState)(false);
|
|
72
72
|
const [animationDirection, setAnimationDirection] = (0, external_react_namespaceObject.useState)('forward');
|
|
73
73
|
const navigationStack = (0, index_cjs_namespaceObject.useNavigationStack)();
|
|
74
|
+
const containerRef = (0, external_react_namespaceObject.useRef)(null);
|
|
74
75
|
const transitionTimeoutRef = (0, external_react_namespaceObject.useRef)(void 0);
|
|
75
76
|
const searchIdRef = (0, external_react_namespaceObject.useRef)(0);
|
|
76
77
|
const initialItemsRef = (0, external_react_namespaceObject.useRef)(initialItems);
|
|
@@ -214,8 +215,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
214
215
|
} else if (navigationStack.canGoBack) handleBackTransition();
|
|
215
216
|
else onClose();
|
|
216
217
|
};
|
|
218
|
+
const handleClickOutside = (e)=>{
|
|
219
|
+
if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
|
|
220
|
+
};
|
|
217
221
|
document.addEventListener('keydown', handleKeyDown);
|
|
218
|
-
|
|
222
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
223
|
+
return ()=>{
|
|
224
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
225
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
226
|
+
};
|
|
219
227
|
}, [
|
|
220
228
|
isSearching,
|
|
221
229
|
navigationStack.canGoBack,
|
|
@@ -224,39 +232,42 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
224
232
|
startTransition,
|
|
225
233
|
handleBackTransition
|
|
226
234
|
]);
|
|
227
|
-
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
235
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
236
|
+
ref: containerRef,
|
|
237
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
|
|
238
|
+
px: 20,
|
|
239
|
+
py: 12,
|
|
240
|
+
gap: 12,
|
|
241
|
+
w: 320,
|
|
242
|
+
h: 440,
|
|
243
|
+
children: [
|
|
244
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Header_cjs_namespaceObject.Header, {
|
|
245
|
+
title: currentParentItem?.name || title,
|
|
246
|
+
onBack: handleBackTransition,
|
|
247
|
+
showBackButton: navigationStack.canGoBack
|
|
248
|
+
}),
|
|
249
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SearchBox_cjs_namespaceObject.SearchBox, {
|
|
250
|
+
value: search,
|
|
251
|
+
onChange: handleSearch,
|
|
252
|
+
clear: clearSearch,
|
|
253
|
+
placeholder: "Search"
|
|
254
|
+
}),
|
|
255
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContainer, {
|
|
256
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_styles_cjs_namespaceObject.AnimatedContent, {
|
|
257
|
+
entering: isTransitioning,
|
|
258
|
+
direction: animationDirection,
|
|
259
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_cjs_namespaceObject.ListView, {
|
|
260
|
+
isLoading: childrenLoading || searchLoading || loading,
|
|
261
|
+
items: isSearching && !isSearchingInitialItems ? searchedItems : items,
|
|
262
|
+
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
263
|
+
enableSections: !isSearching,
|
|
264
|
+
onItemClick: handleItemSelect,
|
|
265
|
+
onItemHover: onItemHover
|
|
266
|
+
})
|
|
256
267
|
})
|
|
257
268
|
})
|
|
258
|
-
|
|
259
|
-
|
|
269
|
+
]
|
|
270
|
+
})
|
|
260
271
|
});
|
|
261
272
|
}
|
|
262
273
|
exports.Toolbox = __webpack_exports__.Toolbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,YAAY,CAAC;AAuCrD,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AAoBD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,YAAY,CAAC;AAuCrD,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AAoBD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,CAAC,CAAC,CAAC,2CAoQjB"}
|
|
@@ -43,6 +43,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
43
43
|
const [isTransitioning, setIsTransitioning] = useState(false);
|
|
44
44
|
const [animationDirection, setAnimationDirection] = useState('forward');
|
|
45
45
|
const navigationStack = useNavigationStack();
|
|
46
|
+
const containerRef = useRef(null);
|
|
46
47
|
const transitionTimeoutRef = useRef(void 0);
|
|
47
48
|
const searchIdRef = useRef(0);
|
|
48
49
|
const initialItemsRef = useRef(initialItems);
|
|
@@ -186,8 +187,15 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
186
187
|
} else if (navigationStack.canGoBack) handleBackTransition();
|
|
187
188
|
else onClose();
|
|
188
189
|
};
|
|
190
|
+
const handleClickOutside = (e)=>{
|
|
191
|
+
if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
|
|
192
|
+
};
|
|
189
193
|
document.addEventListener('keydown', handleKeyDown);
|
|
190
|
-
|
|
194
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
195
|
+
return ()=>{
|
|
196
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
197
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
198
|
+
};
|
|
191
199
|
}, [
|
|
192
200
|
isSearching,
|
|
193
201
|
navigationStack.canGoBack,
|
|
@@ -196,39 +204,42 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
196
204
|
startTransition,
|
|
197
205
|
handleBackTransition
|
|
198
206
|
]);
|
|
199
|
-
return /*#__PURE__*/
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
207
|
+
return /*#__PURE__*/ jsx("div", {
|
|
208
|
+
ref: containerRef,
|
|
209
|
+
children: /*#__PURE__*/ jsxs(Column, {
|
|
210
|
+
px: 20,
|
|
211
|
+
py: 12,
|
|
212
|
+
gap: 12,
|
|
213
|
+
w: 320,
|
|
214
|
+
h: 440,
|
|
215
|
+
children: [
|
|
216
|
+
/*#__PURE__*/ jsx(Header, {
|
|
217
|
+
title: currentParentItem?.name || title,
|
|
218
|
+
onBack: handleBackTransition,
|
|
219
|
+
showBackButton: navigationStack.canGoBack
|
|
220
|
+
}),
|
|
221
|
+
/*#__PURE__*/ jsx(SearchBox, {
|
|
222
|
+
value: search,
|
|
223
|
+
onChange: handleSearch,
|
|
224
|
+
clear: clearSearch,
|
|
225
|
+
placeholder: "Search"
|
|
226
|
+
}),
|
|
227
|
+
/*#__PURE__*/ jsx(AnimatedContainer, {
|
|
228
|
+
children: /*#__PURE__*/ jsx(AnimatedContent, {
|
|
229
|
+
entering: isTransitioning,
|
|
230
|
+
direction: animationDirection,
|
|
231
|
+
children: /*#__PURE__*/ jsx(ListView, {
|
|
232
|
+
isLoading: childrenLoading || searchLoading || loading,
|
|
233
|
+
items: isSearching && !isSearchingInitialItems ? searchedItems : items,
|
|
234
|
+
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
235
|
+
enableSections: !isSearching,
|
|
236
|
+
onItemClick: handleItemSelect,
|
|
237
|
+
onItemHover: onItemHover
|
|
238
|
+
})
|
|
228
239
|
})
|
|
229
240
|
})
|
|
230
|
-
|
|
231
|
-
|
|
241
|
+
]
|
|
242
|
+
})
|
|
232
243
|
});
|
|
233
244
|
}
|
|
234
245
|
export { Toolbox };
|