feat: Introduced Learning Course Header in Header MFE. (#133)

Co-authored-by: asadiqbal08 <[email protected]>

jest.config.js

@@ -1,7 +1,7 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
-  setupFiles: [
+  setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
 });

package.json

@@ -49,12 +49,22 @@
     "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
     "redux": "4.1.2",
-    "redux-saga": "1.1.3"
+    "redux-saga": "1.1.3",
+    "@testing-library/dom": "7.16.3",
+    "@testing-library/jest-dom": "5.15.1",
+    "jest": "27.3.1",
+    "jest-chain": "1.1.5",
+    "@testing-library/react": "10.3.0"
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
     "react-responsive": "8.2.0",
-    "react-transition-group": "4.4.2"
+    "react-transition-group": "4.4.2",
+    "@fortawesome/fontawesome-svg-core": "1.2.34",
+    "@fortawesome/free-brands-svg-icons": "5.13.1",
+    "@fortawesome/free-regular-svg-icons": "5.13.1",
+    "@fortawesome/free-solid-svg-icons": "5.13.1",
+    "@fortawesome/react-fontawesome": "^0.1.14"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^1.8.0",

src/Header.jsx

@@ -41,6 +41,12 @@ function Header({ intl }) {
     },
   ];
 
+  const orderHistoryItem = {
+    type: 'item',
+    href: config.ORDER_HISTORY_URL,
+    content: intl.formatMessage(messages['header.user.menu.order.history']),
+  };
+
   const userMenu = authenticatedUser === null ? [] : [
     {
       type: 'item',
@@ -57,18 +63,18 @@ function Header({ intl }) {
       href: `${config.LMS_BASE_URL}/account/settings`,
       content: intl.formatMessage(messages['header.user.menu.account.settings']),
     },
-    {
-      type: 'item',
-      href: config.ORDER_HISTORY_URL,
-      content: intl.formatMessage(messages['header.user.menu.order.history']),
-    },
     {
       type: 'item',
       href: config.LOGOUT_URL,
       content: intl.formatMessage(messages['header.user.menu.logout']),
     },
   ];
 
+  // Users should only see Order History if have a ORDER_HISTORY_URL define in the environment.
+  if (config.ORDER_HISTORY_URL) {
+    userMenu.splice(-1, 0, orderHistoryItem);
+  }
+
   const loggedOutItems = [
     {
       type: 'item',

src/generic/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  registerSentenceCase: {
+    id: 'general.register.sentenceCase',
+    defaultMessage: 'Register',
+    description: 'Text in a button, prompting the user to register.',
+  },
+  signInSentenceCase: {
+    id: 'general.signIn.sentenceCase',
+    defaultMessage: 'Sign in',
+    description: 'Text in a button, prompting the user to log in.',
+  },
+});
+
+export default messages;

src/i18n/index.js

@@ -1,4 +1,13 @@
 import arMessages from './messages/ar.json';
+
+import caMessages from './messages/ca.json';
+import heMessages from './messages/he.json';
+import idMessages from './messages/id.json';
+import plMessages from './messages/pl.json';
+import ruMessages from './messages/ru.json';
+import thMessages from './messages/th.json';
+import ukMessages from './messages/uk.json';
+
 // no need to import en messages-- they are in the defaultMessage field
 import es419Messages from './messages/es_419.json';
 import frMessages from './messages/fr.json';
@@ -8,6 +17,13 @@ import zhcnMessages from './messages/zh_CN.json';
 
 const messages = {
   ar: arMessages,
+  ca: caMessages,
+  he: heMessages,
+  id: idMessages,
+  pl: plMessages,
+  ru: ruMessages,
+  th: thMessages,
+  uk: ukMessages,
   'es-419': es419Messages,
   fr: frMessages,
   'zh-cn': zhcnMessages,

src/i18n/messages/ca.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/he.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/id.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/pl.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/ru.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/th.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/uk.json

@@ -0,0 +1 @@
+{}

src/index.jsx

@@ -1,6 +1,7 @@
 import Header from './Header';
+import LearningHeader from './learning-header/LearningHeader';
 import messages from './i18n/index';
 
-export { messages };
+export { LearningHeader, messages };
 
 export default Header;

src/index.scss

@@ -25,6 +25,30 @@ $white: #fff;
   }
 }
 
+.learning-header {
+  min-width: 0;
+
+  .course-title-lockup {
+    min-width: 0;
+
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.1rem;
+    }
+  }
+
+  .user-dropdown {
+    .btn {
+      height: 3rem;
+      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+        padding: 0 0.5rem;
+      }
+    }
+  }
+}
+
 .site-header-mobile,
 .site-header-desktop {
   position: relative;

src/learning-header/AnonymousUserMenu.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import genericMessages from '../generic/messages';
+
+function AnonymousUserMenu({ intl }) {
+  return (
+    <div>
+      <Button
+        className="mr-3"
+        variant="outline-primary"
+        href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
+      >
+        {intl.formatMessage(genericMessages.registerSentenceCase)}
+      </Button>
+      <Button
+        variant="primary"
+        href={`${getLoginRedirectUrl(global.location.href)}`}
+      >
+        {intl.formatMessage(genericMessages.signInSentenceCase)}
+      </Button>
+    </div>
+  );
+}
+
+AnonymousUserMenu.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AnonymousUserMenu);

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@edx/paragon';
+
+import messages from './messages';
+
+function AuthenticatedUserDropdown({ intl, username }) {
+  const dashboardMenuItem = (
+    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
+      {intl.formatMessage(messages.dashboard)}
+    </Dropdown.Item>
+  );
+
+  return (
+    <>
+      <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      <Dropdown className="user-dropdown">
+        <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>
+        <Dropdown.Menu className="dropdown-menu-right">
+          {dashboardMenuItem}
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>
+            {intl.formatMessage(messages.profile)}
+          </Dropdown.Item>
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
+            {intl.formatMessage(messages.account)}
+          </Dropdown.Item>
+          { getConfig().ORDER_HISTORY_URL && (
+            <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
+              {intl.formatMessage(messages.orderHistory)}
+            </Dropdown.Item>
+          )}
+          <Dropdown.Item href={getConfig().LOGOUT_URL}>
+            {intl.formatMessage(messages.signOut)}
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+}
+
+AuthenticatedUserDropdown.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired,
+};
+
+export default injectIntl(AuthenticatedUserDropdown);

src/learning-header/LearningHeader.jsx

@@ -0,0 +1,81 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import AnonymousUserMenu from './AnonymousUserMenu';
+import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
+import messages from './messages';
+
+function LinkedLogo({
+  href,
+  src,
+  alt,
+  ...attributes
+}) {
+  return (
+    <a href={href} {...attributes}>
+      <img className="d-block" src={src} alt={alt} />
+    </a>
+  );
+}
+
+LinkedLogo.propTypes = {
+  href: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+};
+
+function LearningHeader({
+  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
+}) {
+  const { authenticatedUser } = useContext(AppContext);
+
+  const headerLogo = (
+    <LinkedLogo
+      className="logo"
+      href={`${getConfig().LMS_BASE_URL}/dashboard`}
+      src={getConfig().LOGO_URL}
+      alt={getConfig().SITE_NAME}
+    />
+  );
+
+  return (
+    <header className="learning-header">
+      <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
+      <div className="container-xl py-2 d-flex align-items-center">
+        {headerLogo}
+        <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
+          <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
+          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+        </div>
+        {showUserDropdown && authenticatedUser && (
+          <AuthenticatedUserDropdown
+            username={authenticatedUser.username}
+          />
+        )}
+        {showUserDropdown && !authenticatedUser && (
+          <AnonymousUserMenu />
+        )}
+      </div>
+    </header>
+  );
+}
+
+LearningHeader.propTypes = {
+  courseOrg: PropTypes.string,
+  courseNumber: PropTypes.string,
+  courseTitle: PropTypes.string,
+  intl: intlShape.isRequired,
+  showUserDropdown: PropTypes.bool,
+};
+
+LearningHeader.defaultProps = {
+  courseOrg: null,
+  courseNumber: null,
+  courseTitle: null,
+  showUserDropdown: true,
+};
+
+export default injectIntl(LearningHeader);

src/learning-header/LearningHeader.test.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  authenticatedUser, initializeMockApp, render, screen,
+} from '../setupTest';
+import { LearningHeader as Header } from '../index';
+
+describe('Header', () => {
+  beforeAll(async () => {
+    // We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`.
+    await initializeMockApp();
+  });
+
+  it('displays user button', () => {
+    render(<Header />);
+    expect(screen.getByRole('button')).toHaveTextContent(authenticatedUser.username);
+  });
+
+  it('displays course data', () => {
+    const courseData = {
+      courseOrg: 'course-org',
+      courseNumber: 'course-number',
+      courseTitle: 'course-title',
+    };
+    render(<Header {...courseData} />);
+
+    expect(screen.getByText(`${courseData.courseOrg} ${courseData.courseNumber}`)).toBeInTheDocument();
+    expect(screen.getByText(courseData.courseTitle)).toBeInTheDocument();
+  });
+});