OCPBUGS-77044: Fix topology node labels disappearing when moving cursor to kebab menu

frontend/packages/helm-plugin/src/topology/components/HelmReleaseGroup.tsx

@@ -9,11 +9,11 @@ import type {
 } from '@patternfly/react-topology';
 import {
   Layer,
-  useHover,
   createSvgIdUrl,
   useDragNode,
   observer,
   useCombineRefs,
+  useHover,
   NodeLabel,
 } from '@patternfly/react-topology';
 import { getImageForIconClass } from '@console/internal/components/catalog/catalog-item-icon';
@@ -55,12 +55,16 @@ const HelmReleaseGroup: FC<HelmReleaseGroupProps> = ({
   dragging,
   dragNodeRef,
 }) => {
-  const [hover, hoverRef] = useHover();
-  const [innerHover, innerHoverRef] = useHover();
+  const [hover, hoverRef] = useHover(0, 200);
+  const [innerHover, innerHoverRef] = useHover(0, 200);
+  const [labelHover, labelHoverRef] = useHover();
+  // Keep label visible when hovering over node, label itself, or when context menu is open
+  const isHovering = hover || innerHover || labelHover || contextMenuOpen;
   const [{ dragging: labelDragging }, dragLabelRef] = useDragNode(noRegroupDragSourceSpec);
+  const dragLabelRefs = useCombineRefs(dragLabelRef, labelHoverRef);
   const nodeRefs = useCombineRefs(innerHoverRef, dragNodeRef);
   const [filtered] = useSearchFilter(element.getLabel(), getResource(element)?.metadata?.labels);
-  const showLabel = useShowLabel(hover);
+  const showLabel = useShowLabel(hover || innerHover);
   const hasChildren = element.getChildren()?.length > 0;
   const { x, y, width, height } = element.getBounds();
   const typeIconClass = element.getData().data.chartIcon || 'icon-helm';
@@ -97,11 +101,7 @@ const HelmReleaseGroup: FC<HelmReleaseGroupProps> = ({
           })}
         >
           <rect
-            key={
-              hover || innerHover || contextMenuOpen || dragging || labelDragging
-                ? 'rect-hover'
-                : 'rect'
-            }
+            key={isHovering || dragging || labelDragging ? 'rect-hover' : 'rect'}
             ref={dndDropRef}
             className="odc-helm-release__bg"
             x={x}
@@ -111,7 +111,7 @@ const HelmReleaseGroup: FC<HelmReleaseGroupProps> = ({
             rx="5"
             ry="5"
             filter={createSvgIdUrl(
-              hover || innerHover || contextMenuOpen || dragging || labelDragging
+              isHovering || dragging || labelDragging
                 ? NODE_SHADOW_FILTER_ID_HOVER
                 : NODE_SHADOW_FILTER_ID,
             )}
@@ -124,7 +124,7 @@ const HelmReleaseGroup: FC<HelmReleaseGroupProps> = ({
         </g>
       </Layer>
       {decorators}
-      {showLabel && element.getLabel() && (
+      {(showLabel || labelHover || contextMenuOpen) && element.getLabel() && (
         <NodeLabel
           className="pf-topology__group__label odc-base-node__label"
           onContextMenu={onContextMenu}
@@ -137,7 +137,7 @@ const HelmReleaseGroup: FC<HelmReleaseGroupProps> = ({
           badge={badge}
           badgeColor={badgeColor}
           badgeClassName={badgeClassName}
-          dragRef={dragLabelRef}
+          dragRef={dragLabelRefs}
         >
           {element.getLabel()}
         </NodeLabel>

frontend/packages/knative-plugin/src/topology/components/groups/KnativeServiceGroup.tsx

@@ -87,12 +87,16 @@ const KnativeServiceGroup: FC<KnativeServiceGroupProps> = ({
   const { t } = useTranslation();
   const [hoverChange, setHoverChange] = useState<boolean>(false);
   const [hover, hoverRef] = useHover(200, 200, [hoverChange]);
-  const [innerHover, innerHoverRef] = useHover();
+  const [innerHover, innerHoverRef] = useHover(0, 200);
+  const [labelHover, labelHoverRef] = useHover();
+  // Keep label visible when hovering over node, label itself, or when context menu is open
+  const isHovering = hover || innerHover || labelHover || contextMenuOpen;
   const dragProps = useMemo(() => ({ element }), [element]);
   const [{ dragging: labelDragging, regrouping: labelRegrouping }, dragLabelRef] = useDragNode(
     dragSpec,
     dragProps,
   );
+  const dragLabelRefs = useCombineRefs(dragLabelRef, labelHoverRef);
   const nodeRefs = useCombineRefs(innerHoverRef, dragNodeRef);
   const hasChildren = element.getChildren()?.length > 0;
   const { data } = element.getData();
@@ -108,7 +112,7 @@ const KnativeServiceGroup: FC<KnativeServiceGroupProps> = ({
   useAnchor(RectAnchor);
 
   const [filtered] = useSearchFilter(element.getLabel(), getResource(element)?.metadata?.labels);
-  const showLabel = useShowLabel(hover);
+  const showLabel = useShowLabel(hover || innerHover);
   const { x, y, width, height } = element.getBounds();
 
   useLayoutEffect(() => {
@@ -179,11 +183,7 @@ const KnativeServiceGroup: FC<KnativeServiceGroupProps> = ({
               })}
             >
               <rect
-                key={
-                  hover || innerHover || dragging || labelDragging || contextMenuOpen || dropTarget
-                    ? 'rect-hover'
-                    : 'rect'
-                }
+                key={isHovering || dragging || labelDragging || dropTarget ? 'rect-hover' : 'rect'}
                 ref={dndDropRef}
                 className="odc-knative-service__bg"
                 x={x}
@@ -193,7 +193,7 @@ const KnativeServiceGroup: FC<KnativeServiceGroupProps> = ({
                 rx="5"
                 ry="5"
                 filter={createSvgIdUrl(
-                  hover || innerHover || dragging || labelDragging || contextMenuOpen || dropTarget
+                  isHovering || dragging || labelDragging || dropTarget
                     ? NODE_SHADOW_FILTER_ID_HOVER
                     : NODE_SHADOW_FILTER_ID,
                 )}
@@ -206,7 +206,7 @@ const KnativeServiceGroup: FC<KnativeServiceGroupProps> = ({
             </g>
           </Layer>
           {decorators}
-          {showLabel && (data.kind || element.getLabel()) && (
+          {(showLabel || labelHover || contextMenuOpen) && (data.kind || element.getLabel()) && (
             <NodeLabel
               className="pf-topology__group__label odc-knative-service__label odc-base-node__label"
               onContextMenu={onContextMenu}
@@ -219,7 +219,7 @@ const KnativeServiceGroup: FC<KnativeServiceGroupProps> = ({
               badge={badge}
               badgeColor={badgeColor}
               badgeClassName={badgeClassName}
-              dragRef={dragLabelRef}
+              dragRef={dragLabelRefs}
             >
               {element.getLabel()}
             </NodeLabel>

frontend/packages/topology/src/components/graph-view/components/groups/Application.tsx

@@ -37,11 +37,13 @@ const Application: FC<ApplicationProps> = ({
   canDrop,
   dropTarget,
   dragRegroupable,
+  contextMenuOpen,
   ...others
 }) => {
   const [hover, hoverRef] = useHover();
   const refs = useCombineRefs(dragNodeRef, hoverRef);
   const [filtered] = useSearchFilter(element.getLabel());
+  const showLabel = useShowLabel(hover);
   const needsHintRef = useRef<boolean>(false);
   useEffect(() => {
     const needsHint = dropTarget && !canDrop && dragRegroupable;
@@ -52,7 +54,6 @@ const Application: FC<ApplicationProps> = ({
         .fireEvent(SHOW_GROUPING_HINT_EVENT, element, needsHint ? <RegroupHint /> : null);
     }
   }, [dropTarget, canDrop, element, dragRegroupable]);
-  const showLabel = useShowLabel(hover);
   const { kindAbbr, kindStr, kindColor } = getKindStringAndAbbreviation(ApplicationModel.kind);
   const badgeClassName = css('odc-resource-icon', {
     [`odc-resource-icon-${kindStr.toLowerCase()}`]: !kindColor,
@@ -73,6 +74,7 @@ const Application: FC<ApplicationProps> = ({
         badgeColor={kindColor}
         badgeClassName={badgeClassName}
         dragNodeRef={refs}
+        contextMenuOpen={contextMenuOpen}
         {...others}
       />
     );
@@ -81,14 +83,16 @@ const Application: FC<ApplicationProps> = ({
   return (
     <DefaultGroup
       className={groupClasses}
-      showLabel={showLabel}
       element={element}
       canDrop={canDrop}
       dropTarget={dropTarget}
       dragNodeRef={refs}
       badge={kindAbbr}
       badgeColor={kindColor}
       badgeClassName={badgeClassName}
+      showLabel={showLabel || contextMenuOpen}
+      showLabelOnHover
+      contextMenuOpen={contextMenuOpen}
       {...others}
     />
   );

frontend/packages/topology/src/components/graph-view/components/groups/GroupNode.tsx

@@ -50,6 +50,7 @@ type GroupNodeProps = {
   dropTarget?: boolean;
   dragging?: boolean;
   dragRegroupable?: boolean;
+  hover?: boolean;
 } & Partial<WithSelectionProps & WithDndDropProps & WithContextMenuProps & WithDragNodeProps>;
 
 const GroupNode: FC<GroupNodeProps> = ({

frontend/packages/topology/src/components/graph-view/components/nodes/BaseNode.tsx

@@ -43,6 +43,8 @@ const BaseNode: FC<BaseNodeProps> = ({
   const [hoverChange, setHoverChange] = useState<boolean>(false);
   const [hover, internalHoverRef] = useHover(200, 200, [hoverChange]);
   const nodeHoverRefs = useCombineRefs(internalHoverRef, hoverRef);
+  // Keep hover active when context menu is open to prevent re-renders
+  const isHovering = hover || contextMenuOpen;
   const { width, height } = element.getDimensions();
   const cx = width / 2;
   const cy = height / 2;
@@ -57,11 +59,11 @@ const BaseNode: FC<BaseNodeProps> = ({
     namespace: resourceObj.metadata.namespace,
   });
   const [filtered] = useSearchFilter(element.getLabel(), resourceObj?.metadata?.labels);
-  const showLabel = useShowLabel(hover || contextMenuOpen);
+  const showLabel = useShowLabel(isHovering);
   const kindData = kind && getKindStringAndAbbreviation(kind);
 
   const detailsLevel = element.getController().getGraph().getDetailsLevel();
-  const showDetails = hover || contextMenuOpen || detailsLevel !== ScaleDetailsLevel.low;
+  const showDetails = isHovering || detailsLevel !== ScaleDetailsLevel.low;
   const badgeClassName = kindData
     ? css('odc-resource-icon', {
         [`odc-resource-icon-${kindData.kindStr.toLowerCase()}`]: !kindData.kindColor,
@@ -73,7 +75,7 @@ const BaseNode: FC<BaseNodeProps> = ({
     }
   }, [createConnectorDrag]);
   return (
-    <Layer id={hover || contextMenuOpen ? TOP_LAYER : DEFAULT_LAYER}>
+    <Layer id={isHovering ? TOP_LAYER : DEFAULT_LAYER}>
       <g ref={nodeHoverRefs} data-test-id={element.getLabel()}>
         <DefaultNode
           className={css('odc-base-node', className, alertVariant && StatusModifier[alertVariant], {
@@ -82,7 +84,8 @@ const BaseNode: FC<BaseNodeProps> = ({
           truncateLength={RESOURCE_NAME_TRUNCATE_LENGTH}
           element={element}
           showLabel={showLabel}
-          scaleNode={(hover || contextMenuOpen) && detailsLevel !== ScaleDetailsLevel.high}
+          hover={contextMenuOpen ? true : undefined}
+          scaleNode={isHovering && detailsLevel !== ScaleDetailsLevel.high}
           onShowCreateConnector={
             editAccess && detailsLevel !== ScaleDetailsLevel.low && onShowCreateConnector
           }
@@ -92,6 +95,7 @@ const BaseNode: FC<BaseNodeProps> = ({
           badgeColor={kindData?.kindColor}
           badgeClassName={badgeClassName}
           showStatusBackground={!showDetails}
+          raiseLabelOnHover={false}
           {...rest}
         >
           <g data-test-id="base-node-handler">

frontend/packages/topology/src/components/graph-view/components/nodes/WorkloadNode.tsx

@@ -155,6 +155,8 @@ const WorkloadPodsNode: FC<WorkloadPodsNodeProps> = observer(function WorkloadPo
   const workloadData = element.getData().data;
   const filters = useDisplayFilters();
   const [hover, hoverRef] = useHover();
+  // Keep hover active when context menu is open to prevent re-renders
+  const isHovering = hover || contextMenuOpen;
   const size = Math.min(width, height);
   const { radius, decoratorRadius } = calculateRadius(size);
   const cx = width / 2;
@@ -166,7 +168,7 @@ const WorkloadPodsNode: FC<WorkloadPodsNodeProps> = observer(function WorkloadPo
   const controller = useVisualizationController();
   const detailsLevel = controller.getGraph().getDetailsLevel();
   const iconImageUrl = getImageForIconClass(workloadData.builderImage) ?? workloadData.builderImage;
-  const showDetails = hover || contextMenuOpen || detailsLevel !== ScaleDetailsLevel.low;
+  const showDetails = isHovering || detailsLevel !== ScaleDetailsLevel.low;
   const nodeDecorators = showDetails
     ? getNodeDecorators(element, decorators, cx, cy, radius, decoratorRadius)
     : null;

frontend/packages/topology/src/components/graph-view/components/withTopologyContextMenu.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps, MouseEvent, ComponentType, FC } from 'react';
-import { useContext, useState, useCallback } from 'react';
+import { useContext, useState, useCallback, useMemo } from 'react';
 import type { GraphElement } from '@patternfly/react-topology';
 import { ElementContext, ContextMenu } from '@patternfly/react-topology';
 import { observer } from 'mobx-react';
@@ -36,15 +36,23 @@ const withContextMenu = <E extends GraphElement>(
       );
     }, []);
 
+    // Memoize the action context to prevent unnecessary re-renders of ActionServiceProvider
+    // Only recompute when the context menu is opened (reference changes from null to a value)
+    const memoizedActionContext = useMemo(
+      () => (reference ? actionContext(element as E) : null),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [!!reference],
+    );
+
     return (
       <>
         <WrappedComponent
           {...(props as any)}
           onContextMenu={onContextMenu}
           contextMenuOpen={!!reference}
         />
-        {reference ? (
-          <ActionServiceProvider context={actionContext(element as E)}>
+        {memoizedActionContext ? (
+          <ActionServiceProvider context={memoizedActionContext}>
             {({ options, loaded }) =>
               loaded ? (
                 <ContextMenu

frontend/packages/topology/src/operators/components/OperatorBackedServiceGroup.tsx

@@ -13,11 +13,11 @@ import {
   observer,
   useDragNode,
   Layer,
-  useHover,
   createSvgIdUrl,
   useCombineRefs,
   useAnchor,
   RectAnchor,
+  useHover,
   NodeLabel,
 } from '@patternfly/react-topology';
 import { useTranslation } from 'react-i18next';
@@ -64,9 +64,13 @@ const OperatorBackedServiceGroup: FC<OperatorBackedServiceGroupProps> = ({
 }) => {
   const ref = useRef();
   const { t } = useTranslation();
-  const [hover, hoverRef] = useHover();
-  const [innerHover, innerHoverRef] = useHover();
+  const [hover, hoverRef] = useHover(0, 200);
+  const [innerHover, innerHoverRef] = useHover(0, 200);
+  const [labelHover, labelHoverRef] = useHover();
+  // Keep label visible when hovering over node, label itself, or when context menu is open
+  const isHovering = hover || innerHover || labelHover || contextMenuOpen;
   const [{ dragging: labelDragging }, dragLabelRef] = useDragNode(noRegroupDragSourceSpec);
+  const dragLabelRefs = useCombineRefs(dragLabelRef, labelHoverRef);
   const nodeRefs = useCombineRefs(innerHoverRef, dragNodeRef);
   const hasChildren = element.getChildren()?.length > 0;
   const { data } = element.getData();
@@ -108,11 +112,7 @@ const OperatorBackedServiceGroup: FC<OperatorBackedServiceGroupProps> = ({
               })}
             >
               <rect
-                key={
-                  hover || innerHover || contextMenuOpen || dragging || labelDragging
-                    ? 'rect-hover'
-                    : 'rect'
-                }
+                key={isHovering || dragging || labelDragging ? 'rect-hover' : 'rect'}
                 ref={dndDropRef}
                 className="odc-operator-backed-service__bg"
                 x={x}
@@ -122,7 +122,7 @@ const OperatorBackedServiceGroup: FC<OperatorBackedServiceGroupProps> = ({
                 rx="5"
                 ry="5"
                 filter={createSvgIdUrl(
-                  hover || innerHover || contextMenuOpen || dragging || labelDragging
+                  isHovering || dragging || labelDragging
                     ? NODE_SHADOW_FILTER_ID_HOVER
                     : NODE_SHADOW_FILTER_ID,
                 )}
@@ -136,7 +136,7 @@ const OperatorBackedServiceGroup: FC<OperatorBackedServiceGroupProps> = ({
           </g>
         </Tooltip>
       </Layer>
-      {showLabel && (data.kind || element.getLabel()) && (
+      {(showLabel || labelHover || contextMenuOpen) && (data.kind || element.getLabel()) && (
         <NodeLabel
           className="pf-topology__group__label odc-knative-service__label odc-base-node__label"
           onContextMenu={onContextMenu}
@@ -149,7 +149,7 @@ const OperatorBackedServiceGroup: FC<OperatorBackedServiceGroupProps> = ({
           badge={badge}
           badgeColor={badgeColor}
           badgeClassName={badgeClassName}
-          dragRef={dragLabelRef}
+          dragRef={dragLabelRefs}
         >
           {element.getLabel()}
         </NodeLabel>