feat: add functionality to remove username from header

.env.development

@@ -23,3 +23,4 @@ ENABLE_NOTICES=''
 # IDP_SLUG=''
 # uncomment the line below to host the site at /{HOSTNAME}/
 # ENABLE_PATH_PREFIX = true
+HIDE_USERNAME_FROM_HEADER=''

src/components/site-header/DesktopHeader.jsx

@@ -59,18 +59,22 @@ class DesktopHeader extends React.Component {
       userMenu,
       avatar,
       username,
+      name,
+      hideUsername,
       intl,
     } = this.props;
 
+    const usernameOrName = hideUsername ? name : username;
+
     return (
       <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
         <MenuTrigger
           tag="button"
-          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
+          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { usernameOrName })}
           className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
         >
           <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
-          {username} <CaretIcon role="img" aria-hidden focusable="false" />
+          {!hideUsername && username} <CaretIcon role="img" aria-hidden focusable="false" />
         </MenuTrigger>
         <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
           {userMenu.map(({ type, href, content }) => (
@@ -151,7 +155,9 @@ DesktopHeader.propTypes = {
   logoDestination: PropTypes.string,
   avatar: PropTypes.string,
   username: PropTypes.string,
+  name: PropTypes.string,
   loggedIn: PropTypes.bool,
+  hideUsername: PropTypes.bool,
 
   // i18n
   intl: intlShape.isRequired,
@@ -166,7 +172,9 @@ DesktopHeader.defaultProps = {
   logoDestination: null,
   avatar: null,
   username: null,
+  name: null,
   loggedIn: false,
+  hideUsername: false,
 };
 
 export default injectIntl(DesktopHeader);

src/components/site-header/Header.jsx

@@ -29,9 +29,11 @@ function Header({
     logoDestination,
     loggedIn: authenticatedUser !== null,
     username: authenticatedUser ? authenticatedUser.username : null,
+    name: authenticatedUser ? authenticatedUser.name : null,
     avatar: authenticatedUser && authenticatedUser.profileImage
       ? authenticatedUser.profileImage.imageUrlMedium
       : null,
+    hideUsername: !!process.env.HIDE_USERNAME_FROM_HEADER,
     mainMenu,
     userMenu,
   };

src/components/site-header/Header.messages.jsx

@@ -68,7 +68,7 @@ const messages = defineMessages({
   },
   'header.label.account.menu.for': {
     id: 'header.label.account.menu.for',
-    defaultMessage: 'Account menu for {username}',
+    defaultMessage: 'Account menu for {usernameOrName}',
     description: 'The aria label for the account menu trigger when the username is displayed in it',
   },
   'header.label.main.nav': {

src/components/site-header/MobileHeader.jsx

@@ -89,15 +89,18 @@ class MobileHeader extends React.Component {
       loggedIn,
       avatar,
       username,
+      name,
       stickyOnMobile,
       intl,
       mainMenu,
       userMenu,
       loggedOutItems,
+      hideUsername,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
     const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
     const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
+    const avatarAltText = hideUsername ? name : username;
 
     return (
       <header
@@ -139,7 +142,7 @@ class MobileHeader extends React.Component {
                 aria-label={intl.formatMessage(messages['header.label.account.menu'])}
                 title={intl.formatMessage(messages['header.label.account.menu'])}
               >
-                <Avatar size="1.5rem" src={avatar} alt={username} />
+                <Avatar size="1.5rem" src={avatar} alt={avatarAltText} />
               </MenuTrigger>
               <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
                 {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
@@ -173,8 +176,10 @@ MobileHeader.propTypes = {
   logoDestination: PropTypes.string,
   avatar: PropTypes.string,
   username: PropTypes.string,
+  name: PropTypes.string,
   loggedIn: PropTypes.bool,
   stickyOnMobile: PropTypes.bool,
+  hideUsername: PropTypes.bool,
 
   // i18n
   intl: intlShape.isRequired,
@@ -189,9 +194,10 @@ MobileHeader.defaultProps = {
   logoDestination: null,
   avatar: null,
   username: null,
+  name: null,
   loggedIn: false,
   stickyOnMobile: true,
-
+  hideUsername: false,
 };
 
 export default injectIntl(MobileHeader);