refactor: user retrival for paginated query in user detail view

Author: dcoa

src/authz-module/data/hooks.ts

@@ -83,7 +83,7 @@ export const useAssignTeamMembersRole = () => {
       data: AssignTeamMembersRoleRequest
     }) => assignTeamMembersRole(data),
     onSettled: (_data, _error, { data: { scope } }) => {
-      queryClient.invalidateQueries({ queryKey: authzQueryKeys.teamMembers(scope) });
+      queryClient.invalidateQueries({ queryKey: authzQueryKeys.teamMembersAll(scope) });
     },
   });
 };

src/authz-module/libraries-manager/LibrariesUserManager.test.tsx

@@ -62,13 +62,15 @@ describe('LibrariesUserManager', () => {
 
     // Mock team members
     (useTeamMembers as jest.Mock).mockReturnValue({
-      data: [
-        {
-          username: 'testuser',
-          email: '[email protected]',
-          roles: ['admin'],
-        },
-      ],
+      data: {
+        results: [
+          {
+            username: 'testuser',
+            email: '[email protected]',
+            roles: ['admin'],
+          },
+        ],
+      }
     });
   });
 

src/authz-module/libraries-manager/LibrariesUserManager.tsx

@@ -20,9 +20,18 @@ const LibrariesUserManager = () => {
   const { data: library } = useLibrary(libraryId);
   const rootBreadcrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
   const pageManageTitle = intl.formatMessage(messages['library.authz.manage.page.title']);
+  const querySettings = {
+    order: null,
+    pageIndex: 0,
+    pageSize: 1,
+    roles: null,
+    search: username || null,
+    sortBy: null,
+  };
+
+  const { data: teamMember, isLoading: isLoadingTeamMember } = useTeamMembers(libraryId, querySettings);
+  const user = teamMember?.results?.find(member => member.username === username);
 
-  const { data: teamMembers, isLoading } = useTeamMembers(libraryId);
-  const user = teamMembers?.find(member => member.username === username);
   const userRoles = useMemo(() => {
     const assignedRoles = roles.filter(role => user?.roles.includes(role.role))
       .map(role => ({
@@ -45,10 +54,10 @@ const LibrariesUserManager = () => {
         actions={[]}
       >
         <Container className="bg-light-200 p-5">
-          {isLoading ? <Skeleton count={2} height={200} /> : null}
+          {isLoadingTeamMember ? <Skeleton count={2} height={200} /> : null}
           {userRoles && userRoles.map(role => (
             <RoleCard
-              key={`${role}-${username}`}
+              key={`${role.role}-${username}`}
               title={role.name}
               objectName={library.title}
               description={role.description}