feat: remove username

remove username from header VAN-1804
openedx · Feb 1, 2024 · cad94a2 · cad94a2
1 parent 3b2a2bf
commit cad94a2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
@@ -77,18 +77,19 @@ class DesktopHeader extends React.Component {
       userMenu,
       avatar,
       username,
+      name,
       intl,
     } = this.props;
 
     return (
       <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
         <MenuTrigger
           tag="button"
-          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
+          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { name })}
           className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
         >
           <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
-          {username} <CaretIcon role="img" aria-hidden focusable="false" />
+          {!getConfig().ENABLE_HEADER_WITHOUT_USERNAME && username} <CaretIcon role="img" aria-hidden focusable="false" />
         </MenuTrigger>
         <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
           {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
@@ -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
@@ -22,9 +22,11 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
       <Dropdown className="user-dropdown ml-3">
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-          <span data-hj-suppress className="d-none d-md-inline">
-            {username}
-          </span>
+          {!getConfig().ENABLE_HEADER_WITHOUT_USERNAME && (
+            <span data-hj-suppress className="d-none d-md-inline">
+              {username}
+            </span>
+          )}
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right">
           {dashboardMenuItem}

diff --git 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 (
     <NavDropdownMenu