Extract user roles from token claims (#776)

Signed-off-by: achour94 <[email protected]>

Author: achour94

src/components/topBar/UserInformationDialog.tsx

@@ -8,7 +8,7 @@
 import { Box, Dialog, DialogActions, DialogContent, DialogTitle, Grid, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import type { User } from 'oidc-client';
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { CancelButton } from '../inputs/reactHookForm/utils/CancelButton';
 import { fetchUserDetails } from '../../services/userAdmin';
 import { UserDetail } from '../../utils/types/types';
@@ -46,6 +46,9 @@ function UserInformationDialog({ openDialog, user, onClose }: UserInformationDia
         }
     }, [openDialog, user]);
 
+    const rolesString = user?.profile?.profile ?? '';
+    const rolesList = rolesString ? rolesString.split('|').map((role) => role.trim()) : [];
+
     return (
         <Dialog open={openDialog && !!user && !!userDetails} onClose={onClose}>
             <DialogTitle fontWeight="bold" sx={styles.DialogTitle}>
@@ -60,15 +63,23 @@ function UserInformationDialog({ openDialog, user, onClose }: UserInformationDia
                         </Typography>
                     </Grid>
                     <Grid item xs={6}>
-                        <Typography>
-                            <FormattedMessage
-                                id={
-                                    userDetails?.isAdmin
-                                        ? 'user-information-dialog/role-admin'
-                                        : 'user-information-dialog/role-user'
-                                }
-                            />
-                        </Typography>
+                        {rolesList.length > 0 ? (
+                            <Typography>
+                                {rolesList.map((role, index) => (
+                                    <Fragment key={role}>
+                                        {index > 0 && ' | '}
+                                        <FormattedMessage
+                                            id={`user-information-dialog/${role}`}
+                                            defaultMessage={role}
+                                        />
+                                    </Fragment>
+                                ))}
+                            </Typography>
+                        ) : (
+                            <Typography>
+                                <FormattedMessage id="user-information-dialog/no-roles" />
+                            </Typography>
+                        )}
                     </Grid>
 
                     <Grid item xs={6}>

src/translations/en/topBarEn.ts

@@ -34,8 +34,10 @@ export const topBarEn = {
 
     'user-information-dialog/title': 'User information',
     'user-information-dialog/role': 'Role',
-    'user-information-dialog/role-user': 'Basic user',
-    'user-information-dialog/role-admin': 'Admin',
+    'user-information-dialog/UTILISATEURS': 'User',
+    'user-information-dialog/ADMIN': 'Admin',
+    'user-information-dialog/ADMIN_EXPLORE': 'Admin Explore',
+    'user-information-dialog/no-roles': 'No roles',
     'user-information-dialog/profile': 'Profile',
     'user-information-dialog/no-profile': 'No profile',
     'user-information-dialog/quotas': 'User quotas',

src/translations/fr/topBarFr.ts

@@ -35,8 +35,10 @@ export const topBarFr = {
 
     'user-information-dialog/title': 'Informations utilisateur',
     'user-information-dialog/role': 'Rôle',
-    'user-information-dialog/role-user': 'Utilisateur simple',
-    'user-information-dialog/role-admin': 'Admin',
+    'user-information-dialog/UTILISATEURS': 'Utilisateur',
+    'user-information-dialog/ADMIN': 'Admin',
+    'user-information-dialog/ADMIN_EXPLORE': 'Admin Explore',
+    'user-information-dialog/no-roles': 'Pas de rôle',
     'user-information-dialog/profile': 'Profil',
     'user-information-dialog/no-profile': 'Pas de profil',
     'user-information-dialog/quotas': 'Quotas',