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
eduNEXT · Jan 2, 2024 · cd5ae57 · cd5ae57
1 parent 72bce9e
commit cd5ae57
Show file tree

Hide file tree

Showing 11 changed files with 619 additions and 165 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,11 +30,11 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@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": "11.1.0",
+    "@edx/frontend-component-header": "3.1.0",
+    "@edx/frontend-lib-special-exams": "2.0.0",
+    "@edx/frontend-platform": "2.5.1",
+    "@edx/paragon": "19.18.3",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.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/course-home/outline-tab/OutlineTab.test.jsx b/src/course-home/outline-tab/OutlineTab.test.jsx
@@ -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 () => {

diff --git a/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx b/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.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';
@@ -21,7 +21,7 @@ function CourseEndAlert({ payload }) {
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
   const timeRemaining = (
-    <FormattedRelative
+    <FormattedRelativeTime
       key="timeRemaining"
       value={endDate}
       {...timezoneFormatArgs}

diff --git a/src/course-home/progress-tab/ProgressTab.test.jsx b/src/course-home/progress-tab/ProgressTab.test.jsx
@@ -1283,7 +1283,7 @@ describe('Progress Tab', () => {
       await act(async () => render(<LoadedTabPage courseId={courseId} activeTabSlug="progress">...</LoadedTabPage>, { store }));
       expect(screen.getByTestId('instructor-toolbar')).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 () => {
       setMetadata({ is_enrolled: true, original_user_is_staff: true });
@@ -1296,7 +1296,7 @@ describe('Progress Tab', () => {
       await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
       await act(async () => render(<LoadedTabPage courseId={courseId} activeTabSlug="progress">...</LoadedTabPage>, { store }));
       expect(screen.queryByText('This learner no longer has access to this course. Their access expired on', { exact: false })).not.toBeInTheDocument();
-      expect(screen.queryByText('1/1/2020')).not.toBeInTheDocument();
+      expect(screen.queryByText('1/1/2020', { exact: false })).not.toBeInTheDocument();
     });
   });
 
@@ -1312,7 +1312,7 @@ describe('Progress Tab', () => {
       await act(async () => render(<LoadedTabPage courseId={courseId} activeTabSlug="progress">...</LoadedTabPage>, { store }));
       expect(screen.getByTestId('instructor-toolbar')).toBeInTheDocument();
       expect(screen.getByText('This learner does not yet have access to this course. The course starts on', { exact: false })).toBeInTheDocument();
-      expect(screen.getByText('1/1/2999')).toBeInTheDocument();
+      expect(screen.getByText('1/1/2999', { exact: false })).toBeInTheDocument();
     });
     it('does not render banner when not masquerading', async () => {
       setMetadata({
@@ -1324,7 +1324,7 @@ describe('Progress Tab', () => {
       await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
       await act(async () => render(<LoadedTabPage courseId={courseId} activeTabSlug="progress">...</LoadedTabPage>, { store }));
       expect(screen.queryByText('This learner does not yet have access to this course. The course starts on', { exact: false })).not.toBeInTheDocument();
-      expect(screen.queryByText('1/1/2999')).not.toBeInTheDocument();
+      expect(screen.queryByText('1/1/2999', { exact: false })).not.toBeInTheDocument();
     });
   });
 

diff --git a/src/courseware/course/CourseBreadcrumbs.test.jsx b/src/courseware/course/CourseBreadcrumbs.test.jsx
@@ -3,6 +3,7 @@ import { screen, render } from '@testing-library/react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform';
 import { BrowserRouter } from 'react-router-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { useModel, useModels } from '../../generic/model-store';
 import CourseBreadcrumbs from './CourseBreadcrumbs';
 
@@ -106,14 +107,16 @@ describe('CourseBreadcrumbs', () => {
     ],
   ]);
   render(
-    <BrowserRouter>
-      <CourseBreadcrumbs
-        courseId="course-v1:edX+DemoX+Demo_Course"
-        sectionId="block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations"
-        sequenceId="block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions"
-        isStaff
-      />
-    </BrowserRouter>,
+    <IntlProvider>
+      <BrowserRouter>
+        <CourseBreadcrumbs
+          courseId="course-v1:edX+DemoX+Demo_Course"
+          sectionId="block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations"
+          sequenceId="block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions"
+          isStaff
+        />
+      </BrowserRouter>,
+    </IntlProvider>,
   );
   it('renders course breadcrumbs as expected', async () => {
     expect(screen.queryAllByRole('link')).toHaveLength(1);

diff --git a/src/courseware/course/sequence/SequenceContent.test.jsx b/src/courseware/course/sequence/SequenceContent.test.jsx
@@ -14,7 +14,7 @@ describe('Sequence Content', () => {
       courseId: courseware.courseId,
       sequenceId: courseware.sequenceId,
       unitId: models.sequences[courseware.sequenceId].unitIds[0],
-      unitLoadedHandler: () => {},
+      unitLoadedHandler: () => { },
     };
   });
 

diff --git a/src/courseware/course/sequence/content-lock/messages.js b/src/courseware/course/sequence/content-lock/messages.js
@@ -8,7 +8,7 @@ const messages = defineMessages({
   },
   'learn.contentLock.complete.prerequisite': {
     id: 'learn.contentLock.complete.prerequisite',
-    defaultMessage: "You must complete the prerequisite: '{prereqSectionName}' to access this content.",
+    defaultMessage: "You must complete the prerequisite: ''{prereqSectionName}'' to access this content.",
     description: 'Message shown to indicate which prerequisite the student must complete prior to accessing the locked content.  {prereqSectionName} is the name of the prerequisite.',
   },
   'learn.contentLock.goToSection': {

diff --git a/src/index.jsx b/src/index.jsx
@@ -4,6 +4,7 @@ import 'regenerator-runtime/runtime';
 import {
   APP_INIT_ERROR, APP_READY, subscribe, initialize,
   mergeConfig,
+  getConfig,
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage, PageRoute } from '@edx/frontend-platform/react';
 import React from 'react';
@@ -12,6 +13,7 @@ import { Switch } from 'react-router-dom';
 
 import { messages as footerMessages } from '@edx/frontend-component-footer';
 import { messages as headerMessages } from '@edx/frontend-component-header';
+import { Helmet } from 'react-helmet';
 
 import appMessages from './i18n';
 import { UserMessagesProvider } from './generic/user-messages';
@@ -35,6 +37,9 @@ import PathFixesProvider from './generic/path-fixes';
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={initializeStore()}>
+      <Helmet>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+      </Helmet>
       <PathFixesProvider>
         <NoticesProvider>
           <UserMessagesProvider>

diff --git a/src/shared/streak-celebration/StreakCelebrationModal.test.jsx b/src/shared/streak-celebration/StreakCelebrationModal.test.jsx
@@ -96,8 +96,8 @@ describe('Loaded Tab Page', () => {
     await renderModal();
 
     const endDateText = `Ends ${new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toLocaleDateString({ timeZone: 'UTC' })}.`;
-    expect(screen.getByText('You’ve unlocked a 14% off discount when you upgrade this course for a limited time only.')).toBeInTheDocument();
-    expect(screen.getByText(endDateText)).toBeInTheDocument();
+    expect(screen.getByText('You’ve unlocked a 14% off discount when you upgrade this course for a limited time only.', { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(endDateText, { exact: false })).toBeInTheDocument();
     expect(screen.getByText('Continue with course')).toBeInTheDocument();
     expect(screen.queryByText('Keep it up')).not.toBeInTheDocument();
     expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.course.streak_discount_enabled', {