Update how the timeline flyout is hidden so that children do not acci…

…dentally get displayed (#129660)
elastic · Apr 7, 2022 · 55c3353 · 55c3353
1 parent 6afbe52
commit 55c3353
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/...curity_solution/public/timelines/components/flyout/pane/__snapshots__/index.test.tsx.snap b/...curity_solution/public/timelines/components/flyout/pane/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.test.tsx
@@ -5,20 +5,38 @@
  * 2.0.
  */
 
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 
 import { TestProviders } from '../../../../common/mock';
 import { TimelineId } from '../../../../../common/types/timeline';
 import { Pane } from '.';
 
+jest.mock('../../../../common/lib/kibana');
+jest.mock('../../../../common/components/url_state/normalize_time_range.ts');
+
+jest.mock('../../../../common/hooks/use_resolve_conflict', () => {
+  return {
+    useResolveConflict: jest.fn().mockImplementation(() => null),
+  };
+});
+
 describe('Pane', () => {
-  test('renders correctly against snapshot', () => {
-    const EmptyComponent = shallow(
+  test('renders with display block by default', () => {
+    const EmptyComponent = render(
       <TestProviders>
         <Pane timelineId={TimelineId.test} />
       </TestProviders>
     );
-    expect(EmptyComponent.find('Pane')).toMatchSnapshot();
+    expect(EmptyComponent.getByTestId('flyout-pane')).toHaveStyle('display: block');
+  });
+
+  test('renders with display none when visibility is set to false', () => {
+    const EmptyComponent = render(
+      <TestProviders>
+        <Pane timelineId={TimelineId.test} visible={false} />
+      </TestProviders>
+    );
+    expect(EmptyComponent.getByTestId('flyout-pane')).toHaveStyle('display: none');
   });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx
@@ -51,7 +51,7 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
   }, [dispatch, timelineId]);
 
   return (
-    <div data-test-subj="flyout-pane" style={{ visibility: visible ? 'visible' : 'hidden' }}>
+    <div data-test-subj="flyout-pane" style={{ display: visible ? 'block' : 'none' }}>
       <StyledEuiFlyout
         aria-label={i18n.TIMELINE_DESCRIPTION}
         className="timeline-flyout"
@@ -60,7 +60,7 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
         onClose={handleClose}
         size="100%"
         ownFocus={false}
-        style={{ visibility: visible ? 'visible' : 'hidden' }}
+        style={{ display: visible ? 'block' : 'none' }}
       >
         <IndexPatternFieldEditorOverlayGlobalStyle />
         <StatefulTimeline