fix: display role.name coming from the metadata (#10)

src/authz-module/libraries-manager/components/TeamTable.test.tsx

@@ -23,12 +23,12 @@ describe('TeamTable', () => {
   const mockTeamMembers = [
     {
       email: 'alice@example.com',
-      roles: ['Admin', 'Editor'],
+      roles: ['admin', 'editor'],
       username: 'alice',
     },
     {
       email: 'bob@example.com',
-      roles: ['Viewer'],
+      roles: ['viewer'],
       username: 'bob',
     },
   ];
@@ -37,6 +37,38 @@ describe('TeamTable', () => {
     libraryId: 'lib:123',
     canManageTeam: true,
     username: 'alice',
+    roles: [
+      {
+        role: 'admin',
+        permissions: [
+          'delete_library',
+          'publish_library',
+          'manage_library_team',
+        ],
+        userCount: 3,
+        name: 'Admin',
+        description: 'The Admin role',
+      },
+      {
+        role: 'editor',
+        permissions: [
+          'edit_library',
+          'publish_library',
+        ],
+        userCount: 3,
+        name: 'Editor',
+        description: 'The Editor role',
+      },
+      {
+        role: 'viewer',
+        permissions: [
+          'view_library',
+        ],
+        userCount: 3,
+        name: 'Viewer',
+        description: 'The Viewer role',
+      },
+    ],
   };
 
   beforeEach(() => {

src/authz-module/libraries-manager/components/TeamTable.tsx

@@ -43,18 +43,12 @@ const NameCell = ({ row }: CellProps) => {
   return row.original.username;
 };
 
-const RolesCell = ({ row }: CellProps) => (row.original.username === SKELETON_ROWS[0].username ? (
-  <Skeleton width="80px" />
-) : (
-  row.original.roles.map((role) => (
-    <Chip key={`${row.original.username}-role-${role}`}>{role}</Chip>
-  ))
-));
-
 const TeamTable = () => {
   const intl = useIntl();
-  const { libraryId, canManageTeam, username } = useLibraryAuthZ();
-
+  const {
+    libraryId, canManageTeam, username, roles,
+  } = useLibraryAuthZ();
+  const roleLabels = roles.reduce((acc, role) => ({ ...acc, [role.role]: role.name }), {} as Record<string, string>);
   // TODO: Display error in the notification system
   const {
     data: teamMembers, isLoading, isError,
@@ -105,7 +99,14 @@ const TeamTable = () => {
           {
             Header: intl.formatMessage(messages['library.authz.team.table.roles']),
             accessor: 'roles',
-            Cell: RolesCell,
+            // eslint-disable-next-line react/no-unstable-nested-components
+            Cell: ({ row }: CellProps) => (row.original.username === SKELETON_ROWS[0].username ? (
+              <Skeleton width="80px" />
+            ) : (
+              row.original.roles.map((role) => (
+                <Chip key={`${row.original.username}-role-${role}`}>{roleLabels[role]}</Chip>
+              ))
+            )),
           },
         ]
       }