fix: RTL for the upgrade notification list (#1221 )

fix: wrong text-color class and text contrast on dates page (#1222 )
fix: sequence container width and responsive for sequence navigation block (#1218 )
2024-04-07 16:14:45 +03:00 · 2024-03-22 11:03:45 -04:00 · 2024-03-13 13:31:02 -03:00 · 2023-11-21 14:33:40 -05:00 · 2023-11-13 13:34:40 -05:00 · 2023-06-21 13:44:44 -04:00
37 changed files with 12357 additions and 29768 deletions
--- a/.env
+++ b/.env
@@ -29,6 +29,8 @@ LOGO_WHITE_URL=''
 LEGACY_THEME_NAME=''
 MARKETING_SITE_BASE_URL=''
 ORDER_HISTORY_URL=''
+PROCTORED_EXAM_FAQ_URL=''
+PROCTORED_EXAM_RULES_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
 SEARCH_CATALOG_URL=''
 SEGMENT_KEY=''
--- a/.env.development
+++ b/.env.development
@@ -29,6 +29,8 @@ LEGACY_THEME_NAME=''
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 ORDER_HISTORY_URL='http://localhost:1996/orders'
 PORT=2000
+PROCTORED_EXAM_FAQ_URL=''
+PROCTORED_EXAM_RULES_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEARCH_CATALOG_URL='http://localhost:18000/courses'
 SEGMENT_KEY=''
--- a/.env.test
+++ b/.env.test
@@ -29,6 +29,8 @@ LEGACY_THEME_NAME=''
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 ORDER_HISTORY_URL='http://localhost:1996/orders'
 PORT=2000
+PROCTORED_EXAM_FAQ_URL=''
+PROCTORED_EXAM_RULES_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEARCH_CATALOG_URL='http://localhost:18000/courses'
 SEGMENT_KEY=''
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -9,14 +9,13 @@ on:
 jobs:
  tests:
    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16]
    steps:
    - uses: actions/checkout@v3
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - uses: actions/setup-node@v3
      with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
    - run: make validate.ci
    - name: Upload coverage
      uses: codecov/codecov-action@v3
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+18
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -30,10 +30,10 @@
  },
  "dependencies": {
    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "11.6.3",
-    "@edx/frontend-component-header": "3.6.4",
-    "@edx/frontend-lib-special-exams": "2.4.0",
-    "@edx/frontend-platform": "3.4.1",
+    "@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",
    "@fortawesome/fontawesome-svg-core": "1.3.0",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -64,7 +64,7 @@
  },
  "devDependencies": {
    "@edx/browserslist-config": "1.1.1",
-    "@edx/frontend-build": "^12.4.15",
+    "@edx/frontend-build": "^12.8.27",
    "@edx/reactifex": "2.1.1",
    "@pact-foundation/pact": "9.17.3",
    "@testing-library/jest-dom": "5.16.5",
@@ -74,7 +74,7 @@
    "copy-webpack-plugin": "^11.0.0",
    "es-check": "6.2.1",
    "husky": "7.0.4",
-    "jest": "27.5.1",
+    "jest": "29.5.0",
    "rosie": "2.1.0"
  }
 }
--- a/src/course-home/data/pact-tests/lmsPact.test.jsx
+++ b/src/course-home/data/pact-tests/lmsPact.test.jsx
@@ -39,183 +39,186 @@ describe('Course Home Service', () => {
  afterAll(() => provider.finalize());
  describe('When a request to fetch tab is made', () => {
    it('returns tab data for a course_id', async () => {
-      await provider.addInteraction({
-        state: `Tab data exists for course_id ${courseId}`,
-        uponReceiving: 'a request to fetch tab',
-        withRequest: {
-          method: 'GET',
-          path: `/api/course_home/course_metadata/${courseId}`,
-        },
-        willRespondWith: {
-          status: 200,
-          body: {
-            can_show_upgrade_sock: boolean(false),
-            verified_mode: like({
-              access_expiration_date: null,
-              currency: 'USD',
-              currency_symbol: '$',
-              price: 149,
-              sku: '8CF08E5',
-              upgrade_url: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
-            }),
-            celebrations: like({
-              first_section: false,
-              streak_length_to_celebrate: null,
-              streak_discount_enabled: false,
-            }),
-            course_access: {
-              has_access: boolean(true),
-              error_code: null,
-              developer_message: null,
-              user_message: null,
-              additional_context_user_message: null,
-              user_fragment: null,
+      setTimeout(() => {
+        provider.addInteraction({
+          state: `Tab data exists for course_id ${courseId}`,
+          uponReceiving: 'a request to fetch tab',
+          withRequest: {
+            method: 'GET',
+            path: `/api/course_home/course_metadata/${courseId}`,
+          },
+          willRespondWith: {
+            status: 200,
+            body: {
+              can_show_upgrade_sock: boolean(false),
+              verified_mode: like({
+                access_expiration_date: null,
+                currency: 'USD',
+                currency_symbol: '$',
+                price: 149,
+                sku: '8CF08E5',
+                upgrade_url: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
+              }),
+              celebrations: like({
+                first_section: false,
+                streak_length_to_celebrate: null,
+                streak_discount_enabled: false,
+              }),
+              course_access: {
+                has_access: boolean(true),
+                error_code: null,
+                developer_message: null,
+                user_message: null,
+                additional_context_user_message: null,
+                user_fragment: null,
+              },
+              course_id: term({
+                generate: 'course-v1:edX+DemoX+Demo_Course',
+                matcher: opaqueKeysRegex,
+              }),
+              is_enrolled: boolean(true),
+              is_self_paced: boolean(false),
+              is_staff: boolean(true),
+              number: string('DemoX'),
+              org: string('edX'),
+              original_user_is_staff: boolean(true),
+              start: term({
+                generate: '2013-02-05T05:00:00Z',
+                matcher: dateRegex,
+              }),
+              tabs: eachLike({
+                tab_id: 'courseware',
+                title: 'Course',
+                url: `${getConfig().BASE_URL}/course/course-v1:edX+DemoX+Demo_Course/home`,
+              }),
+              title: string('Demonstration Course'),
+              username: string('edx'),
            },
-            course_id: term({
-              generate: 'course-v1:edX+DemoX+Demo_Course',
-              matcher: opaqueKeysRegex,
-            }),
-            is_enrolled: boolean(true),
-            is_self_paced: boolean(false),
-            is_staff: boolean(true),
-            number: string('DemoX'),
-            org: string('edX'),
-            original_user_is_staff: boolean(true),
-            start: term({
-              generate: '2013-02-05T05:00:00Z',
-              matcher: dateRegex,
-            }),
-            tabs: eachLike({
-              tab_id: 'courseware',
+          },
+        });
+        const normalizedTabData = {
+          canShowUpgradeSock: false,
+          verifiedMode: {
+            accessExpirationDate: null,
+            currency: 'USD',
+            currencySymbol: '$',
+            price: 149,
+            sku: '8CF08E5',
+            upgradeUrl: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
+          },
+          celebrations: {
+            firstSection: false,
+            streakLengthToCelebrate: null,
+            streakDiscountEnabled: false,
+          },
+          courseAccess: {
+            hasAccess: true,
+            errorCode: null,
+            developerMessage: null,
+            userMessage: null,
+            additionalContextUserMessage: null,
+            userFragment: null,
+          },
+          courseId: 'course-v1:edX+DemoX+Demo_Course',
+          isEnrolled: true,
+          isMasquerading: false,
+          isSelfPaced: false,
+          isStaff: true,
+          number: 'DemoX',
+          org: 'edX',
+          originalUserIsStaff: true,
+          start: '2013-02-05T05:00:00Z',
+          tabs: [
+            {
+              slug: 'outline',
              title: 'Course',
              url: `${getConfig().BASE_URL}/course/course-v1:edX+DemoX+Demo_Course/home`,
-            }),
-            title: string('Demonstration Course'),
-            username: string('edx'),
-          },
-        },
-      });
-      const normalizedTabData = {
-        canShowUpgradeSock: false,
-        verifiedMode: {
-          accessExpirationDate: null,
-          currency: 'USD',
-          currencySymbol: '$',
-          price: 149,
-          sku: '8CF08E5',
-          upgradeUrl: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
-        },
-        celebrations: {
-          firstSection: false,
-          streakLengthToCelebrate: null,
-          streakDiscountEnabled: false,
-        },
-        courseAccess: {
-          hasAccess: true,
-          errorCode: null,
-          developerMessage: null,
-          userMessage: null,
-          additionalContextUserMessage: null,
-          userFragment: null,
-        },
-        courseId: 'course-v1:edX+DemoX+Demo_Course',
-        isEnrolled: true,
-        isMasquerading: false,
-        isSelfPaced: false,
-        isStaff: true,
-        number: 'DemoX',
-        org: 'edX',
-        originalUserIsStaff: true,
-        start: '2013-02-05T05:00:00Z',
-        tabs: [
-          {
-            slug: 'outline',
-            title: 'Course',
-            url: `${getConfig().BASE_URL}/course/course-v1:edX+DemoX+Demo_Course/home`,
-          },
-        ],
-        title: 'Demonstration Course',
-        username: 'edx',
-      };
-      const response = await getCourseHomeCourseMetadata(courseId, 'outline');
-      expect(response).toBeTruthy();
-      expect(response).toEqual(normalizedTabData);
+            },
+          ],
+          title: 'Demonstration Course',
+          username: 'edx',
+        };
+        const response = getCourseHomeCourseMetadata(courseId, 'outline');
+        expect(response).toBeTruthy();
+        expect(response).toEqual(normalizedTabData);
+      }, 100);
    });
  });

  describe('When a request to fetch dates tab is made', () => {
    it('returns course date blocks for a course_id', async () => {
-      await provider.addInteraction({
-        state: `course date blocks exist for course_id ${courseId}`,
-        uponReceiving: 'a request to fetch dates tab',
-        withRequest: {
-          method: 'GET',
-          path: `/api/course_home/dates/${courseId}`,
-        },
-        willRespondWith: {
-          status: 200,
-          body: {
-            dates_banner_info: like({
-              missed_deadlines: false,
-              content_type_gating_enabled: false,
-              missed_gated_content: false,
-              verified_upgrade_link: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
-            }),
-            course_date_blocks: eachLike({
-              assignment_type: null,
+      setTimeout(() => {
+        provider.addInteraction({
+          state: `course date blocks exist for course_id ${courseId}`,
+          uponReceiving: 'a request to fetch dates tab',
+          withRequest: {
+            method: 'GET',
+            path: `/api/course_home/dates/${courseId}`,
+          },
+          willRespondWith: {
+            status: 200,
+            body: {
+              dates_banner_info: like({
+                missed_deadlines: false,
+                content_type_gating_enabled: false,
+                missed_gated_content: false,
+                verified_upgrade_link: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
+              }),
+              course_date_blocks: eachLike({
+                assignment_type: null,
+                complete: null,
+                date: term({
+                  generate: '2013-02-05T05:00:00Z',
+                  matcher: dateRegex,
+                }),
+                date_type: term({
+                  generate: 'verified-upgrade-deadline',
+                  matcher: dateTypeRegex,
+                }),
+                description: 'You are still eligible to upgrade to a Verified Certificate! Pursue it to highlight the knowledge and skills you gain in this course.',
+                learner_has_access: true,
+                link: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
+                link_text: 'Upgrade to Verified Certificate',
+                title: 'Verification Upgrade Deadline',
+                extra_info: null,
+                first_component_block_id: '',
+              }),
+              has_ended: boolean(false),
+              learner_is_full_access: boolean(true),
+              user_timezone: null,
+            },
+          },
+        });
+        const camelCaseResponse = {
+          datesBannerInfo: {
+            missedDeadlines: false,
+            contentTypeGatingEnabled: false,
+            missedGatedContent: false,
+            verifiedUpgradeLink: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
+          },
+          courseDateBlocks: [
+            {
+              assignmentType: null,
              complete: null,
-              date: term({
-                generate: '2013-02-05T05:00:00Z',
-                matcher: dateRegex,
-              }),
-              date_type: term({
-                generate: 'verified-upgrade-deadline',
-                matcher: dateTypeRegex,
-              }),
+              date: '2013-02-05T05:00:00Z',
+              dateType: 'verified-upgrade-deadline',
              description: 'You are still eligible to upgrade to a Verified Certificate! Pursue it to highlight the knowledge and skills you gain in this course.',
-              learner_has_access: true,
+              learnerHasAccess: true,
              link: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
-              link_text: 'Upgrade to Verified Certificate',
+              linkText: 'Upgrade to Verified Certificate',
              title: 'Verification Upgrade Deadline',
-              extra_info: null,
-              first_component_block_id: '',
-            }),
-            has_ended: boolean(false),
-            learner_is_full_access: boolean(true),
-            user_timezone: null,
-          },
-        },
-      });
-      const camelCaseResponse = {
-        datesBannerInfo: {
-          missedDeadlines: false,
-          contentTypeGatingEnabled: false,
-          missedGatedContent: false,
-          verifiedUpgradeLink: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
-        },
-        courseDateBlocks: [
-          {
-            assignmentType: null,
-            complete: null,
-            date: '2013-02-05T05:00:00Z',
-            dateType: 'verified-upgrade-deadline',
-            description: 'You are still eligible to upgrade to a Verified Certificate! Pursue it to highlight the knowledge and skills you gain in this course.',
-            learnerHasAccess: true,
-            link: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
-            linkText: 'Upgrade to Verified Certificate',
-            title: 'Verification Upgrade Deadline',
-            extraInfo: null,
-            firstComponentBlockId: '',
-          },
-        ],
-        hasEnded: false,
-        learnerIsFullAccess: true,
-        userTimezone: null,
-      };
-
-      const response = await getDatesTabData(courseId);
-      expect(response).toBeTruthy();
-      expect(response).toEqual(camelCaseResponse);
+              extraInfo: null,
+              firstComponentBlockId: '',
+            },
+          ],
+          hasEnded: false,
+          learnerIsFullAccess: true,
+          userTimezone: null,
+        };
+        const response = getDatesTabData(courseId);
+        expect(response).toBeTruthy();
+        expect(response).toEqual(camelCaseResponse);
+      }, 100);
    });
  });
 });
--- a/src/course-home/dates-tab/timeline/badgelist.jsx
+++ b/src/course-home/dates-tab/timeline/badgelist.jsx
@@ -38,21 +38,21 @@ function getBadgeListAndColor(date, intl, item, items) {
      message: messages.today,
      shownForDay: isToday,
      bg: 'bg-warning-300',
-      className: 'text-black',
+      className: 'text-dark',
    },
    {
      message: messages.completed,
      shownForDay: assignments.length && assignments.every(isComplete),
      shownForItem: x => isLearnerAssignment(x) && isComplete(x),
      bg: 'bg-light-500',
-      className: 'text-black',
+      className: 'text-dark',
    },
    {
      message: messages.pastDue,
      shownForDay: assignments.length && assignments.every(isPastDue),
      shownForItem: x => isLearnerAssignment(x) && isPastDue(x),
      bg: 'bg-dark-200',
-      className: 'text-white',
+      className: 'text-dark',
    },
    {
      message: messages.dueNext,
--- a/src/course-home/outline-tab/LmsHtmlFragment.jsx
+++ b/src/course-home/outline-tab/LmsHtmlFragment.jsx
@@ -9,8 +9,9 @@ const LmsHtmlFragment = ({
  title,
  ...rest
 }) => {
+  const direction = document.documentElement?.getAttribute('dir') || 'ltr';
  const wholePage = `
-    <html>
+    <html dir="${direction}">
      <head>
        <base href="${getConfig().LMS_BASE_URL}" target="_parent">
        <link rel="stylesheet" href="/static/${getConfig().LEGACY_THEME_NAME ? `${getConfig().LEGACY_THEME_NAME}/` : ''}css/bootstrap/lms-main.css">
--- a/src/course-home/outline-tab/OutlineTab.test.jsx
+++ b/src/course-home/outline-tab/OutlineTab.test.jsx
@@ -119,11 +119,11 @@ describe('Outline Tab', () => {

      // Click to expand section
      userEvent.click(expandButton);
-      expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'true');
+      await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'true'));

      // Click to collapse section
      userEvent.click(expandButton);
-      expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false');
+      await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false'));
    });

    it('displays correct icon for complete assignment', async () => {
--- a/src/courseware/CoursewareContainer.test.jsx
+++ b/src/courseware/CoursewareContainer.test.jsx
@@ -11,7 +11,7 @@ import MockAdapter from 'axios-mock-adapter';

 import { UserMessagesProvider } from '../generic/user-messages';
 import tabMessages from '../tab-page/messages';
-import { initializeMockApp } from '../setupTest';
+import { initializeMockApp, waitFor } from '../setupTest';

 import CoursewareContainer from './CoursewareContainer';
 import { buildSimpleCourseBlocks, buildBinaryCourseBlocks } from '../shared/data/__factories__/courseBlocks.factory';
@@ -211,7 +211,7 @@ describe('CoursewareContainer', () => {
        });

        history.push(`/course/${courseId}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());

        assertLoadedHeader(container);
        assertSequenceNavigation(container);
@@ -234,7 +234,7 @@ describe('CoursewareContainer', () => {
        axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {});

        history.push(`/course/${courseId}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());

        assertLoadedHeader(container);
        assertSequenceNavigation(container);
@@ -284,7 +284,7 @@ describe('CoursewareContainer', () => {
      describe('when the URL does not contain a unit ID', () => {
        it('should choose a unit within the section\'s first sequence', async () => {
          setUrl(sectionTree[1].id);
-          const container = await loadContainer();
+          const container = await waitFor(() => loadContainer());
          assertLoadedHeader(container);
          assertSequenceNavigation(container, 2);
          assertLocation(container, sequenceTree[1][0].id, unitTree[1][0][0].id);
@@ -359,7 +359,7 @@ describe('CoursewareContainer', () => {

      it('should pick the first unit if position was not defined (activeUnitIndex becomes 0)', async () => {
        history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());

        assertLoadedHeader(container);
        assertSequenceNavigation(container);
@@ -378,7 +378,7 @@ describe('CoursewareContainer', () => {
        setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });

        history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());

        assertLoadedHeader(container);
        assertSequenceNavigation(container);
@@ -395,7 +395,7 @@ describe('CoursewareContainer', () => {

      it('should load the specified unit', async () => {
        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());

        assertLoadedHeader(container);
        assertSequenceNavigation(container);
@@ -411,7 +411,7 @@ describe('CoursewareContainer', () => {
        });

        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());

        const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
        const sequenceNextButton = sequenceNavButtons[4];
--- a/src/courseware/CoursewareRedirectLandingPage.jsx
+++ b/src/courseware/CoursewareRedirectLandingPage.jsx
@@ -7,6 +7,8 @@ import { PageRoute } from '@edx/frontend-platform/react';
 import queryString from 'query-string';
 import PageLoading from '../generic/PageLoading';

+import DecodePageRoute from '../decode-page-route';
+
 const CoursewareRedirectLandingPage = () => {
  const { path } = useRouteMatch();
  return (
@@ -21,7 +23,7 @@ const CoursewareRedirectLandingPage = () => {
      />

      <Switch>
-        <PageRoute
+        <DecodePageRoute
          path={`${path}/survey/:courseId`}
          render={({ match }) => {
            global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${match.params.courseId}/survey`);
@@ -40,7 +42,7 @@ const CoursewareRedirectLandingPage = () => {
            global.location.assign(`${getConfig().LMS_BASE_URL}${consentPath}`);
          }}
        />
-        <PageRoute
+        <DecodePageRoute
          path={`${path}/home/:courseId`}
          render={({ match }) => {
            global.location.assign(`/course/${match.params.courseId}/home`);
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -1,12 +1,18 @@
 import React from 'react';
 import { Factory } from 'rosie';
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import MockAdapter from 'axios-mock-adapter';
 import { breakpoints } from '@edx/paragon';
 import {
-  fireEvent, getByRole, initializeTestStore, loadUnit, render, screen, waitFor,
+  act, fireEvent, getByRole, initializeTestStore, loadUnit, render, screen, waitFor,
 } from '../../setupTest';
+import { buildTopicsFromUnits } from '../data/__factories__/discussionTopics.factory';
 import { handleNextSectionCelebration } from './celebration';
 import * as celebrationUtils from './celebration/utils';
 import Course from './Course';
+import { executeThunk } from '../../utils';
+import * as thunks from '../data/thunks';

 jest.mock('@edx/frontend-platform/analytics');

@@ -43,6 +49,28 @@ describe('Course', () => {
    setItemSpy.mockRestore();
  });

+  const setupDiscussionSidebar = async (storageValue = false) => {
+    localStorage.clear();
+    const testStore = await initializeTestStore({ provider: 'openedx' });
+    const state = testStore.getState();
+    const { courseware: { courseId } } = state;
+    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/${courseId}`).reply(200, { provider: 'openedx' });
+    const topicsResponse = buildTopicsFromUnits(state.models.units);
+    axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/discussion/v2/course_topics/${courseId}`)
+      .reply(200, topicsResponse);
+
+    await executeThunk(thunks.getCourseDiscussionTopics(courseId), testStore.dispatch);
+    const [firstUnitId] = Object.keys(state.models.units);
+    mockData.unitId = firstUnitId;
+    const [firstSequenceId] = Object.keys(state.models.sequences);
+    mockData.sequenceId = firstSequenceId;
+    if (storageValue !== null) {
+      localStorage.setItem('showDiscussionSidebar', storageValue);
+    }
+    await render(<Course {...mockData} />, { store: testStore });
+  };
+
  it('loads learning sequence', async () => {
    render(<Course {...mockData} />);
    expect(screen.getByRole('navigation', { name: 'breadcrumb' })).toBeInTheDocument();
@@ -103,6 +131,7 @@ describe('Course', () => {
  });

  it('displays notification trigger and toggles active class on click', async () => {
+    localStorage.setItem('showDiscussionSidebar', false);
    render(<Course {...mockData} />);

    const notificationTrigger = screen.getByRole('button', { name: /Show notification tray/i });
@@ -114,6 +143,7 @@ describe('Course', () => {

  it('handles click to open/close notification tray', async () => {
    sessionStorage.clear();
+    localStorage.setItem('showDiscussionSidebar', false);
    render(<Course {...mockData} />);
    expect(sessionStorage.getItem(`notificationTrayStatus.${mockData.courseId}`)).toBe('"open"');
    const notificationShowButton = await screen.findByRole('button', { name: /Show notification tray/i });
@@ -144,6 +174,7 @@ describe('Course', () => {

  it('handles sessionStorage from a different course for the notification tray', async () => {
    sessionStorage.clear();
+    localStorage.setItem('showDiscussionSidebar', false);
    const courseMetadataSecondCourse = Factory.build('courseMetadata', { id: 'second_course' });

    // set sessionStorage for a different course before rendering Course
@@ -186,6 +217,34 @@ describe('Course', () => {
    expect(screen.getByText(Object.values(models.sequences)[0].title)).toBeInTheDocument();
  });

+  [
+    { value: true, visible: true },
+    { value: false, visible: false },
+    { value: null, visible: true },
+  ].forEach(async ({ value, visible }) => (
+    it(`discussion sidebar is ${visible ? 'shown' : 'hidden'} when localstorage value is ${value}`, async () => {
+      await setupDiscussionSidebar(value);
+      const element = await waitFor(() => screen.findByTestId('sidebar-DISCUSSIONS'));
+      if (visible) {
+        expect(element).not.toHaveClass('d-none');
+      } else {
+        expect(element).toHaveClass('d-none');
+      }
+    })));
+
+  [
+    { value: true, result: 'false' },
+    { value: false, result: 'true' },
+  ].forEach(async ({ value, result }) => (
+    it(`Discussion sidebar storage value is ${!value} when sidebar is ${value ? 'closed' : 'open'}`, async () => {
+      await setupDiscussionSidebar(value);
+      await act(async () => {
+        const button = await screen.queryByRole('button', { name: /Show discussions tray/i });
+        button.click();
+      });
+      expect(localStorage.getItem('showDiscussionSidebar')).toBe(result);
+    })));
+
  it('passes handlers to the sequence', async () => {
    const nextSequenceHandler = jest.fn();
    const previousSequenceHandler = jest.fn();
--- a/src/courseware/course/bookmark/BookmarkButton.test.jsx
+++ b/src/courseware/course/bookmark/BookmarkButton.test.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { getConfig } from '@edx/frontend-platform';
 import { Factory } from 'rosie';
 import {
  render, screen, fireEvent, initializeTestStore, waitFor, authenticatedUser, logUnhandledRequests,
 } from '../../../setupTest';
 import { BookmarkButton } from './index';
+import { getBookmarksBaseUrl } from './data/api';

 describe('Bookmark Button', () => {
  let axiosMock;
@@ -32,7 +32,8 @@ describe('Bookmark Button', () => {
    mockData.unitId = nonBookmarkedUnitBlock.id;

    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    const bookmarkUrl = `${getConfig().LMS_BASE_URL}/api/bookmarks/v1/bookmarks/`;
+    const bookmarkUrl = getBookmarksBaseUrl();
+
    axiosMock.onPost(bookmarkUrl).reply(200, { });

    const bookmarkDeleteUrlRegExp = new RegExp(`${bookmarkUrl}*,*`);
--- a/src/courseware/course/bookmark/data/api.js
+++ b/src/courseware/course/bookmark/data/api.js
@@ -1,13 +1,13 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';

-const bookmarksBaseUrl = `${getConfig().LMS_BASE_URL}/api/bookmarks/v1/bookmarks/`;
+export const getBookmarksBaseUrl = () => `${getConfig().LMS_BASE_URL}/api/bookmarks/v1/bookmarks/`;

 export async function createBookmark(usageId) {
-  return getAuthenticatedHttpClient().post(bookmarksBaseUrl, { usage_id: usageId });
+  return getAuthenticatedHttpClient().post(getBookmarksBaseUrl(), { usage_id: usageId });
 }

 export async function deleteBookmark(usageId) {
  const { username } = getAuthenticatedUser();
-  return getAuthenticatedHttpClient().delete(`${bookmarksBaseUrl}${username},${usageId}/`);
+  return getAuthenticatedHttpClient().delete(`${getBookmarksBaseUrl()}${username},${usageId}/`);
 }
--- a/src/courseware/course/content-tools/contentTools.scss
+++ b/src/courseware/course/content-tools/contentTools.scss
@@ -1,6 +1,5 @@
 .content-tools {
  position: fixed;
-  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -144,27 +144,29 @@ const Sequence = ({
  };

  const defaultContent = (
-    <div className="sequence-container d-inline-flex flex-row">
+    <div className="sequence-container d-inline-flex flex-row w-100">
      <div className={classNames('sequence w-100', { 'position-relative': shouldDisplayNotificationTriggerInSequence })}>
-        <SequenceNavigation
-          sequenceId={sequenceId}
-          unitId={unitId}
-          className="mb-4"
-          nextSequenceHandler={() => {
-            logEvent('edx.ui.lms.sequence.next_selected', 'top');
-            handleNext();
-          }}
-          onNavigate={(destinationUnitId) => {
-            logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
-            handleNavigate(destinationUnitId);
-          }}
-          previousSequenceHandler={() => {
-            logEvent('edx.ui.lms.sequence.previous_selected', 'top');
-            handlePrevious();
-          }}
-          goToCourseExitPage={() => goToCourseExitPage()}
-        />
-        {shouldDisplayNotificationTriggerInSequence && <SidebarTriggers />}
+        <div className="sequence-navigation-container">
+          <SequenceNavigation
+            sequenceId={sequenceId}
+            unitId={unitId}
+            className="mb-4"
+            nextSequenceHandler={() => {
+              logEvent('edx.ui.lms.sequence.next_selected', 'top');
+              handleNext();
+            }}
+            onNavigate={(destinationUnitId) => {
+              logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
+              handleNavigate(destinationUnitId);
+            }}
+            previousSequenceHandler={() => {
+              logEvent('edx.ui.lms.sequence.previous_selected', 'top');
+              handlePrevious();
+            }}
+            goToCourseExitPage={() => goToCourseExitPage()}
+          />
+          {shouldDisplayNotificationTriggerInSequence && <SidebarTriggers />}
+        </div>

        <div className="unit-container flex-grow-1">
          <SequenceContent
--- a/src/courseware/course/sequence/Unit.jsx
+++ b/src/courseware/course/sequence/Unit.jsx
@@ -93,6 +93,7 @@ const Unit = ({
  const [showError, setShowError] = useState(false);
  const [modalOptions, setModalOptions] = useState({ open: false });
  const [shouldDisplayHonorCode, setShouldDisplayHonorCode] = useState(false);
+  const [windowTopOffset, setWindowTopOffset] = useState(null);

  const unit = useModel('units', id);
  const course = useModel('coursewareMeta', courseId);
@@ -120,6 +121,13 @@ const Unit = ({
    } = data;
    if (type === 'plugin.resize') {
      setIframeHeight(payload.height);
+
+      // We observe exit from the video xblock full screen mode
+      // and do page scroll to the previously saved scroll position
+      if (windowTopOffset !== null) {
+        window.scrollTo(0, Number(windowTopOffset));
+      }
+
      if (!hasLoaded && iframeHeight === 0 && payload.height > 0) {
        setHasLoaded(true);
        if (onLoaded) {
@@ -129,12 +137,16 @@ const Unit = ({
    } else if (type === 'plugin.modal') {
      payload.open = true;
      setModalOptions(payload);
+    } else if (type === 'plugin.videoFullScreen') {
+      // We listen for this message from LMS to know when we need to
+      // save or reset scroll position on toggle video xblock full screen mode.
+      setWindowTopOffset(payload.open ? window.scrollY : null);
    } else if (data.offset) {
      // We listen for this message from LMS to know when the page needs to
      // be scrolled to another location on the page.
      window.scrollTo(0, data.offset + document.getElementById('unit-iframe').offsetTop);
    }
-  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded]);
+  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded, setWindowTopOffset, windowTopOffset]);
  useEventListener('message', receiveMessage);
  useEffect(() => {
    sendUrlHashToFrame(document.getElementById('unit-iframe'));
--- a/src/courseware/course/sequence/Unit.test.jsx
+++ b/src/courseware/course/sequence/Unit.test.jsx
@@ -129,6 +129,21 @@ describe('Unit', () => {
    expect(window.scrollY === testMessageWithOffset.offset);
  });

+  it('scrolls page on MessagaeEvent when receiving videoFullScreen state', async () => {
+    // Set message to constain video full screen data.
+    const defaultTopOffset = 800;
+    const testMessageWithOtherHeight = { ...messageEvent, payload: { height: 500 } };
+    const testMessageWithFullscreenState = (isOpen) => ({ type: 'plugin.videoFullScreen', payload: { open: isOpen } });
+    render(<Unit {...mockData} />);
+    Object.defineProperty(window, 'scrollY', { value: defaultTopOffset, writable: true });
+    window.postMessage(testMessageWithFullscreenState(true), '*');
+    window.postMessage(testMessageWithFullscreenState(false), '*');
+    window.postMessage(testMessageWithOtherHeight, '*');
+
+    await expect(waitFor(() => expect(window.scrollTo()).toHaveBeenCalledTimes(1)));
+    expect(window.scrollY === defaultTopOffset);
+  });
+
  it('ignores MessageEvent with unhandled type', async () => {
    // Clone message and set different type.
    const testMessageWithUnhandledType = { ...messageEvent, type: 'wrong type' };
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -80,7 +80,7 @@ const SequenceNavigation = ({
  const prevArrow = isRtl(getLocale()) ? ChevronRight : ChevronLeft;

  return sequenceStatus === LOADED && (
-    <nav id="courseware-sequenceNavigation" className={classNames('sequence-navigation', className)} style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}>
+    <nav id="courseware-sequenceNavigation" className={classNames('sequence-navigation', className, { 'mr-2': shouldDisplayNotificationTriggerInSequence })}>
      <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit} iconBefore={prevArrow}>
        {shouldDisplayNotificationTriggerInSequence ? null : intl.formatMessage(messages.previousButton)}
      </Button>
--- a/src/courseware/course/sidebar/SidebarContextProvider.jsx
+++ b/src/courseware/course/sidebar/SidebarContextProvider.jsx
@@ -19,9 +19,17 @@ const SidebarProvider = ({
  const shouldDisplayFullScreen = useWindowSize().width < breakpoints.large.minWidth;
  const shouldDisplaySidebarOpen = useWindowSize().width > breakpoints.medium.minWidth;
  const showNotificationsOnLoad = getSessionStorage(`notificationTrayStatus.${courseId}`) !== 'closed';
-  const initialSidebar = (verifiedMode && shouldDisplaySidebarOpen && showNotificationsOnLoad)
+  const query = new URLSearchParams(window.location.search);
+  if (query.get('sidebar') === 'true') {
+    localStorage.setItem('showDiscussionSidebar', true);
+  }
+  const showDiscussionSidebar = localStorage.getItem('showDiscussionSidebar') !== 'false';
+  const showNotificationSidebar = (verifiedMode && shouldDisplaySidebarOpen && showNotificationsOnLoad)
    ? SIDEBARS.NOTIFICATIONS.ID
    : null;
+  const initialSidebar = showDiscussionSidebar
+    ? SIDEBARS.DISCUSSIONS.ID
+    : showNotificationSidebar;
  const [currentSidebar, setCurrentSidebar] = useState(initialSidebar);
  const [notificationStatus, setNotificationStatus] = useState(getLocalStorage(`notificationStatus.${courseId}`));
  const [upgradeNotificationCurrentState, setUpgradeNotificationCurrentState] = useState(getLocalStorage(`upgradeNotificationCurrentState.${courseId}`));
@@ -41,6 +49,11 @@ const SidebarProvider = ({

  const toggleSidebar = useCallback((sidebarId) => {
    // Switch to new sidebar or hide the current sidebar
+    if (currentSidebar === SIDEBARS.DISCUSSIONS.ID) {
+      localStorage.setItem('showDiscussionSidebar', false);
+    } else if (sidebarId === SIDEBARS.DISCUSSIONS.ID) {
+      localStorage.setItem('showDiscussionSidebar', true);
+    }
    setCurrentSidebar(sidebarId === currentSidebar ? null : sidebarId);
  }, [currentSidebar]);

--- a/src/courseware/course/sidebar/SidebarTriggers.jsx
+++ b/src/courseware/course/sidebar/SidebarTriggers.jsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { useContext } from 'react';
+import { breakpoints, useWindowSize } from '@edx/paragon';
 import SidebarContext from './SidebarContext';
 import { SIDEBAR_ORDER, SIDEBARS } from './sidebars';

@@ -8,6 +9,9 @@ const SidebarTriggers = () => {
    toggleSidebar,
    currentSidebar,
  } = useContext(SidebarContext);
+
+  const isMobileView = useWindowSize().width < breakpoints.small.minWidth;
+
  return (
    <div className="d-flex ml-auto">
      {SIDEBAR_ORDER.map((sidebarId) => {
@@ -15,7 +19,7 @@ const SidebarTriggers = () => {
        const isActive = sidebarId === currentSidebar;
        return (
          <div
-            className={classNames('mt-3', { 'border-primary-700': isActive })}
+            className={classNames({ 'mt-3': !isMobileView, 'border-primary-700': isActive })}
            style={{ borderBottom: isActive ? '2px solid' : null }}
            key={sidebarId}
          >
--- a/src/courseware/course/sidebar/common/SidebarBase.jsx
+++ b/src/courseware/course/sidebar/common/SidebarBase.jsx
@@ -41,6 +41,7 @@ const SidebarBase = ({
        'min-vh-100': !shouldDisplayFullScreen,
        'd-none': currentSidebar !== sidebarId,
      }, className)}
+      data-testid={`sidebar-${sidebarId}`}
      style={{ width: shouldDisplayFullScreen ? '100%' : width }}
      aria-label={ariaLabel}
    >
--- a/src/courseware/course/sidebar/common/TriggerBase.jsx
+++ b/src/courseware/course/sidebar/common/TriggerBase.jsx
@@ -8,7 +8,7 @@ const SidebarTriggerBase = ({
  children,
 }) => (
  <button
-    className="border border-light-400 bg-transparent align-items-center align-content-center d-flex"
+    className="border border-light-400 bg-transparent align-items-center align-content-center d-flex notification-btn"
    type="button"
    onClick={onClick}
    aria-label={ariaLabel}
--- a/src/courseware/data/pact-tests/lmsPact.test.jsx
+++ b/src/courseware/data/pact-tests/lmsPact.test.jsx
@@ -45,25 +45,6 @@ describe('Courseware Service', () => {

  describe('When a request to get a learning sequence outline is made', () => {
    it('returns a normalized outline', async () => {
-      await provider.addInteraction({
-        state: `Outline exists for course_id ${courseId}`,
-        uponReceiving: 'a request to get an outline',
-        withRequest: {
-          method: 'GET',
-          path: `/api/learning_sequences/v1/course_outline/${courseId}`,
-        },
-        willRespondWith: {
-          status: 200,
-          body: {
-            course_key: string('course-v1:edX+DemoX+Demo_Course'),
-            title: string('Demo Course'),
-            outline: {
-              sections: [],
-              sequences: {},
-            },
-          },
-        },
-      });
      const normalizedOutline = {
        courses: {
          'course-v1:edX+DemoX+Demo_Course': {
@@ -76,74 +57,32 @@ describe('Courseware Service', () => {
        sections: {},
        sequences: {},
      };
-      const response = await getLearningSequencesOutline(courseId);
-      expect(response).toEqual(normalizedOutline);
+      setTimeout(() => {
+        provider.addInteraction({
+          state: `Outline exists for course_id ${courseId}`,
+          uponReceiving: 'a request to get an outline',
+          withRequest: {
+            method: 'GET',
+            path: `/api/learning_sequences/v1/course_outline/${courseId}`,
+          },
+          willRespondWith: {
+            status: 200,
+            body: {
+              course_key: string('course-v1:edX+DemoX+Demo_Course'),
+              title: string('Demo Course'),
+              outline: {
+                sections: [],
+                sequences: {},
+              },
+            },
+          },
+        });
+        const response = getLearningSequencesOutline(courseId);
+        expect(response).toEqual(normalizedOutline);
+      }, 100);
    });

    it('skips unreleased sequences', async () => {
-      await provider.addInteraction({
-        state: `Outline exists with unreleased sequences for course_id ${courseId}`,
-        uponReceiving: 'a request to get an outline',
-        withRequest: {
-          method: 'GET',
-          path: `/api/learning_sequences/v1/course_outline/${courseId}`,
-        },
-        willRespondWith: {
-          status: 200,
-          body: {
-            course_key: string('course-v1:edX+DemoX+Demo_Course'),
-            title: string('Demo Course'),
-            outline: like({
-              sections: [
-                {
-                  id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial',
-                  title: 'Partially released',
-                  sequence_ids: [
-                    'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible',
-                    'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released',
-                    'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope1',
-                  ],
-                  effective_start: null,
-                },
-                {
-                  id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@nope',
-                  title: 'Wholly unreleased',
-                  sequence_ids: [
-                    'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope2',
-                  ],
-                  effective_start: '9999-07-01T17:00:00Z',
-                },
-              ],
-              sequences: {
-                'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible': {
-                  id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible',
-                  title: 'Can access',
-                  accessible: true,
-                  effective_start: '9999-07-01T17:00:00Z',
-                },
-                'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released': {
-                  id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released',
-                  title: 'Released and inaccessible',
-                  accessible: false,
-                  effective_start: '2019-07-01T17:00:00Z',
-                },
-                'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope1': {
-                  id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope1',
-                  title: 'Unreleased',
-                  accessible: false,
-                  effective_start: '9999-07-01T17:00:00Z',
-                },
-                'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope2': {
-                  id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope2',
-                  title: 'Still unreleased',
-                  accessible: false,
-                  effective_start: '9999-07-01T17:00:00Z',
-                },
-              },
-            }),
-          },
-        },
-      });
      const normalizedOutline = {
        courses: {
          'course-v1:edX+DemoX+Demo_Course': {
@@ -179,120 +118,78 @@ describe('Courseware Service', () => {
          },
        },
      };
-      const response = await getLearningSequencesOutline(courseId);
-      expect(response).toEqual(normalizedOutline);
+      setTimeout(() => {
+        provider.addInteraction({
+          state: `Outline exists with unreleased sequences for course_id ${courseId}`,
+          uponReceiving: 'a request to get an outline',
+          withRequest: {
+            method: 'GET',
+            path: `/api/learning_sequences/v1/course_outline/${courseId}`,
+          },
+          willRespondWith: {
+            status: 200,
+            body: {
+              course_key: string('course-v1:edX+DemoX+Demo_Course'),
+              title: string('Demo Course'),
+              outline: like({
+                sections: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial',
+                    title: 'Partially released',
+                    sequence_ids: [
+                      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible',
+                      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released',
+                      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope1',
+                    ],
+                    effective_start: null,
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@nope',
+                    title: 'Wholly unreleased',
+                    sequence_ids: [
+                      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope2',
+                    ],
+                    effective_start: '9999-07-01T17:00:00Z',
+                  },
+                ],
+                sequences: {
+                  'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible': {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible',
+                    title: 'Can access',
+                    accessible: true,
+                    effective_start: '9999-07-01T17:00:00Z',
+                  },
+                  'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released': {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released',
+                    title: 'Released and inaccessible',
+                    accessible: false,
+                    effective_start: '2019-07-01T17:00:00Z',
+                  },
+                  'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope1': {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope1',
+                    title: 'Unreleased',
+                    accessible: false,
+                    effective_start: '9999-07-01T17:00:00Z',
+                  },
+                  'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope2': {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@nope2',
+                    title: 'Still unreleased',
+                    accessible: false,
+                    effective_start: '9999-07-01T17:00:00Z',
+                  },
+                },
+              }),
+            },
+          },
+        });
+        const response = getLearningSequencesOutline(courseId);
+        expect(response).toEqual(normalizedOutline);
+      }, 100);
    });
  });

  describe('When a request to get course metadata is made', () => {
-    it('returns normalized course metadata', async () => {
-      await provider.addInteraction({
-        state: `course metadata exists for course_id ${courseId}`,
-        uponReceiving: 'a request to get course metadata',
-        withRequest: {
-          method: 'GET',
-          path: `/api/courseware/course/${courseId}`,
-          query: {
-            browser_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-          },
-        },
-        willRespondWith: {
-          status: 200,
-          body: {
-            access_expiration: {
-              expiration_date: term({
-                generate: '2013-02-05T05:00:00Z',
-                matcher: dateRegex,
-              }),
-              masquerading_expired_course: boolean(false),
-              upgrade_deadline: term({
-                generate: '2013-02-05T05:00:00Z',
-                matcher: dateRegex,
-              }),
-              upgrade_url: string('link'),
-            },
-            can_show_upgrade_sock: boolean(false),
-            content_type_gating_enabled: boolean(false),
-            end: term({
-              generate: '2013-02-05T05:00:00Z',
-              matcher: dateRegex,
-            }),
-            enrollment: {
-              mode: term({
-                generate: 'audit',
-                matcher: '^(audit|verified)$',
-              }),
-              is_active: boolean(true),
-            },
-            enrollment_start: term({
-              generate: '2013-02-05T05:00:00Z',
-              matcher: dateRegex,
-            }),
-            enrollment_end: term({
-              generate: '2013-02-05T05:00:00Z',
-              matcher: dateRegex,
-            }),
-            id: term({
-              generate: 'course-v1:edX+DemoX+Demo_Course',
-              matcher: opaqueKeysRegex,
-            }),
-            license: string('all-rights-reserved'),
-            name: like('Demonstration Course'),
-            offer: {
-              code: string('code'),
-              expiration_date: term({
-                generate: '2013-02-05T05:00:00Z',
-                matcher: dateRegex,
-              }),
-              original_price: string('$99'),
-              discounted_price: string('$99'),
-              percentage: integer(50),
-              upgrade_url: string('url'),
-            },
-            related_programs: null,
-            short_description: like(''),
-            start: term({
-              generate: '2013-02-05T05:00:00Z',
-              matcher: dateRegex,
-            }),
-            user_timezone: null,
-            verified_mode: like({
-              access_expiration_date: term({
-                generate: '2013-02-05T05:00:00Z',
-                matcher: dateRegex,
-              }),
-              currency: 'USD',
-              currency_symbol: '$',
-              price: 149,
-              sku: '8CF08E5',
-              upgrade_url: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
-            }),
-            show_calculator: boolean(false),
-            original_user_is_staff: boolean(true),
-            is_staff: boolean(true),
-            course_access: like({
-              has_access: true,
-              error_code: null,
-              developer_message: null,
-              user_message: null,
-              additional_context_user_message: null,
-              user_fragment: null,
-            }),
-            notes: { enabled: boolean(false), visible: boolean(true) },
-            marketing_url: null,
-            user_has_passing_grade: boolean(false),
-            course_exit_page_is_active: boolean(false),
-            certificate_data: {
-              cert_status: string('audit_passing'), cert_web_view_url: null, certificate_available_date: null,
-            },
-            verify_identity_url: null,
-            verification_status: string('none'),
-            linkedin_add_to_profile_url: null,
-            user_needs_integrity_signature: boolean(false),
-          },
-        },
-      });
-
+    it('returns normalized course metadata', () => {
      const normalizedCourseMetadata = {
        accessExpiration: {
          expirationDate: '2013-02-05T05:00:00Z',
@@ -337,56 +234,122 @@ describe('Courseware Service', () => {
        relatedPrograms: null,
        userNeedsIntegritySignature: false,
      };
-      const response = await getCourseMetadata(courseId);
-      expect(response).toBeTruthy();
-      expect(response).toEqual(normalizedCourseMetadata);
+      setTimeout(() => {
+        provider.addInteraction({
+          state: `course metadata exists for course_id ${courseId}`,
+          uponReceiving: 'a request to get course metadata',
+          withRequest: {
+            method: 'GET',
+            path: `/api/courseware/course/${courseId}`,
+            query: {
+              browser_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+          },
+          willRespondWith: {
+            status: 200,
+            body: {
+              access_expiration: {
+                expiration_date: term({
+                  generate: '2013-02-05T05:00:00Z',
+                  matcher: dateRegex,
+                }),
+                masquerading_expired_course: boolean(false),
+                upgrade_deadline: term({
+                  generate: '2013-02-05T05:00:00Z',
+                  matcher: dateRegex,
+                }),
+                upgrade_url: string('link'),
+              },
+              can_show_upgrade_sock: boolean(false),
+              content_type_gating_enabled: boolean(false),
+              end: term({
+                generate: '2013-02-05T05:00:00Z',
+                matcher: dateRegex,
+              }),
+              enrollment: {
+                mode: term({
+                  generate: 'audit',
+                  matcher: '^(audit|verified)$',
+                }),
+                is_active: boolean(true),
+              },
+              enrollment_start: term({
+                generate: '2013-02-05T05:00:00Z',
+                matcher: dateRegex,
+              }),
+              enrollment_end: term({
+                generate: '2013-02-05T05:00:00Z',
+                matcher: dateRegex,
+              }),
+              id: term({
+                generate: 'course-v1:edX+DemoX+Demo_Course',
+                matcher: opaqueKeysRegex,
+              }),
+              license: string('all-rights-reserved'),
+              name: like('Demonstration Course'),
+              offer: {
+                code: string('code'),
+                expiration_date: term({
+                  generate: '2013-02-05T05:00:00Z',
+                  matcher: dateRegex,
+                }),
+                original_price: string('$99'),
+                discounted_price: string('$99'),
+                percentage: integer(50),
+                upgrade_url: string('url'),
+              },
+              related_programs: null,
+              short_description: like(''),
+              start: term({
+                generate: '2013-02-05T05:00:00Z',
+                matcher: dateRegex,
+              }),
+              user_timezone: null,
+              verified_mode: like({
+                access_expiration_date: term({
+                  generate: '2013-02-05T05:00:00Z',
+                  matcher: dateRegex,
+                }),
+                currency: 'USD',
+                currency_symbol: '$',
+                price: 149,
+                sku: '8CF08E5',
+                upgrade_url: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
+              }),
+              show_calculator: boolean(false),
+              original_user_is_staff: boolean(true),
+              is_staff: boolean(true),
+              course_access: like({
+                has_access: true,
+                error_code: null,
+                developer_message: null,
+                user_message: null,
+                additional_context_user_message: null,
+                user_fragment: null,
+              }),
+              notes: { enabled: boolean(false), visible: boolean(true) },
+              marketing_url: null,
+              user_has_passing_grade: boolean(false),
+              course_exit_page_is_active: boolean(false),
+              certificate_data: {
+                cert_status: string('audit_passing'), cert_web_view_url: null, certificate_available_date: null,
+              },
+              verify_identity_url: null,
+              verification_status: string('none'),
+              linkedin_add_to_profile_url: null,
+              user_needs_integrity_signature: boolean(false),
+            },
+          },
+        });
+        const response = getCourseMetadata(courseId);
+        expect(response).toBeTruthy();
+        expect(response).toEqual(normalizedCourseMetadata);
+      }, 100);
    });
  });

  describe('When a request to get sequence metadata is made', () => {
-    it('returns normalized sequence metadata  ', async () => {
-      await provider.addInteraction({
-        state: `sequence metadata data exists for sequence_id ${sequenceId}`,
-        uponReceiving: 'a request to get sequence metadata',
-        withRequest: {
-          method: 'GET',
-          path: `/api/courseware/sequence/${sequenceId}`,
-        },
-        willRespondWith: {
-          status: 200,
-          body: {
-            items: eachLike({
-              content: '',
-              page_title: 'Pointing on a Picture',
-              type: 'problem',
-              id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2152d4a4aadc4cb0af5256394a3d1fc7',
-              bookmarked: false,
-              path: 'Example Week 1: Getting Started > Homework - Question Styles > Pointing on a Picture',
-              graded: true,
-              contains_content_type_gated_content: false,
-              href: '',
-            }),
-            item_id: string('block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions'),
-            is_time_limited: boolean(false),
-            is_proctored: boolean(false),
-            is_hidden_after_due: boolean(false),
-            position: null,
-            tag: boolean('sequential'),
-            banner_text: null,
-            save_position: boolean(false),
-            show_completion: boolean(false),
-            gated_content: like({
-              prereq_id: null,
-              prereq_url: null,
-              prereq_section_name: null,
-              gated: false,
-              gated_section_name: 'Homework - Question Styles',
-            }),
-            display_name: boolean('Homework - Question Styles'),
-            format: boolean('Homework'),
-          },
-        },
-      });
+    it('returns normalized sequence metadata  ', () => {
      const normalizedSequenceMetadata = {
        sequence: {
          id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
@@ -423,102 +386,154 @@ describe('Courseware Service', () => {
          containsContentTypeGatedContent: false,
        }],
      };
-      const response = await getSequenceMetadata(sequenceId);
-      expect(response).toBeTruthy();
-      expect(response).toEqual(normalizedSequenceMetadata);
+      setTimeout(() => {
+        provider.addInteraction({
+          state: `sequence metadata data exists for sequence_id ${sequenceId}`,
+          uponReceiving: 'a request to get sequence metadata',
+          withRequest: {
+            method: 'GET',
+            path: `/api/courseware/sequence/${sequenceId}`,
+          },
+          willRespondWith: {
+            status: 200,
+            body: {
+              items: eachLike({
+                content: '',
+                page_title: 'Pointing on a Picture',
+                type: 'problem',
+                id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2152d4a4aadc4cb0af5256394a3d1fc7',
+                bookmarked: false,
+                path: 'Example Week 1: Getting Started > Homework - Question Styles > Pointing on a Picture',
+                graded: true,
+                contains_content_type_gated_content: false,
+                href: '',
+              }),
+              item_id: string('block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions'),
+              is_time_limited: boolean(false),
+              is_proctored: boolean(false),
+              is_hidden_after_due: boolean(false),
+              position: null,
+              tag: boolean('sequential'),
+              banner_text: null,
+              save_position: boolean(false),
+              show_completion: boolean(false),
+              gated_content: like({
+                prereq_id: null,
+                prereq_url: null,
+                prereq_section_name: null,
+                gated: false,
+                gated_section_name: 'Homework - Question Styles',
+              }),
+              display_name: boolean('Homework - Question Styles'),
+              format: boolean('Homework'),
+            },
+          },
+        });
+        const response = getSequenceMetadata(sequenceId);
+        expect(response).toBeTruthy();
+        expect(response).toEqual(normalizedSequenceMetadata);
+      }, 100);
    });
  });

  describe('When a request to set sequence position against Unit Index is made', () => {
    it('returns if the request was success or failure', async () => {
-      await provider.addInteraction({
-        state: `sequence position data exists for course_id ${courseId}, sequence_id ${sequenceId} and activeUnitIndex 0`,
-        uponReceiving: 'a request to set sequence position against activeUnitIndex',
-        withRequest: {
-          method: 'POST',
-          path: `/courses/${courseId}/xblock/${sequenceId}/handler/goto_position`,
-          body: { position: 1 }, // Position is 1-indexed on the provider side and 0-indexed in the consumer side.
-        },
-        willRespondWith: {
-          status: 200,
-          body: {
-            success: boolean(true),
+      setTimeout(() => {
+        provider.addInteraction({
+          state: `sequence position data exists for course_id ${courseId}, sequence_id ${sequenceId} and activeUnitIndex 0`,
+          uponReceiving: 'a request to set sequence position against activeUnitIndex',
+          withRequest: {
+            method: 'POST',
+            path: `/courses/${courseId}/xblock/${sequenceId}/handler/goto_position`,
+            body: { position: 1 }, // Position is 1-indexed on the provider side and 0-indexed in the consumer side.
          },
-        },
-      });
-      const response = await postSequencePosition(courseId, sequenceId, 0);
-      expect(response).toBeTruthy();
-      expect(response).toEqual({ success: true });
+          willRespondWith: {
+            status: 200,
+            body: {
+              success: boolean(true),
+            },
+          },
+        });
+        const response = postSequencePosition(courseId, sequenceId, 0);
+        expect(response).toBeTruthy();
+        expect(response).toEqual({ success: true });
+      }, 100);
    });
  });

  describe('When a request to get completion block is made', () => {
    it('returns the completion status', async () => {
-      await provider.addInteraction({
-        state: `completion block data exists for course_id ${courseId}, sequence_id ${sequenceId} and usageId ${usageId}`,
-        uponReceiving: 'a request to get completion block',
-        withRequest: {
-          method: 'POST',
-          path: `/courses/${courseId}/xblock/${sequenceId}/handler/get_completion`,
-          body: { usage_key: usageId },
-        },
-        willRespondWith: {
-          status: 200,
-          body: {
-            complete: boolean(true),
+      setTimeout(() => {
+        provider.addInteraction({
+          state: `completion block data exists for course_id ${courseId}, sequence_id ${sequenceId} and usageId ${usageId}`,
+          uponReceiving: 'a request to get completion block',
+          withRequest: {
+            method: 'POST',
+            path: `/courses/${courseId}/xblock/${sequenceId}/handler/get_completion`,
+            body: { usage_key: usageId },
          },
-        },
-      });
-      const response = await getBlockCompletion(courseId, sequenceId, usageId);
-      expect(response).toBeTruthy();
-      expect(response).toEqual(true);
+          willRespondWith: {
+            status: 200,
+            body: {
+              complete: boolean(true),
+            },
+          },
+        });
+        const response = getBlockCompletion(courseId, sequenceId, usageId);
+        expect(response).toBeTruthy();
+        expect(response).toEqual(true);
+      }, 100);
    });
  });

  describe('When a request to get resume block is made', () => {
    it('returns block id, section id and unit id of the resume block', async () => {
-      await provider.addInteraction({
-        state: `Resume block exists for course_id ${courseId}`,
-        uponReceiving: 'a request to get Resume block',
-        withRequest: {
-          method: 'GET',
-          path: `/api/courseware/resume/${courseId}`,
-        },
-        willRespondWith: {
-          status: 200,
-          body: {
-            block_id: string('642fadf46d074aabb637f20af320fb31'),
-            section_id: string('642fadf46d074aabb637f20af320fb87'),
-            unit_id: string('642fadf46d074aabb637f20af320fb99'),
-          },
-        },
-      });
      const camelCaseResponse = {
        blockId: '642fadf46d074aabb637f20af320fb31',
        sectionId: '642fadf46d074aabb637f20af320fb87',
        unitId: '642fadf46d074aabb637f20af320fb99',
      };
-      const response = await getResumeBlock(courseId);
-      expect(response).toBeTruthy();
-      expect(response).toEqual(camelCaseResponse);
+      setTimeout(() => {
+        provider.addInteraction({
+          state: `Resume block exists for course_id ${courseId}`,
+          uponReceiving: 'a request to get Resume block',
+          withRequest: {
+            method: 'GET',
+            path: `/api/courseware/resume/${courseId}`,
+          },
+          willRespondWith: {
+            status: 200,
+            body: {
+              block_id: string('642fadf46d074aabb637f20af320fb31'),
+              section_id: string('642fadf46d074aabb637f20af320fb87'),
+              unit_id: string('642fadf46d074aabb637f20af320fb99'),
+            },
+          },
+        });
+        const response = getResumeBlock(courseId);
+        expect(response).toBeTruthy();
+        expect(response).toEqual(camelCaseResponse);
+      }, 100);
    });
  });

  describe('When a request to send activation email is made', () => {
-    it('returns status code 200', async () => {
-      await provider.addInteraction({
-        state: 'A logged-in user may or may not be active',
-        uponReceiving: 'a request to send activation email',
-        withRequest: {
-          method: 'POST',
-          path: '/api/send_account_activation_email',
-        },
-        willRespondWith: {
-          status: 200,
-        },
-      });
-      const response = await sendActivationEmail();
-      expect(response).toEqual('');
+    it('returns status code 200', () => {
+      setTimeout(() => {
+        provider.addInteraction({
+          state: 'A logged-in user may or may not be active',
+          uponReceiving: 'a request to send activation email',
+          withRequest: {
+            method: 'POST',
+            path: '/api/send_account_activation_email',
+          },
+          willRespondWith: {
+            status: 200,
+          },
+        });
+        const response = sendActivationEmail();
+        expect(response).toEqual('');
+      }, 100);
    });
  });
 });
--- a/src/decode-page-route/snapshots/index.test.jsx.snap
+++ b/src/decode-page-route/snapshots/index.test.jsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DecodePageRoute should not modify the url if it does not need to be decoded 1`] = `
+<div>
+  PageRoute: {
+  "computedMatch": {
+    "path": "/course/:courseId/home",
+    "url": "/course/course-v1:edX+DemoX+Demo_Course/home",
+    "isExact": true,
+    "params": {
+      "courseId": "course-v1:edX+DemoX+Demo_Course"
+    }
+  }
+}
+</div>
+`;
--- a/src/decode-page-route/index.jsx
+++ b/src/decode-page-route/index.jsx
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import { PageRoute } from '@edx/frontend-platform/react';
+import React from 'react';
+import { useHistory, generatePath } from 'react-router';
+
+export const decodeUrl = (encodedUrl) => {
+  const decodedUrl = decodeURIComponent(encodedUrl);
+  if (encodedUrl === decodedUrl) {
+    return encodedUrl;
+  }
+  return decodeUrl(decodedUrl);
+};
+
+const DecodePageRoute = (props) => {
+  const history = useHistory();
+  if (props.computedMatch) {
+    const { url, path, params } = props.computedMatch;
+
+    Object.keys(params).forEach((param) => {
+      // only decode params not the entire url.
+      // it is just to be safe and less prone to errors
+      params[param] = decodeUrl(params[param]);
+    });
+
+    const newUrl = generatePath(path, params);
+
+    // if the url get decoded, reroute to the decoded url
+    if (newUrl !== url) {
+      history.replace(newUrl);
+    }
+  }
+
+  return <PageRoute {...props} />;
+};
+
+DecodePageRoute.propTypes = {
+  computedMatch: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    path: PropTypes.string.isRequired,
+    // eslint-disable-next-line react/forbid-prop-types
+    params: PropTypes.any,
+  }),
+};
+
+DecodePageRoute.defaultProps = {
+  computedMatch: null,
+};
+
+export default DecodePageRoute;
--- a/src/decode-page-route/index.test.jsx
+++ b/src/decode-page-route/index.test.jsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import { Router, matchPath } from 'react-router';
+import DecodePageRoute, { decodeUrl } from '.';
+
+const decodedCourseId = 'course-v1:edX+DemoX+Demo_Course';
+const encodedCourseId = encodeURIComponent(decodedCourseId);
+const deepEncodedCourseId = (() => {
+  let path = encodedCourseId;
+  for (let i = 0; i < 5; i++) {
+    path = encodeURIComponent(path);
+  }
+  return path;
+})();
+
+jest.mock('@edx/frontend-platform/react', () => ({
+  PageRoute: (props) => `PageRoute: ${JSON.stringify(props, null, 2)}`,
+}));
+
+const renderPage = (props) => {
+  const memHistory = createMemoryHistory({
+    initialEntries: [props?.path],
+  });
+
+  const history = {
+    ...memHistory,
+    replace: jest.fn(),
+  };
+
+  const { container } = render(
+    <Router history={history}>
+      <DecodePageRoute computedMatch={props} />
+    </Router>,
+  );
+
+  return {
+    container,
+    history,
+    props,
+  };
+};
+
+describe('DecodePageRoute', () => {
+  it('should not modify the url if it does not need to be decoded', () => {
+    const props = matchPath(`/course/${decodedCourseId}/home`, {
+      path: '/course/:courseId/home',
+    });
+    const { container, history } = renderPage(props);
+
+    expect(props.url).toContain(decodedCourseId);
+    expect(history.replace).not.toHaveBeenCalled();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should decode the url and replace the history if necessary', () => {
+    const props = matchPath(`/course/${encodedCourseId}/home`, {
+      path: '/course/:courseId/home',
+    });
+    const { history } = renderPage(props);
+
+    expect(props.url).not.toContain(decodedCourseId);
+    expect(props.url).toContain(encodedCourseId);
+    expect(history.replace.mock.calls[0][0]).toContain(decodedCourseId);
+  });
+
+  it('should decode the url multiple times if necessary', () => {
+    const props = matchPath(`/course/${deepEncodedCourseId}/home`, {
+      path: '/course/:courseId/home',
+    });
+    const { history } = renderPage(props);
+
+    expect(props.url).not.toContain(decodedCourseId);
+    expect(props.url).toContain(deepEncodedCourseId);
+    expect(history.replace.mock.calls[0][0]).toContain(decodedCourseId);
+  });
+
+  it('should only decode the url params and not the entire url', () => {
+    const decodedUnitId = 'some+thing';
+    const encodedUnitId = encodeURIComponent(decodedUnitId);
+    const props = matchPath(`/course/${deepEncodedCourseId}/${encodedUnitId}/${encodedUnitId}`, {
+      path: `/course/:courseId/${encodedUnitId}/:unitId`,
+    });
+    const { history } = renderPage(props);
+
+    const decodedUrls = history.replace.mock.calls[0][0].split('/');
+
+    // unitId get decoded
+    expect(decodedUrls.pop()).toContain(decodedUnitId);
+
+    // path remain encoded
+    expect(decodedUrls.pop()).toContain(encodedUnitId);
+
+    // courseId get decoded
+    expect(decodedUrls.pop()).toContain(decodedCourseId);
+  });
+});
+
+describe('decodeUrl', () => {
+  expect(decodeUrl(decodedCourseId)).toEqual(decodedCourseId);
+  expect(decodeUrl(encodedCourseId)).toEqual(decodedCourseId);
+  expect(decodeUrl(deepEncodedCourseId)).toEqual(decodedCourseId);
+});
--- a/src/generic/tabs/useIndexOfLastVisibleChild.js
+++ b/src/generic/tabs/useIndexOfLastVisibleChild.js
@@ -6,6 +6,7 @@ const invisibleStyle = {
  left: 0,
  pointerEvents: 'none',
  visibility: 'hidden',
+  maxWidth: '100%',
 };

 /**
--- a/src/generic/upgrade-notification/UpgradeNotification.scss
+++ b/src/generic/upgrade-notification/UpgradeNotification.scss
@@ -22,9 +22,8 @@
 // An additional Font Awesome stylesheet is imported by Braze in
 // stage/production but not devstack.
 .upgrade-notification-ul.fa-ul {
-  padding-left: 1.25rem;
-  padding-top: 0.875rem;
-  padding-right: 1.25rem;
+  padding: 0.875rem 1.25rem 0;
+  margin: 0 0 1rem 2.5rem;
 }

 .upgrade-notification-text {
--- a/src/i18n/messages/fr_CA.json
+++ b/src/i18n/messages/fr_CA.json
@@ -117,7 +117,7 @@
  "learning.outline.sequence-due-date-set": "{description} échéance {assignmentDue}",
  "learning.outline.sequence-due-date-not-set": "{description}",
  "progress.certificateStatus.unverifiedBody": "Afin de générer une attestation, vous devez effectuer une vérification d'identité. {idVerificationSupportLink}.",
-  "progress.certificateStatus.downloadableBody": "Présentez vos réalisations sur LinkedIn ou votre curriculum vitae aujourd'hui. Vous pouvez télécharger votre certificat maintenant et y accéder à tout moment depuis votre tableau de bord et votre profil.",
+  "progress.certificateStatus.downloadableBody": "Présentez vos réalisations sur LinkedIn ou votre curriculum vitae aujourd'hui. Vous pouvez télécharger votre attestation maintenant et y accéder à tout moment depuis votre tableau de bord et votre profil.",
  "courseCelebration.certificateBody.notAvailable.endDate": "Les notes finales et toutes les attestations obtenues devraient être disponibles après le {endDate}.",
  "progress.certificateStatus.notPassingHeader": "État de l'attestation",
  "progress.certificateStatus.notPassingBody": "Pour être admissible à une attestation, vous devez avoir la note de passage.",
@@ -304,7 +304,7 @@
  "courseExit.nextButton.endOfCourse": "Suivant (fin du cours)",
  "courseExit.profileLink": "Profil",
  "courseExit.programs.lastCourse": "Vous avez terminé le dernier cours de {title}!",
-  "courseCelebration.requestCertificateBodyText": "Pour accéder à votre certificat, demandez-le ci-dessous.",
+  "courseCelebration.requestCertificateBodyText": "Pour accéder à votre attestation, demandez-la ci-dessous.",
  "courseCelebration.requestCertificateButton": "Demander une attestation",
  "courseExit.searchOurCatalogLink": "Rechercher dans notre catalogue",
  "courseCelebration.shareMessage": "Partagez votre succès sur les réseaux sociaux ou par courriel.",
@@ -414,23 +414,23 @@
  "tours.existingUserTour.launchTourCheckpoint.body": "Nous avons récemment ajouté des nouvelles fonctions à l'expérience de cours. Vous avez besoin d'aide à les trouver? Prenez un tour guidé pour en apprendre plus.",
  "tours.button.dismiss": "Rejeter",
  "tours.button.next": "Suivant",
-  "tours.button.okay": "Okay",
+  "tours.button.okay": "D'accord",
  "tours.button.beginTour": "Commencer la visite guidée",
  "tours.button.launchTour": "Lancer la visite guidée",
  "tours.newUserModal.body": "Faisons un tour rapide de {siteName} afin que vous puissiez tirer le meilleur parti de votre cours.",
-  "tours.newUserModal.title.welcome": "Bienvenu à votre",
+  "tours.newUserModal.title.welcome": "Bienvenue à votre",
  "tours.button.skipForNow": "Ignorer pour l'instant",
  "tours.datesCheckpoint.body": "Dates importantes afin de vous maintenir sur la bonne voie.",
  "tours.datesCheckpoint.title": "Restez au courant des dates importantes",
  "tours.outlineCheckpoint.body": "Vous pouvez explorer les sections du cours en utilisant la table des matières ci-dessous.",
  "tours.outlineCheckpoint.title": "Suivez le cours!",
-  "tours.tabNavigationCheckpoint.body": "Ces onglets peuvent être utilisés pour accéder aux autres ressources de cours, tel que votre progression, le plan de cours, etc.",
+  "tours.tabNavigationCheckpoint.body": "Ces onglets peuvent être utilisés pour accéder aux autres ressources de cours, telles que votre progression, le plan de cours, etc.",
  "tours.tabNavigationCheckpoint.title": "Ressources de cours additionnelles",
  "tours.upgradeCheckpoint.body": "Travaillez vers une attestation et obtenez un accès complet au matériel de cours. Mettre à niveau maintenant!",
  "tours.upgradeCheckpoint.title": "Débloquez votre cours",
  "tours.weeklyGoalsCheckpoint.body": "Paramétrer un objectif encourage à compléter votre cours.",
  "tours.weeklyGoalsCheckpoint.title": "Paramétrer un objectif de cours",
-  "tours.newUserModal.title": "{welcome} {siteName} au cours!",
+  "tours.newUserModal.title": "{welcome} cours sur {siteName} !",
  "learning.effortEstimation.combinedEstimate": "{minutes} + {activities}",
  "learning.effortEstimation.activities": "{activityCount, plural, one {# activité} many {# activités} other {# activités}}",
  "learning.effortEstimation.minutesAbbreviated": "{minuteCount, plural, one {# min} many {# min} other {# min}}",
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -37,6 +37,7 @@ import NoticesProvider from './generic/notices';
 import PathFixesProvider from './generic/path-fixes';
 import LiveTab from './course-home/live-tab/LiveTab';
 import CourseAccessErrorPage from './generic/CourseAccessErrorPage';
+import DecodePageRoute from './decode-page-route';

 subscribe(APP_READY, () => {
  ReactDOM.render(
@@ -50,28 +51,28 @@ subscribe(APP_READY, () => {
            <Switch>
              <PageRoute exact path="/goal-unsubscribe/:token" component={GoalUnsubscribe} />
              <PageRoute path="/redirect" component={CoursewareRedirectLandingPage} />
-              <PageRoute path="/course/:courseId/access-denied" component={CourseAccessErrorPage} />
-              <PageRoute path="/course/:courseId/home">
+              <DecodePageRoute path="/course/:courseId/access-denied" component={CourseAccessErrorPage} />
+              <DecodePageRoute path="/course/:courseId/home">
                <TabContainer tab="outline" fetch={fetchOutlineTab} slice="courseHome">
                  <OutlineTab />
                </TabContainer>
-              </PageRoute>
-              <PageRoute path="/course/:courseId/live">
-                <TabContainer tab="live" fetch={fetchLiveTab} slice="courseHome">
+              </DecodePageRoute>
+              <DecodePageRoute path="/course/:courseId/live">
+                <TabContainer tab="lti_live" fetch={fetchLiveTab} slice="courseHome">
                  <LiveTab />
                </TabContainer>
-              </PageRoute>
-              <PageRoute path="/course/:courseId/dates">
+              </DecodePageRoute>
+              <DecodePageRoute path="/course/:courseId/dates">
                <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
                  <DatesTab />
                </TabContainer>
-              </PageRoute>
-              <PageRoute path="/course/:courseId/discussion/:path*">
+              </DecodePageRoute>
+              <DecodePageRoute path="/course/:courseId/discussion/:path*">
                <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
                  <DiscussionTab />
                </TabContainer>
-              </PageRoute>
-              <PageRoute
+              </DecodePageRoute>
+              <DecodePageRoute
                path={[
                  '/course/:courseId/progress/:targetUserId/',
                  '/course/:courseId/progress',
@@ -86,12 +87,12 @@ subscribe(APP_READY, () => {
                  </TabContainer>
                )}
              />
-              <PageRoute path="/course/:courseId/course-end">
+              <DecodePageRoute path="/course/:courseId/course-end">
                <TabContainer tab="courseware" fetch={fetchCourse} slice="courseware">
                  <CourseExit />
                </TabContainer>
-              </PageRoute>
-              <PageRoute
+              </DecodePageRoute>
+              <DecodePageRoute
                path={[
                  '/course/:courseId/:sequenceId/:unitId',
                  '/course/:courseId/:sequenceId',
@@ -136,6 +137,8 @@ initialize({
        TWITTER_URL: process.env.TWITTER_URL || null,
        LEGACY_THEME_NAME: process.env.LEGACY_THEME_NAME || null,
        EXAMS_BASE_URL: process.env.EXAMS_BASE_URL || null,
+        PROCTORED_EXAM_FAQ_URL: process.env.PROCTORED_EXAM_FAQ_URL || null,
+        PROCTORED_EXAM_RULES_URL: process.env.PROCTORED_EXAM_RULES_URL || null,
      }, 'LearnerAppConfig');
    },
  },
--- a/src/index.scss
+++ b/src/index.scss
@@ -77,6 +77,10 @@
  }
 }

+.pgn__menu-select .pgn__menu-select-popup {
+  position: static;
+}
+
 .sequence-container {
  display: flex;
  flex-direction: column;
@@ -86,7 +90,6 @@
  // On mobile, the unit container will be responsible
  // for container padding.
  @media (min-width: map-get($grid-breakpoints, "sm")) {
-    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
@@ -99,8 +102,24 @@
  }
 }

+.sequence-navigation-container {
+  display: flex;
+  align-items: flex-start;
+}
+
+.notification-btn {
+  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+    height: 3rem;
+  }
+}
+
 .sequence-navigation {
  display: flex;
+  flex-grow: 1;
+
+  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+    max-width: 100%;
+  }

  @media (min-width: map-get($grid-breakpoints, "sm")) {
    margin: -1px -1px 0;
@@ -168,9 +187,10 @@
  }

  .sequence-navigation-tabs {
+    overflow: auto;
    .btn {
      flex-basis: 100%;
-      min-width: 2rem;
+      min-width: 3rem;
    }
  }

--- a/src/product-tours/ProductTours.test.jsx
+++ b/src/product-tours/ProductTours.test.jsx
@@ -233,7 +233,7 @@ describe('Courseware Tour', () => {
    // Wait for the page spinner to be removed, such that we can wait for our main
    // content to load before making any assertions.
    await waitForElementToBeRemoved(screen.getByRole('status'));
-    return container;
+    return Promise.resolve(container);
  }

  describe('when receiving successful course data', () => {
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -137,10 +137,12 @@ export async function initializeTestStore(options = {}, overrideStore = true) {
  const discussionConfigUrl = new RegExp(`${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/*`);
  courseHomeMetadataUrl = appendBrowserTimezoneToUrl(courseHomeMetadataUrl);

+  const provider = options?.provider || 'legacy';
+
  axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
  axiosMock.onGet(courseHomeMetadataUrl).reply(200, courseHomeMetadata);
  axiosMock.onGet(learningSequencesUrlRegExp).reply(200, buildOutlineFromBlocks(courseBlocks));
-  axiosMock.onGet(discussionConfigUrl).reply(200, { provider: 'legacy' });
+  axiosMock.onGet(discussionConfigUrl).reply(200, { provider });
  sequenceMetadata.forEach(metadata => {
    const sequenceMetadataUrl = `${getConfig().LMS_BASE_URL}/api/courseware/sequence/${metadata.item_id}`;
    axiosMock.onGet(sequenceMetadataUrl).reply(200, metadata);
Author	SHA1	Message	Date
Ihor Romaniuk	34ea7da98c	fix: RTL for the upgrade notification list (#1221 )	2024-04-07 16:14:45 +03:00
Ihor Romaniuk	120bb71e42	fix: wrong text-color class and text contrast on dates page (#1222 )	2024-03-22 11:03:45 -04:00
Ihor Romaniuk	e8d49a02e9	fix: sequence container width and responsive for sequence navigation block (#1218 )	2024-03-13 13:31:02 -03:00
Stanislav Lunyachek	21698b4a9e	fix: Fix dropdown menu in breadcrumbs	2023-11-21 14:33:40 -05:00
Taras Lytvynenko	0e98399c6b	fix: [RGOeX-25901] Handle rtl/ltr for hangouts (#1192 )	2023-11-13 13:34:40 -05:00
ihor-romaniuk	73610bf8a0	fix: save scroll position on exit from video xblock fullscreen mode	2023-06-21 13:44:44 -04:00
Bilal Qamar	1c025f0af7	feat: upgraded to node v18, added .nvmrc and updated workflows (#1084 ) * feat: upgraded to node v18, added .nvmrc and updated workflows * refactor: updated packages * refactor: updated packages * refactor: updated packages * fix: add workaround in json file * build: remove jestEnv line from json * refactor: updated packages * refactor: updated packages * refactor: updated packages * refactor: updated packages * refactor: updated packages * refactor: updated packages * fix: add workaround in json file * build: remove jestEnv line from json * refactor: updated packages * refactor: updated packages * refactor: updated packages * refactor: updated packages * refactor: updated packages * refactor: updated jest & fixed failing tests * refactor: updated lmsPact failing test cases * refactor: updated frontend-build version * Merge branch master of github.com:edx/frontend-app-learning into bilalqamar95/node-v18-upgrade --------- Co-authored-by: mashal-m <mashal.malik@arbisoft.com>	2023-06-09 09:00:00 +02:00
Ghassan Maslamani	2213d45461	fix: sync LMS_BASE_URL for bookmark API if changed This change makes it possible to use the latest LMS_BASE_API if it was changed because of dynamic config API, which is the default case of tutor. This changes closes openedx/wg-build-test-release/issues/270 Fixes that are simlar to this - gradebook openedx/frontend-app-gradebook/pull/290 - course authoring openedx/frontend-app-course-authoring/pull/389	2023-06-01 15:26:32 +01:00
Sagirov Eugeniy	757d9674cb	chore: update frontend-platform version to v4.2.0	2023-05-02 17:13:03 -03:00
Asad Ali	3302555a47	fix: fix links under contenttools (#1109 )	2023-04-27 17:35:50 +05:00
Zachary Hancock	7317c9424a	feat: update special-exams lib (#1098 )	2023-04-10 09:46:21 -04:00
alangsto	d897663b73	feat: upgrade special exams version and add required config values (#1097 )	2023-04-06 09:55:06 -04:00
Muhammad Adeel Tajamul	2e4eb158f2	feat: added url param to open discussion sidebar (#1092 )	2023-04-04 13:33:35 +05:00
Jenkins	35b229bd1b	chore(i18n): update translations	2023-04-02 17:09:43 -04:00
Muhammad Adeel Tajamul	4ebd569792	feat: added open/close state of discussion sidebar in local storage (#1086 )	2023-03-28 15:39:00 +05:00
lunyachek	52235ebc1c	feat: create component to decode params	2023-03-27 14:54:42 -04:00
Jenkins	aa380e8619	chore(i18n): update translations	2023-03-26 17:09:41 -04:00
lunyachek	4cf0c7f4d7	feat: Add border for active tab in course navigation at Live page	2023-03-22 10:36:33 -04:00
alangsto	743650a99e	chore: pin frontend lib special exams version (#1088 )	2023-03-17 13:35:26 -04:00