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

Closes elastic/sdh-apm#1378
Closes #186101

## Summary

Looking at the code, it seems like use-case for showing popover on an
edge that leads into a grouped resources node was never supported, and
it's unclear what kind of content should be displayed in the popover in
that case.

So this change just prevents the crashing reported in SDH by disabling
popover on grouped edged. In case we want to support this use-case,
there should a product decision about the content to show in the
popover.

https://github.com/elastic/kibana/assets/793851/9a353843-fd70-4543-a0b3-2fb8293d497f

Co-authored-by: Kibana Machine <[email protected]>
(cherry picked from commit 17b010c)

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