diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx index 055afd82d..7fcf74769 100644 --- a/src/DesktopHeader.jsx +++ b/src/DesktopHeader.jsx @@ -31,7 +31,7 @@ class DesktopHeader extends React.Component { @@ -58,7 +58,7 @@ class DesktopHeader extends React.Component { diff --git a/src/Header.messages.jsx b/src/Header.messages.jsx index 6db83e5c7..1f6c41e36 100644 --- a/src/Header.messages.jsx +++ b/src/Header.messages.jsx @@ -76,13 +76,13 @@ const messages = defineMessages({ defaultMessage: 'Account Menu', description: 'The aria label for the account menu trigger', }, - 'header.label.account.menu.with.username': { - id: 'header.label.account.menu.with.username', + 'header.label.account.menu.using.username': { + id: 'header.label.account.menu.using.username', defaultMessage: 'Account menu for {username}', description: 'The aria label for the account menu trigger when the username is displayed in it', }, - 'header.label.account.menu.without.username': { - id: 'header.label.account.without.username', + 'header.label.account.menu.using.name': { + id: 'header.label.account.using.name', defaultMessage: 'Account menu for {name}', description: 'The aria label for the account menu trigger when ENABLE_HEADER_WITHOUT_USERNAME is enabled', }, diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx index 9055b7eb7..61458d4b5 100644 --- a/src/learning-header/AuthenticatedUserDropdown.jsx +++ b/src/learning-header/AuthenticatedUserDropdown.jsx @@ -22,11 +22,13 @@ const AuthenticatedUserDropdown = ({ const showDropdownToggle = ( - {!getConfig().ENABLE_HEADER_WITHOUT_USERNAME ? ( + {getConfig().ENABLE_HEADER_WITHOUT_USERNAME ? ( + + ) : ( {username} - ) : } + )} ); diff --git a/src/studio-header/StudioHeader.test.jsx b/src/studio-header/StudioHeader.test.jsx index 7affc3f91..576ff6644 100644 --- a/src/studio-header/StudioHeader.test.jsx +++ b/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, @@ -128,9 +129,13 @@ describe('Header', () => { expect(avatarIcon).toBeVisible(); }); - it.only('user menu should not contain username', async () => { - const newProps = { ...props, ENABLE_HEADER_WITHOUT_USERNAME: true }; - const { container } = render(); + it('user menu should not contain username', async () => { + const config = getConfig(); + mergeConfig({ + ...config, + ENABLE_HEADER_WITHOUT_USERNAME: true, + }); + const { container } = render(); const userMenue = container.querySelector('#user-dropdown-menu'); expect(userMenue.textContent).toContain(''); }); diff --git a/src/studio-header/UserMenu.jsx b/src/studio-header/UserMenu.jsx index 69927fbe0..c4089192b 100644 --- a/src/studio-header/UserMenu.jsx +++ b/src/studio-header/UserMenu.jsx @@ -19,8 +19,8 @@ const UserMenu = ({ // injected intl, }) => { - const showUsername = !getConfig().ENABLE_HEADER_WITHOUT_USERNAME; - const avatarAlt = showUsername ? username : name; + const hideUsername = getConfig().ENABLE_HEADER_WITHOUT_USERNAME; + const avatarAlt = hideUsername ? name : username; const avatar = authenticatedUserAvatar ? ( ); - const title = isMobile ? avatar : <>{avatar}{showUsername && username}; + const title = (isMobile || hideUsername) ? avatar : <>{avatar}{username}; return (