Resyncing Master with open-release/olive.master

package.json

@@ -30,10 +30,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "10.2.4",
-    "@edx/frontend-component-header": "2.4.6",
-    "@edx/frontend-lib-special-exams": "1.16.3",
-    "@edx/frontend-platform": "1.15.6",
+    "@edx/frontend-component-footer": "11.1.0",
+    "@edx/frontend-component-header": "3.1.0",
+    "@edx/frontend-lib-special-exams": "2.1.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",

src/alerts/active-enteprise-alert/ActiveEnterpriseAlert.test.jsx

@@ -19,7 +19,7 @@ describe('ActiveEnterpriseAlert', () => {
   it('Shows alert message and links', () => {
     render(<ActiveEnterpriseAlert {...mockData} />);
     expect(screen.getByRole('alert')).toBeInTheDocument();
-    expect(screen.getByText('test message')).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`,
     );

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}

src/course-home/outline-tab/OutlineTab.test.jsx

@@ -577,7 +577,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 () => {
@@ -1017,6 +1017,22 @@ describe('Outline Tab', () => {
     });
 
     it('displays expiration warning', async () => {
+      const expirationDate = new Date();
+      // This message will render if the expiration date is within 28 days; set the date 10 days in future
+      expirationDate.setTime(expirationDate.getTime() + 864800000);
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: 'verified',
+        onboarding_link: 'test',
+        expiration_date: expirationDate.toString(),
+        onboarding_release_date: onboardingReleaseDate.toISOString(),
+      });
+      await fetchAndRender();
+      await screen.findByText('This course contains proctored exams');
+      expect(screen.queryByText('Your onboarding profile has been approved. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.')).toBeInTheDocument();
+      expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
+    });
+
+    it('displays expiration warning for other course', async () => {
       const expirationDate = new Date();
       // This message will render if the expiration date is within 28 days; set the date 10 days in future
       expirationDate.setTime(expirationDate.getTime() + 864800000);
@@ -1028,7 +1044,23 @@ describe('Outline Tab', () => {
       });
       await fetchAndRender();
       await screen.findByText('This course contains proctored exams');
-      expect(screen.queryByText('Your onboarding profile has been approved in another course. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.')).toBeInTheDocument();
+      expect(screen.queryByText('Your onboarding profile has been approved. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.')).toBeInTheDocument();
+      expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
+    });
+
+    it('displays expired', async () => {
+      const expirationDate = new Date();
+      // This message appears after expiration, set the date 10 days in the past
+      expirationDate.setTime(expirationDate.getTime() - 864800000);
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: 'verified',
+        onboarding_link: 'test',
+        expiration_date: expirationDate.toString(),
+        onboarding_release_date: onboardingReleaseDate.toISOString(),
+      });
+      await fetchAndRender();
+      await screen.findByText('This course contains proctored exams');
+      expect(screen.queryByText('Your onboarding status has expired. Please complete onboarding again to continue taking proctored exams.')).toBeInTheDocument();
       expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
     });
 

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}

src/course-home/outline-tab/messages.js

@@ -231,6 +231,11 @@ const messages = defineMessages({
     defaultMessage: 'Expiring Soon',
     description: 'A label to indicate that proctortrack onboarding exam will expire soon',
   },
+  expiredProctoringStatus: {
+    id: 'learning.proctoringPanel.status.expired',
+    defaultMessage: 'Expired',
+    description: 'A label to indicate that proctortrack onboarding exam has expired',
+  },
   proctoringCurrentStatus: {
     id: 'learning.proctoringPanel.status',
     defaultMessage: 'Current Onboarding Status:',
@@ -278,9 +283,14 @@ const messages = defineMessages({
   },
   expiringSoonProctoringMessage: {
     id: 'learning.proctoringPanel.message.expiringSoon',
-    defaultMessage: 'Your onboarding profile has been approved in another course. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.',
+    defaultMessage: 'Your onboarding profile has been approved. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.',
     description: 'The text that recommend an action when the status of the proctortrack onboarding exam is (expiring soon)',
   },
+  expiredProctoringMessage: {
+    id: 'learning.proctoringPanel.message.expired',
+    defaultMessage: 'Your onboarding status has expired. Please complete onboarding again to continue taking proctored exams.',
+    description: 'The text that recommend an action when the status of the proctortrack onboarding exam is (expired)',
+  },
   proctoringPanelGeneralInfo: {
     id: 'learning.proctoringPanel.generalInfo',
     defaultMessage: 'You must complete the onboarding process prior to taking any proctored exam. ',

src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx

@@ -35,6 +35,7 @@ function ProctoringInfoPanel({ intl }) {
     error: 'error',
     otherCourseApproved: 'otherCourseApproved',
     expiringSoon: 'expiringSoon',
+    expired: 'expired',
   };
 
   function getReadableStatusClass(examStatus) {
@@ -54,9 +55,14 @@ function ProctoringInfoPanel({ intl }) {
     return readableClass;
   }
 
-  function isNotYetSubmitted(examStatus) {
-    const NO_SHOW_STATES = ['submitted', 'second_review_required', 'verified'];
-    return !NO_SHOW_STATES.includes(examStatus);
+  function isCurrentlySubmitted(examStatus) {
+    const SUBMITTED_STATES = ['submitted', 'second_review_required'];
+    return SUBMITTED_STATES.includes(examStatus);
+  }
+
+  function isSubmissionRequired(examStatus) {
+    const OK_STATES = [readableStatuses.submitted, readableStatuses.verified];
+    return !OK_STATES.includes(examStatus);
   }
 
   function isNotYetReleased(examReleaseDate) {
@@ -77,11 +83,19 @@ function ProctoringInfoPanel({ intl }) {
     return borderClass;
   }
 
+  function isExpired(dateString) {
+    // Returns true if the expiration date has passed
+    const today = new Date();
+    const expirationDateObject = new Date(dateString);
+    return today >= expirationDateObject.getTime();
+  }
+
   function isExpiringSoon(dateString) {
     // Returns true if the expiration date is within 28 days
+    const twentyeightDays = 28 * 24 * 60 * 60 * 1000;
     const today = new Date();
     const expirationDateObject = new Date(dateString);
-    return today > expirationDateObject.getTime() - 2419200000;
+    return today > expirationDateObject.getTime() - twentyeightDays;
   }
 
   useEffect(() => {
@@ -96,7 +110,9 @@ function ProctoringInfoPanel({ intl }) {
             setStatus(response.onboarding_status);
             setLink(response.onboarding_link);
             const expirationDate = response.expiration_date;
-            if (expirationDate && isExpiringSoon(expirationDate)) {
+            if (expirationDate && isExpired(expirationDate)) {
+              setReadableStatus(getReadableStatusClass('expired'));
+            } else if (expirationDate && isExpiringSoon(expirationDate)) {
               setReadableStatus(getReadableStatusClass('expiringSoon'));
             } else {
               setReadableStatus(getReadableStatusClass(response.onboarding_status));
@@ -175,17 +191,17 @@ function ProctoringInfoPanel({ intl }) {
             {![readableStatuses.verified, readableStatuses.otherCourseApproved].includes(readableStatus) && (
               <>
                 <p>
-                  {isNotYetSubmitted(status) && (
+                  {!isCurrentlySubmitted(status) && (
                     intl.formatMessage(messages.proctoringPanelGeneralInfo)
                   )}
-                  {!isNotYetSubmitted(status) && (
+                  {isCurrentlySubmitted(status) && (
                     intl.formatMessage(messages.proctoringPanelGeneralInfoSubmitted)
                   )}
                 </p>
                 <p>{intl.formatMessage(messages.proctoringPanelGeneralTime)}</p>
               </>
             )}
-            {isNotYetSubmitted(status) && (
+            {isSubmissionRequired(readableStatus) && (
               onboardingExamButton
             )}
             <Button variant="outline-primary" block href="https://support.edx.org/hc/en-us/sections/115004169247-Taking-Timed-and-Proctored-Exams">

src/course-home/progress-tab/ProgressTab.test.jsx

@@ -1237,6 +1237,7 @@ describe('Progress Tab', () => {
           month: 'long',
           day: 'numeric',
         }),
+        { exact: false },
       )).toBeInTheDocument();
     });
   });
@@ -1302,7 +1303,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 });
@@ -1315,7 +1316,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();
     });
   });
 
@@ -1331,7 +1332,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({
@@ -1343,7 +1344,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();
     });
   });
 

src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { useModel } from '../../../generic/model-store';
 
 import CompleteDonutSegment from './CompleteDonutSegment';
@@ -26,6 +28,8 @@ function CompletionDonutChart({ intl }) {
   const lockedPercentage = lockedCount ? Number(((lockedCount / numTotalUnits) * 100).toFixed(0)) : 0;
   const incompletePercentage = 100 - completePercentage - lockedPercentage;
 
+  const isLocaleRtl = isRtl(getLocale());
+
   return (
     <>
       <svg role="img" width="50%" height="100%" viewBox="0 0 42 42" className="donut" style={{ maxWidth: '178px' }} aria-hidden="true">
@@ -35,7 +39,7 @@ function CompletionDonutChart({ intl }) {
         <circle className="donut-hole" fill="#fff" cx="21" cy="21" r="15.91549430918954" />
         <g className="donut-chart-text">
           <text x="50%" y="50%" className="donut-chart-number">
-            {completePercentage}%
+            {completePercentage}{isLocaleRtl && '\u200f'}%
           </text>
           <text x="50%" y="50%" className="donut-chart-label">
             {intl.formatMessage(messages.donutLabel)}

src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx

@@ -41,7 +41,7 @@ function CurrentGradeTooltip({ intl, tooltipClassName }) {
         overlay={(
           <Popover id={`${isPassing ? 'passing' : 'non-passing'}-grade-tooltip`} aria-hidden="true" className={tooltipClassName}>
             <Popover.Content data-testid="currentGradeTooltipContent" className={isPassing ? 'text-white' : 'text-dark-700'}>
-              {currentGrade.toFixed(0)}%
+              {currentGrade.toFixed(0)}{isLocaleRtl ? '\u200f' : ''}%
             </Popover.Content>
           </Popover>
         )}

src/course-home/progress-tab/grades/course-grade/GradeBar.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { useModel } from '../../../../generic/model-store';
 import CurrentGradeTooltip from './CurrentGradeTooltip';
 import PassingGradeTooltip from './PassingGradeTooltip';
@@ -26,14 +28,16 @@ function GradeBar({ intl, passingGrade }) {
 
   const lockedTooltipClassName = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
 
+  const adjustedRtlStyle = (percentOffest) => (isRtl(getLocale()) ? { transform: `translateX(${100 - percentOffest}%)` } : {});
+
   return (
     <div className="col-12 col-sm-6 align-self-center p-0">
       <div className="sr-only">{intl.formatMessage(messages.courseGradeBarAltText, { currentGrade, passingGrade })}</div>
       <svg width="100%" height="100px" className="grade-bar" aria-hidden="true">
         <g style={{ transform: 'translateY(2.61em)' }}>
           <rect className="grade-bar__base" width="100%" />
-          <rect className="grade-bar--passing" width={`${passingGrade}%`} />
-          <rect className={`grade-bar--current-${isPassing ? 'passing' : 'non-passing'}`} width={`${currentGrade}%`} />
+          <rect className="grade-bar--passing" width={`${passingGrade}%`} style={adjustedRtlStyle(passingGrade)} />
+          <rect className={`grade-bar--current-${isPassing ? 'passing' : 'non-passing'}`} width={`${currentGrade}%`} style={adjustedRtlStyle(currentGrade)} />
 
           {/* Start divider */}
           <rect className="grade-bar__divider" />

src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx

@@ -25,7 +25,7 @@ function PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) {
         overlay={(
           <Popover id="minimum-grade-tooltip" className={`bg-primary-500 ${tooltipClassName}`} aria-hidden="true">
             <Popover.Content className="text-white">
-              {passingGrade}%
+              {passingGrade}{isLocaleRtl && '\u200f'}%
             </Popover.Content>
           </Popover>
         )}

src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { DataTable } from '@edx/paragon';
 
 import { useModel } from '../../../../generic/model-store';
@@ -17,6 +19,7 @@ function DetailedGradesTable({ intl }) {
     sectionScores,
   } = useModel('progress', courseId);
 
+  const isLocaleRtl = isRtl(getLocale());
   return (
     sectionScores.map((chapter) => {
       const subsectionScores = chapter.subsections.filter(
@@ -32,7 +35,7 @@ function DetailedGradesTable({ intl }) {
 
       const detailedGradesData = subsectionScores.map((subsection) => ({
         subsectionTitle: <SubsectionTitleCell subsection={subsection} />,
-        score: <span className={subsection.learnerHasAccess ? '' : 'greyed-out'}>{subsection.numPointsEarned}/{subsection.numPointsPossible}</span>,
+        score: <span className={subsection.learnerHasAccess ? '' : 'greyed-out'}>{subsection.numPointsEarned}{isLocaleRtl ? '\\' : '/'}{subsection.numPointsPossible}</span>,
       }));
 
       return (

src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx

@@ -2,18 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 
 import messages from '../messages';
 
 function ProblemScoreDrawer({ intl, problemScores, subsection }) {
+  const isLocaleRtl = isRtl(getLocale());
   return (
     <span className="row w-100 m-0 x-small ml-4 pt-2 pl-1 text-gray-700 flex-nowrap">
       <span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(messages.problemScoreLabel)}</span>
       <div className={classNames('col', 'p-0', { 'greyed-out': !subsection.learnerHasAccess })}>
         <ul className="list-unstyled row w-100 m-0" aria-labelledby="problem-score-label">
           {problemScores.map(problemScore => (
-            <li className="ml-3">{problemScore.earned}/{problemScore.possible}</li>
+            <li className="ml-3">{problemScore.earned}{isLocaleRtl ? '\\' : '/'}{problemScore.possible}</li>
           ))}
         </ul>
       </div>