Upgraded frontend-build version to v12

.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

@@ -81,7 +81,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.0",
-    "@edx/frontend-build": "9.1.2",
+    "@edx/frontend-build": "^12.0.3",
     "@edx/reactifex": "^1.0.3",
     "@testing-library/jest-dom": "5.15.1",
     "@testing-library/react": "12.1.5",

src/account-settings/AccountSettingsPage.jsx

@@ -146,28 +146,13 @@ class AccountSettingsPage extends React.Component {
     })),
   }));
 
-  sortDates = (a, b) => {
-    const aTimeSinceEpoch = new Date(a).getTime();
-    const bTimeSinceEpoch = new Date(b).getTime();
-
-    return bTimeSinceEpoch - aTimeSinceEpoch;
-  }
-
-  sortVerifiedNameRecords = verifiedNameHistory => {
-    if (Array.isArray(verifiedNameHistory)) {
-      return [...verifiedNameHistory].sort(this.sortDates);
-    }
-
-    return [];
-  }
-
   handleEditableFieldChange = (name, value) => {
     this.props.updateDraft(name, value);
-  }
+  };
 
   handleSubmit = (formId, values) => {
     this.props.saveSettings(formId, values);
-  }
+  };
 
   handleSubmitProfileName = (formId, values) => {
     if (Object.keys(this.props.drafts).includes('useVerifiedNameForCerts')) {
@@ -195,7 +180,7 @@ class AccountSettingsPage extends React.Component {
     } else {
       this.props.saveSettings(formId, values);
     }
-  }
+  };
 
   isEditable(fieldName) {
     return !this.props.staticFields.includes(fieldName);
@@ -280,7 +265,7 @@ class AccountSettingsPage extends React.Component {
     }
 
     return this.props.intl.formatMessage(messages[messageString]);
-  }
+  };
 
   renderVerifiedNameSuccessMessage = (verifiedName, created) => {
     const dateValue = new Date(created).valueOf();
@@ -295,7 +280,7 @@ class AccountSettingsPage extends React.Component {
         body={this.props.intl.formatMessage(messages['account.settings.field.name.verified.success.message'])}
       />
     );
-  }
+  };
 
   renderVerifiedNameFailureMessage = (verifiedName, created) => {
     const dateValue = new Date(created).valueOf();
@@ -326,7 +311,7 @@ class AccountSettingsPage extends React.Component {
         }
       />
     );
-  }
+  };
 
   renderVerifiedNameSubmittedMessage = (willCertNameChange) => (
     <Alert
@@ -344,7 +329,7 @@ class AccountSettingsPage extends React.Component {
         }
       </p>
     </Alert>
-  )
+  );
 
   renderVerifiedNameMessage = verifiedNameRecord => {
     const {
@@ -385,7 +370,7 @@ class AccountSettingsPage extends React.Component {
       default:
         return null;
     }
-  }
+  };
 
   renderVerifiedNameIcon = (status) => {
     switch (status) {
@@ -396,7 +381,7 @@ class AccountSettingsPage extends React.Component {
       default:
         return null;
     }
-  }
+  };
 
   renderVerifiedNameHelpText = (status, proctoredExamId) => {
     let messageStr = 'account.settings.field.name.verified.help.text';
@@ -421,7 +406,7 @@ class AccountSettingsPage extends React.Component {
     }
 
     return this.props.intl.formatMessage(messages[messageStr]);
-  }
+  };
 
   renderEmptyStaticFieldMessage() {
     if (this.isManagedProfile()) {

src/account-settings/EditableField.jsx

@@ -128,7 +128,7 @@ function EditableField(props) {
                   options={inputOptions}
                   {...others}
                 />
-                <>{others.children}</>
+                {others.children}
               </ValidationFormGroup>
               <p>
                 <StatefulButton

src/account-settings/certificate-preference/CertificatePreference.jsx

@@ -34,7 +34,7 @@ function CertificatePreference({
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const formId = 'useVerifiedNameForCerts';
 
-  function handleCheckboxChange() {
+  const handleCheckboxChange = () => {
     if (!checked) {
       if (fieldName === 'verified_name') {
         dispatch(updateDraft(formId, true));
@@ -44,30 +44,30 @@ function CertificatePreference({
     } else {
       setModalIsOpen(true);
     }
-  }
+  };
 
-  function handleCancel() {
+  const handleCancel = () => {
     setModalIsOpen(false);
     dispatch(resetDrafts());
-  }
+  };
 
-  function handleModalChange(e) {
+  const handleModalChange = (e) => {
     if (e.target.value === 'fullName') {
       dispatch(updateDraft(formId, false));
     } else {
       dispatch(updateDraft(formId, true));
     }
-  }
+  };
 
-  function handleSubmit(e) {
+  const handleSubmit = (e) => {
     e.preventDefault();
 
     if (saveState === 'pending') {
       return;
     }
 
     dispatch(saveSettings(formId, useVerifiedNameForCerts));
-  }
+  };
 
   useEffect(() => {
     if (originalVerifiedName) {

src/account-settings/certificate-preference/test/CertificatePreference.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-import-assign */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';

src/account-settings/coaching/CoachingConsent.jsx

@@ -17,27 +17,28 @@ import LogoSVG from '../../logo.svg';
 import { fetchSettings } from '../data/actions';
 import { coachingConsentPageSelector } from '../data/selectors';
 
-const Logo = ({ src, alt, ...attributes }) => (
-  <>
-    <img src={src} alt={alt} {...attributes} />
-  </>
-);
+function Logo({ src, alt, ...attributes }) {
+  return <img src={src} alt={alt} {...attributes} />;
+}
 
-const SuccessMessage = props => (
-  <div className="col-12 col-lg-6 shadow-lg mx-auto mt-4 p-5">
-    <FontAwesomeIcon className="text-success" icon={faCheck} size="5x" />
-    <div className="h3">{props.header}</div>
-    <div>{props.message}</div>
-    <Hyperlink destination={props.continueUrl} className="d-block p-2 my-3 text-center text-white bg-primary rounded">
-      {props.continue}
-    </Hyperlink>
-  </div>
-);
+function SuccessMessage(props) {
+  return (
+    <div className="col-12 col-lg-6 shadow-lg mx-auto mt-4 p-5">
+      <FontAwesomeIcon className="text-success" icon={faCheck} size="5x" />
+      <div className="h3">{props.header}</div>
+      <div>{props.message}</div>
+      <Hyperlink destination={props.continueUrl} className="d-block p-2 my-3 text-center text-white bg-primary rounded">
+        {props.continue}
+      </Hyperlink>
+    </div>
+  );
+}
 
-const AutoRedirect = (props) => {
+function AutoRedirect(props) {
   window.location.href = props.redirectUrl;
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;
-};
+}
 
 const VIEWS = {
   NOT_LOADED: 'NOT_LOADED',
@@ -71,6 +72,23 @@ class CoachingConsent extends React.Component {
     this.props.fetchSettings();
   }
 
+  handleSubmit(e) {
+    e.preventDefault();
+    const fullName = e.target.fullName.value;
+    const phoneNumber = e.target.phoneNumber.value;
+    const body = {
+      coaching_consent: true,
+      consent_form_seen: true,
+      phone_number: phoneNumber,
+      full_name: fullName,
+    };
+    this.setState({
+      formErrors: {},
+      formSubmitted: true,
+      declineSubmitted: false,
+    }, () => this.patchUsingCoachingConsentForm(body));
+  }
+
   sanitizeForwardingUrl(url) {
     // Redirect to root of MFE if invalid next param is sent
     return url && url.startsWith(getConfig().LMS_BASE_URL) ? url : `${getConfig().LMS_BASE_URL}/dashboard/`;
@@ -99,23 +117,6 @@ class CoachingConsent extends React.Component {
     }
   }
 
-  handleSubmit(e) {
-    e.preventDefault();
-    const fullName = e.target.fullName.value;
-    const phoneNumber = e.target.phoneNumber.value;
-    const body = {
-      coaching_consent: true,
-      consent_form_seen: true,
-      phone_number: phoneNumber,
-      full_name: fullName,
-    };
-    this.setState({
-      formErrors: {},
-      formSubmitted: true,
-      declineSubmitted: false,
-    }, () => this.patchUsingCoachingConsentForm(body));
-  }
-
   declineCoaching(e) {
     e.preventDefault();
     const body = {
@@ -160,6 +161,7 @@ class CoachingConsent extends React.Component {
       case VIEWS.DECLINED:
         return <AutoRedirect redirectUrl={this.state.redirectUrl} />;
       default:
+        // eslint-disable-next-line react/jsx-no-useless-fragment
         return <></>;
     }
   }
@@ -253,12 +255,12 @@ CoachingConsent.propTypes = {
     }),
   }).isRequired,
   formErrors: PropTypes.shape({
-    coaching: PropTypes.object,
+    coaching: PropTypes.shape({}),
   }).isRequired,
   confirmationValues: PropTypes.shape({
-    coaching: PropTypes.object,
-    name: PropTypes.object,
-    phone_number: PropTypes.object,
+    coaching: PropTypes.shape({}),
+    name: PropTypes.shape({}),
+    phone_number: PropTypes.shape({}),
   }).isRequired,
   fetchSettings: PropTypes.func.isRequired,
   profileDataManager: PropTypes.string,