[8.18] [SecuritySolution] Network page crashes after interacting with…

… map (#206773) (#211078) # Backport This will backport the following commits from `main` to `8.18`: - [[SecuritySolution] Network page crashes after interacting with map (#206773)](#206773)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Angela Chuang <[email protected]>
elastic · Feb 13, 2025 · f34b73a · f34b73a
1 parent 6953738
commit f34b73a
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 103 deletions.
diff --git a/...lore/network/components/embeddables/map_tool_tip/__snapshots__/map_tool_tip.test.tsx.snap b/...lore/network/components/embeddables/map_tool_tip/__snapshots__/map_tool_tip.test.tsx.snap
diff --git a/...solution/public/explore/network/components/embeddables/map_tool_tip/map_tool_tip.test.tsx b/...solution/public/explore/network/components/embeddables/map_tool_tip/map_tool_tip.test.tsx
@@ -5,43 +5,107 @@
  * 2.0.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
-import { MapToolTipComponent } from './map_tool_tip';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import type { TooltipFeature } from '@kbn/maps-plugin/common';
+import { MapToolTipComponent } from './map_tool_tip';
+import * as i18n from '../translations';
+import { TestProviders } from '../../../../../common/mock';
 
-describe('MapToolTip', () => {
-  test('placeholder component renders correctly against snapshot', () => {
-    const wrapper = shallow(<MapToolTipComponent />);
-    expect(wrapper).toMatchSnapshot();
-  });
+jest.mock('./line_tool_tip_content', () => ({
+  LineToolTipContent: jest.fn(() => <div data-test-subj="line-tool-tip-content" />),
+}));
 
-  test('full component renders correctly against snapshot', () => {
-    const addFilters = jest.fn();
-    const closeTooltip = jest.fn();
-    const features: TooltipFeature[] = [
-      {
-        id: 1,
-        layerId: 'layerId',
-        mbProperties: {},
-        actions: [],
-      },
-    ];
-    const getLayerName = jest.fn();
-    const loadFeatureProperties = jest.fn();
-    const loadFeatureGeometry = jest.fn();
-
-    const wrapper = shallow(
+jest.mock('./point_tool_tip_content', () => ({
+  PointToolTipContent: jest.fn(() => <div data-test-subj="point-tool-tip-content" />),
+}));
+
+describe('MapToolTipComponent', () => {
+  const mockCloseTooltip = jest.fn();
+  const mockGetLayerName = jest.fn();
+  const mockLoadFeatureProperties = jest.fn();
+  const mockLoadFeatureGeometry = jest.fn();
+  const features = [
+    { layerId: 'layer1', id: 'feature1', mbProperties: {} },
+    { layerId: 'layer2', id: 'feature2', mbProperties: {} },
+  ] as TooltipFeature[];
+
+  const renderComponent = (props = {}) => {
+    return render(
       <MapToolTipComponent
-        addFilters={addFilters}
-        closeTooltip={closeTooltip}
+        closeTooltip={mockCloseTooltip}
         features={features}
-        isLocked={false}
-        getLayerName={getLayerName}
-        loadFeatureProperties={loadFeatureProperties}
-        loadFeatureGeometry={loadFeatureGeometry}
-      />
+        getLayerName={mockGetLayerName}
+        loadFeatureProperties={mockLoadFeatureProperties}
+        loadFeatureGeometry={mockLoadFeatureGeometry}
+        {...props}
+      />,
+      { wrapper: TestProviders }
     );
-    expect(wrapper).toMatchSnapshot();
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGetLayerName.mockResolvedValue('Layer Name');
+    mockLoadFeatureProperties.mockResolvedValue([{ name: 'property1', value: 'value1' }]);
+    mockLoadFeatureGeometry.mockResolvedValue({ type: 'Point' });
+  });
+
+  it('should not render tooltips when features is empty', () => {
+    renderComponent({ features: [] });
+    expect(screen.queryByTestId('point-tool-tip-content')).toBeNull();
+  });
+
+  it('shows a loading spinner initially', () => {
+    renderComponent();
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('displays an error message when isError is true', async () => {
+    mockLoadFeatureProperties.mockRejectedValue(new Error('Load error'));
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText(i18n.MAP_TOOL_TIP_ERROR)).toBeInTheDocument();
+    });
+  });
+
+  it('displays PointToolTipContent and ToolTipFooter when feature geometry is Point', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('point-tool-tip-content')).toBeInTheDocument();
+      expect(screen.getByTestId('previous-feature-button')).toBeInTheDocument();
+      expect(screen.getByTestId('next-feature-button')).toBeInTheDocument();
+    });
+  });
+
+  it('navigates to the next and previous features correctly', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('previous-feature-button')).toBeInTheDocument();
+      expect(screen.getByTestId('next-feature-button')).toBeInTheDocument();
+    });
+
+    const nextButton = screen.getByTestId('next-feature-button');
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(mockLoadFeatureProperties).toHaveBeenCalledWith({
+        layerId: 'layer2',
+        properties: {},
+      });
+    });
+
+    const previousButton = screen.getByTestId('previous-feature-button');
+    fireEvent.click(previousButton);
+
+    await waitFor(() => {
+      expect(mockLoadFeatureProperties).toHaveBeenCalledWith({
+        layerId: 'layer1',
+        properties: {},
+      });
+    });
   });
 });
diff --git a/...rity_solution/public/explore/network/components/embeddables/map_tool_tip/map_tool_tip.tsx b/...rity_solution/public/explore/network/components/embeddables/map_tool_tip/map_tool_tip.tsx
@@ -14,16 +14,19 @@ import {
 } from '@elastic/eui';
 import type { Geometry } from 'geojson';
 import type { ITooltipProperty } from '@kbn/maps-plugin/public/classes/tooltips/tooltip_property';
+import type { TooltipFeature } from '@kbn/maps-plugin/common';
 import type { MapToolTipProps } from '../types';
 import { ToolTipFooter } from './tooltip_footer';
 import { LineToolTipContent } from './line_tool_tip_content';
 import { PointToolTipContent } from './point_tool_tip_content';
 import { Loader } from '../../../../../common/components/loader';
 import * as i18n from '../translations';
 
+const DEFAULT_FEATURE: TooltipFeature[] = [];
+
 export const MapToolTipComponent = ({
   closeTooltip,
-  features = [],
+  features = DEFAULT_FEATURE,
   getLayerName,
   loadFeatureProperties,
   loadFeatureGeometry,
@@ -35,7 +38,6 @@ export const MapToolTipComponent = ({
   const [featureProps, setFeatureProps] = useState<ITooltipProperty[]>([]);
   const [featureGeometry, setFeatureGeometry] = useState<Geometry | null>(null);
   const [, setLayerName] = useState<string>('');
-
   const handleCloseTooltip = useCallback(() => {
     if (closeTooltip != null) {
       closeTooltip();
@@ -74,24 +76,28 @@ export const MapToolTipComponent = ({
 
     return (
       <div>
-        {featureGeometry != null && featureGeometry.type === 'LineString' ? (
-          <LineToolTipContent
-            contextId={`${features[featureIndex].layerId}-${features[featureIndex].id}-${featureIndex}`}
-            featureProps={featureProps}
-          />
-        ) : (
-          <PointToolTipContent
-            contextId={`${features[featureIndex].layerId}-${features[featureIndex].id}-${featureIndex}`}
-            featureProps={featureProps}
-          />
-        )}
         {features.length > 1 && (
-          <ToolTipFooter
-            featureIndex={featureIndex}
-            totalFeatures={features.length}
-            previousFeature={handlePreviousFeature}
-            nextFeature={handleNextFeature}
-          />
+          <>
+            {featureGeometry != null && featureGeometry.type === 'LineString' ? (
+              <LineToolTipContent
+                data-test-subj="line-tool-tip-content"
+                contextId={`${features[featureIndex].layerId}-${features[featureIndex].id}-${featureIndex}`}
+                featureProps={featureProps}
+              />
+            ) : (
+              <PointToolTipContent
+                data-test-subj="point-tool-tip-content"
+                contextId={`${features[featureIndex].layerId}-${features[featureIndex].id}-${featureIndex}`}
+                featureProps={featureProps}
+              />
+            )}
+            <ToolTipFooter
+              featureIndex={featureIndex}
+              totalFeatures={features.length}
+              previousFeature={handlePreviousFeature}
+              nextFeature={handleNextFeature}
+            />
+          </>
         )}
         {isLoadingNextFeature && <Loader data-test-subj="loading-panel" overlay size="m" />}
       </div>

diff --git a/...ion/public/explore/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx b/...ion/public/explore/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
@@ -16,6 +16,7 @@ import { DescriptionListStyled } from '../../../../../common/components/page';
 import { HostDetailsLink, NetworkDetailsLink } from '../../../../../common/components/links';
 import { DefaultFieldRenderer } from '../../../../../timelines/components/field_renderers/default_renderer';
 import type { FlowTarget } from '../../../../../../common/search_strategy';
+import { SourcererScopeName } from '../../../../../sourcerer/store/model';
 
 interface PointToolTipContentProps {
   contextId: string;
@@ -42,6 +43,7 @@ export const PointToolTipContentComponent = ({
                   attrName={key}
                   idPrefix={`map-point-tooltip-${contextId}-${key}-${value}`}
                   render={(item) => getRenderedFieldValue(key, item)}
+                  scopeId={SourcererScopeName.default}
                 />
               ) : (
                 getEmptyTagValue()

diff --git a/...ty_solution/public/explore/network/components/embeddables/map_tool_tip/tooltip_footer.tsx b/...ty_solution/public/explore/network/components/embeddables/map_tool_tip/tooltip_footer.tsx
@@ -6,24 +6,9 @@
  */
 
 import React from 'react';
-import {
-  EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
-  EuiIcon,
-  EuiText,
-} from '@elastic/eui';
-import { euiLightVars as theme } from '@kbn/ui-theme';
-import styled from '@emotion/styled';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiText } from '@elastic/eui';
 import * as i18n from '../translations';
 
-export const Icon = styled(EuiIcon)`
-  margin-right: ${theme.euiSizeS};
-`;
-
-Icon.displayName = 'Icon';
-
 interface MapToolTipFooterProps {
   featureIndex: number;
   totalFeatures: number;