[ES|QL] Adds pagination on the history component (elastic#235051)

## Summary

Adds pagination on the history table as it is not so performant for many
items

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <[email protected]>

Author: stratoula

src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx

@@ -48,6 +48,13 @@ const mockHistoryItems = [
   },
 ];
 
+// Add mock data with more than 20 items for pagination testing
+const mockManyHistoryItems = Array.from({ length: 25 }, (_, i) => ({
+  queryString: `FROM index_${i} | WHERE field = "value_${i}"`,
+  timeRan: '',
+  status: 'success' as const,
+}));
+
 describe('Starred and History queries components', () => {
   const services = {
     core: coreMock.createStart(),
@@ -500,5 +507,59 @@ describe('Starred and History queries components', () => {
         expect(screen.queryByTestId('ESQLEditor-history-search')).not.toBeInTheDocument();
       });
     });
+
+    it('should show pagination controls when there are more than 20 items', async () => {
+      mockGetHistoryItems.mockReturnValue(mockManyHistoryItems);
+      mockGetStorageStats.mockReturnValue({
+        queryCount: 25,
+        storageSizeKB: 5,
+        maxStorageLimitKB: 50,
+        storageUsagePercent: 10,
+      });
+
+      render(
+        <KibanaContextProvider services={services}>
+          <HistoryAndStarredQueriesTabs
+            containerCSS={{}}
+            containerWidth={800}
+            onUpdateAndSubmit={jest.fn()}
+            height={400}
+          />
+        </KibanaContextProvider>
+      );
+
+      // Wait for the component to render
+      await waitFor(() => {
+        expect(screen.getByTestId('ESQLEditor-queryHistory')).toBeInTheDocument();
+      });
+
+      // Check that pagination controls are present by looking for EUI pagination class
+      await waitFor(() => {
+        const paginationElement = document.querySelector('.euiPagination');
+        expect(paginationElement).toBeInTheDocument();
+      });
+    });
+
+    it('should not show pagination controls when there are 20 or fewer items', async () => {
+      render(
+        <KibanaContextProvider services={services}>
+          <HistoryAndStarredQueriesTabs
+            containerCSS={{}}
+            containerWidth={800}
+            onUpdateAndSubmit={jest.fn()}
+            height={400}
+          />
+        </KibanaContextProvider>
+      );
+
+      // Wait for the component to render
+      await waitFor(() => {
+        expect(screen.getByTestId('ESQLEditor-queryHistory')).toBeInTheDocument();
+      });
+
+      // Check that pagination controls are not present
+      const paginationElement = document.querySelector('.euiPagination');
+      expect(paginationElement).not.toBeInTheDocument();
+    });
   });
 });

src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx

@@ -32,7 +32,6 @@ import { cssFavoriteHoverWithinEuiTableRow } from '@kbn/content-management-favor
 import { FAVORITES_LIMIT as ESQL_STARRED_QUERIES_LIMIT } from '@kbn/content-management-favorites-common';
 import type { Interpolation, Theme } from '@emotion/react';
 import { css } from '@emotion/react';
-import { useEuiTablePersist } from '@kbn/shared-ux-table-persist';
 import {
   type QueryHistoryItem,
   getHistoryItems,
@@ -253,13 +252,27 @@ export function QueryList({
   const scrollBarStyles = euiScrollBarStyles(theme);
   const [isDiscardQueryModalVisible, setIsDiscardQueryModalVisible] = useState(false);
 
-  const { sorting, onTableChange } = useEuiTablePersist<QueryHistoryItem>({
-    tableId: 'esqlQueryHistory',
-    initialSort: {
-      field: 'timeRan',
-      direction: 'desc',
-    },
-  });
+  // Add simple sorting state that won't interfere with pagination
+  const sorting = useMemo(
+    () => ({
+      sort: {
+        field: 'timeRan' as keyof QueryHistoryItem,
+        direction: 'desc' as const,
+      },
+    }),
+    []
+  );
+
+  // Only show pagination if more than 20 items
+  const pagination = useMemo(() => {
+    if (listItems.length > 20) {
+      return {
+        initialPageSize: 20,
+        showPerPageOptions: false,
+      };
+    }
+    return undefined;
+  }, [listItems.length]);
 
   const actions: Array<CustomItemAction<QueryHistoryItem>> = useMemo(() => {
     return [
@@ -375,7 +388,7 @@ export function QueryList({
         items={listItems}
         columns={columns}
         sorting={sorting}
-        onChange={onTableChange}
+        pagination={pagination}
         css={tableStyling}
         tableLayout={containerWidth < 560 ? 'auto' : 'fixed'}
       />
@@ -536,6 +549,58 @@ export function HistoryAndStarredQueriesTabs({
     );
   }, [starredSearchQuery, starredQueries]);
 
+  // Create stable QueryList components outside of tabs array
+  const historyQueryList = useMemo(
+    () => (
+      <QueryList
+        containerCSS={containerCSS}
+        onUpdateAndSubmit={onUpdateAndSubmit}
+        containerWidth={containerWidth}
+        height={height}
+        listItems={filteredHistoryItems}
+        dataTestSubj="ESQLEditor-queryHistory"
+        tableCaption={i18n.translate('esqlEditor.query.querieshistoryTable', {
+          defaultMessage: 'Queries history table',
+        })}
+        starredQueriesService={starredQueriesService ?? undefined}
+      />
+    ),
+    [
+      containerCSS,
+      onUpdateAndSubmit,
+      containerWidth,
+      height,
+      filteredHistoryItems,
+      starredQueriesService,
+    ]
+  );
+
+  const starredQueryList = useMemo(
+    () => (
+      <QueryList
+        containerCSS={containerCSS}
+        onUpdateAndSubmit={onUpdateAndSubmit}
+        containerWidth={containerWidth}
+        height={height}
+        listItems={filteredStarredQueries}
+        dataTestSubj="ESQLEditor-starredQueries"
+        tableCaption={i18n.translate('esqlEditor.query.starredQueriesTable', {
+          defaultMessage: 'Starred queries table',
+        })}
+        starredQueriesService={starredQueriesService ?? undefined}
+        isStarredTab={true}
+      />
+    ),
+    [
+      containerCSS,
+      onUpdateAndSubmit,
+      containerWidth,
+      height,
+      filteredStarredQueries,
+      starredQueriesService,
+    ]
+  );
+
   const { euiTheme } = useEuiTheme();
   const tabs = useMemo(() => {
     // use typed helper instead of .filter directly to remove falsy values from result type
@@ -549,20 +614,7 @@ export function HistoryAndStarredQueriesTabs({
           defaultMessage: 'Recent',
         }),
         dataTestSubj: 'history-queries-tab',
-        content: (
-          <QueryList
-            containerCSS={containerCSS}
-            onUpdateAndSubmit={onUpdateAndSubmit}
-            containerWidth={containerWidth}
-            height={height}
-            listItems={filteredHistoryItems}
-            dataTestSubj="ESQLEditor-queryHistory"
-            tableCaption={i18n.translate('esqlEditor.query.querieshistoryTable', {
-              defaultMessage: 'Queries history table',
-            })}
-            starredQueriesService={starredQueriesService ?? undefined}
-          />
-        ),
+        content: historyQueryList,
       },
       starredQueriesService !== null && {
         id: HistoryTabId.standardQueries,
@@ -575,33 +627,10 @@ export function HistoryAndStarredQueriesTabs({
             {starredQueries?.length}
           </EuiNotificationBadge>
         ),
-        content: (
-          <QueryList
-            containerCSS={containerCSS}
-            onUpdateAndSubmit={onUpdateAndSubmit}
-            containerWidth={containerWidth}
-            height={height}
-            listItems={filteredStarredQueries}
-            dataTestSubj="ESQLEditor-starredQueries"
-            tableCaption={i18n.translate('esqlEditor.query.starredQueriesTable', {
-              defaultMessage: 'Starred queries table',
-            })}
-            starredQueriesService={starredQueriesService ?? undefined}
-            isStarredTab={true}
-          />
-        ),
+        content: starredQueryList,
       },
     ]);
-  }, [
-    containerCSS,
-    onUpdateAndSubmit,
-    containerWidth,
-    height,
-    filteredHistoryItems,
-    starredQueriesService,
-    starredQueries?.length,
-    filteredStarredQueries,
-  ]);
+  }, [historyQueryList, starredQueriesService, starredQueries?.length, starredQueryList]);
 
   const [selectedTabId, setSelectedTabId] = useRestorableState(
     'historySelectedTabId',

src/platform/packages/private/kbn-esql-editor/tsconfig.json

@@ -32,7 +32,6 @@
     "@kbn/content-management-favorites-common",
     "@kbn/kibana-utils-plugin",
     "@kbn/ui-actions-plugin",
-    "@kbn/shared-ux-table-persist",
     "@kbn/esql-types",
     "@kbn/field-types",
     "@kbn/i18n-react",