fix: reset current page to initial value on limit change in pagination (#18940)

* fix: reset current page to initial value on limit change in pagination

* fix: reset current page for APICollectionVersion page

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
This commit is contained in:
Pranita Fulsundar 2024-12-06 21:32:14 +05:30 committed by GitHub
parent 744eee12e4
commit a0b1a4e925
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 41 additions and 26 deletions

View File

@ -188,6 +188,7 @@ export const UserTab = ({
useEffect(() => { useEffect(() => {
getCurrentTeamUsers(currentTeam.name); getCurrentTeamUsers(currentTeam.name);
handlePageChange(INITIAL_PAGING_VALUE);
}, [currentTeam, pageSize]); }, [currentTeam, pageSize]);
const isTeamDeleted = useMemo( const isTeamDeleted = useMemo(

View File

@ -103,7 +103,13 @@ const APICollectionPage: FunctionComponent = () => {
const { getEntityPermissionByFqn } = usePermissionProvider(); const { getEntityPermissionByFqn } = usePermissionProvider();
const pagingInfo = usePaging(PAGE_SIZE); const pagingInfo = usePaging(PAGE_SIZE);
const { paging, pageSize, handlePagingChange } = pagingInfo; const {
paging,
pageSize,
handlePagingChange,
handlePageChange,
currentPage,
} = pagingInfo;
const { tab: activeTab = EntityTabs.API_ENDPOINT } = const { tab: activeTab = EntityTabs.API_ENDPOINT } =
useParams<{ tab: EntityTabs }>(); useParams<{ tab: EntityTabs }>();
@ -130,8 +136,6 @@ const APICollectionPage: FunctionComponent = () => {
useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION); useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
const [showDeletedEndpoints, setShowDeletedEndpoints] = const [showDeletedEndpoints, setShowDeletedEndpoints] =
useState<boolean>(false); useState<boolean>(false);
const [currentEndpointsPage, setCurrentEndpointsPage] =
useState<number>(INITIAL_PAGING_VALUE);
const extraDropdownContent = useMemo( const extraDropdownContent = useMemo(
() => () =>
@ -145,7 +149,7 @@ const APICollectionPage: FunctionComponent = () => {
const handleShowDeletedEndPoints = (value: boolean) => { const handleShowDeletedEndPoints = (value: boolean) => {
setShowDeletedEndpoints(value); setShowDeletedEndpoints(value);
setCurrentEndpointsPage(INITIAL_PAGING_VALUE); handlePageChange(INITIAL_PAGING_VALUE);
}; };
const { currentVersion, tags, tier, apiCollectionId } = useMemo( const { currentVersion, tags, tier, apiCollectionId } = useMemo(
@ -459,7 +463,7 @@ const APICollectionPage: FunctionComponent = () => {
}, },
}); });
} }
setCurrentEndpointsPage(currentPage); handlePageChange(currentPage);
}, },
[paging, getAPICollectionEndpoints] [paging, getAPICollectionEndpoints]
); );
@ -584,7 +588,7 @@ const APICollectionPage: FunctionComponent = () => {
apiCollectionDetails={apiCollection} apiCollectionDetails={apiCollection}
apiEndpoints={apiEndpoints} apiEndpoints={apiEndpoints}
apiEndpointsLoading={apiEndpointsLoading} apiEndpointsLoading={apiEndpointsLoading}
currentEndpointsPage={currentEndpointsPage} currentEndpointsPage={currentPage}
description={apiCollection?.description ?? ''} description={apiCollection?.description ?? ''}
editDescriptionPermission={editDescriptionPermission} editDescriptionPermission={editDescriptionPermission}
endpointPaginationHandler={endpointPaginationHandler} endpointPaginationHandler={endpointPaginationHandler}

View File

@ -32,7 +32,6 @@ import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interfac
import { import {
getEntityDetailsPath, getEntityDetailsPath,
getVersionPath, getVersionPath,
INITIAL_PAGING_VALUE,
PAGE_SIZE, PAGE_SIZE,
} from '../../constants/constants'; } from '../../constants/constants';
import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider'; import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
@ -86,7 +85,13 @@ const APICollectionVersionPage = () => {
const pagingInfo = usePaging(PAGE_SIZE); const pagingInfo = usePaging(PAGE_SIZE);
const { paging, pageSize, handlePagingChange } = pagingInfo; const {
paging,
pageSize,
handlePagingChange,
handlePageChange,
currentPage,
} = pagingInfo;
const [collectionPermissions, setCollectionPermissions] = const [collectionPermissions, setCollectionPermissions] =
useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION); useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
@ -106,9 +111,6 @@ const APICollectionVersionPage = () => {
const [apiEndpoints, setAPIEndpoints] = useState<Array<APIEndpoint>>([]); const [apiEndpoints, setAPIEndpoints] = useState<Array<APIEndpoint>>([]);
const [currentEndpointsPage, setCurrentEndpointsPage] =
useState<number>(INITIAL_PAGING_VALUE);
const { tier, owners, breadcrumbLinks, changeDescription, deleted, domain } = const { tier, owners, breadcrumbLinks, changeDescription, deleted, domain } =
useMemo( useMemo(
() => () =>
@ -235,7 +237,7 @@ const APICollectionVersionPage = () => {
}, },
}); });
} }
setCurrentEndpointsPage(currentPage); handlePageChange(currentPage);
}, },
[paging, getAPICollectionEndpoints] [paging, getAPICollectionEndpoints]
); );
@ -286,7 +288,7 @@ const APICollectionVersionPage = () => {
apiCollectionDetails={currentVersionData} apiCollectionDetails={currentVersionData}
apiEndpoints={apiEndpoints} apiEndpoints={apiEndpoints}
apiEndpointsLoading={apiEndpointsLoading} apiEndpointsLoading={apiEndpointsLoading}
currentEndpointsPage={currentEndpointsPage} currentEndpointsPage={currentPage}
description={description} description={description}
endpointPaginationHandler={endpointPaginationHandler} endpointPaginationHandler={endpointPaginationHandler}
pagingInfo={pagingInfo} pagingInfo={pagingInfo}
@ -348,7 +350,7 @@ const APICollectionVersionPage = () => {
currentVersionData, currentVersionData,
apiEndpoints, apiEndpoints,
apiEndpointsLoading, apiEndpointsLoading,
currentEndpointsPage, currentPage,
endpointPaginationHandler, endpointPaginationHandler,
viewVersionPermission, viewVersionPermission,
] ]

View File

@ -94,7 +94,13 @@ const DatabaseSchemaPage: FunctionComponent = () => {
const { getEntityPermissionByFqn } = usePermissionProvider(); const { getEntityPermissionByFqn } = usePermissionProvider();
const pagingInfo = usePaging(PAGE_SIZE); const pagingInfo = usePaging(PAGE_SIZE);
const { paging, pageSize, handlePagingChange } = pagingInfo; const {
paging,
pageSize,
handlePagingChange,
currentPage,
handlePageChange,
} = pagingInfo;
const { tab: activeTab = EntityTabs.TABLE } = const { tab: activeTab = EntityTabs.TABLE } =
useParams<{ tab: EntityTabs }>(); useParams<{ tab: EntityTabs }>();
@ -121,8 +127,6 @@ const DatabaseSchemaPage: FunctionComponent = () => {
const [databaseSchemaPermission, setDatabaseSchemaPermission] = const [databaseSchemaPermission, setDatabaseSchemaPermission] =
useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION); useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
const [showDeletedTables, setShowDeletedTables] = useState<boolean>(false); const [showDeletedTables, setShowDeletedTables] = useState<boolean>(false);
const [currentTablesPage, setCurrentTablesPage] =
useState<number>(INITIAL_PAGING_VALUE);
const [storedProcedureCount, setStoredProcedureCount] = useState(0); const [storedProcedureCount, setStoredProcedureCount] = useState(0);
const [updateProfilerSetting, setUpdateProfilerSetting] = const [updateProfilerSetting, setUpdateProfilerSetting] =
@ -140,7 +144,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
const handleShowDeletedTables = (value: boolean) => { const handleShowDeletedTables = (value: boolean) => {
setShowDeletedTables(value); setShowDeletedTables(value);
setCurrentTablesPage(INITIAL_PAGING_VALUE); handlePageChange(INITIAL_PAGING_VALUE);
}; };
const { version: currentVersion, deleted } = useMemo( const { version: currentVersion, deleted } = useMemo(
@ -458,7 +462,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
if (cursorType) { if (cursorType) {
getSchemaTables({ [cursorType]: paging[cursorType] }); getSchemaTables({ [cursorType]: paging[cursorType] });
} }
setCurrentTablesPage(currentPage); handlePageChange(currentPage);
}, },
[paging, getSchemaTables] [paging, getSchemaTables]
); );
@ -579,7 +583,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
feedCount, feedCount,
tableData, tableData,
activeTab, activeTab,
currentTablesPage, currentTablesPage: currentPage,
databaseSchema, databaseSchema,
description, description,
editDescriptionPermission, editDescriptionPermission,
@ -611,7 +615,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
feedCount, feedCount,
tableData, tableData,
activeTab, activeTab,
currentTablesPage, currentPage,
databaseSchema, databaseSchema,
description, description,
editDescriptionPermission, editDescriptionPermission,

View File

@ -31,7 +31,6 @@ import { DisplayType } from '../../components/Tag/TagsViewer/TagsViewer.interfac
import { import {
getEntityDetailsPath, getEntityDetailsPath,
getVersionPath, getVersionPath,
INITIAL_PAGING_VALUE,
PAGE_SIZE, PAGE_SIZE,
} from '../../constants/constants'; } from '../../constants/constants';
import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider'; import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
@ -76,9 +75,14 @@ function DatabaseSchemaVersionPage() {
const pagingInfo = usePaging(PAGE_SIZE); const pagingInfo = usePaging(PAGE_SIZE);
const { paging, pageSize, handlePagingChange } = pagingInfo; const {
paging,
pageSize,
handlePagingChange,
handlePageChange,
currentPage,
} = pagingInfo;
const [currentPage, setCurrentPage] = useState(INITIAL_PAGING_VALUE);
const [tableData, setTableData] = useState<Array<Table>>([]); const [tableData, setTableData] = useState<Array<Table>>([]);
const [servicePermissions, setServicePermissions] = const [servicePermissions, setServicePermissions] =
useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION); useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
@ -195,7 +199,7 @@ function DatabaseSchemaVersionPage() {
if (cursorType) { if (cursorType) {
getSchemaTables({ [cursorType]: paging[cursorType] }); getSchemaTables({ [cursorType]: paging[cursorType] });
} }
setCurrentPage(currentPage); handlePageChange(currentPage);
}, },
[paging, getSchemaTables] [paging, getSchemaTables]
); );

View File

@ -780,8 +780,8 @@ const ServiceDetailsPage: FunctionComponent = () => {
getOtherDetails({ getOtherDetails({
[cursorType]: paging[cursorType], [cursorType]: paging[cursorType],
}); });
handlePageChange(currentPage);
} }
handlePageChange(currentPage);
}, },
[paging, getOtherDetails, handlePageChange] [paging, getOtherDetails, handlePageChange]
); );