feat: add functionality to remove username from header

* Added a new environment variable that controls whether we want
to remove username from header
* Updated header component to hide username

VAN-1805

.env

@@ -27,3 +27,4 @@ USER_INFO_COOKIE_NAME=null
 PUBLISHER_BASE_URL=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
+HIDE_USERNAME_FROM_HEADER=''

.env.development

@@ -31,3 +31,4 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 PUBLISHER_BASE_URL='http://localhost:18400'
 APP_ID='support-tools'
 MFE_CONFIG_API_URL='http://localhost:18000/api/mfe_config/v1'
+HIDE_USERNAME_FROM_HEADER=''

.env.test

@@ -20,3 +20,4 @@ SUBSIDY_BASE_URL='http://localhost:18280'
 USER_INFO_COOKIE_NAME='edx-user-info'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+HIDE_USERNAME_FROM_HEADER=''

src/index.jsx

@@ -106,6 +106,7 @@ initialize({
         FEATURE_CONFIGURATION_ENTERPRISE_PROVISION: process.env.FEATURE_CONFIGURATION_ENTERPRISE_PROVISION || hasFeatureFlagEnabled('FEATURE_CONFIGURATION_ENTERPRISE_PROVISION') || null,
         FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION: process.env.FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION || hasFeatureFlagEnabled('FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION') || null,
         SUBSIDY_BASE_URL: process.env.SUBSIDY_BASE_URL || null,
+        HIDE_USERNAME_FROM_HEADER: process.env.HIDE_USERNAME_FROM_HEADER || false,
       });
     },
   },

src/supportHeader/DesktopHeader.jsx

@@ -47,14 +47,22 @@ export default class DesktopHeader extends React.Component {
     const {
       loggedIn,
       avatar,
+      name,
       username,
+      hideUsername,
     } = this.props;
 
     return (
       <Dropdown>
-        <Dropdown.Toggle id="desktop-header-dropdown-toggle" as={AvatarButton} src={avatar}>
-          {username}
-        </Dropdown.Toggle>
+        {hideUsername ? (
+          <Dropdown.Toggle id="desktop-header-dropdown-toggle" showLabel={false} as={AvatarButton} src={avatar}>
+            {name}
+          </Dropdown.Toggle>
+        ) : (
+          <Dropdown.Toggle id="desktop-header-dropdown-toggle" as={AvatarButton} src={avatar}>
+            {username}
+          </Dropdown.Toggle>
+        )}
 
         <Dropdown.Menu alignRight>
           {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
@@ -131,7 +139,9 @@ DesktopHeader.propTypes = {
   logoDestination: PropTypes.string,
   avatar: PropTypes.string,
   username: PropTypes.string,
+  name: PropTypes.string,
   loggedIn: PropTypes.bool,
+  hideUsername: PropTypes.bool,
 };
 
 DesktopHeader.defaultProps = {
@@ -143,5 +153,7 @@ DesktopHeader.defaultProps = {
   logoDestination: null,
   avatar: null,
   username: null,
+  name: null,
   loggedIn: false,
+  hideUsername: false,
 };

src/supportHeader/Header.jsx

@@ -172,8 +172,10 @@ export default function Header() {
     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 ? [] : mainMenu,
+    hideUsername: !!getConfig().HIDE_USERNAME_FROM_HEADER,
     userMenu,
     loggedOutItems,
   };

src/supportHeader/Header.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render } from '@testing-library/react';
+import { Context as ResponsiveContext } from 'react-responsive';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import Header from './Header';
+
+describe('<Header />', () => {
+  const appContextValue = {
+    authenticatedUser: {
+      userId: '123',
+      username: 'abc',
+      name: 'full name',
+    },
+    config: {
+      LMS_BASE_URL: process.env.LMS_BASE_URL,
+      LOGO_URL: 'logo_url.jpg',
+    },
+  };
+
+  it('renders correctly for authenticated desktop', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1200 }}>
+        <IntlProvider locale="en">
+          <AppContext.Provider value={appContextValue}>
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const { container: wrapper } = render(component);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders correctly for authenticated mobile', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 500 }}>
+        <IntlProvider locale="en">
+          <AppContext.Provider value={appContextValue}>
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const { container: wrapper } = render(component);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/supportHeader/MobileHeader.jsx

@@ -49,13 +49,15 @@ export default class MobileHeader extends React.Component {
     const {
       loggedIn,
       avatar,
+      name,
       username,
+      hideUsername,
     } = this.props;
 
     return (
       <Dropdown>
-        <Dropdown.Toggle showLabel={false} size="md" as={AvatarButton} src={avatar}>
-          {username}
+        <Dropdown.Toggle id="mobile-header-dropdown-toggle" showLabel={false} size="md" as={AvatarButton} src={avatar}>
+          {hideUsername ? name : username}
         </Dropdown.Toggle>
 
         <Dropdown.Menu alignRight>
@@ -151,8 +153,10 @@ MobileHeader.propTypes = {
   logoDestination: PropTypes.string,
   avatar: PropTypes.string,
   username: PropTypes.string,
+  name: PropTypes.string,
   loggedIn: PropTypes.bool,
   stickyOnMobile: PropTypes.bool,
+  hideUsername: PropTypes.bool,
 };
 
 MobileHeader.defaultProps = {
@@ -164,7 +168,8 @@ MobileHeader.defaultProps = {
   logoDestination: null,
   avatar: null,
   username: null,
+  name: null,
   loggedIn: false,
   stickyOnMobile: true,
-
+  hideUsername: false,
 };