[SECURITY SOLUTIONS] Keep context of timeline when switching tabs in security solutions

x-pack/plugins/security_solution/public/app/home/index.tsx

@@ -6,6 +6,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { useDispatch } from 'react-redux';
 
 import { TimelineId } from '../../../common/types/timeline';
 import { DragDropContextWrapper } from '../../common/components/drag_and_drop/drag_drop_context_wrapper';
@@ -23,6 +24,7 @@ import { DETECTIONS_SUB_PLUGIN_ID } from '../../../common/constants';
 import { SourcererScopeName } from '../../common/store/sourcerer/model';
 import { useUpgradeEndpointPackage } from '../../common/hooks/endpoint/upgrade';
 import { useThrottledResizeObserver } from '../../common/components/utils';
+import { inputsActions } from '../../common/store/inputs';
 
 const Main = styled.main.attrs<{ paddingTop: number }>(({ paddingTop }) => ({
   style: {
@@ -44,6 +46,7 @@ interface HomePageProps {
 }
 
 const HomePageComponent: React.FC<HomePageProps> = ({ children }) => {
+  const dispatch = useDispatch();
   const { application, overlays } = useKibana().services;
   const subPluginId = useRef<string>('');
   const { ref, height = 0 } = useThrottledResizeObserver(300);
@@ -79,6 +82,12 @@ const HomePageComponent: React.FC<HomePageProps> = ({ children }) => {
   // can remove this.
   useUpgradeEndpointPackage();
 
+  useEffect(() => {
+    return () => {
+      dispatch(inputsActions.setIsInitializing({ id: 'timeline' }));
+    };
+  }, [dispatch]);
+
   return (
     <SecuritySolutionAppWrapper>
       <HeaderGlobal ref={ref} isFixed={headerFixed} />

x-pack/plugins/security_solution/public/common/components/query_bar/index.tsx

@@ -62,7 +62,10 @@ export const QueryBar = memo<QueryBarComponentProps>(
     const [draftQuery, setDraftQuery] = useState(filterQuery);
 
     useEffect(() => {
-      // Reset draftQuery when `Create new timeline` is clicked
+      setDraftQuery(filterQuery);
+    }, [filterQuery]);
+
+    useEffect(() => {
       if (filterQueryDraft == null) {
         setDraftQuery(filterQuery);
       }

x-pack/plugins/security_solution/public/common/components/super_date_picker/selectors.test.ts

@@ -28,6 +28,7 @@ describe('selectors', () => {
   };
 
   let inputState: InputsRange = {
+    isInitializing: false,
     timerange: absoluteTime,
     policy: {
       kind: 'manual',
@@ -62,6 +63,7 @@ describe('selectors', () => {
     };
 
     inputState = {
+      isInitializing: false,
       timerange: absoluteTime,
       policy: {
         kind: 'manual',

x-pack/plugins/security_solution/public/common/mock/global_state.ts

@@ -160,6 +160,7 @@ export const mockGlobalState: State = {
   },
   inputs: {
     global: {
+      isInitializing: false,
       timerange: {
         kind: 'relative',
         fromStr: DEFAULT_FROM,
@@ -177,6 +178,7 @@ export const mockGlobalState: State = {
       filters: [],
     },
     timeline: {
+      isInitializing: false,
       timerange: {
         kind: 'relative',
         fromStr: DEFAULT_FROM,

x-pack/plugins/security_solution/public/common/store/inputs/actions.ts

@@ -89,3 +89,7 @@ export const setSearchBarFilter = actionCreator<{
   id: InputsModelId;
   filters: Filter[];
 }>('SET_SEARCH_BAR_FILTER');
+
+export const setIsInitializing = actionCreator<{
+  id: InputsModelId;
+}>('SET_IS_INITIALIZING');

x-pack/plugins/security_solution/public/common/store/inputs/helpers.test.ts

@@ -258,6 +258,7 @@ describe('Inputs', () => {
         })
       ).toEqual({
         global: {
+          isInitializing: false,
           linkTo: ['timeline'],
           policy: {
             duration: 300000,
@@ -284,6 +285,7 @@ describe('Inputs', () => {
           filters: [],
         },
         timeline: {
+          isInitializing: false,
           linkTo: ['global'],
           policy: {
             duration: 300000,

x-pack/plugins/security_solution/public/common/store/inputs/helpers.ts

@@ -38,6 +38,7 @@ export const updateInputTimerange = (
           ...acc,
           [linkToId]: {
             ...get(linkToId, state),
+            isInitializing: false,
             timerange,
           },
         }),

x-pack/plugins/security_solution/public/common/store/inputs/model.ts

@@ -73,6 +73,7 @@ export interface GlobalKqlQuery extends GlobalGenericQuery {
 export type GlobalQuery = GlobalGraphqlQuery | GlobalKqlQuery;
 
 export interface InputsRange {
+  isInitializing: boolean;
   timerange: TimeRange;
   policy: Policy;
   queries: GlobalQuery[];

x-pack/plugins/security_solution/public/common/store/inputs/reducer.ts

@@ -28,6 +28,7 @@ import {
   setFilterQuery,
   setSavedQuery,
   setSearchBarFilter,
+  setIsInitializing,
 } from './actions';
 import {
   setIsInspected,
@@ -47,6 +48,7 @@ export type InputsState = InputsModel;
 
 export const initialInputsState: InputsState = {
   global: {
+    isInitializing: false,
     timerange: {
       kind: 'relative',
       ...getTimeRangeSettings(false),
@@ -62,6 +64,7 @@ export const initialInputsState: InputsState = {
     fullScreen: false,
   },
   timeline: {
+    isInitializing: false,
     timerange: {
       kind: 'relative',
       ...getTimeRangeSettings(false),
@@ -84,6 +87,7 @@ export const createInitialInputsState = (): InputsState => {
 
   return {
     global: {
+      isInitializing: false,
       timerange: {
         kind: 'relative',
         fromStr,
@@ -105,6 +109,7 @@ export const createInitialInputsState = (): InputsState => {
       fullScreen: false,
     },
     timeline: {
+      isInitializing: false,
       timerange: {
         kind: 'relative',
         fromStr,
@@ -245,4 +250,11 @@ export const inputsReducer = reducerWithInitialState(initialInputsState)
       filters,
     },
   }))
+  .case(setIsInitializing, (state, { id }) => ({
+    ...state,
+    [id]: {
+      ...get(id, state),
+      isInitializing: true,
+    },
+  }))
   .build();

x-pack/plugins/security_solution/public/timelines/components/field_renderers/field_renderers.test.tsx

@@ -20,6 +20,7 @@ import {
   reputationRenderer,
   DefaultFieldRenderer,
   DEFAULT_MORE_MAX_HEIGHT,
+  DefaultFieldRendererOverflow,
   MoreContainer,
 } from './field_renderers';
 import { mockData } from '../../../network/components/details/mock';
@@ -330,4 +331,45 @@ describe('Field Renderers', () => {
       expect(render).toHaveBeenCalledTimes(2);
     });
   });
+
+  describe('DefaultFieldRendererOverflow', () => {
+    const idPrefix = 'prefix-1';
+    const rowItems = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7'];
+
+    test('it should render the length of items after the overflowIndexStart', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <DefaultFieldRendererOverflow
+            idPrefix={idPrefix}
+            rowItems={rowItems}
+            moreMaxHeight={DEFAULT_MORE_MAX_HEIGHT}
+            overflowIndexStart={5}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(' ,+2 More');
+      expect(wrapper.find('[data-test-subj="more-container"]').first().exists()).toBe(false);
+    });
+
+    test('it should render the items after overflowIndexStart in the popover', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <DefaultFieldRendererOverflow
+            idPrefix={idPrefix}
+            rowItems={rowItems}
+            moreMaxHeight={DEFAULT_MORE_MAX_HEIGHT}
+            overflowIndexStart={5}
+          />
+        </TestProviders>
+      );
+
+      wrapper.find('button').first().simulate('click');
+      wrapper.update();
+      expect(wrapper.find('.euiPopover').first().exists()).toBe(true);
+      expect(wrapper.find('[data-test-subj="more-container"]').first().text()).toEqual(
+        'item6item7'
+      );
+    });
+  });
 });

x-pack/plugins/security_solution/public/timelines/components/field_renderers/field_renderers.tsx

@@ -260,12 +260,12 @@ MoreContainer.displayName = 'MoreContainer';
 export const DefaultFieldRendererOverflow = React.memo<DefaultFieldRendererOverflowProps>(
   ({ idPrefix, moreMaxHeight, overflowIndexStart = 5, render, rowItems }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const handleClose = useCallback(() => setIsOpen(false), []);
+    const togglePopover = useCallback(() => setIsOpen((currentIsOpen) => !currentIsOpen), []);
     const button = useMemo(
       () => (
         <>
           {' ,'}
-          <EuiButtonEmpty size="xs" onClick={handleClose}>
+          <EuiButtonEmpty size="xs" onClick={togglePopover}>
             {`+${rowItems.length - overflowIndexStart} `}
             <FormattedMessage
               id="xpack.securitySolution.fieldRenderers.moreLabel"
@@ -274,7 +274,7 @@ export const DefaultFieldRendererOverflow = React.memo<DefaultFieldRendererOverf
           </EuiButtonEmpty>
         </>
       ),
-      [handleClose, overflowIndexStart, rowItems.length]
+      [togglePopover, overflowIndexStart, rowItems.length]
     );
 
     return (
@@ -284,7 +284,7 @@ export const DefaultFieldRendererOverflow = React.memo<DefaultFieldRendererOverf
             id="popover"
             button={button}
             isOpen={isOpen}
-            closePopover={handleClose}
+            closePopover={togglePopover}
             repositionOnScroll
           >
             <MoreContainer

x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/index.tsx

@@ -94,7 +94,6 @@ const EventsComponent: React.FC<Props> = ({
         columnHeaders={columnHeaders}
         columnRenderers={columnRenderers}
         containerElementRef={containerElementRef}
-        disableSensorVisibility={data != null && data.length < 101}
         docValueFields={docValueFields}
         event={event}
         eventIdToNoteIds={eventIdToNoteIds}