From 12a94364bd668ceeb8dad540a7db7b2702c04681 Mon Sep 17 00:00:00 2001 From: mubbsharanwar Date: Fri, 16 Feb 2024 14:23:23 +0500 Subject: [PATCH] temp: introduce feature flag hide username from header would be based on HIDE_USERNAME_FROM_HEADER flag. --- example/index.js | 2 ++ src/DesktopHeader.jsx | 11 +++++++++-- src/Header.jsx | 4 ++++ src/Header.messages.jsx | 4 ++-- src/Header.test.jsx | 1 + src/__snapshots__/Header.test.jsx.snap | 6 ++++-- .../AuthenticatedUserDropdown.jsx | 18 ++++++++++++++---- src/learning-header/LearningHeader.jsx | 1 + src/learning-header/LearningHeader.test.jsx | 16 ++++++++++++++-- src/studio-header/HeaderBody.jsx | 4 ++++ src/studio-header/StudioHeader.jsx | 1 + src/studio-header/StudioHeader.test.jsx | 12 ++++++++++++ src/studio-header/UserMenu.jsx | 17 ++++++++++++++--- 13 files changed, 82 insertions(+), 15 deletions(-) diff --git a/example/index.js b/example/index.js index 4698ffc33..41b49d62a 100644 --- a/example/index.js +++ b/example/index.js @@ -25,6 +25,7 @@ subscribe(APP_READY, () => { { authenticatedUser: { userId: '123abc', name: 'test name', + username: 'test user', roles: [], administrator: false, }, diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx index fdcb2cc7b..79be7f149 100644 --- a/src/DesktopHeader.jsx +++ b/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 ( @@ -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} + {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, }; diff --git a/src/Header.jsx b/src/Header.jsx index 28ff67416..a227a7fd9 100644 --- a/src/Header.jsx +++ b/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 code behind 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, diff --git a/src/Header.messages.jsx b/src/Header.messages.jsx index e2de86137..0a21908fb 100644 --- a/src/Header.messages.jsx +++ b/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', diff --git a/src/Header.test.jsx b/src/Header.test.jsx index 5940897cc..9a8dce5ce 100644 --- a/src/Header.test.jsx +++ b/src/Header.test.jsx @@ -73,6 +73,7 @@ describe('
', () => { const contextValue = { authenticatedUser: { userId: 'abc123', + username: 'edX', name: 'edX', roles: [], administrator: false, diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap index f8b8c87cd..87bdaa0a7 100644 --- a/src/__snapshots__/Header.test.jsx.snap +++ b/src/__snapshots__/Header.test.jsx.snap @@ -37,7 +37,7 @@ exports[`
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[`
minimal renders correctly for authenticated users when minim className="pgn__avatar pgn__avatar-sm" src="icon/mock/path" /> + edX @@ -179,6 +180,7 @@ exports[`
renders correctly for authenticated users on desktop 1`] = ` className="pgn__avatar pgn__avatar-sm" src="icon/mock/path" /> + edX @@ -291,7 +293,7 @@ exports[`
renders correctly for authenticated users on mobile 1`] = ` type="button" > {null} diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx index 795729244..c64556bd1 100644 --- a/src/learning-header/AuthenticatedUserDropdown.jsx +++ b/src/learning-header/AuthenticatedUserDropdown.jsx @@ -53,15 +53,25 @@ const AuthenticatedUserDropdown = (props) => { careersMenuItem = ''; } + const dropdownToggle = ( + + + {getConfig().HIDE_USERNAME_FROM_HEADER ? ( + + ) : ( + + {username} + + )} + + ); + return ( <> {intl.formatMessage(messages.help)} {showNotificationsTray && } - - - - + {dropdownToggle} {dashboardMenuItem} {careersMenuItem} diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx index 322eeda88..9b8fa96a1 100644 --- a/src/learning-header/LearningHeader.jsx +++ b/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'); }); diff --git a/src/learning-header/LearningHeader.test.jsx b/src/learning-header/LearningHeader.test.jsx index 413ca78cd..64029815e 100644 --- a/src/learning-header/LearningHeader.test.jsx +++ b/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(
); - 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(
); + const userName = queryByTestId('username'); + expect(userName).not.toBeInTheDocument(); }); it('displays course data', () => { diff --git a/src/studio-header/HeaderBody.jsx b/src/studio-header/HeaderBody.jsx index d1cc0c6e8..3ad94ecb3 100644 --- a/src/studio-header/HeaderBody.jsx +++ b/src/studio-header/HeaderBody.jsx @@ -20,6 +20,7 @@ const HeaderBody = ({ number, org, title, + username, name, isAdmin, studioBaseUrl, @@ -99,6 +100,7 @@ const HeaderBody = ({