From 68b49199da61281e0341b3eed0462e0583800ba7 Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Thu, 1 Feb 2024 20:58:34 +0000
Subject: [PATCH] fix the role display issue

---
 src/components/EditUserMetadata.jsx | 5 ++---
 src/components/UserProfile.jsx      | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/EditUserMetadata.jsx b/src/components/EditUserMetadata.jsx
index 0f9bbf68..ba60cee7 100644
--- a/src/components/EditUserMetadata.jsx
+++ b/src/components/EditUserMetadata.jsx
@@ -12,6 +12,7 @@ import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined'
 import ForumOutlinedIcon from '@material-ui/icons/ForumOutlined';
 import AccountBalanceOutlined from '@material-ui/icons/AccountBalanceOutlined';
 import PlaceOutlined from '@material-ui/icons/PlaceOutlined';
+import { FormattedMessage } from 'react-intl';
 import CustomAlert from './Alert';
 import { useReplaceUserProperties } from '../models/users/usePatchUser';
 import { sanitizeTwitterHandle } from '../utils/formatters';
@@ -22,7 +23,6 @@ import PasswordVerificationAlert from './PasswordVerificationAlert';
 import StandardDialog from './StandardDialog';
 import EntityHeader from './EntityHeader';
 import BigAvatar from './profilePhotos/BigAvatar';
-import RequestCollaborationButton from './RequestCollaborationButton';
 import Text from './Text';
 import UserProfileMetadataWrap from './UserProfileMetadataWrap';
 
@@ -95,7 +95,6 @@ export default function EditUserMetadata({
               userDataLoading={userDataLoading}
             />
           }
-
         >
           <div
             style={{
@@ -130,7 +129,7 @@ export default function EditUserMetadata({
             </div>
           </div>
           <Chip
-            label={highestRoleLabelId}
+            label={<FormattedMessage id={highestRoleLabelId} />}
             style={{
               marginTop: 14,
               color: theme.palette.common.black,
diff --git a/src/components/UserProfile.jsx b/src/components/UserProfile.jsx
index 02ff3d0e..578be200 100644
--- a/src/components/UserProfile.jsx
+++ b/src/components/UserProfile.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { get } from 'lodash-es';
 
 import Grid from '@material-ui/core/Grid';
@@ -183,7 +183,7 @@ export default function UserProfile({
                 </div>
               </div>
               <Chip
-                label={highestRoleLabelId}
+                label={<FormattedMessage id={highestRoleLabelId} />}
                 style={{
                   marginTop: 14,
                   color: theme.palette.common.black,