[Security Solution] Fix timeline dynamic batching (#204034)

## Summary

Handles :

### Issue with Batches
- #201405
- Timeline had a bug where if users fetched multiple batches and then if
user adds a new column, the value of this new columns will only be
fetched for the latest batch and not old batches.
- This PR fixes that ✅ by cumulatively fetching the data for old batches
till current batch `iff a new column has been added`.
- For example, if user has already fetched the 3rd batch, data for
1st,2nd and 3rd will be fetched together when a column has been added,
otherwise, data will be fetched incrementally.

### Issue with Elastic search limit

- Elastic search has a limit of 10K hits at max but we throw error at
10K which should be allowed.
    - Error should be thrown at anything `>10K`. 10001 for example.
    - ✅  This PR fixes that just for timeline by allowing 10K hits.

### Removal of obsolete code

Below files related to old Timeline code are removed as well:
-
x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.test.tsx
-
x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx

---------

Co-authored-by: Philippe Oberti <[email protected]>
(cherry picked from commit 088169f)

# Conflicts:
#	packages/kbn-babel-preset/styled_components_files.js
#	x-pack/plugins/security_solution/public/common/mock/mock_timeline_search_service.ts
#	x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.test.tsx
#	x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx
#	x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/index.tsx
#	x-pack/solutions/security/plugins/security_solution/public/timelines/containers/index.test.tsx

x-pack/plugins/security_solution/common/types/timeline/store.ts

@@ -72,8 +72,8 @@ export type OnColumnRemoved = (columnId: ColumnId) => void;
 
 export type OnColumnResized = ({ columnId, delta }: { columnId: ColumnId; delta: number }) => void;
 
-/** Invoked when a user clicks to load more item */
-export type OnFetchMoreRecords = (nextPage: number) => void;
+/** Invoked when a user clicks to load next batch */
+export type OnFetchMoreRecords = VoidFunction;
 
 /** Invoked when a user checks/un-checks a row */
 export type OnRowSelected = ({

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

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { mockTimelineData } from './mock_timeline_data';
+
+const mockEvents = structuredClone(mockTimelineData);
+
+/*
+ * This helps to mock `data.search.search` method to mock the timeline data
+ * */
+export const getMockTimelineSearchSubscription = () => {
+  const mockSearchWithArgs = jest.fn();
+
+  const mockTimelineSearchSubscription = jest.fn().mockImplementation((args) => {
+    mockSearchWithArgs(args);
+    return {
+      subscribe: jest.fn().mockImplementation(({ next }) => {
+        const start = args.pagination.activePage * args.pagination.querySize;
+        const end = start + args.pagination.querySize;
+        const timelineOut = setTimeout(() => {
+          next({
+            isRunning: false,
+            isPartial: false,
+            inspect: {
+              dsl: [],
+              response: [],
+            },
+            edges: mockEvents.map((item) => ({ node: item })).slice(start, end),
+            pageInfo: {
+              activePage: args.pagination.activePage,
+              querySize: args.pagination.querySize,
+            },
+            rawResponse: {},
+            totalCount: mockEvents.length,
+          });
+        }, 50);
+        return {
+          unsubscribe: jest.fn(() => {
+            clearTimeout(timelineOut);
+          }),
+        };
+      }),
+    };
+  });
+
+  return { mockTimelineSearchSubscription, mockSearchWithArgs };
+};

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

@@ -105,7 +105,7 @@ export const EqlTabContentComponent: React.FC<Props> = ({
     [end, isBlankTimeline, loadingSourcerer, start]
   );
 
-  const [dataLoadingState, { events, inspect, totalCount, loadPage, refreshedAt, refetch }] =
+  const [dataLoadingState, { events, inspect, totalCount, loadNextBatch, refreshedAt, refetch }] =
     useTimelineEvents({
       dataViewId,
       endDate: end,
@@ -298,7 +298,7 @@ export const EqlTabContentComponent: React.FC<Props> = ({
           refetch={refetch}
           dataLoadingState={dataLoadingState}
           totalCount={isBlankTimeline ? 0 : totalCount}
-          onFetchMoreRecords={loadPage}
+          onFetchMoreRecords={loadNextBatch}
           activeTab={activeTab}
           updatedAt={refreshedAt}
           isTextBasedQuery={false}

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

@@ -138,7 +138,7 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
   );
   const { augmentedColumnHeaders } = useTimelineColumns(columns);
 
-  const [queryLoadingState, { events, totalCount, loadPage, refreshedAt, refetch }] =
+  const [queryLoadingState, { events, totalCount, loadNextBatch, refreshedAt, refetch }] =
     useTimelineEvents({
       endDate: '',
       id: `pinned-${timelineId}`,
@@ -285,7 +285,7 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
         refetch={refetch}
         dataLoadingState={queryLoadingState}
         totalCount={totalCount}
-        onFetchMoreRecords={loadPage}
+        onFetchMoreRecords={loadNextBatch}
         activeTab={TimelineTabs.pinned}
         updatedAt={refreshedAt}
         isTextBasedQuery={false}