feat: add team roles management and update related hooks and types

Author: bra-i-am

src/authz-module/data/api.ts

@@ -1,5 +1,5 @@
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { LibraryMetadata, TeamMember } from '@src/types';
+import { LibraryMetadata, TeamMember, TeamRole } from '@src/types';
 import { camelCaseObject } from '@edx/frontend-platform';
 import { getApiUrl, getStudioApiUrl } from '@src/data/utils';
 
@@ -8,12 +8,35 @@ export interface GetTeamMembersResponse {
   totalCount: number;
 }
 
+export interface PutTeamMembersResponse {
+  completed: { user: string; status: string }[];
+  errors: { user: string; error: string }[];
+}
+
+export interface AddTeamMembersRequest {
+  users: string[];
+  role: string;
+  scope: string;
+}
+
 // TODO: replece api path once is created
 export const getTeamMembers = async (object: string): Promise<TeamMember[]> => {
   const { data } = await getAuthenticatedHttpClient().get(getApiUrl(`/api/authz/v1/roles/users?scope=${object}`));
   return camelCaseObject(data.results);
 };
 
+export const addTeamMembers = async (
+  data: AddTeamMembersRequest,
+): Promise<PutTeamMembersResponse> => {
+  const res = await getAuthenticatedHttpClient().put(getApiUrl('/api/authz/v1/roles/users'), data);
+  return camelCaseObject(res.data);
+};
+
+export const getTeamRoles = async (libraryId: string): Promise<TeamRole[]> => {
+  const { data } = await getAuthenticatedHttpClient().get(getApiUrl(`/api/authz/v1/roles/?scope=${libraryId}`));
+  return data;
+};
+
 // TODO: this should be replaced in the future with Console API
 export const getLibrary = async (libraryId: string): Promise<LibraryMetadata> => {
   const { data } = await getAuthenticatedHttpClient().get(getStudioApiUrl(`/api/libraries/v2/${libraryId}/`));

src/authz-module/data/hooks.ts

@@ -1,11 +1,16 @@
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import {
+  useMutation, useQuery, useQueryClient, useSuspenseQuery,
+} from '@tanstack/react-query';
 import { appId } from '@src/constants';
-import { LibraryMetadata, TeamMember } from '@src/types';
-import { getLibrary, getTeamMembers } from './api';
+import { LibraryMetadata, TeamMember, TeamRole } from '@src/types';
+import {
+  addTeamMembers, AddTeamMembersRequest, getLibrary, getTeamMembers, getTeamRoles,
+} from './api';
 
 const authzQueryKeys = {
   all: [appId, 'authz'] as const,
   teamMembers: (object: string) => [...authzQueryKeys.all, 'teamMembers', object] as const,
+  teamRoles: (libraryId: string) => [...authzQueryKeys.all, 'teamRoles', libraryId] as const,
   library: (libraryId: string) => [...authzQueryKeys.all, 'library', libraryId] as const,
 };
 
@@ -40,3 +45,42 @@ export const useLibrary = (libraryId: string) => useSuspenseQuery<LibraryMetadat
   queryFn: () => getLibrary(libraryId),
   retry: false,
 });
+
+/**
+ * React Query hook to add new team members to a specific library.
+ * It provides a mutation function to add users with specified roles to the library's team.
+ *
+ * @example
+ * ```tsx
+ * const { mutate: addTeamMember, isPending } = useAddTeamMember();
+ * addTeamMember({ data: { libraryId: 'lib:123', users: ['jdoe'], role: 'editor' } });
+ * ```
+ */
+export const useAddTeamMember = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ data }: {
+      data: AddTeamMembersRequest
+    }) => addTeamMembers(data),
+    onSettled: (_data, _error, { data: { scope } }) => {
+      queryClient.invalidateQueries({ queryKey: authzQueryKeys.teamMembers(scope) });
+    },
+  });
+};
+
+/**
+ * React Query hook to fetch all roles available for a specific library.
+ * It retrieves the list of roles that can be assigned to team members within the given library.
+ *
+ * @param libraryId - The unique identifier of the library
+ *
+ * @example
+ * ```tsx
+ * const { data: teamRoles, isLoading, isError } = useTeamRoles('lib:123');
+ * ```
+ */
+export const useTeamRoles = (libraryId: string) => useSuspenseQuery<TeamRole[], Error>({
+  queryKey: authzQueryKeys.teamRoles(libraryId),
+  queryFn: () => getTeamRoles(libraryId),
+  staleTime: 1000 * 60 * 60 * 24, // refetch after 24 hours
+});

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

@@ -4,6 +4,8 @@ import {
 import { useParams } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
 import { useValidateUserPermissions } from '@src/data/hooks';
+import { TeamRole } from 'types';
+import { useTeamRoles } from '../data/hooks';
 
 const LIBRARY_TEAM_PERMISSIONS = ['act:view_library_team', 'act:manage_library_team'];
 
@@ -18,7 +20,7 @@ type LibraryAuthZContextType = {
   canManageTeam: boolean;
   username: string;
   libraryId: string;
-  roles: string[];
+  roles: TeamRole[];
   permissions: string[];
 };
 
@@ -45,13 +47,15 @@ export const LibraryAuthZProvider: React.FC<AuthZProviderProps> = ({ children }:
     throw new Error('NoAccess');
   }
 
+  const { data: teamRoles } = useTeamRoles(libraryId);
+
   const value = useMemo((): LibraryAuthZContextType => ({
     username: authenticatedUser.username,
     libraryId,
-    roles: [],
+    roles: teamRoles,
     permissions: [],
     canManageTeam,
-  }), [libraryId, authenticatedUser.username, canManageTeam]);
+  }), [libraryId, authenticatedUser.username, canManageTeam, teamRoles]);
 
   return (
     <LibraryAuthZContext.Provider value={value}>

src/types.ts

@@ -22,6 +22,13 @@ export interface LibraryMetadata {
   slug: string;
 }
 
+export interface TeamRole {
+  role: string;
+  description: string;
+  userCount: number;
+  objects: { object: string; description: string; actions: string[] }[];
+}
+
 // Paragon table type
 export interface TableCellValue<T> {
   row: {