@applica-software-guru/react-admin 1.5.311 → 1.5.312

package/package.json

@@ -107,5 +107,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.311"
+  "version": "1.5.312"
 }

package/src/components/Layout/Header/Profile/HeaderProfile.tsx

@@ -6,9 +6,14 @@ import { LogoutOutlined } from '@ant-design/icons';
 import { Popper } from '@mui/base';
 import { CardContent, ClickAwayListener, Grid, List, Paper, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { useDataProvider, useGetIdentity, useLogout } from 'ra-core';
-import { useCallback, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 
-function HeaderProfile() {
+interface HeaderProfileProps {
+  roles?: ReactNode;
+}
+
+function HeaderProfile(props: HeaderProfileProps) {
+  const { roles } = props;
   const theme = useTheme();
   const dataProvider = useDataProvider();
   const { identity } = useGetIdentity();
@@ -26,6 +31,18 @@ function HeaderProfile() {
     }
   }, [dataProvider, hasProfilePic]);
 
+  const userRoles = useMemo(
+    () =>
+      React.isValidElement(roles) ? (
+        roles
+      ) : roles ? (
+        <>{roles}</>
+      ) : (
+        identity?.roles?.map((r: { name: string }) => r.name.replace('ROLE_', '')).join(',')
+      ),
+    [roles, identity]
+  );
+
   return (
     <>
       <HeaderToggleButton sx={{ p: 0.25, width: 'auto' }} onClick={handleToggle} value="profile" selected={open}>
@@ -62,7 +79,7 @@ function HeaderProfile() {
                           <Stack>
                             <Typography variant="h6">{identity?.name}</Typography>
                             <Typography variant="body2" color="textSecondary">
-                              {identity?.roles?.map((r: { name: string }) => r.name.replace('ROLE_', '')).join(',')}
+                              {userRoles}
                             </Typography>
                           </Stack>
                         </Stack>