feat: display multiple dashboards and some style fixes

Author: jsnwesson

.env.development

@@ -23,3 +23,4 @@ FAVICON_URL=https://edx-cdn.org/v3/prod/favicon.ico
 NOTIFICATION_FEEDBACK_URL=''
 CAREERS_URL=''
 STUDIO_BASE_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=true

.env.test

@@ -23,3 +23,4 @@ FAVICON_URL=https://edx-cdn.org/v3/prod/favicon.ico
 NOTIFICATION_FEEDBACK_URL=''
 CAREERS_URL=''
 STUDIO_BASE_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=true

src/DesktopHeader.jsx

@@ -9,7 +9,6 @@ import NotificationsSlot from './plugin-slots/NotificationsSlot';
 import UserMenuGroupItemSlot from './plugin-slots/UserMenuGroupItemSlot';
 import UserMenuGroupSlot from './plugin-slots/UserMenuGroupSlot';
 import UserMenuItem from './common/UserMenuItem';
-import UserDashboardMenu from './common/UserDashboardMenu';
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import { LinkedLogo, Logo } from './Logo';
 
@@ -111,11 +110,10 @@ class DesktopHeader extends React.Component {
               />
             </Dropdown.Item>
           )}
-          <UserMenuGroupSlot />
-          <UserDashboardMenu
+          <UserMenuGroupSlot
             hasEnterpriseAccount={hasEnterpriseAccount}
-            enterpriseOrg={logoAltText}
-            enterpriseSrc={logoDestination}
+            logoAltText={logoAltText}
+            logoDestination={logoDestination}
           />
           {userMenu.map((group, index) => (
             // eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key

src/Header.jsx

@@ -73,7 +73,7 @@ const Header = ({
       type: 'item',
       href: `${config.LMS_BASE_URL}/dashboard`,
       content: intl.formatMessage(messages['header.links.courses']),
-      isActive: document.title.includes('Learner Home'),
+      isActive: document.title.includes(intl.formatMessage(messages['header.pages.learner.home'])),
     },
     {
       type: 'item',
@@ -93,26 +93,12 @@ const Header = ({
     },
   ];
 
-  // const dashboardMenuItem = {
-  //   type: 'item',
-  //   href: `${config.LMS_BASE_URL}/dashboard`,
-  //   content: intl.formatMessage(messages['header.user.menu.dashboard']),
-  // };
-
   const logoutMenuItem = {
     type: 'item',
     href: config.LOGOUT_URL,
     content: intl.formatMessage(messages['header.user.menu.logout']),
   };
 
-  // If there is an Enterprise LP link, use that instead of the B2C Dashboard
-  // let baseUserMenuDashboardLinks = [];
-  // if (enterpriseLearnerPortalLink) {
-  //   baseUserMenuDashboardLinks = [enterpriseLearnerPortalLink];
-  // } else {
-  //   baseUserMenuDashboardLinks = [dashboardMenuItem];
-  // }
-
   const defaultSecondaryMenu = [
     ...(getConfig().SUPPORT_URL ? [{
       type: 'item',
@@ -125,7 +111,10 @@ const Header = ({
   const defaultUserMenu = authenticatedUser === null ? [] : [{
     heading: '',
     items: [
-      // ...baseUserMenuDashboardLinks,
+      // Users should only see Career button if they do not have an available
+      // learner portal, because an available learner portal currently means
+      // that they access content via B2B Subscriptions, in which context "career" button
+      // is not relevant.
       ...(!enterpriseLearnerPortalLink ? [{
         type: 'item',
         href: 'https://careers.edx.org/',
@@ -141,13 +130,13 @@ const Header = ({
         type: 'item',
         href: `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,
         content: intl.formatMessage(messages['header.user.menu.profile']),
-        isActive: document.title.includes('Profile'),
+        isActive: document.title.includes(intl.formatMessage(messages['header.user.menu.profile'])),
       },
       {
         type: 'item',
         href: config.ACCOUNT_SETTINGS_URL,
         content: intl.formatMessage(messages['header.user.menu.account.settings']),
-        isActive: document.title.includes('Account'),
+        isActive: document.title.includes(intl.formatMessage(messages['header.user.menu.account.settings'])),
       },
       // Users should only see Order History if they do not have an available
       // learner portal and have a ORDER_HISTORY_URL define in the environment,
@@ -167,11 +156,17 @@ const Header = ({
   const secondaryMenu = secondaryMenuItems || defaultSecondaryMenu;
   let userMenu = authenticatedUser === null ? [] : userMenuItems || defaultUserMenu;
 
+  const minimalDashboardMenuItem = {
+    type: 'item',
+    href: `${config.LMS_BASE_URL}/dashboard`,
+    content: intl.formatMessage(messages['header.user.menu.dashboard']),
+  };
+
   if (getConfig().MINIMAL_HEADER && authenticatedUser !== null) {
     userMenu = [{
       heading: '',
       items: [
-        // dashboardMenuItem,
+        minimalDashboardMenuItem,
         logoutMenuItem,
       ],
     }];

src/Header.messages.jsx

@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  'header.pages.learner.home': {
+    id: 'header.pages.learner.home',
+    defaultMessage: 'Learner Home',
+    description: 'Title of the page in learner dashboard',
+  },
   'header.links.courses': {
     id: 'header.links.courses',
     defaultMessage: 'Courses',

src/Header.test.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
-import { useEnterpriseConfig } from '@edx/frontend-enterprise-utils';
+import { isEnterpriseUser, useEnterpriseConfig } from '@edx/frontend-enterprise-utils';
 import { AppContext } from '@edx/frontend-platform/react';
 import { getConfig } from '@edx/frontend-platform';
 import { Context as ResponsiveContext } from 'react-responsive';
@@ -44,6 +44,10 @@ const HeaderContext = ({ width, contextValue }) => (
 describe('<Header />', () => {
   beforeEach(() => {
     useEnterpriseConfig.mockReturnValue({});
+    getConfig.mockReturnValue({
+      ENABLE_EDX_PERSONAL_DASHBOARD: true,
+      SUPPORT_URL: 'http://localhost:18000/support',
+    });
   });
 
   beforeAll(async () => {
@@ -66,6 +70,10 @@ describe('<Header />', () => {
     });
   };
 
+  const mockIsEnterpriseUser = () => {
+    isEnterpriseUser.mockReturnValue(true);
+  };
+
   it('renders correctly for unauthenticated users on desktop', () => {
     const contextValue = {
       authenticatedUser: null,
@@ -138,22 +146,26 @@ describe('<Header />', () => {
     });
 
     expect(screen.getByText('Order History')).toBeInTheDocument();
+    expect(screen.queryByText('Career')).toBeInTheDocument();
+    expect(screen.getByText('Help')).toBeInTheDocument();
     expect(screen.getByText('Dashboard')).toBeInTheDocument();
 
     wrapper.unmount();
 
-    // When learner portal links are present, Order History should not be a dropdown item
+    // When learner portal links are present, Order History and Career should not be a dropdown item
     // We do this in the same test to avoid weird things about jest wanting you to use
     // the "correct" act() function (even though it gives the same warning regardless
     // of where you import it from, be it react-dom/test-utils or react-test-renderer).
+    mockIsEnterpriseUser();
     mockUseEnterpriseConfig();
     wrapper = render(component);
     await act(async () => {
       await flushPromises();
       fireEvent.click(wrapper.container.querySelector('#menu-dropdown'));
     });
     expect(screen.queryByText('Order History')).not.toBeInTheDocument();
-    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+    expect(screen.queryByText('Career')).not.toBeInTheDocument();
+    expect(screen.getByText('Personal')).toBeInTheDocument();
   });
 
   it('renders correctly for unauthenticated users on mobile', () => {

src/MobileHeader.jsx

@@ -8,7 +8,6 @@ import { AvatarButton } from '@openedx/paragon';
 import NotificationsSlot from './plugin-slots/NotificationsSlot';
 import UserMenuGroupSlot from './plugin-slots/UserMenuGroupSlot';
 import UserMenuGroupItemSlot from './plugin-slots/UserMenuGroupItemSlot';
-import UserDashboardMenu from './common/UserDashboardMenu';
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import { LinkedLogo, Logo } from './Logo';
 import UserMenuItem from './common/UserMenuItem';
@@ -108,18 +107,17 @@ class MobileHeader extends React.Component {
       ))
     ));
 
-    const userMenuGroupSlot = <UserMenuGroupSlot />;
-    const userMenuGroupItemSlot = <UserMenuGroupItemSlot />;
-    const userDashboardMenu = (
-      <UserDashboardMenu
+    const userMenuGroupSlot = (
+      <UserMenuGroupSlot
         hasEnterpriseAccount={hasEnterpriseAccount}
-        enterpriseOrg={logoAltText}
-        enterpriseSrc={logoDestination}
+        logoAltText={logoAltText}
+        logoDestination={logoDestination}
       />
     );
+    const userMenuGroupItemSlot = <UserMenuGroupItemSlot />;
 
     return userInfoItem
-      ? [userInfoItem, userDashboardMenu, userMenuGroupSlot, userMenuGroupItemSlot, ...userMenuItems]
+      ? [userInfoItem, userMenuGroupSlot, userMenuGroupItemSlot, ...userMenuItems]
       : [userMenuGroupSlot, userMenuGroupItemSlot, ...userMenuItems];
   }
 

src/__snapshots__/Header.test.jsx.snap

@@ -161,6 +161,13 @@ exports[`<Header /> renders correctly for authenticated users on desktop 1`] = `
         aria-label="Secondary"
         className="nav secondary-menu-container align-items-center ml-auto"
       >
+        <a
+          className="nav-link"
+          href="http://localhost:18000/support"
+          onClick={null}
+        >
+          Help
+        </a>
         <div
           className="pgn__dropdown pgn__dropdown-light dropdown"
           data-testid="dropdown"

src/common/UserDashboardMenu/index.test.jsx

@@ -5,11 +5,9 @@ import {
   screen,
   render,
 } from '@testing-library/react';
-import { useEnterpriseConfig } from '@edx/frontend-enterprise-utils';
 
 import UserDashboardMenu from './index'; // eslint-disable-line
 
-jest.mock('@edx/frontend-enterprise-utils');
 mergeConfig({ ENABLE_EDX_PERSONAL_DASHBOARD: true });
 const IntlUserDashboardMenu = injectIntl(UserDashboardMenu);
 
@@ -21,25 +19,24 @@ describe('User Dashboard Menu', () => {
     </IntlProvider>
   );
 
-  it('should render dashboard menu in the user menu dropdown', () => {
-    useEnterpriseConfig.mockReturnValue({
-      enterpriseLearnerPortalLink: {
-        type: 'item',
-        href: 'http://localhost:8000',
-        content: 'Dashboard',
-      },
-      enterpriseCustomerBrandingConfig: {
-        logoAltText: 'fake-enterprise-name',
-        logoDestination: 'http://fake.url',
-        logo: 'http://fake-logo.url',
-      },
-    });
-
-    render(Wrapper(<IntlUserDashboardMenu />));
+  it('should render enterprise dashboard menu in the user menu dropdown', () => {
+    render(Wrapper(<IntlUserDashboardMenu
+      enterpriseOrg="Fake Enterprise"
+      enterpriseSrc="http://fake.url"
+      hasEnterpriseAccount
+    />));
 
     const dashboardSwitchMenu = screen.getByText('SWITCH DASHBOARD');
-    const dashboardMenu = screen.getByText('Personal');
-    expect(dashboardMenu).toBeTruthy();
+    const personalDashboard = screen.getByText('Personal');
+    const enterpriseDashboard = screen.getByText('Fake Enterprise Dashboard');
     expect(dashboardSwitchMenu).toBeTruthy();
+    expect(personalDashboard).toBeTruthy();
+    expect(enterpriseDashboard).toBeTruthy();
+  });
+  it('should render only one dashboard menu in the user menu dropdown when not enterprise user', () => {
+    render(Wrapper(<IntlUserDashboardMenu />));
+
+    const personalDashboard = screen.getByText('Dashboard');
+    expect(personalDashboard).toBeTruthy();
   });
 });

src/index.scss

@@ -1,10 +1,3 @@
-$spacer: 1rem;
-$blue: #007db8;
-$white: #fff;
-$component-active-bg: #0A3055FF !default;
-$component-active-color: $white !default;
-$rounded-pill: 50rem  !default;
-
 @import './Menu/menu.scss';
 @import './studio-header/StudioHeader.scss';