feat(topology): Allow tooltip usage on pipeline task node badges (#8208)

Author: jeff-phillips-18

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<boolean>(false);
   const [showIcons, setShowIcons] = React.useState<boolean>(false);
   const [selectedIds, setSelectedIds] = React.useState<string[]>();
+  const [badgeTooltips, setBadgeTooltips] = React.useState<boolean>(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<SelectionEventListener>(SELECTION_EVENT, ids => {
     setSelectedIds(ids);
@@ -126,6 +137,14 @@ export const PipelineTasks: React.FC = () => {
               onChange={checked => checked && setShowContext(false)}
             />
           </FlexItem>
+          <FlexItem className="pf-u-ml-2xl">
+            <Checkbox
+              id="badge-tips-checkbox"
+              label="Use tooltips for badges"
+              isChecked={badgeTooltips}
+              onChange={setBadgeTooltips}
+            />
+          </FlexItem>
         </Flex>
       </ToolbarItem>
     </>

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<DemoTaskNodeProps> = ({
   element,
   onContextMenu,
@@ -49,13 +52,14 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
       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: <div>Popover header</div>,
-    bodyContent: (
-      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
-    ),
+    headerContent: 'Popover header',
+    bodyContent: DEMO_TIP_TEXT,
     footerContent: 'Popover footer'
   };
+
   return (
     <Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : DEFAULT_LAYER}>
       <TaskNode
@@ -68,6 +72,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
         {...passedData}
         {...rest}
         badgePopoverParams={badgePopoverParams}
+        badgeTooltip={data.badgeTooltips && DEMO_TIP_TEXT}
       >
         {whenDecorator}
       </TaskNode>

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)
     })
   );

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<TaskNodeProps & { innerRef: React.Ref<SVGGElement> }> =
   badgeTextColor,
   badgeBorderColor,
   badgeClassName = styles.topologyPipelinesPillBadge,
+  badgeTooltip,
+  badgePopoverProps,
   badgePopoverParams,
   taskIconClass,
   taskIcon,
@@ -114,6 +118,11 @@ const TaskNode: React.FC<TaskNodeProps & { innerRef: React.Ref<SVGGElement> }> =
   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<TaskNodeProps & { innerRef: React.Ref<SVGGElement> }> =
     />
   );
 
-  const badgeComponent = badge && (
+  const badgeLabel = badge ? (
     <LabelBadge
       ref={badgeRef}
       x={badgeStartX}
@@ -272,7 +281,20 @@ const TaskNode: React.FC<TaskNodeProps & { innerRef: React.Ref<SVGGElement> }> =
       badgeTextColor={badgeTextColor}
       badgeBorderColor={badgeBorderColor}
     />
-  );
+  ) : null;
+
+  let badgeComponent: React.ReactNode;
+  if (badgeLabel && badgeTooltip) {
+    badgeComponent = <Tooltip content={badgeTooltip}>{badgeLabel}</Tooltip>;
+  } else if (badgeLabel && badgePopoverParams) {
+    badgeComponent = (
+      <g onClick={e => e.stopPropagation()}>
+        <Popover {...badgePopoverParams}>{badgeLabel}</Popover>
+      </g>
+    );
+  } else {
+    badgeComponent = badgeLabel;
+  }
 
   const renderTask = () => {
     if (showStatusState && !scaleNode && hideDetailsAtMedium && detailsLevel !== ScaleDetailsLevel.high) {
@@ -352,14 +374,7 @@ const TaskNode: React.FC<TaskNodeProps & { innerRef: React.Ref<SVGGElement> }> =
         )}
         {taskIconComponent &&
           (taskIconTooltip ? <Tooltip content={taskIconTooltip}>{taskIconComponent}</Tooltip> : taskIconComponent)}
-        {badgeComponent &&
-          (badgePopoverParams ? (
-            <g onClick={e => e.stopPropagation()}>
-              <Popover {...badgePopoverParams}>{badgeComponent}</Popover>
-            </g>
-          ) : (
-            badgeComponent
-          ))}
+        {badgeComponent}
         {actionIcon && (
           <>
             <line