Skip to content

Commit d60db7e

Browse files
jeff-phillips-18jeff-phillips-18
committed
Update pipeline styles towards spec
1 parent d800f78 commit d60db7e

File tree

11 files changed

+387
-265
lines changed

11 files changed

+387
-265
lines changed

‎packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PipelineTasks.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import {
3-
Model,
43
ModelKind,
54
withPanZoom,
65
GraphComponent,

‎packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoTaskNode.tsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import * as React from 'react';
22
import { observer } from 'mobx-react';
3-
import { Node, TaskNode, WhenDecorator } from '@patternfly/react-topology';
3+
import { Node, TaskNode, WhenDecorator, WithContextMenuProps, WithSelectionProps } from '@patternfly/react-topology';
44

5-
interface DemoTaskNodeProps {
5+
type DemoTaskNodeProps = {
66
element: Node;
7-
}
7+
} & WithContextMenuProps &
8+
WithSelectionProps;
89

9-
const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({ element }) => {
10+
const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
11+
element,
12+
onContextMenu,
13+
contextMenuOpen,
14+
...rest
15+
}) => {
1016
const data = element.getData();
1117

1218
const passedData = React.useMemo(() => {
@@ -22,7 +28,13 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({ element }) =
2228
const whenDecorator = data.whenStatus ? <WhenDecorator element={element} status={data.whenStatus} /> : null;
2329

2430
return (
25-
<TaskNode element={element} {...passedData}>
31+
<TaskNode
32+
element={element}
33+
onContextMenu={data.showContextMenu ? onContextMenu : undefined}
34+
contextMenuOpen={contextMenuOpen}
35+
{...passedData}
36+
{...rest}
37+
>
2638
{whenDecorator}
2739
</TaskNode>
2840
);

‎packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/pipelineComponentFactory.ts‎ renamed to ‎packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/pipelineComponentFactory.tsx‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,40 @@ import {
1010
DEFAULT_SPACER_NODE_TYPE,
1111
DEFAULT_EDGE_TYPE,
1212
DEFAULT_FINALLY_NODE_TYPE,
13-
FinallyNode
13+
FinallyNode,
14+
ContextMenuSeparator,
15+
ContextMenuItem,
16+
withContextMenu,
17+
withSelection
1418
} from '@patternfly/react-topology';
1519
import DemoTaskNode from './DemoTaskNode';
20+
import * as React from 'react';
21+
22+
const contextMenuItem = (label: string, i: number): React.ReactElement => {
23+
if (label === '-') {
24+
return <ContextMenuSeparator key={`separator:${i.toString()}`} />;
25+
}
26+
return (
27+
// eslint-disable-next-line no-alert
28+
<ContextMenuItem key={label} onClick={() => alert(`Selected: ${label}`)}>
29+
{label}
30+
</ContextMenuItem>
31+
);
32+
};
33+
34+
const createContextMenuItems = (...labels: string[]): React.ReactElement[] => labels.map(contextMenuItem);
35+
36+
const defaultMenu = createContextMenuItems('First', 'Second', 'Third', '-', 'Fourth');
1637

1738
const shapesComponentFactory: ComponentFactory = (
1839
kind: ModelKind,
1940
type: string
2041
): ComponentType<{ element: GraphElement }> | undefined => {
2142
switch (type) {
2243
case DEFAULT_TASK_NODE_TYPE:
23-
return DemoTaskNode;
44+
return withContextMenu(() => defaultMenu)(withSelection()(DemoTaskNode));
2445
case DEFAULT_FINALLY_NODE_TYPE:
25-
return FinallyNode;
46+
return withContextMenu(() => defaultMenu)(withSelection()(FinallyNode));
2647
case 'finally-group':
2748
return DefaultTaskGroup;
2849
case DEFAULT_SPACER_NODE_TYPE:

‎packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/utils/pipelineUtils.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ import {
1111
export const ROW_HEIGHT = 80;
1212
export const COLUMN_WIDTH = 250;
1313

14-
export const DEFAULT_TASK_WIDTH = 200;
14+
export const DEFAULT_TASK_WIDTH = 180;
1515
export const FINALLY_TASK_WIDTH = DEFAULT_TASK_WIDTH - DEFAULT_WHEN_OFFSET - DEFAULT_WHEN_SIZE;
16-
export const DEFAULT_TASK_HEIGHT = 40;
16+
export const DEFAULT_TASK_HEIGHT = 32;
1717

1818
export const TASK_STATUSES = [
1919
undefined,
2020
RunStatus.Succeeded,
2121
RunStatus.Failed,
2222
RunStatus.Running,
23-
RunStatus['In Progress'],
23+
RunStatus.InProgress,
2424
RunStatus.FailedToStart,
2525
RunStatus.Skipped,
2626
RunStatus.Cancelled,
@@ -42,6 +42,7 @@ export const createTask = (options: {
4242
marginX?: number;
4343
marginY?: number;
4444
noLocation?: boolean;
45+
showContextMenu?: boolean;
4546
}): PipelineNodeModel => {
4647
const width = options.width || DEFAULT_TASK_WIDTH;
4748
const height = options.height || DEFAULT_TASK_HEIGHT;
@@ -79,7 +80,8 @@ export const createStatusTasks = (
7980
row: Math.ceil((index + 1) / statusPerRow) - 1,
8081
column: index % statusPerRow,
8182
selected,
82-
noLocation
83+
noLocation,
84+
showContextMenu: true
8385
})
8486
);
8587

‎packages/react-styles/src/css/components/Topology/topology-pipelines.css‎

Lines changed: 146 additions & 109 deletions
Large diffs are not rendered by default.

‎packages/react-topology/src/pipelines/components/nodes/FinallyNode.tsx‎

Lines changed: 5 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,8 @@
11
import * as React from 'react';
2-
import { css } from '@patternfly/react-styles';
3-
import styles from '@patternfly/react-styles/css/components/Topology/topology-pipelines';
4-
import { Tooltip } from '@patternfly/react-core';
5-
import { observer } from '../../../mobx-exports';
6-
import { Node } from '../../../types';
7-
import { RunStatus } from '../../types';
8-
import { useAnchor, WithSelectionProps } from '../../../behavior';
9-
import { truncateMiddle } from '../../../utils/truncate-middle';
10-
import { useSize } from '../../../utils';
11-
import { getRunStatusModifier } from '../../utils';
12-
import StatusIcon from '../../utils/StatusIcon';
13-
import { RectAnchor } from '../../../anchors';
2+
import TaskNode, { TaskNodeProps } from './TaskNode';
143

15-
type FinallyNodeProps = {
16-
element: Node;
17-
className?: string;
18-
paddingX?: number;
19-
nameLabelClass?: string;
20-
status?: RunStatus;
21-
statusWidth?: number;
22-
showStatusState?: boolean;
23-
truncateLength?: number;
24-
disableTooltip?: boolean;
25-
toolTip?: React.ReactNode;
26-
} & Partial<WithSelectionProps>;
4+
const FinallyNode: React.FC<TaskNodeProps> = props => (
5+
<TaskNode whenOffset={0} whenSize={0} truncateLength={22} {...props} />
6+
);
277

28-
const FinallyNode: React.FC<FinallyNodeProps> = ({
29-
element,
30-
className,
31-
paddingX = 8,
32-
status,
33-
statusWidth = 16,
34-
showStatusState = true,
35-
truncateLength = 14,
36-
toolTip,
37-
disableTooltip = false,
38-
selected,
39-
children
40-
}) => {
41-
const { height, width } = element.getBounds();
42-
const [textSize, textRef] = useSize([element.getLabel()]);
43-
const textHeight = textSize?.height ?? 0;
44-
useAnchor(RectAnchor);
45-
46-
const truncatedName = React.useMemo(() => truncateMiddle(element.getLabel(), { length: truncateLength }), [
47-
element,
48-
truncateLength
49-
]);
50-
const nameLabel = (
51-
<text ref={textRef} className={css('topology-pipelines--pill__text')}>
52-
{truncatedName}
53-
</text>
54-
);
55-
56-
const taskPill = (
57-
<g className={css(styles.topologyPipelinesPill, className)}>
58-
<rect
59-
width={width}
60-
height={height}
61-
rx={height / 2}
62-
className={css(styles.topologyPipelinesPillBackground, selected && styles.modifiers.selected)}
63-
/>
64-
<g
65-
transform={`translate(${(status && showStatusState ? statusWidth : 0) + 2 * paddingX}, ${(height +
66-
textHeight / 2) /
67-
2})`}
68-
>
69-
{element.getLabel() !== truncatedName && !disableTooltip ? (
70-
<Tooltip content={element.getLabel()}>{nameLabel}</Tooltip>
71-
) : (
72-
nameLabel
73-
)}
74-
</g>
75-
{status && showStatusState && (
76-
<g
77-
transform={`translate(${paddingX}, ${(height - statusWidth) / 2 - 1})`}
78-
width={statusWidth}
79-
height={statusWidth}
80-
>
81-
<g
82-
className={css(
83-
styles.topologyPipelinesPillStatus,
84-
getRunStatusModifier(status),
85-
(status === RunStatus.Running || status === RunStatus['In Progress']) && styles.modifiers.spin
86-
)}
87-
>
88-
<StatusIcon status={status} />
89-
</g>
90-
</g>
91-
)}
92-
{children}
93-
</g>
94-
);
95-
96-
return (
97-
<g className={css('pf-topology__pipelines__task-node', className)}>
98-
{!toolTip || disableTooltip ? (
99-
taskPill
100-
) : (
101-
<Tooltip position="bottom" enableFlip={false} content={toolTip}>
102-
{taskPill}
103-
</Tooltip>
104-
)}
105-
</g>
106-
);
107-
};
108-
109-
export default observer(FinallyNode);
8+
export default FinallyNode;

0 commit comments

Comments
 (0)