Merge pull request opendatahub-io#2938 from jenny-s51/RHOAIENG-8124

[RHOAIENG-8124] Show Pipeline Group Label on Hover at Low Scale
jenny-s51 · Jun 21, 2024 · 15db599 · 15db599
2 parents 3bd704d + b94f94b
commit 15db599
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 50 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -66,7 +66,7 @@
     "@patternfly/react-styles": "^5.2.1",
     "@patternfly/react-table": "^5.2.1",
     "@patternfly/react-tokens": "^5.2.1",
-    "@patternfly/react-topology": "^5.4.0-prerelease.6",
+    "@patternfly/react-topology": "^5.4.0-prerelease.9",
     "@patternfly/react-virtualized-extension": "^5.0.0",
     "@types/classnames": "^2.3.1",
     "axios": "^1.6.4",

diff --git a/frontend/src/concepts/topology/PipelineDefaultTaskGroup.tsx b/frontend/src/concepts/topology/PipelineDefaultTaskGroup.tsx
@@ -8,10 +8,7 @@ import {
   Node,
   GraphElement,
   RunStatus,
-  DEFAULT_LAYER,
-  Layer,
   ScaleDetailsLevel,
-  TOP_LAYER,
   NodeModel,
   useHover,
   PipelineNodeModel,
@@ -65,7 +62,7 @@ const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerP
         hideDetailsAtMedium
         showStatusState
         scaleNode={hover && detailsLevel !== ScaleDetailsLevel.high}
-        showLabel={detailsLevel === ScaleDetailsLevel.high}
+        showLabelOnHover
         status={element.getData()?.runStatus}
         hiddenDetailsShownStatuses={[
           RunStatus.Succeeded,
@@ -79,23 +76,21 @@ const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerP
     );
 
     return (
-      <Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : DEFAULT_LAYER}>
-        <g ref={hoverRef}>
-          {element.isCollapsed() ? (
-            <Popover
-              triggerRef={popoverRef}
-              triggerAction="hover"
-              aria-label="Hoverable popover"
-              headerContent={element.getLabel()}
-              bodyContent={getPopoverTasksList(element.getAllNodeChildren())}
-            >
-              <g ref={popoverRef}>{groupNode}</g>
-            </Popover>
-          ) : (
-            groupNode
-          )}
-        </g>
-      </Layer>
+      <g ref={hoverRef}>
+        {element.isCollapsed() ? (
+          <Popover
+            triggerRef={popoverRef}
+            triggerAction="hover"
+            aria-label="Hoverable popover"
+            headerContent={element.getLabel()}
+            bodyContent={getPopoverTasksList(element.getAllNodeChildren())}
+          >
+            <g ref={popoverRef}>{groupNode}</g>
+          </Popover>
+        ) : (
+          groupNode
+        )}
+      </g>
     );
   },
 );