fix: upgrading to frontend-base 2.0.0 (#3)

fix: export i18n messages properly

README.rst

@@ -7,15 +7,15 @@ This is the standard Open edX header for use in React applications. It has two e
   - **default**: The Header Component
   - **messages**: for i18n in the form of ``{ locale: { key: translatedString } }``
 
-.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-component-header.svg?branch=master-edx
-   :target: https://travis-ci.org/edx/frontend-component-header
+.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
+   :target: https://travis-ci.com/edx/frontend-component-header
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-header
    :target: @edx/frontend-component-header
-.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-header.svg-edx
+.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-header.svg
    :target: @edx/frontend-component-header
-.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-header.svg-edx
+.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-header.svg
    :target: @edx/frontend-component-header
-.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg-edx
+.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg
    :target: @edx/frontend-component-header
 .. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
    :target: https://github.com/semantic-release/semantic-release

example/index.js

@@ -1,35 +1,45 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { IntlProvider } from '@edx/frontend-i18n';
-import { AuthenticationContext } from '@edx/frontend-base';
+import 'babel-polyfill';
 
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App, AppContext, APP_READY, AppProvider } from '@edx/frontend-base';
+import { NewRelicLoggingService } from '@edx/frontend-logging';
 import './index.scss';
 import SiteHeader from '../src/';
 
-const App = () => (
-  <div>
-    <IntlProvider locale="en">
-      <>
-        <AuthenticationContext.Provider value={{
+App.subscribe(APP_READY, () => {
+  ReactDOM.render(
+    <AppProvider>
+      {/* We can fake out authentication by including another provider here with the data we want */}
+      <AppContext.Provider value={{
+        authenticatedUser: {
           userId: null,
           username: null,
+          roles: [],
           administrator: false,
-        }}>
-          <SiteHeader />
-        </AuthenticationContext.Provider>
-        <h5 className="mt-2 mb-5">Logged out state</h5>
+        },
+        config: App.config
+      }}>
+        <SiteHeader />
+      </AppContext.Provider>
+      <h5 className="mt-2 mb-5">Logged out state</h5>
 
-        <AuthenticationContext.Provider value={{
+      {/* We can fake out authentication by including another provider here with the data we want */}
+      <AppContext.Provider value={{
+        authenticatedUser: {
           userId: null,
           username: 'testuser',
+          roles: [],
           administrator: false,
-        }}>
-          <SiteHeader />
-        </AuthenticationContext.Provider>
-        <h5 className="mt-2">Logged in state</h5>
-      </>
-    </IntlProvider>
-  </div>
-);
+        },
+        config: App.config
+      }}>
+        <SiteHeader />
+      </AppContext.Provider>
+      <h5 className="mt-2">Logged in state</h5>
+    </AppProvider>,
+    document.getElementById('root'),
+  );
+});
 
-render(<App />, document.getElementById('root'));
+App.initialize({ messages: [], loggingService: NewRelicLoggingService });

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "@edx/frontend-component-header-edx",
+  "name": "@edx/frontend-component-header",
   "version": "1.0.0-semantically-released",
   "lockfileVersion": 1,
   "requires": true,
@@ -1460,14 +1460,16 @@
       }
     },
     "@edx/frontend-base": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-1.1.1.tgz",
-      "integrity": "sha512-YWbjaygt16oG9KJuIukl7FC8P46Brhje/nV+zH6+d/WbQTdp8IKtuBnrgXoypvR2unJiaFUsHcaESp9gFdOE/w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-2.0.0.tgz",
+      "integrity": "sha512-wgckFePSzFHyoTK+NTqkKSCW4dKCY11PypSNT3yDLnPdV4R5L6RqvDQr6ovfeJ/scx0R0EY89j9OV/xcvWIPSw==",
       "dev": true,
       "requires": {
+        "babel-polyfill": "6.26.0",
         "history": "4.9.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.pick": "^4.4.0",
+        "lodash.memoize": "4.1.2",
+        "lodash.merge": "4.6.2",
+        "lodash.pick": "4.4.0",
         "pubsub-js": "1.7.0",
         "redux-devtools-extension": "2.13.8",
         "redux-logger": "3.0.6",
@@ -3126,6 +3128,23 @@
         }
       }
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+        }
+      }
+    },
     "babel-preset-jest": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz",
@@ -3140,7 +3159,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -3149,8 +3167,7 @@
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-          "dev": true
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
         }
       }
     },
@@ -4194,8 +4211,7 @@
     "core-js": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
-      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
-      "dev": true
+      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
     },
     "core-js-compat": {
       "version": "3.2.1",
@@ -5183,6 +5199,36 @@
         "string.prototype.trim": "^1.1.2"
       }
     },
+    "enzyme-adapter-react-16": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.14.0.tgz",
+      "integrity": "sha512-7PcOF7pb4hJUvjY7oAuPGpq3BmlCig3kxXGi2kFx0YzJHppqX1K8IIV9skT1IirxXlu8W7bneKi+oQ10QRnhcA==",
+      "dev": true,
+      "requires": {
+        "enzyme-adapter-utils": "^1.12.0",
+        "has": "^1.0.3",
+        "object.assign": "^4.1.0",
+        "object.values": "^1.1.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.6",
+        "react-test-renderer": "^16.0.0-0",
+        "semver": "^5.7.0"
+      }
+    },
+    "enzyme-adapter-utils": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.0.tgz",
+      "integrity": "sha512-wkZvE0VxcFx/8ZsBw0iAbk3gR1d9hK447ebnSYBf95+r32ezBq+XDSAvRErkc4LZosgH8J7et7H7/7CtUuQfBA==",
+      "dev": true,
+      "requires": {
+        "airbnb-prop-types": "^2.13.2",
+        "function.prototype.name": "^1.1.0",
+        "object.assign": "^4.1.0",
+        "object.fromentries": "^2.0.0",
+        "prop-types": "^15.7.2",
+        "semver": "^5.6.0"
+      }
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -9203,6 +9249,12 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "lodash.mergewith": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",

package.json

@@ -37,14 +37,15 @@
     "@babel/preset-react": "^7.0.0",
     "@edx/frontend-analytics": "^2.0.0",
     "@edx/frontend-auth": "^6.0.1",
-    "@edx/frontend-base": "^1.1.1",
+    "@edx/frontend-base": "^2.0.0",
     "@edx/frontend-i18n": "^3.0.2",
     "@edx/frontend-logging": "^3.0.1",
     "@edx/paragon": "^7.1.2",
     "babel-eslint": "^10.0.3",
     "babel-plugin-react-intl": "^4.1.18",
     "dotenv": "^8.1.0",
-    "enzyme": "^3.10.0",
+    "enzyme": "3.10.0",
+    "enzyme-adapter-react-16": "1.14.0",
     "eslint": "^6.3.0",
     "eslint-config-edx": "^4.0.4",
     "jest": "^24.9.0",
@@ -63,12 +64,13 @@
   },
   "peerDependencies": {
     "@edx/frontend-analytics": "^2.0.0",
-    "@edx/frontend-base": "^1.1.1",
+    "@edx/frontend-base": "^2.0.0",
     "@edx/frontend-i18n": "^3.0.2",
     "prop-types": "^15.7.2",
     "react": "^16.9.0"
   },
   "dependencies": {
+    "babel-polyfill": "^6.26.0",
     "react-responsive": "^8.0.1",
     "react-transition-group": "^4.3.0"
   },
@@ -88,6 +90,7 @@
       "/node_modules/(?!@edx)"
     ],
     "setupFiles": [
+      "./src/setupTest.js",
       "dotenv/config"
     ]
   }

src/SiteHeader.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
 import { injectIntl, intlShape } from '@edx/frontend-i18n';
-import { App, AuthenticationContext } from '@edx/frontend-base';
+import { App, AppContext, APP_CONFIGURED } from '@edx/frontend-base';
 
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';
@@ -10,27 +10,22 @@ import LogoSVG from './logo.svg';
 
 import messages from './SiteHeader.messages';
 
-App.requireConfig([
-  'LMS_BASE_URL',
-  'LOGOUT_URL',
-  'LOGIN_URL',
-  'SITE_NAME',
-], 'Header component');
-
-const {
-  LMS_BASE_URL,
-  LOGOUT_URL,
-  LOGIN_URL,
-  SITE_NAME,
-} = App.config;
+App.subscribe(APP_CONFIGURED, () => {
+  App.requireConfig([
+    'LMS_BASE_URL',
+    'LOGOUT_URL',
+    'LOGIN_URL',
+    'SITE_NAME',
+  ], 'Header component');
+});
 
 function SiteHeader({ intl }) {
-  const { username, avatar } = useContext(AuthenticationContext);
+  const { authenticatedUser, config } = useContext(AppContext);
 
   const mainMenu = [
     {
       type: 'item',
-      href: `${LMS_BASE_URL}/dashboard`,
+      href: `${config.LMS_BASE_URL}/dashboard`,
       content: intl.formatMessage(messages['header.links.courses']),
     },
   ];
@@ -38,22 +33,22 @@ function SiteHeader({ intl }) {
   const userMenu = [
     {
       type: 'item',
-      href: `${LMS_BASE_URL}/dashboard`,
+      href: `${config.LMS_BASE_URL}/dashboard`,
       content: intl.formatMessage(messages['header.user.menu.dashboard']),
     },
     {
       type: 'item',
-      href: `${LMS_BASE_URL}/u/${username}`,
+      href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,
       content: intl.formatMessage(messages['header.user.menu.profile']),
     },
     {
       type: 'item',
-      href: `${LMS_BASE_URL}/account/settings`,
+      href: `${config.LMS_BASE_URL}/account/settings`,
       content: intl.formatMessage(messages['header.user.menu.account.settings']),
     },
     {
       type: 'item',
-      href: LOGOUT_URL,
+      href: config.LOGOUT_URL,
       content: intl.formatMessage(messages['header.user.menu.logout']),
     },
   ];
@@ -61,24 +56,24 @@ function SiteHeader({ intl }) {
   const loggedOutItems = [
     {
       type: 'item',
-      href: LOGIN_URL,
+      href: config.LOGIN_URL,
       content: intl.formatMessage(messages['header.user.menu.login']),
     },
     {
       type: 'item',
-      href: `${LMS_BASE_URL}/register`,
+      href: `${config.LMS_BASE_URL}/register`,
       content: intl.formatMessage(messages['header.user.menu.register']),
     },
   ];
 
   const props = {
     logo: LogoSVG,
-    logoAltText: SITE_NAME,
-    siteName: SITE_NAME,
-    logoDestination: `${LMS_BASE_URL}/dashboard`,
-    loggedIn: !!username,
-    username,
-    avatar,
+    logoAltText: config.SITE_NAME,
+    siteName: config.SITE_NAME,
+    logoDestination: `${config.LMS_BASE_URL}/dashboard`,
+    loggedIn: !!authenticatedUser.username,
+    username: authenticatedUser.username,
+    avatar: authenticatedUser.avatar,
     mainMenu,
     userMenu,
     loggedOutItems,

src/SiteHeader.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-i18n';
 import TestRenderer from 'react-test-renderer';
-import { AuthenticationContext } from '@edx/frontend-base';
+import { AppContext } from '@edx/frontend-base';
 import { Context as ResponsiveContext } from 'react-responsive';
 
 import SiteHeader from './index';
@@ -12,15 +12,23 @@ describe('<SiteHeader />', () => {
     const component = (
       <ResponsiveContext.Provider value={{ width: 1280 }}>
         <IntlProvider locale="en" messages={{}}>
-          <AuthenticationContext.Provider
-            value={{
+          <AppContext.Provider value={{
+            authenticatedUser: {
               userId: null,
               username: null,
+              roles: [],
               administrator: false,
+            },
+            config: {
+              LMS_BASE_URL: process.env.LMS_BASE_URL,
+              SITE_NAME: process.env.SITE_NAME,
+              LOGIN_URL: process.env.LOGIN_URL,
+              LOGOUT_URL: process.env.LOGOUT_URL,
+            },
             }}
           >
             <SiteHeader />
-          </AuthenticationContext.Provider>
+          </AppContext.Provider>
         </IntlProvider>
       </ResponsiveContext.Provider>
     );
@@ -34,15 +42,23 @@ describe('<SiteHeader />', () => {
     const component = (
       <ResponsiveContext.Provider value={{ width: 500 }}>
         <IntlProvider locale="en" messages={{}}>
-          <AuthenticationContext.Provider
-            value={{
+          <AppContext.Provider value={{
+            authenticatedUser: {
               userId: null,
               username: null,
+              roles: [],
               administrator: false,
+            },
+            config: {
+              LMS_BASE_URL: process.env.LMS_BASE_URL,
+              SITE_NAME: process.env.SITE_NAME,
+              LOGIN_URL: process.env.LOGIN_URL,
+              LOGOUT_URL: process.env.LOGOUT_URL,
+            },
             }}
           >
             <SiteHeader />
-          </AuthenticationContext.Provider>
+          </AppContext.Provider>
         </IntlProvider>
       </ResponsiveContext.Provider>
     );

src/index.jsx

@@ -1,5 +1,5 @@
 import SiteHeader from './SiteHeader';
-import messages from './SiteHeader.messages';
+import messages from './i18n/index';
 
 export { messages };
 

src/setupTest.js

@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import 'babel-polyfill';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+// These configuration values are usually set in webpack's EnvironmentPlugin however
+// Jest does not use webpack so we need to set these so for testing
+process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
+process.env.BASE_URL = 'localhost:1995';
+process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
+process.env.CSRF_COOKIE_NAME = 'csrftoken';
+process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
+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.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';
+process.env.SEGMENT_KEY = 'segment_whoa';
+process.env.SITE_NAME = 'edX';
+process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';