refactor: upgraded frontend-build version to v12

PR #322

src/studio-header/Avatar.jsx

@@ -4,12 +4,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} />
   ) : (
@@ -24,7 +24,7 @@ function Avatar({
       {avatar}
     </span>
   );
-}
+};
 
 Avatar.propTypes = {
   src: PropTypes.string,

src/studio-header/Header.jsx

@@ -23,9 +23,9 @@ ensureConfig([
   'LOGIN_URL',
 ], 'Header component');
 
-function Header({
+const Header = ({
   courseId, courseNumber, courseOrg, courseTitle, intl,
-}) {
+}) => {
   const { authenticatedUser, config } = useContext(AppContext);
 
   const mainMenu = [
@@ -175,7 +175,7 @@ function Header({
       </Responsive>
     </>
   );
-}
+};
 
 Header.propTypes = {
   courseId: PropTypes.string.isRequired,

src/studio-header/Header.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
 // This file was copied from edx/frontend-component-header-edx.
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -39,14 +40,16 @@ describe('<Header />', () => {
   }
 
   it('renders desktop header correctly with API call', async () => {
-    const component = createComponent(1280, (
-      <Header
-        courseId="course-v1:edX+DemoX+Demo_Course"
-        courseNumber="DemoX"
-        courseOrg="edX"
-        courseTitle="Demonstration Course"
-      />
-    ));
+    const component = createComponent(
+1280, (
+  <Header
+    courseId="course-v1:edX+DemoX+Demo_Course"
+    courseNumber="DemoX"
+    courseOrg="edX"
+    courseTitle="Demonstration Course"
+  />
+    ),
+);
 
     render(component);
     expect(screen.getByTestId('course-org-number').textContent).toEqual(expect.stringContaining('edX DemoX'));
@@ -54,42 +57,48 @@ describe('<Header />', () => {
   });
 
   it('renders mobile header correctly with API call', async () => {
-    const component = createComponent(500, (
-      <Header
-        courseId="course-v1:edX+DemoX+Demo_Course"
-        courseNumber="DemoX"
-        courseOrg="edX"
-        courseTitle="Demonstration Course"
-      />
-    ));
+    const component = createComponent(
+500, (
+  <Header
+    courseId="course-v1:edX+DemoX+Demo_Course"
+    courseNumber="DemoX"
+    courseOrg="edX"
+    courseTitle="Demonstration Course"
+  />
+    ),
+);
 
     render(component);
     expect(screen.getByTestId('edx-header-logo'));
   });
 
   it('renders desktop header correctly with bad API call', async () => {
-    const component = createComponent(1280, (
-      <Header
-        courseId="course-v1:edX+DemoX+Demo_Course"
-        courseNumber={null}
-        courseOrg={null}
-        courseTitle="course-v1:edX+DemoX+Demo_Course"
-      />
-    ));
+    const component = createComponent(
+1280, (
+  <Header
+    courseId="course-v1:edX+DemoX+Demo_Course"
+    courseNumber={null}
+    courseOrg={null}
+    courseTitle="course-v1:edX+DemoX+Demo_Course"
+  />
+    ),
+);
 
     render(component);
     expect(screen.getByTestId('course-title').textContent).toEqual(expect.stringContaining('course-v1:edX+DemoX+Demo_Course'));
   });
 
   it('renders mobile header correctly with bad API call', async () => {
-    const component = createComponent(500, (
-      <Header
-        courseId="course-v1:edX+DemoX+Demo_Course"
-        courseNumber={null}
-        courseOrg={null}
-        courseTitle="course-v1:edX+DemoX+Demo_Course"
-      />
-    ));
+    const component = createComponent(
+500, (
+  <Header
+    courseId="course-v1:edX+DemoX+Demo_Course"
+    courseNumber={null}
+    courseOrg={null}
+    courseTitle="course-v1:edX+DemoX+Demo_Course"
+  />
+    ),
+);
 
     render(component);
     expect(screen.getByTestId('edx-header-logo'));

src/studio-header/Icons.jsx

@@ -1,7 +1,7 @@
 // This file was copied from edx/frontend-component-header-edx.
 import React from 'react';
 
-export const MenuIcon = props => (
+export const MenuIcon = (props) => (
   <svg
     width="24px"
     height="24px"
@@ -13,9 +13,9 @@ export const MenuIcon = props => (
     <rect fill="currentColor" x="2" y="11" width="20" height="2" />
     <rect fill="currentColor" x="2" y="17" width="20" height="2" />
   </svg>
-);
+  );
 
-export const AvatarIcon = props => (
+export const AvatarIcon = (props) => (
   <svg
     width="24px"
     height="24px"
@@ -28,9 +28,9 @@ export const AvatarIcon = props => (
       fill="currentColor"
     />
   </svg>
-);
+  );
 
-export const CaretIcon = props => (
+export const CaretIcon = (props) => (
   <svg
     width="16px"
     height="16px"
@@ -44,4 +44,4 @@ export const CaretIcon = props => (
       transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
     />
   </svg>
-);
+  );

src/studio-header/Logo.jsx

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

src/studio-header/Menu/Menu.jsx

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