Revert "frontend-build updated to v12 (#277)"

This reverts commit 403db9f.
edx · Dec 1, 2022 · 469f77d · 469f77d
1 parent 403db9f
commit 469f77d
Show file tree

Hide file tree

Showing 14 changed files with 5,927 additions and 4,795 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint');
+module.exports = createConfig('eslint');
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -6,7 +6,6 @@ jobs:
     strategy:
       matrix:
         node: [16]
-        npm: [8.5.x]
     steps:
     - name: Checkout
       uses: actions/checkout@v2
@@ -16,7 +15,6 @@ jobs:
       uses: actions/setup-node@v2
       with:
         node-version: ${{ matrix.node }}
-    - run: npm install -g npm@${{ matrix.npm }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
   "homepage": "https://github.com/edx/frontend-component-header-edx#readme",
   "devDependencies": {
     "@edx/brand": "npm:@edx/brand-edx.org@2.0.8",
-    "@edx/frontend-build": "12.3.0",
+    "@edx/frontend-build": "11.0.2",
     "@edx/frontend-platform": "^2.0.0 || ^3.0.0",
     "@edx/paragon": "19.9.0",
     "@edx/reactifex": "2.1.1",

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

diff --git a/src/Header.jsx b/src/Header.jsx
@@ -34,7 +34,7 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
   }, 'Header additional config');
 });
 
-const Header = ({ intl }) => {
+function Header({ intl }) {
   const { authenticatedUser, config } = useContext(AppContext);
   const {
     enterpriseLearnerPortalLink,
@@ -165,7 +165,7 @@ const Header = ({ intl }) => {
       </Responsive>
     </>
   );
-};
+}
 
 Header.propTypes = {
   intl: intlShape.isRequired,

diff --git a/src/Header.test.jsx b/src/Header.test.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -25,18 +24,6 @@ const APP_CONTEXT_CONFIG = {
   LOGO_URL: process.env.LOGO_URL,
 };
 
-const HeaderContext = ({ width, contextValue }) => (
-  <ResponsiveContext.Provider value={width}>
-    <IntlProvider locale="en" messages={{}}>
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <Header />
-      </AppContext.Provider>
-    </IntlProvider>
-  </ResponsiveContext.Provider>
-);
-
 describe('<Header />', () => {
   beforeEach(() => {
     useEnterpriseConfig.mockReturnValue({});
@@ -58,45 +45,72 @@ describe('<Header />', () => {
   };
 
   it('renders correctly for unauthenticated users on desktop', () => {
-    const contextValue = {
-      authenticatedUser: null,
-      config: APP_CONTEXT_CONFIG,
-    };
-    const component = <HeaderContext width={{ width: 1280 }} contextValue={contextValue} />;
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              config: APP_CONTEXT_CONFIG,
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
 
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it('renders correctly for authenticated users on desktop', () => {
-    const contextValue = {
-      authenticatedUser: {
-        userId: 'abc123',
-        username: 'edX',
-        roles: [],
-        administrator: false,
-      },
-      config: APP_CONTEXT_CONFIG,
-    };
-    const component = <HeaderContext width={{ width: 1280 }} contextValue={contextValue} />;
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: {
+                userId: 'abc123',
+                username: 'edX',
+                roles: [],
+                administrator: false,
+              },
+              config: APP_CONTEXT_CONFIG,
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
 
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it('renders correctly for authenticated users on desktop with or without learner portal links', async () => {
-    const contextValue = {
-      authenticatedUser: {
-        userId: 'abc123',
-        username: 'edX',
-        roles: [],
-        administrator: false,
-      },
-      config: APP_CONTEXT_CONFIG,
-    };
-    const component = <HeaderContext width={{ width: 1280 }} contextValue={contextValue} />;
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: {
+                userId: 'abc123',
+                username: 'edX',
+                roles: [],
+                administrator: false,
+              },
+              config: APP_CONTEXT_CONFIG,
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
 
     // When learner portal links are not present, Order History should be a dropdown item
     let wrapper = mount(component);
@@ -126,28 +140,46 @@ describe('<Header />', () => {
   });
 
   it('renders correctly for unauthenticated users on mobile', () => {
-    const contextValue = {
-      authenticatedUser: null,
-      config: APP_CONTEXT_CONFIG,
-    };
-    const component = <HeaderContext width={{ width: 500 }} contextValue={contextValue} />;
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 500 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              config: APP_CONTEXT_CONFIG,
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
 
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it('renders correctly for authenticated users on mobile', () => {
-    const contextValue = {
-      authenticatedUser: {
-        userId: 'abc123',
-        username: 'edX',
-        roles: [],
-        administrator: false,
-      },
-      config: APP_CONTEXT_CONFIG,
-    };
-    const component = <HeaderContext width={{ width: 500 }} contextValue={contextValue} />;
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 500 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: {
+                userId: 'abc123',
+                username: 'edX',
+                roles: [],
+                administrator: false,
+              },
+              config: APP_CONTEXT_CONFIG,
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
 
     const wrapper = TestRenderer.create(component);
 
@@ -168,28 +200,46 @@ describe('<Header />', () => {
     });
 
     it('renders correctly for unauthenticated users when minimal', () => {
-      const contextValue = {
-        authenticatedUser: null,
-        config: APP_CONTEXT_CONFIG,
-      };
-      const component = <HeaderContext width={{ width: 1280 }} contextValue={contextValue} />;
+      const component = (
+        <ResponsiveContext.Provider value={{ width: 1280 }}>
+          <IntlProvider locale="en" messages={{}}>
+            <AppContext.Provider
+              value={{
+                authenticatedUser: null,
+                config: APP_CONTEXT_CONFIG,
+              }}
+            >
+              <Header />
+            </AppContext.Provider>
+          </IntlProvider>
+        </ResponsiveContext.Provider>
+      );
 
       const wrapper = TestRenderer.create(component);
 
       expect(wrapper.toJSON()).toMatchSnapshot();
     });
 
     it('renders correctly for authenticated users when minimal', () => {
-      const contextValue = {
-        authenticatedUser: {
-          userId: 'abc123',
-          username: 'edX',
-          roles: [],
-          administrator: false,
-        },
-        config: APP_CONTEXT_CONFIG,
-      };
-      const component = <HeaderContext width={{ width: 1280 }} contextValue={contextValue} />;
+      const component = (
+        <ResponsiveContext.Provider value={{ width: 1280 }}>
+          <IntlProvider locale="en" messages={{}}>
+            <AppContext.Provider
+              value={{
+                authenticatedUser: {
+                  userId: 'abc123',
+                  username: 'edX',
+                  roles: [],
+                  administrator: false,
+                },
+                config: APP_CONTEXT_CONFIG,
+              }}
+            >
+              <Header />
+            </AppContext.Provider>
+          </IntlProvider>
+        </ResponsiveContext.Provider>
+      );
 
       const wrapper = TestRenderer.create(component);
 

diff --git a/src/Icons.jsx b/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"

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