feat: remove username

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

Hide file tree

Showing 8 changed files with 57 additions and 9 deletions.
diff --git a/README.rst b/README.rst
@@ -49,6 +49,7 @@ Environment Variables
 * ``ACCOUNT_PROFILE_URL`` - The URL of the account profile page.
 * ``ACCOUNT_SETTINGS_URL`` - The URL of the account settings page.
 * ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out
+* ``ENABLE_HEADER_WITHOUT_USERNAME`` - A boolean flag which hides the username from the header
   menu items when truthy.  This is intended to be used in micro-frontends like
   frontend-app-authentication in which these menus are considered distractions from the user's task.
 

diff --git a/example/index.js b/example/index.js
@@ -26,6 +26,7 @@ subscribe(APP_READY, () => {
         authenticatedUser: {
           userId: '123abc',
           username: 'testuser',
+          name: 'test user',
           roles: [],
           administrator: false,
         },

diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
@@ -73,6 +73,10 @@ class DesktopHeader extends React.Component {
   }
 
   renderUserMenu() {
+    return (getConfig().ENABLE_HEADER_WITHOUT_USERNAME ? this.userMenuWithoutUsername() : this.userMenuWithUsername());
+  }
+
+  userMenuWithUsername() {
     const {
       userMenu,
       avatar,
@@ -99,6 +103,33 @@ class DesktopHeader extends React.Component {
     );
   }
 
+  userMenuWithoutUsername() {
+    const {
+      userMenu,
+      avatar,
+      name,
+      intl,
+    } = this.props;
+
+    return (
+      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
+        <MenuTrigger
+          tag="button"
+          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" />
+          <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 }) => (
+            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
+          ))}
+        </MenuContent>
+      </Menu>
+    );
+  }
+
   renderLoggedOutItems() {
     const { loggedOutItems } = this.props;
 
@@ -178,6 +209,7 @@ DesktopHeader.propTypes = {
   logoDestination: PropTypes.string,
   avatar: PropTypes.string,
   username: PropTypes.string,
+  name: PropTypes.string,
   loggedIn: PropTypes.bool,
 
   // i18n
@@ -207,6 +239,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
@@ -27,6 +27,7 @@ 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');
 });
 
@@ -94,6 +95,7 @@ const Header = ({ intl }) => {
     logoDestination: `${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().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
     userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu,

diff --git a/src/Header.test.jsx b/src/Header.test.jsx
@@ -43,6 +43,7 @@ describe('<Header />', () => {
       authenticatedUser: {
         userId: 'abc123',
         username: 'edX',
+        name: 'edX',
         roles: [],
         administrator: false,
       },
@@ -84,6 +85,7 @@ describe('<Header />', () => {
       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
@@ -246,7 +246,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
           <button
             aria-expanded={false}
             aria-haspopup="menu"
-            aria-label="Account menu for edX"
+            aria-label="Account menu for {username}"
             className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
             onClick={[Function]}
           >

diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -4,28 +4,35 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { getConfig } from '@edx/frontend-platform';
+import { Avatar } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@openedx/paragon';
 
 import messages from './messages';
 
-const AuthenticatedUserDropdown = ({ intl, username }) => {
+const AuthenticatedUserDropdown = ({ intl, username, avatar }) => {
   const dashboardMenuItem = (
     <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
       {intl.formatMessage(messages.dashboard)}
     </Dropdown.Item>
   );
 
+  const showDropdownToggle = (
+    <Dropdown.Toggle variant="outline-primary">
+        <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+        {!getConfig().ENABLE_HEADER_WITHOUT_USERNAME ? (
+          <span data-hj-suppress className="d-none d-md-inline">
+            {username}
+          </span>
+        ) : <Avatar size="sm" src={avatar} alt="" className="mr-2" />}
+    </Dropdown.Toggle>
+  );
+
   return (
     <>
       <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
       <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>
-        </Dropdown.Toggle>
+        {showDropdownToggle}
         <Dropdown.Menu className="dropdown-menu-right">
           {dashboardMenuItem}
           <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>

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