[Security solution] [Timeline] Bug fix for "Collapse event" button (#72552)

Author: stephmilovic

x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap

@@ -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(),
+  };
+  const wrapper = mount(
+    <TestProviders>
+      <EventDetails {...defaultProps} />
+    </TestProviders>
+  );
 
   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()}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
+      const shallowWrap = shallow(<EventDetails {...defaultProps} />);
+      expect(shallowWrap).toMatchSnapshot();
     });
   });
 
   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();
 

x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.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,22 +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;
-
-  .euiPopover {
-    position: fixed;
-    z-index: 10;
-  }
+const CollapseLink = styled(EuiLink)`
+  margin: 20px 0;
 `;
 
-const CollapseButton = styled(EuiButtonIcon)`
-  border: 1px solid;
-`;
-
-CollapseButton.displayName = 'CollapseButton';
+CollapseLink.displayName = 'CollapseLink';
 
 interface Props {
   browserFields: BrowserFields;
@@ -75,59 +57,42 @@ 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(
+      () => [
+        {
+          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]
     );
 
-    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} />,
-      },
-    ];
-
     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>
     );
   }