paginate users table

This commit is contained in:
jenny-s51 2021-03-02 10:27:33 -05:00
parent e672ed42ee
commit f763fa85fb
3 changed files with 29 additions and 7 deletions

View file

@ -51,14 +51,18 @@ export const AssociatedRolesTab = ({
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
const inheritanceMap = React.useRef<{ [key: string]: string }>({}); const inheritanceMap = React.useRef<{ [key: string]: string }>({});
console.log(id)
const getSubRoles = async ( const getSubRoles = async (
role: RoleRepresentation, role: RoleRepresentation,
allRoles: RoleRepresentation[] allRoles: RoleRepresentation[],
first?: number,
max?: number,
search?: string,
): Promise<RoleRepresentation[]> => { ): Promise<RoleRepresentation[]> => {
// Fetch all composite roles // Fetch all composite roles
const allCompositeRoles = await adminClient.roles.getCompositeRoles({ const allCompositeRoles = await adminClient.roles.getCompositeRoles({id: role.id!});
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 // 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( const newRoles: Promise<RoleRepresentation[]> = allCompositeRoles.reduce(
@ -87,6 +91,8 @@ export const AssociatedRolesTab = ({
return additionalRoles; return additionalRoles;
} }
const allRoles: Promise<RoleRepresentation[]> = additionalRoles.reduce( const allRoles: Promise<RoleRepresentation[]> = additionalRoles.reduce(
async (acc: Promise<RoleRepresentation[]>, role) => { async (acc: Promise<RoleRepresentation[]>, role) => {
const resolvedRoles = await acc; const resolvedRoles = await acc;
@ -101,6 +107,17 @@ export const AssociatedRolesTab = ({
return allRoles; 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(() => { useEffect(() => {
refresh(); refresh();
}, [additionalRoles, isInheritedHidden]); }, [additionalRoles, isInheritedHidden]);
@ -184,6 +201,7 @@ export const AssociatedRolesTab = ({
<KeycloakDataTable <KeycloakDataTable
key={key} key={key}
loader={loader} loader={loader}
isPaginated
ariaLabelKey="roles:roleList" ariaLabelKey="roles:roleList"
searchPlaceholderKey="roles:searchFor" searchPlaceholderKey="roles:searchFor"
canSelectAll canSelectAll

View file

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

View file

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