From 55c3353afdb88ba40b428b8039ef0ad4db63f984 Mon Sep 17 00:00:00 2001
From: Kevin Qualters <56408403+kqualters-elastic@users.noreply.github.com>
Date: Wed, 6 Apr 2022 22:47:16 -0400
Subject: [PATCH] Update how the timeline flyout is hidden so that children do
 not accidentally get displayed (#129660)

---
 .../pane/__snapshots__/index.test.tsx.snap    |  7 -----
 .../components/flyout/pane/index.test.tsx     | 26 ++++++++++++++++---
 .../components/flyout/pane/index.tsx          |  4 +--
 3 files changed, 24 insertions(+), 13 deletions(-)
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/flyout/pane/__snapshots__/index.test.tsx.snap

diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 5c9123ed8810e..0000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Pane renders correctly against snapshot 1`] = `
-<Pane
-  timelineId="test"
-/>
-`;
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
index 4ccc7ef5b5bc5..8c4356e100c15 100644
--- 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
index dd50f00b23eae..ee02b8485ece2 100644
--- 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