From 93759edb5ea7190ff2a46cfe357165a5637312f9 Mon Sep 17 00:00:00 2001 From: Stratoula Date: Mon, 15 Sep 2025 12:31:24 +0200 Subject: [PATCH 1/2] [ES|QL] Adds pagination on the history component --- .../history_starred_queries.test.tsx | 61 +++++++++ .../editor_footer/history_starred_queries.tsx | 125 +++++++++++------- 2 files changed, 138 insertions(+), 48 deletions(-) diff --git a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx b/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx index 319e2ced12a1c..3467b78204e3e 100644 --- a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx +++ b/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( + + + + ); + + // 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( + + + + ); + + // 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(); + }); }); }); diff --git a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx b/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx index 187fe581cfe2a..96bbcb6035d7f 100644 --- a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx +++ b/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx @@ -34,7 +34,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, @@ -261,13 +260,27 @@ export function QueryList({ const scrollBarStyles = euiScrollBarStyles(theme); const [isDiscardQueryModalVisible, setIsDiscardQueryModalVisible] = useState(false); - const { sorting, onTableChange } = useEuiTablePersist({ - 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> = useMemo(() => { return [ @@ -383,7 +396,7 @@ export function QueryList({ items={listItems} columns={columns} sorting={sorting} - onChange={onTableChange} + pagination={pagination} css={tableStyling} tableLayout={containerWidth < 560 ? 'auto' : 'fixed'} /> @@ -544,6 +557,58 @@ export function HistoryAndStarredQueriesTabs({ ); }, [starredSearchQuery, starredQueries]); + // Create stable QueryList components outside of tabs array + const historyQueryList = useMemo( + () => ( + + ), + [ + containerCSS, + onUpdateAndSubmit, + containerWidth, + height, + filteredHistoryItems, + starredQueriesService, + ] + ); + + const starredQueryList = useMemo( + () => ( + + ), + [ + 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 @@ -557,20 +622,7 @@ export function HistoryAndStarredQueriesTabs({ defaultMessage: 'Recent', }), dataTestSubj: 'history-queries-tab', - content: ( - - ), + content: historyQueryList, }, starredQueriesService !== null && { id: HistoryTabId.standardQueries, @@ -583,33 +635,10 @@ export function HistoryAndStarredQueriesTabs({ {starredQueries?.length} ), - content: ( - - ), + content: starredQueryList, }, ]); - }, [ - containerCSS, - onUpdateAndSubmit, - containerWidth, - height, - filteredHistoryItems, - starredQueriesService, - starredQueries?.length, - filteredStarredQueries, - ]); + }, [historyQueryList, starredQueriesService, starredQueries?.length, starredQueryList]); const [selectedTabId, setSelectedTabId] = useRestorableState( 'historySelectedTabId', From cb47c6fee5408865c92844c2867c243343a399b4 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 15 Sep 2025 10:44:55 +0000 Subject: [PATCH 2/2] [CI] Auto-commit changed files from 'node scripts/yarn_deduplicate' --- src/platform/packages/private/kbn-esql-editor/tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platform/packages/private/kbn-esql-editor/tsconfig.json b/src/platform/packages/private/kbn-esql-editor/tsconfig.json index 68683c423be5c..dd94fa14d9e20 100644 --- a/src/platform/packages/private/kbn-esql-editor/tsconfig.json +++ b/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",