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

Co-authored-by: asadiqbal08 <asad.iqbal@arbisoft.com>

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,11 +63,6 @@ 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,
@@ -69,6 +70,11 @@ function Header({ intl }) {
     },
   ];
 
+  // 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();
+  });
+});

src/learning-header/messages.js

@@ -0,0 +1,41 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  dashboard: {
+    id: 'header.menu.dashboard.label',
+    defaultMessage: 'Dashboard',
+    description: 'The text for the user menu Dashboard navigation link.',
+  },
+  help: {
+    id: 'header.help.label',
+    defaultMessage: 'Help',
+    description: 'The text for the link to the Help Center',
+  },
+  profile: {
+    id: 'header.menu.profile.label',
+    defaultMessage: 'Profile',
+    description: 'The text for the user menu Profile navigation link.',
+  },
+  account: {
+    id: 'header.menu.account.label',
+    defaultMessage: 'Account',
+    description: 'The text for the user menu Account navigation link.',
+  },
+  orderHistory: {
+    id: 'header.menu.orderHistory.label',
+    defaultMessage: 'Order History',
+    description: 'The text for the user menu Order History navigation link.',
+  },
+  skipNavLink: {
+    id: 'header.navigation.skipNavLink',
+    defaultMessage: 'Skip to main content.',
+    description: 'A link used by screen readers to allow users to skip to the main content of the page.',
+  },
+  signOut: {
+    id: 'header.menu.signOut.label',
+    defaultMessage: 'Sign Out',
+    description: 'The label for the user menu Sign Out action.',
+  },
+});
+
+export default messages;

src/setupTest.js

@@ -1,8 +1,21 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 import Enzyme from 'enzyme';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Adapter from 'enzyme-adapter-react-16';
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
 import 'babel-polyfill';
+import 'jest-chain';
+import { getConfig, mergeConfig } from '@edx/frontend-platform';
+import { configure as configureLogging } from '@edx/frontend-platform/logging';
+import { configure as configureI18n } from '@edx/frontend-platform/i18n';
+import { configure as configureAuth, MockAuthService } from '@edx/frontend-platform/auth';
+import { render as rtlRender } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import AppProvider from '@edx/frontend-platform/react/AppProvider';
+import appMessages from './i18n';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -16,7 +29,7 @@ process.env.ECOMMERCE_BASE_URL = 'http://localhost:18130';
 process.env.LANGUAGE_PREFERENCE_COOKIE_NAME = 'openedx-language-preference';
 process.env.LMS_BASE_URL = 'http://localhost:18000';
 process.env.LOGIN_URL = 'http://localhost:18000/login';
-process.env.LOGOUT_URL = 'http://localhost:18000/login';
+process.env.LOGOUT_URL = 'http://localhost:18000/logout';
 process.env.MARKETING_SITE_BASE_URL = 'http://localhost:18000';
 process.env.ORDER_HISTORY_URL = 'localhost:1996/orders';
 process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refresh';
@@ -27,3 +40,90 @@ process.env.LOGO_URL = 'https://edx-cdn.org/v3/default/logo.svg';
 process.env.LOGO_TRADEMARK_URL = 'https://edx-cdn.org/v3/default/logo-trademark.svg';
 process.env.LOGO_WHITE_URL = 'https://edx-cdn.org/v3/default/logo-white.svg';
 process.env.FAVICON_URL = 'https://edx-cdn.org/v3/default/favicon.ico';
+
+class MockLoggingService {
+  logInfo = jest.fn();
+
+  logError = jest.fn();
+}
+
+export const authenticatedUser = {
+  userId: 'abc123',
+  username: 'Mock User',
+  roles: [],
+  administrator: false,
+};
+
+export function initializeMockApp() {
+  mergeConfig({
+    INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
+    STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
+    TWITTER_URL: process.env.TWITTER_URL || null,
+    BASE_URL: process.env.BASE_URL || null,
+    LMS_BASE_URL: process.env.LMS_BASE_URL || null,
+    LOGIN_URL: process.env.LOGIN_URL || null,
+    LOGOUT_URL: process.env.LOGOUT_URL || null,
+    REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT || null,
+    ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME || null,
+    CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH || null,
+    LOGO_URL: process.env.LOGO_URL || null,
+    SITE_NAME: process.env.SITE_NAME || null,
+
+    authenticatedUser: {
+      userId: 'abc123',
+      username: 'Mock User',
+      roles: [],
+      administrator: false,
+    },
+  });
+
+  const loggingService = configureLogging(MockLoggingService, {
+    config: getConfig(),
+  });
+  const authService = configureAuth(MockAuthService, {
+    config: getConfig(),
+    loggingService,
+  });
+
+  // i18n doesn't have a service class to return.
+  configureI18n({
+    config: getConfig(),
+    loggingService,
+    messages: [appMessages],
+  });
+
+  return { loggingService, authService };
+}
+
+function render(
+  ui,
+  {
+    store = null,
+    ...renderOptions
+  } = {},
+) {
+  function Wrapper({ children }) {
+    return (
+    // eslint-disable-next-line react/jsx-filename-extension
+      <IntlProvider locale="en">
+        <AppProvider store={store}>
+          {children}
+        </AppProvider>
+      </IntlProvider>
+    );
+  }
+
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+// Re-export everything.
+export * from '@testing-library/react';
+
+// Override `render` method.
+export {
+  render,
+};