yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-09-30 03:16:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix pagination for Persona listing (#22975)

Browse Source 
* Fix pagination for Persona

* fix failing tests
This commit is contained in:
Harshit Shah 2025-08-20 05:42:47 +05:30 committed by GitHub
parent 1fc766d7b7
commit 3bd3158bee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 58 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.test.tsx
View File

@ -11,6 +11,7 @@
* limitations under the License.
*/
import { act, fireEvent, render, screen } from '@testing-library/react';
import { CursorType } from '../../../enums/pagination.enum';
import { getAllPersonas } from '../../../rest/PersonaAPI';
import { PersonaPage } from './PersonaPage';
@ -82,6 +83,13 @@ jest.mock('../../../hooks/paging/usePaging', () => ({
currentPage: 1,
showPagination: true,
pageSize: 10,
paging: {
[CursorType.AFTER]: '1',
},
pagingCursor: {
cursorType: CursorType.AFTER,
cursorValue: '',
},
handlePageChange: jest.fn(),
handlePagingChange: jest.fn(),
handlePageSizeChange: jest.fn(),

48
openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx
View File

@ -12,6 +12,7 @@
*/
import { Button, Skeleton } from 'antd';
import Card from 'antd/lib/card/Card';
import { AxiosError } from 'axios';
import { isEmpty } from 'lodash';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -28,12 +29,14 @@ import { GlobalSettingsMenuCategory } from '../../../constants/GlobalSettings.co
import { PAGE_HEADERS } from '../../../constants/PageHeaders.constant';
import { ERROR_PLACEHOLDER_TYPE } from '../../../enums/common.enum';
import { TabSpecificField } from '../../../enums/entity.enum';
import { CursorType } from '../../../enums/pagination.enum';
import { Persona } from '../../../generated/entity/teams/persona';
import { Paging } from '../../../generated/type/paging';
import { useAuth } from '../../../hooks/authHooks';
import { usePaging } from '../../../hooks/paging/usePaging';
import { getAllPersonas } from '../../../rest/PersonaAPI';
import { getSettingPageEntityBreadCrumb } from '../../../utils/GlobalSettingsUtils';
import { showErrorToast } from '../../../utils/ToastUtils';
import './persona-page.less';
const PERSONA_PAGE_SIZE = 12;
@ -49,9 +52,10 @@ export const PersonaPage = ({ pageTitle }: { pageTitle: string }) => {
const {
currentPage,
handlePageChange,
handlePagingChange,
pageSize,
paging,
handlePagingChange,
pagingCursor,
showPagination,
} = usePaging(PERSONA_PAGE_SIZE);
@ -60,7 +64,8 @@ export const PersonaPage = ({ pageTitle }: { pageTitle: string }) => {
[]
);
const fetchPersonas = useCallback(async (params?: Partial<Paging>) => {
const fetchPersonas = useCallback(
async (params?: Partial<Paging>) => {
try {
setIsLoading(true);
const { data, paging } = await getAllPersonas({
@ -72,16 +77,31 @@ export const PersonaPage = ({ pageTitle }: { pageTitle: string }) => {
setPersona(data);
handlePagingChange(paging);
} catch {
// Error
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
setIsLoading(false);
}
}, []);
},
[pageSize, handlePagingChange]
);
// Initial load and when URL params change
useEffect(() => {
const cursorValue = pagingCursor.cursorValue;
const cursorType = pagingCursor.cursorType as CursorType;
if (cursorType && cursorValue) {
fetchPersonas({ [cursorType]: cursorValue });
} else {
fetchPersonas();
}, [pageSize]);
}
}, [
pagingCursor.cursorType,
pagingCursor.cursorValue,
pageSize,
fetchPersonas,
]);
const handleAddNewPersona = useCallback(() => {
setAddEditPersona({} as Persona);
@ -112,14 +132,18 @@ export const PersonaPage = ({ pageTitle }: { pageTitle: string }) => {
const handlePersonaAddEditSave = useCallback(() => {
handlePersonalAddEditCancel();
fetchPersonas();
}, [fetchPersonas]);
fetchPersonas({ [CursorType.AFTER]: paging[CursorType.AFTER] });
}, [fetchPersonas, paging]);
const handlePersonaPageChange = useCallback(
({ currentPage, cursorType }: PagingHandlerParams) => {
handlePageChange(currentPage);
if (cursorType) {
fetchPersonas({ [cursorType]: paging[cursorType] });
const cursorValue = cursorType ? paging[cursorType] : undefined;
handlePageChange(currentPage, {
cursorType: cursorType as CursorType,
cursorValue,
});
if (cursorType && cursorValue) {
fetchPersonas({ [cursorType]: cursorValue });
}
},
[handlePageChange, fetchPersonas, paging]
@ -187,7 +211,7 @@ export const PersonaPage = ({ pageTitle }: { pageTitle: string }) => {
{/* Pagination at bottom of page */}
{showPagination && (
<div className="d-flex justify-center align-center m-b-sm">
<div className="d-flex justify-center align-center m-b-sm m-t-sm">
<NextPrevious
currentPage={currentPage}
isLoading={isLoading}