feat: set username behind flag

username would be show in header bt enabling ENABLE_HEADER_WITHOUT_USERNAME flag. VAN-1804
openedx · Feb 7, 2024 · 4cc31ca · 4cc31ca
1 parent 3b2a2bf
commit 4cc31ca
Show file tree

Hide file tree

Showing 14 changed files with 282 additions and 59 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
@@ -19,76 +19,50 @@ class DesktopHeader extends React.Component {
     super(props);
   }
 
-  renderMainMenu() {
-    const { mainMenu } = this.props;
-
-    // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) {
-      return mainMenu;
-    }
-
-    return mainMenu.map((menuItem) => {
-      const {
-        type,
-        href,
-        content,
-        submenuContent,
-      } = menuItem;
-
-      if (type === 'item') {
-        return (
-          <a key={`${type}-${content}`} className="nav-link" href={href}>{content}</a>
-        );
-      }
-
-      return (
-        <Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
-          <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
-            {content} <CaretIcon role="img" aria-hidden focusable="false" />
-          </MenuTrigger>
-          <MenuContent className="pin-left pin-right shadow py-2">
-            {submenuContent}
-          </MenuContent>
-        </Menu>
-      );
-    });
-  }
+  userMenuWithUsername() {
+    const {
+      userMenu,
+      avatar,
+      username,
+      intl,
+    } = this.props;
 
-  // Renders an optional App Menu for
-  renderAppMenu() {
-    const { appMenu } = this.props;
-    const { content: appMenuContent, menuItems } = appMenu;
     return (
       <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
-        <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center">
-          {appMenuContent} <CaretIcon role="img" aria-hidden focusable="false" />
+        <MenuTrigger
+          tag="button"
+          aria-label={intl.formatMessage(messages['header.label.account.menu.with.username'], { username })}
+          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" />
         </MenuTrigger>
         <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
-          {menuItems.map(({ type, href, content }) => (
+          {userMenu.map(({ type, href, content }) => (
             <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
           ))}
         </MenuContent>
       </Menu>
     );
   }
 
-  renderUserMenu() {
+  userMenuWithoutUsername() {
     const {
       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.without.username'], { 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" />
+          <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 }) => (
@@ -99,6 +73,63 @@ class DesktopHeader extends React.Component {
     );
   }
 
+  renderUserMenu() {
+    return (getConfig().ENABLE_HEADER_WITHOUT_USERNAME ? this.userMenuWithoutUsername() : this.userMenuWithUsername());
+  }
+
+  // Renders an optional App Menu for
+  renderAppMenu() {
+    const { appMenu } = this.props;
+    const { content: appMenuContent, menuItems } = appMenu;
+    return (
+      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
+        <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center">
+          {appMenuContent} <CaretIcon role="img" aria-hidden focusable="false" />
+        </MenuTrigger>
+        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
+          {menuItems.map(({ type, href, content }) => (
+            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
+          ))}
+        </MenuContent>
+      </Menu>
+    );
+  }
+
+  renderMainMenu() {
+    const { mainMenu } = this.props;
+
+    // Nodes are accepted as a prop
+    if (!Array.isArray(mainMenu)) {
+      return mainMenu;
+    }
+
+    return mainMenu.map((menuItem) => {
+      const {
+        type,
+        href,
+        content,
+        submenuContent,
+      } = menuItem;
+
+      if (type === 'item') {
+        return (
+          <a key={`${type}-${content}`} className="nav-link" href={href}>{content}</a>
+        );
+      }
+
+      return (
+        <Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
+          <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
+            {content} <CaretIcon role="img" aria-hidden focusable="false" />
+          </MenuTrigger>
+          <MenuContent className="pin-left pin-right shadow py-2">
+            {submenuContent}
+          </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.messages.jsx b/src/Header.messages.jsx
@@ -76,11 +76,16 @@ const messages = defineMessages({
     defaultMessage: 'Account Menu',
     description: 'The aria label for the account menu trigger',
   },
-  'header.label.account.menu.for': {
-    id: 'header.label.account.menu.for',
+  'header.label.account.menu.with.username': {
+    id: 'header.label.account.menu.with.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',
+    defaultMessage: 'Account menu for {name}',
+    description: 'The aria label for the account menu trigger when ENABLE_HEADER_WITHOUT_USERNAME is enabled',
+  },
   'header.label.main.nav': {
     id: 'header.label.main.nav',
     defaultMessage: 'Main',

diff --git a/src/Header.test.jsx b/src/Header.test.jsx
@@ -38,11 +38,12 @@ describe('<Header />', () => {
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
-  it('renders correctly for authenticated desktop', () => {
+  it('renders correctly for authenticated desktop with username', () => {
     const contextValue = {
       authenticatedUser: {
         userId: 'abc123',
         username: 'edX',
+        name: 'edX',
         roles: [],
         administrator: false,
       },
@@ -61,6 +62,30 @@ describe('<Header />', () => {
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
+  it('renders correctly for authenticated desktop without username', () => {
+    const contextValue = {
+      authenticatedUser: {
+        userId: 'abc123',
+        name: 'edX',
+        roles: [],
+        administrator: false,
+      },
+      config: {
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
+        SITE_NAME: process.env.SITE_NAME,
+        LOGIN_URL: process.env.LOGIN_URL,
+        LOGOUT_URL: process.env.LOGOUT_URL,
+        LOGO_URL: process.env.LOGO_URL,
+        ENABLE_HEADER_WITHOUT_USERNAME: true,
+      },
+    };
+    const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
   it('renders correctly for anonymous mobile', () => {
     const contextValue = {
       authenticatedUser: null,
@@ -84,6 +109,7 @@ describe('<Header />', () => {
       authenticatedUser: {
         userId: 'abc123',
         username: 'edX',
+        name: 'edX',
         roles: [],
         administrator: false,
       },