diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PipelineTasks.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PipelineTasks.tsx index 5f9ee7b7c54..751b5d3df2e 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PipelineTasks.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PipelineTasks.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Flex, FlexItem, Radio, ToolbarItem } from '@patternfly/react-core'; +import { Checkbox, Flex, FlexItem, Radio, ToolbarItem } from '@patternfly/react-core'; import { TopologyView, Visualization, @@ -21,11 +21,22 @@ export const PipelineTasks: React.FC = () => { const [showBadges, setShowBadges] = React.useState(false); const [showIcons, setShowIcons] = React.useState(false); const [selectedIds, setSelectedIds] = React.useState(); + const [badgeTooltips, setBadgeTooltips] = React.useState(false); const controller = useVisualizationController(); React.useEffect(() => { - const tasks = createStatusTasks('task', 4, undefined, false, false, showContext, showBadges, showIcons); + const tasks = createStatusTasks( + 'task', + 4, + undefined, + false, + false, + showContext, + showBadges, + showIcons, + badgeTooltips + ); setWhenStatus(tasks); const finallyNodes = createFinallyTasks('finally', 2, tasks); const finallyGroup = { @@ -45,7 +56,7 @@ export const PipelineTasks: React.FC = () => { nodes: [...tasks, ...finallyNodes, finallyGroup] }; controller.fromModel(model, false); - }, [controller, showBadges, showContext, showIcons]); + }, [badgeTooltips, controller, showBadges, showContext, showIcons]); useEventListener(SELECTION_EVENT, ids => { setSelectedIds(ids); @@ -126,6 +137,14 @@ export const PipelineTasks: React.FC = () => { onChange={checked => checked && setShowContext(false)} /> + + + diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoTaskNode.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoTaskNode.tsx index d46e7f6a0c8..dd3e6dd863c 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoTaskNode.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoTaskNode.tsx @@ -21,6 +21,9 @@ type DemoTaskNodeProps = { } & WithContextMenuProps & WithSelectionProps; +const DEMO_TIP_TEXT = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.'; + const DemoTaskNode: React.FunctionComponent = ({ element, onContextMenu, @@ -49,13 +52,14 @@ const DemoTaskNode: React.FunctionComponent = ({ leftOffset={hasTaskIcon ? DEFAULT_WHEN_OFFSET + (element.getBounds().height - 4) * 0.75 : DEFAULT_WHEN_OFFSET} /> ) : null; + + // Set the badgePopoverParams, but if the node has badgeTooltips, this will be ignored const badgePopoverParams: PopoverProps = { - headerContent:
Popover header
, - bodyContent: ( -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
- ), + headerContent: 'Popover header', + bodyContent: DEMO_TIP_TEXT, footerContent: 'Popover footer' }; + return ( = ({ {...passedData} {...rest} badgePopoverParams={badgePopoverParams} + badgeTooltip={data.badgeTooltips && DEMO_TIP_TEXT} > {whenDecorator} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/utils/pipelineUtils.ts b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/utils/pipelineUtils.ts index 3d42dcdc419..646ff79e787 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/utils/pipelineUtils.ts +++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/utils/pipelineUtils.ts @@ -46,6 +46,7 @@ export const createTask = (options: { showContextMenu?: boolean; showBadge?: boolean; showIcon?: boolean; + badgeTooltips?: boolean; }): PipelineNodeModel => { const width = options.width || DEFAULT_TASK_WIDTH; const height = options.height || DEFAULT_TASK_HEIGHT; @@ -86,7 +87,8 @@ export const createStatusTasks = ( noLocation?: boolean, showContextMenu?: boolean, showBadge?: boolean, - showIcon?: boolean + showIcon?: boolean, + badgeTooltips?: boolean ): PipelineNodeModel[] => TASK_STATUSES.map((status, index) => createTask({ @@ -100,6 +102,7 @@ export const createStatusTasks = ( showContextMenu, showBadge, showIcon, + badgeTooltips, width: DEFAULT_TASK_WIDTH + (showContextMenu ? 10 : 0) + (showBadge ? 40 : 0) }) ); diff --git a/packages/react-topology/src/pipelines/components/nodes/TaskNode.tsx b/packages/react-topology/src/pipelines/components/nodes/TaskNode.tsx index b7ede19b29c..e91da3e40ba 100644 --- a/packages/react-topology/src/pipelines/components/nodes/TaskNode.tsx +++ b/packages/react-topology/src/pipelines/components/nodes/TaskNode.tsx @@ -45,8 +45,10 @@ export type TaskNodeProps = { badgeTextColor?: string; badgeBorderColor?: string; badgeClassName?: string; + /** @deprecated Use badgePopoverParams instead */ badgePopoverProps?: string; - badgePopoverParams?: PopoverProps; + badgeTooltip?: React.ReactNode; // Set to use a tooltip on the badge, takes precedence over the badgePopoverParams + badgePopoverParams?: PopoverProps; // Set to use a popover on the badge, ignored if the badgeTooltip parameter is set taskIconClass?: string; // Icon to show for the task taskIcon?: React.ReactNode; taskIconTooltip?: React.ReactNode; @@ -81,6 +83,8 @@ const TaskNode: React.FC }> = badgeTextColor, badgeBorderColor, badgeClassName = styles.topologyPipelinesPillBadge, + badgeTooltip, + badgePopoverProps, badgePopoverParams, taskIconClass, taskIcon, @@ -114,6 +118,11 @@ const TaskNode: React.FC }> = const [contextSize, contextRef] = useSize([onContextMenu, paddingX]); const detailsLevel = useDetailsLevel(); + if (badgePopoverProps) { + // eslint-disable-next-line no-console + console.warn('badgePopoverProps is deprecated. Use badgePopoverParams instead.'); + } + const textWidth = textSize?.width ?? 0; const textHeight = textSize?.height ?? 0; useAnchor( @@ -261,7 +270,7 @@ const TaskNode: React.FC }> = /> ); - const badgeComponent = badge && ( + const badgeLabel = badge ? ( }> = badgeTextColor={badgeTextColor} badgeBorderColor={badgeBorderColor} /> - ); + ) : null; + + let badgeComponent: React.ReactNode; + if (badgeLabel && badgeTooltip) { + badgeComponent = {badgeLabel}; + } else if (badgeLabel && badgePopoverParams) { + badgeComponent = ( + e.stopPropagation()}> + {badgeLabel} + + ); + } else { + badgeComponent = badgeLabel; + } const renderTask = () => { if (showStatusState && !scaleNode && hideDetailsAtMedium && detailsLevel !== ScaleDetailsLevel.high) { @@ -352,14 +374,7 @@ const TaskNode: React.FC }> = )} {taskIconComponent && (taskIconTooltip ? {taskIconComponent} : taskIconComponent)} - {badgeComponent && - (badgePopoverParams ? ( - e.stopPropagation()}> - {badgeComponent} - - ) : ( - badgeComponent - ))} + {badgeComponent} {actionIcon && ( <>