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

@@ -58,7 +58,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.1.1",
-    "@edx/frontend-build": "11.0.2",
+    "@edx/frontend-build": "12.3.0",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "3.7.0",

src/components/TagCloud/index.jsx

@@ -24,7 +24,7 @@ TagCloud.propTypes = {
   tags: PropTypes.arrayOf(
     PropTypes.shape({
       title: PropTypes.string.isRequired,
-      metadata: PropTypes.object.isRequired,
+      metadata: PropTypes.shape({}).isRequired,
     }),
   ).isRequired,
 };

src/components/Toasts/ToastsProvider.jsx

@@ -1,4 +1,6 @@
-import React, { createContext, useState } from 'react';
+import React, {
+  createContext, useCallback, useState, useMemo,
+} from 'react';
 import PropTypes from 'prop-types';
 
 export const ToastsContext = createContext();
@@ -16,17 +18,19 @@ 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]);
+
+  const contextValue = useMemo(() => ({ toasts, addToast, removeToast }), [removeToast, toasts]);
 
   return (
-    <ToastsContext.Provider value={{ toasts, addToast, removeToast }}>
+    <ToastsContext.Provider value={contextValue}>
       {children}
     </ToastsContext.Provider>
   );

src/components/app/App.jsx

@@ -7,7 +7,7 @@ import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 import AuthenticatedPage from './AuthenticatedPage';
 import EnterpriseAppPageRoutes from './EnterpriseAppPageRoutes';
 import NotFoundPage from '../NotFoundPage';
-import NoticesProvider from '../notices-provider';
+import { NoticesProvider } from '../notices-provider';
 import {
   EnterpriseCustomerRedirect,
   EnterprisePageRedirect,
@@ -16,7 +16,7 @@ import { EnterpriseInvitePage } from '../enterprise-invite';
 import { ExecutiveEducation2UPage } from '../executive-education-2u';
 import { ToastsProvider, Toasts } from '../Toasts';
 
-export default function App() {
+const App = () => {
   useEffect(() => {
     if (process.env.HOTJAR_APP_ID) {
       try {
@@ -56,4 +56,6 @@ export default function App() {
       </NoticesProvider>
     </AppProvider>
   );
-}
+};
+
+export default App;

src/components/app/AuthenticatedPage.jsx

@@ -13,7 +13,7 @@ import { Layout } from '../layout';
 import LoginRefresh from './LoginRefresh';
 import { ErrorPage } from '../error-page';
 
-export default function AuthenticatedPage({ children, useEnterpriseConfigCache }) {
+const AuthenticatedPage = ({ children, useEnterpriseConfigCache }) => {
   const location = useLocation();
   const params = new URLSearchParams(location.search);
   const { enterpriseSlug } = useParams();
@@ -55,7 +55,7 @@ export default function AuthenticatedPage({ children, useEnterpriseConfigCache }
       </LoginRefresh>
     </LoginRedirect>
   );
-}
+};
 
 AuthenticatedPage.propTypes = {
   children: PropTypes.node.isRequired,
@@ -65,3 +65,5 @@ AuthenticatedPage.propTypes = {
 AuthenticatedPage.defaultProps = {
   useEnterpriseConfigCache: true,
 };
+
+export default AuthenticatedPage;

src/components/app/AuthenticatedUserSubsidyPage.jsx

@@ -8,19 +8,19 @@ import {
 } from '../enterprise-user-subsidy';
 import { SubsidyRequestsContextProvider } from '../enterprise-subsidy-requests';
 
-export default function AuthenticatedUserSubsidyPage({ children }) {
-  return (
-    <AuthenticatedPage>
-      <UserSubsidy>
-        <SubsidyRequestsContextProvider>
-          <AutoActivateLicense />
-          {children}
-        </SubsidyRequestsContextProvider>
-      </UserSubsidy>
-    </AuthenticatedPage>
-  );
-}
+const AuthenticatedUserSubsidyPage = ({ children }) => (
+  <AuthenticatedPage>
+    <UserSubsidy>
+      <SubsidyRequestsContextProvider>
+        <AutoActivateLicense />
+        {children}
+      </SubsidyRequestsContextProvider>
+    </UserSubsidy>
+  </AuthenticatedPage>
+);
 
 AuthenticatedUserSubsidyPage.propTypes = {
   children: PropTypes.node.isRequired,
 };
+
+export default AuthenticatedUserSubsidyPage;

src/components/app/EnterpriseAppPageRoutes.jsx

@@ -12,31 +12,29 @@ import { features } from '../../config';
 import { LicenseActivationPage } from '../license-activation';
 import { PathwayProgressPage } from '../pathway-progress';
 
-function EnterpriseAppPageRoutes() {
-  return (
-    <AuthenticatedUserSubsidyPage>
-      <PageRoute exact path="/:enterpriseSlug" component={DashboardPage} />
-      <PageRoute
-        exact
-        path={['/:enterpriseSlug/search', '/:enterpriseSlug/search/:pathwayUUID']}
-        component={SearchPage}
-      />
-      <PageRoute exact path="/:enterpriseSlug/course/:courseKey" component={CoursePage} />
-      {features.ENABLE_PROGRAMS && (
-        <PageRoute exact path="/:enterpriseSlug/program/:programUuid" component={ProgramPage} />
-      )}
-      {
-        // Deprecated URL, will be removed in the future.
-        <PageRoute exact path="/:enterpriseSlug/program-progress/:programUUID" component={ProgramProgressRedirect} />
-      }
-      <PageRoute exact path="/:enterpriseSlug/program/:programUUID/progress" component={ProgramProgressPage} />
-      <PageRoute exact path="/:enterpriseSlug/skills-quiz" component={SkillsQuizPage} />
-      <PageRoute exact path="/:enterpriseSlug/licenses/:activationKey/activate" component={LicenseActivationPage} />
-      {features.FEATURE_ENABLE_PATHWAY_PROGRESS && (
-        <PageRoute exact path="/:enterpriseSlug/pathway/:pathwayUUID/progress" component={PathwayProgressPage} />
-      )}
-    </AuthenticatedUserSubsidyPage>
-  );
-}
+const EnterpriseAppPageRoutes = () => (
+  <AuthenticatedUserSubsidyPage>
+    <PageRoute exact path="/:enterpriseSlug" component={DashboardPage} />
+    <PageRoute
+      exact
+      path={['/:enterpriseSlug/search', '/:enterpriseSlug/search/:pathwayUUID']}
+      component={SearchPage}
+    />
+    <PageRoute exact path="/:enterpriseSlug/course/:courseKey" component={CoursePage} />
+    {features.ENABLE_PROGRAMS && (
+      <PageRoute exact path="/:enterpriseSlug/program/:programUuid" component={ProgramPage} />
+    )}
+    {
+      // Deprecated URL, will be removed in the future.
+      <PageRoute exact path="/:enterpriseSlug/program-progress/:programUUID" component={ProgramProgressRedirect} />
+    }
+    <PageRoute exact path="/:enterpriseSlug/program/:programUUID/progress" component={ProgramProgressPage} />
+    <PageRoute exact path="/:enterpriseSlug/skills-quiz" component={SkillsQuizPage} />
+    <PageRoute exact path="/:enterpriseSlug/licenses/:activationKey/activate" component={LicenseActivationPage} />
+    {features.FEATURE_ENABLE_PATHWAY_PROGRESS && (
+      <PageRoute exact path="/:enterpriseSlug/pathway/:pathwayUUID/progress" component={PathwayProgressPage} />
+    )}
+  </AuthenticatedUserSubsidyPage>
+);
 
 export default EnterpriseAppPageRoutes;

src/components/app/LoginRefresh.jsx

@@ -1,11 +1,12 @@
 import React, { useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import { AppContext } from '@edx/frontend-platform/react';
 import { Container } from '@edx/paragon';
 
 import { LoadingSpinner } from '../loading-spinner';
 import { loginRefresh } from '../../utils/common';
 
-export default function LoginRefresh({ children }) {
+const LoginRefresh = ({ children }) => {
   const { authenticatedUser } = useContext(AppContext);
   const { roles } = authenticatedUser;
 
@@ -32,4 +33,10 @@ export default function LoginRefresh({ children }) {
     );
   }
   return children;
-}
+};
+
+LoginRefresh.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default LoginRefresh;

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,21 @@ import * as utils from '../../utils/common';
 jest.mock('../../utils/common');
 
 // eslint-disable-next-line react/prop-types
-const LoginRefreshWithContext = ({ roles = [] }) => (
-  <AppContext.Provider value={{
+const LoginRefreshWithContext = ({ roles = [] }) => {
+  const contextValue = useMemo(() => ({
     authenticatedUser: {
       userId: 1,
       roles,
     },
-  }}
-  >
-    <LoginRefresh>
-      <div>Hello!</div>
-    </LoginRefresh>
-  </AppContext.Provider>
-); /* eslint-enable react/prop-types */
+  }), [roles]);
+  return (
+    <AppContext.Provider value={contextValue}>
+      <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/course/CourseAssociatedPrograms.jsx

@@ -7,7 +7,7 @@ import { CourseContext } from './CourseContextProvider';
 import { getProgramIcon, formatProgramType } from './data/utils';
 import { features } from '../../config';
 
-export default function CourseAssociatedPrograms() {
+const CourseAssociatedPrograms = () => {
   const { state } = useContext(CourseContext);
   const { course } = state;
   const { enterpriseConfig } = useContext(AppContext);
@@ -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}
@@ -53,4 +55,6 @@ export default function CourseAssociatedPrograms() {
       </ul>
     </div>
   );
-}
+};
+
+export default CourseAssociatedPrograms;

src/components/course/CourseContextProvider.jsx

@@ -18,7 +18,7 @@ const reducer = (state, action) => {
   }
 };
 
-export function CourseContextProvider({ children, initialState }) {
+export const CourseContextProvider = ({ children, initialState }) => {
   const { catalogsForSubsidyRequests } = useContext(SubsidyRequestsContext);
   const [state, dispatch] = useReducer(reducer, initialState);
   const { catalog } = state;
@@ -42,7 +42,7 @@ export function CourseContextProvider({ children, initialState }) {
       {children}
     </CourseContext.Provider>
   );
-}
+};
 
 CourseContextProvider.propTypes = {
   children: PropTypes.node.isRequired,

src/components/course/CourseEnrollmentFailedAlert.jsx

@@ -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;

src/components/course/CourseHeader.jsx

@@ -24,7 +24,7 @@ import {
 import LicenseRequestedAlert from './LicenseRequestedAlert';
 import SubsidyRequestButton from './SubsidyRequestButton';
 
-export default function CourseHeader() {
+const CourseHeader = () => {
   const { enterpriseConfig } = useContext(AppContext);
   const { state } = useContext(CourseContext);
   const { course, catalog } = state;
@@ -111,4 +111,6 @@ export default function CourseHeader() {
       </Container>
     </div>
   );
-}
+};
+
+export default CourseHeader;

src/components/course/CourseMainContent.jsx

@@ -28,7 +28,7 @@ function formatSponsorTextList(sponsors) {
   return sponsorTextList;
 }
 
-export default function CourseMainContent() {
+const CourseMainContent = () => {
   const { config } = useContext(AppContext);
   const { state } = useContext(CourseContext);
   const { course, activeCourseRun } = state;
@@ -156,4 +156,6 @@ export default function CourseMainContent() {
       )}
     </>
   );
-}
+};
+
+export default CourseMainContent;

src/components/course/CoursePage.jsx

@@ -23,7 +23,7 @@ import { UserSubsidyContext } from '../enterprise-user-subsidy/UserSubsidy';
 import { SubsidyRequestsContext } from '../enterprise-subsidy-requests';
 import { useSearchCatalogs } from '../search/data/hooks';
 
-export default function CoursePage() {
+const CoursePage = () => {
   const { courseKey } = useParams();
   const { enterpriseConfig } = useContext(AppContext);
   const { search } = useLocation();
@@ -154,4 +154,6 @@ export default function CoursePage() {
       </CourseEnrollmentsContextProvider>
     </>
   );
-}
+};
+
+export default CoursePage;