From 32dc074531398e87b2c556ebfd675a8932c8c79d Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Mon, 13 Jul 2020 14:33:42 -0400
Subject: [PATCH 1/9] Hide the Timeline footer, in the event viewer, if
 Resolver is showing

---
 .../events_viewer/events_viewer.tsx           | 44 ++++++++++++-------
 .../common/components/events_viewer/index.tsx | 10 ++++-
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
index 0a1f95d51e300..147ee93c3c357 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
@@ -34,6 +34,7 @@ import {
 } from '../../../../../../../src/plugins/data/public';
 import { inputsModel } from '../../store';
 import { useManageTimeline } from '../../../timelines/components/manage_timeline';
+import { showGraphView } from '../../../timelines/components/timeline/body/helpers';
 
 const DEFAULT_EVENTS_VIEWER_HEIGHT = 500;
 
@@ -67,6 +68,8 @@ interface Props {
   sort: Sort;
   toggleColumn: (column: ColumnHeaderOptions) => void;
   utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
+  // If truthy, the graph viewer (Resolver) is showing
+  graphEventId: string | undefined;
 }
 
 const EventsViewerComponent: React.FC<Props> = ({
@@ -90,6 +93,7 @@ const EventsViewerComponent: React.FC<Props> = ({
   sort,
   toggleColumn,
   utilityBar,
+  graphEventId,
 }) => {
   const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
   const kibana = useKibana();
@@ -191,22 +195,27 @@ const EventsViewerComponent: React.FC<Props> = ({
                       toggleColumn={toggleColumn}
                     />
 
-                    <Footer
-                      getUpdatedAt={getUpdatedAt}
-                      hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
-                      height={footerHeight}
-                      id={id}
-                      isLive={isLive}
-                      isLoading={loading}
-                      itemsCount={events.length}
-                      itemsPerPage={itemsPerPage}
-                      itemsPerPageOptions={itemsPerPageOptions}
-                      onChangeItemsPerPage={onChangeItemsPerPage}
-                      onLoadMore={loadMore}
-                      nextCursor={getOr(null, 'endCursor.value', pageInfo)!}
-                      serverSideEventCount={totalCountMinusDeleted}
-                      tieBreaker={getOr(null, 'endCursor.tiebreaker', pageInfo)}
-                    />
+                    {
+                      /** Hide the footer if Resolver is showing. */
+                      !showGraphView(graphEventId) && (
+                        <Footer
+                          getUpdatedAt={getUpdatedAt}
+                          hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
+                          height={footerHeight}
+                          id={id}
+                          isLive={isLive}
+                          isLoading={loading}
+                          itemsCount={events.length}
+                          itemsPerPage={itemsPerPage}
+                          itemsPerPageOptions={itemsPerPageOptions}
+                          onChangeItemsPerPage={onChangeItemsPerPage}
+                          onLoadMore={loadMore}
+                          nextCursor={getOr(null, 'endCursor.value', pageInfo)!}
+                          serverSideEventCount={totalCountMinusDeleted}
+                          tieBreaker={getOr(null, 'endCursor.tiebreaker', pageInfo)}
+                        />
+                      )
+                    }
                   </EventsContainerLoading>
                 </>
               );
@@ -237,5 +246,6 @@ export const EventsViewer = React.memo(
     deepEqual(prevProps.query, nextProps.query) &&
     prevProps.start === nextProps.start &&
     prevProps.sort === nextProps.sort &&
-    prevProps.utilityBar === nextProps.utilityBar
+    prevProps.utilityBar === nextProps.utilityBar &&
+    prevProps.graphEventId === nextProps.graphEventId
 );
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
index b89d2b8c08625..e7a452697e530 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@@ -62,6 +62,8 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   updateItemsPerPage,
   upsertColumn,
   utilityBar,
+  // If truthy, the graph viewer (Resolver) is showing
+  graphEventId,
 }) => {
   const [{ browserFields, indexPatterns }] = useFetchIndexPatterns(
     defaultIndices ?? useUiSetting<string[]>(DEFAULT_INDEX_KEY)
@@ -135,6 +137,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
         sort={sort}
         toggleColumn={toggleColumn}
         utilityBar={utilityBar}
+        graphEventId={graphEventId}
       />
     </InspectButtonContainer>
   );
@@ -145,7 +148,9 @@ const makeMapStateToProps = () => {
   const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
   const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
   const getEvents = timelineSelectors.getEventsByIdSelector();
+  const getTimeline = timelineSelectors.getTimelineByIdSelector();
   const mapStateToProps = (state: State, { id, defaultModel }: OwnProps) => {
+    const { graphEventId } = getTimeline(state, id);
     const input: inputsModel.InputsRange = getInputsTimeline(state);
     const events: TimelineModel = getEvents(state, id) ?? defaultModel;
     const {
@@ -174,6 +179,8 @@ const makeMapStateToProps = () => {
       query: getGlobalQuerySelector(state),
       sort,
       showCheckboxes,
+      // Used to determine whether the footer should show (since it is hidden if the graph is showing.)
+      graphEventId,
     };
   };
   return mapStateToProps;
@@ -213,6 +220,7 @@ export const StatefulEventsViewer = connector(
       deepEqual(prevProps.pageFilters, nextProps.pageFilters) &&
       prevProps.showCheckboxes === nextProps.showCheckboxes &&
       prevProps.start === nextProps.start &&
-      prevProps.utilityBar === nextProps.utilityBar
+      prevProps.utilityBar === nextProps.utilityBar &&
+      prevProps.graphEventId === nextProps.graphEventId
   )
 );

From 1ad5679259e59d2c156281b3cd2320213f85dcd1 Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Mon, 13 Jul 2020 15:06:45 -0400
Subject: [PATCH 2/9] Hide the Timeline footer, in the timeline flyout, if
 Resolver is showing

---
 .../components/timeline/timeline.tsx          | 49 ++++++++++---------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
index ee48f97164b86..50a1ad0820fc9 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
@@ -17,7 +17,7 @@ import { Direction } from '../../../graphql/types';
 import { useKibana } from '../../../common/lib/kibana';
 import { ColumnHeaderOptions, KqlMode, EventType } from '../../../timelines/store/timeline/model';
 import { defaultHeaders } from './body/column_headers/default_headers';
-import { getInvestigateInResolverAction } from './body/helpers';
+import { getInvestigateInResolverAction, showGraphView } from './body/helpers';
 import { Sort } from './body/sort';
 import { StatefulBody } from './body/stateful_body';
 import { DataProvider } from './data_providers/data_provider';
@@ -282,27 +282,32 @@ export const TimelineComponent: React.FC<Props> = ({
                     toggleColumn={toggleColumn}
                   />
                 </StyledEuiFlyoutBody>
-                <StyledEuiFlyoutFooter
-                  data-test-subj="eui-flyout-footer"
-                  className="timeline-flyout-footer"
-                >
-                  <Footer
-                    getUpdatedAt={getUpdatedAt}
-                    hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
-                    height={footerHeight}
-                    id={id}
-                    isLive={isLive}
-                    isLoading={loading || loadingIndexName}
-                    itemsCount={events.length}
-                    itemsPerPage={itemsPerPage}
-                    itemsPerPageOptions={itemsPerPageOptions}
-                    nextCursor={getOr(null, 'endCursor.value', pageInfo)!}
-                    onChangeItemsPerPage={onChangeItemsPerPage}
-                    onLoadMore={loadMore}
-                    serverSideEventCount={totalCount}
-                    tieBreaker={getOr(null, 'endCursor.tiebreaker', pageInfo)}
-                  />
-                </StyledEuiFlyoutFooter>
+                {
+                  /** Hide the footer if Resolver is showing. */
+                  !showGraphView(graphEventId) && (
+                    <StyledEuiFlyoutFooter
+                      data-test-subj="eui-flyout-footer"
+                      className="timeline-flyout-footer"
+                    >
+                      <Footer
+                        getUpdatedAt={getUpdatedAt}
+                        hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
+                        height={footerHeight}
+                        id={id}
+                        isLive={isLive}
+                        isLoading={loading || loadingIndexName}
+                        itemsCount={events.length}
+                        itemsPerPage={itemsPerPage}
+                        itemsPerPageOptions={itemsPerPageOptions}
+                        nextCursor={getOr(null, 'endCursor.value', pageInfo)!}
+                        onChangeItemsPerPage={onChangeItemsPerPage}
+                        onLoadMore={loadMore}
+                        serverSideEventCount={totalCount}
+                        tieBreaker={getOr(null, 'endCursor.tiebreaker', pageInfo)}
+                      />
+                    </StyledEuiFlyoutFooter>
+                  )
+                }
               </>
             );
           }}

From 0e3ad6f95820034efa4785f5da11a6e790493fde Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Mon, 13 Jul 2020 15:26:08 -0400
Subject: [PATCH 3/9] fixup: `getTimeline` actually returns `TimelineModel |
 undefined`

---
 .../public/common/components/events_viewer/index.tsx        | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
index e7a452697e530..21a3d5f3ff230 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@@ -150,7 +150,6 @@ const makeMapStateToProps = () => {
   const getEvents = timelineSelectors.getEventsByIdSelector();
   const getTimeline = timelineSelectors.getTimelineByIdSelector();
   const mapStateToProps = (state: State, { id, defaultModel }: OwnProps) => {
-    const { graphEventId } = getTimeline(state, id);
     const input: inputsModel.InputsRange = getInputsTimeline(state);
     const events: TimelineModel = getEvents(state, id) ?? defaultModel;
     const {
@@ -180,7 +179,10 @@ const makeMapStateToProps = () => {
       sort,
       showCheckboxes,
       // Used to determine whether the footer should show (since it is hidden if the graph is showing.)
-      graphEventId,
+      graphEventId: /** `getTimeline` actually returns `TimelineModel | undefined` */ (getTimeline(
+        state,
+        id
+      ) as TimelineModel | undefined)?.graphEventId,
     };
   };
   return mapStateToProps;

From 8a75f791967d560c467175f6d3b2f5177fd8102a Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Mon, 13 Jul 2020 15:51:30 -0400
Subject: [PATCH 4/9] code style

---
 .../public/common/components/events_viewer/index.tsx        | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
index 21a3d5f3ff230..637f1a48143a9 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@@ -179,10 +179,8 @@ const makeMapStateToProps = () => {
       sort,
       showCheckboxes,
       // Used to determine whether the footer should show (since it is hidden if the graph is showing.)
-      graphEventId: /** `getTimeline` actually returns `TimelineModel | undefined` */ (getTimeline(
-        state,
-        id
-      ) as TimelineModel | undefined)?.graphEventId,
+      // `getTimeline` actually returns `TimelineModel | undefined`
+      graphEventId: (getTimeline(state, id) as TimelineModel | undefined)?.graphEventId,
     };
   };
   return mapStateToProps;

From a4a496b1a415c6f85bcb0d701a5f7c06d96b12c7 Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Mon, 13 Jul 2020 17:15:18 -0400
Subject: [PATCH 5/9] Add tests. Remove showGraphView helper

---
 .../events_viewer/events_viewer.tsx           |  4 +--
 .../components/timeline/body/helpers.ts       |  3 --
 .../components/timeline/body/index.test.tsx   | 13 +++++++++
 .../components/timeline/body/index.tsx        |  5 ++--
 .../footer/__snapshots__/index.test.tsx.snap  |  1 -
 .../components/timeline/header/index.tsx      |  3 +-
 .../components/timeline/timeline.test.tsx     | 28 +++++++++++++++++++
 .../components/timeline/timeline.tsx          |  5 ++--
 8 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
index 147ee93c3c357..a81c5facb0718 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
@@ -34,7 +34,6 @@ import {
 } from '../../../../../../../src/plugins/data/public';
 import { inputsModel } from '../../store';
 import { useManageTimeline } from '../../../timelines/components/manage_timeline';
-import { showGraphView } from '../../../timelines/components/timeline/body/helpers';
 
 const DEFAULT_EVENTS_VIEWER_HEIGHT = 500;
 
@@ -197,8 +196,9 @@ const EventsViewerComponent: React.FC<Props> = ({
 
                     {
                       /** Hide the footer if Resolver is showing. */
-                      !showGraphView(graphEventId) && (
+                      !graphEventId && (
                         <Footer
+                          data-test-subj="events-viewer-footer"
                           getUpdatedAt={getUpdatedAt}
                           hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
                           height={footerHeight}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts
index 52bbccbba58e7..317f1ed20119b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts
@@ -103,9 +103,6 @@ export const getEventType = (event: Ecs): Omit<EventType, 'all'> => {
   return 'raw';
 };
 
-export const showGraphView = (graphEventId?: string) =>
-  graphEventId != null && graphEventId.length > 0;
-
 export const isInvestigateInResolverActionEnabled = (ecsData?: Ecs) => {
   return (
     get(['agent', 'type', 0], ecsData) === 'endpoint' &&
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
index 43ea5e905ca8b..6bff0bc9f7e26 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
@@ -148,6 +148,19 @@ describe('Body', () => {
           .exists()
       ).toEqual(true);
     });
+    describe('when there is a graphEventId', () => {
+      beforeEach(() => {
+        props.graphEventId = 'graphEventId'; // any string w/ length > 0 works
+      });
+      it('should not render the timeline body', () => {
+        const wrapper = mount(
+          <TestProviders>
+            <Body {...props} />
+          </TestProviders>
+        );
+        expect(wrapper.find('[data-test-subj="timeline-body"]').exists()).toEqual(false);
+      });
+    });
   });
 
   describe('action on event', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
index b474e4047eadd..6bf2b5e2a391e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
@@ -26,7 +26,6 @@ import { EventsTable, TimelineBody, TimelineBodyGlobalStyle } from '../styles';
 import { ColumnHeaders } from './column_headers';
 import { getActionsColumnWidth } from './column_headers/helpers';
 import { Events } from './events';
-import { showGraphView } from './helpers';
 import { ColumnRenderer } from './renderers/column_renderer';
 import { RowRenderer } from './renderers/row_renderer';
 import { Sort } from './sort';
@@ -146,7 +145,7 @@ export const Body = React.memo<BodyProps>(
 
     return (
       <>
-        {showGraphView(graphEventId) && (
+        {graphEventId && (
           <GraphOverlay bodyHeight={height} graphEventId={graphEventId} timelineId={id} />
         )}
         <TimelineBody
@@ -154,7 +153,7 @@ export const Body = React.memo<BodyProps>(
           data-timeline-id={id}
           bodyHeight={height}
           ref={containerElementRef}
-          visible={show && !showGraphView(graphEventId)}
+          visible={show && !graphEventId}
         >
           <EventsTable data-test-subj="events-table" columnWidths={columnWidths}>
             <ColumnHeaders
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
index f155b379227f0..d0960b038cec2 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`Footer Timeline Component rendering it renders the default timeline footer 1`] = `
 <FooterContainer
-  data-test-subj="timeline-footer"
   direction="column"
   gutterSize="none"
   height={100}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx
index 93af374b15b56..aa3ce88acc200 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import { FilterManager, IIndexPattern } from 'src/plugins/data/public';
 import deepEqual from 'fast-deep-equal';
 
-import { showGraphView } from '../body/helpers';
 import { DataProviders } from '../data_providers';
 import { DataProvider } from '../data_providers/data_provider';
 import {
@@ -80,7 +79,7 @@ const TimelineHeaderComponent: React.FC<Props> = ({
         size="s"
       />
     )}
-    {show && !showGraphView(graphEventId) && (
+    {show && !graphEventId && (
       <>
         <DataProviders
           browserFields={browserFields}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
index 360737ce41d2d..78a46e04a6952 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
@@ -180,6 +180,34 @@ describe('Timeline', () => {
         'All events'
       );
     });
+
+    it('it shows the timeline footer', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <MockedProvider mocks={mocks}>
+            <TimelineComponent {...props} />
+          </MockedProvider>
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="timeline-footer"]').exists()).toEqual(true);
+    });
+    describe('when there is a graphEventId', () => {
+      beforeEach(() => {
+        props.graphEventId = 'graphEventId'; // any string w/ length > 0 works
+      });
+      it('should not show the timeline footer', () => {
+        const wrapper = mount(
+          <TestProviders>
+            <MockedProvider mocks={mocks}>
+              <TimelineComponent {...props} />
+            </MockedProvider>
+          </TestProviders>
+        );
+
+        expect(wrapper.find('[data-test-subj="timeline-footer"]').exists()).toEqual(false);
+      });
+    });
   });
 
   describe('event wire up', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
index 50a1ad0820fc9..c1e97dcaef86a 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
@@ -17,7 +17,7 @@ import { Direction } from '../../../graphql/types';
 import { useKibana } from '../../../common/lib/kibana';
 import { ColumnHeaderOptions, KqlMode, EventType } from '../../../timelines/store/timeline/model';
 import { defaultHeaders } from './body/column_headers/default_headers';
-import { getInvestigateInResolverAction, showGraphView } from './body/helpers';
+import { getInvestigateInResolverAction } from './body/helpers';
 import { Sort } from './body/sort';
 import { StatefulBody } from './body/stateful_body';
 import { DataProvider } from './data_providers/data_provider';
@@ -284,12 +284,13 @@ export const TimelineComponent: React.FC<Props> = ({
                 </StyledEuiFlyoutBody>
                 {
                   /** Hide the footer if Resolver is showing. */
-                  !showGraphView(graphEventId) && (
+                  !graphEventId && (
                     <StyledEuiFlyoutFooter
                       data-test-subj="eui-flyout-footer"
                       className="timeline-flyout-footer"
                     >
                       <Footer
+                        data-test-subj="timeline-footer"
                         getUpdatedAt={getUpdatedAt}
                         hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
                         height={footerHeight}

From 7e5ed4ff99772be614f2ff813876b3cf3ea1fe9b Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Mon, 13 Jul 2020 18:05:31 -0400
Subject: [PATCH 6/9] mock GraphOverlay so that Resolver doesnt mount. Check
 the visiblity prop on TimelineBody

---
 .../public/timelines/components/timeline/body/index.test.tsx | 5 +++--
 .../timeline/footer/__snapshots__/index.test.tsx.snap        | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
index 6bff0bc9f7e26..9d7d48a57b274 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
@@ -17,7 +17,7 @@ import { columnRenderers, rowRenderers } from './renderers';
 import { Sort } from './sort';
 import { wait } from '../../../../common/lib/helpers';
 import { useMountAppended } from '../../../../common/utils/use_mount_appended';
-import { SELECTOR_TIMELINE_BODY_CLASS_NAME } from '../styles';
+import { SELECTOR_TIMELINE_BODY_CLASS_NAME, TimelineBody } from '../styles';
 
 const testBodyHeight = 700;
 const mockGetNotesByIds = (eventId: string[]) => [];
@@ -34,6 +34,7 @@ jest.mock('react-redux', () => {
   };
 });
 jest.mock('../../../../common/components/link_to');
+jest.mock('../../graph_overlay');
 
 jest.mock(
   'react-visibility-sensor',
@@ -158,7 +159,7 @@ describe('Body', () => {
             <Body {...props} />
           </TestProviders>
         );
-        expect(wrapper.find('[data-test-subj="timeline-body"]').exists()).toEqual(false);
+        expect(wrapper.find(TimelineBody).props().visible).toBe(false);
       });
     });
   });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
index d0960b038cec2..f155b379227f0 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`Footer Timeline Component rendering it renders the default timeline footer 1`] = `
 <FooterContainer
+  data-test-subj="timeline-footer"
   direction="column"
   gutterSize="none"
   height={100}

From 68c0e91eb8ddc27b6858248715faee7c807e1390 Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Mon, 13 Jul 2020 18:09:39 -0400
Subject: [PATCH 7/9] comments

---
 .../public/timelines/components/timeline/body/index.test.tsx   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
index 9d7d48a57b274..7cb24519ae327 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
@@ -33,7 +33,10 @@ jest.mock('react-redux', () => {
     useSelector: jest.fn(),
   };
 });
+
 jest.mock('../../../../common/components/link_to');
+
+// Prevent Resolver from rendering
 jest.mock('../../graph_overlay');
 
 jest.mock(

From b0b048bea6be5d747691db2a2348775394203fbe Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Mon, 13 Jul 2020 18:10:28 -0400
Subject: [PATCH 8/9] comments

---
 .../public/timelines/components/timeline/body/index.test.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
index 7cb24519ae327..5377002dbf492 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
@@ -162,6 +162,7 @@ describe('Body', () => {
             <Body {...props} />
           </TestProviders>
         );
+        // the timeline body still renders, but it gets a `display: none` style via `styled-components`.
         expect(wrapper.find(TimelineBody).props().visible).toBe(false);
       });
     });

From 96e642eb2ca6ccc7e0f75ed2bcf2b04ec20266a0 Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Mon, 13 Jul 2020 18:50:13 -0400
Subject: [PATCH 9/9] test uses data-test-subj instead of component reference

---
 .../components/timeline/body/index.test.tsx          | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
index 5377002dbf492..1e5eff8b79796 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
@@ -18,6 +18,7 @@ import { Sort } from './sort';
 import { wait } from '../../../../common/lib/helpers';
 import { useMountAppended } from '../../../../common/utils/use_mount_appended';
 import { SELECTOR_TIMELINE_BODY_CLASS_NAME, TimelineBody } from '../styles';
+import { ReactWrapper } from '@elastic/eui/node_modules/@types/enzyme';
 
 const testBodyHeight = 700;
 const mockGetNotesByIds = (eventId: string[]) => [];
@@ -162,8 +163,17 @@ describe('Body', () => {
             <Body {...props} />
           </TestProviders>
         );
+
+        // The value returned if `wrapper.find` returns a `TimelineBody` instance.
+        type TimelineBodyEnzymeWrapper = ReactWrapper<React.ComponentProps<typeof TimelineBody>>;
+
+        // The first TimelineBody component
+        const timelineBody: TimelineBodyEnzymeWrapper = wrapper
+          .find('[data-test-subj="timeline-body"]')
+          .first() as TimelineBodyEnzymeWrapper;
+
         // the timeline body still renders, but it gets a `display: none` style via `styled-components`.
-        expect(wrapper.find(TimelineBody).props().visible).toBe(false);
+        expect(timelineBody.props().visible).toBe(false);
       });
     });
   });