[Security Solution] [Timeline] Bugfix for timeline row actions disappear sometimes (#70958)

Author: stephmilovic

x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.tsx

@@ -48,6 +48,7 @@ import {
   displaySuccessToast,
   displayErrorToast,
 } from '../../../common/components/toasters';
+import { getInvestigateInResolverAction } from '../../../timelines/components/timeline/body/helpers';
 
 interface OwnProps {
   timelineId: TimelineIdLiteral;
@@ -331,13 +332,14 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
 
   useEffect(() => {
     initializeTimeline({
-      id: timelineId,
-      documentType: i18n.ALERTS_DOCUMENT_TYPE,
       defaultModel: alertsDefaultModel,
+      documentType: i18n.ALERTS_DOCUMENT_TYPE,
       footerText: i18n.TOTAL_COUNT_OF_ALERTS,
+      id: timelineId,
       loadingText: i18n.LOADING_ALERTS,
-      title: i18n.ALERTS_TABLE_TITLE,
       selectAll: canUserCRUD ? selectAll : false,
+      timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId })],
+      title: i18n.ALERTS_TABLE_TITLE,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx

@@ -69,21 +69,18 @@ const AlertsTableComponent: React.FC<Props> = ({
 }) => {
   const dispatch = useDispatch();
   const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]);
-  const { initializeTimeline, setTimelineRowActions } = useManageTimeline();
+  const { initializeTimeline } = useManageTimeline();
 
   useEffect(() => {
     initializeTimeline({
       id: timelineId,
       documentType: i18n.ALERTS_DOCUMENT_TYPE,
       defaultModel: alertsDefaultModel,
       footerText: i18n.TOTAL_COUNT_OF_ALERTS,
+      timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId })],
       title: i18n.ALERTS_TABLE_TITLE,
       unit: i18n.UNIT,
     });
-    setTimelineRowActions({
-      id: timelineId,
-      timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId })],
-    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return (

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx

@@ -18,7 +18,7 @@ import { useAddToTimeline } from '../../hooks/use_add_to_timeline';
 import { DraggableWrapperHoverContent } from './draggable_wrapper_hover_content';
 import {
   ManageGlobalTimeline,
-  timelineDefaults,
+  getTimelineDefaults,
 } from '../../../timelines/components/manage_timeline';
 import { TimelineId } from '../../../../common/types/timeline';
 
@@ -152,10 +152,7 @@ describe('DraggableWrapperHoverContent', () => {
         beforeEach(() => {
           onFilterAdded = jest.fn();
           const manageTimelineForTesting = {
-            [timelineId]: {
-              ...timelineDefaults,
-              id: timelineId,
-            },
+            [timelineId]: getTimelineDefaults(timelineId),
           };
 
           wrapper = mount(
@@ -249,8 +246,7 @@ describe('DraggableWrapperHoverContent', () => {
 
           const manageTimelineForTesting = {
             [timelineId]: {
-              ...timelineDefaults,
-              id: timelineId,
+              ...getTimelineDefaults(timelineId),
               filterManager,
             },
           };

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx

@@ -7,7 +7,6 @@
 import { EuiPanel } from '@elastic/eui';
 import { getOr, isEmpty, union } from 'lodash/fp';
 import React, { useEffect, useMemo, useState } from 'react';
-import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
 
@@ -35,7 +34,6 @@ import {
 } from '../../../../../../../src/plugins/data/public';
 import { inputsModel } from '../../store';
 import { useManageTimeline } from '../../../timelines/components/manage_timeline';
-import { getInvestigateInResolverAction } from '../../../timelines/components/timeline/body/helpers';
 
 const DEFAULT_EVENTS_VIEWER_HEIGHT = 500;
 
@@ -93,7 +91,6 @@ const EventsViewerComponent: React.FC<Props> = ({
   toggleColumn,
   utilityBar,
 }) => {
-  const dispatch = useDispatch();
   const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
   const kibana = useKibana();
   const { filterManager } = useKibana().services.data.query;
@@ -103,16 +100,8 @@ const EventsViewerComponent: React.FC<Props> = ({
     getManageTimelineById,
     setIsTimelineLoading,
     setTimelineFilterManager,
-    setTimelineRowActions,
   } = useManageTimeline();
 
-  useEffect(() => {
-    setTimelineRowActions({
-      id,
-      timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId: id })],
-    });
-  }, [setTimelineRowActions, id, dispatch]);
-
   useEffect(() => {
     setIsTimelineLoading({ id, isLoading: isQueryLoading });
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -25,7 +25,7 @@ import { Props } from './top_n';
 import { StatefulTopN } from '.';
 import {
   ManageGlobalTimeline,
-  timelineDefaults,
+  getTimelineDefaults,
 } from '../../../timelines/components/manage_timeline';
 import { TimelineId } from '../../../../common/types/timeline';
 
@@ -272,8 +272,7 @@ describe('StatefulTopN', () => {
       filterManager = new FilterManager(mockUiSettingsForFilterManager);
       const manageTimelineForTesting = {
         [TimelineId.active]: {
-          ...timelineDefaults,
-          id: TimelineId.active,
+          ...getTimelineDefaults(TimelineId.active),
           filterManager,
         },
       };
@@ -351,8 +350,7 @@ describe('StatefulTopN', () => {
 
     const manageTimelineForTesting = {
       [TimelineId.active]: {
-        ...timelineDefaults,
-        id: TimelineId.active,
+        ...getTimelineDefaults(TimelineId.active),
         filterManager,
         documentType: 'alerts',
       },

x-pack/plugins/security_solution/public/hosts/pages/navigation/events_query_tab_body.tsx

@@ -5,6 +5,7 @@
  */
 
 import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { TimelineId } from '../../../../common/types/timeline';
 import { StatefulEventsViewer } from '../../../common/components/events_viewer';
 import { HostsComponentsQueryProps } from './types';
@@ -18,6 +19,7 @@ import { MatrixHistogramContainer } from '../../../common/components/matrix_hist
 import * as i18n from '../translations';
 import { HistogramType } from '../../../graphql/types';
 import { useManageTimeline } from '../../../timelines/components/manage_timeline';
+import { getInvestigateInResolverAction } from '../../../timelines/components/timeline/body/helpers';
 
 const EVENTS_HISTOGRAM_ID = 'eventsOverTimeQuery';
 
@@ -57,13 +59,17 @@ export const EventsQueryTabBody = ({
   startDate,
 }: HostsComponentsQueryProps) => {
   const { initializeTimeline } = useManageTimeline();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     initializeTimeline({
       id: TimelineId.hostsPageEvents,
       defaultModel: eventsDefaultModel,
+      timelineRowActions: [
+        getInvestigateInResolverAction({ dispatch, timelineId: TimelineId.hostsPageEvents }),
+      ],
     });
-  }, [initializeTimeline]);
+  }, [dispatch, initializeTimeline]);
 
   useEffect(() => {
     return () => {

x-pack/plugins/security_solution/public/timelines/components/manage_timeline/index.tsx

@@ -6,6 +6,7 @@
 
 import React, { createContext, useCallback, useContext, useReducer } from 'react';
 import { noop } from 'lodash/fp';
+
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FilterManager } from '../../../../../../../src/plugins/data/public/query/filter_manager';
 import { TimelineRowAction } from '../timeline/body/actions';
@@ -22,6 +23,7 @@ interface ManageTimelineInit {
   indexToAdd?: string[] | null;
   loadingText?: string;
   selectAll?: boolean;
+  timelineRowActions: TimelineRowAction[];
   title?: string;
   unit?: (totalCount: number) => string;
 }
@@ -73,19 +75,20 @@ type ActionManageTimeline =
       payload: { filterManager: FilterManager };
     };
 
-export const timelineDefaults = {
+export const getTimelineDefaults = (id: string) => ({
   indexToAdd: null,
   defaultModel: timelineDefaultModel,
   loadingText: i18n.LOADING_EVENTS,
   footerText: i18nF.TOTAL_COUNT_OF_EVENTS,
   documentType: i18nF.TOTAL_COUNT_OF_EVENTS,
   selectAll: false,
+  id,
   isLoading: false,
   queryFields: [],
   timelineRowActions: [],
   title: i18n.EVENTS,
   unit: (n: number) => i18n.UNIT(n),
-};
+});
 const reducerManageTimeline = (
   state: ManageTimelineById,
   action: ActionManageTimeline
@@ -95,7 +98,7 @@ const reducerManageTimeline = (
       return {
         ...state,
         [action.id]: {
-          ...timelineDefaults,
+          ...getTimelineDefaults(action.id),
           ...state[action.id],
           ...action.payload,
         },
@@ -216,8 +219,8 @@ const useTimelineManager = (manageTimelineForTesting?: ManageTimelineById): UseT
       if (state[id] != null) {
         return state[id];
       }
-      initializeTimeline({ id });
-      return { ...timelineDefaults, id };
+      initializeTimeline({ id, timelineRowActions: [] });
+      return getTimelineDefaults(id);
     },
     [initializeTimeline, state]
   );
@@ -236,7 +239,7 @@ const useTimelineManager = (manageTimelineForTesting?: ManageTimelineById): UseT
 };
 
 const init = {
-  getManageTimelineById: (id: string) => ({ ...timelineDefaults, id }),
+  getManageTimelineById: (id: string) => getTimelineDefaults(id),
   getTimelineFilterManager: () => undefined,
   setIndexToAdd: () => undefined,
   isManagedTimeline: () => false,
@@ -245,6 +248,7 @@ const init = {
   setTimelineRowActions: () => noop,
   setTimelineFilterManager: () => noop,
 };
+
 const ManageTimelineContext = createContext<UseTimelineManager>(init);
 
 export const useManageTimeline = () => useContext(ManageTimelineContext);

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

@@ -194,8 +194,7 @@ export const EventColumnView = React.memo<Props>(
             </EventsTdContent>,
           ]
         : grouped.icon;
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [button, ecsData, timelineActions, isPopoverOpen]); // , isPopoverOpen, closePopover, onButtonClick]);
+    }, [button, closePopover, id, onClickCb, ecsData, timelineActions, isPopoverOpen]);
 
     return (
       <EventsTrData data-test-subj="event-column-view">

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

@@ -13,7 +13,7 @@ import { useMountAppended } from '../../../../common/utils/use_mount_appended';
 import { DataProviders } from '.';
 import { DataProvider } from './data_provider';
 import { mockDataProviders } from './mock/mock_data_providers';
-import { ManageGlobalTimeline, timelineDefaults } from '../../manage_timeline';
+import { ManageGlobalTimeline, getTimelineDefaults } from '../../manage_timeline';
 import { FilterManager } from '../../../../../../../../src/plugins/data/public/query/filter_manager';
 import { createKibanaCoreStartMock } from '../../../../common/mock/kibana_core';
 const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
@@ -28,8 +28,7 @@ describe('DataProviders', () => {
     test('renders correctly against snapshot', () => {
       const manageTimelineForTesting = {
         foo: {
-          ...timelineDefaults,
-          id: 'foo',
+          ...getTimelineDefaults('foo'),
           filterManager,
         },
       };

x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.test.tsx

@@ -16,7 +16,7 @@ import { mockDataProviders } from './mock/mock_data_providers';
 import { Providers } from './providers';
 import { DELETE_CLASS_NAME, ENABLE_CLASS_NAME, EXCLUDE_CLASS_NAME } from './provider_item_actions';
 import { useMountAppended } from '../../../../common/utils/use_mount_appended';
-import { ManageGlobalTimeline, timelineDefaults } from '../../manage_timeline';
+import { ManageGlobalTimeline, getTimelineDefaults } from '../../manage_timeline';
 
 const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
 
@@ -27,8 +27,7 @@ describe('Providers', () => {
 
   const manageTimelineForTesting = {
     foo: {
-      ...timelineDefaults,
-      id: 'foo',
+      ...getTimelineDefaults('foo'),
       filterManager,
       isLoading,
     },