feat: Content highlights with CardCarousel

.env.development

@@ -46,3 +46,4 @@ FEATURE_ENROLL_WITH_ENTERPRISE_OFFERS='true'
 FEATURE_ENABLE_PATHWAY_PROGRESS='true'
 GETSMARTER_STUDENT_TC_URL='https://www.getsmarter.com/terms-and-conditions-for-students'
 GETSMARTER_PRIVACY_POLICY_URL='https://www.getsmarter.com/privacy-policy'
+FEATURE_CONTENT_HIGHLIGHTS='true'

.eslintrc.js

@@ -1,14 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { getBaseConfig } = require('@edx/frontend-build');
+
 const config = getBaseConfig('eslint');
 
-// Ignore linting on module.config.js
-config.ignorePatterns = ['module.config.js'];
+config.overrides = [
+  {
+    files: ['*.test.js', '*.test.jsx'],
+    rules: {
+      'react/prop-types': 'off',
+      'react/jsx-no-constructed-context-values': 'off',
+    },
+  },
+];
 
 // Temporarily update the 'indent' and 'template-curly-spacing' rules
 // 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

@@ -14,7 +14,7 @@
     "@edx/frontend-enterprise-logistration": "2.1.1",
     "@edx/frontend-enterprise-utils": "2.2.0",
     "@edx/frontend-platform": "2.6.2",
-    "@edx/paragon": "20.22.3",
+    "@edx/paragon": "20.26.1",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",
@@ -58,7 +58,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.1.1",
-    "@edx/frontend-build": "11.0.2",
+    "@edx/frontend-build": "12.4.15",
     "@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,32 +1,43 @@
-import React, { createContext, useState } from 'react';
+import React, {
+  createContext,
+  useState,
+  useMemo,
+  useCallback,
+} from 'react';
 import PropTypes from 'prop-types';
 
 export const ToastsContext = createContext();
 
 const ToastsProvider = ({ children }) => {
   const [toasts, setToasts] = useState([]);
 
-  const addToast = (message) => {
+  const addToast = useCallback((message) => {
     setToasts(prevToasts => [
       ...prevToasts,
       {
         id: prevToasts.length,
         message,
       },
     ]);
-  };
+  }, []);
 
-  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,
+  }), [toasts, removeToast, addToast]);
 
   return (
-    <ToastsContext.Provider value={{ toasts, addToast, removeToast }}>
+    <ToastsContext.Provider value={contextValue}>
       {children}
     </ToastsContext.Provider>
   );

src/components/app/App.jsx

@@ -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;
 
@@ -31,5 +32,12 @@ export default function LoginRefresh({ children }) {
       </Container>
     );
   }
+
   return children;
-}
+};
+
+LoginRefresh.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default LoginRefresh;

src/components/app/LoginRefresh.test.jsx

@@ -8,7 +8,6 @@ import * as utils from '../../utils/common';
 
 jest.mock('../../utils/common');
 
-// eslint-disable-next-line react/prop-types
 const LoginRefreshWithContext = ({ roles = [] }) => (
   <AppContext.Provider value={{
     authenticatedUser: {
@@ -21,7 +20,7 @@ const LoginRefreshWithContext = ({ roles = [] }) => (
       <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;