PR & test additions

elastic · Jan 20, 2022 · 4947ce2 · 4947ce2
1 parent 4d4a8e5
commit 4947ce2
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 29 deletions.
diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.test.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.test.tsx
@@ -31,7 +31,7 @@ const mockSetStorage = jest.fn();
 
 jest.mock('../../../common/lib/kibana', () => {
   return {
-    useKibana: jest.fn().mockReturnValue({
+    useKibana: () => ({
       services: {
         embeddable: {
           EmbeddablePanel: jest.fn(() => <div data-test-subj="EmbeddablePanel" />),
@@ -43,8 +43,8 @@ jest.mock('../../../common/lib/kibana', () => {
           },
         },
         storage: {
-          get: () => mockGetStorage.mockReturnValue(false)(),
-          set: () => mockSetStorage,
+          get: mockGetStorage,
+          set: mockSetStorage,
         },
       },
     }),
@@ -109,6 +109,11 @@ describe('EmbeddedMapComponent', () => {
 
   beforeEach(() => {
     setQuery.mockClear();
+    mockGetStorage.mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
   });
 
   test('renders correctly against snapshot', () => {
@@ -183,4 +188,38 @@ describe('EmbeddedMapComponent', () => {
       expect(wrapper.find('[data-test-subj="loading-panel"]').exists()).toEqual(true);
     });
   });
+
+  test('map hidden on close', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EmbeddedMapComponent {...testProps} />
+      </TestProviders>
+    );
+
+    const container = wrapper.find('[data-test-subj="false-toggle-network-map"]').at(0);
+    container.simulate('click');
+
+    await waitFor(() => {
+      wrapper.update();
+      expect(mockSetStorage).toHaveBeenNthCalledWith(1, 'network_map_visbile', true);
+    });
+  });
+
+  test('map visible on open', async () => {
+    mockGetStorage.mockReturnValue(true);
+
+    const wrapper = mount(
+      <TestProviders>
+        <EmbeddedMapComponent {...testProps} />
+      </TestProviders>
+    );
+
+    const container = wrapper.find('[data-test-subj="true-toggle-network-map"]').at(0);
+    container.simulate('click');
+
+    await waitFor(() => {
+      wrapper.update();
+      expect(mockSetStorage).toHaveBeenNthCalledWith(1, 'network_map_visbile', false);
+    });
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx
@@ -7,7 +7,7 @@
 
 import { EuiAccordion, EuiLink, EuiText } from '@elastic/eui';
 import deepEqual from 'fast-deep-equal';
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { createPortalNode, InPortal } from 'react-reverse-portal';
 import styled, { css } from 'styled-components';
 
@@ -105,8 +105,13 @@ export const EmbeddedMapComponent = ({
   const [embeddable, setEmbeddable] = React.useState<MapEmbeddable | undefined | ErrorEmbeddable>(
     undefined
   );
+
+  const { services } = useKibana();
+  const { storage } = services;
+
   const [isError, setIsError] = useState(false);
   const [isIndexError, setIsIndexError] = useState(false);
+  const [storageValue, setStorageValue] = useState(storage.get(NETWORK_MAP_VISIBLE) ?? true);
 
   const [, dispatchToaster] = useStateToaster();
 
@@ -127,9 +132,6 @@ export const EmbeddedMapComponent = ({
   // Search InPortal/OutPortal for implementation touch points
   const portalNode = React.useMemo(() => createPortalNode(), []);
 
-  const { services } = useKibana();
-  const { storage } = services;
-
   useEffect(() => {
     setMapIndexPatterns((prevMapIndexPatterns) => {
       const newIndexPatterns = kibanaDataViews.filter((dataView) =>
@@ -235,18 +237,22 @@ export const EmbeddedMapComponent = ({
     }
   }, [embeddable, startDate, endDate]);
 
-  const setDefaultMapVisibility = (isOpen: boolean) => {
-    storage.set(NETWORK_MAP_VISIBLE, isOpen);
-  };
+  const setDefaultMapVisibility = useCallback(
+    (isOpen: boolean) => {
+      storage.set(NETWORK_MAP_VISIBLE, isOpen);
+      setStorageValue(isOpen);
+    },
+    [storage]
+  );
 
   return isError ? null : (
     <StyledEuiAccordion
       onToggle={setDefaultMapVisibility}
-      id={i18n.EMBEDDABLE_HEADER_TITLE}
+      id={'network-map'}
       arrowDisplay="right"
       arrowProps={{
         color: 'primary',
-        'data-test-subj': 'toggle-network-map',
+        'data-test-subj': `${storageValue}-toggle-network-map`,
       }}
       buttonContent={<strong>{i18n.EMBEDDABLE_HEADER_TITLE}</strong>}
       extraAction={
@@ -257,7 +263,7 @@ export const EmbeddedMapComponent = ({
         </StyledEuiText>
       }
       paddingSize="none"
-      initialIsOpen={storage.get(NETWORK_MAP_VISIBLE) ?? true}
+      initialIsOpen={storageValue}
     >
       <Embeddable>
         <InPortal node={portalNode}>

diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/translations.ts b/x-pack/plugins/security_solution/public/network/components/embeddables/translations.ts
@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 export const EMBEDDABLE_HEADER_TITLE = i18n.translate(
   'xpack.securitySolution.components.embeddables.embeddedMap.embeddableHeaderTitle',
   {
-    defaultMessage: 'Network Map',
+    defaultMessage: 'Network map',
   }
 );
 

diff --git a/x-pack/plugins/security_solution/public/network/pages/network.tsx b/x-pack/plugins/security_solution/public/network/pages/network.tsx
@@ -176,23 +176,24 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
                 />
 
                 {canUseMaps && (
-                  <EuiPanel
-                    hasBorder
-                    paddingSize="none"
-                    data-test-subj="conditional-embeddable-map"
-                  >
-                    <EmbeddedMap
-                      query={query}
-                      filters={filters}
-                      startDate={from}
-                      endDate={to}
-                      setQuery={setQuery}
-                    />
-                  </EuiPanel>
+                  <>
+                    <EuiPanel
+                      hasBorder
+                      paddingSize="none"
+                      data-test-subj="conditional-embeddable-map"
+                    >
+                      <EmbeddedMap
+                        query={query}
+                        filters={filters}
+                        startDate={from}
+                        endDate={to}
+                        setQuery={setQuery}
+                      />
+                    </EuiPanel>
+                    <EuiSpacer />
+                  </>
                 )}
 
-                <EuiSpacer />
-
                 <NetworkKpiComponent
                   filterQuery={filterQuery}
                   from={from}