AA-279: Add course expired alert to outline

It was previously only used in the courseware. But to match the
LMS, we also want to show it on the outline tab.

.env

@@ -4,6 +4,7 @@ BASE_URL=null
 CREDENTIALS_BASE_URL=null
 CSRF_TOKEN_API_PATH=null
 ECOMMERCE_BASE_URL=null
+INSIGHTS_BASE_URL=
 LANGUAGE_PREFERENCE_COOKIE_NAME=null
 LMS_BASE_URL=null
 LOGIN_URL=null
@@ -13,4 +14,6 @@ ORDER_HISTORY_URL=null
 REFRESH_ACCESS_TOKEN_ENDPOINT=null
 SEGMENT_KEY=null
 SITE_NAME=null
+TWITTER_URL=null
+STUDIO_BASE_URL=
 USER_INFO_COOKIE_NAME=null

.env.development

@@ -1,5 +1,4 @@
 NODE_ENV='development'
-PORT=2000
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:2000'
 CREDENTIALS_BASE_URL='http://localhost:18150'
@@ -8,10 +7,13 @@ ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
-LOGOUT_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 ORDER_HISTORY_URL='localhost:1996/orders'
+PORT=2000
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME='edX'
+TWITTER_URL='https://twitter.com/edXOnline'
+STUDIO_BASE_URL='http://localhost:18010'
 USER_INFO_COOKIE_NAME='edx-user-info'

.env.test

@@ -1,15 +1,19 @@
+NODE_ENV='test'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
-BASE_URL='localhost:1995'
+BASE_URL='localhost:2000'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
-LOGOUT_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 ORDER_HISTORY_URL='localhost:1996/orders'
+PORT=2000
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME='edX'
+TWITTER_URL='https://twitter.com/edXOnline'
+STUDIO_BASE_URL='http://localhost:18010'
 USER_INFO_COOKIE_NAME='edx-user-info'

.eslintrc.js

@@ -1,3 +1,11 @@
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint');
+module.exports = createConfig('eslint', {
+  overrides: [{
+    files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)", "setupTest.js"],
+    rules: {
+      'import/named': 'off',
+      'import/no-extraneous-dependencies': 'off',
+    },
+  }],
+});

README.rst

@@ -20,3 +20,26 @@ React app for edX learning.
    :target: @edx/frontend-app-learning
 .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-learning.svg
    :target: @edx/frontend-app-learning
+
+Development
+-----------
+
+Start Devstack
+^^^^^^^^^^^^^^
+
+To use this application `devstack <https://github.com/edx/devstack>`__ must be running and you must be logged into it.
+
+-  Start devstack
+-  Log in (http://localhost:18000/login)
+
+Start the development server
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+In this project, install requirements and start the development server by running:
+
+.. code:: bash
+
+   npm install
+   npm start # The server will run on port 1995
+
+Once the dev server is up, visit http://localhost:2000/course/course-v1:edX+DemoX+Demo_Course to view the demo course.  You can replace ``course-v1:edX+DemoX+Demo_Course`` with a different course key.

docs/decisions/0002-courseware-component-hierarchy.md

@@ -1,21 +0,0 @@
-# Courseware app structure
-
-Currently we have hierarchical courses - they contain sections, subsections, units, and components.
-
-We need data to power each level.
-
-We've made decisions that we're going to re-fetch data at the subsection level under the assumption that
-
-At any given level, you have the following structure:
-
-Parent
-  Container
-    Child
-      Context
-
-    The container belongs to the parent module, and is an opportunity for the parent to decide to load more data necessary to load the Child.  If the parent has what it needs, it may not use a Container.  The Child has an props-only interface.  It does _not_ use contexts or redux from the Parent.  The child may decide to use a Context internally if that's convenient, but that's a decision independent of anything above the Child in the hierarchy.
-
-
-This app uses a "model store" - a normalized representation of our API data.  This data is kept in an Object with entity IDs as keys, and the entities as values.  This allows the application to quickly look up data in the map using only a key.  It also means that if the same entity is used in multiple places, there's only one actual representation of it in the client - anyone who wants to use it effectively maintains a reference to it via it's ID.
-
-There are a few kinds of data in the model store.  Information from the blocks API - courses, chapters, sequences, and units - are stored together by ID.  Into this, we merge course, sequence, and unit metadata from the courses and sequence metadata APIs.

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

@@ -0,0 +1,50 @@
+# Courseware Page Decisions
+
+## Courseware data loading
+
+Today we have strictly hierarchical courses - a course contains sections, which contain sequences, which contain units, which contain components.
+
+In creating the courseware pages of this app, we needed to choose how often we fetch data from the server.  If we fetch it once and try to get the whole course, including all the data we need in its entire hierarchy, then the request will take 30+ seconds and be a horrible UX.  If we try to fetch too granularly, we risk making hundreds of calls to the LMS, incuring both request overhead and common server-side processing that needs to occur for each of those requests.
+
+Instead, we've chosen to load data via the following:
+
+- The course blocks API (/api/courses/v2/blocks) for getting the overall structure of the course (limited data on the whole hierarchy)
+- The course metadata API (/api/courseware/course) for detailed top-level data, such as dates, enrollment status, info for tabs across the top of the page, etc.
+- The sequence metadata API (/api/courseware/sequence) for detailed information on a sequence, such as which unit to display, any banner messages, whether or not the sequence has a prerequisite, if it's an exam, etc.
+- The xblock endpoint (http://localhost:18000/xblock/:block_id) which renders HTML for an xBlock by ID, used to render Unit contents.  This HTML is loaded into the application via an iFrame.
+
+These APIs aren't perfect for our usage, but they're getting the job done for now.  They weren't built for our purposes and thus load more information than we strictly need, and aren't as performant as we'd like.  Future milestones of the application may rely on new, more performant APIs (possibly BFFs)
+
+## Unit iframing
+
+We determined, as part of our project discovery, that in order to deliver value to users sooner, we would iframe in content of units.  This allowed us to avoid rebuilding the UI for unit/component xblocks in the micro-frontend, which is a daunting task.  It also allows existing custom xblocks to continue to work for now, as they wouldn't have to be re-written.
+
+A future iteration of the project may go back and pull the unit rendering into the MFE.
+
+## Strictly hierarchical courses
+
+We've also made the assumption that courses are strictly hierarchical - a given section, sequence, or unit doesn't have multiple parents.  This is important, as it allows us to navigate the tree in the client in a deterministic way.  If we need to find out who the parent section of a sequence is, there's only one answer to that question.
+
+## Determining which sequences and units to show
+
+The courseware URL scheme:
+
+`/course/:courseId(/:sequenceId(/:unitId))`
+
+Sequence ID and unit ID are optional.
+
+Today, if the URL only specifies the course ID, we need to pick a sequence to show.  We do this by picking the first sequence of the course (as dictated by the course blocks API) and update the URL to match.  _After_ the URL has been updated, the application will attempt to load that sequence.
+
+Similarly, if the URL doesn't contain a unit ID, we use the `position` field of the sequence to determine which unit we want to display from that sequence.  If the position isn't specified in the sequence, we choose the first unit of the sequence.  After determining which unit to display, we update the URL to match.  After the URL is updated, the application will attempt to load that unit via an iFrame.
+
+## "Container" components vs. display components
+
+This application makes use of a few "container" components at the top level - CoursewareContainer and CourseHomeContainer.
+
+The point of these containers is to introduce a layer of abstraction between the UI representation of the pages and the way their data was loaded, as described above.
+
+We don't want our Course.jsx component to be intimately aware - for example - that it's data is loaded via two separate APIs that are then merged together.  That's not useful information - it just needs to know where it's data is and if it's loaded.  Furthermore, this layer of abstraction lets us normalize field names between the various APIs to let our MFE code be more consistent and readable.  This normalization is done in the src/data/api.js layer.
+
+## Navigation
+
+Course navigation in a hierarchical course happens primarily via the "sequence navigation".  This component lets users navigate to the next and previous unit in the course, and also select specific units within the sequence directly.  The next and previous buttons (SequenceNavigation and UnitNavigation) delegate decision making up the tree to CoursewareContainer.  This is an intentional separation of concerns which should allow different CoursewareContainer-like components to make different decisions about what it means to go to the "next" or "previous" sequence.  This is in support of future course types such as "pathway" courses and adaptive learning sequences.  There is no actual code written for these course types, but it felt like a good separation of concerns.

docs/decisions/0003-course-home-decisions.md

@@ -0,0 +1,7 @@
+# Course Home Decisions
+
+The course home page is not complete as of this writing.
+
+It was added to the MFE as a proof of concept for the Engagement theme's Always Available squad, as they were intending to do some work in the legacy course home page in the LMS, and we wanted to understand whether it would be more easily done in this application.
+
+It uses the same APIs as the courseware page, for the most part.  This may not always be the case, but it is for now.  Differing API shapes may be faster for both pages.

docs/decisions/0004-model-store.md

@@ -0,0 +1,9 @@
+## Model Store
+
+Because we have a variety of models in this app (course, section, sequence, unit), we use a set of generic 'model store' reducers in redux to manage this data.  Once loaded from the APIs, the data is put into the model store by type and by ID, which allows us to quickly access it in the application.  Furthermore, any sub-trees of model children (like "items" in the sequence metadata API) are flattened out and stored by ID in the model-store, and their arrays replaced by arrays of IDs.  This is a recommended way to store data in redux as documented here:
+
+https://redux.js.org/faq/organizing-state#how-do-i-organize-nested-or-duplicate-data-in-my-state
+
+Different modules of the application maintain individual/lists of IDs that reference data stored in the model store.  These are akin to indices in a database, in that they allow you to quickly extract data from the model store without iteration or filtering.  
+
+A common pattern when loading data from an API endpoint is to use the model-store's redux actions (addModel, updateModel, etc.) to load the "models" themselves into the model store by ID, and then dispatch another action to save references elsewhere in the redux store to the data that was just added.  When adding courses, sequences, etc., to model-store, we also save the courseId and sequenceId in the 'courseware' part of redux.  This means the courseware React Components can extract the data from the model-store quickly by using the courseId as a key: `state.models.courses[state.courseware.courseId]`.  For an array, it iterates once over the ID list in order to extract the models from model-store.  This iteration is done when React components' re-render, and can be done less often through memoization as necessary.

docs/decisions/0005-components-own-their-loading-state.md

@@ -0,0 +1,17 @@
+# Components Own Their Own Loading State
+
+Currently, the majority of the components in the component tree for both Courseware and CourseHome own their own loading state.  This means that they're _aware_ of the loading status (loading, loaded, failed) of the resources they depend on, and are expected to adjust their own rendering based on that state.
+
+The alternative is for a given component's parent to be responsible for this logic.  Under normal circumstances, if the parents were responsible, it would probably result in simpler code in general.  A component could just take for granted that if it's being rendered, all it's data must be ready.  
+
+*We think that that approach (giving the parents responsibility) isn't appropriate for this application.*
+
+We expect - in the longer term - that different courses/course staff may switch out component implementations.  Use a different form of SequenceNavigation, for instance.  Because of this, we didn't want parent components to be too aware of the nature of their children.  The children are more self-contained this way, though we sacrifice some simplicity for it.
+
+If, for instance, the Sequence component renders a skeleton of the SequenceNavigation, the look of that skeleton is going to be based on an understanding of how the SequenceNavigation renders itself.  If the SequenceNavigation implementation is switched out, that loading code in the Sequence may be wrong/misleading to the user.  If we leave the loading logic in the parent, we then have to branch it for all the types of SequenceNavigations that may exist - this violates the Open/Closed principle by forcing us to update our application when we try to make a new extension/implementation of a sub-component (assuming we have a plugin/extension/component replacement framework in place).
+
+By moving the loading logic into the components themselves, the idea is to allow a given component to render as much of itself as it reasonably can - this may mean just a spinner, or it may mean a "skeleton" UI while the resources are loading.  The parent doesn't need to be aware of the details.
+
+## Under what circumstances would we reverse this decision?
+
+If we find, in time, that we aren't seeing that "switching out component implementations" is a thing that's happening, then we can probably simplify the application code by giving parents the responsibility of deciding when to render their children, rather than keeping that responsibility with the children themselves.  

docs/decisions/0006-thunk-and-api-naming.md

@@ -0,0 +1,24 @@
+# Naming API functions and redux thunks
+
+Because API functions and redux thunks are two parts of a larger process, we've informally settled on some naming conventions for them to help differentiate the type of code we're looking at.
+
+## API Functions
+
+This micro-frontend follows a pattern of naming API functions with a prefix for their HTTP verb.
+
+Examples:
+
+`getCourseBlocks` - The GET request we make to load course blocks data.
+`postSequencePosition` - The POST request for saving sequence position.
+
+## Redux Thunks
+
+Meanwhile, we use a different set of verbs for redux thunks to differentiate them from the API functions.  For instance, we use the `fetch` prefix for loading data (primarily via GET requests), and `save` for sending data back to the server (primarily via POST or PATCH requests)
+
+Examples:
+
+`fetchCourse` - The thunk for getting course data across several APIs.
+`fetchSequence` - The thunk for the process of retrieving sequence data.
+`saveSequencePosition` - Wraps the POST request for sending sequence position back to the server.
+
+The verb prefixes for thunks aren't perfect - but they're a little more 'friendly' and semantically meaningful than the HTTP verbs used for APIs.  So far we have `fetch`, `save`, `check`, `reset`, etc.

docs/xblock-links.md

@@ -1,30 +0,0 @@
-# Perf test courses
-
-These courses have some large xblocks and small ones.  One course has many sequences, the other has fewer.
-
-## Big course:  course-v1:MITx+CTL.SC0x+3T2016
-
-- MFE URL: https://learning.edx.org/course/course-v1%3AMITx%2BCTL.SC0x%2B3T2016/0
-- URL: https://courses.edx.org/courses/course-v1:MITx+CTL.SC0x+3T2016/course/
-
-### Small xblock
-- ID: block-v1:MITx+CTL.SC0x+3T2016+type@vertical+block@0586b59f1cf74e3c982f0b9070e7ad33
-- URL: https://courses.edx.org/courses/course-v1:MITx+CTL.SC0x+3T2016/courseware/6a31d02d958e45a398d8a5f1592bdd78/b1ede7bf43c248e19894040718443750/1?activate_block_id=block-v1%3AMITx%2BCTL.SC0x%2B3T2016%2Btype%40vertical%2Bblock%400586b59f1cf74e3c982f0b9070e7ad33
-
-### Big xblock
-- ID: block-v1:MITx+CTL.SC0x+3T2016+type@vertical+block@84d6e785f548431a9e82e58d2df4e971
-- URL: https://courses.edx.org/courses/course-v1:MITx+CTL.SC0x+3T2016/courseware/b77abc02967e401ca615b23dacf8d115/4913db3e36f14ccd8c98c374b9dae809/2?activate_block_id=block-v1%3AMITx%2BCTL.SC0x%2B3T2016%2Btype%40vertical%2Bblock%4084d6e785f548431a9e82e58d2df4e971
-
-## Small course: course-v1:edX+DevSec101+3T2018
-
-- URL: https://courses.edx.org/courses/course-v1:edX+DevSec101+3T2018/course/
-- MFE URL: https://learning.edx.org/course/course-v1%3AedX%2BDevSec101%2B3T2018/0
-
-### Small xblock
-- ID: block-v1:edX+DevSec101+3T2018+type@vertical+block@931f96d1822a4fe5b521fcda19245dca
-- URL: https://courses.edx.org/courses/course-v1:edX+DevSec101+3T2018/courseware/ee898e64bd174e4aba4c07cd2673e5d3/1a37309647814ab8b333c7a17d50abc4/1?activate_block_id=block-v1%3AedX%2BDevSec101%2B3T2018%2Btype%40vertical%2Bblock%40931f96d1822a4fe5b521fcda19245dca
-
-### Big-ish xblock
-
-- ID: block-v1:edX+DevSec101+3T2018+type@vertical+block@d88210fbc2b74ceab167a52def04e2a0
-- URL: https://courses.edx.org/courses/course-v1:edX+DevSec101+3T2018/courseware/b0e2c2b78b5d49308e1454604a255403/38c7049bc8e44d309ab3bdb7f54ae6ae/2?activate_block_id=block-v1%3AedX%2BDevSec101%2B3T2018%2Btype%40vertical%2Bblock%40d88210fbc2b74ceab167a52def04e2a0

jest.config.js

@@ -1,7 +1,7 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
-  setupFiles: [
+  setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
   coveragePathIgnorePatterns: [

openedx.yaml

@@ -3,3 +3,8 @@
 
 oeps: {}
 owner: edx/platform-core-tnl
+openedx-release:
+  # The openedx-release key is described in OEP-10:
+  #   https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
+  # The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
+  ref: master

package.json

@@ -34,34 +34,44 @@
     "url": "https://github.com/edx/frontend-app-learning/issues"
   },
   "dependencies": {
-    "@edx/frontend-component-footer": "^10.0.6",
-    "@edx/frontend-component-header": "^2.0.3",
-    "@edx/frontend-platform": "^1.3.1",
-    "@edx/paragon": "^7.2.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.26",
-    "@fortawesome/free-brands-svg-icons": "^5.12.0",
-    "@fortawesome/free-regular-svg-icons": "^5.12.0",
-    "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@fortawesome/react-fontawesome": "^0.1.8",
-    "@reduxjs/toolkit": "^1.2.3",
-    "classnames": "^2.2.6",
-    "core-js": "^3.6.2",
-    "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-redux": "^7.1.3",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "redux": "^4.0.5",
-    "regenerator-runtime": "^0.13.3"
+    "@edx/frontend-component-footer": "10.0.11",
+    "@edx/frontend-component-header": "2.0.5",
+    "@edx/frontend-platform": "1.5.2",
+    "@edx/paragon": "7.2.1",
+    "@fortawesome/fontawesome-svg-core": "1.2.30",
+    "@fortawesome/free-brands-svg-icons": "5.13.1",
+    "@fortawesome/free-regular-svg-icons": "5.13.1",
+    "@fortawesome/free-solid-svg-icons": "5.13.1",
+    "@fortawesome/react-fontawesome": "0.1.11",
+    "@reduxjs/toolkit": "1.3.6",
+    "classnames": "2.2.6",
+    "core-js": "3.6.5",
+    "prop-types": "15.7.2",
+    "react": "16.13.1",
+    "react-break": "1.3.2",
+    "react-dom": "16.13.1",
+    "react-helmet": "6.0.0",
+    "react-redux": "7.2.1",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
+    "react-share": "4.2.1",
+    "redux": "4.0.5",
+    "regenerator-runtime": "0.13.7",
+    "reselect": "4.0.0"
   },
   "devDependencies": {
-    "@edx/frontend-build": "^3.0.0",
-    "codecov": "^3.6.1",
-    "es-check": "^5.1.0",
-    "glob": "^7.1.6",
-    "husky": "^3.1.0",
-    "jest": "^24.9.0",
-    "reactifex": "^1.1.1"
+    "@edx/frontend-build": "5.0.6",
+    "@testing-library/dom": "7.16.3",
+    "@testing-library/jest-dom": "5.10.1",
+    "@testing-library/react": "10.3.0",
+    "@testing-library/user-event": "12.0.17",
+    "axios-mock-adapter": "1.18.2",
+    "codecov": "3.7.2",
+    "es-check": "5.1.0",
+    "glob": "7.1.6",
+    "husky": "3.1.0",
+    "jest": "24.9.0",
+    "reactifex": "1.1.1",
+    "rosie": "2.0.1"
   }
 }

public/index.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en-us">
   <head>
-      <title>Course | edX</title>
+      <title>Course | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

src/CoursewareRedirect.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Switch, Route, useRouteMatch } from 'react-router';
+import { getConfig } from '@edx/frontend-platform';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import PageLoading from './generic/PageLoading';
+
+export default () => {
+  const { path } = useRouteMatch();
+  return (
+    <div className="flex-grow-1">
+      <PageLoading srMessage={(
+        <FormattedMessage
+          id="learn.redirect.interstitial.message"
+          description="The screen-reader message when a page is about to redirect"
+          defaultMessage="Redirecting..."
+        />
+      )}
+      />
+
+      <Switch>
+        <Route
+          path={`${path}/course-home/:courseId`}
+          render={({ match }) => {
+            global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${match.params.courseId}/course/`);
+          }}
+        />
+        <Route
+          path={`${path}/dashboard`}
+          render={({ location }) => {
+            global.location.assign(`${getConfig().LMS_BASE_URL}/dashboard${location.search}`);
+          }}
+        />
+      </Switch>
+    </div>
+  );
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Alert, ALERT_TYPES } from '../../generic/user-messages';
+
+function AccessExpirationAlert({ payload }) {
+  const {
+    rawHtml,
+  } = payload;
+  return rawHtml && (
+    <Alert type={ALERT_TYPES.INFO}>
+      {/* eslint-disable-next-line react/no-danger */}
+      <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
+    </Alert>
+  );
+}
+
+AccessExpirationAlert.propTypes = {
+  payload: PropTypes.shape({
+    rawHtml: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default AccessExpirationAlert;

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

@@ -0,0 +1,21 @@
+import React, { useMemo } from 'react';
+import { useAlert } from '../../generic/user-messages';
+
+const AccessExpirationAlert = React.lazy(() => import('./AccessExpirationAlert'));
+
+function useAccessExpirationAlert(courseExpiredMessage, topic) {
+  const rawHtml = courseExpiredMessage || null;
+  const isVisible = !!rawHtml; // If it exists, show it.
+
+  const payload = useMemo(() => ({ rawHtml }), [rawHtml]);
+
+  useAlert(isVisible, {
+    code: 'clientAccessExpirationAlert',
+    payload,
+    topic,
+  });
+
+  return { clientAccessExpirationAlert: AccessExpirationAlert };
+}
+
+export default useAccessExpirationAlert;

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

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

src/alerts/enrollment-alert/EnrollmentAlert.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { Button } from '@edx/paragon';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { Alert, ALERT_TYPES } from '../../generic/user-messages';
+
+import messages from './messages';
+import { useEnrollClickHandler } from './hooks';
+
+function EnrollmentAlert({ intl, payload }) {
+  const {
+    canEnroll,
+    courseId,
+    extraText,
+    isStaff,
+  } = payload;
+
+  const { enrollClickHandler, loading } = useEnrollClickHandler(
+    courseId,
+    intl.formatMessage(messages.success),
+  );
+
+  let text = intl.formatMessage(messages.alert);
+  let type = ALERT_TYPES.ERROR;
+  if (isStaff) {
+    text = intl.formatMessage(messages.staffAlert);
+    type = ALERT_TYPES.INFO;
+  } else if (extraText) {
+    text = `${text} ${extraText}`;
+  }
+
+  const button = canEnroll && (
+    <Button disabled={loading} className="btn-link p-0 border-0 align-top" onClick={enrollClickHandler}>
+      {intl.formatMessage(messages.enroll)}
+    </Button>
+  );
+
+  return (
+    <Alert type={type}>
+      {text}
+      {' '}
+      {button}
+      {' '}
+      {loading && <FontAwesomeIcon icon={faSpinner} spin />}
+    </Alert>
+  );
+}
+
+EnrollmentAlert.propTypes = {
+  intl: intlShape.isRequired,
+  payload: PropTypes.shape({
+    canEnroll: PropTypes.bool,
+    courseId: PropTypes.string,
+    extraText: PropTypes.string,
+    isStaff: PropTypes.bool,
+  }).isRequired,
+};
+
+export default injectIntl(EnrollmentAlert);

src/alerts/enrollment-alert/data/api.js

@@ -0,0 +1,9 @@
+/* eslint-disable import/prefer-default-export */
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
+
+export async function postCourseEnrollment(courseId) {
+  const url = `${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment`;
+  const { data } = await getAuthenticatedHttpClient().post(url, { course_details: { course_id: courseId } });
+  return data;
+}

src/alerts/enrollment-alert/hooks.js

@@ -0,0 +1,51 @@
+/* eslint-disable import/prefer-default-export */
+import React, {
+  useContext, useState, useCallback,
+} from 'react';
+
+import { UserMessagesContext, ALERT_TYPES, useAlert } from '../../generic/user-messages';
+import { useModel } from '../../generic/model-store';
+
+import { postCourseEnrollment } from './data/api';
+
+const EnrollmentAlert = React.lazy(() => import('./EnrollmentAlert'));
+
+export function useEnrollmentAlert(courseId) {
+  const course = useModel('courses', courseId);
+  const outline = useModel('outline', courseId);
+  const isVisible = course && course.isEnrolled !== undefined && !course.isEnrolled;
+
+  useAlert(isVisible, {
+    code: 'clientEnrollmentAlert',
+    payload: {
+      canEnroll: outline.enrollAlert.canEnroll,
+      courseId,
+      extraText: outline.enrollAlert.extraText,
+      isStaff: course.isStaff,
+    },
+    topic: 'outline',
+  });
+
+  return { clientEnrollmentAlert: EnrollmentAlert };
+}
+
+export function useEnrollClickHandler(courseId, successText) {
+  const [loading, setLoading] = useState(false);
+  const { addFlash } = useContext(UserMessagesContext);
+  const enrollClickHandler = useCallback(() => {
+    setLoading(true);
+    postCourseEnrollment(courseId).then(() => {
+      addFlash({
+        dismissible: true,
+        flash: true,
+        text: successText,
+        type: ALERT_TYPES.SUCCESS,
+        topic: 'course',
+      });
+      setLoading(false);
+      global.location.reload();
+    });
+  }, [courseId]);
+
+  return { enrollClickHandler, loading };
+}

src/alerts/enrollment-alert/index.js

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

src/alerts/enrollment-alert/messages.js

@@ -1,16 +1,26 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  'learning.enrollment.alert': {
+  alert: {
     id: 'learning.enrollment.alert',
     defaultMessage: 'You must be enrolled in the course to see course content.',
     description: 'Message shown to indicate that a user needs to enroll in a course prior to viewing the course content.  Shown as part of an alert, along with a link to enroll.',
   },
-  'learning.enrollment.enroll.now': {
+  staffAlert: {
+    id: 'learning.staff.enrollment.alert',
+    defaultMessage: 'You are viewing this course as staff, and are not enrolled.',
+    description: 'Message shown to indicate that a user is not enrolled, but is able to view a course anyway because they are staff. Shown as part of an alert, along with a link to enroll.',
+  },
+  enroll: {
     id: 'learning.enrollment.enroll.now',
     defaultMessage: 'Enroll Now',
     description: 'A link prompting the user to click on it to enroll in the currently viewed course.',
   },
+  success: {
+    id: 'learning.enrollment.success',
+    defaultMessage: "You've successfully enrolled in this course!",
+    description: 'A message telling the user that their course enrollment was successful.',
+  },
 });
 
 export default messages;

src/alerts/logistration-alert/LogistrationAlert.jsx

@@ -3,13 +3,13 @@ import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
 
-import Alert from '../user-messages/Alert';
+import { Alert } from '../../generic/user-messages';
 import messages from './messages';
 
 function LogistrationAlert({ intl }) {
   const signIn = (
     <a href={`${getLoginRedirectUrl(global.location.href)}`}>
-      {intl.formatMessage(messages['learning.logistration.login'])}
+      {intl.formatMessage(messages.login)}
     </a>
   );
 
@@ -17,7 +17,7 @@ function LogistrationAlert({ intl }) {
   // This is complicated by the fact that we don't have a REGISTER_URL env variable available.
   const register = (
     <a href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}>
-      {intl.formatMessage(messages['learning.logistration.register'])}
+      {intl.formatMessage(messages.register)}
     </a>
   );
 

src/alerts/logistration-alert/hooks.js

@@ -0,0 +1,20 @@
+/* eslint-disable import/prefer-default-export */
+import React, { useContext } from 'react';
+import { AppContext } from '@edx/frontend-platform/react';
+import { ALERT_TYPES, useAlert } from '../../generic/user-messages';
+
+const LogistrationAlert = React.lazy(() => import('./LogistrationAlert'));
+
+export function useLogistrationAlert() {
+  const { authenticatedUser } = useContext(AppContext);
+  const isVisible = authenticatedUser === null;
+
+  useAlert(isVisible, {
+    code: 'clientLogistrationAlert',
+    topic: 'outline',
+    dismissible: false,
+    type: ALERT_TYPES.ERROR,
+  });
+
+  return { clientLogistrationAlert: LogistrationAlert };
+}

src/alerts/logistration-alert/index.js

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

src/alerts/logistration-alert/messages.js

@@ -1,12 +1,12 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  'learning.logistration.login': {
+  login: {
     id: 'learning.logistration.login',
     defaultMessage: 'sign in',
     description: 'Text in a link, prompting the user to log in.  Used in "learning.logistration.alert"',
   },
-  'learning.logistration.register': {
+  register: {
     id: 'learning.logistration.register',
     defaultMessage: 'register',
     description: 'Text in a link, prompting the user to create an account.  Used in "learning.logistration.alert"',

src/alerts/offer-alert/OfferAlert.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Alert, ALERT_TYPES } from '../../generic/user-messages';
+
+function OfferAlert({ payload }) {
+  const {
+    rawHtml,
+  } = payload;
+  return rawHtml && (
+    <Alert type={ALERT_TYPES.INFO}>
+      {/* eslint-disable-next-line react/no-danger */}
+      <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
+    </Alert>
+  );
+}
+
+OfferAlert.propTypes = {
+  payload: PropTypes.shape({
+    rawHtml: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default OfferAlert;

src/alerts/offer-alert/hooks.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useAlert } from '../../generic/user-messages';
+
+const OfferAlert = React.lazy(() => import('./OfferAlert'));
+
+export function useOfferAlert(offerHtml, topic) {
+  const rawHtml = offerHtml || null;
+  const isVisible = !!rawHtml; // if it exists, show it.
+
+  useAlert(isVisible, {
+    code: 'clientOfferAlert',
+    topic,
+    payload: { rawHtml },
+  });
+
+  return { clientOfferAlert: OfferAlert };
+}
+
+export default useOfferAlert;

src/alerts/offer-alert/index.js

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

src/course-header/CourseTabsNavigation.jsx

@@ -4,28 +4,28 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 
 import messages from './messages';
-import NavTab from './NavTab';
+import Tabs from '../generic/tabs/Tabs';
 
 function CourseTabsNavigation({
-  activeTabSlug, tabs, intl, className,
+  activeTabSlug, className, tabs, intl,
 }) {
-  const courseNavTabs = tabs.map(({ slug, ...courseTab }) => (
-    <NavTab
-      isActive={slug === activeTabSlug}
-      key={slug}
-      {...courseTab}
-    />
-  ));
-
   return (
-    <div className="course-tabs-navigation">
+    <div className={classNames('course-tabs-navigation', className)}>
       <div className="container-fluid">
-        <nav
+        <Tabs
+          className="nav-underline-tabs"
           aria-label={intl.formatMessage(messages['learn.navigation.course.tabs.label'])}
-          className={classNames('nav nav-underline-tabs', className)}
         >
-          {courseNavTabs}
-        </nav>
+          {tabs.map(({ url, title, slug }) => (
+            <a
+              key={slug}
+              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTabSlug })}
+              href={url}
+            >
+              {title}
+            </a>
+          ))}
+        </Tabs>
       </div>
     </div>
   );
@@ -36,7 +36,6 @@ CourseTabsNavigation.propTypes = {
   className: PropTypes.string,
   tabs: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string.isRequired,
-    priority: PropTypes.number.isRequired,
     slug: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
   })).isRequired,

src/course-header/Header.jsx

@@ -4,7 +4,10 @@ import { Dropdown } from '@edx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 
-import logo from './logo.svg';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
+
+import logo from './assets/logo.svg';
 
 function LinkedLogo({
   href,
@@ -25,13 +28,13 @@ LinkedLogo.propTypes = {
   alt: PropTypes.string.isRequired,
 };
 
-export default function CourseHeader({
-  courseOrg, courseNumber, courseName,
+export default function Header({
+  courseOrg, courseNumber, courseTitle,
 }) {
   const { authenticatedUser } = useContext(AppContext);
 
   return (
-    <header>
+    <header className="course-header">
       <div className="container-fluid py-2 d-flex align-items-center ">
         <LinkedLogo
           className="logo"
@@ -39,14 +42,17 @@ export default function CourseHeader({
           src={logo}
           alt={getConfig().SITE_NAME}
         />
-        <div className="flex-grow-1" style={{ lineHeight: 1 }}>
+        <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">{courseName}</span>
+          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
         </div>
 
-        <Dropdown>
+        <Dropdown className="user-dropdown">
           <Dropdown.Button>
-            {authenticatedUser.username}
+            <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+            <span className="d-none d-md-inline">
+              {authenticatedUser.username}
+            </span>
           </Dropdown.Button>
           <Dropdown.Menu className="dropdown-menu-right">
             <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>Dashboard</Dropdown.Item>
@@ -61,8 +67,14 @@ export default function CourseHeader({
   );
 }
 
-CourseHeader.propTypes = {
-  courseOrg: PropTypes.string.isRequired,
-  courseNumber: PropTypes.string.isRequired,
-  courseName: PropTypes.string.isRequired,
+Header.propTypes = {
+  courseOrg: PropTypes.string,
+  courseNumber: PropTypes.string,
+  courseTitle: PropTypes.string,
+};
+
+Header.defaultProps = {
+  courseOrg: null,
+  courseNumber: null,
+  courseTitle: null,
 };

src/course-header/index.js

@@ -0,0 +1,2 @@
+export { default as Header } from './Header';
+export { default as CourseTabsNavigation } from './CourseTabsNavigation';

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

@@ -0,0 +1,23 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+
+Factory.define('courseHomeMetadata')
+  .sequence(
+    'course_id',
+    (courseId) => `course-v1:edX+DemoX+Demo_Course_${courseId}`,
+  )
+  .option('courseTabs', [])
+  .option('host', 'http://localhost:18000')
+  .attrs({
+    is_staff: false,
+    number: 'DemoX',
+    org: 'edX',
+    title: 'Demonstration Course',
+    is_self_paced: false,
+  })
+  .attr('tabs', ['courseTabs', 'host'], (courseTabs, host) => courseTabs.map(
+    tab => ({
+      tab_id: tab.slug,
+      title: tab.title,
+      url: `${host}${tab.url}`,
+    }),
+  ));

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

@@ -0,0 +1,27 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+
+Factory.define('datesTabData')
+  .attrs({
+    dates_banner_info: {
+      content_type_gating_enabled: false,
+      missed_gated_content: false,
+      missed_deadlines: false,
+    },
+    course_date_blocks: [
+      {
+        assigment_type: 'Homework',
+        date: '2013-02-05T05:00:00Z',
+        date_type: 'course-start-date',
+        description: '',
+        learner_has_access: true,
+        link: '',
+        title: 'Course Starts',
+        extraInfo: '',
+      },
+    ],
+    missed_deadlines: false,
+    missed_gated_content: false,
+    learner_is_full_access: true,
+    user_timezone: null,
+    verified_upgrade_link: 'http://localhost:18130/basket/add/?sku=8CF08E5',
+  });

src/course-home/data/__factories__/index.js

@@ -0,0 +1,3 @@
+import './courseHomeMetadata.factory';
+import './datesTabData.factory';
+import './outlineTabData.factory';

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

@@ -0,0 +1,24 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+
+import buildSimpleCourseBlocks from '../../../courseware/data/__factories__/courseBlocks.factory';
+
+Factory.define('outlineTabData')
+  .option('courseId', 'course-v1:edX+DemoX+Demo_Course')
+  .option('host', 'http://localhost:18000')
+  .attr('course_tools', ['host', 'courseId'], (host, courseId) => ({
+    analytics_id: 'edx.bookmarks',
+    title: 'Bookmarks',
+    url: `${host}/courses/${courseId}/bookmarks/`,
+  }))
+  .attr('course_blocks', ['courseId'], courseId => {
+    const { courseBlocks } = buildSimpleCourseBlocks(courseId);
+    return {
+      blocks: courseBlocks.blocks,
+    };
+  })
+  .attr('enroll_alert', {
+    can_enroll: true,
+    extra_text: 'Contact the administrator.',
+  })
+  .attr('handouts_html', [], () => '<ul><li>Handout 1</li></ul>')
+  .attr('offer_html', [], () => '<div>Great offer here</div>');

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

@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Data layer integration tests Should initialize store 1`] = `
+Object {
+  "courseHome": Object {
+    "courseId": null,
+    "courseStatus": "loading",
+  },
+  "courseware": Object {
+    "courseId": null,
+    "courseStatus": "loading",
+    "sequenceId": null,
+    "sequenceStatus": "loading",
+  },
+  "models": Object {},
+}
+`;
+
+exports[`Data layer integration tests Test fetchDatesTab Should fetch, normalize, and save metadata 1`] = `
+Object {
+  "courseHome": Object {
+    "courseId": "course-v1:edX+DemoX+Demo_Course_1",
+    "courseStatus": "loaded",
+  },
+  "courseware": Object {
+    "courseId": null,
+    "courseStatus": "loading",
+    "sequenceId": null,
+    "sequenceStatus": "loading",
+  },
+  "models": Object {
+    "courses": Object {
+      "course-v1:edX+DemoX+Demo_Course_1": Object {
+        "courseId": "course-v1:edX+DemoX+Demo_Course_1",
+        "id": "course-v1:edX+DemoX+Demo_Course_1",
+        "isSelfPaced": false,
+        "isStaff": false,
+        "number": "DemoX",
+        "org": "edX",
+        "tabs": Array [
+          Object {
+            "slug": "courseware",
+            "title": "Course",
+            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/course/",
+          },
+          Object {
+            "slug": "discussion",
+            "title": "Discussion",
+            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/discussion/forum/",
+          },
+          Object {
+            "slug": "wiki",
+            "title": "Wiki",
+            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/course_wiki",
+          },
+          Object {
+            "slug": "progress",
+            "title": "Progress",
+            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/progress",
+          },
+          Object {
+            "slug": "instructor",
+            "title": "Instructor",
+            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/instructor",
+          },
+        ],
+        "title": "Demonstration Course",
+      },
+    },
+    "dates": Object {
+      "course-v1:edX+DemoX+Demo_Course_1": Object {
+        "courseDateBlocks": Array [
+          Object {
+            "assigmentType": "Homework",
+            "date": "2013-02-05T05:00:00Z",
+            "dateType": "course-start-date",
+            "description": "",
+            "extraInfo": "",
+            "learnerHasAccess": true,
+            "link": "",
+            "title": "Course Starts",
+          },
+        ],
+        "datesBannerInfo": Object {
+          "contentTypeGatingEnabled": false,
+          "missedDeadlines": false,
+          "missedGatedContent": false,
+        },
+        "id": "course-v1:edX+DemoX+Demo_Course_1",
+        "learnerIsFullAccess": true,
+        "missedDeadlines": false,
+        "missedGatedContent": false,
+        "userTimezone": null,
+        "verifiedUpgradeLink": "http://localhost:18130/basket/add/?sku=8CF08E5",
+      },
+    },
+  },
+}
+`;
+
+exports[`Data layer integration tests Test fetchOutlineTab Should fetch, normalize, and save metadata 1`] = `
+Object {
+  "courseHome": Object {
+    "courseId": "course-v1:edX+DemoX+Demo_Course_1",
+    "courseStatus": "loaded",
+  },
+  "courseware": Object {
+    "courseId": null,
+    "courseStatus": "loading",
+    "sequenceId": null,
+    "sequenceStatus": "loading",
+  },
+  "models": Object {
+    "courses": Object {
+      "course-v1:edX+DemoX+Demo_Course_1": Object {
+        "courseId": "course-v1:edX+DemoX+Demo_Course_1",
+        "id": "course-v1:edX+DemoX+Demo_Course_1",
+        "isSelfPaced": false,
+        "isStaff": false,
+        "number": "DemoX",
+        "org": "edX",
+        "tabs": Array [
+          Object {
+            "slug": "courseware",
+            "title": "Course",
+            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/course/",
+          },
+          Object {
+            "slug": "discussion",
+            "title": "Discussion",
+            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/discussion/forum/",
+          },
+          Object {
+            "slug": "wiki",
+            "title": "Wiki",
+            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/course_wiki",
+          },
+          Object {
+            "slug": "progress",
+            "title": "Progress",
+            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/progress",
+          },
+          Object {
+            "slug": "instructor",
+            "title": "Instructor",
+            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course_1/instructor",
+          },
+        ],
+        "title": "Demonstration Course",
+      },
+    },
+    "outline": Object {
+      "course-v1:edX+DemoX+Demo_Course_1": Object {
+        "courseBlocks": Object {
+          "courses": Object {
+            "block-v1:edX+DemoX+Demo_Course+type@course+block@bcdabcdabcdabcdabcdabcdabcdabcd4": Object {
+              "id": "course-v1:edX+DemoX+Demo_Course_1",
+              "sectionIds": Array [
+                "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd3",
+              ],
+              "title": "bcdabcdabcdabcdabcdabcdabcdabcd4",
+            },
+          },
+          "sections": Object {
+            "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd3": Object {
+              "courseId": "course-v1:edX+DemoX+Demo_Course_1",
+              "id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd3",
+              "sequenceIds": Array [
+                "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
+              ],
+              "title": "bcdabcdabcdabcdabcdabcdabcdabcd3",
+            },
+          },
+          "sequences": Object {
+            "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd2": Object {
+              "id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
+              "lmsWebUrl": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
+              "sectionId": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd3",
+              "title": "bcdabcdabcdabcdabcdabcdabcdabcd2",
+              "unitIds": Array [
+                "block-v1:edX+DemoX+Demo_Course+type@vertical+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+              ],
+            },
+          },
+          "units": Object {
+            "block-v1:edX+DemoX+Demo_Course+type@vertical+block@bcdabcdabcdabcdabcdabcdabcdabcd1": Object {
+              "graded": false,
+              "id": "block-v1:edX+DemoX+Demo_Course+type@vertical+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+              "lmsWebUrl": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@vertical+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+              "sequenceId": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
+              "title": "bcdabcdabcdabcdabcdabcdabcdabcd1",
+            },
+          },
+        },
+        "courseTools": Object {
+          "analyticsId": "edx.bookmarks",
+          "title": "Bookmarks",
+          "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/bookmarks/",
+        },
+        "datesWidget": undefined,
+        "enrollAlert": Object {
+          "canEnroll": true,
+          "extraText": "Contact the administrator.",
+        },
+        "handoutsHtml": "<ul><li>Handout 1</li></ul>",
+        "id": "course-v1:edX+DemoX+Demo_Course_1",
+        "offerHtml": "<div>Great offer here</div>",
+        "welcomeMessageHtml": undefined,
+      },
+    },
+  },
+}
+`;

src/course-home/data/api.js

@@ -0,0 +1,100 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+// TODO: Pull this normalization function up so we're not reaching into courseware
+import { normalizeBlocks } from '../../courseware/data/api';
+
+function normalizeCourseHomeCourseMetadata(metadata) {
+  const data = camelCaseObject(metadata);
+  return {
+    ...data,
+    tabs: data.tabs.map(tab => ({
+      slug: tab.tabId,
+      title: tab.title,
+      url: tab.url,
+    })),
+  };
+}
+
+export async function getCourseHomeCourseMetadata(courseId) {
+  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+  const { data } = await getAuthenticatedHttpClient().get(url);
+  return normalizeCourseHomeCourseMetadata(data);
+}
+
+export async function getDatesTabData(courseId) {
+  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/dates/${courseId}`;
+  try {
+    const { data } = await getAuthenticatedHttpClient().get(url);
+    return camelCaseObject(data);
+  } catch (error) {
+    const { httpErrorStatus } = error && error.customAttributes;
+    if (httpErrorStatus === 404) {
+      global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/dates`);
+      return {};
+    }
+    throw error;
+  }
+}
+
+export async function getProgressTabData(courseId) {
+  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
+  try {
+    const { data } = await getAuthenticatedHttpClient().get(url);
+    return camelCaseObject(data);
+  } catch (error) {
+    const { httpErrorStatus } = error && error.customAttributes;
+    if (httpErrorStatus === 404) {
+      global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/progress`);
+      return {};
+    }
+    throw error;
+  }
+}
+
+export async function getOutlineTabData(courseId) {
+  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/outline/${courseId}`;
+  let { tabData } = {};
+  try {
+    tabData = await getAuthenticatedHttpClient().get(url);
+  } catch (error) {
+    const { httpErrorStatus } = error && error.customAttributes;
+    if (httpErrorStatus === 404) {
+      global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/course/`);
+      return {};
+    }
+    throw error;
+  }
+
+  const {
+    data,
+  } = tabData;
+  const courseBlocks = normalizeBlocks(courseId, data.course_blocks.blocks);
+  const courseExpiredHtml = data.course_expired_html;
+  const courseTools = camelCaseObject(data.course_tools);
+  const datesWidget = camelCaseObject(data.dates_widget);
+  const enrollAlert = camelCaseObject(data.enroll_alert);
+  const handoutsHtml = data.handouts_html;
+  const offerHtml = data.offer_html;
+  const welcomeMessageHtml = data.welcome_message_html;
+
+  return {
+    courseBlocks,
+    courseExpiredHtml,
+    courseTools,
+    datesWidget,
+    enrollAlert,
+    handoutsHtml,
+    offerHtml,
+    welcomeMessageHtml,
+  };
+}
+
+export async function postCourseDeadlines(courseId) {
+  const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_experience/v1/reset_course_deadlines`);
+  await getAuthenticatedHttpClient().post(url.href, { course_key: courseId });
+}
+
+export async function postDismissWelcomeMessage(courseId) {
+  const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_home/v1/dismiss_welcome_message`);
+  await getAuthenticatedHttpClient().post(url.href, { course_id: courseId });
+}

src/course-home/data/index.js

@@ -0,0 +1,8 @@
+export {
+  fetchDatesTab,
+  fetchOutlineTab,
+  fetchProgressTab,
+  resetDeadlines,
+} from './thunks';
+
+export { reducer } from './slice';

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

@@ -0,0 +1,138 @@
+import { Factory } from 'rosie';
+import MockAdapter from 'axios-mock-adapter';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
+
+import * as thunks from './thunks';
+
+import executeThunk from '../../utils';
+
+import initializeMockApp from '../../setupTest';
+import initializeStore from '../../store';
+
+const { loggingService } = initializeMockApp();
+
+const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+describe('Data layer integration tests', () => {
+  const courseMetadata = Factory.build('courseMetadata');
+  const courseHomeMetadata = Factory.build(
+    'courseHomeMetadata', {
+      course_id: courseMetadata.id,
+    },
+    { courseTabs: courseMetadata.tabs },
+  );
+
+  const courseId = courseMetadata.id;
+  const courseBaseUrl = `${getConfig().LMS_BASE_URL}/api/courseware/course`;
+  const courseMetadataBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata`;
+
+  const courseUrl = `${courseBaseUrl}/${courseId}`;
+  const courseMetadataUrl = `${courseMetadataBaseUrl}/${courseId}`;
+
+  let store;
+
+  beforeEach(() => {
+    axiosMock.reset();
+    loggingService.logError.mockReset();
+
+    store = initializeStore();
+  });
+
+  it('Should initialize store', () => {
+    expect(store.getState()).toMatchSnapshot();
+  });
+
+  describe('Test fetchDatesTab', () => {
+    const datesBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/dates`;
+
+    it('Should fail to fetch if error occurs', async () => {
+      axiosMock.onGet(courseUrl).networkError();
+      axiosMock.onGet(courseMetadataUrl).networkError();
+      axiosMock.onGet(`${datesBaseUrl}/${courseId}`).networkError();
+
+      await executeThunk(thunks.fetchDatesTab(courseId), store.dispatch);
+
+      expect(loggingService.logError).toHaveBeenCalled();
+      expect(store.getState().courseHome.courseStatus).toEqual('failed');
+    });
+
+    it('Should fetch, normalize, and save metadata', async () => {
+      const datesTabData = Factory.build('datesTabData');
+
+      const datesUrl = `${datesBaseUrl}/${courseId}`;
+
+      axiosMock.onGet(courseUrl).reply(200, courseMetadata);
+      axiosMock.onGet(courseMetadataUrl).reply(200, courseHomeMetadata);
+      axiosMock.onGet(datesUrl).reply(200, datesTabData);
+
+      await executeThunk(thunks.fetchDatesTab(courseId), store.dispatch);
+
+      const state = store.getState();
+      expect(state.courseHome.courseStatus).toEqual('loaded');
+      expect(state).toMatchSnapshot();
+    });
+  });
+
+  describe('Test fetchOutlineTab', () => {
+    const outlineBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/outline`;
+
+    it('Should result in fetch failure if error occurs', async () => {
+      axiosMock.onGet(courseUrl).networkError();
+      axiosMock.onGet(courseMetadataUrl).networkError();
+      axiosMock.onGet(`${outlineBaseUrl}/${courseId}`).networkError();
+
+      await executeThunk(thunks.fetchOutlineTab(courseId), store.dispatch);
+
+      expect(loggingService.logError).toHaveBeenCalled();
+      expect(store.getState().courseHome.courseStatus).toEqual('failed');
+    });
+
+    it('Should fetch, normalize, and save metadata', async () => {
+      const outlineTabData = Factory.build('outlineTabData', { courseId });
+
+      const outlineUrl = `${outlineBaseUrl}/${courseId}`;
+
+      axiosMock.onGet(courseUrl).reply(200, courseMetadata);
+      axiosMock.onGet(courseMetadataUrl).reply(200, courseHomeMetadata);
+      axiosMock.onGet(outlineUrl).reply(200, outlineTabData);
+
+      await executeThunk(thunks.fetchOutlineTab(courseId), store.dispatch);
+
+      const state = store.getState();
+      expect(state.courseHome.courseStatus).toEqual('loaded');
+      expect(state).toMatchSnapshot();
+    });
+  });
+
+  describe('Test resetDeadlines', () => {
+    it('Should reset course deadlines', async () => {
+      const resetUrl = `${getConfig().LMS_BASE_URL}/api/course_experience/v1/reset_course_deadlines`;
+      axiosMock.onPost(resetUrl).reply(201);
+
+      const getTabDataMock = jest.fn(() => ({
+        type: 'MOCK_ACTION',
+      }));
+
+      await executeThunk(thunks.resetDeadlines(courseId, getTabDataMock), store.dispatch);
+
+      expect(axiosMock.history.post[0].url).toEqual(resetUrl);
+      expect(axiosMock.history.post[0].data).toEqual(`{"course_key":"${courseId}"}`);
+
+      expect(getTabDataMock).toHaveBeenCalledWith(courseId);
+    });
+  });
+
+  describe('Test dismissWelcomeMessage', () => {
+    it('Should dismiss welcome message', async () => {
+      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);
+
+      expect(axiosMock.history.post[0].url).toEqual(dismissUrl);
+      expect(axiosMock.history.post[0].data).toEqual(`{"course_id":"${courseId}"}`);
+    });
+  });
+});

src/course-home/data/slice.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+export const LOADING = 'loading';
+export const LOADED = 'loaded';
+export const FAILED = 'failed';
+
+const slice = createSlice({
+  name: 'course-home',
+  initialState: {
+    courseStatus: 'loading',
+    courseId: null,
+  },
+  reducers: {
+    fetchTabRequest: (state, { payload }) => {
+      state.courseId = payload.courseId;
+      state.courseStatus = LOADING;
+    },
+    fetchTabSuccess: (state, { payload }) => {
+      state.courseId = payload.courseId;
+      state.courseStatus = LOADED;
+    },
+    fetchTabFailure: (state, { payload }) => {
+      state.courseId = payload.courseId;
+      state.courseStatus = FAILED;
+    },
+  },
+});
+
+export const {
+  fetchTabRequest,
+  fetchTabSuccess,
+  fetchTabFailure,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;

src/course-home/data/thunks.js

@@ -0,0 +1,86 @@
+import { logError } from '@edx/frontend-platform/logging';
+import {
+  getCourseHomeCourseMetadata,
+  getDatesTabData,
+  getOutlineTabData,
+  getProgressTabData,
+  postCourseDeadlines,
+  postDismissWelcomeMessage,
+} from './api';
+
+import {
+  addModel,
+} from '../../generic/model-store';
+
+import {
+  fetchTabFailure,
+  fetchTabRequest,
+  fetchTabSuccess,
+} from './slice';
+
+export function fetchTab(courseId, tab, getTabData) {
+  return async (dispatch) => {
+    dispatch(fetchTabRequest({ courseId }));
+    Promise.allSettled([
+      getCourseHomeCourseMetadata(courseId),
+      getTabData(courseId),
+    ]).then(([courseHomeCourseMetadataResult, tabDataResult]) => {
+      const fetchedCourseHomeCourseMetadata = courseHomeCourseMetadataResult.status === 'fulfilled';
+      const fetchedTabData = tabDataResult.status === 'fulfilled';
+
+      if (fetchedCourseHomeCourseMetadata) {
+        dispatch(addModel({
+          modelType: 'courses',
+          model: {
+            id: courseId,
+            ...courseHomeCourseMetadataResult.value,
+          },
+        }));
+      } else {
+        logError(courseHomeCourseMetadataResult.reason);
+      }
+
+      if (fetchedTabData) {
+        dispatch(addModel({
+          modelType: tab,
+          model: {
+            id: courseId,
+            ...tabDataResult.value,
+          },
+        }));
+      } else {
+        logError(tabDataResult.reason);
+      }
+
+      if (fetchedCourseHomeCourseMetadata && fetchedTabData) {
+        dispatch(fetchTabSuccess({ courseId }));
+      } else {
+        dispatch(fetchTabFailure({ courseId }));
+      }
+    });
+  };
+}
+
+export function fetchDatesTab(courseId) {
+  return fetchTab(courseId, 'dates', getDatesTabData);
+}
+
+export function fetchProgressTab(courseId) {
+  return fetchTab(courseId, 'progress', getProgressTabData);
+}
+
+export function fetchOutlineTab(courseId) {
+  return fetchTab(courseId, 'outline', getOutlineTabData);
+}
+
+export function resetDeadlines(courseId, getTabData) {
+  return async (dispatch) => {
+    postCourseDeadlines(courseId).then(() => {
+      dispatch(getTabData(courseId));
+    });
+  };
+}
+
+export function dismissWelcomeMessage(courseId) {
+  return async () => postDismissWelcomeMessage(courseId);
+}

src/course-home/dates-banner/DatesBanner.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+function DatesBanner(props) {
+  const {
+    intl,
+    name,
+    bannerClickHandler,
+  } = props;
+
+  return (
+    <div className="banner rounded my-4 p-4 container-fluid border border-primary-200 bg-info-100">
+      <div className="row w-100 m-0 justify-content-start justify-content-sm-between">
+        <div className={name === 'datesTabInfoBanner' ? 'col-12' : 'col-12 col-md-9'}>
+          <strong>
+            {intl.formatMessage(messages[`datesBanner.${name}.header`])}
+          </strong>
+          {intl.formatMessage(messages[`datesBanner.${name}.body`])}
+        </div>
+        {bannerClickHandler && (
+          <div className="col-auto col-md-3 p-md-0 d-inline-flex align-items-center justify-content-start justify-content-md-center">
+            <button type="button" className="btn rounded align-self-center border border-primary bg-white mt-3 mt-md-0 font-weight-bold" onClick={bannerClickHandler}>
+              {intl.formatMessage(messages[`datesBanner.${name}.button`])}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+DatesBanner.propTypes = {
+  intl: intlShape.isRequired,
+  name: PropTypes.string.isRequired,
+  bannerClickHandler: PropTypes.func,
+};
+
+DatesBanner.defaultProps = {
+  bannerClickHandler: null,
+};
+
+export default injectIntl(DatesBanner);

src/course-home/dates-banner/DatesBannerContainer.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useModel } from '../../generic/model-store';
+
+import DatesBanner from './DatesBanner';
+import { fetchDatesTab, resetDeadlines } from '../data/thunks';
+
+function DatesBannerContainer(props) {
+  const {
+    model,
+  } = props;
+
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    courseDateBlocks,
+    datesBannerInfo,
+    hasEnded,
+  } = useModel(model, courseId);
+
+  const {
+    contentTypeGatingEnabled,
+    missedDeadlines,
+    missedGatedContent,
+    verifiedUpgradeLink,
+  } = datesBannerInfo;
+
+  const {
+    isSelfPaced,
+  } = useModel('courses', courseId);
+
+  const dispatch = useDispatch();
+  const hasDeadlines = courseDateBlocks.some(x => x.dateType === 'assignment-due-date');
+  const upgradeToCompleteGraded = model === 'dates' && contentTypeGatingEnabled && !missedDeadlines;
+  const upgradeToReset = !upgradeToCompleteGraded && missedDeadlines && missedGatedContent;
+  const resetDates = !upgradeToCompleteGraded && missedDeadlines && !missedGatedContent;
+  const datesBanners = [
+    {
+      name: 'datesTabInfoBanner',
+      shouldDisplay: model === 'dates' && hasDeadlines && !missedDeadlines && isSelfPaced,
+    },
+    {
+      name: 'upgradeToCompleteGradedBanner',
+      shouldDisplay: upgradeToCompleteGraded,
+      clickHandler: () => window.location.replace(verifiedUpgradeLink),
+    },
+    {
+      name: 'upgradeToResetBanner',
+      shouldDisplay: upgradeToReset,
+      clickHandler: () => window.location.replace(verifiedUpgradeLink),
+    },
+    {
+      name: 'resetDatesBanner',
+      shouldDisplay: resetDates,
+      clickHandler: () => dispatch(resetDeadlines(courseId, fetchDatesTab)),
+    },
+  ];
+
+  return (
+    <>
+      {!hasEnded && datesBanners.map((banner) => banner.shouldDisplay && (
+        <DatesBanner
+          name={banner.name}
+          bannerClickHandler={banner.clickHandler}
+          key={banner.name}
+        />
+      ))}
+    </>
+  );
+}
+
+DatesBannerContainer.propTypes = {
+  model: PropTypes.string.isRequired,
+};
+
+export default DatesBannerContainer;

src/course-home/dates-banner/index.js

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

src/course-home/dates-banner/messages.js

@@ -0,0 +1,66 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'datesBanner.datesTabInfoBanner.header': {
+    id: 'datesBanner.datesTabInfoBanner.header',
+    defaultMessage: "We've built a suggested schedule to help you stay on track. ",
+    description: 'Strong text in Dates Tab Info Banner',
+  },
+  'datesBanner.datesTabInfoBanner.body': {
+    id: 'datesBanner.datesTabInfoBanner.body',
+    defaultMessage: `But don't worry—it's flexible so you can learn at your own pace. If you happen to fall behind on
+      our suggested dates, you'll be able to adjust them to keep yourself on track.`,
+    description: 'Body in Dates Tab Info Banner',
+  },
+  'datesBanner.upgradeToCompleteGradedBanner.header': {
+    id: 'datesBanner.upgradeToCompleteGradedBanner.header',
+    defaultMessage: 'You are auditing this course, ',
+    description: 'Strong text in Upgrade To Complete Graded Banner',
+  },
+  'datesBanner.upgradeToCompleteGradedBanner.body': {
+    id: 'datesBanner.upgradeToCompleteGradedBanner.body',
+    defaultMessage: `which means that you are unable to participate in graded assignments. To complete graded
+      assignments as part of this course, you can upgrade today.`,
+    description: 'Body in Upgrade To Complete Graded Banner',
+  },
+  'datesBanner.upgradeToCompleteGradedBanner.button': {
+    id: 'datesBanner.upgradeToCompleteGradedBanner.button',
+    defaultMessage: 'Upgrade now',
+    description: 'Button in Upgrade To Complete Graded Banner',
+  },
+  'datesBanner.upgradeToResetBanner.header': {
+    id: 'datesBanner.upgradeToResetBanner.header',
+    defaultMessage: 'You are auditing this course, ',
+    description: 'Strong text in Upgrade To Reset Banner',
+  },
+  'datesBanner.upgradeToResetBanner.body': {
+    id: 'datesBanner.upgradeToResetBanner.body',
+    defaultMessage: `which means that you are unable to participate in graded assignments. It looks like you missed 
+      some important deadlines based on our suggested schedule. To complete graded assignments as part of this course 
+      and shift the past due assignments into the future, you can upgrade today.`,
+    description: 'Body in Upgrade To Reset Banner',
+  },
+  'datesBanner.upgradeToResetBanner.button': {
+    id: 'datesBanner.upgradeToResetBanner.button',
+    defaultMessage: 'Upgrade to shift due dates',
+    description: 'Button in Upgrade To Reset Banner',
+  },
+  'datesBanner.resetDatesBanner.header': {
+    id: 'datesBanner.resetDatesBanner.header',
+    defaultMessage: 'It looks like you missed some important deadlines based on our suggested schedule. ',
+    description: 'Strong text in Reset Dates Banner',
+  },
+  'datesBanner.resetDatesBanner.body': {
+    id: 'datesBanner.resetDatesBanner.body',
+    defaultMessage: `To keep yourself on track, you can update this schedule and shift the past due assignments into 
+      the future. Don’t worry—you won’t lose any of the progress you’ve made when you shift your due dates.`,
+    description: 'Body in Reset Dates Banner',
+  },
+  'datesBanner.resetDatesBanner.button': {
+    id: 'datesBanner.resetDatesBanner.button',
+    defaultMessage: 'Shift due dates',
+    description: 'Button in Reset Dates Banner',
+  },
+});
+
+export default messages;

src/course-home/dates-tab/Badge.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export default function Badge({ children, className }) {
+  return (
+    <span className={classNames('dates-badge badge align-text-bottom font-italic ml-2 px-2 py-1', className)}>
+      {children}
+    </span>
+  );
+}
+
+Badge.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+Badge.defaultProps = {
+  children: null,
+  className: null,
+};

src/course-home/dates-tab/Badge.scss

@@ -0,0 +1,3 @@
+.dates-badge {
+  font-size: 0.75rem;
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import Timeline from './Timeline';
+import DatesBannerContainer from '../dates-banner/DatesBannerContainer';
+
+function DatesTab({ intl }) {
+  return (
+    <>
+      <div role="heading" aria-level="1" className="h4 my-3">
+        {intl.formatMessage(messages.title)}
+      </div>
+      <DatesBannerContainer model="dates" />
+      <Timeline />
+    </>
+  );
+}
+
+DatesTab.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(DatesTab);

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { FormattedDate, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { useModel } from '../../generic/model-store';
+
+import { getBadgeListAndColor } from './badgelist';
+import { isLearnerAssignment } from './utils';
+
+function Day({
+  date, first, intl, items, last,
+}) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    userTimezone,
+  } = useModel('dates', courseId);
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  const { color, badges } = getBadgeListAndColor(date, intl, null, items);
+
+  return (
+    <li className="dates-day pb-4">
+      {/* Top Line */}
+      {!first && <div className="dates-line-top border-1 border-left border-gray-900 bg-gray-900" />}
+
+      {/* Dot */}
+      <div className={classNames(color, 'dates-dot border border-gray-900')} />
+
+      {/* Bottom Line */}
+      {!last && <div className="dates-line-bottom border-1 border-left border-gray-900 bg-gray-900" />}
+
+      {/* Content */}
+      <div className="d-inline-block ml-3 pl-2">
+        <div className="mb-1">
+          <p className="d-inline text-dark-500 font-weight-bold">
+            <FormattedDate
+              value={date}
+              day="numeric"
+              month="short"
+              weekday="short"
+              year="numeric"
+              {...timezoneFormatArgs}
+            />
+          </p>
+          {badges}
+        </div>
+        {items.map((item) => {
+          const { badges: itemBadges } = getBadgeListAndColor(date, intl, item, items);
+          const showLink = item.link && isLearnerAssignment(item);
+          const title = showLink ? (<u><a href={item.link} className="text-reset">{item.title}</a></u>) : item.title;
+          const available = item.learnerHasAccess && (item.link || !isLearnerAssignment(item));
+          const textColor = available ? 'text-dark-500' : 'text-dark-200';
+          return (
+            <div key={item.title + item.date} className={textColor}>
+              <div>
+                <span className="font-weight-bold small mt-1">
+                  {item.assignmentType && `${item.assignmentType}: `}{title}
+                </span>
+                {itemBadges}
+              </div>
+              {item.description && <div className="small mb-2">{item.description}</div>}
+              {item.extraInfo && <div className="small mb-2">{item.extraInfo}</div>}
+            </div>
+          );
+        })}
+      </div>
+    </li>
+  );
+}
+
+Day.propTypes = {
+  date: PropTypes.objectOf(Date).isRequired,
+  first: PropTypes.bool,
+  intl: intlShape.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    date: PropTypes.string,
+    dateType: PropTypes.string,
+    description: PropTypes.string,
+    dueNext: PropTypes.bool,
+    learnerHasAccess: PropTypes.bool,
+    link: PropTypes.string,
+    title: PropTypes.string,
+  })).isRequired,
+  last: PropTypes.bool,
+};
+
+Day.defaultProps = {
+  first: false,
+  last: false,
+};
+
+export default injectIntl(Day);

src/course-home/dates-tab/Day.scss

@@ -0,0 +1,47 @@
+$dot-radius: 0.3rem;
+$dot-size: $dot-radius * 2;
+$offset: $dot-radius * 1.5;
+
+.dates-day {
+  position: relative;
+}
+
+.dates-line-top {
+  display: inline-block;
+  position: absolute;
+  left: $offset;
+  top: 0;
+  height: $offset;
+  z-index: 0;
+}
+
+.dates-dot {
+  display: inline-block;
+  position: absolute;
+  border-radius: 50%;
+  left: $dot-radius * 0.5; // save room for today's larger size
+  top: $offset;
+  height: $dot-size;
+  width: $dot-size;
+  z-index: 1;
+
+  &.dates-bg-today {
+    left: 0;
+    top: $offset - $dot-radius;
+    height: $dot-size * 1.5;
+    width: $dot-size * 1.5;
+  }
+}
+
+.dates-line-bottom {
+  display: inline-block;
+  position: absolute;
+  top: $offset + $dot-size;
+  bottom: 0;
+  left: $offset;
+  z-index: 0;
+}
+
+.dates-bg-today {
+  background: #ffdb87;
+}

src/course-home/dates-tab/Timeline.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { useModel } from '../../generic/model-store';
+
+import Day from './Day';
+import { daycmp, isLearnerAssignment } from './utils';
+
+export default function Timeline() {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    courseDateBlocks,
+  } = useModel('dates', courseId);
+
+  // Group date items by day (assuming they are sorted in first place) and add some metadata
+  const groupedDates = [];
+  const now = new Date();
+  let foundNextDue = false;
+  let foundToday = false;
+  courseDateBlocks.forEach(courseDateBlock => {
+    const dateInfo = { ...courseDateBlock };
+    const parsedDate = new Date(dateInfo.date);
+
+    if (!foundNextDue && parsedDate >= now && isLearnerAssignment(dateInfo) && !dateInfo.complete) {
+      foundNextDue = true;
+      dateInfo.dueNext = true;
+    }
+
+    if (!foundToday) {
+      const compared = daycmp(parsedDate, now);
+      if (compared === 0) {
+        foundToday = true;
+      } else if (compared > 0) {
+        foundToday = true;
+        groupedDates.push({
+          date: now,
+          items: [],
+        });
+      }
+    }
+
+    if (groupedDates.length === 0 || daycmp(groupedDates[groupedDates.length - 1].date, parsedDate) !== 0) {
+      // Add new grouped date
+      groupedDates.push({
+        date: parsedDate,
+        items: [dateInfo],
+        first: groupedDates.length === 0,
+      });
+    } else {
+      groupedDates[groupedDates.length - 1].items.push(dateInfo);
+    }
+  });
+  if (!foundToday) {
+    groupedDates.push({ date: now, items: [] });
+  }
+  if (groupedDates.length) {
+    groupedDates[groupedDates.length - 1].last = true;
+  }
+
+  return (
+    <ul className="list-unstyled m-0">
+      {groupedDates.map((groupedDate) => (
+        <Day key={groupedDate.date} {...groupedDate} />
+      ))}
+    </ul>
+  );
+}

src/course-home/dates-tab/badgelist.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLock } from '@fortawesome/free-solid-svg-icons';
+
+import Badge from './Badge';
+import messages from './messages';
+import { daycmp, isLearnerAssignment } from './utils';
+
+function hasAccess(item) {
+  return item.learnerHasAccess;
+}
+
+function isComplete(assignment) {
+  return assignment.complete;
+}
+
+function isPastDue(assignment) {
+  return !isComplete(assignment) && (new Date(assignment.date) < new Date());
+}
+
+function isUnreleased(assignment) {
+  return !assignment.link;
+}
+
+// Pass a null item if you want to get a whole day's badge list, not just one item's list.
+// Returns an object with 'color' and 'badges' properties.
+function getBadgeListAndColor(date, intl, item, items) {
+  const now = new Date();
+  const assignments = items.filter(isLearnerAssignment);
+  const isToday = daycmp(date, now) === 0;
+  const isInFuture = daycmp(date, now) > 0;
+
+  // This badge info list is in order of priority (they will appear left to right in this order and the first badge
+  // sets the color of the dot in the timeline).
+  const badgesInfo = [
+    {
+      message: messages.today,
+      shownForDay: isToday,
+      bg: 'dates-bg-today',
+    },
+    {
+      message: messages.completed,
+      shownForDay: assignments.length && assignments.every(isComplete),
+      shownForItem: x => isLearnerAssignment(x) && isComplete(x),
+      bg: 'bg-dark-100',
+    },
+    {
+      message: messages.pastDue,
+      shownForDay: assignments.length && assignments.every(isPastDue),
+      shownForItem: x => isLearnerAssignment(x) && isPastDue(x),
+      bg: 'bg-dark-200',
+    },
+    {
+      message: messages.dueNext,
+      shownForDay: !isToday && assignments.some(x => x.dueNext),
+      shownForItem: x => x.dueNext,
+      bg: 'bg-gray-500',
+      className: 'text-white',
+    },
+    {
+      message: messages.unreleased,
+      shownForDay: assignments.length && assignments.every(isUnreleased),
+      shownForItem: x => isLearnerAssignment(x) && isUnreleased(x),
+      className: 'border border-dark-200 text-gray-500 align-top',
+    },
+    {
+      message: messages.verifiedOnly,
+      shownForDay: items.length && items.every(x => !hasAccess(x)),
+      shownForItem: x => !hasAccess(x),
+      icon: faLock,
+      bg: 'bg-dark-500',
+      className: 'text-white',
+    },
+  ];
+  let color = null; // first color of any badge
+  const badges = (
+    <>
+      {badgesInfo.map(b => {
+        let shown = b.shownForDay;
+        if (item) {
+          if (b.shownForDay) {
+            shown = false; // don't double up, if the day already has this badge
+          } else {
+            shown = b.shownForItem && b.shownForItem(item);
+          }
+        }
+        if (!shown) {
+          return null;
+        }
+
+        if (!color && !isInFuture) {
+          color = b.bg;
+        }
+        return (
+          <Badge key={b.message.id} className={classNames(b.bg, b.className)}>
+            {b.icon && <FontAwesomeIcon icon={b.icon} className="mr-1" />}
+            {intl.formatMessage(b.message)}
+          </Badge>
+        );
+      })}
+    </>
+  );
+  if (!color && isInFuture) {
+    color = 'bg-gray-900';
+  }
+
+  return {
+    color,
+    badges,
+  };
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export { getBadgeListAndColor };

src/course-home/dates-tab/fakeData.js

@@ -0,0 +1,228 @@
+// Sample data helpful when developing, to see a variety of configurations.
+// This set of data is not realistic (mix of having access and not), but it
+// is intended to demonstrate many UI results.
+// To use, have getDatesTabData in api.js return the result of this call instead:
+/*
+import fakeDatesData from '../dates-tab/fakeData';
+export async function getDatesTabData(courseId, version) {
+  if (tab === 'dates') { return camelCaseObject(fakeDatesData()); }
+  ...
+}
+*/
+
+export default function fakeDatesData() {
+  return JSON.parse(`
+{
+  "course_date_blocks": [
+    {
+      "date": "2020-05-01T17:59:41Z",
+      "date_type": "course-start-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "",
+      "title": "Course Starts",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "complete": true,
+      "date": "2020-05-04T02:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "title": "Multi Badges Completed",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2020-05-05T02:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "title": "Multi Badges Past Due",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2020-05-27T02:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "https://example.com/",
+      "title": "Both Past Due 1",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2020-05-27T02:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "https://example.com/",
+      "title": "Both Past Due 2",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "complete": true,
+      "date": "2020-05-28T08:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "https://example.com/",
+      "title": "One Completed/Due 1",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2020-05-28T08:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "https://example.com/",
+      "title": "One Completed/Due 2",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "complete": true,
+      "date": "2020-05-29T08:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "https://example.com/",
+      "title": "Both Completed 1",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "complete": true,
+      "date": "2020-05-29T08:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "https://example.com/",
+      "title": "Both Completed 2",
+      "extra_info": null
+    },
+    {
+      "date": "2020-06-16T17:59:40.942669Z",
+      "date_type": "verified-upgrade-deadline",
+      "description": "Don't miss the opportunity to highlight your new knowledge and skills by earning a verified certificate.",
+      "learner_has_access": true,
+      "link": "https://example.com/",
+      "title": "Upgrade to Verified Certificate",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2030-08-17T05:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": false,
+      "link": "https://example.com/",
+      "title": "One Verified 1",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2030-08-17T05:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "https://example.com/",
+      "title": "One Verified 2",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2030-08-17T05:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "https://example.com/",
+      "title": "ORA Verified 2",
+      "extra_info": "ORA Dates are set by the instructor, and can't be changed"
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2030-08-18T05:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": false,
+      "link": "https://example.com/",
+      "title": "Both Verified 1",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2030-08-18T05:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": false,
+      "link": "https://example.com/",
+      "title": "Both Verified 2",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2030-08-19T05:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "title": "One Unreleased 1"
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2030-08-19T05:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "https://example.com/",
+      "title": "One Unreleased 2",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2030-08-20T05:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "title": "Both Unreleased 1",
+      "extra_info": null
+    },
+    {
+      "assignment_type": "Homework",
+      "date": "2030-08-20T05:59:40.942669Z",
+      "date_type": "assignment-due-date",
+      "description": "",
+      "learner_has_access": true,
+      "title": "Both Unreleased 2",
+      "extra_info": null
+    },
+    {
+      "date": "2030-08-23T00:00:00Z",
+      "date_type": "course-end-date",
+      "description": "",
+      "learner_has_access": true,
+      "link": "",
+      "title": "Course Ends",
+      "extra_info": null
+    },
+    {
+      "date": "2030-09-01T00:00:00Z",
+      "date_type": "verification-deadline-date",
+      "description": "You must successfully complete verification before this date to qualify for a Verified Certificate.",
+      "learner_has_access": false,
+      "link": "https://example.com/",
+      "title": "Verification Deadline",
+      "extra_info": null
+    }
+  ],
+  "display_reset_dates_text": false,
+  "learner_is_verified": false,
+  "user_timezone": "America/New_York",
+  "verified_upgrade_link": "https://example.com/"
+}
+  `);
+}

src/course-home/dates-tab/index.jsx

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

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

@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  completed: {
+    id: 'learning.dates.badge.completed',
+    defaultMessage: 'Completed',
+  },
+  dueNext: {
+    id: 'learning.dates.badge.dueNext',
+    defaultMessage: 'Due Next',
+  },
+  pastDue: {
+    id: 'learning.dates.badge.pastDue',
+    defaultMessage: 'Past Due',
+  },
+  title: {
+    id: 'learning.dates.title',
+    defaultMessage: 'Important Dates',
+  },
+  today: {
+    id: 'learning.dates.badge.today',
+    defaultMessage: 'Today',
+  },
+  unreleased: {
+    id: 'learning.dates.badge.unreleased',
+    defaultMessage: 'Not Yet Released',
+  },
+  verifiedOnly: {
+    id: 'learning.dates.badge.verifiedOnly',
+    defaultMessage: 'Verified Only',
+  },
+});
+
+export default messages;

src/course-home/dates-tab/utils.jsx

@@ -0,0 +1,16 @@
+function daycmp(a, b) {
+  if (a.getFullYear() < b.getFullYear()) { return -1; }
+  if (a.getFullYear() > b.getFullYear()) { return 1; }
+  if (a.getMonth() < b.getMonth()) { return -1; }
+  if (a.getMonth() > b.getMonth()) { return 1; }
+  if (a.getDate() < b.getDate()) { return -1; }
+  if (a.getDate() > b.getDate()) { return 1; }
+  return 0;
+}
+
+// item is a date block returned from the API
+function isLearnerAssignment(item) {
+  return item.learnerHasAccess && item.dateType === 'assignment-due-date';
+}
+
+export { daycmp, isLearnerAssignment };

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

@@ -0,0 +1,62 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
+import { FormattedDate } from '@edx/frontend-platform/i18n';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isLearnerAssignment } from '../dates-tab/utils';
+import './DateSummary.scss';
+
+export default function DateSummary({
+  dateBlock,
+  userTimezone,
+}) {
+  const linkedTitle = dateBlock.link && isLearnerAssignment(dateBlock);
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+  return (
+    <section className="container p-0 mb-3">
+      <div className="row">
+        <FontAwesomeIcon icon={faCalendarAlt} className="ml-3 mt-1 mr-1" style={{ width: '20px' }} />
+        <div className="ml-2 font-weight-bold">
+          <FormattedDate
+            value={dateBlock.date}
+            day="numeric"
+            month="short"
+            weekday="short"
+            year="numeric"
+            {...timezoneFormatArgs}
+          />
+        </div>
+      </div>
+      <div className="row ml-4 px-2">
+        <div className="date-summary-text">
+          {linkedTitle
+          && <div className="font-weight-bold mt-2"><a href={dateBlock.link}>{dateBlock.title}</a></div>}
+          {!linkedTitle
+          && <div className="font-weight-bold mt-2">{dateBlock.title}</div>}
+        </div>
+        {dateBlock.description
+          && <div className="date-summary-text m-0 mt-1">{dateBlock.description}</div>}
+        {!linkedTitle && dateBlock.link
+          && <a href={dateBlock.link} className="description-link">{dateBlock.linkText}</a>}
+      </div>
+
+    </section>
+  );
+}
+
+DateSummary.propTypes = {
+  dateBlock: PropTypes.shape({
+    date: PropTypes.string.isRequired,
+    dateType: PropTypes.string,
+    description: PropTypes.string,
+    link: PropTypes.string,
+    linkText: PropTypes.string,
+    title: PropTypes.string.isRequired,
+    learnerHasAccess: PropTypes.bool,
+  }).isRequired,
+  userTimezone: PropTypes.string,
+};
+
+DateSummary.defaultProps = {
+  userTimezone: null,
+};

src/course-home/outline-tab/DateSummary.scss

@@ -0,0 +1,8 @@
+.date-summary-text {
+  margin-left: 2px;
+  flex-basis: 100%;
+}
+
+.description-link {
+  margin-left: 1px;
+}

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

@@ -0,0 +1,39 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { getConfig } from '@edx/frontend-platform';
+
+export default function LmsHtmlFragment({ html, title, ...rest }) {
+  const wholePage = `
+<html>
+  <head>
+    <base href="${getConfig().LMS_BASE_URL}" target="_parent">
+    <link rel="stylesheet" href="/static/css/bootstrap/lms-main.css">
+  </head>
+  <body>${html}</body>
+</html>
+`;
+
+  const iframe = useRef(null);
+  function handleLoad() {
+    iframe.current.height = iframe.current.contentWindow.document.body.scrollHeight;
+  }
+
+  return (
+    <iframe
+      className="w-100 border-0"
+      onLoad={handleLoad}
+      ref={iframe}
+      referrerPolicy="origin"
+      scrolling="no"
+      srcDoc={wholePage}
+      title={title}
+      {...rest}
+    />
+  );
+}
+
+LmsHtmlFragment.propTypes = {
+  html: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Button } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { AlertList } from '../../generic/user-messages';
+
+import CourseDates from './widgets/CourseDates';
+import CourseHandouts from './widgets/CourseHandouts';
+import CourseTools from './widgets/CourseTools';
+import messages from './messages';
+import Section from './Section';
+import useAccessExpirationAlert from '../../alerts/access-expiration-alert';
+import useCertificateAvailableAlert from './alerts/certificate-available-alert';
+import useCourseEndAlert from './alerts/course-end-alert';
+import useCourseStartAlert from './alerts/course-start-alert';
+import useEnrollmentAlert from '../../alerts/enrollment-alert';
+import useLogistrationAlert from '../../alerts/logistration-alert';
+import useOfferAlert from '../../alerts/offer-alert';
+import { useModel } from '../../generic/model-store';
+import WelcomeMessage from './widgets/WelcomeMessage';
+
+function OutlineTab({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    title,
+    start,
+    end,
+    enrollmentStart,
+    enrollmentEnd,
+    enrollmentMode,
+    isEnrolled,
+  } = useModel('courses', courseId);
+
+  const {
+    courseBlocks: {
+      courses,
+      sections,
+    },
+    courseExpiredHtml,
+    offerHtml,
+  } = useModel('outline', courseId);
+
+  // Above the tab alerts (appearing in the order listed here)
+  const logistrationAlert = useLogistrationAlert();
+  const enrollmentAlert = useEnrollmentAlert(courseId);
+
+  // Below the course title alerts (appearing in the order listed here)
+  const offerAlert = useOfferAlert(offerHtml, 'outline-course-alerts');
+  const accessExpirationAlert = useAccessExpirationAlert(courseExpiredHtml, 'outline-course-alerts');
+  const courseStartAlert = useCourseStartAlert(courseId);
+  const courseEndAlert = useCourseEndAlert(courseId);
+  const certificateAvailableAlert = useCertificateAvailableAlert(courseId);
+
+  const rootCourseId = Object.keys(courses)[0];
+  const { sectionIds } = courses[rootCourseId];
+
+  return (
+    <>
+      <AlertList
+        topic="outline"
+        className="mb-3"
+        customAlerts={{
+          ...enrollmentAlert,
+          ...logistrationAlert,
+        }}
+      />
+      <div className="d-flex justify-content-between mb-3">
+        <h2>{title}</h2>
+        <Button className="btn-primary" type="button">{intl.formatMessage(messages.resume)}</Button>
+      </div>
+      <div className="row">
+        <div className="col col-8">
+          <WelcomeMessage courseId={courseId} />
+          <AlertList
+            topic="outline-course-alerts"
+            className="mb-3"
+            customAlerts={{
+              ...accessExpirationAlert,
+              ...certificateAvailableAlert,
+              ...courseEndAlert,
+              ...courseStartAlert,
+              ...offerAlert,
+            }}
+          />
+          {sectionIds.map((sectionId) => (
+            <Section
+              key={sectionId}
+              courseId={courseId}
+              title={sections[sectionId].title}
+              sequenceIds={sections[sectionId].sequenceIds}
+            />
+          ))}
+        </div>
+        <div className="col col-4">
+          <CourseTools
+            courseId={courseId}
+          />
+          <CourseDates
+            start={start}
+            end={end}
+            enrollmentStart={enrollmentStart}
+            enrollmentEnd={enrollmentEnd}
+            enrollmentMode={enrollmentMode}
+            isEnrolled={isEnrolled}
+            courseId={courseId}
+          />
+          <CourseHandouts
+            courseId={courseId}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+OutlineTab.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(OutlineTab);

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

@@ -4,10 +4,15 @@ import { Collapsible } from '@edx/paragon';
 import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import SequenceLink from './SequenceLink';
-import { courseBlocksShape } from '../data/course-blocks';
+import { useModel } from '../../generic/model-store';
+
+export default function Section({ courseId, title, sequenceIds }) {
+  const {
+    courseBlocks: {
+      sequences,
+    },
+  } = useModel('outline', courseId);
 
-export default function Chapter({ id, courseUsageKey, models }) {
-  const { displayName, children } = models[id];
   return (
     <Collapsible.Advanced className="collapsible-card mb-2">
       <Collapsible.Trigger className="collapsible-trigger d-flex align-items-start">
@@ -21,16 +26,16 @@ export default function Chapter({ id, courseUsageKey, models }) {
             <FontAwesomeIcon icon={faChevronDown} />
           </div>
         </Collapsible.Visible>
-        <div className="ml-2 flex-grow-1">{displayName}</div>
+        <div className="ml-2 flex-grow-1">{title}</div>
       </Collapsible.Trigger>
 
       <Collapsible.Body className="collapsible-body">
-        {children.map((sequenceId) => (
+        {sequenceIds.map((sequenceId) => (
           <SequenceLink
             key={sequenceId}
             id={sequenceId}
-            courseUsageKey={courseUsageKey}
-            models={models}
+            courseId={courseId}
+            title={sequences[sequenceId].title}
           />
         ))}
       </Collapsible.Body>
@@ -38,8 +43,8 @@ export default function Chapter({ id, courseUsageKey, models }) {
   );
 }
 
-Chapter.propTypes = {
-  id: PropTypes.string.isRequired,
-  courseUsageKey: PropTypes.string.isRequired,
-  models: courseBlocksShape.isRequired,
+Section.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  sequenceIds: PropTypes.arrayOf(PropTypes.string).isRequired,
 };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+export default function SequenceLink({ id, courseId, title }) {
+  return (
+    <div className="ml-4">
+      <Link to={`/course/${courseId}/${id}`}>{title}</Link>
+    </div>
+  );
+}
+
+SequenceLink.propTypes = {
+  id: PropTypes.string.isRequired,
+  courseId: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};

src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { FormattedMessage, FormattedRelative } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@edx/paragon';
+
+import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';
+
+function CertificateAvailableAlert({ payload }) {
+  const {
+    certDate,
+    username,
+    userTimezone,
+  } = payload;
+
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  return (
+    <Alert type={ALERT_TYPES.INFO}>
+      <strong>
+        <FormattedMessage
+          id="learning.outline.alert.cert.title"
+          defaultMessage="We are working on generating course certificates."
+        />
+      </strong>
+      <br />
+      <FormattedMessage
+        id="learning.outline.alert.cert.when"
+        defaultMessage="If you have earned a certificate, you will be able to access it {timeRemaining}. You will also be able to view your certificates on your {profileLink}."
+        values={{
+          profileLink: (
+            <Hyperlink
+              destination={`${getConfig().LMS_BASE_URL}/u/${username}`}
+            >
+              <FormattedMessage
+                id="learning.outline.alert.cert.profile"
+                defaultMessage="Learner Profile"
+              />
+            </Hyperlink>
+          ),
+          timeRemaining: (
+            <FormattedRelative
+              key="timeRemaining"
+              value={certDate}
+              {...timezoneFormatArgs}
+            />
+          ),
+        }}
+      />
+    </Alert>
+  );
+}
+
+CertificateAvailableAlert.propTypes = {
+  payload: PropTypes.shape({
+    certDate: PropTypes.string,
+    username: PropTypes.string,
+    userTimezone: PropTypes.string,
+  }).isRequired,
+};
+
+export default CertificateAvailableAlert;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
+import { useAlert } from '../../../../generic/user-messages';
+import { useModel } from '../../../../generic/model-store';
+
+const CertificateAvailableAlert = React.lazy(() => import('./CertificateAvailableAlert'));
+
+function useCertificateAvailableAlert(courseId) {
+  const {
+    isEnrolled,
+  } = useModel('courses', courseId);
+  const {
+    datesWidget: {
+      courseDateBlocks,
+      userTimezone,
+    },
+  } = useModel('outline', courseId);
+  const { username } = getAuthenticatedUser();
+
+  const certBlock = courseDateBlocks.find(b => b.dateType === 'certificate-available-date');
+  const endBlock = courseDateBlocks.find(b => b.dateType === 'course-end-date');
+  const endDate = endBlock ? new Date(endBlock.date) : null;
+  const hasEnded = endBlock ? endDate < new Date() : false;
+  const isVisible = isEnrolled && certBlock && hasEnded; // only show if we're between end and cert dates
+
+  useAlert(isVisible, {
+    code: 'clientCertificateAvailableAlert',
+    payload: {
+      certDate: certBlock && certBlock.date,
+      username,
+      userTimezone,
+    },
+    topic: 'outline-course-alerts',
+  });
+
+  return {
+    clientCertificateAvailableAlert: CertificateAvailableAlert,
+  };
+}
+
+export default useCertificateAvailableAlert;

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

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

src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormattedDate,
+  FormattedMessage,
+  FormattedRelative,
+  FormattedTime,
+} from '@edx/frontend-platform/i18n';
+
+import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';
+
+const DAY_MS = 24 * 60 * 60 * 1000; // in ms
+
+function CourseEndAlert({ payload }) {
+  const {
+    delta,
+    description,
+    endDate,
+    userTimezone,
+  } = payload;
+
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  const timeRemaining = (
+    <FormattedRelative
+      key="timeRemaining"
+      value={endDate}
+      {...timezoneFormatArgs}
+    />
+  );
+
+  let msg;
+  if (delta < DAY_MS) {
+    const courseEndTime = (
+      <FormattedTime
+        key="courseEndTime"
+        day="numeric"
+        month="short"
+        year="numeric"
+        hour12={false}
+        timeZoneName="short"
+        value={endDate}
+        {...timezoneFormatArgs}
+      />
+    );
+    msg = (
+      <FormattedMessage
+        id="learning.outline.alert.end.short"
+        defaultMessage="This course is ending {timeRemaining} at {courseEndTime}."
+        description="Used when the time remaining is less than a day away."
+        values={{
+          courseEndTime,
+          timeRemaining,
+        }}
+      />
+    );
+  } else {
+    const courseEndDate = (
+      <FormattedDate
+        key="courseEndDate"
+        day="numeric"
+        month="short"
+        year="numeric"
+        value={endDate}
+        {...timezoneFormatArgs}
+      />
+    );
+    msg = (
+      <FormattedMessage
+        id="learning.outline.alert.end.long"
+        defaultMessage="This course is ending {timeRemaining} on {courseEndDate}."
+        description="Used when the time remaining is more than a day away."
+        values={{
+          courseEndDate,
+          timeRemaining,
+        }}
+      />
+    );
+  }
+
+  return (
+    <Alert type={ALERT_TYPES.INFO}>
+      <strong>{msg}</strong><br />
+      {description}
+    </Alert>
+  );
+}
+
+CourseEndAlert.propTypes = {
+  payload: PropTypes.shape({
+    delta: PropTypes.number,
+    description: PropTypes.string,
+    endDate: PropTypes.string,
+    userTimezone: PropTypes.string,
+  }).isRequired,
+};
+
+export default CourseEndAlert;

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

@@ -0,0 +1,41 @@
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import { useAlert } from '../../../../generic/user-messages';
+import { useModel } from '../../../../generic/model-store';
+
+const CourseEndAlert = React.lazy(() => import('./CourseEndAlert'));
+
+// period of time (in ms) before end of course during which we alert
+const WARNING_PERIOD_MS = 14 * 24 * 60 * 60 * 1000; // 14 days
+
+export function useCourseEndAlert(courseId) {
+  const {
+    isEnrolled,
+  } = useModel('courses', courseId);
+  const {
+    datesWidget: {
+      courseDateBlocks,
+      userTimezone,
+    },
+  } = useModel('outline', courseId);
+
+  const endBlock = courseDateBlocks.find(b => b.dateType === 'course-end-date');
+  const endDate = endBlock ? new Date(endBlock.date) : null;
+  const delta = endBlock ? endDate - new Date() : 0;
+  const isVisible = isEnrolled && endBlock && delta > 0 && delta < WARNING_PERIOD_MS;
+
+  useAlert(isVisible, {
+    code: 'clientCourseEndAlert',
+    payload: {
+      delta,
+      description: endBlock && endBlock.description,
+      endDate: endBlock && endBlock.date,
+      userTimezone,
+    },
+    topic: 'outline-course-alerts',
+  });
+
+  return {
+    clientCourseEndAlert: CourseEndAlert,
+  };
+}

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

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

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormattedDate,
+  FormattedMessage,
+  FormattedRelative,
+  FormattedTime,
+} from '@edx/frontend-platform/i18n';
+
+import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';
+
+const DAY_MS = 24 * 60 * 60 * 1000; // in ms
+
+function CourseStartAlert({ payload }) {
+  const {
+    delta,
+    startDate,
+    userTimezone,
+  } = payload;
+
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  const timeRemaining = (
+    <FormattedRelative
+      key="timeRemaining"
+      value={startDate}
+      {...timezoneFormatArgs}
+    />
+  );
+
+  if (delta < DAY_MS) {
+    return (
+      <Alert type={ALERT_TYPES.INFO}>
+        <FormattedMessage
+          id="learning.outline.alert.start.short"
+          defaultMessage="Course starts {timeRemaining} at {courseStartTime}."
+          description="Used when the time remaining is less than a day away."
+          values={{
+            courseStartTime: (
+              <FormattedTime
+                key="courseStartTime"
+                day="numeric"
+                month="short"
+                year="numeric"
+                hour12={false}
+                timeZoneName="short"
+                value={startDate}
+                {...timezoneFormatArgs}
+              />
+            ),
+            timeRemaining,
+          }}
+        />
+      </Alert>
+    );
+  }
+
+  return (
+    <Alert type={ALERT_TYPES.INFO}>
+      <strong>
+        <FormattedMessage
+          id="learning.outline.alert.end.long"
+          defaultMessage="Course starts {timeRemaining} on {courseStartDate}."
+          description="Used when the time remaining is more than a day away."
+          values={{
+            courseStartDate: (
+              <FormattedDate
+                key="courseStartDate"
+                day="numeric"
+                month="short"
+                year="numeric"
+                value={startDate}
+                {...timezoneFormatArgs}
+              />
+            ),
+            timeRemaining,
+          }}
+        />
+      </strong>
+      <br />
+      <FormattedMessage
+        id="learning.outline.alert.end.calendar"
+        defaultMessage="Don’t forget to add a calendar reminder!"
+      />
+    </Alert>
+  );
+}
+
+CourseStartAlert.propTypes = {
+  payload: PropTypes.shape({
+    delta: PropTypes.number,
+    startDate: PropTypes.string,
+    userTimezone: PropTypes.string,
+  }).isRequired,
+};
+
+export default CourseStartAlert;

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

@@ -0,0 +1,37 @@
+import React 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('courses', 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;
+
+  useAlert(isVisible, {
+    code: 'clientCourseStartAlert',
+    payload: {
+      delta,
+      startDate: startBlock && startBlock.date,
+      userTimezone,
+    },
+    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/index.js

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

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

@@ -0,0 +1,38 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  allDates: {
+    id: 'learning.outline.dates.all',
+    defaultMessage: 'View all course dates',
+  },
+  dates: {
+    id: 'learning.outline.dates',
+    defaultMessage: 'Upcoming Dates',
+  },
+  handouts: {
+    id: 'learning.outline.handouts',
+    defaultMessage: 'Course Handouts',
+  },
+  resume: {
+    id: 'learning.outline.resume',
+    defaultMessage: 'Resume Course',
+  },
+  tools: {
+    id: 'learning.outline.tools',
+    defaultMessage: 'Course Tools',
+  },
+  welcomeMessage: {
+    id: 'learning.outline.welcomeMessage',
+    defaultMessage: 'Welcome Message',
+  },
+  welcomeMessageShowMoreButton: {
+    id: 'learning.outline.welcomeMessageShowMoreButton',
+    defaultMessage: 'Show More',
+  },
+  welcomeMessageShowLessButton: {
+    id: 'learning.outline.welcomeMessageShowLessButton',
+    defaultMessage: 'Show Less',
+  },
+});
+
+export default messages;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import DateSummary from '../DateSummary';
+import messages from '../messages';
+import { useModel } from '../../../generic/model-store';
+
+function CourseDates({ courseId, intl }) {
+  const {
+    datesWidget,
+  } = useModel('outline', courseId);
+
+  return (
+    <section className="mb-3">
+      <h4>{intl.formatMessage(messages.dates)}</h4>
+      {datesWidget.courseDateBlocks.map((courseDateBlock) => (
+        <DateSummary
+          key={courseDateBlock.title + courseDateBlock.date}
+          dateBlock={courseDateBlock}
+          userTimezone={datesWidget.userTimezone}
+        />
+      ))}
+      <a className="font-weight-bold" href={datesWidget.datesTabLink}>
+        {intl.formatMessage(messages.allDates)}
+      </a>
+    </section>
+  );
+}
+
+CourseDates.propTypes = {
+  courseId: PropTypes.string,
+  intl: intlShape.isRequired,
+};
+
+CourseDates.defaultProps = {
+  courseId: null,
+};
+
+export default injectIntl(CourseDates);

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import LmsHtmlFragment from '../LmsHtmlFragment';
+import messages from '../messages';
+import { useModel } from '../../../generic/model-store';
+
+function CourseHandouts({ courseId, intl }) {
+  const {
+    handoutsHtml,
+  } = useModel('outline', courseId);
+
+  if (!handoutsHtml) {
+    return null;
+  }
+
+  return (
+    <section className="mb-3">
+      <h4>{intl.formatMessage(messages.handouts)}</h4>
+      <LmsHtmlFragment
+        html={handoutsHtml}
+        title={intl.formatMessage(messages.handouts)}
+      />
+    </section>
+  );
+}
+
+CourseHandouts.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseHandouts);

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { sendTrackEvent } 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';
+import {
+  faBookmark, faCertificate, faInfo, faCalendar, faStar,
+} from '@fortawesome/free-solid-svg-icons';
+import { faNewspaper } from '@fortawesome/free-regular-svg-icons';
+
+import messages from '../messages';
+import { useModel } from '../../../generic/model-store';
+
+function CourseTools({ courseId, intl }) {
+  const {
+    courseTools,
+  } = useModel('outline', courseId);
+
+  const logClick = (analyticsId) => {
+    const { administrator } = getAuthenticatedUser();
+    sendTrackEvent('edx.course.tool.accessed', {
+      course_id: courseId,
+      is_staff: administrator,
+      tool_name: analyticsId,
+    });
+  };
+
+  const renderIcon = (iconClasses) => {
+    switch (iconClasses) {
+      case 'edx.bookmarks':
+        return faBookmark;
+      case 'edx.tool.verified_upgrade':
+        return faCertificate;
+      case 'edx.tool.financial_assistance':
+        return faInfo;
+      case 'edx.calendar-sync':
+        return faCalendar;
+      case 'edx.updates':
+        return faNewspaper;
+      case 'edx.reviews':
+        return faStar;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <section className="mb-3">
+      <h4>{intl.formatMessage(messages.tools)}</h4>
+      {courseTools.map((courseTool) => (
+        <div key={courseTool.analyticsId}>
+          <a href={courseTool.url} onClick={() => logClick(courseTool.analyticsId)}>
+            <FontAwesomeIcon icon={renderIcon(courseTool.analyticsId)} className="mr-2" style={{ width: '20px' }} />
+            {courseTool.title}
+          </a>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+CourseTools.propTypes = {
+  courseId: PropTypes.string,
+  intl: intlShape.isRequired,
+};
+
+CourseTools.defaultProps = {
+  courseId: null,
+};
+
+export default injectIntl(CourseTools);

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { useDispatch } from 'react-redux';
+import LmsHtmlFragment from '../LmsHtmlFragment';
+import messages from '../messages';
+import { useModel } from '../../../generic/model-store';
+import { Alert } from '../../../generic/user-messages';
+import { dismissWelcomeMessage } from '../../data/thunks';
+
+function WelcomeMessage({ courseId, intl }) {
+  const {
+    welcomeMessageHtml,
+  } = useModel('outline', courseId);
+
+  if (!welcomeMessageHtml) {
+    return null;
+  }
+
+  const [display, setDisplay] = useState(true);
+
+  const shortWelcomeMessageHtml = welcomeMessageHtml.length > 200 && `${welcomeMessageHtml.substring(0, 199)}...`;
+  const [showShortMessage, setShowShortMessage] = useState(!!shortWelcomeMessageHtml);
+  const dispatch = useDispatch();
+
+  return (
+    display && (
+      <Alert
+        type="welcome"
+        dismissible
+        onDismiss={() => {
+          setDisplay(false);
+          dispatch(dismissWelcomeMessage(courseId));
+        }}
+      >
+        <div className="my-3">
+          <LmsHtmlFragment
+            html={showShortMessage ? shortWelcomeMessageHtml : welcomeMessageHtml}
+            title={intl.formatMessage(messages.welcomeMessage)}
+          />
+        </div>
+        {
+          shortWelcomeMessageHtml && (
+            <div className="d-flex justify-content-end">
+              <button
+                type="button"
+                className="btn rounded align-self-center border border-primary bg-white font-weight-bold mb-3"
+                onClick={() => setShowShortMessage(!showShortMessage)}
+              >
+                {showShortMessage ? intl.formatMessage(messages.welcomeMessageShowMoreButton)
+                  : intl.formatMessage(messages.welcomeMessageShowLessButton)}
+              </button>
+            </div>
+          )
+        }
+      </Alert>
+    )
+  );
+}
+
+WelcomeMessage.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(WelcomeMessage);

src/course-home/progress-tab/Chapter.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Subsection from './Subsection';
+
+export default function Chapter({
+  chapter,
+}) {
+  if (chapter.displayName === 'hidden') { return null; }
+  const { subsections } = chapter;
+  return (
+    <section className="border-top border-light-500">
+      <div className="row">
+        <div className="lead font-weight-normal col-12 col-sm-3 my-3 border-right border-light-500">
+          {chapter.displayName}
+        </div>
+        <div className="col-12 col-sm-9">
+          {subsections.map((subsection) => (
+            <Subsection
+              key={subsection.url}
+              subsection={subsection}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Chapter.propTypes = {
+  chapter: PropTypes.shape({
+    displayName: PropTypes.string,
+    subsections: PropTypes.arrayOf(PropTypes.shape({
+      url: PropTypes.string,
+    })),
+  }).isRequired,
+};

src/course-home/progress-tab/DueDateTime.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { FormattedDate, FormattedTime } from '@edx/frontend-platform/i18n';
+import { useModel } from '../../generic/model-store';
+
+export default function DueDateTime({
+  due,
+}) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+  const {
+    userTimezone,
+  } = useModel('progress', courseId);
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  return (
+    <em className="ml-0">
+      due <FormattedDate
+        value={due}
+        day="numeric"
+        month="short"
+        weekday="short"
+        year="numeric"
+        {...timezoneFormatArgs}
+      /> <FormattedTime
+        value={due}
+      />
+    </em>
+  );
+}
+
+DueDateTime.propTypes = {
+  due: PropTypes.string.isRequired,
+};

src/course-home/progress-tab/ProblemScores.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+function ProblemScores({
+  intl,
+  scoreName,
+  problemScores,
+}) {
+  return (
+    <div className="row mt-1">
+      <dl className="d-flex flex-wrap small text-gray-500">
+        <dt className="mr-3">{intl.formatMessage(messages[`${scoreName}`])}</dt>
+        {problemScores.map((problem, index) => {
+          const key = scoreName + index;
+          return (
+            <dd className="mr-3" key={key}>{problem.earned}/{problem.possible}</dd>
+          );
+        })}
+      </dl>
+    </div>
+  );
+}
+
+ProblemScores.propTypes = {
+  intl: intlShape.isRequired,
+  scoreName: PropTypes.string.isRequired,
+  problemScores: PropTypes.arrayOf(PropTypes.shape({
+    possible: PropTypes.number,
+    earned: PropTypes.number,
+    id: PropTypes.string,
+  })).isRequired,
+};
+
+export default injectIntl(ProblemScores);

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { useModel } from '../../generic/model-store';
+import Chapter from './Chapter';
+
+export default function ProgressTab() {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const { administrator, username } = getAuthenticatedUser();
+
+  const {
+    enrollmentMode,
+    coursewareSummary,
+  } = useModel('progress', courseId);
+
+  return (
+    <section>
+      {enrollmentMode} {administrator} {username}
+      {coursewareSummary.map((chapter) => (
+        <Chapter
+          key={chapter.displayName}
+          chapter={chapter}
+        />
+      ))}
+    </section>
+  );
+}

src/course-home/progress-tab/Subsection.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+import DueDateTime from './DueDateTime';
+import ProblemScores from './ProblemScores';
+
+function Subsection({
+  intl,
+  subsection,
+}) {
+  const scoreName = subsection.graded ? 'problem' : 'practice';
+
+  const { earned, possible } = subsection.gradedTotal;
+
+  const showTotalScore = ((possible > 0) || (earned > 0)) && subsection.showGrades;
+
+  // screen reader information
+  const totalScoreSr = intl.formatMessage(messages.pointsEarned, { earned, total: possible });
+
+  return (
+    <section className="my-3 ml-3">
+      <div className="row">
+        <a className="h6" href={subsection.url}>
+          <div dangerouslySetInnerHTML={{ __html: subsection.displayName }} />
+          {showTotalScore && <span className="sr-only">{totalScoreSr}</span>}
+        </a>
+        {showTotalScore && <span className="small ml-1 mb-2">({earned}/{possible}) {subsection.percentGraded}%</span>}
+      </div>
+      <div className="row small">
+        {subsection.format && <div className="mr-1">{subsection.format}</div>}
+        {subsection.due !== null && <DueDateTime due={subsection.due} />}
+      </div>
+      {subsection.problemScores.length > 0 && subsection.showGrades && (
+        <ProblemScores scoreName={scoreName} problemScores={subsection.problemScores} />
+      )}
+      {subsection.problemScores.length > 0 && !subsection.showGrades && subsection.showCorrectness === 'past_due' && (
+        <div className="row small">{intl.formatMessage(messages[`${scoreName}HiddenUntil`])}</div>
+      )}
+      {subsection.problemScores.length > 0 && !subsection.showGrades && !(subsection.showCorrectness === 'past_due')
+      && <div className="row small">{intl.formatMessage(messages[`${scoreName}Hidden`])}</div>}
+      {(subsection.problemScores.length === 0) && (
+        <div className="row small">{intl.formatMessage(messages.noScores)}</div>
+      )}
+    </section>
+  );
+}
+
+Subsection.propTypes = {
+  intl: intlShape.isRequired,
+  subsection: PropTypes.shape({
+    graded: PropTypes.bool.isRequired,
+    url: PropTypes.string.isRequired,
+    showGrades: PropTypes.bool.isRequired,
+    gradedTotal: PropTypes.shape({
+      possible: PropTypes.number,
+      earned: PropTypes.number,
+      graded: PropTypes.bool,
+    }).isRequired,
+    showCorrectness: PropTypes.string.isRequired,
+    due: PropTypes.string,
+    problemScores: PropTypes.arrayOf(PropTypes.shape({
+      possible: PropTypes.number,
+      earned: PropTypes.number,
+      id: PropTypes.string,
+    })).isRequired,
+    format: PropTypes.string,
+    // override: PropTypes.object,
+    displayName: PropTypes.string.isRequired,
+    percentGraded: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default injectIntl(Subsection);

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

@@ -0,0 +1,38 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  problem: {
+    id: 'learning.progress.badge.problem',
+    defaultMessage: 'Problem Scores: ',
+  },
+  practice: {
+    id: 'learning.progress.badge.practice',
+    defaultMessage: 'Practice Scores: ',
+  },
+  problemHiddenUntil: {
+    id: 'learning.progress.badge.problemHiddenUntil',
+    defaultMessage: 'Problem scores are hidden until the due date.',
+  },
+  practiceHiddenUntil: {
+    id: 'learning.progress.badge.practiceHiddenUntil',
+    defaultMessage: 'Practice scores are hidden until the due date.',
+  },
+  problemHidden: {
+    id: 'learning.progress.badge.probHidden',
+    defaultMessage: 'problemlem scores are hidden.',
+  },
+  practiceHidden: {
+    id: 'learning.progress.badge.practiceHidden',
+    defaultMessage: 'Practice scores are hidden.',
+  },
+  noScores: {
+    id: 'learning.progress.badge.noScores',
+    defaultMessage: 'No problem scores in this section.',
+  },
+  pointsEarned: {
+    id: 'learning.progress.badge.scoreEarned',
+    defaultMessage: '{earned} of {total} possible points',
+  },
+});
+
+export default messages;

src/courseware/CourseContainer.jsx

@@ -1,110 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { history, getConfig } from '@edx/frontend-platform';
-import { fetchCourseMetadata, courseMetadataShape } from '../data/course-meta';
-import { fetchCourseBlocks } from '../data/course-blocks';
-
-import messages from './messages';
-import PageLoading from '../PageLoading';
-import Course from './course/Course';
-
-function CourseContainer(props) {
-  const {
-    intl,
-    match,
-    courseId,
-    blocks: models,
-    metadata,
-  } = props;
-  const {
-    courseUsageKey,
-    sequenceId,
-    unitId,
-  } = match.params;
-
-  useEffect(() => {
-    props.fetchCourseMetadata(courseUsageKey);
-    props.fetchCourseBlocks(courseUsageKey);
-  }, [courseUsageKey]);
-
-  useEffect(() => {
-    if (courseId && !sequenceId) {
-      // TODO: This is temporary until we get an actual activeSequenceId into the course model data.
-      const course = models[courseId];
-      const chapter = models[course.children[0]];
-      const activeSequenceId = chapter.children[0];
-      history.push(`/course/${courseUsageKey}/${activeSequenceId}`);
-    }
-  }, [courseUsageKey, courseId, sequenceId]);
-
-  const metadataLoaded = metadata.fetchState === 'loaded';
-  useEffect(() => {
-    if (metadataLoaded && !metadata.userHasAccess) {
-      global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${courseUsageKey}/course/`);
-    }
-  }, [metadataLoaded]);
-
-  // Whether or not the container is ready to render the Course.
-  const ready = metadataLoaded && courseId && sequenceId;
-
-  return (
-    <main className="flex-grow-1 d-flex flex-column">
-      {ready ? (
-        <Course
-          courseOrg={props.metadata.org}
-          courseNumber={props.metadata.number}
-          courseName={props.metadata.name}
-          courseUsageKey={courseUsageKey}
-          courseId={courseId}
-          isEnrolled={props.metadata.isEnrolled}
-          sequenceId={sequenceId}
-          unitId={unitId}
-          models={models}
-          tabs={props.metadata.tabs}
-          verifiedMode={props.metadata.verifiedMode}
-        />
-      ) : (
-        <PageLoading
-          srMessage={intl.formatMessage(messages['learn.loading.learning.sequence'])}
-        />
-      )}
-    </main>
-  );
-}
-
-CourseContainer.propTypes = {
-  intl: intlShape.isRequired,
-  courseId: PropTypes.string,
-  blocks: PropTypes.objectOf(PropTypes.shape({
-    id: PropTypes.string,
-  })),
-  metadata: courseMetadataShape,
-  fetchCourseMetadata: PropTypes.func.isRequired,
-  fetchCourseBlocks: PropTypes.func.isRequired,
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      courseUsageKey: PropTypes.string.isRequired,
-      sequenceId: PropTypes.string,
-      unitId: PropTypes.string,
-    }).isRequired,
-  }).isRequired,
-};
-
-CourseContainer.defaultProps = {
-  blocks: {},
-  metadata: undefined,
-  courseId: undefined,
-};
-
-const mapStateToProps = state => ({
-  courseId: state.courseBlocks.root,
-  metadata: state.courseMeta,
-  blocks: state.courseBlocks.blocks,
-});
-
-export default connect(mapStateToProps, {
-  fetchCourseMetadata,
-  fetchCourseBlocks,
-})(injectIntl(CourseContainer));

src/courseware/CoursewareContainer.jsx

@@ -0,0 +1,378 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { history } from '@edx/frontend-platform';
+import { getLocale } from '@edx/frontend-platform/i18n';
+import { Redirect } from 'react-router';
+import { createSelector } from '@reduxjs/toolkit';
+import { defaultMemoize as memoize } from 'reselect';
+
+import {
+  checkBlockCompletion,
+  fetchCourse,
+  fetchSequence,
+  getResumeBlock,
+  saveSequencePosition,
+} from './data';
+import { TabPage } from '../tab-page';
+
+import Course from './course';
+import { handleNextSectionCelebration } from './course/celebration';
+
+const checkExamRedirect = memoize((sequenceStatus, sequence) => {
+  if (sequenceStatus === 'loaded') {
+    if (sequence.isTimeLimited && sequence.lmsWebUrl !== undefined) {
+      global.location.assign(sequence.lmsWebUrl);
+    }
+  }
+});
+
+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}`);
+      } else if (firstSequenceId) {
+        history.replace(`/course/${courseId}/${firstSequenceId}`);
+      }
+    });
+  }
+});
+
+const checkContentRedirect = memoize((courseId, sequenceStatus, sequenceId, sequence, unitId) => {
+  if (sequenceStatus === 'loaded' && sequenceId && !unitId) {
+    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}`);
+    }
+  }
+});
+
+class CoursewareContainer extends Component {
+  checkSaveSequencePosition = memoize((unitId) => {
+    const {
+      courseId,
+      sequenceId,
+      sequenceStatus,
+      sequence,
+    } = this.props;
+    if (sequenceStatus === 'loaded' && sequence.saveUnitPosition && unitId) {
+      const activeUnitIndex = sequence.unitIds.indexOf(unitId);
+      this.props.saveSequencePosition(courseId, sequenceId, activeUnitIndex);
+    }
+  });
+
+  checkFetchCourse = memoize((courseId) => {
+    this.props.fetchCourse(courseId);
+  });
+
+  checkFetchSequence = memoize((sequenceId) => {
+    if (sequenceId) {
+      this.props.fetchSequence(sequenceId);
+    }
+  });
+
+  componentDidMount() {
+    const {
+      match: {
+        params: {
+          courseId: routeCourseId,
+          sequenceId: routeSequenceId,
+        },
+      },
+    } = this.props;
+    // Load data whenever the course or sequence ID changes.
+    this.checkFetchCourse(routeCourseId);
+    this.checkFetchSequence(routeSequenceId);
+  }
+
+  componentDidUpdate() {
+    const {
+      courseId,
+      sequenceId,
+      courseStatus,
+      sequenceStatus,
+      sequence,
+      firstSequenceId,
+      match: {
+        params: {
+          courseId: routeCourseId,
+          sequenceId: routeSequenceId,
+          unitId: routeUnitId,
+        },
+      },
+    } = this.props;
+
+    // Load data whenever the course or sequence ID changes.
+    this.checkFetchCourse(routeCourseId);
+    this.checkFetchSequence(routeSequenceId);
+
+    // Redirect to the legacy experience for exams.
+    checkExamRedirect(sequenceStatus, sequence);
+
+    // Determine if we need to redirect because our URL is incomplete.
+    checkContentRedirect(courseId, sequenceStatus, sequenceId, sequence, routeUnitId);
+
+    // Determine if we can resume where we left off.
+    checkResumeRedirect(courseStatus, courseId, sequenceId, firstSequenceId);
+
+    // Check if we should save our sequence position.  Only do this when the route unit ID changes.
+    this.checkSaveSequencePosition(routeUnitId);
+  }
+
+  handleUnitNavigationClick = (nextUnitId) => {
+    const {
+      courseId, sequenceId, unitId,
+    } = this.props;
+    this.props.checkBlockCompletion(courseId, sequenceId, unitId);
+    history.push(`/course/${courseId}/${sequenceId}/${nextUnitId}`);
+  }
+
+  handleNextSequenceClick = () => {
+    const {
+      course,
+      courseId,
+      nextSequence,
+      sequence,
+      sequenceId,
+    } = this.props;
+
+    if (nextSequence !== null) {
+      let nextUnitId = null;
+      if (nextSequence.unitIds.length > 0) {
+        [nextUnitId] = nextSequence.unitIds;
+        history.push(`/course/${courseId}/${nextSequence.id}/${nextUnitId}`);
+      } else {
+        // Some sequences have no units.  This will show a blank page with prev/next buttons.
+        history.push(`/course/${courseId}/${nextSequence.id}`);
+      }
+
+      const celebrateFirstSection = course && course.celebrations && course.celebrations.firstSection;
+      if (celebrateFirstSection && sequence.sectionId !== nextSequence.sectionId) {
+        handleNextSectionCelebration(sequenceId, nextSequence.id, nextUnitId);
+      }
+    }
+  }
+
+  handlePreviousSequenceClick = () => {
+    const { previousSequence, courseId } = this.props;
+    if (previousSequence !== null) {
+      if (previousSequence.unitIds.length > 0) {
+        const previousUnitId = previousSequence.unitIds[previousSequence.unitIds.length - 1];
+        history.push(`/course/${courseId}/${previousSequence.id}/${previousUnitId}`);
+      } else {
+        // Some sequences have no units.  This will show a blank page with prev/next buttons.
+        history.push(`/course/${courseId}/${previousSequence.id}`);
+      }
+    }
+  }
+
+  renderDenied() {
+    const { courseId, course } = this.props;
+    let url = `/redirect/course-home/${courseId}`;
+    switch (course.canLoadCourseware.errorCode) {
+      case 'audit_expired':
+        url = `/redirect/dashboard?access_response_error=${course.canLoadCourseware.additionalContextUserMessage}`;
+        break;
+      case 'course_not_started':
+        // eslint-disable-next-line no-case-declarations
+        const startDate = (new Intl.DateTimeFormat(getLocale())).format(new Date(course.start));
+        url = `/redirect/dashboard?notlive=${startDate}`;
+        break;
+      case 'survey_required': // TODO: Redirect to the course survey
+      case 'unfulfilled_milestones':
+        url = '/redirect/dashboard';
+        break;
+      case 'authentication_required':
+      case 'enrollment_required':
+      default:
+    }
+    return (
+      <Redirect to={url} />
+    );
+  }
+
+  render() {
+    const {
+      courseStatus,
+      courseId,
+      sequenceId,
+      match: {
+        params: {
+          unitId: routeUnitId,
+        },
+      },
+    } = this.props;
+
+    if (courseStatus === 'denied') {
+      return this.renderDenied();
+    }
+
+    return (
+      <TabPage
+        activeTabSlug="courseware"
+        courseId={courseId}
+        unitId={routeUnitId}
+        courseStatus={courseStatus}
+      >
+        <Course
+          courseId={courseId}
+          sequenceId={sequenceId}
+          unitId={routeUnitId}
+          nextSequenceHandler={this.handleNextSequenceClick}
+          previousSequenceHandler={this.handlePreviousSequenceClick}
+          unitNavigationHandler={this.handleUnitNavigationClick}
+        />
+      </TabPage>
+    );
+  }
+}
+
+const sequenceShape = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  unitIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isTimeLimited: PropTypes.bool,
+  lmsWebUrl: PropTypes.string,
+});
+
+const courseShape = PropTypes.shape({
+  canLoadCourseware: PropTypes.shape({
+    errorCode: PropTypes.string,
+    additionalContextUserMessage: PropTypes.string,
+  }).isRequired,
+});
+
+CoursewareContainer.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      courseId: PropTypes.string.isRequired,
+      sequenceId: PropTypes.string,
+      unitId: PropTypes.string,
+    }).isRequired,
+  }).isRequired,
+  courseId: PropTypes.string,
+  sequenceId: PropTypes.string,
+  firstSequenceId: PropTypes.string,
+  unitId: PropTypes.string,
+  courseStatus: PropTypes.oneOf(['loaded', 'loading', 'failed', 'denied']).isRequired,
+  sequenceStatus: PropTypes.oneOf(['loaded', 'loading', 'failed']).isRequired,
+  nextSequence: sequenceShape,
+  previousSequence: sequenceShape,
+  course: courseShape,
+  sequence: sequenceShape,
+  saveSequencePosition: PropTypes.func.isRequired,
+  checkBlockCompletion: PropTypes.func.isRequired,
+  fetchCourse: PropTypes.func.isRequired,
+  fetchSequence: PropTypes.func.isRequired,
+};
+
+CoursewareContainer.defaultProps = {
+  courseId: null,
+  sequenceId: null,
+  firstSequenceId: null,
+  unitId: null,
+  nextSequence: null,
+  previousSequence: null,
+  course: null,
+  sequence: null,
+};
+
+const currentCourseSelector = createSelector(
+  (state) => state.models.courses || {},
+  (state) => state.courseware.courseId,
+  (coursesById, courseId) => (coursesById[courseId] ? coursesById[courseId] : null),
+);
+
+const currentSequenceSelector = createSelector(
+  (state) => state.models.sequences || {},
+  (state) => state.courseware.sequenceId,
+  (sequencesById, sequenceId) => (sequencesById[sequenceId] ? sequencesById[sequenceId] : null),
+);
+
+const sequenceIdsSelector = createSelector(
+  (state) => state.courseware.courseStatus,
+  currentCourseSelector,
+  (state) => state.models.sections,
+  (courseStatus, course, sectionsById) => {
+    if (courseStatus !== 'loaded') {
+      return [];
+    }
+    const { sectionIds = [] } = course;
+    return sectionIds.flatMap(sectionId => sectionsById[sectionId].sequenceIds);
+  },
+);
+
+const previousSequenceSelector = createSelector(
+  sequenceIdsSelector,
+  (state) => state.models.sequences || {},
+  (state) => state.courseware.sequenceId,
+  (sequenceIds, sequencesById, sequenceId) => {
+    if (!sequenceId || sequenceIds.length === 0) {
+      return null;
+    }
+    const sequenceIndex = sequenceIds.indexOf(sequenceId);
+    const previousSequenceId = sequenceIndex > 0 ? sequenceIds[sequenceIndex - 1] : null;
+    return previousSequenceId !== null ? sequencesById[previousSequenceId] : null;
+  },
+);
+
+const nextSequenceSelector = createSelector(
+  sequenceIdsSelector,
+  (state) => state.models.sequences || {},
+  (state) => state.courseware.sequenceId,
+  (sequenceIds, sequencesById, sequenceId) => {
+    if (!sequenceId || sequenceIds.length === 0) {
+      return null;
+    }
+    const sequenceIndex = sequenceIds.indexOf(sequenceId);
+    const nextSequenceId = sequenceIndex < sequenceIds.length - 1 ? sequenceIds[sequenceIndex + 1] : null;
+    return nextSequenceId !== null ? sequencesById[nextSequenceId] : null;
+  },
+);
+
+const firstSequenceIdSelector = createSelector(
+  (state) => state.courseware.courseStatus,
+  currentCourseSelector,
+  (state) => state.models.sections || {},
+  (courseStatus, course, sectionsById) => {
+    if (courseStatus !== 'loaded') {
+      return null;
+    }
+    const { sectionIds = [] } = course;
+
+    if (sectionIds.length === 0) {
+      return null;
+    }
+
+    return sectionsById[sectionIds[0]].sequenceIds[0];
+  },
+);
+
+const mapStateToProps = (state) => {
+  const {
+    courseId, sequenceId, unitId, courseStatus, sequenceStatus,
+  } = state.courseware;
+
+  return {
+    courseId,
+    sequenceId,
+    unitId,
+    courseStatus,
+    sequenceStatus,
+    course: currentCourseSelector(state),
+    sequence: currentSequenceSelector(state),
+    previousSequence: previousSequenceSelector(state),
+    nextSequence: nextSequenceSelector(state),
+    firstSequenceId: firstSequenceIdSelector(state),
+  };
+};
+
+export default connect(mapStateToProps, {
+  checkBlockCompletion,
+  saveSequencePosition,
+  fetchCourse,
+  fetchSequence,
+})(CoursewareContainer);

src/courseware/CoursewareContainer.test.jsx

@@ -0,0 +1,378 @@
+import { getConfig, history } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { waitForElementToBeRemoved } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Route, Switch } from 'react-router';
+import { Factory } from 'rosie';
+import MockAdapter from 'axios-mock-adapter';
+
+import { UserMessagesProvider } from '../generic/user-messages';
+import tabMessages from '../tab-page/messages';
+import initializeMockApp from '../setupTest';
+
+import CoursewareContainer from './CoursewareContainer';
+import buildSimpleCourseBlocks from './data/__factories__/courseBlocks.factory';
+import initializeStore from '../store';
+
+// NOTE: Because the unit creates an iframe, we choose to mock it out as its rendering isn't
+// pertinent to this test.  Instead, we render a simple div that displays the properties we expect
+// to have been passed into the component.  Separate tests can handle unit rendering, but this
+// proves that the component is rendered and receives the correct props.  We probably COULD render
+// Unit.jsx and its iframe in this test, but it's already complex enough.
+function MockUnit({ courseId, id }) { // eslint-disable-line react/prop-types
+  return (
+    <div className="fake-unit">Unit Contents {courseId} {id}</div>
+  );
+}
+
+jest.mock(
+  './course/sequence/Unit',
+  () => MockUnit,
+);
+
+initializeMockApp();
+
+describe('CoursewareContainer', () => {
+  let store;
+  let component;
+  let axiosMock;
+
+  beforeEach(() => {
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+    store = initializeStore();
+
+    component = (
+      <AppProvider store={store}>
+        <UserMessagesProvider>
+          <Switch>
+            <Route
+              path={[
+                '/course/:courseId/:sequenceId/:unitId',
+                '/course/:courseId/:sequenceId',
+                '/course/:courseId',
+              ]}
+              component={CoursewareContainer}
+            />
+          </Switch>
+        </UserMessagesProvider>
+      </AppProvider>
+    );
+  });
+
+  it('should initialize to show a spinner', () => {
+    history.push('/course/abc123');
+    render(component);
+
+    const spinner = screen.getByRole('status');
+
+    expect(spinner.firstChild).toContainHTML(
+      `<span class="sr-only">${tabMessages.loading.defaultMessage}</span>`,
+    );
+  });
+
+  describe('when receiving successful course data', () => {
+    let courseId;
+    let courseMetadata;
+    let courseBlocks;
+    let sequenceMetadata;
+
+    let sequenceBlock;
+    let unitBlocks;
+
+    function assertLoadedHeader(container) {
+      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);
+      // Ensure the course title is showing up in the header.  This means we loaded course blocks properly.
+      expect(courseHeader.querySelector('.course-title')).toHaveTextContent(courseMetadata.name);
+    }
+
+    function assertSequenceNavigation(container) {
+      // Ensure we had appropriate sequence navigation buttons.  We should only have one unit.
+      const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
+      expect(sequenceNavButtons).toHaveLength(5);
+
+      expect(sequenceNavButtons[0]).toHaveTextContent('Previous');
+      // Prove this button is rendering an SVG tasks icon, meaning it's a unit/vertical.
+      expect(sequenceNavButtons[1].querySelector('svg')).toHaveClass('fa-tasks');
+      expect(sequenceNavButtons[4]).toHaveTextContent('Next');
+    }
+
+    function setupMockRequests() {
+      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/course/${courseId}`).reply(200, courseMetadata);
+      axiosMock.onGet(new RegExp(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/*`)).reply(200, courseBlocks);
+      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceBlock.id}`).reply(200, sequenceMetadata);
+    }
+
+    beforeEach(async () => {
+      // On page load, SequenceContext attempts to scroll to the top of the page.
+      global.scrollTo = jest.fn();
+
+      courseMetadata = Factory.build('courseMetadata');
+      courseId = courseMetadata.id;
+
+      const customUnitBlocks = [
+        Factory.build(
+          'block',
+          { type: 'vertical' },
+          { courseId },
+        ),
+        Factory.build(
+          'block',
+          { type: 'vertical' },
+          { courseId },
+        ),
+        Factory.build(
+          'block',
+          { type: 'vertical' },
+          { courseId },
+        ),
+      ];
+
+      const result = buildSimpleCourseBlocks(courseId, courseMetadata.name, { unitBlocks: customUnitBlocks });
+      courseBlocks = result.courseBlocks;
+      unitBlocks = result.unitBlocks;
+      // eslint-disable-next-line prefer-destructuring
+      sequenceBlock = result.sequenceBlock[0];
+
+      sequenceMetadata = Factory.build(
+        'sequenceMetadata',
+        {},
+        { courseId, unitBlocks, sequenceBlock },
+      );
+
+      setupMockRequests();
+    });
+
+    describe('when the URL only contains a course ID', () => {
+      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,
+        });
+
+        history.push(`/course/${courseId}`);
+        const { container } = render(component);
+
+        // This is an important line that ensures the spinner has been removed - and thus our main
+        // content has been loaded - prior to proceeding with our expectations.
+        await waitForElementToBeRemoved(screen.getByRole('status'));
+
+        assertLoadedHeader(container);
+        assertSequenceNavigation(container);
+
+        expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[1].id);
+      });
+
+      it('should use the first sequence ID and activeUnitIndex if the resume block response is empty', async () => {
+        // OVERRIDE SEQUENCE METADATA:
+        // set the position to the third unit so we can prove activeUnitIndex is working
+        sequenceMetadata = Factory.build(
+          'sequenceMetadata',
+          { position: 3 }, // position index is 1-based and is converted to 0-based for activeUnitIndex
+          { courseId, unitBlocks, sequenceBlock },
+        );
+
+        // Re-call the mock setup now that sequenceMetadata is different.
+        setupMockRequests();
+        // 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}`);
+        const { container } = render(component);
+
+        // This is an important line that ensures the spinner has been removed - and thus our main
+        // content has been loaded - prior to proceeding with our expectations.
+        await waitForElementToBeRemoved(screen.getByRole('status'));
+
+        assertLoadedHeader(container);
+        assertSequenceNavigation(container);
+
+        expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[2].id);
+      });
+    });
+
+    describe('when the URL contains a course ID and sequence ID', () => {
+      it('should pick the first unit if position was not defined (activeUnitIndex becomes 0)', async () => {
+        history.push(`/course/${courseId}/${sequenceBlock.id}`);
+        const { container } = render(component);
+
+        // This is an important line that ensures the spinner has been removed - and thus our main
+        // content has been loaded - prior to proceeding with our expectations.
+        await waitForElementToBeRemoved(screen.getByRole('status'));
+
+        assertLoadedHeader(container);
+        assertSequenceNavigation(container);
+
+        expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[0].id);
+      });
+
+      it('should use activeUnitIndex to pick a unit from the sequence', async () => {
+        // OVERRIDE SEQUENCE METADATA:
+        sequenceMetadata = Factory.build(
+          'sequenceMetadata',
+          { position: 3 }, // position index is 1-based and is converted to 0-based for activeUnitIndex
+          { courseId, unitBlocks, sequenceBlock },
+        );
+
+        // Re-call the mock setup now that sequenceMetadata is different.
+        setupMockRequests();
+
+        history.push(`/course/${courseId}/${sequenceBlock.id}`);
+        const { container } = render(component);
+
+        // This is an important line that ensures the spinner has been removed - and thus our main
+        // content has been loaded - prior to proceeding with our expectations.
+        await waitForElementToBeRemoved(screen.getByRole('status'));
+
+        assertLoadedHeader(container);
+        assertSequenceNavigation(container);
+
+        expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[2].id);
+      });
+    });
+
+    describe('when the URL contains a course, sequence, and unit ID', () => {
+      it('should load the specified unit', async () => {
+        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
+        const { container } = render(component);
+
+        // This is an important line that ensures the spinner has been removed - and thus our main
+        // content has been loaded - prior to proceeding with our expectations.
+        await waitForElementToBeRemoved(screen.getByRole('status'));
+
+        assertLoadedHeader(container);
+        assertSequenceNavigation(container);
+
+        expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[2].id);
+      });
+    });
+
+    describe('when the current sequence is an exam', () => {
+      const { location } = window;
+
+      beforeEach(() => {
+        delete window.location;
+        window.location = {
+          assign: jest.fn(),
+        };
+      });
+
+      afterEach(() => {
+        window.location = location;
+      });
+
+      it('should redirect to the sequence lmsWebUrl', async () => {
+        // OVERRIDE SEQUENCE METADATA:
+        sequenceMetadata = Factory.build(
+          'sequenceMetadata',
+          { is_time_limited: true }, // position index is 1-based and is converted to 0-based for activeUnitIndex
+          { courseId, unitBlocks, sequenceBlock },
+        );
+
+        // Re-call the mock setup now that sequenceMetadata is different.
+        setupMockRequests();
+        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
+        render(component);
+
+        // This is an important line that ensures the spinner has been removed - and thus our main
+        // content has been loaded - prior to proceeding with our expectations.
+        await waitForElementToBeRemoved(screen.getByRole('status'));
+
+        expect(global.location.assign).toHaveBeenCalledWith(sequenceBlock.lms_web_url);
+      });
+    });
+  });
+
+  describe('when receiving a can_load_courseware error_code', () => {
+    let courseMetadata;
+
+    function setupWithDeniedStatus(errorCode) {
+      courseMetadata = Factory.build('courseMetadata', {
+        can_load_courseware: {
+          has_access: false,
+          error_code: errorCode,
+          additional_context_user_message: 'uhoh oh no', // only used by audit_expired
+        },
+      });
+      const courseId = courseMetadata.id;
+      const { courseBlocks, unitBlocks, sequenceBlock } = buildSimpleCourseBlocks(courseId, courseMetadata.name);
+      const sequenceMetadata = Factory.build(
+        'sequenceMetadata',
+        {},
+        { courseId, unitBlocks, sequenceBlock },
+      );
+
+      const forbiddenCourseUrl = `${getConfig().LMS_BASE_URL}/api/courseware/course/${courseId}`;
+      const courseBlocksUrlRegExp = new RegExp(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/*`);
+      const sequenceMetadataUrl = `${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceBlock.id}`;
+
+      axiosMock.onGet(forbiddenCourseUrl).reply(200, courseMetadata);
+      axiosMock.onGet(courseBlocksUrlRegExp).reply(200, courseBlocks);
+      axiosMock.onGet(sequenceMetadataUrl).reply(200, sequenceMetadata);
+
+      history.push(`/course/${courseId}`);
+    }
+
+    it('should go to course home for an enrollment_required error code', async () => {
+      setupWithDeniedStatus('enrollment_required');
+
+      render(component);
+      await waitForElementToBeRemoved(screen.getByRole('status'));
+
+      expect(global.location.href).toEqual(`http://localhost/redirect/course-home/${courseMetadata.id}`);
+    });
+
+    it('should go to course home for an authentication_required error code', async () => {
+      setupWithDeniedStatus('authentication_required');
+
+      render(component);
+      await waitForElementToBeRemoved(screen.getByRole('status'));
+
+      expect(global.location.href).toEqual(`http://localhost/redirect/course-home/${courseMetadata.id}`);
+    });
+
+    it('should go to dashboard for an unfulfilled_milestones error code', async () => {
+      setupWithDeniedStatus('unfulfilled_milestones');
+
+      render(component);
+      await waitForElementToBeRemoved(screen.getByRole('status'));
+
+      expect(global.location.href).toEqual('http://localhost/redirect/dashboard');
+    });
+
+    it('should go to the dashboard with an attached access_response_error for an audit_expired error code', async () => {
+      setupWithDeniedStatus('audit_expired');
+
+      render(component);
+      await waitForElementToBeRemoved(screen.getByRole('status'));
+
+      expect(global.location.href).toEqual('http://localhost/redirect/dashboard?access_response_error=uhoh%20oh%20no');
+    });
+
+    it('should go to the dashboard with a notlive start date for a course_not_started error code', async () => {
+      setupWithDeniedStatus('course_not_started');
+
+      render(component);
+      await waitForElementToBeRemoved(screen.getByRole('status'));
+
+      const startDate = '2/5/2013'; // This date is based on our courseMetadata factory's sample data.
+      expect(global.location.href).toEqual(`http://localhost/redirect/dashboard?notlive=${startDate}`);
+    });
+  });
+});

src/courseware/InstructorToolbar.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-function InstructorToolbar(props) {
-  // TODO: Only render this toolbar if the user is course staff
-  if (!props.activeUnitLmsWebUrl) {
-    return null;
-  }
-
-  return (
-    <div className="bg-primary text-light">
-      <div className="container-fluid py-3 d-flex justify-content-end align-items-center">
-        <div>
-          <p className="mb-0 mr-5">
-          You are currently previewing the new learning sequence experience. This preview is to allow for early content testing, especially for custom content blocks, with the goal of ensuring it renders as expected in the next experience. You can learn more through the following <a className="text-white" style={{ textDecoration: 'underline' }} href="https://partners.edx.org/announcements/author-preview-learning-sequence-experience-update" target="blank" rel="noopener">Partner Portal post</a>.  Please report any issues or provide <a className="text-white" style={{ textDecoration: 'underline' }} target="blank" rel="noopener" href="https://forms.gle/R6jMYJNTCj1vgC1D6">feedback using the linked form</a>.
-          </p>
-        </div>
-        <div className="flex-shrink-0">
-          <a className="btn d-block btn-outline-light" href={props.activeUnitLmsWebUrl}>View unit in the existing experience</a>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-InstructorToolbar.propTypes = {
-  activeUnitLmsWebUrl: PropTypes.string,
-};
-
-InstructorToolbar.defaultProps = {
-  activeUnitLmsWebUrl: undefined,
-};
-
-const mapStateToProps = (state, props) => {
-  if (!props.unitId) {
-    return {};
-  }
-
-  const activeUnit = state.courseBlocks.blocks[props.unitId];
-  return {
-    activeUnitLmsWebUrl: activeUnit.lmsWebUrl,
-  };
-};
-
-export default connect(mapStateToProps)(InstructorToolbar);

src/courseware/course/Course.jsx

@@ -1,138 +1,107 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { history } from '@edx/frontend-platform';
+import { Helmet } from 'react-helmet';
+import { useDispatch } from 'react-redux';
+import { getConfig } from '@edx/frontend-platform';
 
+import { AlertList } from '../../generic/user-messages';
+import useAccessExpirationAlert from '../../alerts/access-expiration-alert';
+import useOfferAlert from '../../alerts/offer-alert';
+
+import Sequence from './sequence';
+
+import { CelebrationModal, shouldCelebrateOnSectionLoad } from './celebration';
 import CourseBreadcrumbs from './CourseBreadcrumbs';
-import SequenceContainer from './SequenceContainer';
-import { createSequenceIdList } from '../utils';
-import AlertList from '../../user-messages/AlertList';
-import CourseHeader from './CourseHeader';
 import CourseSock from './course-sock';
-import CourseTabsNavigation from './CourseTabsNavigation';
-import InstructorToolbar from '../InstructorToolbar';
-import { useLogistrationAlert, useEnrollmentAlert } from '../../hooks';
+import ContentTools from './content-tools';
+import { useModel } from '../../generic/model-store';
 
-const EnrollmentAlert = React.lazy(() => import('../../enrollment-alert'));
-const LogistrationAlert = React.lazy(() => import('../../logistration-alert'));
-
-
-export default function Course({
+function Course({
   courseId,
-  courseNumber,
-  courseName,
-  courseOrg,
-  courseUsageKey,
-  isEnrolled,
-  models,
   sequenceId,
-  tabs,
   unitId,
-  verifiedMode,
+  nextSequenceHandler,
+  previousSequenceHandler,
+  unitNavigationHandler,
 }) {
-  const nextSequenceHandler = useCallback(() => {
-    const sequenceIds = createSequenceIdList(models, courseId);
-    const currentIndex = sequenceIds.indexOf(sequenceId);
-    if (currentIndex < sequenceIds.length - 1) {
-      const nextSequenceId = sequenceIds[currentIndex + 1];
-      const nextSequence = models[nextSequenceId];
-      const nextUnitId = nextSequence.children[0];
-      history.push(`/course/${courseUsageKey}/${nextSequenceId}/${nextUnitId}`);
-    }
-  });
+  const course = useModel('courses', courseId);
+  const sequence = useModel('sequences', sequenceId);
+  const section = useModel('sections', sequence ? sequence.sectionId : null);
 
-  const previousSequenceHandler = useCallback(() => {
-    const sequenceIds = createSequenceIdList(models, courseId);
-    const currentIndex = sequenceIds.indexOf(sequenceId);
-    if (currentIndex > 0) {
-      const previousSequenceId = sequenceIds[currentIndex - 1];
-      const previousSequence = models[previousSequenceId];
-      const previousUnitId = previousSequence.children[previousSequence.children.length - 1];
-      history.push(`/course/${courseUsageKey}/${previousSequenceId}/${previousUnitId}`);
-    }
-  });
+  const pageTitleBreadCrumbs = [
+    sequence,
+    section,
+    course,
+  ].filter(element => element != null).map(element => element.title);
 
-  useLogistrationAlert();
-  useEnrollmentAlert(isEnrolled);
+  const {
+    canShowUpgradeSock,
+    celebrations,
+    courseExpiredMessage,
+    offerHtml,
+    verifiedMode,
+  } = course;
+
+  // Below the tabs, above the breadcrumbs alerts (appearing in the order listed here)
+  const offerAlert = useOfferAlert(offerHtml, 'course');
+  const accessExpirationAlert = useAccessExpirationAlert(courseExpiredMessage, 'course');
+
+  const dispatch = useDispatch();
+  const celebrateFirstSection = celebrations && celebrations.firstSection;
+  const celebrationOpen = shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection, dispatch);
 
   return (
     <>
-      <CourseHeader
-        courseOrg={courseOrg}
-        courseNumber={courseNumber}
-        courseName={courseName}
+      <Helmet>
+        <title>{`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`}</title>
+      </Helmet>
+      <AlertList
+        className="my-3"
+        topic="course"
+        customAlerts={{
+          ...accessExpirationAlert,
+          ...offerAlert,
+        }}
       />
-      <InstructorToolbar
-        courseUsageKey={courseUsageKey}
+      <CourseBreadcrumbs
         courseId={courseId}
+        sectionId={section ? section.id : null}
         sequenceId={sequenceId}
-        unitId={unitId}
       />
-      <CourseTabsNavigation tabs={tabs} activeTabSlug="courseware" />
-      <div className="container-fluid flex-grow-1 d-flex flex-column">
-        <AlertList
-          className="my-3"
-          topic="course"
-          customAlerts={{
-            clientEnrollmentAlert: EnrollmentAlert,
-            clientLogistrationAlert: LogistrationAlert,
-          }}
-        />
-        <CourseBreadcrumbs
-          courseUsageKey={courseUsageKey}
+      <AlertList topic="sequence" />
+      <Sequence
+        unitId={unitId}
+        sequenceId={sequenceId}
+        courseId={courseId}
+        unitNavigationHandler={unitNavigationHandler}
+        nextSequenceHandler={nextSequenceHandler}
+        previousSequenceHandler={previousSequenceHandler}
+      />
+      {celebrationOpen && (
+        <CelebrationModal
           courseId={courseId}
-          sequenceId={sequenceId}
-          unitId={unitId}
-          models={models}
+          open
         />
-        <SequenceContainer
-          key={sequenceId}
-          courseUsageKey={courseUsageKey}
-          courseId={courseId}
-          sequenceId={sequenceId}
-          unitId={unitId}
-          models={models}
-          onNext={nextSequenceHandler}
-          onPrevious={previousSequenceHandler}
-        />
-      </div>
-      {verifiedMode && <CourseSock verifiedMode={verifiedMode} />}
+      )}
+      {canShowUpgradeSock && verifiedMode && <CourseSock verifiedMode={verifiedMode} />}
+      <ContentTools course={course} />
     </>
   );
 }
 
 Course.propTypes = {
-  courseOrg: PropTypes.string.isRequired,
-  courseNumber: PropTypes.string.isRequired,
-  courseName: PropTypes.string.isRequired,
-  courseUsageKey: PropTypes.string.isRequired,
-  courseId: PropTypes.string.isRequired,
-  sequenceId: PropTypes.string.isRequired,
+  courseId: PropTypes.string,
+  sequenceId: PropTypes.string,
   unitId: PropTypes.string,
-  isEnrolled: PropTypes.bool,
-  models: PropTypes.objectOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    displayName: PropTypes.string.isRequired,
-    children: PropTypes.arrayOf(PropTypes.string),
-    parentId: PropTypes.string,
-  })).isRequired,
-  tabs: PropTypes.arrayOf(PropTypes.shape({
-    slug: PropTypes.string.isRequired,
-    priority: PropTypes.number.isRequired,
-    title: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-  })).isRequired,
-  verifiedMode: PropTypes.shape({
-    price: PropTypes.number.isRequired,
-    currency: PropTypes.string.isRequired,
-    currencySymbol: PropTypes.string,
-    sku: PropTypes.string.isRequired,
-    upgradeUrl: PropTypes.string.isRequired,
-  }),
+  nextSequenceHandler: PropTypes.func.isRequired,
+  previousSequenceHandler: PropTypes.func.isRequired,
+  unitNavigationHandler: PropTypes.func.isRequired,
 };
 
 Course.defaultProps = {
-  unitId: undefined,
-  isEnrolled: false,
-  verifiedMode: null,
+  courseId: null,
+  sequenceId: null,
+  unitId: null,
 };
+
+export default Course;

src/courseware/course/CourseBreadcrumb.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default function CourseBreadcrumb({ url, label }) {
-  return (
-    <React.Fragment key={`${label}-${url}`}>
-      <li className="list-inline-item text-gray-300" role="presentation" aria-label="spacer">
-        /
-      </li>
-      <li className="list-inline-item">
-        <a href={url}>{label}</a>
-      </li>
-    </React.Fragment>
-  );
-}
-
-CourseBreadcrumb.propTypes = {
-  url: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-};

src/courseware/course/CourseBreadcrumbs.jsx

@@ -4,39 +4,83 @@ import { getConfig } from '@edx/frontend-platform';
 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 { useModel } from '../../generic/model-store';
 
-import CourseBreadcrumb from './CourseBreadcrumb';
+function CourseBreadcrumb({
+  url, children, withSeparator, ...attrs
+}) {
+  return (
+    <>
+      {withSeparator && (
+        <li className="mx-2 text-gray-300" role="presentation" aria-hidden>/</li>
+      )}
+      <li {...attrs}>
+        <a href={url}>{children}</a>
+      </li>
+    </>
+  );
+}
+
+CourseBreadcrumb.propTypes = {
+  url: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  withSeparator: PropTypes.bool,
+};
+
+CourseBreadcrumb.defaultProps = {
+  withSeparator: false,
+};
 
 export default function CourseBreadcrumbs({
-  courseUsageKey, courseId, sequenceId, models,
+  courseId,
+  sectionId,
+  sequenceId,
 }) {
+  const course = useModel('courses', 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 links = useMemo(() => {
-    const sectionId = models[sequenceId].parentId;
-    return [sectionId, sequenceId].map((nodeId) => {
-      const node = models[nodeId];
-      return {
+    if (courseStatus === 'loaded' && sequenceStatus === 'loaded') {
+      return [section, sequence].filter(node => !!node).map((node) => ({
         id: node.id,
-        label: node.displayName,
-        url: `${getConfig().LMS_BASE_URL}/courses/${courseUsageKey}/course/#${node.id}`,
-      };
-    });
-  }, [courseUsageKey, courseId, sequenceId, models]);
+        label: node.title,
+        url: `${getConfig().LMS_BASE_URL}/courses/${course.id}/course/#${node.id}`,
+      }));
+    }
+    return [];
+  }, [courseStatus, sequenceStatus]);
 
   return (
     <nav aria-label="breadcrumb" className="my-4">
-      <ol className="list-inline m-0">
-        <li className="list-inline-item">
-          <a href={`${getConfig().LMS_BASE_URL}/courses/${courseUsageKey}/course/`}>
-            <FontAwesomeIcon icon={faHome} className="mr-2" />
-            <FormattedMessage
-              id="learn.breadcrumb.navigation.course.home"
-              description="The course home link in breadcrumbs nav"
-              defaultMessage="Course"
-            />
-          </a>
-        </li>
-        {links.map(({ id, url, label }, i) => (
-          <CourseBreadcrumb key={id} url={url} label={label} last={i === links.length - 1} />
+      <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>
         ))}
       </ol>
     </nav>
@@ -44,13 +88,12 @@ export default function CourseBreadcrumbs({
 }
 
 CourseBreadcrumbs.propTypes = {
-  courseUsageKey: PropTypes.string.isRequired,
   courseId: PropTypes.string.isRequired,
-  sequenceId: PropTypes.string.isRequired,
-  models: PropTypes.objectOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    displayName: PropTypes.string.isRequired,
-    children: PropTypes.arrayOf(PropTypes.string),
-    parentId: PropTypes.string,
-  })).isRequired,
+  sectionId: PropTypes.string,
+  sequenceId: PropTypes.string,
+};
+
+CourseBreadcrumbs.defaultProps = {
+  sectionId: null,
+  sequenceId: null,
 };

src/courseware/course/NavTab.jsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { getConfig } from '@edx/frontend-platform';
-
-
-export default function NavTab(props) {
-  const {
-    isActive, url, title, ...attrs
-  } = props;
-
-  const className = classNames(
-    'nav-item nav-link',
-    { active: isActive },
-    attrs.className,
-  );
-
-  // TODO: We probably don't want to blindly add LMS_BASE_URL here.  I think it's more likely
-  // that the course metadata API should provide us fully qualified URLs.
-  return <a {...attrs} className={className} href={`${getConfig().LMS_BASE_URL}${url}`}>{title}</a>;
-}
-
-NavTab.propTypes = {
-  className: PropTypes.string,
-  isActive: PropTypes.bool,
-  title: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired,
-};
-
-NavTab.defaultProps = {
-  className: undefined,
-  isActive: false,
-};