feat(nuez): add css support and cdn compatibility (#14)

* feat: allow runtime configuration (openedx#955) Allows frontend-app-learning to be configured at runtime using the LMS's new MFE Configuration API. Part of openedx/wg-frontend#103 * refactor: install alpha dependencies and update lint rules * refactor: update code according with paragon alpha 22 * fix: test wasn't passing correctly * chore: fix header alias --------- Co-authored-by: bra-i-am <[email protected]>
eduNEXT · Jan 11, 2024 · aa3fbf8 · aa3fbf8
1 parent 72bce9e
commit aa3fbf8
Show file tree

Hide file tree

Showing 46 changed files with 12,434 additions and 14,163 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,11 +1,18 @@
 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',
+    'no-restricted-exports': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+    'react-hooks/rules-of-hooks': 'off',
+    'react/function-component-definition': 'off',
+    'react/jsx-no-useless-fragment': 'off',
+    'react/no-unstable-nested-components': 'off',
+    'react/jsx-no-constructed-context-values': 'off',
+    'react/jsx-no-bind': 'off',
+    'react/prop-types': 'off',
+    'react/no-unknown-property': 'off',
+  },
 });
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",
@@ -30,11 +31,11 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
-    "@edx/frontend-component-footer": "10.2.2",
-    "@edx/frontend-component-header": "2.4.6",
-    "@edx/frontend-lib-special-exams": "1.16.3",
-    "@edx/frontend-platform": "1.15.6",
-    "@edx/paragon": "19.14.1",
+    "@edx/frontend-component-footer": "npm:@edunext/[email protected]",
+    "@edx/frontend-component-header": "npm:@edunext/frontend-component-header@^3.1.0-alpha.1",
+    "@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",
@@ -62,7 +63,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-12",
     "@edx/reactifex": "1.1.0",
     "@pact-foundation/pact": "9.17.3",
     "@testing-library/jest-dom": "5.16.4",

diff --git a/src/alerts/course-start-alert/CourseStartAlert.jsx b/src/alerts/course-start-alert/CourseStartAlert.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   FormattedDate,
   FormattedMessage,
-  FormattedRelative,
+  FormattedRelativeTime,
   FormattedTime,
 } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
@@ -26,7 +26,7 @@ function CourseStartAlert({ payload }) {
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
   const timeRemaining = (
-    <FormattedRelative
+    <FormattedRelativeTime
       key="timeRemaining"
       value={startDate}
       {...timezoneFormatArgs}

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
@@ -380,19 +380,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);
@@ -568,7 +568,7 @@ describe('Outline Tab', () => {
         const instructorToolbar = await screen.getByTestId('instructor-toolbar');
         expect(instructorToolbar).toBeInTheDocument();
         expect(screen.getByText('This learner no longer has access to this course. Their access expired on', { exact: false })).toBeInTheDocument();
-        expect(screen.getByText('1/1/2020')).toBeInTheDocument();
+        expect(screen.getByText('1/1/2020', { exact: false })).toBeInTheDocument();
       });
 
       it('does not render banner when not masquerading', async () => {
@@ -783,12 +783,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 download cert button', async () => {
         sendTrackEvent.mockClear();
@@ -827,12 +829,14 @@ describe('Outline Tab', () => {
         const requestingButton = screen.getByRole('button', { name: 'View my certificate' });
         fireEvent.click(requestingButton);
         expect(sendTrackEvent).toHaveBeenCalledTimes(1);
-        expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_outline.certificate_alert_downloadable_button.clicked',
+        expect(sendTrackEvent).toHaveBeenCalledWith(
+          'edx.ui.lms.course_outline.certificate_alert_downloadable_button.clicked',
           {
             courserun_key: courseId,
             is_staff: false,
             org_key: 'edX',
-          });
+          },
+        );
       });
       it('tracks unverified cert button', async () => {
         sendTrackEvent.mockClear();
@@ -871,12 +875,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/Section.jsx b/src/course-home/outline-tab/Section.jsx
@@ -2,9 +2,10 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Collapsible, IconButton } from '@edx/paragon';
-import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-icons';
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Add, Minus } from '@edx/paragon/icons';
 
 import SequenceLink from './SequenceLink';
 import { useModel } from '../../generic/model-store';
@@ -81,15 +82,15 @@ function Section({
         iconWhenClosed={(
           <IconButton
             alt={intl.formatMessage(messages.openSection)}
-            icon={faPlus}
+            iconAs={Add}
             onClick={() => { setOpen(true); }}
             size="sm"
           />
         )}
         iconWhenOpen={(
           <IconButton
             alt={intl.formatMessage(genericMessages.close)}
-            icon={faMinus}
+            iconAs={Minus}
             onClick={() => { setOpen(false); }}
             size="sm"
           />