[8.14] [APM] Disable popover for grouped edges in Service Map (#186597)…

… (#186813)

# Backport

This will backport the following commits from `main` to `8.14`:
- [[APM] Disable popover for grouped edges in Service Map
(#186597)](#186597)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Mykola
Harmash","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-06-24T12:20:58Z","message":"[APM]
Disable popover for grouped edges in Service Map (#186597)\n\nCloses
https://github.com/elastic/sdh-apm/issues/1378\r\nCloses
https://github.com/elastic/kibana/issues/186101\r\n\r\n##
Summary\r\n\r\nLooking at the code, it seems like use-case for showing
popover on an\r\nedge that leads into a grouped resources node was never
supported, and\r\nit's unclear what kind of content should be displayed
in the popover in\r\nthat case.\r\n\r\nSo this change just prevents the
crashing reported in SDH by disabling\r\npopover on grouped edged. In
case we want to support this use-case,\r\nthere should a product
decision about the content to show in
the\r\npopover.\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/793851/9a353843-fd70-4543-a0b3-2fb8293d497f\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"17b010c603d3e364a75cba1472a7179dea647aa3","branchLabelMapping":{"^v8.15.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services","v8.15.0"],"title":"[APM]
Disable popover for grouped edges in Service
Map","number":186597,"url":"https://github.com/elastic/kibana/pull/186597","mergeCommit":{"message":"[APM]
Disable popover for grouped edges in Service Map (#186597)\n\nCloses
https://github.com/elastic/sdh-apm/issues/1378\r\nCloses
https://github.com/elastic/kibana/issues/186101\r\n\r\n##
Summary\r\n\r\nLooking at the code, it seems like use-case for showing
popover on an\r\nedge that leads into a grouped resources node was never
supported, and\r\nit's unclear what kind of content should be displayed
in the popover in\r\nthat case.\r\n\r\nSo this change just prevents the
crashing reported in SDH by disabling\r\npopover on grouped edged. In
case we want to support this use-case,\r\nthere should a product
decision about the content to show in
the\r\npopover.\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/793851/9a353843-fd70-4543-a0b3-2fb8293d497f\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"17b010c603d3e364a75cba1472a7179dea647aa3"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.15.0","branchLabelMappingKey":"^v8.15.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/186597","number":186597,"mergeCommit":{"message":"[APM]
Disable popover for grouped edges in Service Map (#186597)\n\nCloses
https://github.com/elastic/sdh-apm/issues/1378\r\nCloses
https://github.com/elastic/kibana/issues/186101\r\n\r\n##
Summary\r\n\r\nLooking at the code, it seems like use-case for showing
popover on an\r\nedge that leads into a grouped resources node was never
supported, and\r\nit's unclear what kind of content should be displayed
in the popover in\r\nthat case.\r\n\r\nSo this change just prevents the
crashing reported in SDH by disabling\r\npopover on grouped edged. In
case we want to support this use-case,\r\nthere should a product
decision about the content to show in
the\r\npopover.\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/793851/9a353843-fd70-4543-a0b3-2fb8293d497f\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"17b010c603d3e364a75cba1472a7179dea647aa3"}}]}]
BACKPORT-->

Co-authored-by: Mykola Harmash <[email protected]>

x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/index.tsx

@@ -54,11 +54,15 @@ function getContentsComponent(
     return ResourceContents;
   }
 
-  if (isTraceExplorerEnabled && selectedElementData.source && selectedElementData.target) {
+  if (isTraceExplorerEnabled && selectedElementData.sourceData && selectedElementData.targetData) {
     return EdgeContents;
   }
 
-  return DependencyContents;
+  if (selectedElementData.label) {
+    return DependencyContents;
+  }
+
+  return null;
 }
 
 export interface ContentsProps {
@@ -100,7 +104,6 @@ export function Popover({ focusedServiceName, environment, kuery, start, end }:
   const x = box ? box.x1 + box.w / 2 : -10000;
   const y = box ? box.y1 + box.h / 2 : -10000;
 
-  const isOpen = !!selectedElement;
   const triggerStyle: CSSProperties = {
     background: 'transparent',
     height: renderedHeight,
@@ -177,6 +180,8 @@ export function Popover({ focusedServiceName, environment, kuery, start, end }:
 
   const ContentsComponent = getContentsComponent(selectedElementData, isTraceExplorerEnabled);
 
+  const isOpen = !!selectedElement && !!ContentsComponent;
+
   return (
     <EuiPopover
       anchorPosition={'upCenter'}
@@ -205,14 +210,16 @@ export function Popover({ focusedServiceName, environment, kuery, start, end }:
           </EuiTitle>
           <EuiHorizontalRule margin="xs" />
         </EuiFlexItem>
-        <ContentsComponent
-          onFocusClick={onFocusClick}
-          elementData={selectedElementData}
-          environment={environment}
-          kuery={kuery}
-          start={start}
-          end={end}
-        />
+        {ContentsComponent && (
+          <ContentsComponent
+            onFocusClick={onFocusClick}
+            elementData={selectedElementData}
+            environment={environment}
+            kuery={kuery}
+            start={start}
+            end={end}
+          />
+        )}
       </EuiFlexGroup>
     </EuiPopover>
   );