Fix misspelled variable names

.env

@@ -4,7 +4,6 @@
 NODE_ENV='production'
 ACCESS_TOKEN_COOKIE_NAME=''
 BASE_URL=''
-CONTACT_URL=''
 CREDENTIALS_BASE_URL=''
 CSRF_TOKEN_API_PATH=''
 DISCOVERY_API_BASE_URL=''
@@ -20,7 +19,6 @@ LOGO_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_WHITE_URL=''
 FAVICON_URL=''
-LEGACY_THEME_NAME=''
 MARKETING_SITE_BASE_URL=''
 ORDER_HISTORY_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
@@ -38,5 +36,3 @@ TWITTER_HASHTAG=''
 TWITTER_URL=''
 USER_INFO_COOKIE_NAME=''
 SESSION_COOKIE_DOMAIN=''
-ENABLE_JUMPNAV='true'
-ENABLE_NOTICES=''

.env.development

@@ -4,7 +4,6 @@
 NODE_ENV='development'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='http://localhost:2000'
-CONTACT_URL='http://localhost:18000/contact'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
@@ -19,7 +18,6 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
-LEGACY_THEME_NAME=''
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 ORDER_HISTORY_URL='http://localhost:1996/orders'
 PORT=2000
@@ -38,5 +36,3 @@ TWITTER_HASHTAG='myedxjourney'
 TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SESSION_COOKIE_DOMAIN='localhost'
-ENABLE_JUMPNAV='true'
-ENABLE_NOTICES=''

.env.test

@@ -4,7 +4,6 @@
 NODE_ENV='test'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='http://localhost:2000'
-CONTACT_URL='http://localhost:18000/contact'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
@@ -19,7 +18,6 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
-LEGACY_THEME_NAME=''
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 ORDER_HISTORY_URL='http://localhost:1996/orders'
 PORT=2000
@@ -37,5 +35,3 @@ TERMS_OF_SERVICE_URL='https://www.edx.org/edx-terms-service'
 TWITTER_HASHTAG='myedxjourney'
 TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
-ENABLE_JUMPNAV='true'
-ENABLE_NOTICES=''

.github/workflows/commitlint.yml

@@ -1,10 +0,0 @@
-# Run commitlint on the commit messages in a pull request.
-
-name: Lint Commit Messages
-
-on:
-  - pull_request
-
-jobs:
-  commitlint:
-    uses: edx/.github/.github/workflows/commitlint.yml@master

.gitignore

@@ -20,6 +20,3 @@ logs
 
 # Local package dependencies
 module.config.js
-
-# Local environment overrides
-.env.private

README.rst

@@ -109,9 +109,3 @@ TWITTER_URL
   unless this is set. Optional.
 
   Example: https://twitter.com/edXOnline
-
-ENABLE_JUMPNAV
-  Enables the new Jump Navigation feature in the course breadcrumbs, defaulted to  the string 'true'.
-  Disable to have simple hyperlinks for breadcrumbs. Setting it to any other value but 'true' ('false','I love flags', 'etc' would disable the Jumpnav).
-  This feature flag is slated to be removed as jumpnav becomes default. Follow the progress of this ticket here:
-  https://openedx.atlassian.net/browse/TNL-8678

docs/decisions/0002-courseware-page-decisions.md

@@ -1,7 +1,5 @@
 # Courseware Page Decisions
 
-**See [0009-courseware-api-direction.md](0009-courseware-api-direction.md) for updates!**
-
 ## Courseware data loading
 
 Today we have strictly hierarchical courses - a course contains sections, which contain sequences, which contain units, which contain components.

docs/decisions/0008-liberal-courseware-path-handling.md

@@ -88,3 +88,6 @@ And more like:
 ```
 https://learning.edx.org/course/course-v1:edX+DemoX.1+2T2019/Being_Social/Teams
 ```
+
+_This further work has been expanded upon in
+[ADR #9: Courseware URL shortening](./0009-courseware-url-shortening.md)._

docs/decisions/0009-courseware-api-direction.md

@@ -1,62 +0,0 @@
-# Direction of Courseware APIs
-
-In order to allow for greater flexibility and separation of concerns, we're going to stop using the Course Blocks API for navigational data, and pull that data from the Learning Sequences Outlines API instead. The intention is to give us four distinct layers of courseware that can eventually be composed in different ways:
-
-* Learning Context Metadata
-* Learning Context Navigation
-* Sequence Navigation
-* Unit Rendering
-
-Note that "Learning Context" is a generalization of "Course" that includes other things like Content Libraries, Learning Pathways, and potentially other logical groupings of content.
-
-This is a refinement of [0002-courseware-page-decisions.md](0002-courseware-page-decisions.md). The fundamental layers remain the same, but this document tries to better clarify the boundaries and path forward for these layers. We're not making these layers completely swappable/pluggable now, but we should separate the data access in a way that allows for that in the future.
-
-## Background
-
-We currently make four primary requests to the LMS when rendering courseware instructional content:
-
-1. Course Metadata: `/api/courseware/course/{courseId}` (REST API)
-2. Course Blocks API: `/api/courses/v2/blocks/?course_id={courseId}` (REST API)
-3. Sequence Metadata: `/api/courseware/sequence/{sequenceUsageKey}` (REST API)
-4. Unit: `/xblock/{unitBlockUsageKey}` (rendered in an iframe)
-
-There is a significant amount of overlap between the Course Blocks API and the others at the moment, since Course Blocks takes a static snapshot of the entire tree of course content at once. There are a few problems with the current arrangement:
-
-* It's slow and complex. The Course Blocks API can be difficult to maintain and reason about, and trickier to optimize.
-* Assuming that all course structures are the same makes it difficult to support other content types, like LabXchange Learning Pathways or adaptive content.
-* The overlap between Course Blocks and the other APIs means that there can be conflicts about the state.
-
-## Motivating Vision
-
-We have seen a desire to extend or enhance the courseware experience in various ways:
-
-Learning Context Navigation
-* Allowing for shorter, human-readable URLs in courseware.
-* Smaller courses that do not need the current navigational hierarchy.
-* LabXchange pathways.
-
-Sequence Navigation
-* Adaptive content, where the full list of units is not known up front.
-* More limited navigation, where content is pushed linearly, without the ability to jump ahead.
-* Different layouts for content browsing.
-
-Unit Rendering
-* Use of QTI content (currently serviced by cc2olx conversion).
-* Desire to experiment with a next-gen version of XBlock.
-* Use of entirely LTI units.
-
-The idea would be to insulate each layer from the layers above and below it. Sequence rendering shouldn't be affected by whether or not it's in a two level hierarchy (Course → Section → Sequence), or a flat one (Course → Sequence). Learning Context Navigation should be able to reference Sequences without caring if a Sequence is an adaptive one or not. Sequences should be able to have a common interface to call Unit iframes, whether those Units are rendering XBlocks or QTI content.
-
-Note that supporting these types of course structures would require downstream changes in other systems as well (e.g. analytics).
-
-## Next Step: Removing use of the Course Blocks API.
-
-The next step in this process is to remove the call to the Course Blocks API, and split its responsibilities across just the existing Learning Sequences Outline and Sequence Metadata APIs. This will involve at least a couple of steps.
-
-### Complete rollout of Learning Sequences Outline calls.
-
-We're currently in a transitional state between these APIs where the Learning Sequences Outline calls are only rolled out on a small handful of courses.
-
-### Shift Sequence and Unit metadata to only come from Sequence Metadata API.
-
-We currently pull this information from both Course Blocks and the Sequence Metadata API. We can consolidate on just the Sequence Metadata API. There is also server side optimization that can be done with the Sequence Metadata API calls as part of this work.

docs/decisions/0009-courseware-url-shortening.md

@@ -0,0 +1,58 @@
+# Courseware URL shortening
+
+## Status
+
+Accepted
+
+_This updates some of the content in [ADR #8: Liberal courseware path handling](./0008-liberal-courseware-path-handling.md)._
+
+## Context
+
+The current URL is not human-readable. The URL is composed of the UsageKeys for the current sequence and unit. We can't make UsageKeys themselves more readable because they're tied to student state.
+
+This is what the URLs currently look like:
+
+```
+
+https://learning.edx.org/course/course-v1:edX+DemoX.1+2T2019/block-v1:edX+DemoX.1+2T2019+type@sequential+block@e0a61b3d5a2046949e76d12cac5df493/block-v1:edX+DemoX.1+2T2019+type@vertical+block@52dbad5a28e140f291a476f92ce11996
+
+```
+
+After exploring different URL patterns and possible redundancies in the current URL format, the following key points were noticed. The course, run, and organization are stated in every portion of the URL. We also do not need the URL to tell us the type of block since it has been determined that all URLs will follow the path` /course/:courseId/:sequenceId/:unitId`.
+
+## Decision
+
+The courseware URL will format to the following structure:
+
+```
+
+https://learning.edx.org/c/:courseId/:sequenceHash/:unitHash/:sectionSlug/:sequenceSlug/:unitSlug/
+
+```
+
+Example URL:
+
+```
+
+https://learning.edx.org/c/course-v1:edX+DemoX.1+2T2019/YmxvY2/njuRCq/optional-example-problem-types/stem-problems/code-grader
+
+```
+
+The fields definition and requirements ar as follows:
+
+* :courseId (required) - same as the previous `courseId`.
+* :sequenceHash (required) - a `blake2b` version of the `sequenceId`'s `urlsafe_b64encode` .
+* :unitHash (required) - a `blake2b` version of the `unitId`'s `urlsafe_b64encode`.
+* :sectionSlug (optional) - `display_name` of the current sequence's parent section.
+* :sequenceSlug (optional) - `display_name` of the current sequence.
+* :unitSlug (optional) - `display_name` of the current unit
+
+Partial paths will update with the required parameters as dicussed in [ADR #8: Liberal courseware path handling](./0008-liberal-courseware-path-handling.md). The `sequenceHash` and `unitHash` will shorten their respective ids using `hashlib.blake2b` with `digest_size` of 6 bytes. `Blake2b` will reduce the length of the id so the encoded version can also be short. Hashing will be handled by `blake2b` because it is the fastest hashing function in the `hashlib` library. The hash will be generated and mapped in LMS. The slugs based on `display_name` are optional because not all blocks have an associated `display_name` attributes, most likely to occur in OLX imports. The `display_name` will be pulled from the current section, sequence, and unit attribute, and if there is not an attribute `display`, the url will use the attribute `display_name_with_default`. The `display_name` will be formatted safely for a url using Django's [slugify](https://docs.djangoproject.com/en/3.2/ref/utils/#django.utils.text.slugify). Slugify allows unicode identifiers in the slug. If the slugs are omitted, it will redirect to the canonical version without the slugs.
+
+## Consequences
+
+If old URLs are not properly routed then the content and those links will no longer be accessible to the user. The old URLs could include, but not limited to, bookmarks and exams.
+
+## Further work
+
+At some point, we may decide to further extend the URL shortening to the entire platform. At the moment, the hashes for the sequences and units are generated when the sequences and units are being called. In the future, it would be better if the hashes would be generated and stored when the sequences and units are originally created. This would require `learning_sequences` to include a class for unit storage, which is not being stored at the moment.

package.json

@@ -33,30 +33,29 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
     "@edx/frontend-component-footer": "10.1.6",
-    "@edx/frontend-enterprise-utils": "1.1.1",
-    "@edx/frontend-lib-special-exams": "1.14.1",
-    "@edx/frontend-platform": "1.14.3",
-    "@edx/paragon": "16.19.0",
-    "@edx/frontend-component-header": "^2.4.3",
+    "@edx/frontend-enterprise-utils": "0.1.7",
+    "@edx/frontend-lib-special-exams": "1.12.0",
+    "@edx/frontend-platform": "1.12.3",
+    "@edx/paragon": "16.7.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.1.15",
-    "@pact-foundation/pact": "9.16.4",
-    "@reduxjs/toolkit": "1.6.2",
+    "@pact-foundation/pact": "9.16.0",
+    "@reduxjs/toolkit": "1.6.1",
     "classnames": "2.3.1",
-    "core-js": "3.18.3",
-    "js-cookie": "3.0.1",
+    "core-js": "3.16.1",
+    "js-cookie": "2.2.1",
     "lodash.camelcase": "4.3.0",
     "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-break": "1.3.2",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
-    "react-redux": "7.2.5",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
+    "react-redux": "7.2.4",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
     "react-share": "4.4.0",
     "redux": "4.1.1",
     "regenerator-runtime": "0.13.9",
@@ -65,17 +64,17 @@
     "util": "0.12.4"
   },
   "devDependencies": {
-    "@edx/frontend-build": "9.0.5",
+    "@edx/frontend-build": "8.0.0",
     "@testing-library/dom": "7.16.3",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "10.3.0",
-    "@testing-library/user-event": "13.4.1",
-    "axios-mock-adapter": "1.20.0",
+    "@testing-library/user-event": "12.8.3",
+    "axios-mock-adapter": "1.19.0",
     "codecov": "3.8.3",
-    "es-check": "6.0.0",
-    "glob": "7.2.0",
-    "husky": "7.0.2",
-    "jest": "27.2.5",
+    "es-check": "5.2.4",
+    "glob": "7.1.7",
+    "husky": "7.0.1",
+    "jest": "27.0.6",
     "jest-chain": "1.1.5",
     "reactifex": "1.1.1",
     "rosie": "2.1.0"

src/alerts/access-expiration-alert/AccessExpirationAlert.jsx

@@ -9,6 +9,7 @@ import { Info } from '@edx/paragon/icons';
 
 import messages from './messages';
 import AccessExpirationAlertMMP2P from './AccessExpirationAlertMMP2P';
+import AccessExpirationAlertMasquerade from './AccessExpirationAlertMasquerade';
 
 function AccessExpirationAlert({ intl, payload }) {
   /** [MM-P2P] Experiment */
@@ -35,10 +36,17 @@ function AccessExpirationAlert({ intl, payload }) {
 
   const {
     expirationDate,
+    masqueradingExpiredCourse,
     upgradeDeadline,
     upgradeUrl,
   } = accessExpiration;
 
+  if (masqueradingExpiredCourse) {
+    return (
+      <AccessExpirationAlertMasquerade payload={payload} />
+    );
+  }
+
   /** [MM-P2P] Experiment */
   if (showMMP2P) {
     return (

src/alerts/access-expiration-alert/AccessExpirationAlertMasquerade.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
+import { Alert } from '@edx/paragon';
+import { Info } from '@edx/paragon/icons';
+
+function AccessExpirationAlertMasquerade({ payload }) {
+  const {
+    accessExpiration,
+    userTimezone,
+  } = payload;
+
+  if (!accessExpiration) {
+    return null;
+  }
+
+  const {
+    expirationDate,
+    masqueradingExpiredCourse,
+  } = accessExpiration;
+
+  if (!masqueradingExpiredCourse) {
+    return null;
+  }
+
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  return (
+    <Alert variant="info" icon={Info}>
+      <FormattedMessage
+        id="learning.accessExpiration.expired"
+        defaultMessage="This learner does not have access to this course. Their access expired on {date}."
+        values={{
+          date: (
+            <FormattedDate
+              key="accessExpirationExpiredDate"
+              day="numeric"
+              month="short"
+              year="numeric"
+              value={expirationDate}
+              {...timezoneFormatArgs}
+            />
+          ),
+        }}
+      />
+    </Alert>
+  );
+}
+
+AccessExpirationAlertMasquerade.propTypes = {
+  payload: PropTypes.shape({
+    accessExpiration: PropTypes.shape({
+      expirationDate: PropTypes.string.isRequired,
+      masqueradingExpiredCourse: PropTypes.bool.isRequired,
+    }).isRequired,
+    userTimezone: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default AccessExpirationAlertMasquerade;

src/alerts/access-expiration-alert/AccessExpirationMasqueradeBanner.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
-import { PageBanner } from '@edx/paragon';
-
-function AccessExpirationMasqueradeBanner({ payload }) {
-  const {
-    expirationDate,
-    userTimezone,
-  } = payload;
-
-  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
-
-  return (
-    <PageBanner variant="warning">
-      <FormattedMessage
-        id="instructorToolbar.pageBanner.courseHasExpired"
-        defaultMessage="This learner no longer has access to this course. Their access expired on {date}."
-        values={{
-          date: <FormattedDate
-            key="instructorToolbar.pageBanner.accessExpirationDate"
-            value={expirationDate}
-            {...timezoneFormatArgs}
-          />,
-        }}
-      />
-    </PageBanner>
-  );
-}
-
-AccessExpirationMasqueradeBanner.propTypes = {
-  payload: PropTypes.shape({
-    expirationDate: PropTypes.string.isRequired,
-    userTimezone: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default AccessExpirationMasqueradeBanner;

src/alerts/access-expiration-alert/hooks.js

@@ -1,12 +1,11 @@
 import React, { useMemo } from 'react';
 import { useAlert } from '../../generic/user-messages';
-import { useModel } from '../../generic/model-store';
 
 const AccessExpirationAlert = React.lazy(() => import('./AccessExpirationAlert'));
-const AccessExpirationMasqueradeBanner = React.lazy(() => import('./AccessExpirationMasqueradeBanner'));
+const AccessExpirationAlertMasquerade = React.lazy(() => import('./AccessExpirationAlertMasquerade'));
 
 function useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, topic, analyticsPageName) {
-  const isVisible = accessExpiration && !accessExpiration.masqueradingExpiredCourse; // If it exists, show it.
+  const isVisible = !!accessExpiration; // If it exists, show it.
   const payload = {
     accessExpiration,
     courseId,
@@ -24,28 +23,20 @@ function useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone,
   return { clientAccessExpirationAlert: AccessExpirationAlert };
 }
 
-export function useAccessExpirationMasqueradeBanner(courseId, tab) {
-  const {
-    userTimezone,
-  } = useModel('courseHomeMeta', courseId);
-  const {
-    accessExpiration,
-  } = useModel(tab, courseId);
-
-  const isVisible = accessExpiration && accessExpiration.masqueradingExpiredCourse;
-  const expirationDate = accessExpiration && accessExpiration.expirationDate;
+export function useAccessExpirationAlertMasquerade(accessExpiration, userTimezone, topic) {
+  const isVisible = !!accessExpiration; // If it exists, show it.
   const payload = {
-    expirationDate,
+    accessExpiration,
     userTimezone,
   };
 
   useAlert(isVisible, {
-    code: 'clientAccessExpirationMasqueradeBanner',
+    code: 'clientAccessExpirationAlertMasquerade',
     payload: useMemo(() => payload, Object.values(payload).sort()),
-    topic: 'instructor-toolbar-alerts',
+    topic,
   });
 
-  return { clientAccessExpirationMasqueradeBanner: AccessExpirationMasqueradeBanner };
+  return { clientAccessExpirationAlertMasquerade: AccessExpirationAlertMasquerade };
 }
 
 export default useAccessExpirationAlert;

src/alerts/access-expiration-alert/index.js

@@ -1 +1 @@
-export { default, useAccessExpirationMasqueradeBanner } from './hooks';
+export { default, useAccessExpirationAlertMasquerade } from './hooks';

src/alerts/course-start-alert/CourseStartMasqueradeBanner.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
-import { PageBanner } from '@edx/paragon';
-
-import { useModel } from '../../generic/model-store';
-
-function CourseStartMasqueradeBanner({ payload }) {
-  const {
-    courseId,
-  } = payload;
-
-  const {
-    start,
-    userTimezone,
-  } = useModel('courseHomeMeta', courseId);
-
-  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
-
-  return (
-    <PageBanner variant="warning">
-      <FormattedMessage
-        id="instructorToolbar.pageBanner.courseHasNotStarted"
-        defaultMessage="This learner does not yet have access to this course. The course starts on {date}."
-        values={{
-          date: <FormattedDate
-            key="instructorToolbar.pageBanner.courseStartDate"
-            value={start}
-            {...timezoneFormatArgs}
-          />,
-        }}
-      />
-    </PageBanner>
-  );
-}
-
-CourseStartMasqueradeBanner.propTypes = {
-  payload: PropTypes.shape({
-    courseId: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default CourseStartMasqueradeBanner;

src/alerts/course-start-alert/hooks.js

@@ -1,62 +0,0 @@
-import React, { useMemo } from 'react';
-import { useAlert } from '../../generic/user-messages';
-import { useModel } from '../../generic/model-store';
-
-const CourseStartAlert = React.lazy(() => import('./CourseStartAlert'));
-const CourseStartMasqueradeBanner = React.lazy(() => import('./CourseStartMasqueradeBanner'));
-
-function isStartDateInFuture(courseId) {
-  const {
-    start,
-  } = useModel('courseHomeMeta', courseId);
-
-  const today = new Date();
-  const startDate = new Date(start);
-  return startDate > today;
-}
-
-function useCourseStartAlert(courseId) {
-  const {
-    isEnrolled,
-  } = useModel('courseHomeMeta', courseId);
-
-  const isVisible = isEnrolled && isStartDateInFuture(courseId);
-
-  const payload = {
-    courseId,
-  };
-
-  useAlert(isVisible, {
-    code: 'clientCourseStartAlert',
-    payload: useMemo(() => payload, Object.values(payload).sort()),
-    topic: 'outline-course-alerts',
-  });
-
-  return {
-    clientCourseStartAlert: CourseStartAlert,
-  };
-}
-
-export function useCourseStartMasqueradeBanner(courseId, tab) {
-  const {
-    isMasquerading,
-  } = useModel('courseHomeMeta', courseId);
-
-  const isVisible = isMasquerading && tab === 'progress' && isStartDateInFuture(courseId);
-
-  const payload = {
-    courseId,
-  };
-
-  useAlert(isVisible, {
-    code: 'clientCourseStartMasqueradeBanner',
-    payload: useMemo(() => payload, Object.values(payload).sort()),
-    topic: 'instructor-toolbar-alerts',
-  });
-
-  return {
-    clientCourseStartMasqueradeBanner: CourseStartMasqueradeBanner,
-  };
-}
-
-export default useCourseStartAlert;

src/alerts/course-start-alert/index.js

@@ -1 +0,0 @@
-export { default, useCourseStartMasqueradeBanner } from './hooks';

src/course-header/AnonymousUserMenu.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import genericMessages from '../generic/messages';
+
+function AnonymousUserMenu({ intl }) {
+  return (
+    <div>
+      <Button
+        className="mr-3"
+        variant="outline-primary"
+        href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
+      >
+        {intl.formatMessage(genericMessages.registerSentenceCase)}
+      </Button>
+      <Button
+        variant="primary"
+        href={`${getLoginRedirectUrl(global.location.href)}`}
+      >
+        {intl.formatMessage(genericMessages.signInSentenceCase)}
+      </Button>
+    </div>
+  );
+}
+
+AnonymousUserMenu.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AnonymousUserMenu);

src/course-header/AuthenticatedUserDropdown.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
+
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@edx/paragon';
+
+import messages from './messages';
+
+function AuthenticatedUserDropdown({ enterpriseLearnerPortalLink, intl, username }) {
+  let dashboardMenuItem = (
+    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
+      {intl.formatMessage(messages.dashboard)}
+    </Dropdown.Item>
+  );
+  if (enterpriseLearnerPortalLink && Object.keys(enterpriseLearnerPortalLink).length > 0) {
+    dashboardMenuItem = (
+      <Dropdown.Item href={enterpriseLearnerPortalLink.href}>
+        {enterpriseLearnerPortalLink.content}
+      </Dropdown.Item>
+    );
+  }
+  return (
+    <>
+      <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      <Dropdown className="user-dropdown">
+        <Dropdown.Toggle variant="outline-primary">
+          <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+          <span data-hj-suppress className="d-none d-md-inline">
+            {username}
+          </span>
+        </Dropdown.Toggle>
+        <Dropdown.Menu className="dropdown-menu-right">
+          {dashboardMenuItem}
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>
+            {intl.formatMessage(messages.profile)}
+          </Dropdown.Item>
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
+            {intl.formatMessage(messages.account)}
+          </Dropdown.Item>
+          {!enterpriseLearnerPortalLink && (
+            // Users should only see Order History if they do not have an available
+            // learner portal, because an available learner portal currently means
+            // that they access content via Subscriptions, in which context an "order"
+            // is not relevant.
+            <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
+              {intl.formatMessage(messages.orderHistory)}
+            </Dropdown.Item>
+          )}
+          <Dropdown.Item href={getConfig().LOGOUT_URL}>
+            {intl.formatMessage(messages.signOut)}
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+}
+
+AuthenticatedUserDropdown.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired,
+  enterpriseLearnerPortalLink: PropTypes.shape({
+    type: PropTypes.string,
+    href: PropTypes.string,
+    content: PropTypes.string,
+  }),
+};
+
+AuthenticatedUserDropdown.defaultProps = {
+  enterpriseLearnerPortalLink: undefined,
+};
+
+export default injectIntl(AuthenticatedUserDropdown);

src/course-header/Header.jsx

@@ -0,0 +1,97 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { useEnterpriseConfig } from '@edx/frontend-enterprise-utils';
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import AnonymousUserMenu from './AnonymousUserMenu';
+import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
+import messages from './messages';
+
+function LinkedLogo({
+  href,
+  src,
+  alt,
+  ...attributes
+}) {
+  return (
+    <a href={href} {...attributes}>
+      <img className="d-block" src={src} alt={alt} />
+    </a>
+  );
+}
+
+LinkedLogo.propTypes = {
+  href: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+};
+
+function Header({
+  courseOrg, courseNumber, courseTitle, intl,
+}) {
+  const { authenticatedUser } = useContext(AppContext);
+
+  const { enterpriseLearnerPortalLink, enterpriseCustomerBrandingConfig } = useEnterpriseConfig(
+    authenticatedUser,
+    getConfig().ENTERPRISE_LEARNER_PORTAL_HOSTNAME,
+    getConfig().LMS_BASE_URL,
+  );
+
+  let headerLogo = (
+    <LinkedLogo
+      className="logo"
+      href={`${getConfig().LMS_BASE_URL}/dashboard`}
+      src={getConfig().LOGO_URL}
+      alt={getConfig().SITE_NAME}
+    />
+  );
+  if (enterpriseCustomerBrandingConfig && Object.keys(enterpriseCustomerBrandingConfig).length > 0) {
+    headerLogo = (
+      <LinkedLogo
+        className="logo"
+        href={enterpriseCustomerBrandingConfig.logoDestination}
+        src={enterpriseCustomerBrandingConfig.logo}
+        alt={enterpriseCustomerBrandingConfig.logoAltText}
+      />
+    );
+  }
+
+  return (
+    <header className="course-header">
+      <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
+      <div className="container-xl py-2 d-flex align-items-center">
+        {headerLogo}
+        <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
+          <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
+          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+        </div>
+        {authenticatedUser && (
+          <AuthenticatedUserDropdown
+            enterpriseLearnerPortalLink={enterpriseLearnerPortalLink}
+            username={authenticatedUser.username}
+          />
+        )}
+        {!authenticatedUser && (
+          <AnonymousUserMenu />
+        )}
+      </div>
+    </header>
+  );
+}
+
+Header.propTypes = {
+  courseOrg: PropTypes.string,
+  courseNumber: PropTypes.string,
+  courseTitle: PropTypes.string,
+  intl: intlShape.isRequired,
+};
+
+Header.defaultProps = {
+  courseOrg: null,
+  courseNumber: null,
+  courseTitle: null,
+};
+
+export default injectIntl(Header);

src/course-header/Header.test.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  authenticatedUser, initializeMockApp, render, screen,
+} from '../setupTest';
+import { Header } from './index';
+
+describe('Header', () => {
+  beforeAll(async () => {
+    // We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`.
+    await initializeMockApp();
+  });
+
+  it('displays user button', () => {
+    render(<Header />);
+    expect(screen.getByRole('button')).toHaveTextContent(authenticatedUser.username);
+  });
+
+  it('displays course data', () => {
+    const courseData = {
+      courseOrg: 'course-org',
+      courseNumber: 'course-number',
+      courseTitle: 'course-title',
+    };
+    render(<Header {...courseData} />);
+
+    expect(screen.getByText(`${courseData.courseOrg} ${courseData.courseNumber}`)).toBeInTheDocument();
+    expect(screen.getByText(courseData.courseTitle)).toBeInTheDocument();
+  });
+});

src/course-header/index.js

@@ -1,2 +1,2 @@
-/* eslint-disable import/prefer-default-export */
+export { default as Header } from './Header';
 export { default as CourseTabsNavigation } from './CourseTabsNavigation';

src/course-header/messages.js

@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  courseMaterial: {
+    id: 'learn.navigation.course.tabs.label',
+    defaultMessage: 'Course Material',
+    description: 'The accessible label for course tabs navigation',
+  },
+  dashboard: {
+    id: 'header.menu.dashboard.label',
+    defaultMessage: 'Dashboard',
+    description: 'The text for the user menu Dashboard navigation link.',
+  },
+  help: {
+    id: 'header.help.label',
+    defaultMessage: 'Help',
+    description: 'The text for the link to the Help Center',
+  },
+  profile: {
+    id: 'header.menu.profile.label',
+    defaultMessage: 'Profile',
+    description: 'The text for the user menu Profile navigation link.',
+  },
+  account: {
+    id: 'header.menu.account.label',
+    defaultMessage: 'Account',
+    description: 'The text for the user menu Account navigation link.',
+  },
+  orderHistory: {
+    id: 'header.menu.orderHistory.label',
+    defaultMessage: 'Order History',
+    description: 'The text for the user menu Order History navigation link.',
+  },
+  skipNavLink: {
+    id: 'header.navigation.skipNavLink',
+    defaultMessage: 'Skip to main content.',
+    description: 'A link used by screen readers to allow users to skip to the main content of the page.',
+  },
+  signOut: {
+    id: 'header.menu.signOut.label',
+    defaultMessage: 'Sign Out',
+    description: 'The label for the user menu Sign Out action.',
+  },
+});
+
+export default messages;

src/course-home/data/__factories__/courseHomeMetadata.factory.js

@@ -19,5 +19,4 @@ Factory.define('courseHomeMetadata')
       user_message: null,
     },
     start: '2013-02-05T05:00:00Z',
-    user_timezone: 'UTC',
   });

src/course-home/data/__factories__/datesTabData.factory.js

@@ -219,4 +219,5 @@ Factory.define('datesTabData')
     ],
     has_ended: false,
     learner_is_full_access: true,
+    user_timezone: 'America/New_York',
   });

src/course-home/data/__factories__/outlineTabData.factory.js

@@ -14,6 +14,7 @@ Factory.define('outlineTabData')
   })
   .attr('dates_widget', ['date_blocks'], (dateBlocks) => ({
     course_date_blocks: dateBlocks,
+    user_timezone: 'UTC',
   }))
   .attr('resume_course', ['host', 'courseId'], (host, courseId) => ({
     has_visited_course: false,
@@ -47,6 +48,11 @@ Factory.define('outlineTabData')
         title: 'Bookmarks',
         url: 'https://example.com/bookmarks',
       },
+      {
+        analytics_id: 'edx.tool.verified_upgrade',
+        title: 'Upgrade to Verified',
+        url: 'https://example.com/upgrade',
+      },
     ],
     dates_banner_info: {
       content_type_gating_enabled: false,
@@ -60,4 +66,5 @@ Factory.define('outlineTabData')
     handouts_html: '<ul><li>Handout 1</li></ul>',
     offer: null,
     welcome_message_html: '<p>Welcome to this course!</p>',
+    mfe_short_url_is_active: true,
   });

src/course-home/data/__factories__/progressTabData.factory.js

@@ -4,7 +4,6 @@ import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dep
 // This set of data may not be realistic, but it is intended to demonstrate many UI results.
 Factory.define('progressTabData')
   .attrs({
-    access_expiration: null,
     end: '3027-03-31T00:00:00Z',
     certificate_data: {},
     completion_summary: {

src/course-home/data/__snapshots__/redux.test.js.snap

@@ -13,8 +13,11 @@ Object {
   "courseware": Object {
     "courseId": null,
     "courseStatus": "loading",
+    "proctoredExamsEnabledWaffleFlag": false,
     "sequenceId": null,
     "sequenceStatus": "loading",
+    "shortLinkFeatureFlag": false,
+    "specialExamsEnabledWaffleFlag": false,
   },
   "models": Object {
     "courseHomeMeta": Object {
@@ -30,7 +33,6 @@ Object {
         },
         "id": "course-v1:edX+DemoX+Demo_Course_1",
         "isEnrolled": false,
-        "isMasquerading": false,
         "isSelfPaced": false,
         "isStaff": false,
         "number": "DemoX",
@@ -70,7 +72,6 @@ Object {
           },
         ],
         "title": "Demonstration Course",
-        "userTimezone": "UTC",
         "verifiedMode": Object {
           "currencySymbol": "$",
           "price": 10,
@@ -295,6 +296,7 @@ Object {
         "hasEnded": false,
         "id": "course-v1:edX+DemoX+Demo_Course_1",
         "learnerIsFullAccess": true,
+        "userTimezone": "America/New_York",
       },
     },
   },
@@ -317,8 +319,11 @@ Object {
   "courseware": Object {
     "courseId": null,
     "courseStatus": "loading",
+    "proctoredExamsEnabledWaffleFlag": false,
     "sequenceId": null,
     "sequenceStatus": "loading",
+    "shortLinkFeatureFlag": false,
+    "specialExamsEnabledWaffleFlag": false,
   },
   "models": Object {
     "courseHomeMeta": Object {
@@ -334,7 +339,6 @@ Object {
         },
         "id": "course-v1:edX+DemoX+Demo_Course_1",
         "isEnrolled": false,
-        "isMasquerading": false,
         "isSelfPaced": false,
         "isStaff": false,
         "number": "DemoX",
@@ -374,7 +378,6 @@ Object {
           },
         ],
         "title": "Demonstration Course",
-        "userTimezone": "UTC",
         "verifiedMode": Object {
           "currencySymbol": "$",
           "price": 10,
@@ -422,6 +425,7 @@ Object {
               "due": null,
               "effortActivities": 2,
               "effortTime": 15,
+              "hash_key": "abcdabcd1",
               "icon": null,
               "id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
               "legacyWebUrl": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1?experience=legacy",
@@ -441,6 +445,11 @@ Object {
             "title": "Bookmarks",
             "url": "https://example.com/bookmarks",
           },
+          Object {
+            "analyticsId": "edx.tool.verified_upgrade",
+            "title": "Upgrade to Verified",
+            "url": "https://example.com/upgrade",
+          },
         ],
         "datesBannerInfo": Object {
           "contentTypeGatingEnabled": false,
@@ -449,6 +458,7 @@ Object {
         },
         "datesWidget": Object {
           "courseDateBlocks": Array [],
+          "userTimezone": "UTC",
         },
         "enrollAlert": Object {
           "canEnroll": true,
@@ -464,6 +474,7 @@ Object {
           "hasVisitedCourse": false,
           "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+Test+Block@12345abcde",
         },
+        "shortLinkFeatureFlag": true,
         "timeOffsetMillis": 0,
         "userHasPassingGrade": undefined,
         "verifiedMode": Object {
@@ -497,8 +508,11 @@ Object {
   "courseware": Object {
     "courseId": null,
     "courseStatus": "loading",
+    "proctoredExamsEnabledWaffleFlag": false,
     "sequenceId": null,
     "sequenceStatus": "loading",
+    "shortLinkFeatureFlag": false,
+    "specialExamsEnabledWaffleFlag": false,
   },
   "models": Object {
     "courseHomeMeta": Object {
@@ -514,7 +528,6 @@ Object {
         },
         "id": "course-v1:edX+DemoX+Demo_Course_1",
         "isEnrolled": false,
-        "isMasquerading": false,
         "isSelfPaced": false,
         "isStaff": false,
         "number": "DemoX",
@@ -554,7 +567,6 @@ Object {
           },
         ],
         "title": "Demonstration Course",
-        "userTimezone": "UTC",
         "verifiedMode": Object {
           "currencySymbol": "$",
           "price": 10,
@@ -564,7 +576,6 @@ Object {
     },
     "progress": Object {
       "course-v1:edX+DemoX+Demo_Course_1": Object {
-        "accessExpiration": null,
         "certificateData": Object {},
         "completionSummary": Object {
           "completeCount": 1,

src/course-home/data/api.js

@@ -98,7 +98,6 @@ function normalizeCourseHomeCourseMetadata(metadata) {
       title: tab.title,
       url: tab.url,
     })),
-    isMasquerading: data.originalUserIsStaff && !data.isStaff,
   };
 }
 
@@ -145,6 +144,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           // link to the MFE ourselves).
           showLink: !!block.legacy_web_url,
           title: block.display_name,
+          hash_key: block.hash_key,
         };
         break;
 
@@ -180,7 +180,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
 }
 
 export async function getCourseHomeCourseMetadata(courseId) {
-  let url = `${getConfig().LMS_BASE_URL}/api/course_home/course_metadata/${courseId}`;
+  let url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
   url = appendBrowserTimezoneToUrl(url);
   const { data } = await getAuthenticatedHttpClient().get(url);
   return normalizeCourseHomeCourseMetadata(data);
@@ -192,7 +192,7 @@ export async function getCourseHomeCourseMetadata(courseId) {
 // import './__factories__';
 export async function getDatesTabData(courseId) {
   // return camelCaseObject(Factory.build('datesTabData'));
-  const url = `${getConfig().LMS_BASE_URL}/api/course_home/dates/${courseId}`;
+  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/dates/${courseId}`;
   try {
     const { data } = await getAuthenticatedHttpClient().get(url);
     return camelCaseObject(data);
@@ -212,7 +212,7 @@ export async function getDatesTabData(courseId) {
 }
 
 export async function getProgressTabData(courseId, targetUserId) {
-  let url = `${getConfig().LMS_BASE_URL}/api/course_home/progress/${courseId}`;
+  let url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
 
   // If targetUserId is passed in, we will get the progress page data
   // for the user with the provided id, rather than the requesting user.
@@ -313,7 +313,7 @@ export function getTimeOffsetMillis(headerDate, requestTime, responseTime) {
 }
 
 export async function getOutlineTabData(courseId) {
-  const url = `${getConfig().LMS_BASE_URL}/api/course_home/outline/${courseId}`;
+  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/outline/${courseId}`;
   let { tabData } = {};
   let requestTime = Date.now();
   let responseTime = requestTime;
@@ -354,6 +354,7 @@ export async function getOutlineTabData(courseId) {
   const userHasPassingGrade = data.user_has_passing_grade;
   const verifiedMode = camelCaseObject(data.verified_mode);
   const welcomeMessageHtml = data.welcome_message_html;
+  const shortLinkFeatureFlag = data.mfe_short_url_is_active;
 
   return {
     accessExpiration,
@@ -375,6 +376,7 @@ export async function getOutlineTabData(courseId) {
     userHasPassingGrade,
     verifiedMode,
     welcomeMessageHtml,
+    shortLinkFeatureFlag,
   };
 }
 
@@ -387,12 +389,12 @@ export async function postCourseDeadlines(courseId, model) {
 }
 
 export async function postCourseGoals(courseId, goalKey) {
-  const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_home/save_course_goal`);
+  const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_home/v1/save_course_goal`);
   return getAuthenticatedHttpClient().post(url.href, { course_id: courseId, goal_key: goalKey });
 }
 
 export async function postDismissWelcomeMessage(courseId) {
-  const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_home/dismiss_welcome_message`);
+  const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_home/v1/dismiss_welcome_message`);
   await getAuthenticatedHttpClient().post(url.href, { course_id: courseId });
 }
 
@@ -408,9 +410,3 @@ export async function executePostFromPostEvent(postData, researchEventData) {
     research_event_data: researchEventData,
   });
 }
-
-export async function unsubscribeFromCourseGoal(token) {
-  const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_home/unsubscribe_from_course_goal/${token}`);
-  return getAuthenticatedHttpClient().post(url.href)
-    .then(res => camelCaseObject(res));
-}

src/course-home/data/pact-tests/lmsPact.test.jsx

@@ -1,223 +0,0 @@
-import { Pact, Matchers } from '@pact-foundation/pact';
-import path from 'path';
-import { mergeConfig, getConfig } from '@edx/frontend-platform';
-
-import {
-  getCourseHomeCourseMetadata,
-  getDatesTabData,
-} from '../api';
-
-import { initializeMockApp } from '../../../setupTest';
-import {
-  courseId, dateRegex, opaqueKeysRegex, dateTypeRegex,
-} from '../../../pacts/constants';
-
-const {
-  somethingLike: like, term, boolean, string, eachLike,
-} = Matchers;
-const provider = new Pact({
-  consumer: 'frontend-app-learning',
-  provider: 'lms',
-  log: path.resolve(process.cwd(), 'src/course-home/data/pact-tests/logs', 'pact.log'),
-  dir: path.resolve(process.cwd(), 'src/pacts'),
-  pactfileWriteMode: 'merge',
-  logLevel: 'DEBUG',
-  cors: true,
-});
-
-describe('Course Home Service', () => {
-  beforeAll(async () => {
-    initializeMockApp();
-    await provider
-      .setup()
-      .then((options) => mergeConfig({
-        LMS_BASE_URL: `http://localhost:${options.port}`,
-      }, 'Custom app config for pact tests'));
-  });
-
-  afterEach(() => provider.verify());
-  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`,
-            }),
-            can_load_courseware: boolean(true),
-            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'),
-          },
-        },
-      });
-      const normalizedTabData = {
-        canShowUpgradeSock: false,
-        verifiedMode: {
-          accessExpirationDate: null,
-          currency: 'USD',
-          currencySymbol: '$',
-          price: 149,
-          sku: '8CF08E5',
-          upgradeUrl: `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=8CF08E5`,
-        },
-        canLoadCourseware: true,
-        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);
-      expect(response).toBeTruthy();
-      expect(response).toEqual(normalizedTabData);
-    });
-  });
-
-  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,
-              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: '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);
-    });
-  });
-});

src/course-home/data/redux.test.js

@@ -18,7 +18,7 @@ const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
 describe('Data layer integration tests', () => {
   const courseHomeMetadata = Factory.build('courseHomeMetadata');
   const { id: courseId } = courseHomeMetadata;
-  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/course_metadata/${courseId}`;
+  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
   courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
 
   let store;
@@ -31,7 +31,7 @@ describe('Data layer integration tests', () => {
   });
 
   describe('Test fetchDatesTab', () => {
-    const datesBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/dates`;
+    const datesBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/dates`;
 
     it('Should fail to fetch if error occurs', async () => {
       axiosMock.onGet(courseMetadataUrl).networkError();
@@ -60,7 +60,7 @@ describe('Data layer integration tests', () => {
   });
 
   describe('Test fetchOutlineTab', () => {
-    const outlineBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/outline`;
+    const outlineBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/outline`;
 
     it('Should result in fetch failure if error occurs', async () => {
       axiosMock.onGet(courseMetadataUrl).networkError();
@@ -89,7 +89,7 @@ describe('Data layer integration tests', () => {
   });
 
   describe('Test fetchProgressTab', () => {
-    const progressBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/progress`;
+    const progressBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress`;
 
     it('Should result in fetch failure if error occurs', async () => {
       axiosMock.onGet(courseMetadataUrl).networkError();
@@ -133,7 +133,7 @@ describe('Data layer integration tests', () => {
 
   describe('Test saveCourseGoal', () => {
     it('Should save course goal', async () => {
-      const goalUrl = `${getConfig().LMS_BASE_URL}/api/course_home/save_course_goal`;
+      const goalUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/save_course_goal`;
       axiosMock.onPost(goalUrl).reply(200, {});
 
       await thunks.saveCourseGoal(courseId, 'unsure');
@@ -164,7 +164,7 @@ describe('Data layer integration tests', () => {
 
   describe('Test dismissWelcomeMessage', () => {
     it('Should dismiss welcome message', async () => {
-      const dismissUrl = `${getConfig().LMS_BASE_URL}/api/course_home/dismiss_welcome_message`;
+      const dismissUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/dismiss_welcome_message`;
       axiosMock.onPost(dismissUrl).reply(201);
 
       await executeThunk(thunks.dismissWelcomeMessage(courseId), store.dispatch);

src/course-home/dates-tab/DatesTab.test.jsx

@@ -32,7 +32,7 @@ describe('DatesTab', () => {
     component = (
       <AppProvider store={store}>
         <UserMessagesProvider>
-          <Route path="/course/:courseId/dates">
+          <Route path="/c/:courseId/dates">
             <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
               <DatesTab />
             </TabContainer>
@@ -43,11 +43,11 @@ describe('DatesTab', () => {
   });
 
   const datesTabData = Factory.build('datesTabData');
-  let courseMetadata = Factory.build('courseHomeMetadata', { user_timezone: 'America/New_York' });
+  let courseMetadata = Factory.build('courseHomeMetadata');
   const { id: courseId } = courseMetadata;
 
-  const datesUrl = `${getConfig().LMS_BASE_URL}/api/course_home/dates/${courseId}`;
-  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/course_metadata/${courseId}`;
+  const datesUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/dates/${courseId}`;
+  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
   courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
 
   function setMetadata(attributes, options) {
@@ -81,7 +81,7 @@ describe('DatesTab', () => {
     beforeEach(() => {
       axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
       axiosMock.onGet(datesUrl).reply(200, datesTabData);
-      history.push(`/course/${courseId}/dates`); // so tab can pull course id from url
+      history.push(`/c/${courseId}/dates`); // so tab can pull course id from url
 
       render(component);
     });
@@ -147,7 +147,7 @@ describe('DatesTab', () => {
   describe('Suggested schedule messaging', () => {
     beforeEach(() => {
       setMetadata({ is_self_paced: true, is_enrolled: true });
-      history.push(`/course/${courseId}/dates`);
+      history.push(`/c/${courseId}/dates`);
     });
 
     it('renders SuggestedScheduleHeader', async () => {
@@ -316,7 +316,7 @@ describe('DatesTab', () => {
 
     beforeEach(() => {
       axiosMock.onGet(datesUrl).reply(200, datesTabData);
-      history.push(`/course/${courseId}/dates`); // so tab can pull course id from url
+      history.push(`/c/${courseId}/dates`); // so tab can pull course id from url
     });
 
     it('redirects to course survey for a survey_required error code', async () => {

src/course-home/dates-tab/timeline/Day.jsx

@@ -29,10 +29,10 @@ function Day({
   const {
     courseId,
   } = useSelector(state => state.courseHome);
+
   const {
     userTimezone,
-  } = useModel('courseHomeMeta', courseId);
-
+  } = useModel('dates', courseId);
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
   const { color, badges } = getBadgeListAndColor(date, intl, null, items);

src/course-home/goal-unsubscribe/GoalUnsubscribe.jsx

@@ -1,52 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
-import { LearningHeader as Header } from '@edx/frontend-component-header';
-import PageLoading from '../../generic/PageLoading';
-import { unsubscribeFromCourseGoal } from '../data/api';
-
-import messages from './messages';
-import ResultPage from './ResultPage';
-
-function GoalUnsubscribe({ intl }) {
-  const { token } = useParams();
-  const [error, setError] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [data, setData] = useState({});
-
-  // We don't need to bother with redux for this simple page. We're not sharing state with other pages at all.
-  useEffect(() => {
-    unsubscribeFromCourseGoal(token)
-      .then(
-        (result) => {
-          setIsLoading(false);
-          setData(result.data);
-        },
-        () => {
-          setIsLoading(false);
-          setError(true);
-        },
-      );
-  }, []); // deps=[] to only run once
-
-  return (
-    <>
-      <Header showUserDropdown={false} />
-      <main id="main-content" className="container my-5 text-center">
-        {isLoading && (
-          <PageLoading srMessage={`${intl.formatMessage(messages.loading)}`} />
-        )}
-        {!isLoading && (
-          <ResultPage error={error} courseTitle={data.courseTitle} />
-        )}
-      </main>
-    </>
-  );
-}
-
-GoalUnsubscribe.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(GoalUnsubscribe);

src/course-home/goal-unsubscribe/GoalUnsubscribe.test.jsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import { Route } from 'react-router';
-import MockAdapter from 'axios-mock-adapter';
-import { getConfig, history } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { render, screen } from '@testing-library/react';
-
-import GoalUnsubscribe from './GoalUnsubscribe';
-import { act, initializeMockApp } from '../../setupTest';
-import initializeStore from '../../store';
-import { UserMessagesProvider } from '../../generic/user-messages';
-
-initializeMockApp();
-jest.mock('@edx/frontend-platform/analytics');
-
-describe('GoalUnsubscribe', () => {
-  let axiosMock;
-  let store;
-  let component;
-  const unsubscribeUrl = `${getConfig().LMS_BASE_URL}/api/course_home/unsubscribe_from_course_goal/TOKEN`;
-
-  beforeEach(() => {
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    store = initializeStore();
-    component = (
-      <AppProvider store={store}>
-        <UserMessagesProvider>
-          <Route path="/goal-unsubscribe/:token" component={GoalUnsubscribe} />
-        </UserMessagesProvider>
-      </AppProvider>
-    );
-    history.push('/goal-unsubscribe/TOKEN'); // so we can pull token from url
-  });
-
-  it('starts with a spinner', () => {
-    render(component);
-    expect(screen.getByRole('status')).toBeInTheDocument();
-  });
-
-  it('loads a real token', async () => {
-    const response = { course_title: 'My Sample Course' };
-    axiosMock.onPost(unsubscribeUrl).reply(200, response);
-    await act(async () => render(component));
-
-    expect(screen.getByText('You’ve unsubscribed from goal reminders')).toBeInTheDocument();
-    expect(screen.getByText(/your goal for My Sample Course/)).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'Go to dashboard' }))
-      .toHaveAttribute('href', 'http://localhost:18000/dashboard');
-  });
-
-  it('loads a bad token with an error page', async () => {
-    axiosMock.onPost(unsubscribeUrl).reply(404, {});
-    await act(async () => render(component));
-
-    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'Go to dashboard' }))
-      .toHaveAttribute('href', 'http://localhost:18000/dashboard');
-    expect(screen.getByRole('link', { name: 'contact support' }))
-      .toHaveAttribute('href', 'http://localhost:18000/contact');
-  });
-});

src/course-home/goal-unsubscribe/ResultPage.jsx

@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types';
-import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Hyperlink } from '@edx/paragon';
-
-import messages from './messages';
-import { ReactComponent as UnsubscribeIcon } from './unsubscribe.svg';
-
-function ResultPage({ courseTitle, error, intl }) {
-  const errorDescription = (
-    <FormattedMessage
-      id="learning.goals.unsubscribe.errorDescription"
-      defaultMessage="We were unable to unsubscribe you from goal reminder emails. Please try again later or {contactSupport} for help."
-      values={{
-        contactSupport: (
-          <Hyperlink
-            className="text-reset"
-            style={{ textDecoration: 'underline' }}
-            destination={`${getConfig().CONTACT_URL}`}
-          >
-            {intl.formatMessage(messages.contactSupport)}
-          </Hyperlink>
-        ),
-      }}
-    />
-  );
-
-  const header = error
-    ? intl.formatMessage(messages.errorHeader)
-    : intl.formatMessage(messages.header);
-  const description = error
-    ? errorDescription
-    : intl.formatMessage(messages.description, { courseTitle });
-
-  return (
-    <>
-      <UnsubscribeIcon className="text-primary" alt="" />
-      <div role="heading" aria-level="1" className="h2">{header}</div>
-      <div>{description}</div>
-      <Button variant="brand" href={`${getConfig().LMS_BASE_URL}/dashboard`} className="mt-4">
-        {intl.formatMessage(messages.goToDashboard)}
-      </Button>
-    </>
-  );
-}
-
-ResultPage.defaultProps = {
-  courseTitle: null,
-  error: false,
-};
-
-ResultPage.propTypes = {
-  courseTitle: PropTypes.string,
-  error: PropTypes.bool,
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(ResultPage);

src/course-home/goal-unsubscribe/index.jsx

@@ -1,3 +0,0 @@
-import GoalUnsubscribe from './GoalUnsubscribe';
-
-export default GoalUnsubscribe;

src/course-home/goal-unsubscribe/messages.js

@@ -1,30 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  contactSupport: {
-    id: 'learning.goals.unsubscribe.contact',
-    defaultMessage: 'contact support',
-  },
-  description: {
-    id: 'learning.goals.unsubscribe.description',
-    defaultMessage: 'You will no longer receive email reminders about your goal for {courseTitle}.',
-  },
-  errorHeader: {
-    id: 'learning.goals.unsubscribe.errorHeader',
-    defaultMessage: 'Something went wrong',
-  },
-  goToDashboard: {
-    id: 'learning.goals.unsubscribe.goToDashboard',
-    defaultMessage: 'Go to dashboard',
-  },
-  header: {
-    id: 'learning.goals.unsubscribe.header',
-    defaultMessage: 'You’ve unsubscribed from goal reminders',
-  },
-  loading: {
-    id: 'learning.goals.unsubscribe.loading',
-    defaultMessage: 'Unsubscribing…',
-  },
-});
-
-export default messages;

src/course-home/goal-unsubscribe/unsubscribe.svg

@@ -1,5 +0,0 @@
-<svg width="167" height="153" viewBox="0 0 167 153" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M140.25 25.5H12.75V127.5H140.25V25.5ZM127.5 46L76.5 77.875L25.5 46V38.25L76.5 70.125L127.5 38.25V46Z" fill="currentColor"/>
-<circle cx="134" cy="39" r="33" transform="rotate(-90 134 39)" fill="white"/>
-<path d="M134 11C118.544 11 106 23.544 106 39C106 54.456 118.544 67 134 67C149.456 67 162 54.456 162 39C162 23.544 149.456 11 134 11ZM134 61.4C121.624 61.4 111.6 51.376 111.6 39C111.6 33.82 113.364 29.06 116.332 25.28L147.72 56.668C143.94 59.636 139.18 61.4 134 61.4ZM151.668 52.72L120.28 21.332C124.06 18.364 128.82 16.6 134 16.6C146.376 16.6 156.4 26.624 156.4 39C156.4 44.18 154.636 48.94 151.668 52.72Z" fill="#D23228"/>
-</svg>

src/course-home/outline-tab/LmsHtmlFragment.jsx

@@ -13,7 +13,7 @@ export default function LmsHtmlFragment({
     <html>
       <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">
+        <link rel="stylesheet" href="/static/css/bootstrap/lms-main.css">
         <link rel="stylesheet" type="text/css" href="${getConfig().BASE_URL}/src/course-home/outline-tab/LmsHtmlFragment.css">
       </head>
       <body class="${className}">${html}</body>

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

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { Button, Toast } from '@edx/paragon';
@@ -18,10 +17,11 @@ import Section from './Section';
 import ShiftDatesAlert from '../suggested-schedule-messaging/ShiftDatesAlert';
 import UpdateGoalSelector from './widgets/UpdateGoalSelector';
 import UpgradeNotification from '../../generic/upgrade-notification/UpgradeNotification';
+import { useAccessExpirationAlertMasquerade } from '../../alerts/access-expiration-alert';
 import UpgradeToShiftDatesAlert from '../suggested-schedule-messaging/UpgradeToShiftDatesAlert';
 import useCertificateAvailableAlert from './alerts/certificate-status-alert';
 import useCourseEndAlert from './alerts/course-end-alert';
-import useCourseStartAlert from '../../alerts/course-start-alert';
+import useCourseStartAlert from './alerts/course-start-alert';
 import usePrivateCourseAlert from './alerts/private-course-alert';
 import useScheduledContentAlert from './alerts/scheduled-content-alert';
 import { useModel } from '../../generic/model-store';
@@ -42,7 +42,6 @@ function OutlineTab({ intl }) {
     org,
     title,
     username,
-    userTimezone,
   } = useModel('courseHomeMeta', courseId);
 
   const {
@@ -58,6 +57,7 @@ function OutlineTab({ intl }) {
     datesBannerInfo,
     datesWidget: {
       courseDateBlocks,
+      userTimezone,
     },
     resumeCourse: {
       hasVisitedCourse,
@@ -86,6 +86,7 @@ function OutlineTab({ intl }) {
   };
 
   // Below the course title alerts (appearing in the order listed here)
+  const accessExpirationAlertMasquerade = useAccessExpirationAlertMasquerade(accessExpiration, userTimezone, 'outline-course-alerts');
   const courseStartAlert = useCourseStartAlert(courseId);
   const courseEndAlert = useCourseEndAlert(courseId);
   const certificateAvailableAlert = useCertificateAvailableAlert(courseId);
@@ -106,19 +107,9 @@ function OutlineTab({ intl }) {
     });
   };
 
-  const isEnterpriseUser = () => {
-    const authenticatedUser = getAuthenticatedUser();
-    const userRoleNames = authenticatedUser ? authenticatedUser.roles.map(role => role.split(':')[0]) : [];
-
-    return userRoleNames.includes('enterprise_learner');
-  };
-
   /** [[MM-P2P] Experiment */
   const MMP2P = initHomeMMP2P(courseId);
 
-  /** show post enrolment survey to only B2C learners */
-  const learnerType = isEnterpriseUser() ? 'enterprise_learner' : 'b2c_learner';
-
   return (
     <>
       <Toast
@@ -128,7 +119,7 @@ function OutlineTab({ intl }) {
       >
         {goalToastHeader}
       </Toast>
-      <div data-learner-type={learnerType} className="row w-100 mx-0 my-3 justify-content-between">
+      <div className="row w-100 mx-0 my-3 justify-content-between">
         <div className="col-12 col-sm-auto p-0">
           <div role="heading" aria-level="1" className="h2">{title}</div>
         </div>
@@ -159,6 +150,7 @@ function OutlineTab({ intl }) {
               topic="outline-course-alerts"
               className="mb-3"
               customAlerts={{
+                ...accessExpirationAlertMasquerade,
                 ...certificateAvailableAlert,
                 ...courseEndAlert,
                 ...courseStartAlert,

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

@@ -16,7 +16,6 @@ import * as thunks from '../data/thunks';
 import initializeStore from '../../store';
 import { CERT_STATUS_TYPE } from './alerts/certificate-status-alert/CertificateStatusAlert';
 import OutlineTab from './OutlineTab';
-import LoadedTabPage from '../../tab-page/LoadedTabPage';
 
 initializeMockApp();
 jest.mock('@edx/frontend-platform/analytics');
@@ -25,12 +24,11 @@ describe('Outline Tab', () => {
   let axiosMock;
 
   const courseId = 'course-v1:edX+Test+run';
-  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/course_metadata/${courseId}`;
+  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
   courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
   const enrollmentUrl = `${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment`;
-  const goalUrl = `${getConfig().LMS_BASE_URL}/api/course_home/save_course_goal`;
-  const masqueradeUrl = `${getConfig().LMS_BASE_URL}/courses/${courseId}/masquerade`;
-  const outlineUrl = `${getConfig().LMS_BASE_URL}/api/course_home/outline/${courseId}`;
+  const goalUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/save_course_goal`;
+  const outlineUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/outline/${courseId}`;
   const proctoringInfoUrl = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}`;
 
   const store = initializeStore();
@@ -59,7 +57,6 @@ describe('Outline Tab', () => {
     axiosMock.onGet(courseMetadataUrl).reply(200, defaultMetadata);
     axiosMock.onPost(enrollmentUrl).reply(200, {});
     axiosMock.onPost(goalUrl).reply(200, { header: 'Success' });
-    axiosMock.onGet(masqueradeUrl).reply(200, { success: true });
     axiosMock.onGet(outlineUrl).reply(200, defaultTabData);
     axiosMock.onGet(proctoringInfoUrl).reply(200, {
       onboarding_status: 'created',
@@ -159,7 +156,7 @@ describe('Outline Tab', () => {
       await fetchAndRender();
 
       const sequenceLink = screen.getByText('Title of Sequence');
-      expect(sequenceLink.getAttribute('href')).toContain(`/course/${courseId}`);
+      expect(sequenceLink.getAttribute('href')).toContain(`/c/${courseId}`);
     });
   });
 
@@ -440,6 +437,35 @@ describe('Outline Tab', () => {
       await fetchAndRender();
       expect(screen.queryByRole('heading', { name: 'Course Tools' })).not.toBeInTheDocument();
     });
+
+    it('analytics sent when upgrade link clicked', async () => {
+      await fetchAndRender();
+      expect(screen.getByRole('heading', { name: 'Course Tools' })).toBeInTheDocument();
+      sendTrackEvent.mockClear();
+      sendTrackingLogEvent.mockClear();
+
+      const upgradeLink = screen.getByRole('link', { name: 'Upgrade to Verified' });
+      fireEvent.click(upgradeLink);
+
+      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        linkCategory: '(none)',
+        linkName: 'course_home_course_tools',
+        linkType: 'link',
+        pageName: 'course_home',
+      });
+
+      expect(sendTrackingLogEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackingLogEvent).toHaveBeenCalledWith('edx.course.tool.accessed', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        course_id: courseId,
+        is_staff: false,
+        tool_name: 'edx.tool.verified_upgrade',
+      });
+    });
   });
 
   describe('Alert List', () => {
@@ -495,35 +521,32 @@ describe('Outline Tab', () => {
     });
 
     describe('Access Expiration Alert', () => {
-      it('renders page banner on masquerade', async () => {
-        setMetadata({ is_enrolled: true, original_user_is_staff: true });
+      it('has special masquerade text', async () => {
         setTabData({
           access_expiration: {
             expiration_date: '2020-01-01T12:00:00Z',
             masquerading_expired_course: true,
+            upgrade_deadline: null,
+            upgrade_url: null,
           },
         });
-        await executeThunk(thunks.fetchOutlineTab(courseId), store.dispatch);
-        await act(async () => render(<LoadedTabPage courseId={courseId} activeTabSlug="outline">...</LoadedTabPage>, { store }));
-        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();
+        await fetchAndRender();
+        const check = await screen.queryByText('This learner does not have access to this course.', { exact: false });
+        expect(check).toBeInTheDocument();
       });
 
-      it('does not render banner when not masquerading', async () => {
-        setMetadata({ is_enrolled: true, original_user_is_staff: true });
+      it('does not have special masquerade text', async () => {
         setTabData({
           access_expiration: {
             expiration_date: '2020-01-01T12:00:00Z',
             masquerading_expired_course: false,
+            upgrade_deadline: null,
+            upgrade_url: null,
           },
         });
-        await executeThunk(thunks.fetchOutlineTab(courseId), store.dispatch);
-        await act(async () => render(<LoadedTabPage courseId={courseId} activeTabSlug="outline">...</LoadedTabPage>, { store }));
-        const instructorToolbar = await screen.getByTestId('instructor-toolbar');
-        expect(instructorToolbar).toBeInTheDocument();
-        expect(screen.queryByText('This learner no longer has access to this course. Their access expired on', { exact: false })).not.toBeInTheDocument();
+        await fetchAndRender();
+        const check = await screen.queryByText('This learner does not have access to this course.', { exact: false });
+        expect(check).not.toBeInTheDocument();
       });
     });
 
@@ -532,7 +555,16 @@ describe('Outline Tab', () => {
       it('appears several days out', async () => {
         const startDate = new Date();
         startDate.setDate(startDate.getDate() + 100);
-        setMetadata({ is_enrolled: true, start: '2999-01-01T00:00:00Z' });
+        setMetadata({ is_enrolled: true });
+        setTabData({}, {
+          date_blocks: [
+            {
+              date_type: 'course-start-date',
+              date: startDate.toISOString(),
+              title: 'Start',
+            },
+          ],
+        });
         await fetchAndRender();
         const node = await screen.findByText('Course starts', { exact: false });
         expect(node.textContent).toMatch(/.* on .*/); // several days away uses "on" before date
@@ -541,7 +573,16 @@ describe('Outline Tab', () => {
       it('appears today', async () => {
         const startDate = new Date();
         startDate.setHours(startDate.getHours() + 1);
-        setMetadata({ is_enrolled: true, start: startDate });
+        setMetadata({ is_enrolled: true });
+        setTabData({}, {
+          date_blocks: [
+            {
+              date_type: 'course-start-date',
+              date: startDate.toISOString(),
+              title: 'Start',
+            },
+          ],
+        });
         await fetchAndRender();
         const node = await screen.findByText('Course starts', { exact: false });
         expect(node.textContent).toMatch(/.* at .*/); // same day uses "at" before date

src/course-home/outline-tab/Section.jsx

@@ -28,6 +28,7 @@ function Section({
     courseBlocks: {
       sequences,
     },
+    shortLinkFeatureFlag,
   } = useModel('outline', courseId);
 
   const [open, setOpen] = useState(defaultOpen);
@@ -39,6 +40,28 @@ function Section({
   useEffect(() => {
     setOpen(defaultOpen);
   }, []);
+  let sequenceLinks;
+  if (shortLinkFeatureFlag) {
+    sequenceLinks = sequenceIds.map((sequenceId, index) => (
+      <SequenceLink
+        key={sequenceId}
+        id={sequences[sequenceId].hash_key}
+        courseId={courseId}
+        sequence={sequences[sequenceId]}
+        first={index === 0}
+      />
+    ));
+  } else {
+    sequenceLinks = sequenceIds.map((sequenceId, index) => (
+      <SequenceLink
+        key={sequenceId}
+        id={sequenceId}
+        courseId={courseId}
+        sequence={sequences[sequenceId]}
+        first={index === 0}
+      />
+    ));
+  }
 
   const sectionTitle = (
     <div className="row w-100 m-0">
@@ -96,15 +119,7 @@ function Section({
         )}
       >
         <ol className="list-unstyled">
-          {sequenceIds.map((sequenceId, index) => (
-            <SequenceLink
-              key={sequenceId}
-              id={sequenceId}
-              courseId={courseId}
-              sequence={sequences[sequenceId]}
-              first={index === 0}
-            />
-          ))}
+          {sequenceLinks}
         </ol>
       </Collapsible>
     </li>

src/course-home/outline-tab/SequenceLink.jsx

@@ -33,7 +33,9 @@ function SequenceLink({
     title,
   } = sequence;
   const {
-    userTimezone,
+    datesWidget: {
+      userTimezone,
+    },
   } = useModel('outline', courseId);
   const {
     canLoadCourseware,
@@ -44,7 +46,7 @@ function SequenceLink({
   // canLoadCourseware is true if the Courseware MFE is enabled, false otherwise
   const coursewareUrl = (
     canLoadCourseware
-      ? <Link to={`/course/${courseId}/${id}`}>{title}</Link>
+      ? <Link to={`/c/${courseId}/${id}`}>{title}</Link>
       : <Hyperlink destination={legacyWebUrl}>{title}</Hyperlink>
   );
   const displayTitle = showLink ? coursewareUrl : title;

src/course-home/outline-tab/alerts/certificate-status-alert/hooks.js

@@ -39,11 +39,11 @@ function useCertificateStatusAlert(courseId) {
   const {
     datesWidget: {
       courseDateBlocks,
+      userTimezone,
     },
     certData,
     hasEnded,
     userHasPassingGrade,
-    userTimezone,
     enrollmentMode,
   } = useModel('outline', courseId);
 

src/course-home/outline-tab/alerts/course-end-alert/hooks.js

@@ -15,8 +15,8 @@ export function useCourseEndAlert(courseId) {
   const {
     datesWidget: {
       courseDateBlocks,
+      userTimezone,
     },
-    userTimezone,
   } = useModel('outline', courseId);
 
   const endBlock = courseDateBlocks.find(b => b.dateType === 'course-end-date');

src/course-home/outline-tab/alerts/course-start-alert/CourseStartAlert.jsx

@@ -9,19 +9,13 @@ import {
 import { Alert } from '@edx/paragon';
 import { Info } from '@edx/paragon/icons';
 
-import { useModel } from '../../generic/model-store';
-
 const DAY_MS = 24 * 60 * 60 * 1000; // in ms
 
 function CourseStartAlert({ payload }) {
   const {
-    courseId,
-  } = payload;
-
-  const {
-    start: startDate,
+    startDate,
     userTimezone,
-  } = useModel('courseHomeMeta', courseId);
+  } = payload;
 
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
@@ -93,7 +87,8 @@ function CourseStartAlert({ payload }) {
 
 CourseStartAlert.propTypes = {
   payload: PropTypes.shape({
-    courseId: PropTypes.string,
+    startDate: PropTypes.string,
+    userTimezone: PropTypes.string,
   }).isRequired,
 };
 

src/course-home/outline-tab/alerts/course-start-alert/hooks.js

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react';
+import { useAlert } from '../../../../generic/user-messages';
+import { useModel } from '../../../../generic/model-store';
+
+const CourseStartAlert = React.lazy(() => import('./CourseStartAlert'));
+
+function useCourseStartAlert(courseId) {
+  const {
+    isEnrolled,
+  } = useModel('courseHomeMeta', courseId);
+  const {
+    datesWidget: {
+      courseDateBlocks,
+      userTimezone,
+    },
+  } = useModel('outline', courseId);
+
+  const startBlock = courseDateBlocks.find(b => b.dateType === 'course-start-date');
+  const delta = startBlock ? new Date(startBlock.date) - new Date() : 0;
+  const isVisible = isEnrolled && startBlock && delta > 0;
+  const payload = {
+    startDate: startBlock && startBlock.date,
+    userTimezone,
+  };
+
+  useAlert(isVisible, {
+    code: 'clientCourseStartAlert',
+    payload: useMemo(() => payload, Object.values(payload).sort()),
+    topic: 'outline-course-alerts',
+  });
+
+  return {
+    clientCourseStartAlert: CourseStartAlert,
+  };
+}
+
+export default useCourseStartAlert;

src/course-home/outline-tab/alerts/course-start-alert/index.js

@@ -0,0 +1 @@
+export { default } from './hooks';

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

@@ -216,10 +216,6 @@ const messages = defineMessages({
     id: 'learning.proctoringPanel.reviewRequirementsButton',
     defaultMessage: 'Review instructions and system requirements',
   },
-  proctoringOnboardingButtonPastDue: {
-    id: 'learning.proctoringPanel.onboardingButtonPastDue',
-    defaultMessage: 'Onboarding Past Due',
-  },
 });
 
 export default messages;

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

@@ -13,13 +13,11 @@ function CourseDates({
   /** [MM-P2P] Experiment */
   mmp2p,
 }) {
-  const {
-    userTimezone,
-  } = useModel('courseHomeMeta', courseId);
   const {
     datesWidget: {
       courseDateBlocks,
       datesTabLink,
+      userTimezone,
     },
   } = useModel('outline', courseId);
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
+import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -36,6 +36,16 @@ function CourseTools({ courseId, intl }) {
       is_staff: administrator,
       tool_name: analyticsId,
     });
+
+    if (analyticsId === 'edx.tool.verified_upgrade') {
+      sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
+        ...eventProperties,
+        linkCategory: '(none)',
+        linkName: 'course_home_course_tools',
+        linkType: 'link',
+        pageName: 'course_home',
+      });
+    }
   };
 
   const renderIcon = (iconClasses) => {

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

@@ -9,12 +9,10 @@ import messages from '../messages';
 import { getProctoringInfoData } from '../../data/api';
 
 function ProctoringInfoPanel({ courseId, username, intl }) {
-  const [link, setLink] = useState('');
-  const [onboardingPastDue, setOnboardingPastDue] = useState(false);
-  const [showInfoPanel, setShowInfoPanel] = useState(false);
   const [status, setStatus] = useState('');
-  const [readableStatus, setReadableStatus] = useState('');
+  const [link, setLink] = useState('');
   const [releaseDate, setReleaseDate] = useState(null);
+  const [readableStatus, setReadableStatus] = useState('');
 
   const readableStatuses = {
     notStarted: 'notStarted',
@@ -79,10 +77,6 @@ function ProctoringInfoPanel({ courseId, username, intl }) {
       .then(
         response => {
           if (response) {
-            if (Object.keys(response).length > 0) {
-              setShowInfoPanel(true);
-            }
-
             setStatus(response.onboarding_status);
             setLink(response.onboarding_link);
             const expirationDate = response.expiration_date;
@@ -92,54 +86,14 @@ function ProctoringInfoPanel({ courseId, username, intl }) {
               setReadableStatus(getReadableStatusClass(response.onboarding_status));
             }
             setReleaseDate(new Date(response.onboarding_release_date));
-            setOnboardingPastDue(response.onboarding_past_due);
           }
         },
       );
   }, []);
 
-  let onboardingExamButton = null;
-
-  if (isNotYetReleased(releaseDate)) {
-    onboardingExamButton = (
-      <Button variant="secondary" block disabled aria-disabled="true">
-        {intl.formatMessage(
-          messages.proctoringOnboardingButtonNotOpen,
-          {
-            releaseDate: intl.formatDate(releaseDate, {
-              day: 'numeric',
-              month: 'short',
-              year: 'numeric',
-            }),
-          },
-        )}
-      </Button>
-    );
-  } else if (onboardingPastDue) {
-    onboardingExamButton = (
-      <Button variant="secondary" block disabled aria-disabled="true">
-        {intl.formatMessage(messages.proctoringOnboardingButtonPastDue)}
-      </Button>
-    );
-  } else if (!isNotYetReleased(releaseDate)) {
-    if (readableStatus === readableStatuses.otherCourseApproved) {
-      onboardingExamButton = (
-        <Button variant="primary" block href={link}>
-          {intl.formatMessage(messages.proctoringOnboardingPracticeButton)}
-        </Button>
-      );
-    } else if (readableStatus !== readableStatuses.otherCourseApproved) {
-      onboardingExamButton = (
-        <Button variant="primary" block href={link}>
-          {intl.formatMessage(messages.proctoringOnboardingButton)}
-        </Button>
-      );
-    }
-  }
-
   return (
     <>
-      { showInfoPanel && (
+      { link && (
         <section className={`mb-4 p-3 outline-sidebar-proctoring-panel ${getBorderClass()}`}>
           <h2 className="h4" id="outline-sidebar-upgrade-header">{intl.formatMessage(messages.proctoringInfoPanel)}</h2>
           <div>
@@ -160,17 +114,50 @@ function ProctoringInfoPanel({ courseId, username, intl }) {
               <>
                 <p>
                   {isNotYetSubmitted(status) && (
-                    intl.formatMessage(messages.proctoringPanelGeneralInfo)
+                    <>
+                      {intl.formatMessage(messages.proctoringPanelGeneralInfo)}
+                    </>
                   )}
                   {!isNotYetSubmitted(status) && (
-                    intl.formatMessage(messages.proctoringPanelGeneralInfoSubmitted)
+                    <>
+                      {intl.formatMessage(messages.proctoringPanelGeneralInfoSubmitted)}
+                    </>
                   )}
                 </p>
                 <p>{intl.formatMessage(messages.proctoringPanelGeneralTime)}</p>
               </>
             )}
             {isNotYetSubmitted(status) && (
-              onboardingExamButton
+              <>
+                {!isNotYetReleased(releaseDate) && (
+                  <Button variant="primary" block href={link}>
+                    {readableStatus === readableStatuses.otherCourseApproved && (
+                      <>
+                        {intl.formatMessage(messages.proctoringOnboardingPracticeButton)}
+                      </>
+                    )}
+                    {readableStatus !== readableStatuses.otherCourseApproved && (
+                      <>
+                        {intl.formatMessage(messages.proctoringOnboardingButton)}
+                      </>
+                    )}
+                  </Button>
+                )}
+                {isNotYetReleased(releaseDate) && (
+                  <Button variant="secondary" block disabled aria-disabled="true">
+                    {intl.formatMessage(
+                      messages.proctoringOnboardingButtonNotOpen,
+                      {
+                        releaseDate: intl.formatDate(releaseDate, {
+                          day: 'numeric',
+                          month: 'short',
+                          year: 'numeric',
+                        }),
+                      },
+                    )}
+                  </Button>
+                )}
+              </>
             )}
             <Button variant="outline-primary" block href="https://support.edx.org/hc/en-us/sections/115004169247-Taking-Timed-and-Proctored-Exams">
               {intl.formatMessage(messages.proctoringReviewRequirementsButton)}

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

@@ -12,7 +12,6 @@ import { appendBrowserTimezoneToUrl, executeThunk } from '../../utils';
 import * as thunks from '../data/thunks';
 import initializeStore from '../../store';
 import ProgressTab from './ProgressTab';
-import LoadedTabPage from '../../tab-page/LoadedTabPage';
 
 initializeMockApp();
 jest.mock('@edx/frontend-platform/analytics');
@@ -21,10 +20,9 @@ describe('Progress Tab', () => {
   let axiosMock;
 
   const courseId = 'course-v1:edX+Test+run';
-  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/course_metadata/${courseId}`;
+  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
   courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
-  const progressUrl = new RegExp(`${getConfig().LMS_BASE_URL}/api/course_home/progress/*`);
-  const masqueradeUrl = `${getConfig().LMS_BASE_URL}/courses/${courseId}/masquerade`;
+  const progressUrl = new RegExp(`${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/*`);
 
   const store = initializeStore();
   const defaultMetadata = Factory.build('courseHomeMetadata', { id: courseId });
@@ -51,7 +49,6 @@ describe('Progress Tab', () => {
     // Set defaults for network requests
     axiosMock.onGet(courseMetadataUrl).reply(200, defaultMetadata);
     axiosMock.onGet(progressUrl).reply(200, defaultTabData);
-    axiosMock.onGet(masqueradeUrl).reply(200, { success: true });
 
     logUnhandledRequests(axiosMock);
   });
@@ -1189,64 +1186,6 @@ describe('Progress Tab', () => {
     });
   });
 
-  describe('Access expiration masquerade banner', () => {
-    it('renders banner when masquerading as a user', async () => {
-      setMetadata({ is_enrolled: true, original_user_is_staff: true });
-      setTabData({
-        access_expiration: {
-          expiration_date: '2020-01-01T12:00:00Z',
-          masquerading_expired_course: true,
-        },
-      });
-      await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
-      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();
-    });
-    it('does not render banner when not masquerading', async () => {
-      setMetadata({ is_enrolled: true, original_user_is_staff: true });
-      setTabData({
-        access_expiration: {
-          expiration_date: '2020-01-01T12:00:00Z',
-          masquerading_expired_course: false,
-        },
-      });
-      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();
-    });
-  });
-
-  describe('Course start masquerade banner', () => {
-    it('renders banner when masquerading as a user', async () => {
-      setMetadata({
-        is_enrolled: true,
-        original_user_is_staff: true,
-        is_staff: false,
-        start: '2999-01-01T00:00:00Z',
-      });
-      await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
-      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();
-    });
-    it('does not render banner when not masquerading', async () => {
-      setMetadata({
-        is_enrolled: true,
-        original_user_is_staff: true,
-        is_staff: true,
-        start: '2999-01-01T00:00:00Z',
-      });
-      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();
-    });
-  });
-
   describe('Viewing progress page of other students by changing url', () => {
     it('Changing the url changes the header', async () => {
       setMetadata({ is_enrolled: true });

src/course-home/progress-tab/certificate-status/CertificateStatus.jsx

@@ -130,7 +130,7 @@ function CertificateStatus({ intl }) {
           <FormattedMessage
             id="progress.certificateStatus.downloadableBody"
             defaultMessage="
-              Showcase your accomplishment on LinkedIn or your resumé today.
+              Showcase your accomplishment on LinkedIn or your resume today.
               You can download your certificate now and access it any time from your
               {dashboardLink} and {profileLink}."
             values={{ dashboardLink, profileLink }}

src/course-home/progress-tab/certificate-status/messages.js

@@ -47,7 +47,7 @@ const messages = defineMessages({
   },
   downloadableBody: {
     id: 'progress.certificateStatus.downloadableBody',
-    defaultMessage: 'Showcase your accomplishment on LinkedIn or your resumé today. You can download your certificate now and access it any time from your Dashboard and Profile.',
+    defaultMessage: 'Showcase your accomplishment on LinkedIn or your resume today. You can download your certificate now and access it any time from your Dashboard and Profile.',
   },
   downloadableButton: {
     id: 'progress.certificateStatus.downloadableButton',

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

@@ -2,9 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
-import {
-  getLocale, injectIntl, intlShape, isRtl,
-} from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@edx/paragon';
 
 import { useModel } from '../../../../generic/model-store';
@@ -25,14 +23,6 @@ function CurrentGradeTooltip({ intl, tooltipClassName }) {
 
   const currentGrade = Number((visiblePercent * 100).toFixed(0));
 
-  let currentGradeDirection = currentGrade < 50 ? '' : '-';
-
-  const isLocaleRtl = isRtl(getLocale());
-
-  if (isLocaleRtl) {
-    currentGradeDirection = currentGrade < 50 ? '-' : '';
-  }
-
   return (
     <>
       <OverlayTrigger
@@ -47,16 +37,16 @@ function CurrentGradeTooltip({ intl, tooltipClassName }) {
         )}
       >
         <g>
-          <circle cx={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`} cy="50%" r="8.5" fill="transparent" />
-          <rect className="grade-bar__divider" x={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`} style={{ transform: 'translateY(2.61em)' }} />
+          <circle cx={`${Math.min(...[currentGrade, 100])}%`} cy="50%" r="8.5" fill="transparent" />
+          <rect className="grade-bar__divider" x={`${Math.min(...[currentGrade, 100])}%`} style={{ transform: 'translateY(2.61em)' }} />
         </g>
       </OverlayTrigger>
       <text
         className="x-small"
         textAnchor={currentGrade < 50 ? 'start' : 'end'}
-        x={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`}
+        x={`${Math.min(...[currentGrade, 100])}%`}
         y="20px"
-        style={{ transform: `translateX(${currentGradeDirection}3.4em)` }}
+        style={{ transform: `translateX(${currentGrade < 50 ? '' : '-'}3.4em)` }}
       >
         {intl.formatMessage(messages.currentGradeLabel)}
       </text>

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

@@ -1,22 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  getLocale, injectIntl, intlShape, isRtl,
-} from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@edx/paragon';
 
 import messages from '../messages';
 
 function PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) {
-  const isLocaleRtl = isRtl(getLocale());
-
-  let passingGradeDirection = passingGrade < 50 ? '' : '-';
-
-  if (isLocaleRtl) {
-    passingGradeDirection = passingGrade < 50 ? '-' : '';
-  }
-
   return (
     <>
       <OverlayTrigger
@@ -31,17 +21,17 @@ function PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) {
         )}
       >
         <g>
-          <circle cx={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="8.5" fill="transparent" />
-          <circle className="grade-bar--passing" cx={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="4.5" />
+          <circle cx={`${passingGrade}%`} cy="50%" r="8.5" fill="transparent" />
+          <circle className="grade-bar--passing" cx={`${passingGrade}%`} cy="50%" r="4.5" />
         </g>
       </OverlayTrigger>
 
       <text
         className="x-small"
         textAnchor={passingGrade < 50 ? 'start' : 'end'}
-        x={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`}
+        x={`${passingGrade}%`}
         y="90px"
-        style={{ transform: `translateX(${passingGradeDirection}3.4em)` }}
+        style={{ transform: `translateX(${passingGrade < 50 ? '' : '-'}3.4em)` }}
       >
         {intl.formatMessage(messages.passingGradeLabel)}
       </text>

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

@@ -51,7 +51,7 @@ function DetailedGradesTable({ intl }) {
                 Header: `${intl.formatMessage(messages.score)}`,
                 accessor: 'score',
                 headerClassName: 'justify-content-end h5 mb-0',
-                cellClassName: 'align-top text-right small',
+                cellClassName: 'float-right text-right small',
               },
             ]}
           >

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

@@ -52,17 +52,7 @@ function SubsectionTitleCell({ intl, subsection }) {
           <Collapsible.Visible whenOpen><Icon src={ArrowDropUp} /></Collapsible.Visible>
         </Collapsible.Trigger>
         <span className="small d-inline ml-4 pl-1">
-          {gradesFeatureIsFullyLocked || subsection.learnerHasAccess ? ''
-            : (
-              <Icon
-                id={`detailedGradesBlockedIcon${subsection.blockKey}`}
-                aria-label={intl.formatMessage(messages.noAccessToSubsection, { displayName })}
-                className="mr-1 mt-1 d-inline-flex"
-                style={{ height: '1rem', width: '1rem' }}
-                src={Blocked}
-                data-testid="blocked-icon"
-              />
-            )}
+          {gradesFeatureIsFullyLocked || subsection.learnerHasAccess ? '' : <Icon id={`detailedGradesBlockedIcon${subsection.blockKey}`} aria-label={intl.formatMessage(messages.noAcessToSubsection, { displayName })} className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Blocked} data-testid="blocked-icon" />}
           {url ? (
             <a
               href={url}
@@ -78,7 +68,7 @@ function SubsectionTitleCell({ intl, subsection }) {
           )}
         </span>
       </Row>
-      <Collapsible.Body className="d-flex w-100">
+      <Collapsible.Body>
         <ProblemScoreDrawer problemScores={problemScores} subsection={subsection} />
       </Collapsible.Body>
     </Collapsible.Advanced>

src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx

@@ -18,28 +18,25 @@ function AssignmentTypeCell({
     gradesFeatureIsFullyLocked,
   } = useModel('progress', courseId);
 
-  const lockedIcon = locked ? <Icon id={`assignmentTypeBlockedIcon${assignmentType}`} aria-label={intl.formatMessage(messages.noAccessToAssignmentType, { assignmentType })} className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Blocked} data-testid="blocked-icon" /> : '';
+  const lockedIcon = locked ? <Icon id={`assignmentTypeBlockedIcon${assignmentType}`} aria-label={intl.formatMessage(messages.noAcessToAssignmentType, { assignmentType })} className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Blocked} data-testid="blocked-icon" /> : '';
 
   return (
-    <div className="d-flex small">
-      <div className="d-flex">{lockedIcon}</div>
-      <div>
-        {assignmentType}&nbsp;
-        {footnoteId && footnoteMarker && (
-          <sup>
-            <a
-              id={`${footnoteId}-ref`}
-              className="muted-link"
-              href={`#${footnoteId}-footnote`}
-              aria-describedby="grade-summary-footnote-label"
-              tabIndex={gradesFeatureIsFullyLocked ? '-1' : '0'}
-              aria-labelledby={`assignmentTypeBlockedIcon${assignmentType}`}
-            >
-              {footnoteMarker}
-            </a>
-          </sup>
-        )}
-      </div>
+    <div className="small">
+      <span className="d-inline-flex">{lockedIcon}{assignmentType}</span>
+      {footnoteId && footnoteMarker && (
+        <sup>
+          <a
+            id={`${footnoteId}-ref`}
+            className="muted-link"
+            href={`#${footnoteId}-footnote`}
+            aria-describedby="grade-summary-footnote-label"
+            tabIndex={gradesFeatureIsFullyLocked ? '-1' : '0'}
+            aria-labelledby={`assignmentTypeBlockedIcon${assignmentType}`}
+          >
+            {footnoteMarker}
+          </a>
+        </sup>
+      )}
     </div>
   );
 }

src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx

@@ -104,7 +104,7 @@ function GradeSummaryTable({ intl, setAllOfSomeAssignmentTypeIsLocked }) {
             Cell: ({ value }) => (
               <span className={value.locked ? 'greyed-out' : ''}>{value.weight}</span> // eslint-disable-line react/prop-types
             ),
-            cellClassName: 'text-right small',
+            cellClassName: 'float-right small',
           },
           {
             Header: `${intl.formatMessage(messages.grade)}`,
@@ -114,7 +114,7 @@ function GradeSummaryTable({ intl, setAllOfSomeAssignmentTypeIsLocked }) {
             Cell: ({ value }) => (
               <span className={value.locked ? 'greyed-out' : ''}>{value.grade}</span> // eslint-disable-line react/prop-types
             ),
-            cellClassName: 'text-right small',
+            cellClassName: 'float-right small',
           },
           {
             Header: `${intl.formatMessage(messages.weightedGrade)}`,
@@ -124,7 +124,7 @@ function GradeSummaryTable({ intl, setAllOfSomeAssignmentTypeIsLocked }) {
             Cell: ({ value }) => (
               <span className={value.locked ? 'greyed-out' : ''}>{value.weightedGrade}</span> // eslint-disable-line react/prop-types
             ),
-            cellClassName: 'text-right font-weight-bold small',
+            cellClassName: 'float-right font-weight-bold small',
           },
         ]}
       >

src/course-home/progress-tab/grades/messages.js

@@ -139,11 +139,11 @@ const messages = defineMessages({
     id: 'progress.weightedGradeSummary',
     defaultMessage: 'Your current weighted grade summary',
   },
-  noAccessToAssignmentType: {
+  noAcessToAssignmentType: {
     id: 'progress.noAcessToAssignmentType',
     defaultMessage: 'You do not have access to assignments of type {assignmentType}',
   },
-  noAccessToSubsection: {
+  noAcessToSubsection: {
     id: 'progress.noAcessToSubsection',
     defaultMessage: 'You do not have access to subsection {displayName}',
   },

src/course-tabs/messages.js

@@ -1,11 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  courseMaterial: {
-    id: 'learn.navigation.course.tabs.label',
-    defaultMessage: 'Course Material',
-    description: 'The accessible label for course tabs navigation',
-  },
-});
-
-export default messages;

src/courseware/CoursewareContainer.jsx

@@ -17,15 +17,21 @@ import { TabPage } from '../tab-page';
 import Course from './course';
 import { handleNextSectionCelebration } from './course/celebration';
 
+const checkUrlLength = memoize((shortLinkFeatureFlag, courseStatus, courseId, sequence, unitHashKey) => {
+  if (shortLinkFeatureFlag && courseStatus === 'loaded' && sequence && unitHashKey) {
+    history.replace(`/c/${courseId}/${sequence.hash_key}/${unitHashKey}`);
+  }
+});
+
 const checkResumeRedirect = memoize((courseStatus, courseId, sequenceId, firstSequenceId) => {
   if (courseStatus === 'loaded' && !sequenceId) {
     // Note that getResumeBlock is just an API call, not a redux thunk.
     getResumeBlock(courseId).then((data) => {
       // This is a replace because we don't want this change saved in the browser's history.
       if (data.sectionId && data.unitId) {
-        history.replace(`/course/${courseId}/${data.sectionId}/${data.unitId}`);
+        history.replace(`/c/${courseId}/${data.sectionId}/${data.unitId}`);
       } else if (firstSequenceId) {
-        history.replace(`/course/${courseId}/${firstSequenceId}`);
+        history.replace(`/c/${courseId}/${firstSequenceId}`);
       }
     });
   }
@@ -33,7 +39,7 @@ const checkResumeRedirect = memoize((courseStatus, courseId, sequenceId, firstSe
 
 const checkSectionUnitToUnitRedirect = memoize((courseStatus, courseId, sequenceStatus, section, unitId) => {
   if (courseStatus === 'loaded' && sequenceStatus === 'failed' && section && unitId) {
-    history.replace(`/course/${courseId}/${unitId}`);
+    history.replace(`/c/${courseId}/${unitId}`);
   }
 });
 
@@ -41,10 +47,10 @@ const checkSectionToSequenceRedirect = memoize((courseStatus, courseId, sequence
   if (courseStatus === 'loaded' && sequenceStatus === 'failed' && section && !unitId) {
     // If the section is non-empty, redirect to its first sequence.
     if (section.sequenceIds && section.sequenceIds[0]) {
-      history.replace(`/course/${courseId}/${section.sequenceIds[0]}`);
+      history.replace(`/c/${courseId}/${section.sequenceIds[0]}`);
     // Otherwise, just go to the course root, letting the resume redirect take care of things.
     } else {
-      history.replace(`/course/${courseId}`);
+      history.replace(`/c/${courseId}`);
     }
   }
 });
@@ -53,7 +59,17 @@ const checkUnitToSequenceUnitRedirect = memoize((courseStatus, courseId, sequenc
   if (courseStatus === 'loaded' && sequenceStatus === 'failed' && unit) {
     // If the sequence failed to load as a sequence, but it *did* load as a unit, then
     // insert the unit's parent sequenceId into the URL.
-    history.replace(`/course/${courseId}/${unit.sequenceId}/${unit.id}`);
+    history.replace(`/c/${courseId}/${unit.sequenceId}/${unit.id}`);
+  }
+});
+
+const checkSpecialExamRedirect = memoize((sequenceStatus, sequence, specialExamsEnabled, proctoredExamsEnabled) => {
+  if (sequenceStatus === 'loaded') {
+    const shouldRedirectTimeLimited = sequence.isTimeLimited && !specialExamsEnabled;
+    const shouldRedirectProctored = sequence.isProctored && !proctoredExamsEnabled;
+    if ((shouldRedirectTimeLimited || shouldRedirectProctored) && sequence.legacyWebUrl !== undefined) {
+      global.location.assign(sequence.legacyWebUrl);
+    }
   }
 });
 
@@ -62,7 +78,7 @@ const checkSequenceToSequenceUnitRedirect = memoize((courseId, sequenceStatus, s
     if (sequence.unitIds !== undefined && sequence.unitIds.length > 0) {
       const nextUnitId = sequence.unitIds[sequence.activeUnitIndex];
       // This is a replace because we don't want this change saved in the browser's history.
-      history.replace(`/course/${courseId}/${sequence.id}/${nextUnitId}`);
+      history.replace(`/c/${courseId}/${sequence.id}/${nextUnitId}`);
     }
   }
 });
@@ -96,13 +112,13 @@ class CoursewareContainer extends Component {
       match: {
         params: {
           courseId: routeCourseId,
-          sequenceId: routeSequenceId,
+          sequenceId: routeSequenceHash,
         },
       },
     } = this.props;
     // Load data whenever the course or sequence ID changes.
     this.checkFetchCourse(routeCourseId);
-    this.checkFetchSequence(routeSequenceId);
+    this.checkFetchSequence(routeSequenceHash);
   }
 
   componentDidUpdate() {
@@ -111,22 +127,34 @@ class CoursewareContainer extends Component {
       sequenceId,
       courseStatus,
       sequenceStatus,
+      specialExamsEnabledWaffleFlag,
+      proctoredExamsEnabledWaffleFlag,
       sequence,
       firstSequenceId,
       unitViaSequenceId,
       sectionViaSequenceId,
+      unitIdHashKeyMap,
+      shortLinkFeatureFlag,
       match: {
         params: {
           courseId: routeCourseId,
-          sequenceId: routeSequenceId,
+          sequenceId: routeSequenceHash,
           unitId: routeUnitId,
         },
       },
     } = this.props;
-
     // Load data whenever the course or sequence ID changes.
     this.checkFetchCourse(routeCourseId);
-    this.checkFetchSequence(routeSequenceId);
+    this.checkFetchSequence(routeSequenceHash);
+    if (sequence && routeSequenceHash.includes('block') && unitIdHashKeyMap) {
+      let unitHashKey;
+      Object.values(unitIdHashKeyMap).forEach(id => {
+        if (id === routeUnitId) {
+          unitHashKey = Object.keys(unitIdHashKeyMap).find(key => unitIdHashKeyMap[key] === id);
+        }
+      });
+      checkUrlLength(shortLinkFeatureFlag, courseStatus, courseId, sequence, unitHashKey);
+    }
 
     // All courseware URLs should normalize to the format /course/:courseId/:sequenceId/:unitId
     // via the series of redirection rules below.
@@ -163,6 +191,11 @@ class CoursewareContainer extends Component {
     // by filling in the ID of the parent sequence of :unitId.
     checkUnitToSequenceUnitRedirect(courseStatus, courseId, sequenceStatus, unitViaSequenceId);
 
+    // Check special exam redirect:
+    //    /course/:courseId/:sequenceId(/:unitId) -> :legacyWebUrl
+    // because special exams are currently still served in the legacy LMS frontend.
+    checkSpecialExamRedirect(sequenceStatus, sequence, specialExamsEnabledWaffleFlag, proctoredExamsEnabledWaffleFlag);
+
     // Check to sequence to sequence-unit redirect:
     //    /course/:courseId/:sequenceId -> /course/:courseId/:sequenceId/:unitId
     // by filling in the ID the most-recently-active unit in the sequence, OR
@@ -184,7 +217,7 @@ class CoursewareContainer extends Component {
     } = this.props;
 
     this.props.checkBlockCompletion(courseId, sequenceId, routeUnitId);
-    history.push(`/course/${courseId}/${sequenceId}/${nextUnitId}`);
+    history.push(`/c/${courseId}/${sequenceId}/${nextUnitId}`);
   }
 
   handleNextSequenceClick = () => {
@@ -194,16 +227,20 @@ class CoursewareContainer extends Component {
       nextSequence,
       sequence,
       sequenceId,
+      shortLinkFeatureFlag,
     } = this.props;
-
     if (nextSequence !== null) {
+      let nextSequenceParam = nextSequence.id;
+      if (shortLinkFeatureFlag) {
+        nextSequenceParam = nextSequence.hash_key;
+      }
       let nextUnitId = null;
       if (nextSequence.unitIds.length > 0) {
         [nextUnitId] = nextSequence.unitIds;
-        history.push(`/course/${courseId}/${nextSequence.id}/${nextUnitId}`);
+        history.push(`/c/${courseId}/${nextSequenceParam}/${nextUnitId}`);
       } else {
         // Some sequences have no units.  This will show a blank page with prev/next buttons.
-        history.push(`/course/${courseId}/${nextSequence.id}`);
+        history.push(`/c/${courseId}/${nextSequenceParam}`);
       }
 
       const celebrateFirstSection = course && course.celebrations && course.celebrations.firstSection;
@@ -214,14 +251,22 @@ class CoursewareContainer extends Component {
   }
 
   handlePreviousSequenceClick = () => {
-    const { previousSequence, courseId } = this.props;
+    const {
+      previousSequence,
+      courseId,
+      shortLinkFeatureFlag,
+    } = this.props;
     if (previousSequence !== null) {
+      let previousSequenceParam = previousSequence.id;
+      if (shortLinkFeatureFlag) {
+        previousSequenceParam = previousSequence.hash_key;
+      }
       if (previousSequence.unitIds.length > 0) {
         const previousUnitId = previousSequence.unitIds[previousSequence.unitIds.length - 1];
-        history.push(`/course/${courseId}/${previousSequence.id}/${previousUnitId}`);
+        history.push(`/c/${courseId}/${previousSequenceParam}/${previousUnitId}`);
       } else {
         // Some sequences have no units.  This will show a blank page with prev/next buttons.
-        history.push(`/course/${courseId}/${previousSequence.id}`);
+        history.push(`/c/${courseId}/${previousSequenceParam}`);
       }
     }
   }
@@ -231,6 +276,9 @@ class CoursewareContainer extends Component {
       courseStatus,
       courseId,
       sequenceId,
+      sequence,
+      shortLinkFeatureFlag,
+      unitIdHashKeyMap,
       match: {
         params: {
           unitId: routeUnitId,
@@ -238,18 +286,30 @@ class CoursewareContainer extends Component {
       },
     } = this.props;
 
+    // This helps process old URLS that still use a blocks usage key in the URL.
+    let updatedSequenceId;
+    let updatedUnitId;
+    if (shortLinkFeatureFlag && sequence) {
+      if (!sequenceId.includes('block')) {
+        updatedSequenceId = sequence.id;
+      }
+      if (routeUnitId && !routeUnitId.includes('block')) {
+        updatedUnitId = unitIdHashKeyMap[routeUnitId];
+      }
+    }
+
     return (
       <TabPage
         activeTabSlug="courseware"
         courseId={courseId}
-        unitId={routeUnitId}
+        unitId={updatedUnitId || routeUnitId}
         courseStatus={courseStatus}
         metadataModel="coursewareMeta"
       >
         <Course
           courseId={courseId}
-          sequenceId={sequenceId}
-          unitId={routeUnitId}
+          sequenceId={updatedSequenceId || sequenceId}
+          unitId={updatedUnitId || routeUnitId}
           nextSequenceHandler={this.handleNextSequenceClick}
           previousSequenceHandler={this.handlePreviousSequenceClick}
           unitNavigationHandler={this.handleUnitNavigationClick}
@@ -268,6 +328,7 @@ const sequenceShape = PropTypes.shape({
   id: PropTypes.string.isRequired,
   unitIds: PropTypes.arrayOf(PropTypes.string).isRequired,
   sectionId: PropTypes.string.isRequired,
+  hash_key: PropTypes.string.isRequired,
   isTimeLimited: PropTypes.bool,
   isProctored: PropTypes.bool,
   legacyWebUrl: PropTypes.string,
@@ -301,12 +362,16 @@ CoursewareContainer.propTypes = {
   previousSequence: sequenceShape,
   unitViaSequenceId: unitShape,
   sectionViaSequenceId: sectionShape,
+  unitIdHashKeyMap: unitShape,
   course: courseShape,
   sequence: sequenceShape,
   saveSequencePosition: PropTypes.func.isRequired,
   checkBlockCompletion: PropTypes.func.isRequired,
   fetchCourse: PropTypes.func.isRequired,
   fetchSequence: PropTypes.func.isRequired,
+  specialExamsEnabledWaffleFlag: PropTypes.bool.isRequired,
+  proctoredExamsEnabledWaffleFlag: PropTypes.bool.isRequired,
+  shortLinkFeatureFlag: PropTypes.bool.isRequired,
 };
 
 CoursewareContainer.defaultProps = {
@@ -319,6 +384,7 @@ CoursewareContainer.defaultProps = {
   sectionViaSequenceId: null,
   course: null,
   sequence: null,
+  unitIdHashKeyMap: null,
 };
 
 const currentCourseSelector = createSelector(
@@ -330,7 +396,16 @@ const currentCourseSelector = createSelector(
 const currentSequenceSelector = createSelector(
   (state) => state.models.sequences || {},
   (state) => state.courseware.sequenceId,
-  (sequencesById, sequenceId) => (sequencesById[sequenceId] ? sequencesById[sequenceId] : null),
+  (state) => state.models.sequenceIdToHashKeyMap,
+  (sequencesById, sequenceId, sequenceMap) => {
+    if (!sequencesById[sequenceId] && Object.keys(sequencesById).length > 0 && sequenceMap) {
+      if (sequenceId in sequenceMap) {
+        const updatedSequenceId = sequenceMap[sequenceId];
+        return sequencesById[updatedSequenceId];
+      }
+    }
+    return sequencesById[sequenceId] ? sequencesById[sequenceId] : null;
+  },
 );
 
 const sequenceIdsSelector = createSelector(
@@ -350,11 +425,18 @@ const previousSequenceSelector = createSelector(
   sequenceIdsSelector,
   (state) => state.models.sequences || {},
   (state) => state.courseware.sequenceId,
-  (sequenceIds, sequencesById, sequenceId) => {
+  (state) => state.models.sequenceIdToHashKeyMap,
+  (sequenceIds, sequencesById, sequenceId, sequenceMap) => {
     if (!sequenceId || sequenceIds.length === 0) {
       return null;
     }
-    const sequenceIndex = sequenceIds.indexOf(sequenceId);
+    let sequenceIndex = sequenceIds.indexOf(sequenceId);
+    if (!sequencesById[sequenceId] && Object.keys(sequencesById).length > 0 && sequenceMap) {
+      if (sequenceId in sequenceMap) {
+        const updatedSequenceId = sequenceMap[sequenceId];
+        sequenceIndex = sequenceIds.indexOf(updatedSequenceId);
+      }
+    }
     const previousSequenceId = sequenceIndex > 0 ? sequenceIds[sequenceIndex - 1] : null;
     return previousSequenceId !== null ? sequencesById[previousSequenceId] : null;
   },
@@ -364,11 +446,18 @@ const nextSequenceSelector = createSelector(
   sequenceIdsSelector,
   (state) => state.models.sequences || {},
   (state) => state.courseware.sequenceId,
-  (sequenceIds, sequencesById, sequenceId) => {
+  (state) => state.models.sequenceIdToHashKeyMap,
+  (sequenceIds, sequencesById, sequenceId, sequenceMap) => {
     if (!sequenceId || sequenceIds.length === 0) {
       return null;
     }
-    const sequenceIndex = sequenceIds.indexOf(sequenceId);
+    let sequenceIndex = sequenceIds.indexOf(sequenceId);
+    if (!sequencesById[sequenceId] && Object.keys(sequencesById).length > 0 && sequenceMap) {
+      if (sequenceId in sequenceMap) {
+        const updatedSequenceId = sequenceMap[sequenceId];
+        sequenceIndex = sequenceIds.indexOf(updatedSequenceId);
+      }
+    }
     const nextSequenceId = sequenceIndex < sequenceIds.length - 1 ? sequenceIds[sequenceIndex + 1] : null;
     return nextSequenceId !== null ? sequencesById[nextSequenceId] : null;
   },
@@ -401,7 +490,21 @@ const sectionViaSequenceIdSelector = createSelector(
 const unitViaSequenceIdSelector = createSelector(
   (state) => state.models.units || {},
   (state) => state.courseware.sequenceId,
-  (unitsById, sequenceId) => (unitsById[sequenceId] ? unitsById[sequenceId] : null),
+  (state) => state.models.unitIdHashKeyMap,
+  (unitsById, sequenceId, unitMap) => {
+    if (!unitsById[sequenceId] && Object.keys(unitsById).length > 0 && unitMap) {
+      if (sequenceId in unitMap) {
+        const updatedSequenceId = unitMap[sequenceId];
+        return unitsById[updatedSequenceId];
+      }
+    }
+    return unitsById[sequenceId] ? unitsById[sequenceId] : null;
+  },
+);
+
+const unitIdHashKeyMapSelector = createSelector(
+  (state) => state.models.unitIdToHashKeyMap,
+  (unitIdToHashKeyMap) => (unitIdToHashKeyMap),
 );
 
 const mapStateToProps = (state) => {
@@ -410,6 +513,9 @@ const mapStateToProps = (state) => {
     sequenceId,
     courseStatus,
     sequenceStatus,
+    specialExamsEnabledWaffleFlag,
+    proctoredExamsEnabledWaffleFlag,
+    shortLinkFeatureFlag,
   } = state.courseware;
 
   return {
@@ -417,6 +523,9 @@ const mapStateToProps = (state) => {
     sequenceId,
     courseStatus,
     sequenceStatus,
+    specialExamsEnabledWaffleFlag,
+    proctoredExamsEnabledWaffleFlag,
+    shortLinkFeatureFlag,
     course: currentCourseSelector(state),
     sequence: currentSequenceSelector(state),
     previousSequence: previousSequenceSelector(state),
@@ -424,6 +533,7 @@ const mapStateToProps = (state) => {
     firstSequenceId: firstSequenceIdSelector(state),
     sectionViaSequenceId: sectionViaSequenceIdSelector(state),
     unitViaSequenceId: unitViaSequenceIdSelector(state),
+    unitIdHashKeyMap: unitIdHashKeyMapSelector(state),
   };
 };
 

src/courseware/CoursewareContainer.test.jsx

@@ -85,9 +85,9 @@ describe('CoursewareContainer', () => {
           <Switch>
             <Route
               path={[
-                '/course/:courseId/:sequenceId/:unitId',
-                '/course/:courseId/:sequenceId',
-                '/course/:courseId',
+                '/c/:courseId/:sequenceId/:unitId',
+                '/c/:courseId/:sequenceId',
+                '/c/:courseId',
               ]}
               component={CoursewareContainer}
             />
@@ -128,8 +128,10 @@ describe('CoursewareContainer', () => {
     axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
 
     sequenceMetadatas.forEach(sequenceMetadata => {
-      const sequenceMetadataUrl = `${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceMetadata.item_id}`;
+      const sequenceMetadataUrl = `${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceMetadata.hash_key}`;
       axiosMock.onGet(sequenceMetadataUrl).reply(200, sequenceMetadata);
+      const sequenceMetadataUrlFull = `${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceMetadata.item_id}`;
+      axiosMock.onGet(sequenceMetadataUrlFull).reply(200, sequenceMetadata);
       const proctoredExamApiUrl = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/proctored_exam/attempt/course_id/${courseId}/content_id/${sequenceMetadata.item_id}?is_learning_mfe=true`;
       axiosMock.onGet(proctoredExamApiUrl).reply(200, { exam: {}, active_attempt: {} });
     });
@@ -144,7 +146,7 @@ describe('CoursewareContainer', () => {
   }
 
   it('should initialize to show a spinner', () => {
-    history.push('/course/abc123');
+    history.push('/c/abc123');
     render(component);
 
     const spinner = screen.getByRole('status');
@@ -159,7 +161,7 @@ describe('CoursewareContainer', () => {
     const courseId = defaultCourseId;
 
     function assertLoadedHeader(container) {
-      const courseHeader = container.querySelector('.learning-header');
+      const courseHeader = container.querySelector('.course-header');
       // Ensure the course number and org appear - this proves we loaded course metadata properly.
       expect(courseHeader).toHaveTextContent(courseMetadata.number);
       expect(courseHeader).toHaveTextContent(courseMetadata.org);
@@ -190,11 +192,11 @@ describe('CoursewareContainer', () => {
 
       it('should use the resume block repsonse to pick a unit if it contains one', async () => {
         axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {
-          sectionId: sequenceBlock.id,
-          unitId: unitBlocks[1].id,
+          sectionId: sequenceBlock.hash_key,
+          unitId: unitBlocks[1].hash_key,
         });
 
-        history.push(`/course/${courseId}`);
+        history.push(`/c/${courseId}`);
         const container = await loadContainer();
 
         assertLoadedHeader(container);
@@ -202,7 +204,7 @@ describe('CoursewareContainer', () => {
 
         expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
         expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
-        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[1].id);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[1].hash_key);
       });
 
       it('should use the first sequence ID and activeUnitIndex if the resume block response is empty', async () => {
@@ -217,7 +219,7 @@ describe('CoursewareContainer', () => {
         // Note how there is no sectionId/unitId returned in this mock response!
         axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {});
 
-        history.push(`/course/${courseId}`);
+        history.push(`/c/${courseId}`);
         const container = await loadContainer();
 
         assertLoadedHeader(container);
@@ -237,11 +239,11 @@ describe('CoursewareContainer', () => {
       );
 
       function setUrl(urlSequenceId, urlUnitId = null) {
-        history.push(`/course/${courseId}/${urlSequenceId}/${urlUnitId || ''}`);
+        history.push(`/c/${courseId}/${urlSequenceId}/${urlUnitId || ''}`);
       }
 
       function assertLocation(container, sequenceId, unitId) {
-        const expectedUrl = `http://localhost/course/${courseId}/${sequenceId}/${unitId}`;
+        const expectedUrl = `http://localhost/c/${courseId}/${sequenceId}/${unitId}`;
         expect(global.location.href).toEqual(expectedUrl);
         expect(container.querySelector('.fake-unit')).toHaveTextContent(unitId);
       }
@@ -257,7 +259,7 @@ describe('CoursewareContainer', () => {
           const container = await loadContainer();
           assertLoadedHeader(container);
           assertSequenceNavigation(container, 2);
-          assertLocation(container, sequenceTree[1][1].id, urlUnit.id);
+          assertLocation(container, sequenceTree[1][1].hash_key, urlUnit.hash_key);
         });
       });
 
@@ -267,7 +269,7 @@ describe('CoursewareContainer', () => {
           const container = await loadContainer();
           assertLoadedHeader(container);
           assertSequenceNavigation(container, 2);
-          assertLocation(container, sequenceTree[1][0].id, unitTree[1][0][0].id);
+          assertLocation(container, sequenceTree[1][0].hash_key, unitTree[1][0][0].hash_key);
         });
       });
 
@@ -293,14 +295,14 @@ describe('CoursewareContainer', () => {
         it('should ignore the section ID and instead redirect to the course root', async () => {
           setUrl(sectionTree[1].id);
           await loadContainer();
-          expect(global.location.href).toEqual(`http://localhost/course/${courseId}`);
+          expect(global.location.href).toEqual(`http://localhost/c/${courseId}`);
         });
 
         it('should ignore the section and unit IDs and instead to the course root', async () => {
           // Specific unit ID used here shouldn't matter; is ignored due to empty section.
           setUrl(sectionTree[1].id, unitTree[0][0][0]);
           await loadContainer();
-          expect(global.location.href).toEqual(`http://localhost/course/${courseId}`);
+          expect(global.location.href).toEqual(`http://localhost/c/${courseId}`);
         });
       });
     });
@@ -314,15 +316,15 @@ describe('CoursewareContainer', () => {
 
       it('should insert the sequence ID into the URL', async () => {
         const unit = unitTree[1][0][1];
-        history.push(`/course/${courseId}/${unit.id}`);
+        history.push(`/c/${courseId}/${unit.id}`);
         const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container, 2);
-        const expectedSequenceId = sequenceTree[1][0].id;
-        const expectedUrl = `http://localhost/course/${courseId}/${expectedSequenceId}/${unit.id}`;
+        const expectedSequenceId = sequenceTree[1][0].hash_key;
+        const expectedUrl = `http://localhost/c/${courseId}/${expectedSequenceId}/${unit.hash_key}`;
         expect(global.location.href).toEqual(expectedUrl);
-        expect(container.querySelector('.fake-unit')).toHaveTextContent(unit.id);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unit.hash_key);
       });
     });
 
@@ -331,7 +333,7 @@ describe('CoursewareContainer', () => {
       const unitBlocks = defaultUnitBlocks;
 
       it('should pick the first unit if position was not defined (activeUnitIndex becomes 0)', async () => {
-        history.push(`/course/${courseId}/${sequenceBlock.id}`);
+        history.push(`/c/${courseId}/${sequenceBlock.hash_key}`);
         const container = await loadContainer();
 
         assertLoadedHeader(container);
@@ -339,7 +341,7 @@ describe('CoursewareContainer', () => {
 
         expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
         expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
-        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[0].id);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[0].hash_key);
       });
 
       it('should use activeUnitIndex to pick a unit from the sequence', async () => {
@@ -350,7 +352,7 @@ describe('CoursewareContainer', () => {
         );
         setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });
 
-        history.push(`/course/${courseId}/${sequenceBlock.id}`);
+        history.push(`/c/${courseId}/${sequenceBlock.hash_key}`);
         const container = await loadContainer();
 
         assertLoadedHeader(container);
@@ -358,7 +360,7 @@ describe('CoursewareContainer', () => {
 
         expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
         expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
-        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[2].id);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[2].hash_key);
       });
     });
 
@@ -367,7 +369,7 @@ describe('CoursewareContainer', () => {
       const unitBlocks = defaultUnitBlocks;
 
       it('should load the specified unit', async () => {
-        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
+        history.push(`/c/${courseId}/${sequenceBlock.hash_key}/${unitBlocks[2].hash_key}`);
         const container = await loadContainer();
 
         assertLoadedHeader(container);
@@ -375,7 +377,7 @@ describe('CoursewareContainer', () => {
 
         expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
         expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
-        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[2].id);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[2].hash_key);
       });
 
       it('should navigate between units and check block completion', async () => {
@@ -383,7 +385,7 @@ describe('CoursewareContainer', () => {
           complete: true,
         });
 
-        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
+        history.push(`/c/${courseId}/${sequenceBlock.hash_key}/${unitBlocks[0].id}`);
         const container = await loadContainer();
 
         const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
@@ -391,12 +393,14 @@ describe('CoursewareContainer', () => {
         expect(sequenceNextButton).toHaveTextContent('Next');
         fireEvent.click(sequenceNavButtons[4]);
 
-        expect(global.location.href).toEqual(`http://localhost/course/${courseId}/${sequenceBlock.id}/${unitBlocks[1].id}`);
+        expect(global.location.href).toEqual(`http://localhost/c/${courseId}/${sequenceBlock.hash_key}/${unitBlocks[1].id}`);
       });
     });
 
     describe('when the current sequence is an exam', () => {
       const { location } = window;
+      const sequenceBlock = defaultSequenceBlock;
+      const unitBlocks = defaultUnitBlocks;
 
       beforeEach(() => {
         delete window.location;
@@ -408,6 +412,20 @@ describe('CoursewareContainer', () => {
       afterEach(() => {
         window.location = location;
       });
+
+      it('should redirect to the sequence legacyWebUrl', async () => {
+        const sequenceMetadata = Factory.build(
+          'sequenceMetadata',
+          { is_time_limited: true }, // position index is 1-based and is converted to 0-based for activeUnitIndex
+          { courseId, unitBlocks, sequenceBlock },
+        );
+        setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });
+
+        history.push(`/c/${courseId}/${sequenceBlock.hash_key}/${unitBlocks[2].hash_key}`);
+        await loadContainer();
+
+        expect(global.location.assign).toHaveBeenCalledWith(sequenceBlock.legacy_web_url);
+      });
     });
   });
 
@@ -424,7 +442,7 @@ describe('CoursewareContainer', () => {
 
       const { courseBlocks, sequenceBlocks, unitBlocks } = buildSimpleCourseBlocks(courseId, courseMetadata.name);
       setUpMockRequests({ courseBlocks, courseMetadata });
-      history.push(`/course/${courseId}/${sequenceBlocks[0].id}/${unitBlocks[0].id}`);
+      history.push(`/c/${courseId}/${sequenceBlocks[0].hash_key}/${unitBlocks[0].hash_key}`);
       return { courseMetadata, unitBlocks };
     }
 

src/courseware/CoursewareRedirectLandingPage.jsx

@@ -25,6 +25,12 @@ export default () => {
           path={`${path}/courseware/:courseId/unit/:unitId`}
           component={CoursewareRedirect}
         />
+        <PageRoute
+          path={`${path}/:courseId/:sequenceId/:unitId`}
+          render={({ match }) => {
+            global.location.assign(`/c/${match.params.courseId}/${match.params.sequenceId}/${match.params.unitId}`);
+          }}
+        />
         <PageRoute
           path={`${path}/course-home/:courseId`}
           render={({ match }) => {

src/courseware/course/Course.jsx

@@ -15,7 +15,6 @@ import NotificationTrigger from './NotificationTrigger';
 
 import { useModel } from '../../generic/model-store';
 import useWindowSize, { responsiveBreakpoints } from '../../generic/tabs/useWindowSize';
-import { getLocalStorage, setLocalStorage } from '../../data/localStorage';
 
 /** [MM-P2P] Experiment */
 import { initCoursewareMMP2P, MMP2PBlockModal } from '../../experiments/mm-p2p';
@@ -61,22 +60,6 @@ function Course({
     if (notificationTrayVisible) { setNotificationTray(false); } else { setNotificationTray(true); }
   };
 
-  if (!getLocalStorage('notificationStatus')) {
-    setLocalStorage('notificationStatus', 'active'); // Show red dot on notificationTrigger until seen
-  }
-
-  if (!getLocalStorage('upgradeNotificationCurrentState')) {
-    setLocalStorage('upgradeNotificationCurrentState', 'initialize');
-  }
-
-  const [notificationStatus, setNotificationStatus] = useState(getLocalStorage('notificationStatus'));
-  const [upgradeNotificationCurrentState, setupgradeNotificationCurrentState] = useState(getLocalStorage('upgradeNotificationCurrentState'));
-
-  const onNotificationSeen = () => {
-    setNotificationStatus('inactive');
-    setLocalStorage('notificationStatus', 'inactive');
-  };
-
   /** [MM-P2P] Experiment */
   const MMP2P = initCoursewareMMP2P(courseId, sequenceId, unitId);
 
@@ -90,8 +73,6 @@ function Course({
           courseId={courseId}
           sectionId={section ? section.id : null}
           sequenceId={sequenceId}
-          isStaff={course ? course.isStaff : null}
-          unitId={unitId}
           //* * [MM-P2P] Experiment */
           mmp2p={MMP2P}
         />
@@ -100,9 +81,6 @@ function Course({
           <NotificationTrigger
             toggleNotificationTray={toggleNotificationTray}
             isNotificationTrayVisible={isNotificationTrayVisible}
-            notificationStatus={notificationStatus}
-            setNotificationStatus={setNotificationStatus}
-            upgradeNotificationCurrentState={upgradeNotificationCurrentState}
           />
         ) : null}
       </div>
@@ -118,11 +96,6 @@ function Course({
         toggleNotificationTray={toggleNotificationTray}
         isNotificationTrayVisible={isNotificationTrayVisible}
         notificationTrayVisible={notificationTrayVisible}
-        notificationStatus={notificationStatus}
-        setNotificationStatus={setNotificationStatus}
-        onNotificationSeen={onNotificationSeen}
-        upgradeNotificationCurrentState={upgradeNotificationCurrentState}
-        setupgradeNotificationCurrentState={setupgradeNotificationCurrentState}
         //* * [MM-P2P] Experiment */
         mmp2p={MMP2P}
       />

src/courseware/course/Course.test.jsx

@@ -91,31 +91,6 @@ describe('Course', () => {
     expect(notificationTrigger).not.toHaveClass('trigger-active');
   });
 
-  it('renders course breadcrumbs as expected', async () => {
-    const courseMetadata = Factory.build('courseMetadata');
-    const unitBlocks = Array.from({ length: 3 }).map(() => Factory.build(
-      'block',
-      { type: 'vertical' },
-      { courseId: courseMetadata.id },
-    ));
-    const testStore = await initializeTestStore({ courseMetadata, unitBlocks }, false);
-    const { courseware, models } = testStore.getState();
-    const { courseId, sequenceId } = courseware;
-    const testData = {
-      ...mockData,
-      courseId,
-      sequenceId,
-      unitId: Object.values(models.units)[1].id, // Corner cases are already covered in `Sequence` tests.
-    };
-    render(<Course {...testData} />, { store: testStore });
-
-    loadUnit();
-    await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());
-    // expect the section and sequence "titles" to be loaded in as breadcrumb labels.
-    expect(screen.getByText('cdabcdabcdabcdabcdabcdabcdabcd13')).toBeInTheDocument();
-    expect(screen.getByText('cdabcdabcdabcdabcdabcdabcdabcd12')).toBeInTheDocument();
-  });
-
   it('passes handlers to the sequence', async () => {
     const nextSequenceHandler = jest.fn();
     const previousSequenceHandler = jest.fn();

src/courseware/course/CourseBreadcrumbs.jsx

@@ -5,151 +5,91 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHome } from '@fortawesome/free-solid-svg-icons';
 import { useSelector } from 'react-redux';
-import { SelectMenu } from '@edx/paragon';
-import { Link } from 'react-router-dom';
-import { useModel, useModels } from '../../generic/model-store';
+import { useModel } from '../../generic/model-store';
+
 /** [MM-P2P] Experiment */
 import { MMP2PFlyoverTrigger } from '../../experiments/mm-p2p';
-import JumpNavMenuItem from './JumpNavMenuItem';
 
 function CourseBreadcrumb({
-  content, withSeparator, courseId, unitId, isStaff,
+  url, children, withSeparator, ...attrs
 }) {
-  const defaultContent = content.filter(destination => destination.default)[0] || { id: courseId, label: '' };
-
   return (
     <>
       {withSeparator && (
-        <li className="mx-2 text-primary-500 text-truncate text-nowrap" role="presentation" aria-hidden>/</li>
+        <li className="mx-2 text-primary-500" role="presentation" aria-hidden>/</li>
       )}
-
-      <li style={{
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-      }}
-      >
-        { getConfig().ENABLE_JUMPNAV !== 'true' || content.length < 2 || !isStaff
-          ? (
-            <Link
-              className="text-primary-500"
-              to={`/course/${courseId}/${defaultContent.id}`}
-            >
-              {defaultContent.label}
-            </Link>
-          )
-          : (
-            <SelectMenu isLink defaultMessage={defaultContent.label}>
-              {content.map(item => (
-                <JumpNavMenuItem
-                  isDefault={item.default}
-                  sequences={item.sequences}
-                  courseId={courseId}
-                  title={item.label}
-                  currentUnit={unitId}
-                />
-              ))}
-            </SelectMenu>
-          )}
-
+      <li {...attrs}>
+        <a className="text-primary-500" href={url}>{children}</a>
       </li>
     </>
   );
 }
+
 CourseBreadcrumb.propTypes = {
-  content: PropTypes.arrayOf(
-    PropTypes.shape({
-      default: PropTypes.bool,
-      id: PropTypes.string,
-      label: PropTypes.string,
-    }),
-  ).isRequired,
-  unitId: PropTypes.string,
+  url: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
   withSeparator: PropTypes.bool,
-  courseId: PropTypes.string,
-  isStaff: PropTypes.bool,
 };
 
 CourseBreadcrumb.defaultProps = {
   withSeparator: false,
-  unitId: null,
-  courseId: null,
-  isStaff: null,
 };
 
 export default function CourseBreadcrumbs({
   courseId,
   sectionId,
   sequenceId,
-  unitId,
-  isStaff,
   /** [MM-P2P] Experiment */
   mmp2p,
 }) {
   const course = useModel('coursewareMeta', courseId);
+  const sequence = useModel('sequences', sequenceId);
+  const section = useModel('sections', sectionId);
   const courseStatus = useSelector(state => state.courseware.courseStatus);
   const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
 
-  const allSequencesInSections = Object.fromEntries(useModels('sections', course.sectionIds).map(section => [section.id, {
-    default: section.id === sectionId,
-    title: section.title,
-    sequences: useModels('sequences', section.sequenceIds),
-  }]));
-
   const links = useMemo(() => {
-    const chapters = [];
-    const sequentials = [];
     if (courseStatus === 'loaded' && sequenceStatus === 'loaded') {
-      Object.entries(allSequencesInSections).forEach(([id, section]) => {
-        chapters.push({
-          id,
-          label: section.title,
-          default: section.default,
-          sequences: section.sequences,
-        });
-        if (section.default) {
-          section.sequences.forEach(sequence => {
-            sequentials.push({
-              id: sequence.id,
-              label: sequence.title,
-              default: sequence.id === sequenceId,
-              sequences: [sequence],
-            });
-          });
-        }
-      });
+      return [section, sequence].filter(node => !!node).map((node) => ({
+        id: node.id,
+        label: node.title,
+        url: `${getConfig().LMS_BASE_URL}/courses/${course.id}/course/#${node.id}`,
+      }));
     }
-    return [chapters, sequentials];
-  }, [courseStatus, sequenceStatus, allSequencesInSections]);
+    return [];
+  }, [courseStatus, sequenceStatus]);
 
   return (
     <nav aria-label="breadcrumb" className="my-4 d-inline-block col-sm-10">
-      <ol className="list-unstyled d-flex  flex-nowrap align-items-center m-0">
-        <li className="list-unstyled d-flex m-0">
-          <Link
-            className="flex-shrink-0 text-primary"
-            to={`/course/${courseId}/home`}
-          >
-            <FontAwesomeIcon icon={faHome} className="mr-2" />
-            <FormattedMessage
-              id="learn.breadcrumb.navigation.course.home"
-              description="The course home link in breadcrumbs nav"
-              defaultMessage="Course"
-            />
-          </Link>
-        </li>
-        {links.map(content => (
-          <CourseBreadcrumb
-            courseId={courseId}
-            sequenceId={sequenceId}
-            content={content}
-            unitId={unitId}
-            withSeparator
-            isStaff={isStaff}
+      <ol className="list-unstyled d-flex m-0">
+        <CourseBreadcrumb
+          url={`${getConfig().LMS_BASE_URL}/courses/${course.id}/course/`}
+          className="flex-shrink-0"
+        >
+          <FontAwesomeIcon icon={faHome} className="mr-2" />
+          <FormattedMessage
+            id="learn.breadcrumb.navigation.course.home"
+            description="The course home link in breadcrumbs nav"
+            defaultMessage="Course"
           />
+        </CourseBreadcrumb>
+        {links.map(({ id, url, label }) => (
+          <CourseBreadcrumb
+            key={id}
+            url={url}
+            withSeparator
+            style={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {label}
+          </CourseBreadcrumb>
         ))}
+
         {/** [MM-P2P] Experiment */}
-        {mmp2p.state && mmp2p.state.isEnabled && (
+        {mmp2p.state.isEnabled && (
           <MMP2PFlyoverTrigger options={mmp2p} />
         )}
       </ol>
@@ -161,8 +101,6 @@ CourseBreadcrumbs.propTypes = {
   courseId: PropTypes.string.isRequired,
   sectionId: PropTypes.string,
   sequenceId: PropTypes.string,
-  unitId: PropTypes.string,
-  isStaff: PropTypes.bool,
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
     state: PropTypes.shape({
@@ -174,8 +112,7 @@ CourseBreadcrumbs.propTypes = {
 CourseBreadcrumbs.defaultProps = {
   sectionId: null,
   sequenceId: null,
-  unitId: null,
-  isStaff: null,
+
   /** [MM-P2P] Experiment */
   mmp2p: {},
 };

src/courseware/course/CourseBreadcrumbs.test.jsx

@@ -1,125 +0,0 @@
-import React from 'react';
-import { screen, render } from '@testing-library/react';
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { getConfig } from '@edx/frontend-platform';
-import { BrowserRouter } from 'react-router-dom';
-import { useModel, useModels } from '../../generic/model-store';
-import CourseBreadcrumbs from './CourseBreadcrumbs';
-
-jest.mock('@edx/frontend-platform');
-jest.mock('@edx/frontend-platform/analytics');
-
-// Remove When Fully rolled out>>>
-jest.mock('../../generic/model-store');
-jest.mock('@edx/frontend-platform/auth');
-getConfig.mockImplementation(() => ({ ENABLE_JUMPNAV: 'true' }));
-getAuthenticatedUser.mockImplementation(() => ({ administrator: true }));
-// ^^^^Remove When Fully rolled out
-
-jest.mock('react-redux', () => ({
-  connect: (mapStateToProps, mapDispatchToProps) => (ReactComponent) => ({
-    mapStateToProps,
-    mapDispatchToProps,
-    ReactComponent,
-  }),
-  Provider: ({ children }) => children,
-  useSelector: () => 'loaded',
-}));
-
-useModels.mockImplementation((name) => {
-  if (name === 'sections') {
-    return [
-      {
-        courseId: 'course-v1:edX+DemoX+Demo_Course',
-        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b',
-        sequenceIds: ['block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction'],
-        title: 'Introduction',
-      },
-      {
-        courseId: 'course-v1:edX+DemoX+Demo_Course',
-        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
-        sequenceIds: ['block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5',
-          'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions'],
-        title: 'Example Week 1: Getting Started',
-      },
-    ];
-  }
-  return [
-    {
-      id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5',
-      sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
-      title: 'Lesson 1 - Getting Started',
-      unitIds: [
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4f6c1b4e316a419ab5b6bf30e6c708e9',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@3dc16db8d14842e38324e95d4030b8a0',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4a1bba2a403f40bca5ec245e945b0d76',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@256f17a44983429fb1a60802203ee4e0',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@e3601c0abee6427d8c17e6d6f8fdddd1',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@134df56c516a4a0dbb24dd5facef746e',
-      ],
-    },
-    {
-      id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
-      sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
-      title: 'Homework - Question Styles',
-      unitIds: [
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2152d4a4aadc4cb0af5256394a3d1fc7',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@47dbd5f836544e61877a483c0b75606c',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@54bb9b142c6c4c22afc62bcb628f0e68',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0c92347a5c00',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_1fef54c2b23b',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2889db1677a549abb15eb4d886f95d1c',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@e8a5cc2aed424838853defab7be45e42',
-      ],
-    },
-  ];
-});
-useModel.mockImplementation(() => ({
-  sectionIds: ['block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b',
-    'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations'],
-}));
-
-describe('CourseBreadcrumbs', () => {
-  jest.spyOn(React, 'useMemo').mockImplementation(() => [
-    [
-      {
-        default: false,
-        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b',
-        label: 'Introduction',
-        url: 'http://localhost:2000/course/course-v1:edX+DemoX+Demo_Course/block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction',
-      },
-      {
-        default: true,
-        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
-        label: 'Example Week 1: Getting Started',
-        url: 'http://localhost:2000/course/course-v1:edX+DemoX+Demo_Course/block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5',
-      },
-    ],
-    [
-      {
-        id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@simulations', label: "Lesson 2 - Let's Get Interactive!", default: true, url: 'http://localhost:2000/course/course-v1:edX+DemoX+D…e@vertical+block@d0d804e8863c4a95a659c04d8a2b2bc0',
-      },
-      {
-        id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@175e76c4951144a29d46211361266e0e', label: 'Homework - Essays', default: false, url: 'http://localhost:2000/course/course-v1:edX+DemoX+D…e@vertical+block@fb79dcbad35b466a8c6364f8ffee9050',
-      },
-    ],
-  ]);
-  render(
-    <BrowserRouter>
-      <CourseBreadcrumbs
-        courseId="course-v1:edX+DemoX+Demo_Course"
-        sectionId="block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations"
-        sequenceId="block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions"
-        isStaff
-      />
-    </BrowserRouter>,
-  );
-  it('renders course breadcrumbs as expected', async () => {
-    expect(screen.queryAllByRole('link')).toHaveLength(1);
-    const courseHomeButtonDestination = screen.getAllByRole('link')[0].href;
-    expect(courseHomeButtonDestination).toBe('http://localhost/course/course-v1:edX+DemoX+Demo_Course/home');
-    expect(screen.getByRole('navigation', { name: 'breadcrumb' })).toBeInTheDocument();
-    expect(screen.queryAllByRole('button')).toHaveLength(2);
-  });
-});

src/courseware/course/JumpNavMenuItem.jsx

@@ -1,80 +0,0 @@
-/* eslint-disable consistent-return */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { history } from '@edx/frontend-platform';
-import { MenuItem } from '@edx/paragon';
-
-import {
-  sendTrackingLogEvent,
-  sendTrackEvent,
-} from '@edx/frontend-platform/analytics';
-import { useDispatch } from 'react-redux';
-import { checkBlockCompletion } from '../data';
-
-export default function JumpNavMenuItem({
-  title,
-  courseId,
-  currentUnit,
-  sequences,
-  isDefault,
-
-}) {
-  const dispatch = useDispatch();
-  function logEvent(targetUrl) {
-    const eventName = 'edx.ui.lms.jump_nav.selected';
-    const payload = {
-      target_name: title,
-      id: targetUrl,
-      current_id: courseId,
-      widget_placement: 'breadcrumb',
-    };
-    sendTrackEvent(eventName, payload);
-    sendTrackingLogEvent(eventName, payload);
-  }
-
-  function lazyloadUrl() {
-    if (isDefault) {
-      return `/course/${courseId}/${currentUnit}`;
-    }
-    const destinationString = sequences.forEach(sequence => sequence.unitIds.forEach(unitId => {
-      const complete = dispatch(checkBlockCompletion(
-        courseId,
-        sequence.id, unitId,
-      ))
-        .then(value => value);
-      if (!complete) { return `/course/${courseId}/${unitId}`; }
-    }));
-    return destinationString || `/course/${courseId}/${sequences[0].unitIds[0]}`;
-  }
-  function handleClick() {
-    const url = lazyloadUrl();
-    logEvent(url);
-    history.push(url);
-  }
-
-  return (
-    <MenuItem
-      defaultSelected={isDefault}
-      onClick={() => handleClick()}
-    >
-      {title}
-    </MenuItem>
-  );
-}
-
-const sequenceShape = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  unitIds: PropTypes.arrayOf(PropTypes.string).isRequired,
-  sectionId: PropTypes.string.isRequired,
-  isTimeLimited: PropTypes.bool,
-  isProctored: PropTypes.bool,
-  legacyWebUrl: PropTypes.string,
-});
-
-JumpNavMenuItem.propTypes = {
-  title: PropTypes.string.isRequired,
-  sequences: PropTypes.arrayOf(sequenceShape).isRequired,
-  isDefault: PropTypes.bool.isRequired,
-  courseId: PropTypes.string.isRequired,
-  currentUnit: PropTypes.string.isRequired,
-};

src/courseware/course/JumpNavMenuItem.test.jsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { screen, render } from '@testing-library/react';
-import JumpNavMenuItem from './JumpNavMenuItem';
-import { fireEvent } from '../../setupTest';
-
-jest.mock('@edx/frontend-platform');
-jest.mock('@edx/frontend-platform/analytics');
-
-const mockCheckBlock = jest.fn(() => Promise.resolve(true)); // check all units
-
-jest.mock('react-redux', () => ({
-  useDispatch: () => mockCheckBlock,
-}));
-
-const mockData = {
-  sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
-  sequenceId: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
-
-  title: 'Demo Menu Item',
-  courseId: 'course-v1:edX+DemoX+Demo_Course',
-  currentUnit: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
-  sequences: [
-    {
-      id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5',
-      blockType: 'sequential',
-      unitIds: [
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4f6c1b4e316a419ab5b6bf30e6c708e9',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@3dc16db8d14842e38324e95d4030b8a0',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4a1bba2a403f40bca5ec245e945b0d76',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@256f17a44983429fb1a60802203ee4e0',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@e3601c0abee6427d8c17e6d6f8fdddd1',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@134df56c516a4a0dbb24dd5facef746e',
-      ],
-      legacyWebUrl: 'http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5?experience=legacy',
-      sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
-    },
-    {
-      id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
-      title: 'Homework - Question Styles',
-      legacyWebUrl: 'http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions?experience=legacy',
-      unitIds: [
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2152d4a4aadc4cb0af5256394a3d1fc7',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@47dbd5f836544e61877a483c0b75606c',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@54bb9b142c6c4c22afc62bcb628f0e68',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0c92347a5c00',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_1fef54c2b23b',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2889db1677a549abb15eb4d886f95d1c',
-        'block-v1:edX+DemoX+Demo_Course+type@vertical+block@e8a5cc2aed424838853defab7be45e42',
-      ],
-      sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
-    },
-  ],
-  isDefault: false,
-};
-describe('JumpNavMenuItem', () => {
-  render(
-    <JumpNavMenuItem
-      {...mockData}
-    />,
-  );
-  it('renders menu Item as expected with button and Text and handles clicks', () => {
-    expect(screen.queryAllByRole('button')).toHaveLength(1);
-    expect(screen.getByText('Demo Menu Item'));
-    const navButton = screen.queryAllByRole('button')[0];
-    fireEvent.click(navButton);
-    expect(mockCheckBlock).toBeCalledTimes(14); // number of units to check on load.
-  });
-});

src/courseware/course/NotificationTray.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -12,7 +12,7 @@ import useWindowSize, { responsiveBreakpoints } from '../../generic/tabs/useWind
 import UpgradeNotification from '../../generic/upgrade-notification/UpgradeNotification';
 
 function NotificationTray({
-  intl, toggleNotificationTray, onNotificationSeen, upgradeNotificationCurrentState, setupgradeNotificationCurrentState,
+  intl, toggleNotificationTray,
 }) {
   const {
     courseId,
@@ -32,9 +32,6 @@ function NotificationTray({
 
   const shouldDisplayFullScreen = useWindowSize().width < responsiveBreakpoints.large.minWidth;
 
-  // After three seconds, update notificationSeen (to hide red dot)
-  useEffect(() => { setTimeout(onNotificationSeen, 3000); }, []);
-
   return (
     <section className={classNames('notification-tray-container ml-0 ml-lg-4', { 'no-notification': !verifiedMode && !shouldDisplayFullScreen })} aria-label={intl.formatMessage(messages.notificationTray)}>
       {shouldDisplayFullScreen ? (
@@ -67,8 +64,6 @@ function NotificationTray({
             timeOffsetMillis={timeOffsetMillis}
             courseId={courseId}
             org={org}
-            upgradeNotificationCurrentState={upgradeNotificationCurrentState}
-            setupgradeNotificationCurrentState={setupgradeNotificationCurrentState}
           />
         ) : <p className="notification-tray-content">{intl.formatMessage(messages.noNotificationsMessage)}</p>}
       </div>
@@ -79,14 +74,10 @@ function NotificationTray({
 NotificationTray.propTypes = {
   intl: intlShape.isRequired,
   toggleNotificationTray: PropTypes.func,
-  onNotificationSeen: PropTypes.func,
-  upgradeNotificationCurrentState: PropTypes.string.isRequired,
-  setupgradeNotificationCurrentState: PropTypes.func.isRequired,
 };
 
 NotificationTray.defaultProps = {
   toggleNotificationTray: null,
-  onNotificationSeen: null,
 };
 
 export default injectIntl(NotificationTray);

src/courseware/course/NotificationTrigger.jsx

@@ -1,31 +1,12 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { getLocalStorage, setLocalStorage } from '../../data/localStorage';
 
 import NotificationIcon from './NotificationIcon';
 import messages from './messages';
 
-function NotificationTrigger({
-  intl, toggleNotificationTray, isNotificationTrayVisible, notificationStatus, setNotificationStatus,
-  upgradeNotificationCurrentState,
-}) {
-  /* Re-show a red dot beside the notification trigger for each of the 7 UpgradeNotification stages
-   The upgradeNotificationCurrentState prop will be available after UpgradeNotification mounts. Once available,
-  compare with the last state they've seen, and if it's different then set dot back to red */
-  function UpdateUpgradeNotificationLastSeen() {
-    if (upgradeNotificationCurrentState) {
-      if (getLocalStorage('upgradeNotificationLastSeen') !== upgradeNotificationCurrentState) {
-        setNotificationStatus('active');
-        setLocalStorage('notificationStatus', 'active');
-        setLocalStorage('upgradeNotificationLastSeen', upgradeNotificationCurrentState);
-      }
-    }
-  }
-
-  useEffect(() => { UpdateUpgradeNotificationLastSeen(); });
-
+function NotificationTrigger({ intl, toggleNotificationTray, isNotificationTrayVisible }) {
   return (
     <button
       className={classNames('notification-trigger-btn', { 'trigger-active': isNotificationTrayVisible() })}
@@ -33,7 +14,8 @@ function NotificationTrigger({
       onClick={() => { toggleNotificationTray(); }}
       aria-label={intl.formatMessage(messages.openNotificationTrigger)}
     >
-      <NotificationIcon status={notificationStatus} notificationColor="bg-danger-500" />
+      {/* REV-2297 TODO: add logic for status "active" if red dot should display */}
+      <NotificationIcon status="inactive" notificationColor="bg-danger-500" />
     </button>
   );
 }
@@ -41,10 +23,7 @@ function NotificationTrigger({
 NotificationTrigger.propTypes = {
   intl: intlShape.isRequired,
   toggleNotificationTray: PropTypes.func.isRequired,
-  notificationStatus: PropTypes.string.isRequired,
-  setNotificationStatus: PropTypes.func.isRequired,
   isNotificationTrayVisible: PropTypes.func.isRequired,
-  upgradeNotificationCurrentState: PropTypes.string.isRequired,
 };
 
 export default injectIntl(NotificationTrigger);

src/courseware/course/NotificationTrigger.scss

@@ -1,7 +1,7 @@
 .notification-trigger-btn {
     border: 1px solid $light-400;
     background: none;
-    margin-top: 1rem;
+    margin-top: 0.625rem;
 
     position: absolute;
     right: 0;

src/courseware/course/NotificationTrigger.test.jsx

@@ -4,51 +4,27 @@ import {
   render, initializeTestStore, screen, fireEvent,
 } from '../../setupTest';
 import NotificationTrigger from './NotificationTrigger';
-import { getLocalStorage } from '../../data/localStorage';
 
 describe('Notification Trigger', () => {
   let mockData;
-  // let mockDataSameState;
-  // let mockDataDifferentState;
   const courseMetadata = Factory.build('courseMetadata');
 
-  beforeEach(async () => {
+  beforeAll(async () => {
     await initializeTestStore({ courseMetadata, excludeFetchCourse: true, excludeFetchSequence: true });
     mockData = {
       toggleNotificationTray: () => {},
       isNotificationTrayVisible: () => {},
-      notificationStatus: 'active',
-      setNotificationStatus: () => {},
-      upgradeNotificationCurrentState: 'FPDdaysLeft',
     };
   });
 
-  it('renders notification trigger icon with red dot when notificationStatus is active', async () => {
+  it('renders notification trigger with icon', async () => {
     const { container } = render(<NotificationTrigger {...mockData} />);
     expect(container).toBeInTheDocument();
     const buttonIcon = container.querySelectorAll('svg');
     expect(buttonIcon).toHaveLength(1);
-    expect(screen.getByTestId('notification-dot')).toBeInTheDocument();
-  });
 
-  it('renders notification trigger icon WITHOUT red dot 3 seconds later', async () => {
-    const { container } = render(<NotificationTrigger {...mockData} />);
-    expect(container).toBeInTheDocument();
-    jest.useFakeTimers();
-    setTimeout(() => {
-      expect(screen.queryByRole('notification-dot')).not.toBeInTheDocument();
-    }, 3000);
-    jest.runAllTimers();
-  });
-
-  it('renders notification trigger icon WITHOUT red dot within the same phase', async () => {
-    const { container } = render(
-      <NotificationTrigger {...mockData} upgradeNotificationCurrentState="sameState" upgradeNotificationLastSeen="sameState" />,
-    );
-    expect(container).toBeInTheDocument();
-    const buttonIcon = container.querySelectorAll('svg');
-    expect(buttonIcon).toHaveLength(1);
-    expect(screen.queryByRole('notification-dot')).not.toBeInTheDocument();
+    // REV-2297 TODO: update below test once the status=active or inactive is implemented
+    // expect(screen.getByTestId('notification-dot')).toBeInTheDocument();
   });
 
   it('handles onClick event toggling the notification tray', async () => {
@@ -64,16 +40,4 @@ describe('Notification Trigger', () => {
     fireEvent.click(notificationTrigger);
     expect(toggleNotificationTray).toHaveBeenCalledTimes(1);
   });
-
-  // rendering NotificationTrigger has the effect of calling UpdateUpgradeNotificationLastSeen()
-  // Verify that local storage was updated accordingly
-  it('we make the right updates when rendering a new phase (before -> after)', async () => {
-    const { container } = render(
-      <NotificationTrigger {...mockData} upgradeNotificationLastSeen="before" upgradeNotificationCurrentState="after" />,
-    );
-    expect(container).toBeInTheDocument();
-
-    expect(getLocalStorage('notificationStatus')).toBe('active');
-    expect(getLocalStorage('upgradeNotificationLastSeen')).toBe('after');
-  });
 });

src/courseware/course/course-exit/CourseExit.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -11,7 +11,6 @@ import CourseInProgress from './CourseInProgress';
 import CourseNonPassing from './CourseNonPassing';
 import { COURSE_EXIT_MODES, getCourseExitMode } from './utils';
 import messages from './messages';
-import { unsubscribeFromGoalReminders } from './data/thunks';
 
 import { useModel } from '../../../generic/model-store';
 
@@ -19,13 +18,10 @@ function CourseExit({ intl }) {
   const { courseId } = useSelector(state => state.courseware);
   const {
     certificateData,
-    courseExitPageIsActive,
-    courseGoals,
-    enrollmentMode,
     hasScheduledContent,
     isEnrolled,
-    isMasquerading,
     userHasPassingGrade,
+    courseExitPageIsActive,
   } = useModel('coursewareMeta', courseId);
 
   const mode = getCourseExitMode(
@@ -36,15 +32,6 @@ function CourseExit({ intl }) {
     courseExitPageIsActive,
   );
 
-  // Audit users cannot fully complete a course, so we will
-  // unsubscribe them from goal reminders once they reach the course exit page
-  // to avoid spamming them with goal reminder emails
-  if (courseGoals && enrollmentMode === 'audit' && !isMasquerading) {
-    useEffect(() => {
-      unsubscribeFromGoalReminders(courseId);
-    }, []);
-  }
-
   let body = null;
   if (mode === COURSE_EXIT_MODES.nonPassing) {
     body = (<CourseNonPassing />);
@@ -53,7 +40,7 @@ function CourseExit({ intl }) {
   } else if (mode === COURSE_EXIT_MODES.celebration) {
     body = (<CourseCelebration />);
   } else {
-    return (<Redirect to={`/course/${courseId}`} />);
+    return (<Redirect to={`/c/${courseId}`} />);
   }
 
   return (

src/courseware/course/course-exit/CourseExit.test.jsx

@@ -3,7 +3,6 @@ import MockAdapter from 'axios-mock-adapter';
 import { Factory } from 'rosie';
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { waitFor } from '@testing-library/react';
 
 import { fetchCourse } from '../../data';
 import { buildSimpleCourseBlocks } from '../../../shared/data/__factories__/courseBlocks.factory';
@@ -95,7 +94,7 @@ describe('Course Exit Pages', () => {
         },
       });
       await fetchAndRender(<CourseExit />);
-      expect(global.location.href).toEqual(`http://localhost/course/${defaultMetadata.id}`);
+      expect(global.location.href).toEqual(`http://localhost/c/${defaultMetadata.id}`);
     });
   });
 
@@ -378,25 +377,4 @@ describe('Course Exit Pages', () => {
       expect(screen.getByRole('link', { name: 'View course schedule' })).toBeInTheDocument();
     });
   });
-
-  it('unsubscribes the user when loading the course exit page', async () => {
-    setMetadata({
-      enrollment: {
-        mode: 'audit',
-        courseGoals: {
-          goal_options: [],
-          selected_goal: {
-            days_per_week: 1,
-            subscribed_to_reminders: true,
-          },
-        },
-      },
-    });
-    await fetchAndRender(<CourseExit />);
-    const url = `${getConfig().LMS_BASE_URL}/api/course_home/save_course_goal`;
-    await waitFor(() => {
-      expect(axiosMock.history.post[0].url).toMatch(url);
-      expect(axiosMock.history.post[0].data).toMatch(`{"course_id":"${defaultMetadata.id}","subscribed_to_reminders":false}`);
-    });
-  });
 });

src/courseware/course/course-exit/data/api.js

@@ -23,7 +23,7 @@ function filterRecommendationsList(
   ));
 }
 
-export async function getCourseRecommendations(courseKey) {
+export default async function getCourseRecommendations(courseKey) {
   const discoveryApiUrl = getConfig().DISCOVERY_API_BASE_URL;
   if (!discoveryApiUrl) {
     return [];
@@ -36,11 +36,3 @@ export async function getCourseRecommendations(courseKey) {
   ]);
   return filterRecommendationsList(camelCaseObject(recommendationsResponse), camelCaseObject(enrollmentsResponse));
 }
-
-export async function postUnsubscribeFromGoalReminders(courseId) {
-  const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_home/save_course_goal`);
-  return getAuthenticatedHttpClient().post(url.href, {
-    course_id: courseId,
-    subscribed_to_reminders: false,
-  });
-}

src/courseware/course/course-exit/data/thunks.js

@@ -5,10 +5,7 @@ import {
   fetchCourseRecommendationsRequest,
   fetchCourseRecommendationsSuccess,
 } from './slice';
-import {
-  getCourseRecommendations,
-  postUnsubscribeFromGoalReminders,
-} from './api';
+import getCourseRecommendations from './api';
 import { updateModel } from '../../../../generic/model-store';
 
 export default function fetchCourseRecommendations(courseKey, courseId) {
@@ -30,7 +27,3 @@ export default function fetchCourseRecommendations(courseKey, courseId) {
     }
   };
 }
-
-export async function unsubscribeFromGoalReminders(courseId, daysPerWeek, subscribedToReminders) {
-  return postUnsubscribeFromGoalReminders(courseId, daysPerWeek, subscribedToReminders);
-}

src/courseware/course/sequence/Sequence.jsx

@@ -20,7 +20,6 @@ import { useModel } from '../../../generic/model-store';
 
 import CourseLicense from '../course-license';
 import messages from './messages';
-import HiddenAfterDue from './hidden-after-due';
 import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
 import SequenceContent from './SequenceContent';
 import NotificationTray from '../NotificationTray';
@@ -41,17 +40,14 @@ function Sequence({
   toggleNotificationTray,
   notificationTrayVisible,
   isNotificationTrayVisible,
-  notificationStatus,
-  setNotificationStatus,
-  onNotificationSeen,
-  upgradeNotificationCurrentState,
-  setupgradeNotificationCurrentState,
   mmp2p,
 }) {
   const course = useModel('coursewareMeta', courseId);
   const sequence = useModel('sequences', sequenceId);
   const unit = useModel('units', unitId);
   const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
+  const specialExamsEnabledWaffleFlag = useSelector(state => state.courseware.specialExamsEnabledWaffleFlag);
+  const proctoredExamsEnabledWaffleFlag = useSelector(state => state.courseware.proctoredExamsEnabledWaffleFlag);
   const shouldDisplayNotificationTrigger = useWindowSize().width < responsiveBreakpoints.small.minWidth;
 
   const handleNext = () => {
@@ -143,15 +139,29 @@ function Sequence({
     );
   }
 
-  if (sequenceStatus === 'loaded' && sequence.isHiddenAfterDue) {
-    // Shouldn't even be here - these sequences are normally stripped out of the navigation.
-    // But we are here, so render a notice instead of the normal content.
-    return <HiddenAfterDue courseId={courseId} />;
+  /*
+  TODO: When the micro-frontend supports viewing special exams without redirecting to the legacy
+  experience, we can remove this whole conditional. For now, though, we show the spinner here
+  because we expect CoursewareContainer to be performing a redirect to the legacy experience while
+  we're waiting. That redirect may take a few seconds, so we show the spinner in the meantime.
+  */
+  if (sequenceStatus === 'loaded') {
+    const shouldRedirectSpecialExams = sequence.isTimeLimited && !specialExamsEnabledWaffleFlag;
+    const shouldRedirectProctoredExams = sequence.isProctored && specialExamsEnabledWaffleFlag
+      && !proctoredExamsEnabledWaffleFlag;
+
+    if (shouldRedirectSpecialExams || shouldRedirectProctoredExams) {
+      return (
+        <PageLoading
+          srMessage={intl.formatMessage(messages['learn.loading.learning.sequence'])}
+        />
+      );
+    }
   }
 
   const gated = sequence && sequence.gatedContent !== undefined && sequence.gatedContent.gated;
   const goToCourseExitPage = () => {
-    history.push(`/course/${courseId}/course-end`);
+    history.push(`/c/${courseId}/course-end`);
   };
 
   const defaultContent = (
@@ -184,9 +194,6 @@ function Sequence({
           <NotificationTrigger
             toggleNotificationTray={toggleNotificationTray}
             isNotificationTrayVisible={isNotificationTrayVisible}
-            notificationStatus={notificationStatus}
-            setNotificationStatus={setNotificationStatus}
-            upgradeNotificationCurrentState={upgradeNotificationCurrentState}
           />
         ) : null}
 
@@ -222,10 +229,6 @@ function Sequence({
         <NotificationTray
           toggleNotificationTray={toggleNotificationTray}
           notificationTrayVisible={notificationTrayVisible}
-          notificationStatus={notificationStatus}
-          onNotificationSeen={onNotificationSeen}
-          upgradeNotificationCurrentState={upgradeNotificationCurrentState}
-          setupgradeNotificationCurrentState={setupgradeNotificationCurrentState}
         />
       ) : null }
 
@@ -241,12 +244,7 @@ function Sequence({
   if (sequenceStatus === 'loaded') {
     return (
       <div>
-        <SequenceExamWrapper
-          sequence={sequence}
-          courseId={courseId}
-          isStaff={course.isStaff}
-          originalUserIsStaff={course.originalUserIsStaff}
-        >
+        <SequenceExamWrapper sequence={sequence} courseId={courseId} isStaff={course.isStaff}>
           {defaultContent}
         </SequenceExamWrapper>
         <CourseLicense license={course.license || undefined} />
@@ -273,11 +271,6 @@ Sequence.propTypes = {
   toggleNotificationTray: PropTypes.func,
   notificationTrayVisible: PropTypes.bool,
   isNotificationTrayVisible: PropTypes.func,
-  notificationStatus: PropTypes.string.isRequired,
-  setNotificationStatus: PropTypes.func.isRequired,
-  onNotificationSeen: PropTypes.func,
-  upgradeNotificationCurrentState: PropTypes.string.isRequired,
-  setupgradeNotificationCurrentState: PropTypes.func.isRequired,
 
   /** [MM-P2P] Experiment */
   mmp2p: PropTypes.shape({
@@ -299,7 +292,6 @@ Sequence.defaultProps = {
   toggleNotificationTray: null,
   notificationTrayVisible: null,
   isNotificationTrayVisible: null,
-  onNotificationSeen: null,
 
   /** [MM-P2P] Experiment */
   mmp2p: {

src/courseware/course/sequence/Sequence.test.jsx

@@ -81,7 +81,11 @@ describe('Sequence', () => {
     expect(screen.queryByText('Loading locked content messaging...')).not.toBeInTheDocument();
   });
 
-  it('renders correctly for hidden after due content', async () => {
+  it('renders correctly for exam content', async () => {
+    // Exams should NOT render in the Sequence.  They should permanently show a spinner until the
+    // application redirects away from the page.  Note that this component is not responsible for
+    // that redirect behavior, so there's no record of it here.
+    // See CoursewareContainer.jsx "checkExamRedirect" function.
     const sequenceBlocks = [Factory.build(
       'block',
       { type: 'sequential', children: [unitBlocks.map(block => block.id)] },
@@ -89,7 +93,7 @@ describe('Sequence', () => {
     )];
     const sequenceMetadata = [Factory.build(
       'sequenceMetadata',
-      { is_hidden_after_due: true },
+      { is_time_limited: true },
       { courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlocks[0] },
     )];
     const testStore = await initializeTestStore(
@@ -97,19 +101,15 @@ describe('Sequence', () => {
         courseMetadata, unitBlocks, sequenceBlocks, sequenceMetadata,
       }, false,
     );
-    render(
+    const { container } = render(
       <Sequence {...mockData} {...{ sequenceId: sequenceBlocks[0].id }} />,
       { store: testStore },
     );
 
-    await waitFor(() => {
-      expect(screen.queryByText('The due date for this assignment has passed.')).toBeInTheDocument();
-    });
-    expect(screen.getByRole('link', { name: 'progress page' }))
-      .toHaveAttribute('href', 'http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/progress');
-
-    // No normal content or navigation should be rendered. Just the above alert.
-    expect(screen.queryAllByRole('button').length).toEqual(0);
+    // We expect that the sequence container isn't rendering at all.
+    expect(container.querySelector('.sequence-container')).toBeNull();
+    // But that we're seeing a nice spinner.
+    expect(screen.queryByText('Loading learning sequence...')).toBeInTheDocument();
   });
 
   it('displays error message on sequence load failure', async () => {

src/courseware/course/sequence/Unit.jsx

@@ -89,9 +89,10 @@ function Unit({
   /** [MM-P2P] Experiment */
   mmp2p,
 }) {
+  const unit = useModel('units', id);
   const { authenticatedUser } = useContext(AppContext);
   const view = authenticatedUser ? 'student_view' : 'public_view';
-  let iframeUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}?show_title=0&show_bookmark_button=0&recheck_access=1&view=${view}`;
+  let iframeUrl = `${getConfig().LMS_BASE_URL}/xblock/${(unit.decoded_id || id)}?show_title=0&show_bookmark_button=0&recheck_access=1&view=${view}`;
   if (format) {
     iframeUrl += `&format=${format}`;
   }
@@ -101,7 +102,6 @@ function Unit({
   const [modalOptions, setModalOptions] = useState({ open: false });
   const [shouldDisplayHonorCode, setShouldDisplayHonorCode] = useState(false);
 
-  const unit = useModel('units', id);
   const course = useModel('coursewareMeta', courseId);
   const {
     contentTypeGatingEnabled,

src/courseware/course/sequence/Unit.test.jsx

@@ -44,6 +44,7 @@ describe('Unit', () => {
       id: unit.id,
       courseId: courseMetadata.id,
       format: 'Homework',
+      decoded_id: unit.decoded_id,
     };
   });
 
@@ -53,7 +54,7 @@ describe('Unit', () => {
     const renderedUnit = screen.getByTitle(unit.display_name);
     expect(renderedUnit).toHaveAttribute('height', String(0));
     expect(renderedUnit).toHaveAttribute(
-      'src', `http://localhost:18000/xblock/${mockData.id}?show_title=0&show_bookmark_button=0&recheck_access=1&view=student_view&format=${mockData.format}`,
+      'src', `http://localhost:18000/xblock/${mockData.decoded_id}?show_title=0&show_bookmark_button=0&recheck_access=1&view=student_view&format=${mockData.format}`,
     );
   });
 

src/courseware/course/sequence/content-lock/ContentLock.jsx

@@ -12,7 +12,7 @@ function ContentLock({
   intl, courseId, prereqSectionName, prereqId, sequenceTitle,
 }) {
   const handleClick = useCallback(() => {
-    history.push(`/course/${courseId}/${prereqId}`);
+    history.push(`/c/${courseId}/${prereqId}`);
   });
 
   return (

src/courseware/course/sequence/content-lock/ContentLock.test.jsx

@@ -38,6 +38,6 @@ describe('Content Lock', () => {
     render(<ContentLock {...mockData} />);
     fireEvent.click(screen.getByRole('button'));
 
-    expect(history.push).toHaveBeenCalledWith(`/course/${mockData.courseId}/${mockData.prereqId}`);
+    expect(history.push).toHaveBeenCalledWith(`/c/${mockData.courseId}/${mockData.prereqId}`);
   });
 });

src/courseware/course/sequence/hidden-after-due/HiddenAfterDue.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
-
-import { useModel } from '../../../../generic/model-store';
-
-import messages from './messages';
-
-function HiddenAfterDue({ courseId, intl }) {
-  const { tabs } = useModel('coursewareMeta', courseId);
-
-  const progressTab = tabs.find(tab => tab.slug === 'progress');
-  const progressLink = progressTab && progressTab.url && (
-    <Hyperlink
-      style={{ textDecoration: 'underline' }}
-      destination={progressTab.url}
-      className="text-reset"
-    >
-      {intl.formatMessage(messages.progressPage)}
-    </Hyperlink>
-  );
-
-  return (
-    <Alert variant="info" icon={Info}>
-      <h3>{intl.formatMessage(messages.header)}</h3>
-      <p>
-        {intl.formatMessage(messages.description)}
-        {progressLink && (
-          <>
-            <br />
-            <FormattedMessage
-              id="learn.hiddenAfterDue.gradeAvailable"
-              defaultMessage="If you have completed this assignment, your grade is available on the {progressPage}."
-              values={{
-                progressPage: progressLink,
-              }}
-            />
-          </>
-        )}
-      </p>
-    </Alert>
-  );
-}
-
-HiddenAfterDue.propTypes = {
-  intl: intlShape.isRequired,
-  courseId: PropTypes.string.isRequired,
-};
-
-export default injectIntl(HiddenAfterDue);

src/courseware/course/sequence/hidden-after-due/index.js

@@ -1 +0,0 @@
-export { default } from './HiddenAfterDue';

src/courseware/course/sequence/hidden-after-due/messages.js

@@ -1,23 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  header: {
-    id: 'learn.hiddenAfterDue.header',
-    defaultMessage: 'The due date for this assignment has passed.',
-  },
-  description: {
-    id: 'learn.hiddenAfterDue.description',
-    defaultMessage: 'Because the due date has passed, this assignment is no longer available.',
-  },
-  gradeAvailable: {
-    id: 'learn.hiddenAfterDue.gradeAvailable',
-    defaultMessage: 'If you have completed this assignment, your grade is available on the {progressPage}.',
-  },
-  progressPage: {
-    id: 'learn.hiddenAfterDue.progressPage',
-    defaultMessage: 'progress page',
-    description: 'This is the text for the link embedded in learn.hiddenAfterDue.gradeAvailable',
-  },
-});
-
-export default messages;

src/courseware/course/sequence/honor-code/HonorCode.jsx

@@ -5,19 +5,19 @@ import { getConfig, history } from '@edx/frontend-platform';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { ActionRow, Alert, Button } from '@edx/paragon';
 
-import { useModel } from '../../../../generic/model-store';
 import { saveIntegritySignature } from '../../../data';
 import messages from './messages';
 
 function HonorCode({ intl, courseId }) {
   const dispatch = useDispatch();
-  const { isMasquerading } = useModel('coursewareMeta', courseId);
   const siteName = getConfig().SITE_NAME;
-  const honorCodeUrl = `${getConfig().TERMS_OF_SERVICE_URL}#honor-code`;
+  const honorCodeUrl = `${process.env.TERMS_OF_SERVICE_URL}#honor-code`;
 
-  const handleCancel = () => history.push(`/course/${courseId}/home`);
+  const handleCancel = () => history.push(`/c/${courseId}/home`);
 
-  const handleAgree = () => dispatch(saveIntegritySignature(courseId, isMasquerading));
+  const handleAgree = () => {
+    dispatch(saveIntegritySignature(courseId));
+  };
 
   return (
     <Alert variant="light" aria-live="off">

src/courseware/course/sequence/honor-code/HonorCode.test.jsx

@@ -28,6 +28,6 @@ describe('Honor Code', () => {
 
     const cancelButton = screen.getByText('Cancel');
     fireEvent.click(cancelButton);
-    expect(history.push).toHaveBeenCalledWith(`/course/${mockData.courseId}/home`);
+    expect(history.push).toHaveBeenCalledWith(`/c/${mockData.courseId}/home`);
   });
 });

src/courseware/course/sequence/lock-paywall/LockPaywall.jsx

@@ -113,7 +113,7 @@ function LockPaywall({
                   <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
                   <FormattedMessage
                     id="gatedContent.paragraph.bulletOne"
-                    defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resumé"
+                    defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resume"
                     values={{ verifiedCertLink }}
                     className="bullet-text"
                   />
@@ -149,7 +149,7 @@ function LockPaywall({
 
         <div
           className={
-            classNames('d-md-flex align-items-md-center text-right', {
+            classNames('p-md-0 d-md-flex align-items-md-center text-right', {
               'col-md-5 mx-md-0': notificationTrayVisible, 'col-md-4 mx-md-3 justify-content-center': !notificationTrayVisible && !shouldDisplayGatedContentTwoColumnsHalf, 'col-md-11 justify-content-end': shouldDisplayGatedContentOneColumn && !shouldDisplayGatedContentTwoColumns, 'col-md-6 justify-content-center': shouldDisplayGatedContentTwoColumnsHalf,
             })
           }

src/courseware/course/sequence/lock-paywall/LockPaywall.scss

@@ -1,7 +1,3 @@
-.alert-content.lock-paywall-container {
-    display: inline-flex;
-}
-
 .lock-paywall-container svg {
     color: $primary-700;
 }