Fix role selection when paging (#3567)

apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx

@@ -67,7 +67,13 @@ export const AddRoleMappingModal = ({
     }
 
     const roles = await getAvailableRoles(adminClient, type, { ...params, id });
-    return localeSort(roles, compareRow);
+    const sorted = localeSort(roles, compareRow);
+    return sorted.map((row) => {
+      return {
+        role: row.role,
+        id: row.role.id,
+      };
+    });
   };
 
   const clientRolesLoader = async (
@@ -88,6 +94,7 @@ export const AddRoleMappingModal = ({
       roles.map((e) => ({
         client: { clientId: e.client, id: e.clientId },
         role: { id: e.id, name: e.role, description: e.description },
+        id: e.id,
       })),
       compareRow
     );

apps/admin-ui/src/components/role-mapping/RoleMapping.tsx

@@ -33,6 +33,7 @@ export type CompositeRole = RoleRepresentation & {
 export type Row = {
   client?: ClientRepresentation;
   role: RoleRepresentation | CompositeRole;
+  id?: string; // KeycloakDataTable expects an id for the row
 };
 
 export const mapRoles = (

apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx

@@ -175,7 +175,7 @@ export type DataListProps<T> = Omit<
  * @param {Field<T>} props.detailColumns - definition of the columns expandable columns
  * @param {Action[]} props.actions - the actions that appear on the row
  * @param {IActionsResolver} props.actionResolver Resolver for the given action
- * @param {ReactNode} props.toolbarItem - Toolbar items that appear on the top of the table {@link ToolbarItem}
+ * @param {ReactNode} props.toolbarItem - Toolbar items that appear on the top of the table {@link toolbarItem}
  * @param {ReactNode} props.emptyState - ReactNode show when the list is empty could be any component but best to use {@link ListEmptyState}
  */
 export function KeycloakDataTable<T>({