paginate users table

src/realm-roles/AssociatedRolesTab.tsx

@@ -51,14 +51,18 @@ export const AssociatedRolesTab = ({
   const { id } = useParams<{ id: string }>();
   const inheritanceMap = React.useRef<{ [key: string]: string }>({});
 
+  console.log(id)
+
   const getSubRoles = async (
     role: RoleRepresentation,
-    allRoles: RoleRepresentation[]
+    allRoles: RoleRepresentation[],
+    first?: number,
+    max?: number,
+    search?: string,
   ): Promise<RoleRepresentation[]> => {
+
     // Fetch all composite roles
-    const allCompositeRoles = await adminClient.roles.getCompositeRoles({
-      id: role.id!,
-    });
+    const allCompositeRoles = await adminClient.roles.getCompositeRoles({id: role.id!});
 
     // Need to ensure we don't get into an infinite loop, do not add any role that is already there or the starting role
     const newRoles: Promise<RoleRepresentation[]> = allCompositeRoles.reduce(
@@ -87,6 +91,8 @@ export const AssociatedRolesTab = ({
       return additionalRoles;
     }
 
+    
+
     const allRoles: Promise<RoleRepresentation[]> = additionalRoles.reduce(
       async (acc: Promise<RoleRepresentation[]>, role) => {
         const resolvedRoles = await acc;
@@ -101,6 +107,17 @@ export const AssociatedRolesTab = ({
     return allRoles;
   };
 
+
+  // const loader = async (first?: number, max?: number, search?: string, id?: string) => {
+  //   const params = {
+  //     first: first!,
+  //     max: max!,
+  //     search: search!,
+  //     id: id!
+  //   };
+  //   return await adminClient.roles.getCompositeRoles({...params});
+  // };
+
   useEffect(() => {
     refresh();
   }, [additionalRoles, isInheritedHidden]);
@@ -184,6 +201,7 @@ export const AssociatedRolesTab = ({
         <KeycloakDataTable
           key={key}
           loader={loader}
+          isPaginated
           ariaLabelKey="roles:roleList"
           searchPlaceholderKey="roles:searchFor"
           canSelectAll

src/realm-roles/RealmRolesSection.tsx

@@ -13,7 +13,8 @@ export const RealmRolesSection = () => {
       max: max!,
       search: search!,
     };
-    return await adminClient.roles.find(params);
+    const x  = await adminClient.roles.find(params);
+    return x;
   };
   return (
     <>

src/realm-roles/UsersInRoleTab.tsx

@@ -19,11 +19,13 @@ export const UsersInRoleTab = () => {
 
   const adminClient = useAdminClient();
 
-  const loader = async () => {
+  const loader = async (first?: number, max?: number) => {
     const role = await adminClient.roles.findOneById({ id: id });
     const usersWithRole = await adminClient.roles.findUsersWithRole({
       name: role.name!,
-    });
+      first: first!,
+      max: max!,
+    } as any);
     return usersWithRole;
   };
 
@@ -31,6 +33,7 @@ export const UsersInRoleTab = () => {
     <>
       <PageSection data-testid="users-page" variant="light">
         <KeycloakDataTable
+          isPaginated
           loader={loader}
           ariaLabelKey="roles:roleList"
           searchPlaceholderKey=""