feat: upgrade frontend platform to version 3

.eslintrc.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('eslint');

package.json

@@ -34,13 +34,18 @@
   "homepage": "https://github.com/openedx/frontend-component-header#readme",
   "devDependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-build": "11.0.2",
+    "@edx/frontend-build": "12.3.0",
-    "@edx/frontend-platform": "2.6.2",
+    "@edx/frontend-platform": "^3.0.1",
     "@edx/paragon": "19.25.3",
+    "@testing-library/dom": "8.19.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "10.4.9",
     "codecov": "3.8.3",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
+    "enzyme-adapter-react-16": "1.15.7",
     "husky": "7.0.4",
+    "jest": "28.1.3",
+    "jest-chain": "1.1.6",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -49,25 +54,20 @@
     "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
     "redux": "4.2.0",
-    "redux-saga": "1.1.3",
+    "redux-saga": "1.2.1"
-    "@testing-library/dom": "8.18.1",
-    "@testing-library/jest-dom": "5.16.5",
-    "jest": "28.1.3",
-    "jest-chain": "1.1.6",
-    "@testing-library/react": "10.4.9"
   },
   "dependencies": {
-    "babel-polyfill": "6.26.0",
-    "react-responsive": "8.2.0",
-    "react-transition-group": "4.4.5",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "^0.2.0"
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "babel-polyfill": "6.26.0",
+    "react-responsive": "8.2.0",
+    "react-transition-group": "4.4.5"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^2.0.0",
+    "@edx/frontend-platform": "^3.0.0",
     "@edx/paragon": ">= 7.0.0 < 21.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.9.0",

src/Avatar.jsx

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 
 import { AvatarIcon } from './Icons';
 
-function Avatar({
+const Avatar = ({
   size,
   src,
   alt,
   className,
-}) {
+}) => {
   const avatar = src ? (
     <img className="d-block w-100 h-100" src={src} alt={alt} />
   ) : (
@@ -23,7 +23,7 @@ function Avatar({
       {avatar}
     </span>
   );
-}
+};
 
 Avatar.propTypes = {
   src: PropTypes.string,

src/Header.jsx

@@ -30,7 +30,7 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
   }, 'Header additional config');
 });
 
-function Header({ intl }) {
+const Header = ({ intl }) => {
   const { authenticatedUser, config } = useContext(AppContext);
 
   const mainMenu = [
@@ -110,7 +110,7 @@ function Header({ intl }) {
       </Responsive>
     </>
   );
-}
+};
 
 Header.propTypes = {
   intl: intlShape.isRequired,

src/Header.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
@@ -6,28 +7,31 @@ import { Context as ResponsiveContext } from 'react-responsive';
 
 import Header from './index';
 
+const HeaderComponent = ({ width, contextValue }) => (
+  <ResponsiveContext.Provider value={width}>
+    <IntlProvider locale="en" messages={{}}>
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <Header />
+      </AppContext.Provider>
+    </IntlProvider>
+  </ResponsiveContext.Provider>
+);
+
 describe('<Header />', () => {
   it('renders correctly for anonymous desktop', () => {
-    const component = (
+    const contextValue = {
-      <ResponsiveContext.Provider value={{ width: 1280 }}>
+      authenticatedUser: null,
-        <IntlProvider locale="en" messages={{}}>
+      config: {
-          <AppContext.Provider
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
-            value={{
+        SITE_NAME: process.env.SITE_NAME,
-              authenticatedUser: null,
+        LOGIN_URL: process.env.LOGIN_URL,
-              config: {
+        LOGOUT_URL: process.env.LOGOUT_URL,
-                LMS_BASE_URL: process.env.LMS_BASE_URL,
+        LOGO_URL: process.env.LOGO_URL,
-                SITE_NAME: process.env.SITE_NAME,
+      },
-                LOGIN_URL: process.env.LOGIN_URL,
+    };
-                LOGOUT_URL: process.env.LOGOUT_URL,
+    const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
-                LOGO_URL: process.env.LOGO_URL,
-              },
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
 
     const wrapper = TestRenderer.create(component);
 
@@ -35,31 +39,22 @@ describe('<Header />', () => {
   });
 
   it('renders correctly for authenticated desktop', () => {
-    const component = (
+    const contextValue = {
-      <ResponsiveContext.Provider value={{ width: 1280 }}>
+      authenticatedUser: {
-        <IntlProvider locale="en" messages={{}}>
+        userId: 'abc123',
-          <AppContext.Provider
+        username: 'edX',
-            value={{
+        roles: [],
-              authenticatedUser: {
+        administrator: false,
-                userId: 'abc123',
+      },
-                username: 'edX',
+      config: {
-                roles: [],
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
-                administrator: false,
+        SITE_NAME: process.env.SITE_NAME,
-              },
+        LOGIN_URL: process.env.LOGIN_URL,
-              config: {
+        LOGOUT_URL: process.env.LOGOUT_URL,
-                LMS_BASE_URL: process.env.LMS_BASE_URL,
+        LOGO_URL: process.env.LOGO_URL,
-                SITE_NAME: process.env.SITE_NAME,
+      },
-                LOGIN_URL: process.env.LOGIN_URL,
+    };
-                LOGOUT_URL: process.env.LOGOUT_URL,
+    const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
-                LOGO_URL: process.env.LOGO_URL,
-              },
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
 
     const wrapper = TestRenderer.create(component);
 
@@ -67,26 +62,17 @@ describe('<Header />', () => {
   });
 
   it('renders correctly for anonymous mobile', () => {
-    const component = (
+    const contextValue = {
-      <ResponsiveContext.Provider value={{ width: 500 }}>
+      authenticatedUser: null,
-        <IntlProvider locale="en" messages={{}}>
+      config: {
-          <AppContext.Provider
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
-            value={{
+        SITE_NAME: process.env.SITE_NAME,
-              authenticatedUser: null,
+        LOGIN_URL: process.env.LOGIN_URL,
-              config: {
+        LOGOUT_URL: process.env.LOGOUT_URL,
-                LMS_BASE_URL: process.env.LMS_BASE_URL,
+        LOGO_URL: process.env.LOGO_URL,
-                SITE_NAME: process.env.SITE_NAME,
+      },
-                LOGIN_URL: process.env.LOGIN_URL,
+    };
-                LOGOUT_URL: process.env.LOGOUT_URL,
+    const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
-                LOGO_URL: process.env.LOGO_URL,
-              },
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
 
     const wrapper = TestRenderer.create(component);
 
@@ -94,31 +80,22 @@ describe('<Header />', () => {
   });
 
   it('renders correctly for authenticated mobile', () => {
-    const component = (
+    const contextValue = {
-      <ResponsiveContext.Provider value={{ width: 500 }}>
+      authenticatedUser: {
-        <IntlProvider locale="en" messages={{}}>
+        userId: 'abc123',
-          <AppContext.Provider
+        username: 'edX',
-            value={{
+        roles: [],
-              authenticatedUser: {
+        administrator: false,
-                userId: 'abc123',
+      },
-                username: 'edX',
+      config: {
-                roles: [],
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
-                administrator: false,
+        SITE_NAME: process.env.SITE_NAME,
-              },
+        LOGIN_URL: process.env.LOGIN_URL,
-              config: {
+        LOGOUT_URL: process.env.LOGOUT_URL,
-                LMS_BASE_URL: process.env.LMS_BASE_URL,
+        LOGO_URL: process.env.LOGO_URL,
-                SITE_NAME: process.env.SITE_NAME,
+      },
-                LOGIN_URL: process.env.LOGIN_URL,
+    };
-                LOGOUT_URL: process.env.LOGOUT_URL,
+    const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
-                LOGO_URL: process.env.LOGO_URL,
-              },
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
 
     const wrapper = TestRenderer.create(component);
 

src/Icons.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const MenuIcon = props => (
+export const MenuIcon = (props) => (
   <svg
     width="24px"
     height="24px"
@@ -14,7 +14,7 @@ export const MenuIcon = props => (
   </svg>
 );
 
-export const AvatarIcon = props => (
+export const AvatarIcon = (props) => (
   <svg
     width="24px"
     height="24px"
@@ -29,7 +29,7 @@ export const AvatarIcon = props => (
   </svg>
 );
 
-export const CaretIcon = props => (
+export const CaretIcon = (props) => (
   <svg
     width="16px"
     height="16px"

src/Logo.jsx

@@ -1,29 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function Logo({ src, alt, ...attributes }) {
+const Logo = ({ src, alt, ...attributes }) => (
-  return (
+  <img src={src} alt={alt} {...attributes} />
-    <img src={src} alt={alt} {...attributes} />
+);
-  );
-}
 
 Logo.propTypes = {
   src: PropTypes.string.isRequired,
   alt: PropTypes.string.isRequired,
 };
 
-function LinkedLogo({
+const LinkedLogo = ({
   href,
   src,
   alt,
   ...attributes
-}) {
+}) => (
-  return (
+  <a href={href} {...attributes}>
-    <a href={href} {...attributes}>
+    <img className="d-block" src={src} alt={alt} />
-      <img className="d-block" src={src} alt={alt} />
+  </a>
-    </a>
+);
-  );
-}
 
 LinkedLogo.propTypes = {
   href: PropTypes.string.isRequired,

src/Menu/Menu.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
 
-function MenuTrigger({ tag, className, ...attributes }) {
+const MenuTrigger = ({ tag, className, ...attributes }) => React.createElement(tag, {
-  return React.createElement(tag, {
+  className: `menu-trigger ${className}`,
-    className: `menu-trigger ${className}`,
+  ...attributes,
-    ...attributes,
+});
-  });
-}
 MenuTrigger.propTypes = {
   tag: PropTypes.string,
   className: PropTypes.string,
@@ -18,12 +16,10 @@ MenuTrigger.defaultProps = {
 };
 const MenuTriggerType = <MenuTrigger />.type;
 
-function MenuContent({ tag, className, ...attributes }) {
+const MenuContent = ({ tag, className, ...attributes }) => React.createElement(tag, {
-  return React.createElement(tag, {
+  className: ['menu-content', className].join(' '),
-    className: ['menu-content', className].join(' '),
+  ...attributes,
-    ...attributes,
+});
-  });
-}
 MenuContent.propTypes = {
   tag: PropTypes.string,
   className: PropTypes.string,

src/StudioHeader.jsx

@@ -151,7 +151,7 @@ StudioDesktopHeaderBase.defaultProps = {
 
 const StudioDesktopHeader = injectIntl(StudioDesktopHeaderBase);
 
-function StudioHeader({ intl, actionRowContent }) {
+const StudioHeader = ({ intl, actionRowContent }) => {
   const { authenticatedUser, config } = useContext(AppContext);
 
   const userMenu = authenticatedUser === null ? [] : [
@@ -185,7 +185,7 @@ function StudioHeader({ intl, actionRowContent }) {
   };
 
   return <StudioDesktopHeader {...props} />;
-}
+};
 
 StudioHeader.propTypes = {
   intl: intlShape.isRequired,
@@ -193,6 +193,7 @@ StudioHeader.propTypes = {
 };
 
 StudioHeader.defaultProps = {
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   actionRowContent: <></>,
 };
 

src/StudioHeader.test.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+/* eslint-disable react/prop-types */
+import React, { useMemo } from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
 import { Link } from 'react-router-dom';
@@ -11,31 +12,62 @@ import {
 
 import { StudioHeader } from './index';
 
+const StudioHeaderComponent = ({ contextValue, appMenu = null, mainMenu = [] }) => (
+  <IntlProvider locale="en" messages={{}}>
+    <AppContext.Provider
+      value={contextValue}
+    >
+      <StudioHeader appMenu={appMenu} mainMenu={mainMenu} />
+    </AppContext.Provider>
+  </IntlProvider>
+);
+
+const StudioHeaderContext = ({ actionRowContent = null }) => {
+  const headerContextValue = useMemo(() => ({
+    authenticatedUser: {
+      userId: 'abc123',
+      username: 'edX',
+      roles: [],
+      administrator: false,
+    },
+    config: {
+      STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+      SITE_NAME: process.env.SITE_NAME,
+      LOGIN_URL: process.env.LOGIN_URL,
+      LOGOUT_URL: process.env.LOGOUT_URL,
+      LOGO_URL: process.env.LOGO_URL,
+    },
+  }), []);
+  return (
+    <IntlProvider locale="en" messages={{}}>
+      <AppContext.Provider
+        value={headerContextValue}
+      >
+        <StudioHeader actionRowContent={actionRowContent} />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
 describe('<StudioHeader />', () => {
   it('renders correctly', () => {
-    const component = (
+    const contextValue = {
-      <IntlProvider locale="en" messages={{}}>
+      authenticatedUser: {
-        <AppContext.Provider
+        userId: 'abc123',
-          value={{
+        username: 'edX',
-            authenticatedUser: {
+        roles: [],
-              userId: 'abc123',
+        administrator: false,
-              username: 'edX',
+      },
-              roles: [],
+      config: {
-              administrator: false,
+        STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
-            },
+        SITE_NAME: process.env.SITE_NAME,
-            config: {
+        LOGIN_URL: process.env.LOGIN_URL,
-              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+        LOGOUT_URL: process.env.LOGOUT_URL,
-              SITE_NAME: process.env.SITE_NAME,
+        LOGO_URL: process.env.LOGO_URL,
-              LOGIN_URL: process.env.LOGIN_URL,
+      },
-              LOGOUT_URL: process.env.LOGOUT_URL,
+    };
-              LOGO_URL: process.env.LOGO_URL,
+
-            },
+    const component = <StudioHeaderComponent contextValue={contextValue} />;
-          }}
-        >
-          <StudioHeader />
-        </AppContext.Provider>
-      </IntlProvider>
-    );
 
     const wrapper = TestRenderer.create(component);
 
@@ -67,29 +99,7 @@ describe('<StudioHeader />', () => {
       </>
     );
 
-    const component = (
+    const component = <StudioHeaderContext actionRowContent={actionRowContent} />;
-      <IntlProvider locale="en" messages={{}}>
-        <AppContext.Provider
-          value={{
-            authenticatedUser: {
-              userId: 'abc123',
-              username: 'edX',
-              roles: [],
-              administrator: false,
-            },
-            config: {
-              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
-              SITE_NAME: process.env.SITE_NAME,
-              LOGIN_URL: process.env.LOGIN_URL,
-              LOGOUT_URL: process.env.LOGOUT_URL,
-              LOGO_URL: process.env.LOGO_URL,
-            },
-          }}
-        >
-          <StudioHeader actionRowContent={actionRowContent} />
-        </AppContext.Provider>
-      </IntlProvider>
-    );
 
     const wrapper = TestRenderer.create(component);
 

src/learning-header/AnonymousUserMenu.jsx

@@ -7,25 +7,23 @@ import { Button } from '@edx/paragon';
 
 import genericMessages from '../generic/messages';
 
-function AnonymousUserMenu({ intl }) {
+const AnonymousUserMenu = ({ intl }) => (
-  return (
+  <div>
-    <div>
+    <Button
-      <Button
+      className="mr-3"
-        className="mr-3"
+      variant="outline-primary"
-        variant="outline-primary"
+      href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
-        href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
+    >
-      >
+      {intl.formatMessage(genericMessages.registerSentenceCase)}
-        {intl.formatMessage(genericMessages.registerSentenceCase)}
+    </Button>
-      </Button>
+    <Button
-      <Button
+      variant="primary"
-        variant="primary"
+      href={`${getLoginRedirectUrl(global.location.href)}`}
-        href={`${getLoginRedirectUrl(global.location.href)}`}
+    >
-      >
+      {intl.formatMessage(genericMessages.signInSentenceCase)}
-        {intl.formatMessage(genericMessages.signInSentenceCase)}
+    </Button>
-      </Button>
+  </div>
-    </div>
+);
-  );
-}
 
 AnonymousUserMenu.propTypes = {
   intl: intlShape.isRequired,

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -10,7 +10,7 @@ import { Dropdown } from '@edx/paragon';
 
 import messages from './messages';
 
-function AuthenticatedUserDropdown({ intl, username }) {
+const AuthenticatedUserDropdown = ({ intl, username }) => {
   const dashboardMenuItem = (
     <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
       {intl.formatMessage(messages.dashboard)}
@@ -47,7 +47,7 @@ function AuthenticatedUserDropdown({ intl, username }) {
       </Dropdown>
     </>
   );
-}
+};
 
 AuthenticatedUserDropdown.propTypes = {
   intl: intlShape.isRequired,

src/learning-header/LearningHeader.jsx

@@ -8,18 +8,16 @@ import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import messages from './messages';
 
-function LinkedLogo({
+const LinkedLogo = ({
   href,
   src,
   alt,
   ...attributes
-}) {
+}) => (
-  return (
+  <a href={href} {...attributes}>
-    <a href={href} {...attributes}>
+    <img className="d-block" src={src} alt={alt} />
-      <img className="d-block" src={src} alt={alt} />
+  </a>
-    </a>
+);
-  );
-}
 
 LinkedLogo.propTypes = {
   href: PropTypes.string.isRequired,
@@ -27,9 +25,9 @@ LinkedLogo.propTypes = {
   alt: PropTypes.string.isRequired,
 };
 
-function LearningHeader({
+const LearningHeader = ({
   courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
-}) {
+}) => {
   const { authenticatedUser } = useContext(AppContext);
 
   const headerLogo = (
@@ -61,7 +59,7 @@ function LearningHeader({
       </div>
     </header>
   );
-}
+};
 
 LearningHeader.propTypes = {
   courseOrg: PropTypes.string,

src/setupTest.js

@@ -102,16 +102,14 @@ function render(
     ...renderOptions
   } = {},
 ) {
-  function Wrapper({ children }) {
+  const Wrapper = ({ children }) => (
-    return (
     // eslint-disable-next-line react/jsx-filename-extension
-      <IntlProvider locale="en">
+    <IntlProvider locale="en">
-        <AppProvider store={store}>
+      <AppProvider store={store}>
-          {children}
+        {children}
-        </AppProvider>
+      </AppProvider>
-      </IntlProvider>
+    </IntlProvider>
-    );
+  );
-  }
 
   Wrapper.propTypes = {
     children: PropTypes.node.isRequired,