Modernize build and fix the anonymous header (#26)

* refactor: rename SiteHeader to Header

* build: use frontend-build

* fix: ensure that we can handle anonymous users

* feat: anonymous header works now

Up until now we haven’t had any microfrontends that allowed anonymous usage.  The Header was encountering errors rendering in such situations, though it was close.  Now it properly shows the Login and Sign Up buttons.

* build: bump version of frontend-build

.env.development

@@ -0,0 +1,15 @@
+ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
+BASE_URL=localhost:8080
+CREDENTIALS_BASE_URL=http://localhost:18150
+CSRF_TOKEN_API_PATH=/csrf/api/v1/token
+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
+MARKETING_SITE_BASE_URL=http://localhost:18000
+ORDER_HISTORY_URL=localhost:1996/orders
+REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
+SEGMENT_KEY=null
+SITE_NAME=Open edX
+USER_INFO_COOKIE_NAME=edx-user-info

.eslintrc.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('eslint');

Makefile

@@ -12,7 +12,7 @@ transifex_temp = ./temp/babel-plugin-react-intl
 
 build:
 	rm -rf ./dist
-	./node_modules/.bin/babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
+	./node_modules/.bin/fedx-scripts babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
 	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
 	@rm -rf dist/**/*.test.jsx
 	@rm -rf dist/**/__snapshots__

babel.config.js

@@ -1,33 +1,3 @@
-module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        modules: false,
-      },
-    ],
-    '@babel/preset-react',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-proposal-class-properties',
-  ],
-  env: {
-    i18n: {
-      plugins: [
-        [
-          'react-intl',
-          {
-            messagesDir: './temp/babel-plugin-react-intl',
-            moduleSourceName: '@edx/frontend-i18n',
-          },
-        ],
-      ],
-    },
-    test: {
-      presets: [
-        '@babel/preset-env',
-      ],
-    },
-  },
-};
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('babel-preserve-modules');

example/index.js

@@ -5,41 +5,38 @@ 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/';
+import Header from '../src/';
 
 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,
-        },
+        authenticatedUser: null,
         config: App.config
       }}>
-        <SiteHeader />
+        <Header />
       </AppContext.Provider>
       <h5 className="mt-2 mb-5">Logged out state</h5>
 
       {/* We can fake out authentication by including another provider here with the data we want */}
       <AppContext.Provider value={{
         authenticatedUser: {
-          userId: null,
+          userId: '123abc',
           username: 'testuser',
           roles: [],
           administrator: false,
         },
         config: App.config
       }}>
-        <SiteHeader />
+        <Header />
       </AppContext.Provider>
       <h5 className="mt-2">Logged in state</h5>
     </AppProvider>,
     document.getElementById('root'),
   );
 });
 
-App.initialize({ messages: [], loggingService: NewRelicLoggingService });
+App.initialize({
+  messages: []
+});

jest.config.js

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