Fix pagination for Persona listing (#22975)

* Fix pagination for Persona

* fix failing tests

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

@@ -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(),

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

@@ -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,28 +64,44 @@ export const PersonaPage = ({ pageTitle }: { pageTitle: string }) => {
     []
   );
 
-  const fetchPersonas = useCallback(async (params?: Partial<Paging>) => {
+  const fetchPersonas = useCallback(
-    try {
+    async (params?: Partial<Paging>) => {
-      setIsLoading(true);
+      try {
-      const { data, paging } = await getAllPersonas({
+        setIsLoading(true);
-        limit: pageSize,
+        const { data, paging } = await getAllPersonas({
-        fields: TabSpecificField.USERS,
+          limit: pageSize,
-        after: params?.after,
+          fields: TabSpecificField.USERS,
-        before: params?.before,
+          after: params?.after,
-      });
+          before: params?.before,
+        });
 
-      setPersona(data);
+        setPersona(data);
-      handlePagingChange(paging);
+        handlePagingChange(paging);
-    } catch {
+      } catch (error) {
-      // Error
+        showErrorToast(error as AxiosError);
-    } finally {
+      } finally {
-      setIsLoading(false);
+        setIsLoading(false);
-    }
+      }
-  }, []);
+    },
+    [pageSize, handlePagingChange]
+  );
 
+  // Initial load and when URL params change
   useEffect(() => {
-    fetchPersonas();
+    const cursorValue = pagingCursor.cursorValue;
-  }, [pageSize]);
+    const cursorType = pagingCursor.cursorType as CursorType;
+
+    if (cursorType && cursorValue) {
+      fetchPersonas({ [cursorType]: cursorValue });
+    } else {
+      fetchPersonas();
+    }
+  }, [
+    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({ [CursorType.AFTER]: paging[CursorType.AFTER] });
-  }, [fetchPersonas]);
+  }, [fetchPersonas, paging]);
 
   const handlePersonaPageChange = useCallback(
     ({ currentPage, cursorType }: PagingHandlerParams) => {
-      handlePageChange(currentPage);
+      const cursorValue = cursorType ? paging[cursorType] : undefined;
-      if (cursorType) {
+      handlePageChange(currentPage, {
-        fetchPersonas({ [cursorType]: paging[cursorType] });
+        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}