#22480: fix the table query pagination showing incorrect pageSize (#22487)

* fix the table query pagination showing incorrect pageSize

* added playwright test

---------

Co-authored-by: Shrushti Polekar <shrushtipolekar@gmail.com>

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/QueryEntity.spec.ts

@@ -281,6 +281,84 @@ test('Verify query duration', async ({ page }) => {
   expect(durationText).toContain('6.199 sec');
 });
 
+test('Verify Query Pagination', async ({ page, browser }) => {
+  test.slow(true);
+
+  const { apiContext, afterAction } = await createNewPage(browser);
+
+  Array.from({ length: 26 }).forEach(async (_, index) => {
+    await table1.createQuery(
+      apiContext,
+      `select * from table ${table1.entity.name} ${index}`
+    );
+  });
+
+  await redirectToHomePage(page);
+  await table1.visitEntityPageWithCustomSearchBox(page);
+  const queryResponse = page.waitForResponse(
+    '/api/v1/search/query?q=*&index=query_search_index*'
+  );
+  await page.click(`[data-testid="table_queries"]`);
+  await queryResponse;
+
+  await page.waitForSelector('[data-testid="loader"]', {
+    state: 'detached',
+  });
+
+  await expect(page.getByTestId('previous')).toBeDisabled();
+
+  const nextResponse = page.waitForResponse(
+    '/api/v1/search/query?q=*&index=query_search_index&from=15&size=15**'
+  );
+  await page.click('[data-testid="next"]');
+  await nextResponse;
+
+  await page.waitForSelector('[data-testid="loader"]', {
+    state: 'detached',
+  });
+
+  await expect(page.getByTestId('next')).toBeDisabled();
+
+  const previousResponse = page.waitForResponse(
+    '/api/v1/search/query?q=*&index=query_search_index&from=0&size=15**'
+  );
+  await page.click('[data-testid="previous"]');
+  await previousResponse;
+
+  await page.waitForSelector('[data-testid="loader"]', {
+    state: 'detached',
+  });
+
+  await expect(page.getByTestId('previous')).toBeDisabled();
+
+  await expect(page.getByText('15 / page')).toBeVisible();
+
+  // Change page size to 25
+  await page.locator('.ant-pagination-options-size-changer').click();
+  const pageSizeResponse = page.waitForResponse(
+    '/api/v1/search/query?q=*&index=query_search_index&from=0&size=25&query_filter=**'
+  );
+  await page.getByTitle('25 / Page').click();
+  await pageSizeResponse;
+
+  await page.waitForSelector('[data-testid="loader"]', {
+    state: 'detached',
+  });
+
+  await expect(page.getByText('25 / page')).toBeVisible();
+
+  // check if the page size list is same as the page size list in the dropdown
+  await page.locator('.ant-pagination-options-size-changer').click();
+
+  // This is to check in the options only 3 sizes are visible.
+  // 15, 25, 50  Derived from locator which is overall and not contain to check the exact text
+  await expect(page.locator('.ant-pagination-options')).toHaveText(
+    '25 / page15255015 / page25 / page50 / page'
+  );
+
+  await afterAction();
+});
+
 test.afterAll(async ({ browser }) => {
   const { afterAction, apiContext } = await createNewPage(browser);
   for (const entity of entityData) {

openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.test.tsx

@@ -14,11 +14,13 @@
 import {
   findAllByText,
   findByTestId,
+  fireEvent,
   render,
   screen,
 } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { SearchIndex } from '../../../enums/search.enum';
+import { usePaging } from '../../../hooks/paging/usePaging';
 import {
   MOCK_QUERIES,
   MOCK_QUERIES_ES_DATA,
@@ -39,6 +41,16 @@ jest.mock('./TableQueryRightPanel/TableQueryRightPanel.component', () => {
     .fn()
     .mockImplementation(() => <div>TableQueryRightPanel.component</div>);
 });
+
+jest.mock('../../PaginationComponent/PaginationComponent', () => {
+  return jest.fn().mockImplementation(({ onChange }) => (
+    <div>
+      PaginationComponent
+      <button onClick={() => onChange(1, 25)}>PaginationComponentButton</button>
+    </div>
+  ));
+});
+
 jest.mock('../../SearchDropdown/SearchDropdown', () => {
   return jest
     .fn()
@@ -81,6 +93,21 @@ jest.mock('../../../rest/miscAPI', () => ({
     .mockImplementation(() => Promise.resolve({ data: [] })),
 }));
 
+jest.mock('../../../hooks/paging/usePaging', () => ({
+  usePaging: jest.fn().mockReturnValue({
+    currentPage: 1,
+    pageSize: 25,
+    paging: {
+      currentPage: 1,
+      pageSize: 25,
+    },
+    showPagination: true,
+    handlePageChange: jest.fn(),
+    handlePagingChange: jest.fn(),
+    handlePageSizeChange: jest.fn(),
+  }),
+}));
+
 describe('Test TableQueries Component', () => {
   it('Check if TableQueries component has all child elements', async () => {
     render(<TableQueries {...mockTableQueriesProp} />, {
@@ -132,6 +159,8 @@ describe('Test TableQueries Component', () => {
   });
 
   it('If paging count is more than 15, pagination should be visible', async () => {
+    const mockUsePaging = usePaging as jest.Mock;
+
     (searchQuery as jest.Mock).mockImplementationOnce(() =>
       Promise.resolve({
         hits: { total: { value: 16 }, hits: MOCK_QUERIES_ES_DATA },
@@ -140,8 +169,15 @@ describe('Test TableQueries Component', () => {
     render(<TableQueries {...mockTableQueriesProp} />, {
       wrapper: MemoryRouter,
     });
-    const pagingComponent = await screen.findByTestId('query-pagination');
+    const pagingComponent = await screen.findByText('PaginationComponent');
 
     expect(pagingComponent).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('PaginationComponentButton'));
+
+    const mockHandlePageSizeChange =
+      mockUsePaging.mock.results[0].value.handlePageSizeChange;
+
+    expect(mockHandlePageSizeChange).toHaveBeenCalledWith(25);
   });
 });

openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.tsx

@@ -431,10 +431,11 @@ const TableQueries: FC<TableQueriesProp> = ({
     }
   };
 
-  const pagingHandler = (currentPage: number) => {
+  const pagingHandler = (currentPage: number, pageSize: number) => {
     fetchFilteredQueries({
       pageNumber: currentPage,
     });
+    handlePageSizeChange(pageSize);
   };
 
   const handleSortFieldChange = (value: string) => {
@@ -656,7 +657,6 @@ const TableQueries: FC<TableQueriesProp> = ({
                           pageSize={pageSize}
                           total={paging.total}
                           onChange={pagingHandler}
-                          onShowSizeChange={handlePageSizeChange}
                         />
                       </Col>
                     )}