fix cypress test + few bugs found

Author: XavierM

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

@@ -10,6 +10,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
 
+import { useDispatch } from 'react-redux';
 import { Direction } from '../../../../common/search_strategy';
 import { BrowserFields, DocValueFields } from '../../containers/source';
 import { useTimelineEvents } from '../../../timelines/containers';
@@ -165,14 +166,15 @@ const EventsViewerComponent: React.FC<Props> = ({
   utilityBar,
   graphEventId,
 }) => {
+  const dispatch = useDispatch();
   const { globalFullScreen, setGlobalFullScreen } = useGlobalFullScreen();
   const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
   const kibana = useKibana();
   const [isQueryLoading, setIsQueryLoading] = useState(false);
 
   useEffect(() => {
-    timelineActions.updateIsLoading({ id, isLoading: isQueryLoading });
-  }, [id, isQueryLoading]);
+    dispatch(timelineActions.updateIsLoading({ id, isLoading: isQueryLoading }));
+  }, [dispatch, id, isQueryLoading]);
 
   const getManageTimeline = useMemo(() => timelineSelectors.getManageTimelineById(), []);
   const unit = useMemo(() => (n: number) => i18n.UNIT(n), []);

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

@@ -66,10 +66,12 @@ const EventsQueryTabBodyComponent: React.FC<HostsComponentsQueryProps> = ({
   const dispatch = useDispatch();
   const { globalFullScreen } = useGlobalFullScreen();
   useEffect(() => {
-    timelineActions.initializeTGridSettings({
-      id: TimelineId.hostsPageEvents,
-      defaultColumns: eventsDefaultModel.columns,
-    });
+    dispatch(
+      timelineActions.initializeTGridSettings({
+        id: TimelineId.hostsPageEvents,
+        defaultColumns: eventsDefaultModel.columns,
+      })
+    );
   }, [dispatch]);
 
   useEffect(() => {

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

@@ -134,6 +134,7 @@ export const EventColumnView = React.memo<Props>(
                   isEventPinned={isEventPinned}
                   isEventViewer={isEventViewer}
                   onRuleChange={onRuleChange}
+                  refetch={refetch}
                   showNotes={showNotes}
                   tabType={tabType}
                   timelineId={timelineId}
@@ -159,6 +160,7 @@ export const EventColumnView = React.memo<Props>(
         onEventDetailsPanelOpened,
         onRowSelected,
         onRuleChange,
+        refetch,
         selectedEventIds,
         showCheckboxes,
         showNotes,

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

@@ -237,9 +237,9 @@ export const EqlTabContentComponent: React.FC<Props> = ({
 
   useEffect(() => {
     dispatch(
-      timelineActions.setTGridIsLoading({
+      timelineActions.updateIsLoading({
         id: timelineId,
-        isTGridLoading: isQueryLoading || loadingSourcerer,
+        isLoading: isQueryLoading || loadingSourcerer,
       })
     );
   }, [loadingSourcerer, timelineId, isQueryLoading, dispatch]);

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

@@ -328,7 +328,7 @@ export const FooterComponent = ({
           dataTestSubj: 'LoadingPanelTimeline',
           height: '35px',
           showBorder: false,
-          text: `${loadingText}...`,
+          text: loadingText,
           width: '100%',
         })}
       </LoadingPanelContainer>

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

@@ -273,9 +273,9 @@ export const QueryTabContentComponent: React.FC<Props> = ({
 
   useEffect(() => {
     dispatch(
-      timelineActions.setTGridIsLoading({
+      timelineActions.updateIsLoading({
         id: timelineId,
-        isTGridLoading: isQueryLoading || loadingSourcerer,
+        isLoading: isQueryLoading || loadingSourcerer,
       })
     );
   }, [loadingSourcerer, timelineId, isQueryLoading, dispatch]);

x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts

@@ -35,7 +35,6 @@ export const {
   setEventsDeleted,
   setEventsLoading,
   setSelected,
-  setTGridIsLoading,
   setTGridSelectAll,
   toggleDetailPanel,
   updateColumns,

x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx

@@ -182,7 +182,7 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
   );
 
   useEffect(() => {
-    dispatch(tGridActions.setTGridIsLoading({ id, isTGridLoading: isQueryLoading }));
+    dispatch(tGridActions.updateIsLoading({ id, isLoading: isQueryLoading }));
   }, [dispatch, id, isQueryLoading]);
 
   const justTitle = useMemo(() => <TitleText data-test-subj="title">{title}</TitleText>, [title]);

x-pack/plugins/timelines/public/components/t_grid/standalone/index.tsx

@@ -157,7 +157,7 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
   } = useDeepEqualSelector((state) => getTGrid(state, STANDALONE_ID ?? ''));
   const unit = useMemo(() => (n: number) => i18n.UNIT(n), []);
   useEffect(() => {
-    dispatch(tGridActions.setTGridIsLoading({ id: STANDALONE_ID, isTGridLoading: isQueryLoading }));
+    dispatch(tGridActions.updateIsLoading({ id: STANDALONE_ID, isLoading: isQueryLoading }));
   }, [dispatch, isQueryLoading]);
 
   const justTitle = useMemo(() => <TitleText data-test-subj="title">{title}</TitleText>, [title]);
@@ -174,12 +174,7 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
   });
 
   const canQueryTimeline = useMemo(
-    () =>
-      combinedQueries != null &&
-      // isLoadingIndexPattern != null &&
-      // !isLoadingIndexPattern &&
-      !isEmpty(start) &&
-      !isEmpty(end),
+    () => combinedQueries != null && !isEmpty(start) && !isEmpty(end),
     [combinedQueries, start, end]
   );
 

x-pack/plugins/timelines/public/mock/global_state.ts

@@ -45,7 +45,6 @@ export const mockGlobalState: TimelineState = {
       defaultColumns: defaultHeaders,
       footerText: 'total of events',
       loadingText: 'loading events',
-      isTGridLoading: false,
       queryFields: [],
       selectAll: false,
       title: 'Events',

x-pack/plugins/timelines/public/store/t_grid/actions.ts

@@ -98,9 +98,6 @@ export const clearEventsDeleted = actionCreator<{
 
 export const initializeTGridSettings = actionCreator<InitialyzeTGridSettings>('INITIALIZE_TGRID');
 
-export const setTGridIsLoading = actionCreator<{ id: string; isTGridLoading: boolean }>(
-  'SET_TGRID_IS_LOADING'
-);
 export const setTGridSelectAll = actionCreator<{ id: string; selectAll: boolean }>(
   'SET_TGRID_SELECT_ALL'
 );

x-pack/plugins/timelines/public/store/t_grid/helpers.ts

@@ -73,7 +73,6 @@ export const createInitTGrid = ({
       ...tGridDefaults,
       ...tGridProps,
       isLoading: false,
-      isTGridLoading: false,
       savedObjectId: null,
       version: null,
     },

x-pack/plugins/timelines/public/store/t_grid/model.ts

@@ -28,7 +28,6 @@ export interface TGridModelSettings {
   filterManager?: FilterManager;
   footerText: string;
   loadingText: string;
-  isTGridLoading: boolean;
   queryFields: string[];
   selectAll: boolean;
   showCheckboxes?: boolean;

x-pack/plugins/timelines/public/store/t_grid/reducer.ts

@@ -16,7 +16,6 @@ import {
   removeColumn,
   setEventsDeleted,
   setEventsLoading,
-  setTGridIsLoading,
   setTGridSelectAll,
   setSelected,
   toggleDetailPanel,
@@ -200,16 +199,6 @@ export const tGridReducer = reducerWithInitialState(initialTGridState)
       tGridSettingsProps,
     }),
   }))
-  .case(setTGridIsLoading, (state, { id, isTGridLoading }) => ({
-    ...state,
-    timelineById: {
-      ...state.timelineById,
-      [id]: {
-        ...state.timelineById[id],
-        isTGridLoading,
-      },
-    },
-  }))
   .case(setTGridSelectAll, (state, { id, selectAll }) => ({
     ...state,
     timelineById: {