From 53680a6502c67ca400d6a2bb5eac228267a1aaf5 Mon Sep 17 00:00:00 2001
From: Steph Milovic <stephanie.milovic@elastic.co>
Date: Mon, 20 Jul 2020 16:43:17 -0600
Subject: [PATCH 1/4] Fix button

---
 .../event_details/event_details.tsx           | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
index 53ec14380d5bc..23ed1fd97e825 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
@@ -30,11 +30,12 @@ const PopoverContainer = styled.div`
   left: -40px;
   position: relative;
   top: 10px;
+  height: 0;
 
-  .euiPopover {
-    position: fixed;
-    z-index: 10;
-  }
+  // .euiPopover {
+  //   position: fixed;
+  //   z-index: 10;
+  // }
 `;
 
 const CollapseButton = styled(EuiButtonIcon)`
@@ -90,28 +91,31 @@ export const EventDetails = React.memo<Props>(
       [onEventToggled]
     );
 
-    const tabs: EuiTabbedContentTab[] = [
-      {
-        id: 'table-view',
-        name: i18n.TABLE,
-        content: (
-          <EventFieldsBrowser
-            browserFields={browserFields}
-            columnHeaders={columnHeaders}
-            data={data}
-            eventId={id}
-            onUpdateColumns={onUpdateColumns}
-            timelineId={timelineId}
-            toggleColumn={toggleColumn}
-          />
-        ),
-      },
-      {
-        id: 'json-view',
-        name: i18n.JSON_VIEW,
-        content: <JsonView data={data} />,
-      },
-    ];
+    const tabs: EuiTabbedContentTab[] = useMemo(
+      () => [
+        {
+          id: 'table-view',
+          name: i18n.TABLE,
+          content: (
+            <EventFieldsBrowser
+              browserFields={browserFields}
+              columnHeaders={columnHeaders}
+              data={data}
+              eventId={id}
+              onUpdateColumns={onUpdateColumns}
+              timelineId={timelineId}
+              toggleColumn={toggleColumn}
+            />
+          ),
+        },
+        {
+          id: 'json-view',
+          name: i18n.JSON_VIEW,
+          content: <JsonView data={data} />,
+        },
+      ],
+      [browserFields, columnHeaders, data, id, onUpdateColumns, timelineId, toggleColumn]
+    );
 
     return (
       <Details data-test-subj="eventDetails">

From 86b4fc8bc339ef6ea9afc8ea736788c07cdec0f8 Mon Sep 17 00:00:00 2001
From: Steph Milovic <stephanie.milovic@elastic.co>
Date: Mon, 20 Jul 2020 16:47:21 -0600
Subject: [PATCH 2/4] cleanup

---
 .../public/common/components/event_details/event_details.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
index 23ed1fd97e825..cc5f20b973f61 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
@@ -31,11 +31,6 @@ const PopoverContainer = styled.div`
   position: relative;
   top: 10px;
   height: 0;
-
-  // .euiPopover {
-  //   position: fixed;
-  //   z-index: 10;
-  // }
 `;
 
 const CollapseButton = styled(EuiButtonIcon)`

From bc2429ccb14e489b8863a059a4e7ab7a09b19bdc Mon Sep 17 00:00:00 2001
From: Steph Milovic <stephanie.milovic@elastic.co>
Date: Tue, 21 Jul 2020 11:40:05 -0600
Subject: [PATCH 3/4] new link style button and test cleaned

---
 .../__snapshots__/event_details.test.tsx.snap | 34 ++-----
 .../event_details/event_details.test.tsx      | 88 +++++--------------
 .../event_details/event_details.tsx           | 48 ++--------
 3 files changed, 34 insertions(+), 136 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap
index ebaf60e7078f0..2ae621e71a725 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap
@@ -4,33 +4,6 @@ exports[`EventDetails rendering should match snapshot 1`] = `
 <Details
   data-test-subj="eventDetails"
 >
-  <styled.div>
-    <EuiPopover
-      anchorPosition="downCenter"
-      button={
-        <EuiToolTip
-          content="Collapse event"
-          delay="regular"
-          position="top"
-        >
-          <CollapseButton
-            aria-label="Collapse"
-            data-test-subj="collapse"
-            iconType="cross"
-            onClick={[MockFunction]}
-            size="s"
-          />
-        </EuiToolTip>
-      }
-      closePopover={[Function]}
-      display="inlineBlock"
-      hasArrow={true}
-      isOpen={false}
-      ownFocus={false}
-      panelPaddingSize="m"
-      repositionOnScroll={true}
-    />
-  </styled.div>
   <EuiTabbedContent
     autoFocus="initial"
     onTabClick={[Function]}
@@ -1571,5 +1544,12 @@ In other use cases the message field can be used to concatenate different values
       ]
     }
   />
+  <CollapseLink
+    aria-label="Collapse"
+    data-test-subj="collapse"
+    onClick={[MockFunction]}
+  >
+    Collapse event
+  </CollapseLink>
 </Details>
 `;
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
index a5b44fd540c4b..0461d11171002 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
@@ -11,7 +11,7 @@ import '../../mock/match_media';
 import { mockDetailItemData, mockDetailItemDataId } from '../../mock/mock_detail_item';
 import { TestProviders } from '../../mock/test_providers';
 
-import { EventDetails } from './event_details';
+import { EventDetails, View } from './event_details';
 import { mockBrowserFields } from '../../containers/source/mock';
 import { defaultHeaders } from '../../mock/header';
 import { useMountAppended } from '../../utils/use_mount_appended';
@@ -20,47 +20,35 @@ jest.mock('../link_to');
 
 describe('EventDetails', () => {
   const mount = useMountAppended();
+  const onEventToggled = jest.fn();
+  const defaultProps = {
+    browserFields: mockBrowserFields,
+    columnHeaders: defaultHeaders,
+    data: mockDetailItemData,
+    id: mockDetailItemDataId,
+    view: 'table-view' as View,
+    onEventToggled,
+    onUpdateColumns: jest.fn(),
+    onViewSelected: jest.fn(),
+    timelineId: 'test',
+    toggleColumn: jest.fn(),
+  };
 
   describe('rendering', () => {
     test('should match snapshot', () => {
-      const wrapper = shallow(
-        <EventDetails
-          browserFields={mockBrowserFields}
-          columnHeaders={defaultHeaders}
-          data={mockDetailItemData}
-          id={mockDetailItemDataId}
-          view="table-view"
-          onEventToggled={jest.fn()}
-          onUpdateColumns={jest.fn()}
-          onViewSelected={jest.fn()}
-          timelineId="test"
-          toggleColumn={jest.fn()}
-        />
-      );
+      const wrapper = shallow(<EventDetails {...defaultProps} />);
       expect(wrapper).toMatchSnapshot();
     });
   });
+  const wrapper = mount(
+    <TestProviders>
+      <EventDetails {...defaultProps} />
+    </TestProviders>
+  );
 
   describe('tabs', () => {
     ['Table', 'JSON View'].forEach((tab) => {
       test(`it renders the ${tab} tab`, () => {
-        const wrapper = mount(
-          <TestProviders>
-            <EventDetails
-              browserFields={mockBrowserFields}
-              columnHeaders={defaultHeaders}
-              data={mockDetailItemData}
-              id={mockDetailItemDataId}
-              view="table-view"
-              onEventToggled={jest.fn()}
-              onUpdateColumns={jest.fn()}
-              onViewSelected={jest.fn()}
-              timelineId="test"
-              toggleColumn={jest.fn()}
-            />
-          </TestProviders>
-        );
-
         expect(
           wrapper
             .find('[data-test-subj="eventDetails"]')
@@ -71,48 +59,12 @@ describe('EventDetails', () => {
     });
 
     test('the Table tab is selected by default', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <EventDetails
-            browserFields={mockBrowserFields}
-            columnHeaders={defaultHeaders}
-            data={mockDetailItemData}
-            id={mockDetailItemDataId}
-            view="table-view"
-            onEventToggled={jest.fn()}
-            onUpdateColumns={jest.fn()}
-            onViewSelected={jest.fn()}
-            timelineId="test"
-            toggleColumn={jest.fn()}
-          />
-        </TestProviders>
-      );
-
       expect(
         wrapper.find('[data-test-subj="eventDetails"]').find('.euiTab-isSelected').first().text()
       ).toEqual('Table');
     });
 
     test('it invokes `onEventToggled` when the collapse button is clicked', () => {
-      const onEventToggled = jest.fn();
-
-      const wrapper = mount(
-        <TestProviders>
-          <EventDetails
-            browserFields={mockBrowserFields}
-            columnHeaders={defaultHeaders}
-            data={mockDetailItemData}
-            id={mockDetailItemDataId}
-            view="table-view"
-            onEventToggled={onEventToggled}
-            onUpdateColumns={jest.fn()}
-            onViewSelected={jest.fn()}
-            timelineId="test"
-            toggleColumn={jest.fn()}
-          />
-        </TestProviders>
-      );
-
       wrapper.find('[data-test-subj="collapse"]').first().simulate('click');
       wrapper.update();
 
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
index cc5f20b973f61..1cc50b7d951a2 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
@@ -4,14 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { noop } from 'lodash/fp';
-import {
-  EuiButtonIcon,
-  EuiPopover,
-  EuiTabbedContent,
-  EuiTabbedContentTab,
-  EuiToolTip,
-} from '@elastic/eui';
+import { EuiLink, EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
@@ -26,18 +19,11 @@ import { COLLAPSE, COLLAPSE_EVENT } from '../../../timelines/components/timeline
 
 export type View = 'table-view' | 'json-view';
 
-const PopoverContainer = styled.div`
-  left: -40px;
-  position: relative;
-  top: 10px;
-  height: 0;
+const CollapseLink = styled(EuiLink)`
+  margin: 20px 0;
 `;
 
-const CollapseButton = styled(EuiButtonIcon)`
-  border: 1px solid;
-`;
-
-CollapseButton.displayName = 'CollapseButton';
+CollapseLink.displayName = 'CollapseLink';
 
 interface Props {
   browserFields: BrowserFields;
@@ -71,21 +57,6 @@ export const EventDetails = React.memo<Props>(
     timelineId,
     toggleColumn,
   }) => {
-    const button = useMemo(
-      () => (
-        <EuiToolTip content={COLLAPSE_EVENT}>
-          <CollapseButton
-            aria-label={COLLAPSE}
-            data-test-subj="collapse"
-            iconType="cross"
-            size="s"
-            onClick={onEventToggled}
-          />
-        </EuiToolTip>
-      ),
-      [onEventToggled]
-    );
-
     const tabs: EuiTabbedContentTab[] = useMemo(
       () => [
         {
@@ -114,19 +85,14 @@ export const EventDetails = React.memo<Props>(
 
     return (
       <Details data-test-subj="eventDetails">
-        <PopoverContainer>
-          <EuiPopover
-            button={button}
-            isOpen={false}
-            closePopover={noop}
-            repositionOnScroll={true}
-          />
-        </PopoverContainer>
         <EuiTabbedContent
           tabs={tabs}
           selectedTab={view === 'table-view' ? tabs[0] : tabs[1]}
           onTabClick={(e) => onViewSelected(e.id as View)}
         />
+        <CollapseLink aria-label={COLLAPSE} data-test-subj="collapse" onClick={onEventToggled}>
+          {COLLAPSE_EVENT}
+        </CollapseLink>
       </Details>
     );
   }

From 0a311006a19eebcf08aa1a7e935b607744f7cb48 Mon Sep 17 00:00:00 2001
From: Steph Milovic <stephanie.milovic@elastic.co>
Date: Tue, 21 Jul 2020 16:34:56 -0600
Subject: [PATCH 4/4] fix test nit

---
 .../event_details/event_details.test.tsx           | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
index 0461d11171002..01b0810830dd8 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
@@ -33,19 +33,19 @@ describe('EventDetails', () => {
     timelineId: 'test',
     toggleColumn: jest.fn(),
   };
-
-  describe('rendering', () => {
-    test('should match snapshot', () => {
-      const wrapper = shallow(<EventDetails {...defaultProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
   const wrapper = mount(
     <TestProviders>
       <EventDetails {...defaultProps} />
     </TestProviders>
   );
 
+  describe('rendering', () => {
+    test('should match snapshot', () => {
+      const shallowWrap = shallow(<EventDetails {...defaultProps} />);
+      expect(shallowWrap).toMatchSnapshot();
+    });
+  });
+
   describe('tabs', () => {
     ['Table', 'JSON View'].forEach((tab) => {
       test(`it renders the ${tab} tab`, () => {