Fix 16805: pagination dropdown issue (#18611)

* fix: pagination dropdown

* fix: remove handlePageChange dependency

* fix: api url for database schema response

---------

Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>

openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts

@@ -1235,7 +1235,7 @@ export const softDeleteEntity = async (
   if (endPoint === EntityTypeEndpoint.Table) {
     await page.click('[data-testid="breadcrumb-link"]:last-child');
     const deletedTableResponse = page.waitForResponse(
-      '/api/v1/tables?databaseSchema=*'
+      '/api/v1/tables?*databaseSchema=*'
     );
     await page.click('[data-testid="show-deleted"]');
     await deletedTableResponse;

openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionPage.tsx

@@ -15,7 +15,7 @@ import { Col, Row, Skeleton, Tabs, TabsProps } from 'antd';
 import { AxiosError } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
 import { isEmpty, isUndefined } from 'lodash';
-import { EntityTags, PagingResponse } from 'Models';
+import { EntityTags } from 'Models';
 import React, {
   FunctionComponent,
   useCallback,
@@ -46,6 +46,7 @@ import {
   getEntityDetailsPath,
   getVersionPath,
   INITIAL_PAGING_VALUE,
+  PAGE_SIZE,
   ROUTES,
 } from '../../constants/constants';
 import { FEED_COUNT_INITIAL_DATA } from '../../constants/entity.constants';
@@ -69,6 +70,7 @@ import { APIEndpoint } from '../../generated/entity/data/apiEndpoint';
 import { ThreadType } from '../../generated/entity/feed/thread';
 import { Include } from '../../generated/type/include';
 import { TagLabel } from '../../generated/type/tagLabel';
+import { usePaging } from '../../hooks/paging/usePaging';
 import { useFqn } from '../../hooks/useFqn';
 import { FeedCounts } from '../../interface/feed.interface';
 import {
@@ -99,6 +101,9 @@ const APICollectionPage: FunctionComponent = () => {
   const { postFeed, deleteFeed, updateFeed } = useActivityFeedProvider();
   const { t } = useTranslation();
   const { getEntityPermissionByFqn } = usePermissionProvider();
+  const pagingInfo = usePaging(PAGE_SIZE);
+
+  const { paging, pageSize, handlePagingChange } = pagingInfo;
 
   const { tab: activeTab = EntityTabs.API_ENDPOINT } =
     useParams<{ tab: EntityTabs }>();
@@ -112,12 +117,7 @@ const APICollectionPage: FunctionComponent = () => {
   const [apiCollection, setAPICollection] = useState<APICollection>(
     {} as APICollection
   );
-  const [apiEndpoints, setAPIEndpoints] = useState<
+  const [apiEndpoints, setAPIEndpoints] = useState<Array<APIEndpoint>>([]);
-    PagingResponse<APIEndpoint[]>
-  >({
-    data: [],
-    paging: { total: 0 },
-  });
   const [apiEndpointsLoading, setAPIEndpointsLoading] = useState<boolean>(true);
   const [isAPICollectionLoading, setIsAPICollectionLoading] =
     useState<boolean>(true);
@@ -239,7 +239,8 @@ const APICollectionPage: FunctionComponent = () => {
           service: apiCollection?.service?.fullyQualifiedName ?? '',
           include: showDeletedEndpoints ? Include.Deleted : Include.NonDeleted,
         });
-        setAPIEndpoints(res);
+        setAPIEndpoints(res.data);
+        handlePagingChange(res.paging);
       } catch (err) {
         showErrorToast(err as AxiosError);
       } finally {
@@ -454,13 +455,13 @@ const APICollectionPage: FunctionComponent = () => {
       if (cursorType) {
         getAPICollectionEndpoints({
           paging: {
-            [cursorType]: apiEndpoints.paging[cursorType],
+            [cursorType]: paging[cursorType],
           },
         });
       }
       setCurrentEndpointsPage(currentPage);
     },
-    [apiEndpoints, getAPICollectionEndpoints]
+    [paging, getAPICollectionEndpoints]
   );
 
   const versionHandler = useCallback(() => {
@@ -503,13 +504,16 @@ const APICollectionPage: FunctionComponent = () => {
 
   useEffect(() => {
     if (viewAPICollectionPermission && decodedAPICollectionFQN) {
-      getAPICollectionEndpoints();
+      getAPICollectionEndpoints({
+        paging: { limit: pageSize },
+      });
     }
   }, [
     showDeletedEndpoints,
     decodedAPICollectionFQN,
     viewAPICollectionPermission,
     apiCollection,
+    pageSize,
   ]);
 
   const {
@@ -556,7 +560,7 @@ const APICollectionPage: FunctionComponent = () => {
     {
       label: (
         <TabsLabel
-          count={apiEndpoints.paging.total}
+          count={paging.total}
           id={EntityTabs.API_ENDPOINT}
           isActive={activeTab === EntityTabs.API_ENDPOINT}
           name={t('label.endpoint-plural')}
@@ -580,6 +584,7 @@ const APICollectionPage: FunctionComponent = () => {
                       editDescriptionPermission={editDescriptionPermission}
                       endpointPaginationHandler={endpointPaginationHandler}
                       isEdit={isEdit}
+                      pagingInfo={pagingInfo}
                       showDeletedEndpoints={showDeletedEndpoints}
                       onCancel={onEditCancel}
                       onDescriptionEdit={onDescriptionEdit}

openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionVersionPage.tsx

@@ -15,7 +15,6 @@ import { Col, Row, Space, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { isEmpty, isUndefined, toString } from 'lodash';
-import { PagingResponse } from 'Models';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
@@ -34,6 +33,7 @@ import {
   getEntityDetailsPath,
   getVersionPath,
   INITIAL_PAGING_VALUE,
+  PAGE_SIZE,
 } from '../../constants/constants';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import {
@@ -52,6 +52,7 @@ import { ChangeDescription } from '../../generated/entity/type';
 import { EntityHistory } from '../../generated/type/entityHistory';
 import { Include } from '../../generated/type/include';
 import { TagSource } from '../../generated/type/tagLabel';
+import { usePaging } from '../../hooks/paging/usePaging';
 import { useFqn } from '../../hooks/useFqn';
 import {
   getApiCollectionByFQN,
@@ -83,6 +84,10 @@ const APICollectionVersionPage = () => {
 
   const { fqn: decodedEntityFQN } = useFqn();
 
+  const pagingInfo = usePaging(PAGE_SIZE);
+
+  const { paging, pageSize, handlePagingChange } = pagingInfo;
+
   const [collectionPermissions, setCollectionPermissions] =
     useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -99,12 +104,7 @@ const APICollectionVersionPage = () => {
 
   const [apiEndpointsLoading, setAPIEndpointsLoading] = useState<boolean>(true);
 
-  const [apiEndpoints, setAPIEndpoints] = useState<
+  const [apiEndpoints, setAPIEndpoints] = useState<Array<APIEndpoint>>([]);
-    PagingResponse<APIEndpoint[]>
-  >({
-    data: [],
-    paging: { total: 0 },
-  });
 
   const [currentEndpointsPage, setCurrentEndpointsPage] =
     useState<number>(INITIAL_PAGING_VALUE);
@@ -182,7 +182,8 @@ const APICollectionVersionPage = () => {
           service: collection?.service?.fullyQualifiedName ?? '',
           include: Include.All,
         });
-        setAPIEndpoints(res);
+        setAPIEndpoints(res.data);
+        handlePagingChange(res.paging);
       } catch (err) {
         showErrorToast(err as AxiosError);
       } finally {
@@ -203,13 +204,15 @@ const APICollectionVersionPage = () => {
           );
 
           setCurrentVersionData(response);
-          await getAPICollectionEndpoints();
+          await getAPICollectionEndpoints({
+            paging: { limit: pageSize },
+          });
         }
       } finally {
         setIsVersionDataLoading(false);
       }
     },
-    [viewVersionPermission, version, getAPICollectionEndpoints]
+    [viewVersionPermission, version, getAPICollectionEndpoints, pageSize]
   );
 
   const handleTabChange = (activeKey: string) => {
@@ -228,13 +231,13 @@ const APICollectionVersionPage = () => {
       if (cursorType) {
         getAPICollectionEndpoints({
           paging: {
-            [cursorType]: apiEndpoints.paging[cursorType],
+            [cursorType]: paging[cursorType],
           },
         });
       }
       setCurrentEndpointsPage(currentPage);
     },
-    [apiEndpoints, getAPICollectionEndpoints]
+    [paging, getAPICollectionEndpoints]
   );
 
   const { versionHandler, backHandler } = useMemo(
@@ -268,7 +271,7 @@ const APICollectionVersionPage = () => {
       {
         label: (
           <TabsLabel
-            count={apiEndpoints.paging.total}
+            count={paging.total}
             id={EntityTabs.API_ENDPOINT}
             isActive={tab === EntityTabs.API_ENDPOINT}
             name={t('label.endpoint-plural')}
@@ -286,6 +289,7 @@ const APICollectionVersionPage = () => {
                 currentEndpointsPage={currentEndpointsPage}
                 description={description}
                 endpointPaginationHandler={endpointPaginationHandler}
+                pagingInfo={pagingInfo}
               />
             </Col>
             <Col
@@ -432,7 +436,7 @@ const APICollectionVersionPage = () => {
     if (!isUndefined(collection)) {
       fetchCurrentVersionData(collection);
     }
-  }, [version, collection]);
+  }, [version, collection, pageSize]);
 
   return (
     <PageLayoutV1

openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APIEndpointsTab.tsx

@@ -13,8 +13,7 @@
 
 import { Col, Row, Switch, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { isEmpty } from 'lodash';
+import { isEmpty, isUndefined } from 'lodash';
-import { PagingResponse } from 'Models';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -24,11 +23,12 @@ import NextPrevious from '../../components/common/NextPrevious/NextPrevious';
 import { NextPreviousProps } from '../../components/common/NextPrevious/NextPrevious.interface';
 import RichTextEditorPreviewer from '../../components/common/RichTextEditor/RichTextEditorPreviewer';
 import TableAntd from '../../components/common/Table/Table';
-import { NO_DATA, PAGE_SIZE } from '../../constants/constants';
+import { NO_DATA } from '../../constants/constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityType } from '../../enums/entity.enum';
 import { APICollection } from '../../generated/entity/data/apiCollection';
 import { APIEndpoint } from '../../generated/entity/data/apiEndpoint';
+import { UsePagingInterface } from '../../hooks/paging/usePaging';
 import entityUtilClassBase from '../../utils/EntityUtilClassBase';
 import { getEntityName } from '../../utils/EntityUtils';
 
@@ -39,7 +39,7 @@ interface APIEndpointsTabProps {
   editDescriptionPermission?: boolean;
   isEdit?: boolean;
   showDeletedEndpoints?: boolean;
-  apiEndpoints: PagingResponse<APIEndpoint[]>;
+  apiEndpoints: APIEndpoint[];
   currentEndpointsPage: number;
   endpointPaginationHandler: NextPreviousProps['pagingHandler'];
   onCancel?: () => void;
@@ -48,6 +48,7 @@ interface APIEndpointsTabProps {
   onThreadLinkSelect?: (link: string) => void;
   onShowDeletedEndpointsChange?: (value: boolean) => void;
   isVersionView?: boolean;
+  pagingInfo: UsePagingInterface;
 }
 
 function APIEndpointsTab({
@@ -66,6 +67,7 @@ function APIEndpointsTab({
   showDeletedEndpoints = false,
   onShowDeletedEndpointsChange,
   isVersionView = false,
+  pagingInfo,
 }: Readonly<APIEndpointsTabProps>) {
   const { t } = useTranslation();
 
@@ -124,7 +126,7 @@ function APIEndpointsTab({
             description={description}
             entityFqn={apiCollectionDetails.fullyQualifiedName}
             entityType={EntityType.API_COLLECTION}
-            isDescriptionExpanded={isEmpty(apiEndpoints.data)}
+            isDescriptionExpanded={isEmpty(apiEndpoints)}
             showActions={false}
           />
         ) : (
@@ -134,7 +136,7 @@ function APIEndpointsTab({
             entityName={getEntityName(apiCollectionDetails)}
             entityType={EntityType.API_COLLECTION}
             hasEditAccess={editDescriptionPermission}
-            isDescriptionExpanded={isEmpty(apiEndpoints.data)}
+            isDescriptionExpanded={isEmpty(apiEndpoints)}
             isEdit={isEdit}
             showActions={!apiCollectionDetails.deleted}
             onCancel={onCancel}
@@ -166,7 +168,7 @@ function APIEndpointsTab({
           bordered
           columns={tableColumn}
           data-testid="databaseSchema-tables"
-          dataSource={apiEndpoints.data}
+          dataSource={apiEndpoints}
           loading={apiEndpointsLoading}
           locale={{
             emptyText: (
@@ -181,14 +183,15 @@ function APIEndpointsTab({
           size="small"
         />
       </Col>
-      {apiEndpoints.paging.total > PAGE_SIZE && apiEndpoints.data.length > 0 && (
+      {!isUndefined(pagingInfo) && pagingInfo.showPagination && (
         <Col span={24}>
           <NextPrevious
             currentPage={currentEndpointsPage}
             isLoading={apiEndpointsLoading}
-            pageSize={PAGE_SIZE}
+            pageSize={pagingInfo.pageSize}
-            paging={apiEndpoints.paging}
+            paging={pagingInfo.paging}
             pagingHandler={endpointPaginationHandler}
+            onShowSizeChange={pagingInfo.handlePageSizeChange}
           />
         </Col>
       )}

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx

@@ -15,7 +15,7 @@ import { Col, Row, Skeleton, Tabs, TabsProps } from 'antd';
 import { AxiosError } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
 import { isEmpty, isUndefined } from 'lodash';
-import { EntityTags, PagingResponse } from 'Models';
+import { EntityTags } from 'Models';
 import React, {
   FunctionComponent,
   useCallback,
@@ -40,6 +40,7 @@ import {
   getEntityDetailsPath,
   getVersionPath,
   INITIAL_PAGING_VALUE,
+  PAGE_SIZE,
   ROUTES,
 } from '../../constants/constants';
 import { FEED_COUNT_INITIAL_DATA } from '../../constants/entity.constants';
@@ -62,6 +63,7 @@ import { Table } from '../../generated/entity/data/table';
 import { ThreadType } from '../../generated/entity/feed/thread';
 import { Include } from '../../generated/type/include';
 import { TagLabel } from '../../generated/type/tagLabel';
+import { usePaging } from '../../hooks/paging/usePaging';
 import { useFqn } from '../../hooks/useFqn';
 import { FeedCounts } from '../../interface/feed.interface';
 import {
@@ -90,6 +92,9 @@ const DatabaseSchemaPage: FunctionComponent = () => {
   const { postFeed, deleteFeed, updateFeed } = useActivityFeedProvider();
   const { t } = useTranslation();
   const { getEntityPermissionByFqn } = usePermissionProvider();
+  const pagingInfo = usePaging(PAGE_SIZE);
+
+  const { paging, pageSize, handlePagingChange } = pagingInfo;
 
   const { tab: activeTab = EntityTabs.TABLE } =
     useParams<{ tab: EntityTabs }>();
@@ -103,10 +108,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
   const [databaseSchema, setDatabaseSchema] = useState<DatabaseSchema>(
     {} as DatabaseSchema
   );
-  const [tableData, setTableData] = useState<PagingResponse<Table[]>>({
+  const [tableData, setTableData] = useState<Array<Table>>([]);
-    data: [],
-    paging: { total: 0 },
-  });
   const [tableDataLoading, setTableDataLoading] = useState<boolean>(true);
   const [isSchemaDetailsLoading, setIsSchemaDetailsLoading] =
     useState<boolean>(true);
@@ -240,7 +242,8 @@ const DatabaseSchemaPage: FunctionComponent = () => {
           databaseSchema: decodedDatabaseSchemaFQN,
           include: showDeletedTables ? Include.Deleted : Include.NonDeleted,
         });
-        setTableData(res);
+        setTableData(res.data);
+        handlePagingChange(res.paging);
       } catch (err) {
         showErrorToast(err as AxiosError);
       } finally {
@@ -452,11 +455,11 @@ const DatabaseSchemaPage: FunctionComponent = () => {
   const tablePaginationHandler = useCallback(
     ({ cursorType, currentPage }: PagingHandlerParams) => {
       if (cursorType) {
-        getSchemaTables({ [cursorType]: tableData.paging[cursorType] });
+        getSchemaTables({ [cursorType]: paging[cursorType] });
       }
       setCurrentTablesPage(currentPage);
     },
-    [tableData, getSchemaTables]
+    [paging, getSchemaTables]
   );
 
   const versionHandler = useCallback(() => {
@@ -513,13 +516,14 @@ const DatabaseSchemaPage: FunctionComponent = () => {
 
   useEffect(() => {
     if (viewDatabaseSchemaPermission && decodedDatabaseSchemaFQN) {
-      getSchemaTables();
+      getSchemaTables({ limit: pageSize });
     }
   }, [
     showDeletedTables,
     decodedDatabaseSchemaFQN,
     viewDatabaseSchemaPermission,
     deleted,
+    pageSize,
   ]);
 
   const {
@@ -593,6 +597,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
         getEntityFeedCount,
         fetchDatabaseSchemaDetails,
         handleFeedCount,
+        pagingInfo,
       }),
     [
       feedCount,
@@ -622,6 +627,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
       getEntityFeedCount,
       fetchDatabaseSchemaDetails,
       handleFeedCount,
+      pagingInfo,
     ]
   );
 

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/SchemaTablesTab.tsx

@@ -13,8 +13,7 @@
 
 import { Col, Row, Switch, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { isEmpty } from 'lodash';
+import { isEmpty, isUndefined } from 'lodash';
-import { PagingResponse } from 'Models';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -24,11 +23,11 @@ import NextPrevious from '../../components/common/NextPrevious/NextPrevious';
 import { NextPreviousProps } from '../../components/common/NextPrevious/NextPrevious.interface';
 import RichTextEditorPreviewer from '../../components/common/RichTextEditor/RichTextEditorPreviewer';
 import TableAntd from '../../components/common/Table/Table';
-import { PAGE_SIZE } from '../../constants/constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { EntityType } from '../../enums/entity.enum';
 import { DatabaseSchema } from '../../generated/entity/data/databaseSchema';
 import { Table } from '../../generated/entity/data/table';
+import { UsePagingInterface } from '../../hooks/paging/usePaging';
 import entityUtilClassBase from '../../utils/EntityUtilClassBase';
 import { getEntityName } from '../../utils/EntityUtils';
 
@@ -39,7 +38,7 @@ interface SchemaTablesTabProps {
   editDescriptionPermission?: boolean;
   isEdit?: boolean;
   showDeletedTables?: boolean;
-  tableData: PagingResponse<Table[]>;
+  tableData: Table[];
   currentTablesPage: number;
   tablePaginationHandler: NextPreviousProps['pagingHandler'];
   onCancel?: () => void;
@@ -48,6 +47,7 @@ interface SchemaTablesTabProps {
   onThreadLinkSelect?: (link: string) => void;
   onShowDeletedTablesChange?: (value: boolean) => void;
   isVersionView?: boolean;
+  pagingInfo: UsePagingInterface;
 }
 
 function SchemaTablesTab({
@@ -66,6 +66,7 @@ function SchemaTablesTab({
   showDeletedTables = false,
   onShowDeletedTablesChange,
   isVersionView = false,
+  pagingInfo,
 }: Readonly<SchemaTablesTabProps>) {
   const { t } = useTranslation();
 
@@ -115,7 +116,7 @@ function SchemaTablesTab({
             description={description}
             entityFqn={databaseSchemaDetails.fullyQualifiedName}
             entityType={EntityType.DATABASE_SCHEMA}
-            isDescriptionExpanded={isEmpty(tableData.data)}
+            isDescriptionExpanded={isEmpty(tableData)}
             showActions={false}
           />
         ) : (
@@ -125,7 +126,7 @@ function SchemaTablesTab({
             entityName={getEntityName(databaseSchemaDetails)}
             entityType={EntityType.DATABASE_SCHEMA}
             hasEditAccess={editDescriptionPermission}
-            isDescriptionExpanded={isEmpty(tableData.data)}
+            isDescriptionExpanded={isEmpty(tableData)}
             isEdit={isEdit}
             showActions={!databaseSchemaDetails.deleted}
             onCancel={onCancel}
@@ -157,7 +158,7 @@ function SchemaTablesTab({
           bordered
           columns={tableColumn}
           data-testid="databaseSchema-tables"
-          dataSource={tableData.data}
+          dataSource={tableData}
           loading={tableDataLoading}
           locale={{
             emptyText: (
@@ -172,14 +173,15 @@ function SchemaTablesTab({
           size="small"
         />
       </Col>
-      {tableData.paging.total > PAGE_SIZE && tableData.data.length > 0 && (
+      {!isUndefined(pagingInfo) && pagingInfo.showPagination && (
         <Col span={24}>
           <NextPrevious
             currentPage={currentTablesPage}
             isLoading={tableDataLoading}
-            pageSize={PAGE_SIZE}
+            pageSize={pagingInfo.pageSize}
-            paging={tableData.paging}
+            paging={pagingInfo.paging}
             pagingHandler={tablePaginationHandler}
+            onShowSizeChange={pagingInfo.handlePageSizeChange}
           />
         </Col>
       )}

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaVersionPage/DatabaseSchemaVersionPage.tsx

@@ -14,7 +14,6 @@
 import { Col, Row, Space, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import { isEmpty, toString } from 'lodash';
-import { PagingResponse } from 'Models';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
@@ -33,6 +32,7 @@ import {
   getEntityDetailsPath,
   getVersionPath,
   INITIAL_PAGING_VALUE,
+  PAGE_SIZE,
 } from '../../constants/constants';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import {
@@ -47,6 +47,7 @@ import { ChangeDescription } from '../../generated/entity/type';
 import { EntityHistory } from '../../generated/type/entityHistory';
 import { Include } from '../../generated/type/include';
 import { TagSource } from '../../generated/type/tagLabel';
+import { usePaging } from '../../hooks/paging/usePaging';
 import { useFqn } from '../../hooks/useFqn';
 import SchemaTablesTab from '../../pages/DatabaseSchemaPage/SchemaTablesTab';
 import {
@@ -72,11 +73,13 @@ function DatabaseSchemaVersionPage() {
     tab: EntityTabs;
   }>();
   const { fqn: decodedEntityFQN } = useFqn();
+
+  const pagingInfo = usePaging(PAGE_SIZE);
+
+  const { paging, pageSize, handlePagingChange } = pagingInfo;
+
   const [currentPage, setCurrentPage] = useState(INITIAL_PAGING_VALUE);
-  const [tableData, setTableData] = useState<PagingResponse<Table[]>>({
+  const [tableData, setTableData] = useState<Array<Table>>([]);
-    data: [],
-    paging: { total: 0 },
-  });
   const [servicePermissions, setServicePermissions] =
     useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -173,7 +176,8 @@ function DatabaseSchemaVersionPage() {
           ...params,
           databaseSchema: decodedEntityFQN,
         });
-        setTableData(res);
+        setTableData(res.data);
+        handlePagingChange(res.paging);
       } finally {
         setIsTableDataLoading(false);
       }
@@ -189,11 +193,11 @@ function DatabaseSchemaVersionPage() {
   const tablePaginationHandler = useCallback(
     ({ cursorType, currentPage }: PagingHandlerParams) => {
       if (cursorType) {
-        getSchemaTables({ [cursorType]: tableData.paging[cursorType] });
+        getSchemaTables({ [cursorType]: paging[cursorType] });
       }
       setCurrentPage(currentPage);
     },
-    [tableData, getSchemaTables]
+    [paging, getSchemaTables]
   );
 
   const { versionHandler, backHandler } = useMemo(
@@ -247,6 +251,7 @@ function DatabaseSchemaVersionPage() {
                 currentTablesPage={currentPage}
                 databaseSchemaDetails={currentVersionData}
                 description={description}
+                pagingInfo={pagingInfo}
                 tableData={tableData}
                 tableDataLoading={isTableDataLoading}
                 tablePaginationHandler={tablePaginationHandler}
@@ -401,9 +406,9 @@ function DatabaseSchemaVersionPage() {
 
   useEffect(() => {
     if (!isEmpty(currentVersionData)) {
-      getSchemaTables();
+      getSchemaTables({ limit: pageSize });
     }
-  }, [currentVersionData]);
+  }, [currentVersionData, pageSize]);
 
   return (
     <PageLayoutV1

openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx

@@ -179,8 +179,13 @@ const ServiceDetailsPage: FunctionComponent = () => {
     handlePagingChange: handleIngestionPagingChange,
   } = ingestionPagingInfo;
 
-  const { paging, currentPage, handlePageChange, handlePagingChange } =
+  const {
-    pagingInfo;
+    paging,
+    pageSize: databasePageSize,
+    currentPage,
+    handlePageChange,
+    handlePagingChange,
+  } = pagingInfo;
 
   const [serviceDetails, setServiceDetails] = useState<ServicesType>(
     {} as ServicesType
@@ -848,8 +853,8 @@ const ServiceDetailsPage: FunctionComponent = () => {
 
   useEffect(() => {
     handlePageChange(INITIAL_PAGING_VALUE);
-    getOtherDetails();
+    getOtherDetails({ limit: databasePageSize });
-  }, [activeTab, showDeleted, deleted]);
+  }, [activeTab, showDeleted, deleted, databasePageSize]);
 
   useEffect(() => {
     // fetch count for data modal tab, its need only when its dashboard page and data modal tab is not active
@@ -1014,6 +1019,7 @@ const ServiceDetailsPage: FunctionComponent = () => {
             isServiceLoading={isServiceLoading}
             paging={paging}
             pagingHandler={pagingHandler}
+            pagingInfo={pagingInfo}
             saveUpdatedServiceData={saveUpdatedServiceData}
             serviceDetails={serviceDetails}
             serviceName={serviceCategory}

openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceMainTabContent.tsx

@@ -13,7 +13,7 @@
 
 import { Col, Row, Space, Switch, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { isEmpty, isNil } from 'lodash';
+import { isUndefined } from 'lodash';
 import { EntityTags, ServiceTypes } from 'Models';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -25,12 +25,12 @@ import NextPrevious from '../../components/common/NextPrevious/NextPrevious';
 import { NextPreviousProps } from '../../components/common/NextPrevious/NextPrevious.interface';
 import ResizablePanels from '../../components/common/ResizablePanels/ResizablePanels';
 import EntityRightPanel from '../../components/Entity/EntityRightPanel/EntityRightPanel';
-import { PAGE_SIZE } from '../../constants/constants';
 import { COMMON_RESIZABLE_PANEL_CONFIG } from '../../constants/ResizablePanel.constants';
 import { OperationPermission } from '../../context/PermissionProvider/PermissionProvider.interface';
 import { EntityType } from '../../enums/entity.enum';
 import { DatabaseService } from '../../generated/entity/services/databaseService';
 import { Paging } from '../../generated/type/paging';
+import { UsePagingInterface } from '../../hooks/paging/usePaging';
 import { useFqn } from '../../hooks/useFqn';
 import { ServicesType } from '../../interface/service.interface';
 import { getServiceMainTabColumns } from '../../utils/ServiceMainTabContentUtils';
@@ -52,6 +52,7 @@ interface ServiceMainTabContentProps {
   currentPage: number;
   pagingHandler: NextPreviousProps['pagingHandler'];
   saveUpdatedServiceData: (updatedData: ServicesType) => Promise<void>;
+  pagingInfo: UsePagingInterface;
 }
 
 function ServiceMainTabContent({
@@ -67,6 +68,7 @@ function ServiceMainTabContent({
   currentPage,
   serviceDetails,
   saveUpdatedServiceData,
+  pagingInfo,
 }: Readonly<ServiceMainTabContentProps>) {
   const { t } = useTranslation();
   const { serviceCategory } = useParams<{
@@ -210,14 +212,15 @@ function ServiceMainTabContent({
                           size="small"
                         />
                       )}
-                      {Boolean(!isNil(paging.after) || !isNil(paging.before)) &&
+                      {!isUndefined(pagingInfo) &&
-                        !isEmpty(data) && (
+                        pagingInfo.showPagination && (
                           <NextPrevious
                             currentPage={currentPage}
                             isLoading={isServiceLoading}
-                            pageSize={PAGE_SIZE}
+                            pageSize={pagingInfo.pageSize}
                             paging={paging}
                             pagingHandler={pagingHandler}
+                            onShowSizeChange={pagingInfo.handlePageSizeChange}
                           />
                         )}
                     </Space>

openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaClassBase.ts

@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { EntityTags, PagingResponse } from 'Models';
+import { EntityTags } from 'Models';
 import { PagingHandlerParams } from '../components/common/NextPrevious/NextPrevious.interface';
 import { TabProps } from '../components/common/TabsLabel/TabsLabel.interface';
 import { DetailPageWidgetKeys } from '../enums/CustomizeDetailPage.enum';
@@ -18,12 +18,13 @@ import { EntityTabs } from '../enums/entity.enum';
 import { DatabaseSchema } from '../generated/entity/data/databaseSchema';
 import { Table } from '../generated/entity/data/table';
 import { ThreadType } from '../generated/entity/feed/thread';
+import { UsePagingInterface } from '../hooks/paging/usePaging';
 import { FeedCounts } from '../interface/feed.interface';
 import { getDataBaseSchemaPageBaseTabs } from './DatabaseSchemaDetailsUtils';
 
 export interface DatabaseSchemaPageTabProps {
   feedCount: FeedCounts;
-  tableData: PagingResponse<Table[]>;
+  tableData: Table[];
   activeTab: EntityTabs;
   currentTablesPage: number;
   databaseSchema: DatabaseSchema;
@@ -52,6 +53,7 @@ export interface DatabaseSchemaPageTabProps {
   getEntityFeedCount: () => void;
   fetchDatabaseSchemaDetails: () => Promise<void>;
   handleFeedCount: (data: FeedCounts) => void;
+  pagingInfo: UsePagingInterface;
 }
 
 class DatabaseSchemaClassBase {

openmetadata-ui/src/main/resources/ui/src/utils/DatabaseSchemaDetailsUtils.tsx

@@ -58,12 +58,13 @@ export const getDataBaseSchemaPageBaseTabs = ({
   getEntityFeedCount,
   fetchDatabaseSchemaDetails,
   handleFeedCount,
+  pagingInfo,
 }: DatabaseSchemaPageTabProps): TabProps[] => {
   return [
     {
       label: (
         <TabsLabel
-          count={tableData.paging.total}
+          count={pagingInfo.paging.total}
           id={EntityTabs.TABLE}
           isActive={activeTab === EntityTabs.TABLE}
           name={t('label.table-plural')}
@@ -84,6 +85,7 @@ export const getDataBaseSchemaPageBaseTabs = ({
                       description={description}
                       editDescriptionPermission={editDescriptionPermission}
                       isEdit={isEdit}
+                      pagingInfo={pagingInfo}
                       showDeletedTables={showDeletedTables}
                       tableData={tableData}
                       tableDataLoading={tableDataLoading}