Merge pull request #107 from bitmakerla/chris/order_history_in_user_menu

feat: Order history item added in user menu

.env.development

@@ -6,7 +6,7 @@ ECOMMERCE_BASE_URL=http://localhost:18130
 LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
 LMS_BASE_URL=http://localhost:18000
 LOGIN_URL=http://localhost:18000/login
-LOGOUT_URL=http://localhost:18000/login
+LOGOUT_URL=http://localhost:18000/logout
 MARKETING_SITE_BASE_URL=http://localhost:18000
 ORDER_HISTORY_URL=localhost:1996/orders
 REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @edx/community-engineering

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
       with:
         fetch-depth: 0
     - name: Setup Nodejs
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v2
       with:
         node-version: 12
     - name: Install dependencies

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
         with:
           fetch-depth: 0
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: 12
       - name: Install dependencies

.gitignore

@@ -6,3 +6,4 @@ node_modules
 temp
 src/i18n/transifex_input.json
 module.config.js
+.idea/

README.rst

@@ -1,11 +1,76 @@
+#########################
 frontend-component-header
-=========================
+#########################
 
 |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
 
-This is the standard Open edX header for use in React applications. It has two exports:
-  - **default**: The Header Component
-  - **messages**: for i18n in the form of ``{ locale: { key: translatedString } }``
+********
+Overview
+********
+
+A generic header for Open edX micro-frontend applications.
+
+************
+Requirements
+************
+
+This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. <https://github.com/edx/frontend-template-application/blob/master/src/index.jsx>`_
+
+Environment Variables
+=====================
+
+* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
+* ``LOGOUT_URL`` - The URL of the API endpoint which performs a user logout.
+* ``LOGIN_URL`` - The URL of the login page where a user can sign into their account.
+* ``SITE_NAME`` - The user-facing name of the site, used as `alt` text on the logo in the header.
+  Defaults to "localhost" in development.
+* ``LOGO_URL`` - The URL of the site's logo.  This logo is displayed in the header.
+* ``ORDER_HISTORY_URL`` - The URL of the order history page.
+* ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out
+  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.
+
+************
+Installation
+************
+
+To install this header into your Open edX micro-frontend, run the following command in your MFE:
+
+``npm i --save @edx/frontend-component-header``
+
+This will make the component available to be imported into your application.
+
+*****
+Usage
+*****
+
+This library has the following exports:
+
+* ``(default)``: The header as a React component.
+* ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
+* ``dist/index.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
+
+Examples
+========
+
+* `An example of component and messages usage. <https://github.com/edx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
+* `An example of SCSS file usage. <https://github.com/edx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_
+
+***********
+Development
+***********
+
+Install dependencies::
+
+  npm i
+
+Start the development server::
+
+  npm start
+
+Build a production distribution::
+
+  npm run build
 
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
    :target: https://travis-ci.com/edx/frontend-component-header

package.json

@@ -34,32 +34,32 @@
   },
   "homepage": "https://github.com/edx/frontend-component-header#readme",
   "devDependencies": {
-    "@commitlint/cli": "8.2.0",
-    "@commitlint/config-angular": "8.2.0",
-    "@commitlint/prompt": "8.2.0",
-    "@commitlint/prompt-cli": "8.2.0",
+    "@commitlint/cli": "12.1.4",
+    "@commitlint/config-angular": "12.1.4",
+    "@commitlint/prompt": "12.1.4",
+    "@commitlint/prompt-cli": "12.1.4",
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-build": "5.4.0",
-    "@edx/frontend-platform": "1.8.1",
-    "@edx/paragon": "12.0.5",
-    "codecov": "3.7.2",
-    "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.14.0",
-    "husky": "3.0.9",
+    "@edx/frontend-build": "5.6.14",
+    "@edx/frontend-platform": "1.11.0",
+    "@edx/paragon": "12.8.0",
+    "codecov": "3.8.2",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
+    "husky": "6.0.0",
     "prop-types": "15.7.2",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "react-redux": "7.1.3",
-    "react-router-dom": "5.1.2",
-    "react-test-renderer": "16.9.0",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-redux": "7.2.4",
+    "react-router-dom": "5.2.0",
+    "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
-    "redux": "4.0.4",
-    "redux-saga": "1.1.1"
+    "redux": "4.1.0",
+    "redux-saga": "1.1.3"
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
-    "react-responsive": "8.0.3",
-    "react-transition-group": "4.3.0"
+    "react-responsive": "8.2.0",
+    "react-transition-group": "4.4.2"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^1.8.0",

renovate.json

@@ -1,9 +1,28 @@
 {
   "extends": [
-    "config:base"
+    "config:base",
+    "schedule:weekly",
+    ":automergeLinters",
+    ":automergeMinor",
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
   ],
-  "patch": {
-    "automerge": true
-  },
-  "rebaseStalePrs": true
+  "packageRules": [
+    {
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    }
+  ],
+  "timezone": "America/New_York"
 }

src/DesktopHeader.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
@@ -103,10 +104,12 @@ class DesktopHeader extends React.Component {
       intl,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
 
     return (
       <header className="site-header-desktop">
-        <div className="container-fluid">
+        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+        <div className={`container-fluid ${logoClasses}`}>
           <div className="nav-container position-relative d-flex align-items-center">
             {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
             <nav

src/Header.jsx

@@ -21,6 +21,7 @@ ensureConfig([
   'LOGIN_URL',
   'SITE_NAME',
   'LOGO_URL',
+  'ORDER_HISTORY_URL',
 ], 'Header component');
 
 subscribe(APP_CONFIG_INITIALIZED, () => {
@@ -56,6 +57,11 @@ 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,
@@ -79,7 +85,6 @@ function Header({ intl }) {
   const props = {
     logo: config.LOGO_URL,
     logoAltText: config.SITE_NAME,
-    siteName: config.SITE_NAME,
     logoDestination: `${config.LMS_BASE_URL}/dashboard`,
     loggedIn: authenticatedUser !== null,
     username: authenticatedUser !== null ? authenticatedUser.username : null,

src/Header.messages.jsx

@@ -91,6 +91,11 @@ const messages = defineMessages({
     defaultMessage: 'Secondary',
     description: 'The aria label for the seconary nav',
   },
+  'header.label.skip.nav': {
+    id: 'header.label.skip.nav',
+    defaultMessage: 'Skip to main content',
+    description: 'A link used by screen readers to allow users to skip to the main content of the page.',
+  },
 });
 
 export default messages;

src/MobileHeader.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
@@ -96,14 +97,17 @@ class MobileHeader extends React.Component {
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
     const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
+    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
 
     return (
       <header
         aria-label={intl.formatMessage(messages['header.label.main.header'])}
         className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
       >
-        <div className="w-100 d-flex justify-content-start">
-          {mainMenu.length > 0 ? (
+        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+        {mainMenu.length > 0 ? (
+          <div className="w-100 d-flex justify-content-start">
+
             <Menu className="position-static">
               <MenuTrigger
                 tag="button"
@@ -121,13 +125,13 @@ class MobileHeader extends React.Component {
                 {this.renderMainMenu()}
               </MenuContent>
             </Menu>
-          ) : null}
-        </div>
-        <div className="w-100 d-flex justify-content-center">
+          </div>
+        ) : null}
+        <div className={`w-100 d-flex ${logoClasses}`}>
           { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
         </div>
-        <div className="w-100 d-flex justify-content-end align-items-center">
-          {userMenu.length > 0 || loggedOutItems.length > 0 ? (
+        {userMenu.length > 0 || loggedOutItems.length > 0 ? (
+          <div className="w-100 d-flex justify-content-end align-items-center">
             <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
               <MenuTrigger
                 tag="button"
@@ -141,8 +145,8 @@ class MobileHeader extends React.Component {
                 {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
               </MenuContent>
             </Menu>
-          ) : null}
-        </div>
+          </div>
+        ) : null}
       </header>
     );
   }

src/__snapshots__/Header.test.jsx.snap

@@ -4,8 +4,14 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
 <header
   className="site-header-desktop"
 >
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
   <div
-    className="container-fluid"
+    className="container-fluid null"
   >
     <div
       className="nav-container position-relative d-flex align-items-center"
@@ -58,6 +64,12 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
   aria-label="Main"
   className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
 >
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
   <div
     className="w-100 d-flex justify-content-start"
   >
@@ -188,8 +200,14 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
 <header
   className="site-header-desktop"
 >
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
   <div
-    className="container-fluid"
+    className="container-fluid null"
   >
     <div
       className="nav-container position-relative d-flex align-items-center"
@@ -292,6 +310,12 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
   aria-label="Main"
   className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
 >
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
   <div
     className="w-100 d-flex justify-content-start"
   >