refactor: upgraded frontend-build version to v12

.eslintrc.js

@@ -1,6 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint',
+module.exports = createConfig(
+'eslint',
   {
     rules: {
       'jsx-a11y/label-has-associated-control': [2, {
@@ -9,5 +11,7 @@ module.exports = createConfig('eslint',
       'template-curly-spacing': 'off',
       'react-hooks/exhaustive-deps': 'off',
       indent: 'off',
+      'no-restricted-exports': 'off',
     },
-  });
+  },
+);

package.json

@@ -34,7 +34,6 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-build": "^11.0.0",
     "@edx/frontend-component-footer": "11.1.1",
     "@edx/frontend-lib-content-components": "^1.72.0",
     "@edx/frontend-platform": "2.5.1",
@@ -66,7 +65,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.0.0",
-    "@edx/frontend-build": "^11.0.0",
+    "@edx/frontend-build": "12.3.0",
     "@edx/reactifex": "^1.0.3",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.1",

src/CourseAuthoringPage.jsx

@@ -14,7 +14,22 @@ import { getCourseAppsApiStatus, getLoadingStatus } from './pages-and-resources/
 import { RequestStatus } from './data/constants';
 import Loading from './generic/Loading';
 
-export default function CourseAuthoringPage({ courseId, children }) {
+const AppHeader = (courseNumber, courseOrg, courseTitle, courseId) => (
+  <Header
+    courseNumber={courseNumber}
+    courseOrg={courseOrg}
+    courseTitle={courseTitle}
+    courseId={courseId}
+  />
+  );
+
+  const AppFooter = () => (
+    <div className="mt-6">
+      <Footer />
+    </div>
+  );
+
+const CourseAuthoringPage = ({ courseId, children }) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -35,33 +50,19 @@ export default function CourseAuthoringPage({ courseId, children }) {
     );
   }
 
-  const AppHeader = () => (
-    <Header
-      courseNumber={courseNumber}
-      courseOrg={courseOrg}
-      courseTitle={courseTitle}
-      courseId={courseId}
-    />
-  );
-
-  const AppFooter = () => (
-    <div className="mt-6">
-      <Footer />
-    </div>
-  );
-
   return (
     <div className={pathname.includes('/editor/') ? '' : 'bg-light-200'}>
       {/* While V2 Editors are tempoarily served from thier own pages
       using url pattern containing /editor/,
       we shouldn't have the header and footer on these pages.
       This functionality will be removed in TNL-9591 */}
-      {inProgress ? !pathname.includes('/editor/') && <Loading /> : <AppHeader />}
+      {inProgress ? !pathname.includes('/editor/') && <Loading />
+        : <AppHeader courseNumber={courseNumber} courseOrg={courseOrg} courseTitle={courseTitle} courseId={courseId} />}
       {children}
       {!inProgress && <AppFooter />}
     </div>
   );
-}
+};
 
 CourseAuthoringPage.propTypes = {
   children: PropTypes.node,
@@ -71,3 +72,5 @@ CourseAuthoringPage.propTypes = {
 CourseAuthoringPage.defaultProps = {
   children: null,
 };
+
+export default CourseAuthoringPage;

src/CourseAuthoringRoutes.jsx

@@ -23,7 +23,7 @@ import EditorContainer from './editors/EditorContainer';
  * can move the Header/Footer rendering to this component and likely pull the course detail loading
  * in as well, and it'd feel a bit better-factored and the roles would feel more clear.
  */
-export default function CourseAuthoringRoutes({ courseId }) {
+const CourseAuthoringRoutes = ({ courseId }) => {
   const { path } = useRouteMatch();
   return (
     <CourseAuthoringPage courseId={courseId}>
@@ -45,8 +45,10 @@ export default function CourseAuthoringRoutes({ courseId }) {
       </Switch>
     </CourseAuthoringPage>
   );
-}
+};
 
 CourseAuthoringRoutes.propTypes = {
   courseId: PropTypes.string.isRequired,
 };
+
+export default CourseAuthoringRoutes;

src/generic/CollapsableEditor.jsx

@@ -56,7 +56,7 @@ const CollapsableEditor = ({
     </Collapsible.Trigger>
     <Collapsible.Body className="collapsible-body rounded px-0">{children}</Collapsible.Body>
   </Collapsible.Advanced>
-);
+  );
 
 CollapsableEditor.propTypes = {
   open: PropTypes.bool,

src/generic/ConfirmationPopup.jsx

@@ -28,7 +28,7 @@ const ConfirmationPopup = ({
       </Card.Footer>
     </Card.Body>
   </Card>
-);
+  );
 
 ConfirmationPopup.propTypes = {
   label: PropTypes.string.isRequired,

src/generic/ConnectionErrorAlert.jsx

@@ -5,23 +5,21 @@ import { getConfig } from '@edx/frontend-platform';
 
 import messages from '../messages';
 
-function ConnectionErrorAlert({ intl }) {
-  return (
-    <Alert variant="danger" data-testid="connectionErrorAlert">
-      <FormattedMessage
-        id="authoring.alert.error.connection"
-        defaultMessage="We encountered a technical error when loading this page. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help."
-        values={{
+const ConnectionErrorAlert = ({ intl }) => (
+  <Alert variant="danger" data-testid="connectionErrorAlert">
+    <FormattedMessage
+      id="authoring.alert.error.connection"
+      defaultMessage="We encountered a technical error when loading this page. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help."
+      values={{
           supportLink: (
             <Alert.Link href={getConfig().SUPPORT_URL}>
               {intl.formatMessage(messages.supportText)}
             </Alert.Link>
           ),
         }}
-      />
-    </Alert>
+    />
+  </Alert>
   );
-}
 
 ConnectionErrorAlert.propTypes = {
   intl: intlShape.isRequired,

src/generic/FieldFeedback.jsx

@@ -2,38 +2,36 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, TransitionReplace } from '@edx/paragon';
 
-function FieldFeedback({
+const FieldFeedback = ({
   feedbackClasses,
   transitionClasses,
   errorCondition,
   feedbackCondition,
   feedbackMessage,
   errorMessage,
-}) {
-  return (
-    <>
-      <TransitionReplace className={transitionClasses}>
-        {feedbackCondition ? (
-          <React.Fragment key="open1">
-            <Form.Control.Feedback type="default" hasIcon={false} key={`${feedbackMessage}-feedback`}>
-              <div className={`small ${feedbackClasses}`}>{feedbackMessage}</div>
-            </Form.Control.Feedback>
-          </React.Fragment>
+}) => (
+  <>
+    <TransitionReplace className={transitionClasses}>
+      {feedbackCondition ? (
+        <React.Fragment key="open1">
+          <Form.Control.Feedback type="default" hasIcon={false} key={`${feedbackMessage}-feedback`}>
+            <div className={`small ${feedbackClasses}`}>{feedbackMessage}</div>
+          </Form.Control.Feedback>
+        </React.Fragment>
         ) : <React.Fragment key="close1" />}
-      </TransitionReplace>
+    </TransitionReplace>
 
-      <TransitionReplace>
-        {errorCondition ? (
-          <React.Fragment key="open">
-            <Form.Control.Feedback type="invalid" hasIcon={false} key={`${errorMessage}-feedback`}>
-              <div className={`small ${feedbackClasses}`}>{errorMessage}</div>
-            </Form.Control.Feedback>
-          </React.Fragment>
+    <TransitionReplace>
+      {errorCondition ? (
+        <React.Fragment key="open">
+          <Form.Control.Feedback type="invalid" hasIcon={false} key={`${errorMessage}-feedback`}>
+            <div className={`small ${feedbackClasses}`}>{errorMessage}</div>
+          </Form.Control.Feedback>
+        </React.Fragment>
         ) : <React.Fragment key="close" />}
-      </TransitionReplace>
-    </>
+    </TransitionReplace>
+  </>
   );
-}
 
 FieldFeedback.propTypes = {
   errorCondition: PropTypes.bool.isRequired,

src/generic/FormSwitchGroup.jsx

@@ -4,7 +4,7 @@ import { Form, SwitchControl } from '@edx/paragon';
 
 import './FormSwitchGroup.scss';
 
-export default function FormSwitchGroup({
+const FormSwitchGroup = ({
   id,
   name,
   label,
@@ -14,7 +14,7 @@ export default function FormSwitchGroup({
   onBlur,
   checked,
   disabled,
-}) {
+}) => {
   const helpTextId = `${id}HelpText`;
 
   // Note that we use controlId here _and_ set some IDs and aria-describedby attributes manually.
@@ -49,7 +49,7 @@ export default function FormSwitchGroup({
       </div>
     </Form.Group>
   );
-}
+};
 FormSwitchGroup.propTypes = {
   id: PropTypes.string.isRequired,
   label: PropTypes.node.isRequired,
@@ -67,3 +67,5 @@ FormSwitchGroup.defaultProps = {
   name: null,
   disabled: false,
 };
+
+export default FormSwitchGroup;

src/generic/FormikControl.jsx

@@ -1,16 +1,17 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import { Form } from '@edx/paragon';
 import { getIn, useFormikContext } from 'formik';
 import PropTypes from 'prop-types';
 import React from 'react';
 import FormikErrorFeedback from './FormikErrorFeedback';
 
-function FormikControl({
+const FormikControl = ({
   name,
   label,
   help,
   className,
   ...params
-}) {
+}) => {
   const {
     touched, errors, handleChange, handleBlur, setFieldError,
   } = useFormikContext();
@@ -35,7 +36,7 @@ function FormikControl({
       </FormikErrorFeedback>
     </Form.Group>
   );
-}
+};
 
 FormikControl.propTypes = {
   name: PropTypes.element.isRequired,

src/generic/FormikErrorFeedback.jsx

@@ -3,7 +3,7 @@ import { getIn, useFormikContext } from 'formik';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-function FormikErrorFeedback({ name, children }) {
+const FormikErrorFeedback = ({ name, children }) => {
   const { touched, errors } = useFormikContext();
   const fieldTouched = getIn(touched, name);
   const fieldError = getIn(errors, name);
@@ -23,7 +23,7 @@ function FormikErrorFeedback({ name, children }) {
         )}
     </TransitionReplace>
   );
-}
+};
 
 FormikErrorFeedback.propTypes = {
   name: PropTypes.string.isRequired,

src/generic/Loading.jsx

@@ -2,28 +2,28 @@ import React from 'react';
 import { Spinner } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-export default function Loading() {
-  return (
-    <div
-      className="d-flex justify-content-center align-items-center flex-column"
-      style={{
+const Loading = () => (
+  <div
+    className="d-flex justify-content-center align-items-center flex-column"
+    style={{
         height: '50vh',
       }}
-    >
-      <Spinner
-        animation="border"
-        role="status"
-        variant="primary"
-        screenReaderText={(
-          <span className="sr-only">
-            <FormattedMessage
-              id="authoring.loading"
-              defaultMessage="Loading..."
-              description="Screen-reader message for when a page is loading."
-            />
-          </span>
+  >
+    <Spinner
+      animation="border"
+      role="status"
+      variant="primary"
+      screenReaderText={(
+        <span className="sr-only">
+          <FormattedMessage
+            id="authoring.loading"
+            defaultMessage="Loading..."
+            description="Screen-reader message for when a page is loading."
+          />
+        </span>
         )}
-      />
-    </div>
+    />
+  </div>
   );
-}
+
+export default Loading;

src/generic/PermissionDeniedAlert.jsx

@@ -2,15 +2,13 @@ import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
 
-function PermissionDeniedAlert() {
-  return (
-    <Alert variant="danger" data-testid="permissionDeniedAlert">
-      <FormattedMessage
-        id="authoring.alert.error.permission"
-        defaultMessage="You are not authorized to view this page. If you feel you should have access, please reach out to your course team admin to be given access."
-      />
-    </Alert>
+const PermissionDeniedAlert = () => (
+  <Alert variant="danger" data-testid="permissionDeniedAlert">
+    <FormattedMessage
+      id="authoring.alert.error.permission"
+      defaultMessage="You are not authorized to view this page. If you feel you should have access, please reach out to your course team admin to be given access."
+    />
+  </Alert>
   );
-}
 
 export default PermissionDeniedAlert;