temp: introduce feature flag

hide username from header would be based on HIDE_USERNAME_FROM_HEADER flag.

example/index.js

@@ -25,6 +25,7 @@ subscribe(APP_READY, () => {
       <AppContext.Provider value={{
         authenticatedUser: {
           userId: '123abc',
+          username: 'testuser',
           name: 'test user',
           roles: [],
           administrator: false,
@@ -38,6 +39,7 @@ subscribe(APP_READY, () => {
         authenticatedUser: {
           userId: '123abc',
           name: 'test name',
+          username: 'testuser',
           roles: [],
           administrator: false,
         },

src/DesktopHeader.jsx

@@ -58,9 +58,12 @@ class DesktopHeader extends React.Component {
     const {
       userMenu,
       avatar,
+      username,
       name,
       intl,
     } = this.props;
+    const hideUsername = getConfig().HIDE_USERNAME_FROM_HEADER;
+    const usernameOrName = hideUsername ? name : username;
 
     return (
       <Dropdown>
@@ -69,9 +72,11 @@ class DesktopHeader extends React.Component {
           as={AvatarButton}
           src={avatar}
           alt=""
-          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { name })}
+          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username: usernameOrName })}
           data-hj-suppress
-        />
+        >
+          {!hideUsername && username}
+        </Dropdown.Toggle>
 
         <Dropdown.Menu alignRight>
           {userMenu.map(({ type, href, content }) => (
@@ -153,6 +158,7 @@ DesktopHeader.propTypes = {
   logoAltText: PropTypes.string,
   logoDestination: PropTypes.string,
   avatar: PropTypes.string,
+  username: PropTypes.string,
   name: PropTypes.string,
   loggedIn: PropTypes.bool,
 
@@ -168,6 +174,7 @@ DesktopHeader.defaultProps = {
   logoAltText: null,
   logoDestination: null,
   avatar: null,
+  username: null,
   name: null,
   loggedIn: false,
 };

src/Header.jsx

@@ -32,6 +32,9 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
     MINIMAL_HEADER: !!process.env.MINIMAL_HEADER,
     ENTERPRISE_LEARNER_PORTAL_HOSTNAME: process.env.ENTERPRISE_LEARNER_PORTAL_HOSTNAME,
     AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
+    // this flag is introduced to unblock for new release.
+    // the flag would be removed in follow up PR
+    HIDE_USERNAME_FROM_HEADER: !!process.env.HIDE_USERNAME_FROM_HEADER,
   }, 'Header additional config');
 });
 
@@ -154,6 +157,7 @@ const Header = ({ intl }) => {
     siteName: 'edX',
     logoDestination: getConfig().MINIMAL_HEADER ? null : `${config.LMS_BASE_URL}/dashboard`,
     loggedIn: authenticatedUser !== null,
+    username: authenticatedUser !== null ? authenticatedUser.username : null,
     name: authenticatedUser !== null ? authenticatedUser.name : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
     mainMenu: getConfig().MINIMAL_HEADER || getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,

src/Header.messages.jsx

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

src/Header.test.jsx

@@ -73,6 +73,7 @@ describe('<Header />', () => {
     const contextValue = {
       authenticatedUser: {
         userId: 'abc123',
+        username: 'edX',
         name: 'edX',
         roles: [],
         administrator: false,

src/__snapshots__/Header.test.jsx.snap

@@ -37,7 +37,7 @@ exports[`<Header /> minimal renders correctly for authenticated users when minim
             alt=""
             aria-expanded={false}
             aria-haspopup={true}
-            aria-label="Account menu for "
+            aria-label="Account menu for edX"
             className="btn-avatar pgn__avatar-button-avatar pgn__avatar-button-avatar-md dropdown-toggle btn btn-tertiary btn-md"
             data-hj-suppress={true}
             disabled={false}
@@ -50,6 +50,7 @@ exports[`<Header /> minimal renders correctly for authenticated users when minim
               className="pgn__avatar pgn__avatar-sm"
               src="icon/mock/path"
             />
+            edX
           </button>
         </div>
       </nav>
@@ -179,6 +180,7 @@ exports[`<Header /> renders correctly for authenticated users on desktop 1`] = `
               className="pgn__avatar pgn__avatar-sm"
               src="icon/mock/path"
             />
+            edX
           </button>
         </div>
       </nav>
@@ -291,7 +293,7 @@ exports[`<Header /> renders correctly for authenticated users on mobile 1`] = `
         type="button"
       >
         <img
-          alt={null}
+          alt="edX"
           className="pgn__avatar pgn__avatar-sm"
           src="icon/mock/path"
         />

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -53,15 +53,25 @@ const AuthenticatedUserDropdown = (props) => {
     careersMenuItem = '';
   }
 
+  const dropdownToggle = (
+    <Dropdown.Toggle variant="outline-primary" id="user-dropdown">
+      <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+      {getConfig().HIDE_USERNAME_FROM_HEADER ? (
+        <Avatar size="sm" alt={name} className="mr-2" />
+      ) : (
+        <span data-hj-suppress className="d-none d-md-inline" data-testid="username">
+          {username}
+        </span>
+      )}
+    </Dropdown.Toggle>
+  );
+
   return (
     <>
       <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
       {showNotificationsTray && <Notifications />}
       <Dropdown className="user-dropdown ml-3">
-        <Dropdown.Toggle variant="outline-primary" id="user-dropdown">
-          <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-          <Avatar size="sm" alt={name} className="mr-2" />
-        </Dropdown.Toggle>
+        {dropdownToggle}
         <Dropdown.Menu className="dropdown-menu-right zIndex-2">
           {dashboardMenuItem}
           {careersMenuItem}
@@ -98,7 +108,7 @@ AuthenticatedUserDropdown.propTypes = {
 
 AuthenticatedUserDropdown.defaultProps = {
   enterpriseLearnerPortalLink: '',
-  name: null,
+  name: '',
 };
 
 export default injectIntl(AuthenticatedUserDropdown);

src/learning-header/LearningHeader.jsx

@@ -23,6 +23,7 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
   mergeConfig({
     ACCOUNT_SETTINGS_URL: process.env.ACCOUNT_SETTINGS_URL || '',
     NOTIFICATION_FEEDBACK_URL: process.env.NOTIFICATION_FEEDBACK_URL || '',
+    HIDE_USERNAME_FROM_HEADER: !!process.env.HIDE_USERNAME_FROM_HEADER,
   }, 'Learning Header additional config');
 });
 

src/learning-header/LearningHeader.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import {
-  initializeMockApp, render, screen,
+  authenticatedUser, initializeMockApp, render, screen,
 } from '../setupTest';
 import { LearningHeader as Header } from '../index';
 
@@ -12,7 +13,18 @@ describe('Header', () => {
 
   it('displays user button', () => {
     render(<Header />);
-    expect(screen.getByRole('button', { className: 'd-md-none' })).toBeInTheDocument();
+    expect(screen.getByText(authenticatedUser.username)).toBeInTheDocument();
+  });
+
+  it('displays user button without username', () => {
+    const config = getConfig();
+    mergeConfig({
+      ...config,
+      HIDE_USERNAME_FROM_HEADER: true,
+    });
+    const { queryByTestId } = render(<Header />);
+    const username = queryByTestId('username');
+    expect(username).not.toBeInTheDocument();
   });
 
   it('displays course data', () => {

src/studio-header/HeaderBody.jsx

@@ -20,6 +20,7 @@ const HeaderBody = ({
   number,
   org,
   title,
+  username,
   name,
   isAdmin,
   studioBaseUrl,
@@ -99,6 +100,7 @@ const HeaderBody = ({
         <Nav>
           <UserMenu
             {...{
+              username,
               name,
               studioBaseUrl,
               logoutUrl,
@@ -124,6 +126,7 @@ HeaderBody.propTypes = {
   logo: PropTypes.string,
   logoAltText: PropTypes.string,
   authenticatedUserAvatar: PropTypes.string,
+  username: PropTypes.string,
   name: PropTypes.string,
   isAdmin: PropTypes.bool,
   isMobile: PropTypes.bool,
@@ -149,6 +152,7 @@ HeaderBody.defaultProps = {
   org: '',
   title: '',
   authenticatedUserAvatar: null,
+  username: null,
   name: null,
   isAdmin: false,
   isMobile: false,

src/studio-header/StudioHeader.jsx

@@ -25,6 +25,7 @@ const StudioHeader = ({
     number,
     org,
     title,
+    username: authenticatedUser?.username,
     name: authenticatedUser?.name,
     isAdmin: authenticatedUser?.administrator,
     authenticatedUserAvatar: authenticatedUser?.avatar,

src/studio-header/StudioHeader.test.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
+import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import {
   render,
   fireEvent,
@@ -129,6 +130,17 @@ describe('Header', () => {
       expect(avatarIcon).toBeVisible();
     });
 
+    it('user menu should not contain username', async () => {
+      const config = getConfig();
+      mergeConfig({
+        ...config,
+        HIDE_USERNAME_FROM_HEADER: true,
+      });
+      const { container } = render(<RootWrapper {...props} />);
+      const userMenu = container.querySelector('#user-dropdown-menu');
+      expect(userMenu.textContent).toContain('');
+    });
+
     it('should hide nav items if prop isHiddenMainMenu true', async () => {
       const initialProps = { ...props, isHiddenMainMenu: true };
       const { queryByTestId } = render(<RootWrapper {...initialProps} />);

src/studio-header/UserMenu.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 import {
   Avatar,
 } from '@openedx/paragon';
@@ -9,32 +10,38 @@ import getUserMenuItems from './utils';
 
 const UserMenu = ({
   name,
+  username,
   studioBaseUrl,
   logoutUrl,
   authenticatedUserAvatar,
+  isMobile,
   isAdmin,
   // injected
   intl,
 }) => {
+  const hideUsername = getConfig().HIDE_USERNAME_FROM_HEADER;
+  const avatarAlt = hideUsername ? name : username;
   const avatar = authenticatedUserAvatar ? (
     <img
       className="d-block w-100 h-100"
       src={authenticatedUserAvatar}
-      alt={name}
+      alt={avatarAlt}
       data-testid="avatar-image"
     />
   ) : (
     <Avatar
       size="sm"
       className="mr-2"
-      alt={name}
+      alt={avatarAlt}
       data-testid="avatar-icon"
     />
   );
 
+  const title = (isMobile || hideUsername) ? avatar : <>{avatar}{username}</>;
+
   return (
     <NavDropdownMenu
-      buttonTitle={avatar}
+      buttonTitle={title}
       id="user-dropdown-menu"
       items={getUserMenuItems({
         studioBaseUrl,
@@ -47,18 +54,22 @@ const UserMenu = ({
 };
 
 UserMenu.propTypes = {
+  username: PropTypes.string,
   name: PropTypes.string,
   studioBaseUrl: PropTypes.string.isRequired,
   logoutUrl: PropTypes.string.isRequired,
   authenticatedUserAvatar: PropTypes.string,
+  isMobile: PropTypes.bool,
   isAdmin: PropTypes.bool,
   // injected
   intl: intlShape.isRequired,
 };
 
 UserMenu.defaultProps = {
+  isMobile: false,
   isAdmin: false,
   authenticatedUserAvatar: null,
+  username: null,
   name: null,
 };