Revert "Upgraded frontend-build version to v12"

.eslintrc.js

@@ -1,4 +1,3 @@
-// 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": "^12.0.3",
+    "@edx/frontend-build": "9.1.2",
     "@edx/reactifex": "^1.0.3",
     "@testing-library/jest-dom": "5.15.1",
     "@testing-library/react": "12.1.5",

src/account-settings/AccountSettingsPage.jsx

@@ -148,13 +148,28 @@ 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')) {
@@ -182,7 +197,7 @@ class AccountSettingsPage extends React.Component {
     } else {
       this.props.saveSettings(formId, values);
     }
-  };
+  }
 
   isEditable(fieldName) {
     return !this.props.staticFields.includes(fieldName);
@@ -267,7 +282,7 @@ class AccountSettingsPage extends React.Component {
     }
 
     return this.props.intl.formatMessage(messages[messageString]);
-  };
+  }
 
   renderVerifiedNameSuccessMessage = (verifiedName, created) => {
     const dateValue = new Date(created).valueOf();
@@ -282,7 +297,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();
@@ -313,7 +328,7 @@ class AccountSettingsPage extends React.Component {
         }
       />
     );
-  };
+  }
 
   renderVerifiedNameSubmittedMessage = (willCertNameChange) => (
     <Alert
@@ -331,7 +346,7 @@ class AccountSettingsPage extends React.Component {
         }
       </p>
     </Alert>
-  );
+  )
 
   renderVerifiedNameMessage = verifiedNameRecord => {
     const {
@@ -372,7 +387,7 @@ class AccountSettingsPage extends React.Component {
       default:
         return null;
     }
-  };
+  }
 
   renderVerifiedNameIcon = (status) => {
     switch (status) {
@@ -383,7 +398,7 @@ class AccountSettingsPage extends React.Component {
       default:
         return null;
     }
-  };
+  }
 
   renderVerifiedNameHelpText = (status, proctoredExamId) => {
     let messageStr = 'account.settings.field.name.verified.help.text';
@@ -408,7 +423,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';
 
-  const handleCheckboxChange = () => {
+  function handleCheckboxChange() {
     if (!checked) {
       if (fieldName === 'verified_name') {
         dispatch(updateDraft(formId, true));
@@ -44,30 +44,30 @@ function CertificatePreference({
     } else {
       setModalIsOpen(true);
     }
-  };
+  }
 
-  const handleCancel = () => {
+  function handleCancel() {
     setModalIsOpen(false);
     dispatch(resetDrafts());
-  };
+  }
 
-  const handleModalChange = (e) => {
+  function handleModalChange(e) {
     if (e.target.value === 'fullName') {
       dispatch(updateDraft(formId, false));
     } else {
       dispatch(updateDraft(formId, true));
     }
-  };
+  }
 
-  const handleSubmit = (e) => {
+  function 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,4 +1,3 @@
-/* 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,28 +17,27 @@ import LogoSVG from '../../logo.svg';
 import { fetchSettings } from '../data/actions';
 import { coachingConsentPageSelector } from '../data/selectors';
 
-function Logo({ src, alt, ...attributes }) {
-  return <img src={src} alt={alt} {...attributes} />;
-}
+const Logo = ({ src, alt, ...attributes }) => (
+  <>
+    <img src={src} alt={alt} {...attributes} />
+  </>
+);
 
-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 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 AutoRedirect(props) {
+const AutoRedirect = (props) => {
   window.location.href = props.redirectUrl;
-  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;
-}
+};
 
 const VIEWS = {
   NOT_LOADED: 'NOT_LOADED',
@@ -72,23 +71,6 @@ 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/`;
@@ -117,6 +99,23 @@ 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 = {
@@ -161,7 +160,6 @@ 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 <></>;
     }
   }
@@ -255,12 +253,12 @@ CoachingConsent.propTypes = {
     }),
   }).isRequired,
   formErrors: PropTypes.shape({
-    coaching: PropTypes.shape({}),
+    coaching: PropTypes.object,
   }).isRequired,
   confirmationValues: PropTypes.shape({
-    coaching: PropTypes.shape({}),
-    name: PropTypes.shape({}),
-    phone_number: PropTypes.shape({}),
+    coaching: PropTypes.object,
+    name: PropTypes.object,
+    phone_number: PropTypes.object,
   }).isRequired,
   fetchSettings: PropTypes.func.isRequired,
   profileDataManager: PropTypes.string,