fix: header user info menu item design (#562)

Author: syedsajjadkazmii

src/DesktopHeader.jsx

@@ -75,12 +75,17 @@ class DesktopHeader extends React.Component {
           data-hj-suppress
         />
         <Dropdown.Menu alignRight>
-          <Dropdown.Item key="user-info">
-            <UserMenuItem
-              name={name}
-              email={email}
-            />
-          </Dropdown.Item>
+          {(name || email) && (
+            <Dropdown.Item
+              key="user-info"
+              className="user-info__menu-item"
+            >
+              <UserMenuItem
+                name={name}
+                email={email}
+              />
+            </Dropdown.Item>
+          )}
           {userMenu.map(({ type, href, content }) => (
             <Dropdown.Item key={`${type}-${content}`} href={href}>
               {content}

src/MobileHeader.jsx

@@ -59,17 +59,19 @@ class MobileHeader extends React.Component {
 
   renderUserMenuItems() {
     const { userMenu, name, email } = this.props;
-    const userInfoItem = (
-      <li className="nav-item" key="user-info">
+    const userInfoItem = (name || email) ? (
+      <li className="nav-item user-info__menu-item" key="user-info">
         <UserMenuItem name={name} email={email} />
       </li>
-    );
+    ) : null;
+
     const userMenuItems = userMenu.map(({ type, href, content }) => (
       <li className="nav-item" key={`${type}-${content}`}>
         <a className="nav-link" href={href}>{content}</a>
       </li>
     ));
-    return [userInfoItem, ...userMenuItems];
+
+    return userInfoItem ? [userInfoItem, ...userMenuItems] : userMenuItems;
   }
 
   renderLoggedOutItems() {

src/common/style.scss

@@ -1,8 +1,14 @@
+// bottom boarder of first child of user info dropdown menu item
+.user-info__menu-item {
+  border-bottom: 1px solid #70828E !important;
+  pointer-events: none;
+}
+
 @media screen and (max-width: 768px) {
-  .menu-content li:first-child {
+  .menu-content .user-info__menu-item {
     display: flex;
     align-items: center;
-    padding: 0 16px;
+    padding: 0.625rem 1rem;
     border-bottom: 1px solid #70828E;
 
     a {

src/index.scss

@@ -119,8 +119,3 @@ $white: #fff;
     border-radius: $rounded-pill;
   }
 }
-
-// bottom boarder of first child of user dropdown menu
-.dropdown-menu a:first-child {
-  border-bottom: 1px solid #70828E !important;
-}

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -36,6 +36,7 @@ const AuthenticatedUserDropdown = (props) => {
       {intl.formatMessage(messages.dashboard)}
     </Dropdown.Item>
   );
+
   let careersMenuItem = (
     <Dropdown.Item href="https://careers.edx.org/">
       {intl.formatMessage(messages.career)}
@@ -44,11 +45,20 @@ const AuthenticatedUserDropdown = (props) => {
       </Badge>
     </Dropdown.Item>
   );
-  const userMenuItem = (
-    <Dropdown.Item data-testid="user-item">
-      <UserMenuItem name={name} email={email} />
+
+  const userMenuItem = (name || email) ? (
+    <Dropdown.Item
+      key="user-info"
+      data-testid="user-item"
+      className="user-info__menu-item"
+    >
+      <UserMenuItem
+        name={name}
+        email={email}
+      />
     </Dropdown.Item>
-  );
+  ) : null;
+
   if (enterpriseLearnerPortalLink && Object.keys(enterpriseLearnerPortalLink).length > 0) {
     dashboardMenuItem = (
       <Dropdown.Item

src/learning-header/LearningHeader.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AppContext } from '@edx/frontend-platform/react';
 import {
   fireEvent, initializeMockApp, render, screen,
 } from '../setupTest';
@@ -16,7 +17,28 @@ describe('Header', () => {
   });
 
   it('displays user menu in dropdown', () => {
-    render(<Header />);
+    const authenticatedUser = {
+      userId: 'abc123',
+      username: 'edX',
+      name: 'edX',
+      email: '[email protected]',
+      roles: [],
+      administrator: false,
+    };
+    const contextValue = {
+      authenticatedUser,
+      config: {},
+    };
+    const component = (
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <Header />
+      </AppContext.Provider>
+    );
+
+    render(component);
+
     const button = screen.getByRole('button', { className: 'dropdown-toggle' });
     fireEvent.click(button);
     const userMenuItem = screen.queryByTestId('user-item');

src/studio-header/NavDropdownMenu.jsx

@@ -20,15 +20,17 @@ const NavDropdownMenu = ({
     variant="outline-primary"
     className="mr-2"
   >
+    {(name || email) && (
     <Dropdown.Item
       key="user-info"
-      className="small"
+      className="small user-info__menu-item"
     >
       <UserMenuItem
         name={name}
         email={email}
       />
     </Dropdown.Item>
+    )}
     {items.map(item => (
       <Dropdown.Item
         key={`${item.title}-dropdown-item`}