Upgraded frontend-build version

.eslintrc.js

@@ -1,4 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { getBaseConfig } = require('@edx/frontend-build');
+
 const config = getBaseConfig('eslint');
 
 // Ignore linting on module.config.js
@@ -8,7 +10,7 @@ config.ignorePatterns = ['module.config.js'];
 // since they are causing eslint to fail for no apparent reason since
 // upgrading @edx/frontend-build from v3 to v5:
 //  - TypeError: Cannot read property 'range' of null
-config.rules['indent'] = ['error', 2, { 'ignoredNodes': ['TemplateLiteral', 'SwitchCase'] }];
+config.rules.indent = ['error', 2, { ignoredNodes: ['TemplateLiteral', 'SwitchCase'] }];
 config.rules['template-curly-spacing'] = 'off';
 config.rules['import/prefer-default-export'] = 'off';
 

package.json

@@ -55,7 +55,7 @@
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@edx/frontend-build": "11.0.2",
+    "@edx/frontend-build": "^12.0.3",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "3.7.0",

src/components/NotFoundPage/index.jsx

@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet';
 import { AppContext } from '@edx/frontend-platform/react';
 import { Container } from '@edx/paragon';
 
-const NotFoundPage = ({ pageTitle, errorHeading, errorMessage }) => {
+function NotFoundPage({ pageTitle, errorHeading, errorMessage }) {
   const { enterpriseConfig } = useContext(AppContext);
 
   let PAGE_TITLE = pageTitle;
@@ -22,7 +22,7 @@ const NotFoundPage = ({ pageTitle, errorHeading, errorMessage }) => {
       </div>
     </Container>
   );
-};
+}
 
 NotFoundPage.defaultProps = {
   pageTitle: 'Page not found',

src/components/TagCloud/index.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import './styles/TagCloud.scss';
 
-const TagCloud = ({ tags, onRemove }) => (
-  <>
+function TagCloud({ tags, onRemove }) {
+  return (
     <div className="skills-tag">
       <ul className="item">
         {
@@ -19,16 +19,15 @@ const TagCloud = ({ tags, onRemove }) => (
         }
       </ul>
     </div>
-
-  </>
-);
+  );
+}
 
 TagCloud.propTypes = {
   onRemove: PropTypes.func.isRequired,
   tags: PropTypes.arrayOf(
     PropTypes.shape({
       title: PropTypes.string.isRequired,
-      metadata: PropTypes.object.isRequired,
+      metadata: PropTypes.shape({}).isRequired,
     }),
   ).isRequired,
 };

src/components/Toasts/ToastsProvider.jsx

@@ -1,9 +1,11 @@
-import React, { createContext, useState } from 'react';
+import React, {
+  createContext, useCallback, useState, useMemo,
+} from 'react';
 import PropTypes from 'prop-types';
 
 export const ToastsContext = createContext();
 
-const ToastsProvider = ({ children }) => {
+function ToastsProvider({ children }) {
   const [toasts, setToasts] = useState([]);
 
   const addToast = (message) => {
@@ -16,21 +18,24 @@ const ToastsProvider = ({ children }) => {
     ]);
   };
 
-  const removeToast = (id) => {
+  const removeToast = useCallback((id) => {
     const index = toasts.findIndex(toast => toast.id === id);
     setToasts((prevToasts) => {
       const newToasts = [...prevToasts];
       newToasts.splice(index, 1);
       return newToasts;
     });
-  };
+  }, [toasts]);
 
   return (
-    <ToastsContext.Provider value={{ toasts, addToast, removeToast }}>
+    <ToastsContext.Provider value={
+      useMemo(() => ({ toasts, addToast, removeToast }), [removeToast, toasts])
+    }
+    >
       {children}
     </ToastsContext.Provider>
   );
-};
+}
 
 ToastsProvider.propTypes = {
   children: PropTypes.node.isRequired,

src/components/app/LoginRefresh.jsx

@@ -5,6 +5,7 @@ import { Container } from '@edx/paragon';
 import { LoadingSpinner } from '../loading-spinner';
 import { loginRefresh } from '../../utils/common';
 
+// eslint-disable-next-line react/prop-types
 export default function LoginRefresh({ children }) {
   const { authenticatedUser } = useContext(AppContext);
   const { roles } = authenticatedUser;

src/components/app/LoginRefresh.test.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import { render, act } from '@testing-library/react';
 import { AppContext } from '@edx/frontend-platform/react';
@@ -9,19 +9,23 @@ import * as utils from '../../utils/common';
 jest.mock('../../utils/common');
 
 // eslint-disable-next-line react/prop-types
-const LoginRefreshWithContext = ({ roles = [] }) => (
-  <AppContext.Provider value={{
-    authenticatedUser: {
-      userId: 1,
-      roles,
-    },
-  }}
-  >
-    <LoginRefresh>
-      <div>Hello!</div>
-    </LoginRefresh>
-  </AppContext.Provider>
-); /* eslint-enable react/prop-types */
+function LoginRefreshWithContext({ roles = [] }) {
+  return (
+    <AppContext.Provider value={
+      useMemo(() => ({
+        authenticatedUser: {
+          userId: 1,
+          roles,
+        },
+      }), [roles])
+    }
+    >
+      <LoginRefresh>
+        <div>Hello!</div>
+      </LoginRefresh>
+    </AppContext.Provider>
+  );
+} /* eslint-enable react/prop-types */
 
 describe('<LoginRefresh />', () => {
   it('should call loginRefresh if the user has no roles', async () => {

src/components/contact-admin-mailto/index.jsx

@@ -3,9 +3,9 @@ import { AppContext } from '@edx/frontend-platform/react';
 import { MailtoLink } from '@edx/paragon';
 import PropTypes from 'prop-types';
 
-const ContactAdminMailto = ({
+function ContactAdminMailto({
   children,
-}) => {
+}) {
   const { enterpriseConfig: { adminUsers } } = useContext(AppContext);
   const adminEmails = adminUsers.map(user => user.email);
 
@@ -21,7 +21,7 @@ const ContactAdminMailto = ({
   }
 
   return children;
-};
+}
 
 ContactAdminMailto.propTypes = {
   children: PropTypes.node,

src/components/course/CourseAssociatedPrograms.jsx

@@ -37,12 +37,14 @@ export default function CourseAssociatedPrograms() {
                   : program.marketingUrl}
                 target="_blank"
                 onClick={() => {
-                  sendEnterpriseTrackEvent(enterpriseConfig.uuid,
+                  sendEnterpriseTrackEvent(
+                    enterpriseConfig.uuid,
                     'edx.ui.enterprise.learner_portal.course.sidebar.program.clicked',
                     {
                       program_title: program.title,
                       program_type: program.type,
-                    });
+                    },
+                  );
                 }}
               >
                 {program.title}

src/components/course/CourseEnrollmentFailedAlert.jsx

@@ -67,7 +67,7 @@ const createUpgradeFailureMessages = (contactHelpText, enrollmentSource) => ({
  * reasons. The contents of the alert are determined by a ``failureReason`` which is passed
  * from the Data Sharing Consent (DSC) page as a query parameter.
  */
-const CourseEnrollmentFailedAlert = ({ className, enrollmentSource }) => {
+function CourseEnrollmentFailedAlert({ className, enrollmentSource }) {
   const { search } = useLocation();
   const { enterpriseConfig } = useContext(AppContext);
   const renderContactHelpText = useRenderContactHelpText(enterpriseConfig);
@@ -92,12 +92,14 @@ const CourseEnrollmentFailedAlert = ({ className, enrollmentSource }) => {
     [courseEnrollmentsByStatus, courseRunKey],
   );
 
-  const failureReasonMessages = useMemo(() => {
-    const contactHelpText = renderContactHelpText(Alert.Link);
-    return isUpgradeAttempt ? createUpgradeFailureMessages(contactHelpText, enrollmentSource)
-      : createEnrollmentFailureMessages(contactHelpText);
-  },
-  [enrollmentSource, isUpgradeAttempt, renderContactHelpText]);
+  const failureReasonMessages = useMemo(
+    () => {
+      const contactHelpText = renderContactHelpText(Alert.Link);
+      return isUpgradeAttempt ? createUpgradeFailureMessages(contactHelpText, enrollmentSource)
+        : createEnrollmentFailureMessages(contactHelpText);
+    },
+    [enrollmentSource, isUpgradeAttempt, renderContactHelpText],
+  );
 
   if (!hasEnrollmentFailed) {
     return null;
@@ -110,7 +112,7 @@ const CourseEnrollmentFailedAlert = ({ className, enrollmentSource }) => {
       </Alert>
     </Container>
   );
-};
+}
 
 CourseEnrollmentFailedAlert.defaultProps = {
   className: 'mt-3',

src/components/course/CourseRecommendationCard.jsx

@@ -11,7 +11,7 @@ import { getPrimaryPartnerLogo, isDefinedAndNotNull } from '../../utils/common';
 export const COURSE_REC_EVENT_NAME = 'edx.ui.enterprise.learner_portal.recommended.course.clicked';
 export const SAME_PART_EVENT_NAME = 'edx.ui.enterprise.learner_portal.same.partner.recommended.course.clicked';
 
-const CourseRecommendationCard = ({ course, isPartnerRecommendation }) => {
+function CourseRecommendationCard({ course, isPartnerRecommendation }) {
   const { enterpriseConfig: { slug, uuid } } = useContext(AppContext);
   const eventName = isPartnerRecommendation ? SAME_PART_EVENT_NAME : COURSE_REC_EVENT_NAME;
   const history = useHistory();
@@ -87,7 +87,7 @@ const CourseRecommendationCard = ({ course, isPartnerRecommendation }) => {
       </Card.Footer>
     </Card>
   );
-};
+}
 
 CourseRecommendationCard.propTypes = {
   course: PropTypes.shape({

src/components/course/CourseRecommendations.jsx

@@ -3,7 +3,7 @@ import { CardGrid } from '@edx/paragon';
 import { CourseContext } from './CourseContextProvider';
 import CourseRecommendationCard from './CourseRecommendationCard';
 
-const CourseRecommendations = () => {
+function CourseRecommendations() {
   const { state } = useContext(CourseContext);
   const { course, courseRecommendations } = state;
   const { allRecommendations, samePartnerRecommendations } = courseRecommendations;
@@ -36,6 +36,6 @@ const CourseRecommendations = () => {
       )}
     </div>
   );
-};
+}
 
 export default CourseRecommendations;

src/components/course/CourseRunCard.jsx

@@ -32,13 +32,13 @@ import { SubsidyRequestsContext } from '../enterprise-subsidy-requests/SubsidyRe
 const DATE_FORMAT = 'MMM D';
 const DEFAULT_BUTTON_LABEL = 'Enroll';
 
-const CourseRunCard = ({
+function CourseRunCard({
   userEntitlements,
   courseRun,
   userEnrollments,
   courseKey,
   subsidyRequestCatalogsApplicableToCourse,
-}) => {
+}) {
   const {
     availability,
     pacingType,
@@ -224,7 +224,7 @@ const CourseRunCard = ({
       </Card.Section>
     </Card>
   );
-};
+}
 
 CourseRunCard.propTypes = {
   courseKey: PropTypes.string.isRequired,

src/components/course/CourseRunCards.jsx

@@ -6,7 +6,7 @@ import {
 import { CourseContext } from './CourseContextProvider';
 import CourseRunCard from './CourseRunCard';
 
-const CourseRunCards = () => {
+function CourseRunCards() {
   const {
     state: courseData,
     subsidyRequestCatalogsApplicableToCourse,
@@ -35,6 +35,6 @@ const CourseRunCards = () => {
       ))}
     </CardGrid>
   );
-};
+}
 
 export default CourseRunCards;

src/components/course/CourseSidebarPrice.jsx

@@ -19,7 +19,7 @@ export const FREE_WHEN_APPROVED_MESSAGE = 'Free to me\n(when approved)';
 export const COVERED_BY_ENTERPRISE_OFFER_MESSAGE = 'This course can be purchased with your organization\'s learner credit';
 export const INSUFFICIENT_ENTERPRISE_OFFER_BALANCE = 'Your organization doesn\'t have enough learner credit remaining.';
 
-const CourseSidebarPrice = () => {
+function CourseSidebarPrice() {
   const { enterpriseConfig } = useContext(AppContext);
   const { state: courseData } = useContext(CourseContext);
   const { activeCourseRun, userSubsidyApplicableToCourse } = courseData;
@@ -117,6 +117,6 @@ const CourseSidebarPrice = () => {
       <small>{discountedPriceMessage}</small>
     </>
   );
-};
+}
 
 export default CourseSidebarPrice;

src/components/course/EnrollModal.jsx

@@ -35,15 +35,15 @@ export const MODAL_TEXTS = {
   },
 };
 
-const EnrollModal = ({
+function EnrollModal({
   isModalOpen,
   setIsModalOpen,
   enrollmentUrl,
   courseRunPrice,
   userSubsidyApplicableToCourse,
   couponCodesCount,
   onEnroll,
-}) => {
+}) {
   const [isLoading, setIsLoading] = useState(false);
 
   const getModalTexts = () => {
@@ -93,6 +93,7 @@ const EnrollModal = ({
           href={enrollmentUrl}
           onClick={handleEnroll}
         >
+          { /* eslint-disable-next-line react/jsx-no-useless-fragment */ }
           <>
             {isLoading && <FontAwesomeIcon icon={faSpinner} alt="loading" className="fa-spin mr-2" />}
             {buttonText}
@@ -102,7 +103,7 @@ const EnrollModal = ({
       onClose={() => setIsModalOpen(false)}
     />
   );
-};
+}
 
 EnrollModal.propTypes = {
   isModalOpen: PropTypes.bool.isRequired,

src/components/course/LicenseRequestedAlert.jsx

@@ -15,7 +15,7 @@ import { UserSubsidyContext } from '../enterprise-user-subsidy/UserSubsidy';
  * A component to render an alert when a learner has a license request that is pending review.
  * Once dismissed, the learner will not see this alert again until the cookies are cleared.
  */
-const LicenseRequestedAlert = ({ catalogList }) => {
+function LicenseRequestedAlert({ catalogList }) {
   const cookies = new Cookies();
   const previouslyDismissed = cookies.get(LICENSE_REQUESTED_ALERT_DISMISSED_COOKIE_NAME);
   const [isAlertOpen, setIsAlertOpen] = useState(!previouslyDismissed);
@@ -56,7 +56,7 @@ const LicenseRequestedAlert = ({ catalogList }) => {
       </Alert>
     </Container>
   );
-};
+}
 
 LicenseRequestedAlert.propTypes = {
   catalogList: PropTypes.arrayOf(PropTypes.string).isRequired,