diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx index 8bd142fb9e..d7413e03e4 100644 --- a/src/DesktopHeader.jsx +++ b/src/DesktopHeader.jsx @@ -77,6 +77,7 @@ class DesktopHeader extends React.Component { userMenu, avatar, username, + name, intl, } = this.props; @@ -84,11 +85,11 @@ class DesktopHeader extends React.Component { - {username} + {!getConfig().ENABLE_HEADER_WITHOUT_USERNAME && username} {userMenu.map(({ type, href, content }) => ( @@ -178,6 +179,7 @@ DesktopHeader.propTypes = { logoDestination: PropTypes.string, avatar: PropTypes.string, username: PropTypes.string, + name: PropTypes.string, loggedIn: PropTypes.bool, // i18n @@ -207,6 +209,7 @@ DesktopHeader.defaultProps = { logoDestination: null, avatar: null, username: null, + name: null, loggedIn: false, appMenu: null, }; diff --git a/src/Header.jsx b/src/Header.jsx index c0db257c72..a6c3ebf156 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -2,6 +2,7 @@ import React, { useContext } from 'react'; import Responsive from 'react-responsive'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { AppContext } from '@edx/frontend-platform/react'; +import { getAuthenticatedUser } from '@edx/frontend-platform/auth'; import { APP_CONFIG_INITIALIZED, ensureConfig, @@ -27,11 +28,13 @@ ensureConfig([ subscribe(APP_CONFIG_INITIALIZED, () => { mergeConfig({ AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER, + ENABLE_HEADER_WITHOUT_USERNAME: !!process.env.ENABLE_HEADER_WITHOUT_USERNAME, }, 'Header additional config'); }); const Header = ({ intl }) => { const { authenticatedUser, config } = useContext(AppContext); + const authUser = getAuthenticatedUser(); const mainMenu = [ { @@ -94,6 +97,7 @@ const Header = ({ intl }) => { logoDestination: `${config.LMS_BASE_URL}/dashboard`, loggedIn: authenticatedUser !== null, username: authenticatedUser !== null ? authenticatedUser.username : null, + name: authUser !== null ? authUser.name : null, avatar: authenticatedUser !== null ? authenticatedUser.avatar : null, mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu, userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu, diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx index 9caadb412f..8b9759607b 100644 --- a/src/learning-header/AuthenticatedUserDropdown.jsx +++ b/src/learning-header/AuthenticatedUserDropdown.jsx @@ -22,9 +22,11 @@ const AuthenticatedUserDropdown = ({ intl, username }) => { - - {username} - + {!getConfig().ENABLE_HEADER_WITHOUT_USERNAME && ( + + {username} + + )} {dashboardMenuItem} diff --git a/src/studio-header/UserMenu.jsx b/src/studio-header/UserMenu.jsx index 03695c165b..56417fda2e 100644 --- a/src/studio-header/UserMenu.jsx +++ b/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'; @@ -32,7 +33,8 @@ const UserMenu = ({ data-testid="avatar-icon" /> ); - const title = isMobile ? avatar : <>{avatar}{username}; + const showUsername = !getConfig().ENABLE_HEADER_WITHOUT_USERNAME; + const title = isMobile ? avatar : <>{avatar}{showUsername && username}; return (