eduNEXT · dcoa · Nov 14, 2023 · Dec 6, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,11 +1,16 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('eslint', {
-  overrides: [{
-    files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)", "setupTest.js"],
-    rules: {
-      'import/named': 'off',
-      'import/no-extraneous-dependencies': 'off',
-    },
-  }],
+  rules: {
+    'import/named': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'react/function-component-definition': 'off',
+    'react-hooks/rules-of-hooks': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+    'no-restricted-exports': 'off',
+    'react/jsx-no-useless-fragment': 'off',
+    'react/no-unstable-nested-components': 'off',
+    'react/jsx-no-constructed-context-values': 'off',
+    'no-import-assign': 'off',
+  },
 });
diff --git a/jest.config.js b/jest.config.js
@@ -9,4 +9,9 @@ module.exports = createConfig('jest', {
     'src/i18n',
     'src/.*\\.exp\\..*',
   ],
+  testTimeout: 30000,
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    "^axios$": "axios/dist/axios.js"
+  },
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "prepare": "husky install",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -29,12 +30,12 @@
     "url": "https://github.com/openedx/frontend-app-learning/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "^12.0.0",
-    "@edx/frontend-component-header": "^4.0.0",
-    "@edx/frontend-lib-special-exams": "^2.16.1",
-    "@edx/frontend-platform": "^4.2.0",
-    "@edx/paragon": "^20.28.4",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@13.0.0-alpha.6",
+    "@edx/frontend-component-header": "npm:@edunext/frontend-component-header@5.0.0-alpha.6",
+    "@edx/frontend-lib-special-exams": "npm:@edunext/[email protected]",
+    "@edx/frontend-platform": "npm:@edunext/[email protected]",
+    "@edx/paragon": "22.0.0-alpha.13",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -64,7 +65,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.0.2",
-    "@edx/frontend-build": "9.1.4",
+    "@edx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables",
     "@edx/reactifex": "2.0.1",
     "@pact-foundation/pact": "9.17.3",
     "@testing-library/jest-dom": "5.16.4",
@@ -76,4 +77,4 @@
     "jest": "27.5.1",
     "rosie": "2.1.0"
   }
-}
+}
diff --git a/src/alerts/active-enteprise-alert/ActiveEnterpriseAlert.test.jsx b/src/alerts/active-enteprise-alert/ActiveEnterpriseAlert.test.jsx
@@ -20,8 +20,6 @@ describe('ActiveEnterpriseAlert', () => {
     render(<ActiveEnterpriseAlert {...mockData} />);
     expect(screen.getByRole('alert')).toBeInTheDocument();
     expect(screen.getByText('test message', { exact: false })).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'change enterprise now' })).toHaveAttribute(
-      'href', `${getConfig().LMS_BASE_URL}/enterprise/select/active/?success_url=http%3A%2F%2Flocalhost%2Fcourse%2Ftest-course-id%2Fhome`,
-    );
+    expect(screen.getByRole('link', { name: 'change enterprise now' })).toHaveAttribute('href', `${getConfig().LMS_BASE_URL}/enterprise/select/active/?success_url=http%3A%2F%2Flocalhost%2Fcourse%2Ftest-course-id%2Fhome`);
   });
 });
diff --git a/src/alerts/sequence-alerts/hooks.js b/src/alerts/sequence-alerts/hooks.js
@@ -35,7 +35,8 @@ function useSequenceEntranceExamAlert(courseId, sequenceId, intl) {
 
   if (entranceExamPassed) {
     entranceExamText = intl.formatMessage(
-      messages.entranceExamTextPassed, { entranceExamCurrentScore: entranceExamCurrentScore * 100 },
+      messages.entranceExamTextPassed,
+      { entranceExamCurrentScore: entranceExamCurrentScore * 100 },
     );
   } else {
     entranceExamText = intl.formatMessage(messages.entranceExamTextNotPassing, {

diff --git a/src/course-home/data/__factories__/courseHomeMetadata.factory.js b/src/course-home/data/__factories__/courseHomeMetadata.factory.js
@@ -34,91 +34,89 @@ Factory.define('courseHomeMetadata')
       currency_symbol: '$',
     },
   })
-  .attr(
-    'tabs', ['id', 'host'], (id, host) => [
-      Factory.build(
-        'tab',
-        {
-          title: 'Course',
-          priority: 0,
-          slug: 'courseware',
-          type: 'courseware',
-        },
-        {
-          courseId: id,
-          host,
-          path: 'course/',
-        },
-      ),
-      Factory.build(
-        'tab',
-        {
-          title: 'Discussion',
-          priority: 1,
-          slug: 'discussion',
-          type: 'discussion',
-        },
-        {
-          courseId: id,
-          host,
-          path: 'discussion/forum/',
-        },
-      ),
-      Factory.build(
-        'tab',
-        {
-          title: 'Wiki',
-          priority: 2,
-          slug: 'wiki',
-          type: 'wiki',
-        },
-        {
-          courseId: id,
-          host,
-          path: 'course_wiki',
-        },
-      ),
-      Factory.build(
-        'tab',
-        {
-          title: 'Progress',
-          priority: 3,
-          slug: 'progress',
-          type: 'progress',
-        },
-        {
-          courseId: id,
-          host,
-          path: 'progress',
-        },
-      ),
-      Factory.build(
-        'tab',
-        {
-          title: 'Instructor',
-          priority: 4,
-          slug: 'instructor',
-          type: 'instructor',
-        },
-        {
-          courseId: id,
-          host,
-          path: 'instructor',
-        },
-      ),
-      Factory.build(
-        'tab',
-        {
-          title: 'Dates',
-          priority: 5,
-          slug: 'dates',
-          type: 'dates',
-        },
-        {
-          courseId: id,
-          host,
-          path: 'dates',
-        },
-      ),
-    ],
-  );
+  .attr('tabs', ['id', 'host'], (id, host) => [
+    Factory.build(
+      'tab',
+      {
+        title: 'Course',
+        priority: 0,
+        slug: 'courseware',
+        type: 'courseware',
+      },
+      {
+        courseId: id,
+        host,
+        path: 'course/',
+      },
+    ),
+    Factory.build(
+      'tab',
+      {
+        title: 'Discussion',
+        priority: 1,
+        slug: 'discussion',
+        type: 'discussion',
+      },
+      {
+        courseId: id,
+        host,
+        path: 'discussion/forum/',
+      },
+    ),
+    Factory.build(
+      'tab',
+      {
+        title: 'Wiki',
+        priority: 2,
+        slug: 'wiki',
+        type: 'wiki',
+      },
+      {
+        courseId: id,
+        host,
+        path: 'course_wiki',
+      },
+    ),
+    Factory.build(
+      'tab',
+      {
+        title: 'Progress',
+        priority: 3,
+        slug: 'progress',
+        type: 'progress',
+      },
+      {
+        courseId: id,
+        host,
+        path: 'progress',
+      },
+    ),
+    Factory.build(
+      'tab',
+      {
+        title: 'Instructor',
+        priority: 4,
+        slug: 'instructor',
+        type: 'instructor',
+      },
+      {
+        courseId: id,
+        host,
+        path: 'instructor',
+      },
+    ),
+    Factory.build(
+      'tab',
+      {
+        title: 'Dates',
+        priority: 5,
+        slug: 'dates',
+        type: 'dates',
+      },
+      {
+        courseId: id,
+        host,
+        path: 'dates',
+      },
+    ),
+  ]);
diff --git a/src/course-home/outline-tab/OutlineTab.test.jsx b/src/course-home/outline-tab/OutlineTab.test.jsx
@@ -389,19 +389,19 @@ describe('Outline Tab', () => {
       ${'Regular'} | ${3}
       ${'Intense'} | ${5}
         `('calls the API with a goal of $days when $level goal is clicked', async ({ level, days }) => {
-  // click on Casual goal
-  const button = await screen.queryByTestId(`weekly-learning-goal-input-${level}`);
-  fireEvent.click(button);
-  // Verify the request was made
-  await waitFor(() => {
-    expect(axiosMock.history.post[0].url).toMatch(goalUrl);
-    // subscribe is turned on automatically
-    expect(axiosMock.history.post[0].data).toMatch(`{"course_id":"${courseId}","days_per_week":${days},"subscribed_to_reminders":true}`);
-    // verify that the additional info about subscriptions shows up
-    expect(screen.queryByText(messages.goalReminderDetail.defaultMessage)).toBeInTheDocument();
-  });
-  expect(screen.getByLabelText(messages.setGoalReminder.defaultMessage)).toBeEnabled();
-});
+        // click on Casual goal
+        const button = await screen.queryByTestId(`weekly-learning-goal-input-${level}`);
+        fireEvent.click(button);
+        // Verify the request was made
+        await waitFor(() => {
+          expect(axiosMock.history.post[0].url).toMatch(goalUrl);
+          // subscribe is turned on automatically
+          expect(axiosMock.history.post[0].data).toMatch(`{"course_id":"${courseId}","days_per_week":${days},"subscribed_to_reminders":true}`);
+          // verify that the additional info about subscriptions shows up
+          expect(screen.queryByText(messages.goalReminderDetail.defaultMessage)).toBeInTheDocument();
+        });
+        expect(screen.getByLabelText(messages.setGoalReminder.defaultMessage)).toBeEnabled();
+      });
       it('shows and hides subscribe to reminders additional text', async () => {
         const button = await screen.getByTestId('weekly-learning-goal-input-Regular');
         fireEvent.click(button);
@@ -789,12 +789,14 @@ describe('Outline Tab', () => {
         const requestingButton = screen.getByRole('button', { name: 'Request certificate' });
         fireEvent.click(requestingButton);
         expect(sendTrackEvent).toHaveBeenCalledTimes(1);
-        expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_outline.certificate_alert_request_cert_button.clicked',
+        expect(sendTrackEvent).toHaveBeenCalledWith(
+          'edx.ui.lms.course_outline.certificate_alert_request_cert_button.clicked',
           {
             courserun_key: courseId,
             is_staff: false,
             org_key: 'edX',
-          });
+          },
+        );
       });
 
       it('tracks unverified cert button', async () => {
@@ -833,12 +835,14 @@ describe('Outline Tab', () => {
         const requestingButton = screen.getByRole('link', { name: 'Verify my ID' });
         fireEvent.click(requestingButton);
         expect(sendTrackEvent).toHaveBeenCalledTimes(1);
-        expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_outline.certificate_alert_unverified_button.clicked',
+        expect(sendTrackEvent).toHaveBeenCalledWith(
+          'edx.ui.lms.course_outline.certificate_alert_unverified_button.clicked',
           {
             courserun_key: courseId,
             is_staff: false,
             org_key: 'edX',
-          });
+          },
+        );
       });
     });
 

diff --git a/src/course-home/outline-tab/alerts/scheduled-content-alert/ScheduledCotentAlert.jsx b/src/course-home/outline-tab/alerts/scheduled-content-alert/ScheduledCotentAlert.jsx
@@ -3,7 +3,7 @@ import { Alert, Button } from '@edx/paragon';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function ScheduledContentAlert({ payload }) {
+const ScheduledContentAlert = ({ payload }) => {
   const {
     datesTabLink,
   } = payload;
@@ -38,7 +38,7 @@ function ScheduledContentAlert({ payload }) {
       </div>
     </Alert>
   );
-}
+};
 
 ScheduledContentAlert.propTypes = {
   payload: PropTypes.shape({

diff --git a/src/course-home/outline-tab/widgets/FlagButton.jsx b/src/course-home/outline-tab/widgets/FlagButton.jsx
@@ -12,8 +12,10 @@ function FlagButton({
   return (
     <button
       type="button"
-      className={classnames('flag-button row w-100 align-content-between m-1.5 py-3.5',
-        isSelected ? 'flag-button-selected' : '')}
+      className={classnames(
+        'flag-button row w-100 align-content-between m-1.5 py-3.5',
+        isSelected ? 'flag-button-selected' : '',
+      )}
       aria-checked={isSelected}
       role="radio"
       onClick={() => handleSelect()}