@uipath/apollo-react 3.53.0 → 3.54.0
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/BaseNode/BaseNode.styles.cjs +4 -52
- package/dist/canvas/components/BaseNode/BaseNode.styles.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.styles.js +2 -50
- package/dist/canvas/components/GroupNode/GroupNode.cjs +147 -75
- package/dist/canvas/components/GroupNode/GroupNode.d.ts.map +1 -1
- package/dist/canvas/components/GroupNode/GroupNode.js +147 -75
- package/dist/canvas/components/GroupNode/GroupNode.stories.cjs +610 -13
- package/dist/canvas/components/GroupNode/GroupNode.stories.d.ts +5 -0
- package/dist/canvas/components/GroupNode/GroupNode.stories.d.ts.map +1 -1
- package/dist/canvas/components/GroupNode/GroupNode.stories.js +589 -7
- package/dist/canvas/components/GroupNode/GroupNode.styles.cjs +6 -2
- package/dist/canvas/components/GroupNode/GroupNode.styles.d.ts +1 -0
- package/dist/canvas/components/GroupNode/GroupNode.styles.d.ts.map +1 -1
- package/dist/canvas/components/GroupNode/GroupNode.styles.js +6 -2
- package/dist/canvas/components/GroupNode/GroupNode.types.d.ts +1 -0
- package/dist/canvas/components/GroupNode/GroupNode.types.d.ts.map +1 -1
- package/dist/canvas/components/GroupNode/GroupNodeConfigContext.cjs +45 -0
- package/dist/canvas/components/GroupNode/GroupNodeConfigContext.d.ts +11 -0
- package/dist/canvas/components/GroupNode/GroupNodeConfigContext.d.ts.map +1 -0
- package/dist/canvas/components/GroupNode/GroupNodeConfigContext.js +8 -0
- package/dist/canvas/components/GroupNode/index.cjs +9 -2
- package/dist/canvas/components/GroupNode/index.d.ts +2 -0
- package/dist/canvas/components/GroupNode/index.d.ts.map +1 -1
- package/dist/canvas/components/GroupNode/index.js +2 -1
- package/dist/canvas/styles/execution-status.cjs +88 -0
- package/dist/canvas/styles/execution-status.d.ts +8 -0
- package/dist/canvas/styles/execution-status.d.ts.map +1 -0
- package/dist/canvas/styles/execution-status.js +51 -0
- package/package.json +1 -1
|
@@ -4,4 +4,9 @@ export default meta;
|
|
|
4
4
|
type Story = StoryObj<typeof meta>;
|
|
5
5
|
export declare const Default: Story;
|
|
6
6
|
export declare const EmptyGroup: Story;
|
|
7
|
+
export declare const WithHeaderActions: Story;
|
|
8
|
+
export declare const WithExecutionStatus: Story;
|
|
9
|
+
export declare const WithoutCollapse: Story;
|
|
10
|
+
export declare const MinimalWithExecutionStatus: Story;
|
|
11
|
+
export declare const Minimal: Story;
|
|
7
12
|
//# sourceMappingURL=GroupNode.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/GroupNode/GroupNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"GroupNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/GroupNode/GroupNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAoB5D,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAoHnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAgCF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAiEF,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAyHF,eAAO,MAAM,mBAAmB,EAAE,KAEjC,CAAC;AAyDF,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAkGF,eAAO,MAAM,0BAA0B,EAAE,KAExC,CAAC;AA8DF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Panel } from "../../xyflow/react.js";
|
|
3
|
+
import { ApTooltip } from "../../../material/components/index.js";
|
|
3
4
|
import { useMemo } from "react";
|
|
4
5
|
import { StoryInfoPanel, useCanvasStory, withCanvasProviders } from "../../storybook-utils/index.js";
|
|
5
6
|
import { DefaultCanvasTranslations } from "../../types.js";
|
|
6
7
|
import { BaseCanvas } from "../BaseCanvas/index.js";
|
|
7
8
|
import { BaseNode } from "../BaseNode/index.js";
|
|
8
9
|
import { CanvasPositionControls } from "../CanvasPositionControls.js";
|
|
10
|
+
import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
|
|
9
11
|
import { GroupNode } from "./GroupNode.js";
|
|
12
|
+
import { GroupNodeConfigProvider } from "./GroupNodeConfigContext.js";
|
|
10
13
|
const meta = {
|
|
11
14
|
title: 'Canvas/GroupNode',
|
|
12
15
|
parameters: {
|
|
@@ -17,9 +20,10 @@ const meta = {
|
|
|
17
20
|
]
|
|
18
21
|
};
|
|
19
22
|
const GroupNode_stories = meta;
|
|
23
|
+
const CHILD_NODE_TYPE = 'uipath.timer-activity';
|
|
20
24
|
const nodeTypes = {
|
|
21
25
|
group: GroupNode,
|
|
22
|
-
|
|
26
|
+
[CHILD_NODE_TYPE]: BaseNode
|
|
23
27
|
};
|
|
24
28
|
function createGroupNode(id, title, iconName, position, size, backgroundColor) {
|
|
25
29
|
return {
|
|
@@ -28,7 +32,9 @@ function createGroupNode(id, title, iconName, position, size, backgroundColor) {
|
|
|
28
32
|
position,
|
|
29
33
|
data: {
|
|
30
34
|
title,
|
|
31
|
-
iconName
|
|
35
|
+
...iconName && {
|
|
36
|
+
iconName
|
|
37
|
+
},
|
|
32
38
|
backgroundColor
|
|
33
39
|
},
|
|
34
40
|
style: {
|
|
@@ -43,12 +49,11 @@ function createGroupNode(id, title, iconName, position, size, backgroundColor) {
|
|
|
43
49
|
function createChildNode(id, label, position, parentId) {
|
|
44
50
|
return {
|
|
45
51
|
id,
|
|
46
|
-
type:
|
|
52
|
+
type: CHILD_NODE_TYPE,
|
|
47
53
|
position,
|
|
48
54
|
data: {
|
|
49
55
|
display: {
|
|
50
|
-
label
|
|
51
|
-
shape: 'square'
|
|
56
|
+
label
|
|
52
57
|
}
|
|
53
58
|
},
|
|
54
59
|
parentId,
|
|
@@ -76,7 +81,7 @@ function createDefaultNodes() {
|
|
|
76
81
|
x: 370,
|
|
77
82
|
y: 60
|
|
78
83
|
}, 'group-1'),
|
|
79
|
-
createGroupNode('group-2', 'Classification agent',
|
|
84
|
+
createGroupNode('group-2', 'Classification agent', void 0, {
|
|
80
85
|
x: 750,
|
|
81
86
|
y: 100
|
|
82
87
|
}, {
|
|
@@ -197,4 +202,581 @@ function EmptyGroupStory() {
|
|
|
197
202
|
const EmptyGroup = {
|
|
198
203
|
render: ()=>/*#__PURE__*/ jsx(EmptyGroupStory, {})
|
|
199
204
|
};
|
|
200
|
-
|
|
205
|
+
function GroupNodeWithActions(props) {
|
|
206
|
+
return /*#__PURE__*/ jsx(GroupNodeConfigProvider, {
|
|
207
|
+
value: {
|
|
208
|
+
headerActions: /*#__PURE__*/ jsx("span", {
|
|
209
|
+
style: {
|
|
210
|
+
fontSize: '10px',
|
|
211
|
+
padding: '2px 6px',
|
|
212
|
+
borderRadius: '4px',
|
|
213
|
+
backgroundColor: 'var(--uix-canvas-success-background)',
|
|
214
|
+
color: 'var(--uix-canvas-success-icon)',
|
|
215
|
+
whiteSpace: 'nowrap'
|
|
216
|
+
},
|
|
217
|
+
children: "Active"
|
|
218
|
+
})
|
|
219
|
+
},
|
|
220
|
+
children: /*#__PURE__*/ jsx(GroupNode, {
|
|
221
|
+
...props
|
|
222
|
+
})
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
function WithHeaderActionsStory() {
|
|
226
|
+
const nodeTypesWithActions = useMemo(()=>({
|
|
227
|
+
group: GroupNodeWithActions,
|
|
228
|
+
[CHILD_NODE_TYPE]: BaseNode
|
|
229
|
+
}), []);
|
|
230
|
+
const initialNodes = useMemo(()=>[
|
|
231
|
+
createGroupNode('group-1', 'Agent Workflow', 'smart_toy', {
|
|
232
|
+
x: 50,
|
|
233
|
+
y: 100
|
|
234
|
+
}, {
|
|
235
|
+
width: 600,
|
|
236
|
+
height: 250
|
|
237
|
+
}),
|
|
238
|
+
createChildNode('node-1', 'Classifier', {
|
|
239
|
+
x: 30,
|
|
240
|
+
y: 60
|
|
241
|
+
}, 'group-1'),
|
|
242
|
+
createChildNode('node-2', 'Extractor', {
|
|
243
|
+
x: 200,
|
|
244
|
+
y: 60
|
|
245
|
+
}, 'group-1')
|
|
246
|
+
], []);
|
|
247
|
+
const { canvasProps } = useCanvasStory({
|
|
248
|
+
initialNodes
|
|
249
|
+
});
|
|
250
|
+
return /*#__PURE__*/ jsxs(BaseCanvas, {
|
|
251
|
+
...canvasProps,
|
|
252
|
+
nodeTypes: nodeTypesWithActions,
|
|
253
|
+
mode: "design",
|
|
254
|
+
children: [
|
|
255
|
+
/*#__PURE__*/ jsx(StoryInfoPanel, {
|
|
256
|
+
title: "With Header Actions",
|
|
257
|
+
description: "Group node with custom actions in the header via context"
|
|
258
|
+
}),
|
|
259
|
+
/*#__PURE__*/ jsx(Panel, {
|
|
260
|
+
position: "bottom-right",
|
|
261
|
+
children: /*#__PURE__*/ jsx(CanvasPositionControls, {
|
|
262
|
+
translations: DefaultCanvasTranslations
|
|
263
|
+
})
|
|
264
|
+
})
|
|
265
|
+
]
|
|
266
|
+
});
|
|
267
|
+
}
|
|
268
|
+
const WithHeaderActions = {
|
|
269
|
+
render: ()=>/*#__PURE__*/ jsx(WithHeaderActionsStory, {})
|
|
270
|
+
};
|
|
271
|
+
function GroupNodeWithStatus({ status, message }) {
|
|
272
|
+
return function(props) {
|
|
273
|
+
const tooltipContent = message || status;
|
|
274
|
+
return /*#__PURE__*/ jsx(GroupNodeConfigProvider, {
|
|
275
|
+
value: {
|
|
276
|
+
executionStatus: status,
|
|
277
|
+
executionMessage: message,
|
|
278
|
+
headerActions: /*#__PURE__*/ jsx(ApTooltip, {
|
|
279
|
+
content: tooltipContent,
|
|
280
|
+
placement: "top",
|
|
281
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
282
|
+
style: {
|
|
283
|
+
display: 'inline-flex',
|
|
284
|
+
alignItems: 'center',
|
|
285
|
+
justifyContent: 'center',
|
|
286
|
+
width: 24,
|
|
287
|
+
height: 24
|
|
288
|
+
},
|
|
289
|
+
children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
|
|
290
|
+
status: status,
|
|
291
|
+
size: 16
|
|
292
|
+
})
|
|
293
|
+
})
|
|
294
|
+
})
|
|
295
|
+
},
|
|
296
|
+
children: /*#__PURE__*/ jsx(GroupNode, {
|
|
297
|
+
...props
|
|
298
|
+
})
|
|
299
|
+
});
|
|
300
|
+
};
|
|
301
|
+
}
|
|
302
|
+
function WithExecutionStatusStory() {
|
|
303
|
+
const CompletedGroupNode = useMemo(()=>GroupNodeWithStatus({
|
|
304
|
+
status: 'Completed'
|
|
305
|
+
}), []);
|
|
306
|
+
const InProgressGroupNode = useMemo(()=>GroupNodeWithStatus({
|
|
307
|
+
status: 'InProgress'
|
|
308
|
+
}), []);
|
|
309
|
+
const FailedGroupNode = useMemo(()=>GroupNodeWithStatus({
|
|
310
|
+
status: 'Failed',
|
|
311
|
+
message: 'SMTP connection refused: unable to reach mail server at port 587'
|
|
312
|
+
}), []);
|
|
313
|
+
const PausedGroupNode = useMemo(()=>GroupNodeWithStatus({
|
|
314
|
+
status: 'Paused',
|
|
315
|
+
message: 'Waiting for manual approval from admin'
|
|
316
|
+
}), []);
|
|
317
|
+
const nodeTypesMap = useMemo(()=>({
|
|
318
|
+
'group-completed': CompletedGroupNode,
|
|
319
|
+
'group-in-progress': InProgressGroupNode,
|
|
320
|
+
'group-failed': FailedGroupNode,
|
|
321
|
+
'group-paused': PausedGroupNode,
|
|
322
|
+
[CHILD_NODE_TYPE]: BaseNode
|
|
323
|
+
}), [
|
|
324
|
+
CompletedGroupNode,
|
|
325
|
+
InProgressGroupNode,
|
|
326
|
+
FailedGroupNode,
|
|
327
|
+
PausedGroupNode
|
|
328
|
+
]);
|
|
329
|
+
const initialNodes = useMemo(()=>[
|
|
330
|
+
{
|
|
331
|
+
...createGroupNode('group-completed', 'Data Pipeline', 'account_tree', {
|
|
332
|
+
x: 50,
|
|
333
|
+
y: 50
|
|
334
|
+
}, {
|
|
335
|
+
width: 500,
|
|
336
|
+
height: 220
|
|
337
|
+
}),
|
|
338
|
+
type: 'group-completed'
|
|
339
|
+
},
|
|
340
|
+
createChildNode('n-c-1', 'Validate', {
|
|
341
|
+
x: 30,
|
|
342
|
+
y: 60
|
|
343
|
+
}, 'group-completed'),
|
|
344
|
+
createChildNode('n-c-2', 'Transform', {
|
|
345
|
+
x: 200,
|
|
346
|
+
y: 60
|
|
347
|
+
}, 'group-completed'),
|
|
348
|
+
createChildNode('n-c-3', 'Store', {
|
|
349
|
+
x: 370,
|
|
350
|
+
y: 60
|
|
351
|
+
}, 'group-completed'),
|
|
352
|
+
{
|
|
353
|
+
...createGroupNode('group-in-progress', 'ML Training', 'model_training', {
|
|
354
|
+
x: 620,
|
|
355
|
+
y: 50
|
|
356
|
+
}, {
|
|
357
|
+
width: 400,
|
|
358
|
+
height: 220
|
|
359
|
+
}),
|
|
360
|
+
type: 'group-in-progress'
|
|
361
|
+
},
|
|
362
|
+
createChildNode('n-ip-1', 'Preprocess', {
|
|
363
|
+
x: 30,
|
|
364
|
+
y: 60
|
|
365
|
+
}, 'group-in-progress'),
|
|
366
|
+
createChildNode('n-ip-2', 'Train', {
|
|
367
|
+
x: 200,
|
|
368
|
+
y: 60
|
|
369
|
+
}, 'group-in-progress'),
|
|
370
|
+
{
|
|
371
|
+
...createGroupNode('group-failed', 'Email Sender', 'mail', {
|
|
372
|
+
x: 50,
|
|
373
|
+
y: 340
|
|
374
|
+
}, {
|
|
375
|
+
width: 400,
|
|
376
|
+
height: 220
|
|
377
|
+
}),
|
|
378
|
+
type: 'group-failed'
|
|
379
|
+
},
|
|
380
|
+
createChildNode('n-f-1', 'Template', {
|
|
381
|
+
x: 30,
|
|
382
|
+
y: 60
|
|
383
|
+
}, 'group-failed'),
|
|
384
|
+
createChildNode('n-f-2', 'Send', {
|
|
385
|
+
x: 200,
|
|
386
|
+
y: 60
|
|
387
|
+
}, 'group-failed'),
|
|
388
|
+
{
|
|
389
|
+
...createGroupNode('group-paused', 'Approval Flow', 'approval', {
|
|
390
|
+
x: 520,
|
|
391
|
+
y: 340
|
|
392
|
+
}, {
|
|
393
|
+
width: 500,
|
|
394
|
+
height: 220
|
|
395
|
+
}),
|
|
396
|
+
type: 'group-paused'
|
|
397
|
+
},
|
|
398
|
+
createChildNode('n-p-1', 'Request', {
|
|
399
|
+
x: 30,
|
|
400
|
+
y: 60
|
|
401
|
+
}, 'group-paused'),
|
|
402
|
+
createChildNode('n-p-2', 'Review', {
|
|
403
|
+
x: 200,
|
|
404
|
+
y: 60
|
|
405
|
+
}, 'group-paused'),
|
|
406
|
+
createChildNode('n-p-3', 'Approve', {
|
|
407
|
+
x: 370,
|
|
408
|
+
y: 60
|
|
409
|
+
}, 'group-paused')
|
|
410
|
+
], []);
|
|
411
|
+
const initialEdges = useMemo(()=>[
|
|
412
|
+
{
|
|
413
|
+
id: 'e-c-1-2',
|
|
414
|
+
source: 'n-c-1',
|
|
415
|
+
target: 'n-c-2',
|
|
416
|
+
type: 'smoothstep'
|
|
417
|
+
},
|
|
418
|
+
{
|
|
419
|
+
id: 'e-c-2-3',
|
|
420
|
+
source: 'n-c-2',
|
|
421
|
+
target: 'n-c-3',
|
|
422
|
+
type: 'smoothstep'
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
id: 'e-ip-1-2',
|
|
426
|
+
source: 'n-ip-1',
|
|
427
|
+
target: 'n-ip-2',
|
|
428
|
+
type: 'smoothstep'
|
|
429
|
+
},
|
|
430
|
+
{
|
|
431
|
+
id: 'e-f-1-2',
|
|
432
|
+
source: 'n-f-1',
|
|
433
|
+
target: 'n-f-2',
|
|
434
|
+
type: 'smoothstep'
|
|
435
|
+
},
|
|
436
|
+
{
|
|
437
|
+
id: 'e-p-1-2',
|
|
438
|
+
source: 'n-p-1',
|
|
439
|
+
target: 'n-p-2',
|
|
440
|
+
type: 'smoothstep'
|
|
441
|
+
},
|
|
442
|
+
{
|
|
443
|
+
id: 'e-p-2-3',
|
|
444
|
+
source: 'n-p-2',
|
|
445
|
+
target: 'n-p-3',
|
|
446
|
+
type: 'smoothstep'
|
|
447
|
+
}
|
|
448
|
+
], []);
|
|
449
|
+
const { canvasProps } = useCanvasStory({
|
|
450
|
+
initialNodes,
|
|
451
|
+
initialEdges
|
|
452
|
+
});
|
|
453
|
+
return /*#__PURE__*/ jsxs(BaseCanvas, {
|
|
454
|
+
...canvasProps,
|
|
455
|
+
nodeTypes: nodeTypesMap,
|
|
456
|
+
mode: "design",
|
|
457
|
+
children: [
|
|
458
|
+
/*#__PURE__*/ jsx(StoryInfoPanel, {
|
|
459
|
+
title: "With Execution Status",
|
|
460
|
+
description: "Group nodes showing different execution statuses (Completed, In Progress, Failed, Paused)"
|
|
461
|
+
}),
|
|
462
|
+
/*#__PURE__*/ jsx(Panel, {
|
|
463
|
+
position: "bottom-right",
|
|
464
|
+
children: /*#__PURE__*/ jsx(CanvasPositionControls, {
|
|
465
|
+
translations: DefaultCanvasTranslations
|
|
466
|
+
})
|
|
467
|
+
})
|
|
468
|
+
]
|
|
469
|
+
});
|
|
470
|
+
}
|
|
471
|
+
const WithExecutionStatus = {
|
|
472
|
+
render: ()=>/*#__PURE__*/ jsx(WithExecutionStatusStory, {})
|
|
473
|
+
};
|
|
474
|
+
function GroupNodeNoCollapse(props) {
|
|
475
|
+
return /*#__PURE__*/ jsx(GroupNodeConfigProvider, {
|
|
476
|
+
value: {
|
|
477
|
+
hideCollapseButton: true
|
|
478
|
+
},
|
|
479
|
+
children: /*#__PURE__*/ jsx(GroupNode, {
|
|
480
|
+
...props
|
|
481
|
+
})
|
|
482
|
+
});
|
|
483
|
+
}
|
|
484
|
+
function WithoutCollapseStory() {
|
|
485
|
+
const nodeTypesNoCollapse = useMemo(()=>({
|
|
486
|
+
group: GroupNodeNoCollapse,
|
|
487
|
+
[CHILD_NODE_TYPE]: BaseNode
|
|
488
|
+
}), []);
|
|
489
|
+
const initialNodes = useMemo(()=>[
|
|
490
|
+
createGroupNode('group-1', 'Static Group', 'lock', {
|
|
491
|
+
x: 50,
|
|
492
|
+
y: 100
|
|
493
|
+
}, {
|
|
494
|
+
width: 600,
|
|
495
|
+
height: 250
|
|
496
|
+
}),
|
|
497
|
+
createChildNode('node-1', 'Step A', {
|
|
498
|
+
x: 30,
|
|
499
|
+
y: 60
|
|
500
|
+
}, 'group-1'),
|
|
501
|
+
createChildNode('node-2', 'Step B', {
|
|
502
|
+
x: 200,
|
|
503
|
+
y: 60
|
|
504
|
+
}, 'group-1'),
|
|
505
|
+
createChildNode('node-3', 'Step C', {
|
|
506
|
+
x: 370,
|
|
507
|
+
y: 60
|
|
508
|
+
}, 'group-1')
|
|
509
|
+
], []);
|
|
510
|
+
const initialEdges = useMemo(()=>[
|
|
511
|
+
{
|
|
512
|
+
id: 'e-1-2',
|
|
513
|
+
source: 'node-1',
|
|
514
|
+
target: 'node-2',
|
|
515
|
+
type: 'smoothstep'
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
id: 'e-2-3',
|
|
519
|
+
source: 'node-2',
|
|
520
|
+
target: 'node-3',
|
|
521
|
+
type: 'smoothstep'
|
|
522
|
+
}
|
|
523
|
+
], []);
|
|
524
|
+
const { canvasProps } = useCanvasStory({
|
|
525
|
+
initialNodes,
|
|
526
|
+
initialEdges
|
|
527
|
+
});
|
|
528
|
+
return /*#__PURE__*/ jsxs(BaseCanvas, {
|
|
529
|
+
...canvasProps,
|
|
530
|
+
nodeTypes: nodeTypesNoCollapse,
|
|
531
|
+
mode: "design",
|
|
532
|
+
children: [
|
|
533
|
+
/*#__PURE__*/ jsx(StoryInfoPanel, {
|
|
534
|
+
title: "Without Collapse",
|
|
535
|
+
description: "Group node with the collapse/expand button hidden via hideCollapseButton"
|
|
536
|
+
}),
|
|
537
|
+
/*#__PURE__*/ jsx(Panel, {
|
|
538
|
+
position: "bottom-right",
|
|
539
|
+
children: /*#__PURE__*/ jsx(CanvasPositionControls, {
|
|
540
|
+
translations: DefaultCanvasTranslations
|
|
541
|
+
})
|
|
542
|
+
})
|
|
543
|
+
]
|
|
544
|
+
});
|
|
545
|
+
}
|
|
546
|
+
const WithoutCollapse = {
|
|
547
|
+
render: ()=>/*#__PURE__*/ jsx(WithoutCollapseStory, {})
|
|
548
|
+
};
|
|
549
|
+
function GroupNodeMinimalWithStatus({ status, message }) {
|
|
550
|
+
return function(props) {
|
|
551
|
+
const tooltipContent = message || status;
|
|
552
|
+
return /*#__PURE__*/ jsx(GroupNodeConfigProvider, {
|
|
553
|
+
value: {
|
|
554
|
+
executionStatus: status,
|
|
555
|
+
executionMessage: message,
|
|
556
|
+
hideCollapseButton: true,
|
|
557
|
+
hideMoreOptions: true,
|
|
558
|
+
headerActions: /*#__PURE__*/ jsx(ApTooltip, {
|
|
559
|
+
content: tooltipContent,
|
|
560
|
+
placement: "top",
|
|
561
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
562
|
+
style: {
|
|
563
|
+
display: 'inline-flex',
|
|
564
|
+
alignItems: 'center',
|
|
565
|
+
justifyContent: 'center',
|
|
566
|
+
width: 24,
|
|
567
|
+
height: 24
|
|
568
|
+
},
|
|
569
|
+
children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
|
|
570
|
+
status: status,
|
|
571
|
+
size: 16
|
|
572
|
+
})
|
|
573
|
+
})
|
|
574
|
+
})
|
|
575
|
+
},
|
|
576
|
+
children: /*#__PURE__*/ jsx(GroupNode, {
|
|
577
|
+
...props
|
|
578
|
+
})
|
|
579
|
+
});
|
|
580
|
+
};
|
|
581
|
+
}
|
|
582
|
+
function MinimalWithExecutionStatusStory() {
|
|
583
|
+
const CompletedNode = useMemo(()=>GroupNodeMinimalWithStatus({
|
|
584
|
+
status: 'Completed'
|
|
585
|
+
}), []);
|
|
586
|
+
const FailedNode = useMemo(()=>GroupNodeMinimalWithStatus({
|
|
587
|
+
status: 'Failed',
|
|
588
|
+
message: 'Timeout after 30s'
|
|
589
|
+
}), []);
|
|
590
|
+
const nodeTypesMap = useMemo(()=>({
|
|
591
|
+
'group-completed': CompletedNode,
|
|
592
|
+
'group-failed': FailedNode,
|
|
593
|
+
[CHILD_NODE_TYPE]: BaseNode
|
|
594
|
+
}), [
|
|
595
|
+
CompletedNode,
|
|
596
|
+
FailedNode
|
|
597
|
+
]);
|
|
598
|
+
const initialNodes = useMemo(()=>[
|
|
599
|
+
{
|
|
600
|
+
...createGroupNode('group-completed', 'ETL Pipeline', 'account_tree', {
|
|
601
|
+
x: 50,
|
|
602
|
+
y: 100
|
|
603
|
+
}, {
|
|
604
|
+
width: 500,
|
|
605
|
+
height: 220
|
|
606
|
+
}),
|
|
607
|
+
type: 'group-completed'
|
|
608
|
+
},
|
|
609
|
+
createChildNode('n-c-1', 'Extract', {
|
|
610
|
+
x: 30,
|
|
611
|
+
y: 60
|
|
612
|
+
}, 'group-completed'),
|
|
613
|
+
createChildNode('n-c-2', 'Load', {
|
|
614
|
+
x: 200,
|
|
615
|
+
y: 60
|
|
616
|
+
}, 'group-completed'),
|
|
617
|
+
createChildNode('n-c-3', 'Transform', {
|
|
618
|
+
x: 370,
|
|
619
|
+
y: 60
|
|
620
|
+
}, 'group-completed'),
|
|
621
|
+
{
|
|
622
|
+
...createGroupNode('group-failed', 'Notification Service', 'mail', {
|
|
623
|
+
x: 620,
|
|
624
|
+
y: 100
|
|
625
|
+
}, {
|
|
626
|
+
width: 400,
|
|
627
|
+
height: 220
|
|
628
|
+
}),
|
|
629
|
+
type: 'group-failed'
|
|
630
|
+
},
|
|
631
|
+
createChildNode('n-f-1', 'Template', {
|
|
632
|
+
x: 30,
|
|
633
|
+
y: 60
|
|
634
|
+
}, 'group-failed'),
|
|
635
|
+
createChildNode('n-f-2', 'Send', {
|
|
636
|
+
x: 200,
|
|
637
|
+
y: 60
|
|
638
|
+
}, 'group-failed')
|
|
639
|
+
], []);
|
|
640
|
+
const initialEdges = useMemo(()=>[
|
|
641
|
+
{
|
|
642
|
+
id: 'e-c-1-2',
|
|
643
|
+
source: 'n-c-1',
|
|
644
|
+
target: 'n-c-2',
|
|
645
|
+
type: 'smoothstep'
|
|
646
|
+
},
|
|
647
|
+
{
|
|
648
|
+
id: 'e-c-2-3',
|
|
649
|
+
source: 'n-c-2',
|
|
650
|
+
target: 'n-c-3',
|
|
651
|
+
type: 'smoothstep'
|
|
652
|
+
},
|
|
653
|
+
{
|
|
654
|
+
id: 'e-f-1-2',
|
|
655
|
+
source: 'n-f-1',
|
|
656
|
+
target: 'n-f-2',
|
|
657
|
+
type: 'smoothstep'
|
|
658
|
+
}
|
|
659
|
+
], []);
|
|
660
|
+
const { canvasProps } = useCanvasStory({
|
|
661
|
+
initialNodes,
|
|
662
|
+
initialEdges
|
|
663
|
+
});
|
|
664
|
+
return /*#__PURE__*/ jsxs(BaseCanvas, {
|
|
665
|
+
...canvasProps,
|
|
666
|
+
nodeTypes: nodeTypesMap,
|
|
667
|
+
mode: "design",
|
|
668
|
+
children: [
|
|
669
|
+
/*#__PURE__*/ jsx(StoryInfoPanel, {
|
|
670
|
+
title: "Minimal with Execution Status",
|
|
671
|
+
description: "Execution status borders and icons, no collapse button, no 3-dot menu"
|
|
672
|
+
}),
|
|
673
|
+
/*#__PURE__*/ jsx(Panel, {
|
|
674
|
+
position: "bottom-right",
|
|
675
|
+
children: /*#__PURE__*/ jsx(CanvasPositionControls, {
|
|
676
|
+
translations: DefaultCanvasTranslations
|
|
677
|
+
})
|
|
678
|
+
})
|
|
679
|
+
]
|
|
680
|
+
});
|
|
681
|
+
}
|
|
682
|
+
const MinimalWithExecutionStatus = {
|
|
683
|
+
render: ()=>/*#__PURE__*/ jsx(MinimalWithExecutionStatusStory, {})
|
|
684
|
+
};
|
|
685
|
+
function GroupNodeMinimal(props) {
|
|
686
|
+
return /*#__PURE__*/ jsx(GroupNodeConfigProvider, {
|
|
687
|
+
value: {
|
|
688
|
+
hideCollapseButton: true,
|
|
689
|
+
hideMoreOptions: true
|
|
690
|
+
},
|
|
691
|
+
children: /*#__PURE__*/ jsx(GroupNode, {
|
|
692
|
+
...props
|
|
693
|
+
})
|
|
694
|
+
});
|
|
695
|
+
}
|
|
696
|
+
function MinimalStory() {
|
|
697
|
+
const nodeTypesMinimal = useMemo(()=>({
|
|
698
|
+
group: GroupNodeMinimal,
|
|
699
|
+
[CHILD_NODE_TYPE]: BaseNode
|
|
700
|
+
}), []);
|
|
701
|
+
const initialNodes = useMemo(()=>[
|
|
702
|
+
createGroupNode('group-1', 'Simple Group', 'folder', {
|
|
703
|
+
x: 50,
|
|
704
|
+
y: 100
|
|
705
|
+
}, {
|
|
706
|
+
width: 600,
|
|
707
|
+
height: 250
|
|
708
|
+
}),
|
|
709
|
+
createChildNode('node-1', 'Step A', {
|
|
710
|
+
x: 30,
|
|
711
|
+
y: 60
|
|
712
|
+
}, 'group-1'),
|
|
713
|
+
createChildNode('node-2', 'Step B', {
|
|
714
|
+
x: 200,
|
|
715
|
+
y: 60
|
|
716
|
+
}, 'group-1'),
|
|
717
|
+
createChildNode('node-3', 'Step C', {
|
|
718
|
+
x: 370,
|
|
719
|
+
y: 60
|
|
720
|
+
}, 'group-1'),
|
|
721
|
+
createGroupNode('group-2', 'No Icon Group', void 0, {
|
|
722
|
+
x: 750,
|
|
723
|
+
y: 100
|
|
724
|
+
}, {
|
|
725
|
+
width: 400,
|
|
726
|
+
height: 250
|
|
727
|
+
}),
|
|
728
|
+
createChildNode('node-4', 'Task 1', {
|
|
729
|
+
x: 30,
|
|
730
|
+
y: 60
|
|
731
|
+
}, 'group-2'),
|
|
732
|
+
createChildNode('node-5', 'Task 2', {
|
|
733
|
+
x: 200,
|
|
734
|
+
y: 60
|
|
735
|
+
}, 'group-2')
|
|
736
|
+
], []);
|
|
737
|
+
const initialEdges = useMemo(()=>[
|
|
738
|
+
{
|
|
739
|
+
id: 'e-1-2',
|
|
740
|
+
source: 'node-1',
|
|
741
|
+
target: 'node-2',
|
|
742
|
+
type: 'smoothstep'
|
|
743
|
+
},
|
|
744
|
+
{
|
|
745
|
+
id: 'e-2-3',
|
|
746
|
+
source: 'node-2',
|
|
747
|
+
target: 'node-3',
|
|
748
|
+
type: 'smoothstep'
|
|
749
|
+
},
|
|
750
|
+
{
|
|
751
|
+
id: 'e-4-5',
|
|
752
|
+
source: 'node-4',
|
|
753
|
+
target: 'node-5',
|
|
754
|
+
type: 'smoothstep'
|
|
755
|
+
}
|
|
756
|
+
], []);
|
|
757
|
+
const { canvasProps } = useCanvasStory({
|
|
758
|
+
initialNodes,
|
|
759
|
+
initialEdges
|
|
760
|
+
});
|
|
761
|
+
return /*#__PURE__*/ jsxs(BaseCanvas, {
|
|
762
|
+
...canvasProps,
|
|
763
|
+
nodeTypes: nodeTypesMinimal,
|
|
764
|
+
mode: "design",
|
|
765
|
+
children: [
|
|
766
|
+
/*#__PURE__*/ jsx(StoryInfoPanel, {
|
|
767
|
+
title: "Minimal",
|
|
768
|
+
description: "Group node with no collapse, no 3-dot menu, and no execution status — title only"
|
|
769
|
+
}),
|
|
770
|
+
/*#__PURE__*/ jsx(Panel, {
|
|
771
|
+
position: "bottom-right",
|
|
772
|
+
children: /*#__PURE__*/ jsx(CanvasPositionControls, {
|
|
773
|
+
translations: DefaultCanvasTranslations
|
|
774
|
+
})
|
|
775
|
+
})
|
|
776
|
+
]
|
|
777
|
+
});
|
|
778
|
+
}
|
|
779
|
+
const Minimal = {
|
|
780
|
+
render: ()=>/*#__PURE__*/ jsx(MinimalStory, {})
|
|
781
|
+
};
|
|
782
|
+
export { Default, EmptyGroup, Minimal, MinimalWithExecutionStatus, WithExecutionStatus, WithHeaderActions, WithoutCollapse, GroupNode_stories as default };
|
|
@@ -47,21 +47,24 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
47
47
|
});
|
|
48
48
|
const styled_namespaceObject = require("@emotion/styled");
|
|
49
49
|
var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
|
|
50
|
+
const execution_status_cjs_namespaceObject = require("../../styles/execution-status.cjs");
|
|
50
51
|
const GroupContainer = styled_default().div`
|
|
51
52
|
position: relative;
|
|
52
53
|
width: 100%;
|
|
53
54
|
height: 100%;
|
|
54
55
|
background-color: ${({ backgroundColor })=>backgroundColor || 'var(--uix-canvas-background-raised)'} !important;
|
|
55
56
|
border: 2px solid
|
|
56
|
-
${({ borderColor, selected })=>selected ? 'var(--uix-canvas-primary)' : borderColor || 'var(--uix-canvas-border)'}
|
|
57
|
+
${({ borderColor, selected })=>selected ? 'var(--uix-canvas-primary)' : borderColor || 'var(--uix-canvas-border)'};
|
|
57
58
|
border-radius: 16px !important;
|
|
58
59
|
transition: border-color 0.2s ease;
|
|
59
60
|
overflow: visible;
|
|
60
61
|
box-shadow: ${({ selected })=>selected ? '0 0 0 1px var(--uix-canvas-primary)' : 'none'};
|
|
61
62
|
padding: 0 !important;
|
|
62
63
|
|
|
64
|
+
${({ executionStatus })=>(0, execution_status_cjs_namespaceObject.getExecutionStatusBorder)(executionStatus)}
|
|
65
|
+
|
|
63
66
|
&:hover {
|
|
64
|
-
|
|
67
|
+
${({ selected, executionStatus })=>executionStatus ? '' : `border-color: ${selected ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-border-hover)'};`}
|
|
65
68
|
}
|
|
66
69
|
`;
|
|
67
70
|
const GroupHeader = styled_default().div`
|
|
@@ -143,6 +146,7 @@ const GroupHeaderButton = styled_default().button`
|
|
|
143
146
|
const GroupHeaderSeparator = styled_default().div`
|
|
144
147
|
width: 1px;
|
|
145
148
|
height: 20px;
|
|
149
|
+
margin: 0 4px;
|
|
146
150
|
background: var(--uix-canvas-border-grid);
|
|
147
151
|
align-self: center;
|
|
148
152
|
`;
|
|
@@ -6,6 +6,7 @@ export declare const GroupContainer: import("@emotion/styled").StyledComponent<{
|
|
|
6
6
|
borderColor?: string;
|
|
7
7
|
selected?: boolean;
|
|
8
8
|
collapsed?: boolean;
|
|
9
|
+
executionStatus?: string;
|
|
9
10
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
10
11
|
export declare const GroupHeader: import("@emotion/styled").StyledComponent<{
|
|
11
12
|
theme?: import("@emotion/react").Theme;
|