feat: Updated Courseware Search results for SR

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.env

@@ -4,6 +4,7 @@
 NODE_ENV='production'
 
 ACCESS_TOKEN_COOKIE_NAME=''
+APP_ID='learning'
 BASE_URL=''
 CONTACT_URL=''
 CREDENTIALS_BASE_URL=''
@@ -13,7 +14,6 @@ DISCOVERY_API_BASE_URL=''
 DISCUSSIONS_MFE_BASE_URL=''
 ECOMMERCE_BASE_URL=''
 ENABLE_JUMPNAV='true'
-ENABLE_NEW_SIDEBAR=''
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME=''
 EXAMS_BASE_URL=''
@@ -48,3 +48,4 @@ TWITTER_HASHTAG=''
 TWITTER_URL=''
 USER_INFO_COOKIE_NAME=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
+SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''

.env.development

@@ -4,6 +4,7 @@
 NODE_ENV='development'
 
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+APP_ID='learning'
 BASE_URL='http://localhost:2000'
 CONTACT_URL='http://localhost:18000/contact'
 CREDENTIALS_BASE_URL='http://localhost:18150'
@@ -13,7 +14,6 @@ DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
-ENABLE_NEW_SIDEBAR=''
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
 EXAMS_BASE_URL=''
@@ -50,3 +50,4 @@ SESSION_COOKIE_DOMAIN='localhost'
 CHAT_RESPONSE_URL='http://localhost:18000/api/learning_assistant/v1/course_id'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy'
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
+SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''

.env.test

@@ -4,6 +4,7 @@
 NODE_ENV='test'
 
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+APP_ID='learning'
 BASE_URL='http://localhost:2000'
 CONTACT_URL='http://localhost:18000/contact'
 CREDENTIALS_BASE_URL='http://localhost:18150'
@@ -13,7 +14,6 @@ DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
-ENABLE_NEW_SIDEBAR=''
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
 EXAMS_BASE_URL='http://localhost:18740'
@@ -47,3 +47,4 @@ TWITTER_HASHTAG='myedxjourney'
 TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy'
+SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''

.eslintignore

@@ -3,3 +3,5 @@ dist/
 packages/
 node_modules/
 jest.config.js
+env.config.jsx
+example.env.config.jsx

.eslintrc.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('eslint', {
   rules: {
@@ -12,6 +12,13 @@ const config = createConfig('eslint', {
     'react/no-unknown-property': 'off',
     'func-names': 'off',
   },
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: 'webpack.prod.config.js',
+      },
+    },
+  },
 });
 
 module.exports = config;

.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+    # Adding new check for github-actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+        interval: "weekly"

.github/workflows/validate.yml

@@ -10,14 +10,27 @@ jobs:
   tests:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
     - run: make validate.ci
+    - name: Archive code coverage results
+      uses: actions/upload-artifact@v4
+      with:
+        name: code-coverage-report
+        path: coverage/*.*
+  coverage:
+    runs-on: ubuntu-latest
+    needs: tests
+    steps:
+    - uses: actions/checkout@v4
+    - name: Download code coverage results
+      uses: actions/download-artifact@v4
+      with:
+        name: code-coverage-report
     - name: Upload coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v5
       with:
         fail_ci_if_error: true
+        token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -6,6 +6,7 @@
 node_modules
 npm-debug.log
 coverage
+env.config.*
 
 dist/
 src/i18n/transifex_input.json
@@ -25,3 +26,7 @@ module.config.js
 
 # Local environment overrides
 .env.private
+
+src/i18n/messages/
+
+env.config.jsx

.husky/_/.gitignore

@@ -1 +0,0 @@
-*

.husky/_/husky.sh

@@ -1,31 +0,0 @@
-#!/bin/sh
-if [ -z "$husky_skip_init" ]; then
-  debug () {
-    if [ "$HUSKY_DEBUG" = "1" ]; then
-      echo "husky (debug) - $1"
-    fi
-  }
-
-  readonly hook_name="$(basename "$0")"
-  debug "starting $hook_name..."
-
-  if [ "$HUSKY" = "0" ]; then
-    debug "HUSKY env variable is set to 0, skipping hook"
-    exit 0
-  fi
-
-  if [ -f ~/.huskyrc ]; then
-    debug "sourcing ~/.huskyrc"
-    . ~/.huskyrc
-  fi
-
-  export readonly husky_skip_init=1
-  sh -e "$0" "$@"
-  exitCode="$?"
-
-  if [ $exitCode != 0 ]; then
-    echo "husky - $hook_name hook exited with code $exitCode (error)"
-  fi
-
-  exit $exitCode
-fi

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npm run lint

.nvmrc

@@ -1 +1 @@
-18
+20

.tx/config

@@ -1,9 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-app-learning]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type        = KEYVALUEJSON
-

Makefile

@@ -1,20 +1,17 @@
-export TRANSIFEX_RESOURCE=frontend-app-learning
-transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fa_IR,fr_CA,it_IT,pt_PT,de_DE"
-
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 precommit:
 	npm run lint
 	npm audit
 
 requirements:
-	npm install
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -32,37 +29,21 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
-ifeq ($(OPENEDX_ATLAS_PULL),)
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -f --mode reviewed --languages=$(transifex_langs)
-else
-# Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-      && atlas pull $(ATLAS_OPTIONS) \
-               translations/frontend-platform/src/i18n/messages:frontend-platform \
-               translations/paragon/src/i18n/messages:paragon \
-               translations/frontend-component-header/src/i18n/messages:frontend-component-header \
-               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
-               translations/frontend-lib-special-exams/src/i18n/messages:frontend-lib-special-exams \
-               translations/frontend-app-learning/src/i18n/messages:frontend-app-learning
+	  && atlas pull $(ATLAS_OPTIONS) \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	           translations/frontend-lib-special-exams/src/i18n/messages:frontend-lib-special-exams \
+	           translations/frontend-app-learning/src/i18n/messages:frontend-app-learning
 
 	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-lib-special-exams frontend-app-learning
-endif
+
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
@@ -74,8 +55,10 @@ validate:
 	make validate-no-uncommitted-package-lock-changes
 	npm run i18n_extract
 	npm run lint -- --max-warnings 0
+	npm run types
 	npm run test
 	npm run build
+	npm run bundlewatch
 
 .PHONY: validate.ci
 validate.ci:

README.rst

@@ -1,77 +1,110 @@
-#####################
 frontend-app-learning
-######################
+#####################
 
 |codecov| |license|
 
-********
 Purpose
-********
+*******
 
 This is the Learning MFE (micro-frontend application), which renders all
 learner-facing course pages (like the course outline, the progress page,
 actual course content, etc).
 
-Please tag **@edx/engage-squad** on any PRs or issues.  Thanks.
-
 .. |codecov| image:: https://codecov.io/gh/edx/frontend-app-learning/branch/master/graph/badge.svg?token=3z7XvuzTq3
    :target: https://codecov.io/gh/edx/frontend-app-learning
 .. |license| image:: https://img.shields.io/badge/license-AGPL-informational
    :target: https://github.com/openedx/frontend-app-account/blob/master/LICENSE
 
-***************
 Getting Started
 ***************
 
 Prerequisites
 =============
 
-The `devstack`_ is currently recommended as a development environment for your
-new MFE.  If you start it with ``make dev.up.lms`` that should give you
-everything you need as a companion to this frontend.
-
-Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
-to the `relevant tutor-mfe documentation`_ to get started using it.
-
-.. _Devstack: https://github.com/openedx/devstack
+`Tutor`_ is currently recommended as a development environment for the Learning
+MFE. Most likely, it already has this MFE configured; however, you'll need to
+make some changes in order to run it in development mode. You can refer
+to the `relevant tutor-mfe documentation`_ for details, or follow the quick
+guide below.
 
 .. _Tutor: https://github.com/overhangio/tutor
 
 .. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
 
-To use this application, `devstack <https://github.com/openedx/devstack>`__ must be running and you must be logged into it.
 
-- 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.
+Cloning and Setup
+=================
 
-Cloning and Startup
-===================
+1. Clone your new repo:
 
-.. code-block::
+.. code-block:: bash
 
-  1. Clone your new repo:
+    git clone https://github.com/openedx/frontend-app-learning.git
 
-    ``git clone https://github.com/openedx/frontend-app-learning.git``
+2. Use node v20.x.
 
-  2. Use node v18.x.
+  The current version of the micro-frontend build scripts supports node 18.
+  Using other major versions of node *may* work, but this is unsupported.  For
+  convenience, this repository includes an ``.nvmrc`` file to help in setting the
+  correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
 
-    The current version of the micro-frontend build scripts support node 18.
-    Using other major versions of node *may* work, but this is unsupported.  For
-    convenience, this repository includes an .nvmrc file to help in setting the
-    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+3. Stop the Tutor devstack, if it's running: ``tutor dev stop``
 
-  3. Install npm dependencies:
+4. Next, we need to tell Tutor that we're going to be running this repo in
+   development mode, and it should be excluded from the ``mfe`` container that
+   otherwise runs every MFE. Run this:
 
-    ``cd frontend-app-learning && npm ci``
+.. code-block:: bash
 
-  4. Start the dev server:
+    tutor mounts add /path/to/frontend-app-learning
 
-    ``npm start``
+5. Start Tutor in development mode. This command will start the LMS and Studio,
+   and other required MFEs like ``authn`` and ``account``, but will not start
+   the learning MFE, which we're going to run on the host instead of in a
+   container managed by Tutor. Run:
+
+.. code-block:: bash
+
+    tutor dev start lms cms mfe
+
+Startup
+=======
+
+1. Install npm dependencies:
+
+.. code-block:: bash
+
+  cd frontend-app-learning && npm ci
+
+2. Start the dev server:
+
+.. code-block:: bash
+
+  npm run dev
+
+Then you can access the app at http://local.openedx.io:2000/learning/
+
+Troubleshooting
+---------------
+
+If you see an "Invalid Host header" error, then you're probably using a different domain name for your devstack such as
+``local.edly.io`` or ``local.overhang.io`` (not the new recommended default, ``local.openedx.io``). In that case, run
+these commands to update your devstack's domain names:
+
+.. code-block:: bash
+
+  tutor dev stop
+  tutor config save --set LMS_HOST=local.openedx.io --set CMS_HOST=studio.local.openedx.io
+  tutor dev launch -I --skip-build
+  tutor dev stop learning  # We will run this MFE on the host
 
 Local module development
 =========================
 
 To develop locally on modules that are installed into this app, you'll need to create a ``module.config.js``
-file (which is git-ignored) that defines where to find your local modules, for instance::
+file (which is git-ignored) that defines where to find your local modules, for instance:
+
+.. code-block:: js
 
    module.exports = {
      /*
@@ -84,10 +117,10 @@ file (which is git-ignored) that defines where to find your local modules, for i
        may want to use "src" if the module installs React as a peer/dev dependency.
      */
      localModules: [
-        { moduleName: '@edx/paragon/scss', dir: '../paragon', dist: 'scss' },
-        { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' },
-        { moduleName: '@edx/frontend-enterprise', dir: '../frontend-enterprise', dist: 'src' },
-        { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
+        { moduleName: '@openedx/paragon/scss', dir: '../paragon', dist: 'scss' },
+        { moduleName: '@openedx/paragon', dir: '../paragon', dist: 'dist' },
+        { moduleName: '@openedx/frontend-enterprise', dir: '../frontend-enterprise', dist: 'src' },
+        { moduleName: '@openedx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
      ],
    };
 
@@ -100,8 +133,14 @@ The Learning MFE is similar to all the other Open edX MFEs. Read the Open
 edX Developer Guide's section on
 `MFE applications <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html>`_.
 
+Plugins
+=======
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Environment Variables
-======================
+=====================
 
 This MFE is configured via environment variables supplied at build time.
 All micro-frontends have a shared set of required environment variables,
@@ -127,7 +166,7 @@ SOCIAL_UTM_MILESTONE_CAMPAIGN
 
 SUPPORT_URL_CALCULATOR_MATH
   A link that explains how to use the in-course calculator. You can use the
-  one in the example below, if you don't want to have your own branded version.
+  one in the example below if you don't want to have your own branded version.
 
   Example: https://support.edx.org/hc/en-us/articles/360000038428-Entering-math-expressions-in-assignments-or-the-calculator
 
@@ -140,7 +179,7 @@ SUPPORT_URL_ID_VERIFICATION
 
 SUPPORT_URL_VERIFIED_CERTIFICATE
   A link that explains what a verified certificate is.  You can use the
-  one in the example below, if you don't want to have your own branded version.
+  one in the example below if you don't want to have your own branded version.
   Optional.
 
   Example: https://support.edx.org/hc/en-us/articles/206502008-What-is-a-verified-certificate
@@ -156,13 +195,13 @@ TWITTER_URL
   A link to your Twitter account. The Twitter social-share link won't appear
   unless this is set. Optional.
 
-  Example: https://twitter.com/edXOnline
+  Example: https://twitter.com/openedx
 
 Getting Help
-===========
+============
 
-If you're having trouble, we have discussion forums at
-https://discuss.openedx.org where you can connect with others in the community.
+If you're having trouble, we have `discussion forums`_
+where you can connect with others in the community.
 
 Our real-time conversations are on Slack. You can request a `Slack
 invitation`_, then join our `community Slack workspace`_.  Because this is a
@@ -180,17 +219,18 @@ For more information about these options, see the `Getting Help`_ page.
 .. _community Slack workspace: https://openedx.slack.com/
 .. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
 .. _Getting Help: https://openedx.org/community/connect
+.. _discussion forums: https://discuss.openedx.org
 
 Contributing
 ============
 
-Contributions are very welcome.  Please read `How To Contribute`_ for details.
+Contributions are very welcome. Please read `How To Contribute`_ for details.
 
 .. _How To Contribute: https://openedx.org/r/how-to-contribute
 
 This project is currently accepting all types of contributions, bug fixes,
 security fixes, maintenance work, or new features.  However, please make sure
-to have a discussion about your new feature idea with the maintainers prior to
+to discuss your new feature idea with the maintainers before
 beginning development to maximize the chances of your change being accepted.
 You can start a conversation by creating a new issue on this repo summarizing
 your idea.

catalog-info.yaml

@@ -0,0 +1,19 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: 'frontend-app-learning'
+  description: "This is the Learning MFE, which renders all learner-facing course pages."
+  links:
+    - url: "https://github.com/openedx/frontend-app-learning"
+      title: "Learning MFE"
+      icon: "Web"
+  annotations:
+    openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
+spec:
+  owner: group:committers-frontend-app-learning
+  type: 'website'
+  lifecycle: 'production'

example.env.config.jsx

@@ -0,0 +1,24 @@
+import UnitTranslationPlugin from '@edx/unit-translation-selector-plugin';
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
+
+// Load environment variables from .env file
+const config = {
+  ...process.env,
+  pluginSlots: {
+    unit_title_plugin: {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'unit_title_plugin',
+            type: DIRECT_PLUGIN,
+            priority: 1,
+            RenderWidget: UnitTranslationPlugin,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;

jest.config.js

@@ -1,6 +1,6 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
-module.exports = createConfig('jest', {
+const config = createConfig('jest', {
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
@@ -9,13 +9,35 @@ module.exports = createConfig('jest', {
     'src/i18n',
     'src/.*\\.exp\\..*',
   ],
-  // see https://github.com/axios/axios/issues/5026
   moduleNameMapper: {
-    "^axios$": "axios/dist/axios.js",
     // See https://stackoverflow.com/questions/72382316/jest-encountered-an-unexpected-token-react-markdown
     'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
+    '@src/(.*)': '<rootDir>/src/$1',
+    // Explicit mapping to ensure Jest resolves the module correctly
+    '@edx/frontend-lib-special-exams': '<rootDir>/node_modules/@edx/frontend-lib-special-exams',
   },
   testTimeout: 30000,
+  globalSetup: "./global-setup.js",
+  verbose: true,
   testEnvironment: 'jsdom',
-  globalSetup: "./global-setup.js"
 });
+
+// delete config.testURL;
+
+config.reporters = [...(config.reporters || []), ["jest-console-group-reporter", {
+  // change this setting if need to see less details for each test
+  // reportType: "summary" | "details",
+  // enable: true | false,
+  afterEachTest: {
+    enable: true,
+    filePaths: false,
+    reportType: "details",
+  },
+  afterAllTests: {
+    reportType: "summary",
+    enable: true,
+    filePaths: true,
+  },
+}]];
+
+module.exports = config;

openedx.yaml

@@ -1,10 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# https://open-edx-proposals.readthedocs.io/en/latest/oep-0002-bp-repo-metadata.html#specification
-
-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

@@ -11,13 +11,17 @@
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
-    "prepare": "husky install",
+    "bundlewatch": "bundlewatch",
+    "i18n_extract": "fedx-scripts formatjs extract",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
+    "postinstall": "patch-package",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "dev": "PUBLIC_PATH=/learning/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "test:watch": "fedx-scripts jest --watch --passWithNoTests",
+    "types": "tsc --noEmit"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -30,27 +34,32 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.2.1",
-    "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-lib-special-exams": "2.27.0",
-    "@edx/frontend-lib-learning-assistant": "^1.20.1",
-    "@edx/frontend-platform": "5.5.2",
+    "@edx/browserslist-config": "1.5.0",
+    "@edx/frontend-component-header": "^5.8.0",
+    "@edx/frontend-lib-learning-assistant": "^2.19.2",
+    "@edx/frontend-lib-special-exams": "^3.1.3",
+    "@edx/frontend-platform": "^8.0.0",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/paragon": "20.46.0",
-    "@edx/react-unit-test-utils": "npm:@edx/react-unit-test-utils@1.7.0",
-    "@fortawesome/fontawesome-svg-core": "1.3.0",
+    "@edx/react-unit-test-utils": "3.0.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "@openedx/frontend-build": "^14.2.0",
+    "@openedx/frontend-plugin-framework": "^1.2.1",
+    "@openedx/frontend-slot-footer": "^1.0.2",
+    "@openedx/paragon": "^22.3.0",
     "@popperjs/core": "2.11.8",
-    "@reduxjs/toolkit": "1.8.1",
-    "classnames": "2.3.2",
-    "core-js": "3.22.2",
-    "history": "5.3.0",
+    "@reduxjs/toolkit": "1.9.7",
+    "buffer": "^6.0.3",
+    "classnames": "2.5.1",
+    "copy-webpack-plugin": "^12.0.0",
     "joi": "^17.11.0",
     "js-cookie": "3.0.5",
+    "lodash": "^4.17.21",
     "lodash.camelcase": "4.3.0",
+    "patch-package": "^8.0.0",
+    "postcss-loader": "^8.1.1",
     "prop-types": "15.8.1",
     "query-string": "^7.1.3",
     "react": "17.0.2",
@@ -60,26 +69,35 @@
     "react-router": "6.15.0",
     "react-router-dom": "6.15.0",
     "react-share": "4.4.1",
-    "redux": "4.1.2",
-    "regenerator-runtime": "0.13.11",
+    "redux": "4.2.1",
     "reselect": "4.1.8",
-    "truncate-html": "1.0.4",
-    "util": "0.12.5"
+    "sass": "^1.79.3",
+    "sass-loader": "^16.0.2",
+    "source-map-loader": "^5.0.0",
+    "truncate-html": "1.0.4"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "^12.9.10",
     "@edx/reactifex": "2.2.0",
-    "@pact-foundation/pact": "^11.0.2",
-    "@testing-library/jest-dom": "5.16.5",
+    "@pact-foundation/pact": "^13.0.0",
+    "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "13.5.0",
-    "axios-mock-adapter": "1.20.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "es-check": "6.2.1",
-    "husky": "7.0.4",
-    "jest": "29.5.0",
+    "@testing-library/user-event": "14.6.1",
+    "axios-mock-adapter": "2.1.0",
+    "bundlewatch": "^0.4.0",
+    "eslint-import-resolver-webpack": "^0.13.9",
+    "jest": "^29.7.0",
+    "jest-console-group-reporter": "^1.1.1",
+    "jest-when": "^3.6.0",
     "rosie": "2.1.1"
+  },
+  "bundlewatch": {
+    "files": [
+      {
+        "path": "dist/*.js",
+        "maxSize": "1400kB"
+      }
+    ],
+    "normalizeFilenames": "^.+?(\\..+?)\\.\\w+$"
   }
 }

patches/@openedx+frontend-build+13.0.30.patch

@@ -0,0 +1,36 @@
+diff --git a/node_modules/@openedx/frontend-build/config/webpack.prod.config.js b/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
+index 2879dd9..9efd0fc 100644
+--- a/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
++++ b/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
+@@ -12,6 +12,7 @@ const NewRelicSourceMapPlugin = require('@edx/new-relic-source-map-webpack-plugi
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+ const path = require('path');
++const fs = require('fs');
+ const PostCssAutoprefixerPlugin = require('autoprefixer');
+ const PostCssRTLCSS = require('postcss-rtlcss');
+ const PostCssCustomMediaCSS = require('postcss-custom-media');
+@@ -23,6 +24,23 @@ const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic
+ const commonConfig = require('./webpack.common.config');
+ const presets = require('../lib/presets');
+ 
++/**
++ * This condition confirms whether the configuration for the MFE has switched to a JS-based configuration
++ * as previously implemented in frontend-build and frontend-platform. If the environment variable JS_CONFIG_FILEPATH
++ * exists, then an env.config.js(x) file will be copied from the location referenced by the environment variable to the
++ * root directory. Its env variables can be accessed with getConfig().
++ *
++ * https://github.com/openedx/frontend-build/blob/master/docs/0002-js-environment-config.md
++ * https://github.com/openedx/frontend-platform/blob/master/docs/decisions/0007-javascript-file-configuration.rst
++ */
++
++const envConfigPath = process.env.JS_CONFIG_FILEPATH;
++
++if (envConfigPath) {
++  const envConfigFilename = envConfigPath.slice(envConfigPath.indexOf('env.config'));
++  fs.copyFileSync(envConfigPath, envConfigFilename);
++}
++
+ // Add process env vars. Currently used only for setting the PUBLIC_PATH.
+ dotenv.config({
+   path: path.resolve(process.cwd(), '.env'),

public/index.html

@@ -9,6 +9,9 @@
     <% if (htmlWebpackPlugin.options.OPTIMIZELY_PROJECT_ID) { %>
       <script src="https://www.edx.org/optimizelyjs/<%= htmlWebpackPlugin.options.OPTIMIZELY_PROJECT_ID %>.js"></script>
     <% } %>
+    <% if (htmlWebpackPlugin.options.META_TAG_ROBOTS_CONTENT_ATTR) { %>
+      <meta name="robots" content="<%= htmlWebpackPlugin.options.META_TAG_ROBOTS_CONTENT_ATTR %>">
+    <% } %>
   </head>
   <body>
     <div id="root"></div>

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

@@ -3,8 +3,8 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
   FormattedMessage, FormattedDate, injectIntl, intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert, Hyperlink } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 
 import messages from './messages';
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
-import { PageBanner } from '@edx/paragon';
+import { PageBanner } from '@openedx/paragon';
 
 const AccessExpirationMasqueradeBanner = ({ payload }) => {
   const {

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import { Alert, Hyperlink } from '@edx/paragon';
-import { WarningFilled } from '@edx/paragon/icons';
+import { Alert, Hyperlink } from '@openedx/paragon';
+import { WarningFilled } from '@openedx/paragon/icons';
 
 import { getConfig } from '@edx/frontend-platform';
 import genericMessages from './messages';

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

@@ -6,8 +6,8 @@ import {
   FormattedRelativeTime,
   FormattedTime,
 } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 
 import { useModel } from '../../generic/model-store';
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
-import { PageBanner } from '@edx/paragon';
+import { PageBanner } from '@openedx/paragon';
 
 import { useModel } from '../../generic/model-store';
 

src/alerts/enrollment-alert/EnrollmentAlert.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import { Alert, Button } from '@edx/paragon';
-import { Info, WarningFilled } from '@edx/paragon/icons';
+import { Alert, Button } from '@openedx/paragon';
+import { Info, WarningFilled } from '@openedx/paragon/icons';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';

src/alerts/logistration-alert/AccountActivationAlert.jsx

@@ -7,8 +7,8 @@ import {
   Button,
   Spinner,
   Icon,
-} from '@edx/paragon';
-import { Check, ArrowForward } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Check, ArrowForward } from '@openedx/paragon/icons';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendActivationEmail } from '../../courseware/data';
 import messages from './messages';

src/alerts/logistration-alert/LogistrationAlert.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
-import { Alert, Hyperlink } from '@edx/paragon';
-import { WarningFilled } from '@edx/paragon/icons';
+import { Alert, Hyperlink } from '@openedx/paragon';
+import { WarningFilled } from '@openedx/paragon/icons';
 
 import genericMessages from '../../generic/messages';
 

src/constants.js

@@ -1,35 +0,0 @@
-export const DECODE_ROUTES = {
-  ACCESS_DENIED: '/course/:courseId/access-denied',
-  HOME: '/course/:courseId/home',
-  LIVE: '/course/:courseId/live',
-  DATES: '/course/:courseId/dates',
-  DISCUSSION: '/course/:courseId/discussion/:path/*',
-  PROGRESS: [
-    '/course/:courseId/progress/:targetUserId/',
-    '/course/:courseId/progress',
-  ],
-  COURSE_END: '/course/:courseId/course-end',
-  COURSEWARE: [
-    '/course/:courseId/:sequenceId/:unitId',
-    '/course/:courseId/:sequenceId',
-    '/course/:courseId',
-  ],
-  REDIRECT_HOME: 'home/:courseId',
-  REDIRECT_SURVEY: 'survey/:courseId',
-};
-
-export const ROUTES = {
-  UNSUBSCRIBE: '/goal-unsubscribe/:token',
-  REDIRECT: '/redirect/*',
-  DASHBOARD: 'dashboard',
-  ENTERPRISE_LEARNER_DASHBOARD: 'enterprise-learner-dashboard',
-  CONSENT: 'consent',
-};
-
-export const REDIRECT_MODES = {
-  DASHBOARD_REDIRECT: 'dashboard-redirect',
-  ENTERPRISE_LEARNER_DASHBOARD_REDIRECT: 'enterprise-learner-dashboard-redirect',
-  CONSENT_REDIRECT: 'consent-redirect',
-  HOME_REDIRECT: 'home-redirect',
-  SURVEY_REDIRECT: 'survey-redirect',
-};

src/constants.ts

@@ -0,0 +1,74 @@
+export const DECODE_ROUTES = {
+  ACCESS_DENIED: '/course/:courseId/access-denied',
+  HOME: '/course/:courseId/home',
+  LIVE: '/course/:courseId/live',
+  DATES: '/course/:courseId/dates',
+  DISCUSSION: '/course/:courseId/discussion/:path/*',
+  PROGRESS: [
+    '/course/:courseId/progress/:targetUserId/',
+    '/course/:courseId/progress',
+  ],
+  COURSE_END: '/course/:courseId/course-end',
+  COURSEWARE: [
+    '/course/:courseId/:sequenceId/:unitId',
+    '/course/:courseId/:sequenceId',
+    '/course/:courseId',
+    '/preview/course/:courseId/:sequenceId/:unitId',
+    '/preview/course/:courseId/:sequenceId',
+  ],
+  REDIRECT_HOME: 'home/:courseId',
+  REDIRECT_SURVEY: 'survey/:courseId',
+} as const satisfies Readonly<{ [k: string]: string | readonly string[] }>;
+
+export const ROUTES = {
+  UNSUBSCRIBE: '/goal-unsubscribe/:token',
+  PREFERENCES_UNSUBSCRIBE: '/preferences-unsubscribe/:userToken/:updatePatch',
+  REDIRECT: '/redirect/*',
+  DASHBOARD: 'dashboard',
+  ENTERPRISE_LEARNER_DASHBOARD: 'enterprise-learner-dashboard',
+  CONSENT: 'consent',
+} as const satisfies Readonly<{ [k: string]: string }>;
+
+export const REDIRECT_MODES = {
+  DASHBOARD_REDIRECT: 'dashboard-redirect',
+  ENTERPRISE_LEARNER_DASHBOARD_REDIRECT: 'enterprise-learner-dashboard-redirect',
+  CONSENT_REDIRECT: 'consent-redirect',
+  HOME_REDIRECT: 'home-redirect',
+  SURVEY_REDIRECT: 'survey-redirect',
+} as const satisfies Readonly<{ [k: string]: string }>;
+
+export const VERIFIED_MODES = [
+  'professional',
+  'verified',
+  'no-id-professional',
+  'credit',
+  'masters',
+  'executive-education',
+  'paid-executive-education',
+  'paid-bootcamp',
+] as const satisfies readonly string[];
+
+export const AUDIT_MODES = [
+  'audit',
+  'honor',
+  'unpaid-executive-education',
+  'unpaid-bootcamp',
+] as const satisfies readonly string[];
+
+// In sync with CourseMode.UPSELL_TO_VERIFIED_MODES
+// https://github.com/openedx/edx-platform/blob/master/common/djangoapps/course_modes/models.py#L231
+export const ALLOW_UPSELL_MODES = [
+  'audit',
+  'honor',
+] as const satisfies readonly string[];
+
+export const WIDGETS = {
+  DISCUSSIONS: 'DISCUSSIONS',
+  NOTIFICATIONS: 'NOTIFICATIONS',
+} as const satisfies Readonly<{ [k: string]: string }>;
+
+export const LOADING = 'loading';
+export const LOADED = 'loaded';
+export const FAILED = 'failed';
+export const DENIED = 'denied';
+export type StatusValue = typeof LOADING | typeof LOADED | typeof FAILED | typeof DENIED;

src/course-home/courseware-search/CoursewareResultsFilter.jsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Tabs, Tab } from '@edx/paragon';
+import { Tabs, Tab } from '@openedx/paragon';
 
 import { useParams } from 'react-router';
 import CoursewareSearchResults from './CoursewareSearchResults';
@@ -8,15 +8,10 @@ import messages from './messages';
 import { useCoursewareSearchParams } from './hooks';
 import { useModel } from '../../generic/model-store';
 
-const allFilterKey = 'all';
-const otherFilterKey = 'other';
-const allowedFilterKeys = {
-  [allFilterKey]: true,
-  text: true,
-  video: true,
-  sequence: true,
-  [otherFilterKey]: true,
-};
+const filterAll = 'all';
+const filterTypes = ['text', 'video', 'sequence'];
+const filterOther = 'other';
+const validFilters = [filterAll, ...filterTypes, filterOther];
 
 export const CoursewareSearchResultsFilter = ({ intl }) => {
   const { courseId } = useParams();
@@ -27,23 +22,38 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
 
   const { results: data = [] } = lastSearch;
 
-  const results = useMemo(() => data.reduce((acc, { type, ...rest }) => {
-    acc[allFilterKey] = [...(acc[allFilterKey] || []), { type: allFilterKey, ...rest }];
-    if (type === allFilterKey) { return acc; }
+  // If there's no data, we show an empty result.
+  if (!data.length) { return <CoursewareSearchResults />; }
 
-    let targetKey = otherFilterKey;
-    if (allowedFilterKeys[type]) { targetKey = type; }
-    acc[targetKey] = [...(acc[targetKey] || []), { type: targetKey, ...rest }];
-    return acc;
-  }, {}), [data]);
+  const results = useMemo(() => {
+    // This reducer distributes the data into different groups to make it easy to
+    // use on the filters.
+    // All results are added to the "all" key and then to its proper group key as well.
+    const grouped = data.reduce((acc, { type, ...rest }) => {
+      const resultType = filterTypes.includes(type) ? type : filterOther;
+      acc[filterAll].push({ type: resultType, ...rest });
+      acc[resultType] = [...(acc[resultType] || []), { type: resultType, ...rest }];
+      return acc;
+    }, { [filterAll]: [] });
 
-  const filters = useMemo(() => Object.keys(allowedFilterKeys).map((key) => ({
+    // This is just to format the output object with the expected tab order.
+    const output = {};
+    validFilters.forEach(key => { if (grouped[key]) { output[key] = grouped[key]; } });
+
+    return output;
+  }, [lastSearch]);
+
+  const tabKeys = Object.keys(results);
+  // Filter has no use if it has only 2 tabs (The "all" tab and another one with the same items).
+  if (tabKeys.length < 3) { return <CoursewareSearchResults results={results[filterAll]} />; }
+
+  const filters = useMemo(() => tabKeys.map((key) => ({
     key,
     label: intl.formatMessage(messages[`filter:${key}`]),
-    count: results[key]?.length || 0,
+    count: results[key].length,
   })), [results]);
 
-  const activeKey = allowedFilterKeys[filterKeyword] ? filterKeyword : allFilterKey;
+  const activeKey = validFilters.includes(filterKeyword) ? filterKeyword : filterAll;
 
   return (
     <Tabs
@@ -53,8 +63,9 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
       variant="tabs"
       activeKey={activeKey}
       onSelect={setFilter}
+      aria-label={intl.formatMessage(messages.searchResultsFilterDescription)}
     >
-      {filters.map(({ key, label }) => (
+      {filters.filter(({ count }) => (count > 0)).map(({ key, label }) => (
         <Tab key={key} eventKey={key} title={label} data-testid={`courseware-search-results-tabs-${key}`}>
           <CoursewareSearchResults results={results[key]} />
         </Tab>

src/course-home/courseware-search/CoursewareResultsFilter.test.jsx

@@ -19,6 +19,12 @@ jest.mock('../../generic/model-store', () => ({
   useModel: jest.fn(),
 }));
 
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
 const decodedCourseId = 'course-v1:edX+DemoX+Demo_Course';
 const decodedSequenceId = 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction';
 const decodedUnitId = 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc';
@@ -52,49 +58,75 @@ function renderComponent(props = {}) {
 describe('CoursewareSearchResultsFilter', () => {
   beforeAll(initializeMockApp);
 
-  describe('</CoursewareSearchResultsFilter />', () => {
-    beforeEach(() => {
-      useCoursewareSearchParams.mockReturnValue(coursewareSearch);
-    });
+  beforeEach(() => {
+    useCoursewareSearchParams.mockReturnValue(coursewareSearch);
+  });
 
-    afterEach(() => {
-      jest.clearAllMocks();
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when returning full results', () => {
+    beforeEach(() => {
+      useModel.mockReturnValue(searchResultsFactory());
+      renderComponent();
     });
 
     it('should render without errors', async () => {
-      useModel.mockReturnValue(searchResultsFactory());
-
-      await renderComponent();
-
       await waitFor(() => {
-        expect(screen.queryByTestId('courseware-search-results-tabs-all')).toBeInTheDocument();
-        expect(screen.queryByTestId('courseware-search-results-tabs-text')).toBeInTheDocument();
-        expect(screen.queryByTestId('courseware-search-results-tabs-video')).toBeInTheDocument();
-        expect(screen.queryByTestId('courseware-search-results-tabs-sequence')).toBeInTheDocument();
-        expect(screen.queryByTestId('courseware-search-results-tabs-other')).toBeInTheDocument();
+        expect(useCoursewareSearchParams).toBeCalled();
       });
+
+      expect(screen.queryByTestId('courseware-search-results-tabs')).toBeInTheDocument();
+      expect(screen.queryByTestId('courseware-search-results-tabs-all')).toBeInTheDocument();
+      expect(screen.queryByTestId('courseware-search-results-tabs-text')).toBeInTheDocument();
+      expect(screen.queryByTestId('courseware-search-results-tabs-video')).toBeInTheDocument();
+      expect(screen.queryByTestId('courseware-search-results-tabs-sequence')).toBeInTheDocument();
+      expect(screen.queryByTestId('courseware-search-results-tabs-other')).toBeInTheDocument();
+    });
+  });
+
+  describe('when returning only one result type', () => {
+    beforeEach(async () => {
+      // Get results for only videos
+      const data = searchResultsFactory();
+      const onlyVideos = data.results.filter(({ type }) => type === 'video');
+      const filteredResults = {
+        ...data,
+        results: onlyVideos,
+      };
+
+      useModel.mockReturnValue(filteredResults);
+      await renderComponent();
     });
 
-    describe('when there are not results', () => {
-      it('should render without errors', async () => {
-        useModel.mockReturnValue(searchResultsFactory('blah', {
-          results: [],
-          filters: [],
-          total: 0,
-          maxScore: null,
-          ms: 5,
-        }));
-
-        await renderComponent();
-
-        await waitFor(() => {
-          expect(screen.queryByTestId('courseware-search-results-tabs-all')).toBeInTheDocument();
-          expect(screen.queryByTestId('courseware-search-results-tabs-text')).toBeInTheDocument();
-          expect(screen.queryByTestId('courseware-search-results-tabs-video')).toBeInTheDocument();
-          expect(screen.queryByTestId('courseware-search-results-tabs-sequence')).toBeInTheDocument();
-          expect(screen.queryByTestId('courseware-search-results-tabs-other')).toBeInTheDocument();
-        });
+    it('should not render', async () => {
+      await waitFor(() => {
+        expect(useCoursewareSearchParams).toBeCalled();
       });
+
+      expect(screen.queryByTestId('courseware-search-results-tabs')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when there are not results', () => {
+    beforeEach(async () => {
+      useModel.mockReturnValue(searchResultsFactory('blah', {
+        results: [],
+        filters: [],
+        total: 0,
+        maxScore: null,
+        ms: 5,
+      }));
+      await renderComponent();
+    });
+
+    it('should not render', async () => {
+      await waitFor(() => {
+        expect(useCoursewareSearchParams).toBeCalled();
+      });
+
+      expect(screen.queryByTestId('courseware-search-results-tabs')).not.toBeInTheDocument();
     });
   });
 });

src/course-home/courseware-search/CoursewareSearch.jsx

@@ -1,14 +1,14 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useParams } from 'react-router';
 import { useDispatch } from 'react-redux';
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Alert, Button, Icon, Spinner,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import {
   Close,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import { setShowSearch } from '../data/slice';
 import { useCoursewareSearchParams, useElementBoundingBox, useLockScroll } from './hooks';
 import messages from './messages';
@@ -18,7 +18,8 @@ import CoursewareSearchResultsFilterContainer from './CoursewareResultsFilter';
 import { updateModel, useModel } from '../../generic/model-store';
 import { searchCourseContent } from '../data/thunks';
 
-const CoursewareSearch = ({ intl, ...sectionProps }) => {
+const CoursewareSearch = ({ ...sectionProps }) => {
+  const { formatMessage } = useIntl();
   const { courseId } = useParams();
   const { query: searchKeyword, setQuery, clearSearchParams } = useCoursewareSearchParams();
   const dispatch = useDispatch();
@@ -29,6 +30,7 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
     errors,
     total,
   } = useModel('contentSearchResults', courseId);
+  const dialogRef = useRef();
 
   useLockScroll();
 
@@ -44,7 +46,8 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
         searchKeyword: '',
         results: [],
         errors: undefined,
-        loading: false,
+        loading:
+        false,
       },
     }));
   };
@@ -66,20 +69,46 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
     setQuery(value);
   };
 
-  useEffect(() => {
-    handleSubmit(searchKeyword);
-  }, []);
-
   const handleOnChange = (value) => {
     if (value === searchKeyword) { return; }
     if (!value) { clearSearch(); }
   };
 
-  const handleSearchCloseClick = () => {
+  const close = () => {
     clearSearch();
     dispatch(setShowSearch(false));
   };
 
+  const handlePopState = () => close();
+
+  const handleBackdropClick = function (event) {
+    if (event.target === dialogRef.current) {
+      dialogRef.current.close();
+    }
+  };
+
+  useEffect(() => {
+    // We need this to keep the dialog reference when unmounting.
+    const dialog = dialogRef.current;
+
+    // Open the dialog as a modal on render to confine focus within it.
+    dialogRef.current.showModal();
+
+    if (searchKeyword) {
+      handleSubmit(searchKeyword); // In case it's opened with a search link, we run the search.
+    }
+
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    window.addEventListener('popstate', handlePopState, { signal });
+    dialog.addEventListener('click', handleBackdropClick, { signal });
+
+    return () => controller.abort(); // Removes event listeners.
+  }, []);
+
+  const handleSearchClose = () => close();
+
   let status = 'idle';
   if (loading) {
     status = 'loading';
@@ -90,59 +119,64 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
   }
 
   return (
-    <section className="courseware-search" style={{ '--modal-top-position': top }} data-testid="courseware-search-section" {...sectionProps}>
-      <div className="courseware-search__close">
-        <Button
-          variant="tertiary"
-          className="p-1"
-          aria-label={intl.formatMessage(messages.searchCloseAction)}
-          onClick={handleSearchCloseClick}
-          data-testid="courseware-search-close-button"
-        ><Icon src={Close} />
-        </Button>
-      </div>
+    <dialog ref={dialogRef} className="courseware-search" style={{ '--modal-top-position': top }} data-testid="courseware-search-dialog" onClose={handleSearchClose} {...sectionProps}>
       <div className="courseware-search__outer-content">
-        <div className="courseware-search__content">
-          <h1 class="h2">{intl.formatMessage(messages.searchModuleTitle)}</h1>
-          <CoursewareSearchForm
-            searchTerm={searchKeyword}
-            onSubmit={handleSubmit}
-            onChange={handleOnChange}
-            placeholder={intl.formatMessage(messages.searchBarPlaceholderText)}
-          />
-          {status === 'loading' ? (
-            <div className="courseware-search__spinner" data-testid="courseware-search-spinner">
-              <Spinner animation="border" variant="light" screenReaderText={intl.formatMessage(messages.loading)} />
+        <div className="courseware-search__content" data-testid="courseware-search-content">
+          <div className="courseware-search__form">
+            <h1 className="h2">{formatMessage(messages.searchModuleTitle)}</h1>
+            <CoursewareSearchForm
+              searchTerm={searchKeyword}
+              onSubmit={handleSubmit}
+              onChange={handleOnChange}
+              placeholder={formatMessage(messages.searchBarPlaceholderText)}
+            />
+            <div className="courseware-search__close">
+              <Button
+                variant="tertiary"
+                className="p-1"
+                aria-label={formatMessage(messages.searchCloseAction)}
+                onClick={() => dialogRef.current.close()}
+                data-testid="courseware-search-close-button"
+              ><Icon src={Close} />
+              </Button>
             </div>
-          ) : null}
-          {status === 'error' && (
-            <Alert className="mt-4" variant="danger" data-testid="courseware-search-error">
-              {intl.formatMessage(messages.searchResultsError)}
-            </Alert>
-          )}
-          {status === 'results' ? (
-            <>
-              <div
-                className="courseware-search__results-summary"
-                aria-live="polite"
-                aria-relevant="all"
-                aria-atomic="true"
-                data-testid="courseware-search-summary"
-              >{total > 0
-                ? intl.formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })
-                : intl.formatMessage(messages.searchResultsNone)}
+          </div>
+          <div
+            key={status}
+            className="courseware-search__results"
+            aria-live="assertive"
+            aria-atomic="true"
+            aria-busy={status === 'loading'}
+            data-testid="courseware-search-results"
+            role={status === 'results' ? 'alert' : 'none'}
+          >
+            {status === 'loading' ? (
+              <div className="courseware-search__spinner" data-testid="courseware-search-spinner">
+                <Spinner animation="border" variant="light" screenReaderText={formatMessage(messages.loading)} />
               </div>
-              <CoursewareSearchResultsFilterContainer />
-            </>
-          ) : null}
+            ) : null}
+            {status === 'error' && (
+              <Alert className="mt-4" variant="danger" data-testid="courseware-search-error">
+                {formatMessage(messages.searchResultsError)}
+              </Alert>
+            )}
+            {status === 'results' ? (
+              <>
+                {total > 0 ? (
+                  <div
+                    className="courseware-search__results-summary"
+                    data-testid="courseware-search-summary"
+                  >{formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
+                  </div>
+                ) : null}
+                <CoursewareSearchResultsFilterContainer />
+              </>
+            ) : null}
+          </div>
         </div>
       </div>
-    </section>
+    </dialog>
   );
 };
 
-CoursewareSearch.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CoursewareSearch);
+export default CoursewareSearch;

src/course-home/courseware-search/CoursewareSearch.test.jsx

@@ -9,6 +9,7 @@ import {
   screen,
   waitFor,
   fireEvent,
+  within,
 } from '../../setupTest';
 import { CoursewareSearch } from './index';
 import { useElementBoundingBox, useLockScroll, useCoursewareSearchParams } from './hooks';
@@ -19,6 +20,7 @@ import { updateModel, useModel } from '../../generic/model-store';
 
 jest.mock('./hooks');
 jest.mock('../../generic/model-store', () => ({
+  ...jest.requireActual('../../generic/model-store'),
   updateModel: jest.fn(),
   useModel: jest.fn(),
 }));
@@ -56,7 +58,7 @@ const defaultProps = {
   total: 0,
 };
 
-const coursewareSearch = {
+const defaultSearchParams = {
   query: '',
   filter: '',
   setQuery: jest.fn(),
@@ -96,14 +98,20 @@ const mockModels = ((props = defaultProps) => {
   });
 });
 
-const mockSearchParams = ((props = coursewareSearch) => {
+const mockSearchParams = ((params) => {
+  const props = { ...defaultSearchParams, ...params };
   useCoursewareSearchParams.mockReturnValue(props);
 });
 
 describe('CoursewareSearch', () => {
-  beforeAll(initializeMockApp);
+  beforeAll(() => initializeMockApp());
 
   beforeEach(() => {
+    mockModels();
+    mockSearchParams();
+  });
+
+  afterEach(() => {
     jest.clearAllMocks();
   });
 
@@ -113,27 +121,22 @@ describe('CoursewareSearch', () => {
     });
 
     it('should use useElementBoundingBox() and useLockScroll() hooks', () => {
-      mockModels();
-      mockSearchParams();
       renderComponent();
 
-      expect(useElementBoundingBox).toBeCalledTimes(1);
-      expect(useLockScroll).toBeCalledTimes(1);
+      expect(useElementBoundingBox).toHaveBeenCalledTimes(1);
+      expect(useLockScroll).toHaveBeenCalledTimes(1);
     });
 
     it('should have a "--modal-top-position" CSS variable matching the CourseTabsNavigation top position', () => {
-      mockModels();
-      mockSearchParams();
       renderComponent();
 
-      const section = screen.getByTestId('courseware-search-section');
+      const section = screen.getByTestId('courseware-search-dialog');
       expect(section.style.getPropertyValue('--modal-top-position')).toBe(`${tabsTopPosition}px`);
     });
   });
 
   describe('when clicking on the "Close" button', () => {
-    it('should dispatch setShowSearch(false)', async () => {
-      mockModels();
+    it('should close the dialog', async () => {
       renderComponent();
 
       await waitFor(() => {
@@ -141,7 +144,8 @@ describe('CoursewareSearch', () => {
         fireEvent.click(close);
       });
 
-      expect(setShowSearch).toBeCalledWith(false);
+      expect(HTMLDialogElement.prototype.close).toHaveBeenCalled();
+      expect(setShowSearch).toHaveBeenCalledWith(false);
     });
   });
 
@@ -149,29 +153,24 @@ describe('CoursewareSearch', () => {
     it('should use "--modal-top-position: 0" if  nce element is not present', () => {
       useElementBoundingBox.mockImplementation(() => undefined);
 
-      mockModels();
-      mockSearchParams();
       renderComponent();
 
-      const section = screen.getByTestId('courseware-search-section');
+      const section = screen.getByTestId('courseware-search-dialog');
       expect(section.style.getPropertyValue('--modal-top-position')).toBe('0');
     });
   });
 
   describe('when passing extra props', () => {
     it('should pass on extra props to section element', () => {
-      mockModels();
-      mockSearchParams();
       renderComponent({ foo: 'bar' });
 
-      const section = screen.getByTestId('courseware-search-section');
+      const section = screen.getByTestId('courseware-search-dialog');
       expect(section).toHaveAttribute('foo', 'bar');
     });
   });
 
   describe('when submitting an empty search', () => {
     it('should clear the search by dispatch updateModel', async () => {
-      mockModels();
       renderComponent();
 
       await waitFor(() => {
@@ -203,7 +202,6 @@ describe('CoursewareSearch', () => {
     });
 
     it('should call searchCourseContent', async () => {
-      mockModels();
       renderComponent();
 
       const searchKeyword = 'course';
@@ -236,29 +234,35 @@ describe('CoursewareSearch', () => {
       expect(screen.queryByTestId('courseware-search-error')).toBeInTheDocument();
     });
 
-    it('should show "No results found." if results is empty', () => {
+    it('should not show a summary if there are no results', () => {
       mockModels({
         searchKeyword: 'test',
         total: 0,
       });
       renderComponent();
 
-      expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('No results found.');
+      expect(screen.queryByTestId('courseware-search-summary')).not.toBeInTheDocument();
     });
 
-    it('should show a summary for the results', () => {
+    it('should show a wrapper div with proper aria attributes', () => {
       mockModels({
         searchKeyword: 'fubar',
         total: 1,
       });
       renderComponent();
 
-      expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
+      const results = screen.queryByTestId('courseware-search-results');
+
+      expect(results).toHaveAttribute('aria-live', 'assertive');
+      expect(results).toHaveAttribute('aria-atomic', 'true');
+      expect(results).toHaveAttribute('role', 'alert');
+      expect(within(results).queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
     });
   });
 
   describe('when clearing the search input', () => {
     it('should clear the search by dispatch updateModel', async () => {
+      mockSearchParams({ query: 'fubar' });
       mockModels({
         searchKeyword: 'fubar',
         total: 2,

src/course-home/courseware-search/CoursewareSearchForm.jsx

@@ -1,43 +1,44 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { SearchField } from '@edx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { SearchField } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 
 const CoursewareSearchForm = ({
-  intl,
   searchTerm,
   onSubmit,
   onChange,
   placeholder,
-}) => (
-  <SearchField.Advanced
-    value={searchTerm}
-    onSubmit={onSubmit}
-    onChange={onChange}
-    submitButtonLocation="external"
-    className="courseware-search-form"
-    screenReaderText={{
-      label: intl.formatMessage(messages.searchSubmitLabel),
-      clearButton: intl.formatMessage(messages.searchClearAction),
-      submitButton: null, // Remove the sr-only label in the button.
-    }}
-  >
-    <div className="pgn__searchfield_wrapper" data-testid="courseware-search-form">
-      <SearchField.Label />
-      <SearchField.Input placeholder={placeholder} autoFocus />
-      <SearchField.ClearButton />
-    </div>
-    <SearchField.SubmitButton
-      buttonText={intl.formatMessage(messages.searchSubmitLabel)}
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <SearchField.Advanced
+      value={searchTerm}
+      onSubmit={onSubmit}
+      onChange={onChange}
       submitButtonLocation="external"
-      data-testid="courseware-search-form-submit"
-    />
-  </SearchField.Advanced>
-);
+      className="courseware-search-form"
+      screenReaderText={{
+        label: formatMessage(messages.searchSubmitLabel),
+        clearButton: formatMessage(messages.searchClearAction),
+        submitButton: null, // Remove the sr-only label in the button.
+      }}
+    >
+      <div className="pgn__searchfield_wrapper" data-testid="courseware-search-form">
+        <SearchField.Label />
+        <SearchField.Input placeholder={placeholder} autoFocus />
+        <SearchField.ClearButton />
+      </div>
+      <SearchField.SubmitButton
+        buttonText={formatMessage(messages.searchSubmitLabel)}
+        submitButtonLocation="external"
+        data-testid="courseware-search-form-submit"
+      />
+    </SearchField.Advanced>
+  );
+};
 
 CoursewareSearchForm.propTypes = {
-  intl: intlShape.isRequired,
   searchTerm: PropTypes.string,
   onSubmit: PropTypes.func,
   onChange: PropTypes.func,
@@ -51,4 +52,4 @@ CoursewareSearchForm.defaultProps = {
   placeholder: undefined,
 };
 
-export default injectIntl(CoursewareSearchForm);
+export default CoursewareSearchForm;

src/course-home/courseware-search/CoursewareSearchResults.jsx

@@ -1,16 +1,18 @@
-import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Folder, TextFields, VideoCamera, Article,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
-import { Icon } from '@edx/paragon';
+import { Icon } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import CoursewareSearchEmpty from './CoursewareSearchEmpty';
+import messages from './messages';
 
 const iconTypeMapping = {
-  document: Folder,
   text: TextFields,
   video: VideoCamera,
+  sequence: Folder,
+  other: Article,
 };
 
 const defaultIcon = Article;
@@ -20,6 +22,8 @@ const CoursewareSearchResults = ({ results = [] }) => {
     return <CoursewareSearchEmpty />;
   }
 
+  const { formatMessage } = useIntl();
+
   const baseUrl = `${getConfig().LMS_BASE_URL}`;
 
   return (
@@ -34,33 +38,37 @@ const CoursewareSearchResults = ({ results = [] }) => {
       }) => {
         const key = type.toLowerCase();
         const icon = iconTypeMapping[key] || defaultIcon;
-
         const isExternal = !url.startsWith('/');
-
         const linkProps = isExternal ? {
           href: url,
           target: '_blank',
           rel: 'nofollow',
         } : { href: `${baseUrl}${url}` };
 
+        const ariaSeaparator = formatMessage(messages.searchResultsBreadcrumbSeparator);
+        const ariaLocation = location?.length ? formatMessage(messages.searchResultsBreadcrumb, { path: location.join(ariaSeaparator) }) : '';
+
         return (
           <a key={id} className="courseware-search-results__item" {...linkProps}>
             <div className="courseware-search-results__icon"><Icon src={icon} /></div>
             <div className="courseware-search-results__info">
               <div className="courseware-search-results__title">
-                <span>{title}</span>
-                {contentHits ? (<em>{contentHits}</em>) : null }
+                <h3>{title}</h3>
+                {contentHits ? (<em aria-hidden="true">{contentHits}</em>) : null }
               </div>
-              {location?.length ? (
-                <ul className="courseware-search-results__breadcrumbs">
-                  {
+
+              <div aria-label={ariaLocation}>
+                {location?.length ? (
+                  <ul className="courseware-search-results__breadcrumbs" aria-hidden="true">
+                    {
                   // This ignore is necessary because the breadcrumb texts might have duplicates.
                   // The breadcrumbs are not expected to change.
                   // eslint-disable-next-line react/no-array-index-key
                   location.map((breadcrumb, i) => (<li key={`${i}:${breadcrumb}`}><div>{breadcrumb}</div></li>))
                   }
-                </ul>
-              ) : null}
+                  </ul>
+                ) : null}
+              </div>
             </div>
           </a>
         );

src/course-home/courseware-search/CoursewareSearchToggle.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Icon } from '@edx/paragon';
-import { Search } from '@edx/paragon/icons';
+import { Button } from '@openedx/paragon';
+import { ManageSearch } from '@openedx/paragon/icons';
 import { useDispatch } from 'react-redux';
 import messages from './messages';
 import { useCoursewareSearchFeatureFlag, useCoursewareSearchParams } from './hooks';
@@ -25,16 +25,17 @@ const CoursewareSearchToggle = ({
   if (!enabled) { return null; }
 
   return (
-    <div className="courseware-searc-toggle">
+    <div className="courseware-search-toggle">
       <Button
-        variant="tertiary"
+        variant="outline-primary"
         size="sm"
-        className="p-1 mt-2 mr-2 rounded-lg"
+        className="p-1 mt-2 mr-2"
         aria-label={intl.formatMessage(messages.searchOpenAction)}
         onClick={handleSearchOpenClick}
         data-testid="courseware-search-open-button"
+        iconAfter={ManageSearch}
       >
-        <Icon src={Search} />
+        {intl.formatMessage(messages.contentSearchButton)}
       </Button>
     </div>
   );

src/course-home/courseware-search/__snapshots__/CoursewareSearchResults.test.jsx.snap

@@ -26,7 +26,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M3 3v18h18V3H3Zm11 14H7v-2h7v2Zm3-4H7v-2h10v2Zm0-4H7V7h10v2Z"
+            d="M10 4H2v16h20V6H12l-2-2z"
             fill="currentColor"
           />
         </svg>
@@ -38,24 +38,29 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Demo Course Overview
-        </span>
+        </h3>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Introduction, then Demo Course Overview."
       >
-        <li>
-          <div>
-            Introduction
-          </div>
-        </li>
-        <li>
-          <div>
-            Demo Course Overview
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Introduction
+            </div>
+          </li>
+          <li>
+            <div>
+              Demo Course Overview
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -91,32 +96,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Passing a Course
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           1
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Passing a Course."
       >
-        <li>
-          <div>
-            About Exams and Certificates
-          </div>
-        </li>
-        <li>
-          <div>
-            edX Exams
-          </div>
-        </li>
-        <li>
-          <div>
-            Passing a Course
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              About Exams and Certificates
+            </div>
+          </li>
+          <li>
+            <div>
+              edX Exams
+            </div>
+          </li>
+          <li>
+            <div>
+              Passing a Course
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -140,7 +152,7 @@ exports[`CoursewareSearchResults when list of results is provided should match t
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M3 3v18h18V3H3Zm11 14H7v-2h7v2Zm3-4H7v-2h10v2Zm0-4H7V7h10v2Z"
+            d="M10 4H2v16h20V6H12l-2-2z"
             fill="currentColor"
           />
         </svg>
@@ -152,29 +164,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Passing a Course
-        </span>
+        </h3>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Passing a Course."
       >
-        <li>
-          <div>
-            About Exams and Certificates
-          </div>
-        </li>
-        <li>
-          <div>
-            edX Exams
-          </div>
-        </li>
-        <li>
-          <div>
-            Passing a Course
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              About Exams and Certificates
+            </div>
+          </li>
+          <li>
+            <div>
+              edX Exams
+            </div>
+          </li>
+          <li>
+            <div>
+              Passing a Course
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -210,29 +227,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Text Input
-        </span>
+        </h3>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Text input."
       >
-        <li>
-          <div>
-            Example Week 1: Getting Started
-          </div>
-        </li>
-        <li>
-          <div>
-            Homework - Question Styles
-          </div>
-        </li>
-        <li>
-          <div>
-            Text input
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 1: Getting Started
+            </div>
+          </li>
+          <li>
+            <div>
+              Homework - Question Styles
+            </div>
+          </li>
+          <li>
+            <div>
+              Text input
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -268,29 +290,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Pointing on a Picture
-        </span>
+        </h3>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Pointing on a Picture."
       >
-        <li>
-          <div>
-            Example Week 1: Getting Started
-          </div>
-        </li>
-        <li>
-          <div>
-            Homework - Question Styles
-          </div>
-        </li>
-        <li>
-          <div>
-            Pointing on a Picture
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 1: Getting Started
+            </div>
+          </li>
+          <li>
+            <div>
+              Homework - Question Styles
+            </div>
+          </li>
+          <li>
+            <div>
+              Pointing on a Picture
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -326,29 +353,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Getting Answers
-        </span>
+        </h3>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Getting Answers."
       >
-        <li>
-          <div>
-            About Exams and Certificates
-          </div>
-        </li>
-        <li>
-          <div>
-            edX Exams
-          </div>
-        </li>
-        <li>
-          <div>
-            Getting Answers
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              About Exams and Certificates
+            </div>
+          </li>
+          <li>
+            <div>
+              edX Exams
+            </div>
+          </li>
+          <li>
+            <div>
+              Getting Answers
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -384,32 +416,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Welcome!
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           30
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Introduction, then Demo Course Overview, then Introduction: Video and Sequences."
       >
-        <li>
-          <div>
-            Introduction
-          </div>
-        </li>
-        <li>
-          <div>
-            Demo Course Overview
-          </div>
-        </li>
-        <li>
-          <div>
-            Introduction: Video and Sequences
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Introduction
+            </div>
+          </li>
+          <li>
+            <div>
+              Demo Course Overview
+            </div>
+          </li>
+          <li>
+            <div>
+              Introduction: Video and Sequences
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -445,29 +484,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Multiple Choice Questions
-        </span>
+        </h3>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Multiple Choice Questions."
       >
-        <li>
-          <div>
-            Example Week 1: Getting Started
-          </div>
-        </li>
-        <li>
-          <div>
-            Homework - Question Styles
-          </div>
-        </li>
-        <li>
-          <div>
-            Multiple Choice Questions
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 1: Getting Started
+            </div>
+          </li>
+          <li>
+            <div>
+              Homework - Question Styles
+            </div>
+          </li>
+          <li>
+            <div>
+              Multiple Choice Questions
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -503,29 +547,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Numerical Input
-        </span>
+        </h3>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Homework - Question Styles, then Numerical Input."
       >
-        <li>
-          <div>
-            Example Week 1: Getting Started
-          </div>
-        </li>
-        <li>
-          <div>
-            Homework - Question Styles
-          </div>
-        </li>
-        <li>
-          <div>
-            Numerical Input
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 1: Getting Started
+            </div>
+          </li>
+          <li>
+            <div>
+              Homework - Question Styles
+            </div>
+          </li>
+          <li>
+            <div>
+              Numerical Input
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -561,32 +610,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Connecting a Circuit and a Circuit Diagram
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           3
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Lesson 1 - Getting Started, then Video Presentation Styles."
       >
-        <li>
-          <div>
-            Example Week 1: Getting Started
-          </div>
-        </li>
-        <li>
-          <div>
-            Lesson 1 - Getting Started
-          </div>
-        </li>
-        <li>
-          <div>
-            Video Presentation Styles
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 1: Getting Started
+            </div>
+          </li>
+          <li>
+            <div>
+              Lesson 1 - Getting Started
+            </div>
+          </li>
+          <li>
+            <div>
+              Video Presentation Styles
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -622,29 +678,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           CAPA
-        </span>
+        </h3>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 2: Get Interactive, then Homework - Labs and Demos, then Code Grader."
       >
-        <li>
-          <div>
-            Example Week 2: Get Interactive
-          </div>
-        </li>
-        <li>
-          <div>
-            Homework - Labs and Demos
-          </div>
-        </li>
-        <li>
-          <div>
-            Code Grader
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 2: Get Interactive
+            </div>
+          </li>
+          <li>
+            <div>
+              Homework - Labs and Demos
+            </div>
+          </li>
+          <li>
+            <div>
+              Code Grader
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -680,29 +741,34 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Interactive Questions
-        </span>
+        </h3>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Lesson 1 - Getting Started, then Interactive Questions."
       >
-        <li>
-          <div>
-            Example Week 1: Getting Started
-          </div>
-        </li>
-        <li>
-          <div>
-            Lesson 1 - Getting Started
-          </div>
-        </li>
-        <li>
-          <div>
-            Interactive Questions
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 1: Getting Started
+            </div>
+          </li>
+          <li>
+            <div>
+              Lesson 1 - Getting Started
+            </div>
+          </li>
+          <li>
+            <div>
+              Interactive Questions
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -738,32 +804,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Blank HTML Page
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           6
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Introduction, then Demo Course Overview, then Introduction: Video and Sequences."
       >
-        <li>
-          <div>
-            Introduction
-          </div>
-        </li>
-        <li>
-          <div>
-            Demo Course Overview
-          </div>
-        </li>
-        <li>
-          <div>
-            Introduction: Video and Sequences
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Introduction
+            </div>
+          </li>
+          <li>
+            <div>
+              Demo Course Overview
+            </div>
+          </li>
+          <li>
+            <div>
+              Introduction: Video and Sequences
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -799,32 +872,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Discussion Forums
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           5
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 3: Be Social, then Lesson 3 - Be Social, then Discussion Forums."
       >
-        <li>
-          <div>
-            Example Week 3: Be Social
-          </div>
-        </li>
-        <li>
-          <div>
-            Lesson 3 - Be Social
-          </div>
-        </li>
-        <li>
-          <div>
-            Discussion Forums
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 3: Be Social
+            </div>
+          </li>
+          <li>
+            <div>
+              Lesson 3 - Be Social
+            </div>
+          </li>
+          <li>
+            <div>
+              Discussion Forums
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -860,32 +940,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Overall Grade
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           7
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: About Exams and Certificates, then edX Exams, then Overall Grade Performance."
       >
-        <li>
-          <div>
-            About Exams and Certificates
-          </div>
-        </li>
-        <li>
-          <div>
-            edX Exams
-          </div>
-        </li>
-        <li>
-          <div>
-            Overall Grade Performance
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              About Exams and Certificates
+            </div>
+          </li>
+          <li>
+            <div>
+              edX Exams
+            </div>
+          </li>
+          <li>
+            <div>
+              Overall Grade Performance
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -921,32 +1008,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Blank HTML Page
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           3
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 3: Be Social, then Lesson 3 - Be Social, then Homework - Find Your Study Buddy."
       >
-        <li>
-          <div>
-            Example Week 3: Be Social
-          </div>
-        </li>
-        <li>
-          <div>
-            Lesson 3 - Be Social
-          </div>
-        </li>
-        <li>
-          <div>
-            Homework - Find Your Study Buddy
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 3: Be Social
+            </div>
+          </li>
+          <li>
+            <div>
+              Lesson 3 - Be Social
+            </div>
+          </li>
+          <li>
+            <div>
+              Homework - Find Your Study Buddy
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -982,32 +1076,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Find Your Study Buddy
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           3
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 3: Be Social, then Homework - Find Your Study Buddy, then Homework - Find Your Study Buddy."
       >
-        <li>
-          <div>
-            Example Week 3: Be Social
-          </div>
-        </li>
-        <li>
-          <div>
-            Homework - Find Your Study Buddy
-          </div>
-        </li>
-        <li>
-          <div>
-            Homework - Find Your Study Buddy
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 3: Be Social
+            </div>
+          </li>
+          <li>
+            <div>
+              Homework - Find Your Study Buddy
+            </div>
+          </li>
+          <li>
+            <div>
+              Homework - Find Your Study Buddy
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -1043,32 +1144,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           Be Social
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           4
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 3: Be Social, then Lesson 3 - Be Social, then Be Social."
       >
-        <li>
-          <div>
-            Example Week 3: Be Social
-          </div>
-        </li>
-        <li>
-          <div>
-            Lesson 3 - Be Social
-          </div>
-        </li>
-        <li>
-          <div>
-            Be Social
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 3: Be Social
+            </div>
+          </li>
+          <li>
+            <div>
+              Lesson 3 - Be Social
+            </div>
+          </li>
+          <li>
+            <div>
+              Be Social
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -1104,32 +1212,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           EdX Exams
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           4
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: About Exams and Certificates, then edX Exams, then EdX Exams."
       >
-        <li>
-          <div>
-            About Exams and Certificates
-          </div>
-        </li>
-        <li>
-          <div>
-            edX Exams
-          </div>
-        </li>
-        <li>
-          <div>
-            EdX Exams
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              About Exams and Certificates
+            </div>
+          </li>
+          <li>
+            <div>
+              edX Exams
+            </div>
+          </li>
+          <li>
+            <div>
+              EdX Exams
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -1165,32 +1280,39 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           When Are Your Exams? 
-        </span>
-        <em>
+        </h3>
+        <em
+          aria-hidden="true"
+        >
           2
         </em>
       </div>
-      <ul
-        class="courseware-search-results__breadcrumbs"
+      <div
+        aria-label="Location: Example Week 1: Getting Started, then Lesson 1 - Getting Started, then When Are Your Exams? ."
       >
-        <li>
-          <div>
-            Example Week 1: Getting Started
-          </div>
-        </li>
-        <li>
-          <div>
-            Lesson 1 - Getting Started
-          </div>
-        </li>
-        <li>
-          <div>
-            When Are Your Exams? 
-          </div>
-        </li>
-      </ul>
+        <ul
+          aria-hidden="true"
+          class="courseware-search-results__breadcrumbs"
+        >
+          <li>
+            <div>
+              Example Week 1: Getting Started
+            </div>
+          </li>
+          <li>
+            <div>
+              Lesson 1 - Getting Started
+            </div>
+          </li>
+          <li>
+            <div>
+              When Are Your Exams? 
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </a>
   <a
@@ -1228,10 +1350,13 @@ exports[`CoursewareSearchResults when list of results is provided should match t
       <div
         class="courseware-search-results__title"
       >
-        <span>
+        <h3>
           External Course Link Test
-        </span>
+        </h3>
       </div>
+      <div
+        aria-label=""
+      />
     </div>
   </a>
 </div>

src/course-home/courseware-search/__snapshots__/map-search-response.test.js.snap

@@ -1,29 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`mapSearchResponse when the response is correct should match snapshot 1`] = `
-Object {
-  "filters": Array [
-    Object {
+{
+  "filters": [
+    {
       "count": 7,
       "key": "capa",
       "label": "CAPA",
     },
-    Object {
+    {
       "count": 2,
       "key": "sequence",
       "label": "Sequence",
     },
-    Object {
+    {
       "count": 9,
       "key": "text",
       "label": "Text",
     },
-    Object {
+    {
       "count": 1,
       "key": "unknown",
       "label": "Unknown",
     },
-    Object {
+    {
       "count": 2,
       "key": "video",
       "label": "Video",
@@ -31,11 +31,11 @@ Object {
   ],
   "maxScore": 3.4545178,
   "ms": 5,
-  "results": Array [
-    Object {
+  "results": [
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction",
-      "location": Array [
+      "location": [
         "Introduction",
         "Demo Course Overview",
       ],
@@ -44,10 +44,10 @@ Object {
       "type": "sequence",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@html+block@5e009378f0b64585baa0a14b155974b9",
-      "location": Array [
+      "location": [
         "About Exams and Certificates",
         "edX Exams",
         "Passing a Course",
@@ -57,10 +57,10 @@ Object {
       "type": "text",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@html+block@5e009378f0b64585baa0a14b155974b9",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@vertical+block@c7e98fd39a6944edb6b286c32e1150ff",
-      "location": Array [
+      "location": [
         "About Exams and Certificates",
         "edX Exams",
         "Passing a Course",
@@ -70,10 +70,10 @@ Object {
       "type": "sequence",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@vertical+block@c7e98fd39a6944edb6b286c32e1150ff",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@problem+block@0d759dee4f9d459c8956136dbde55f02",
-      "location": Array [
+      "location": [
         "Example Week 1: Getting Started",
         "Homework - Question Styles",
         "Text input",
@@ -83,10 +83,10 @@ Object {
       "type": "capa",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@problem+block@0d759dee4f9d459c8956136dbde55f02",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@problem+block@c554538a57664fac80783b99d9d6da7c",
-      "location": Array [
+      "location": [
         "Example Week 1: Getting Started",
         "Homework - Question Styles",
         "Pointing on a Picture",
@@ -96,10 +96,10 @@ Object {
       "type": "capa",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@problem+block@c554538a57664fac80783b99d9d6da7c",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@problem+block@45d46192272c4f6db6b63586520bbdf4",
-      "location": Array [
+      "location": [
         "About Exams and Certificates",
         "edX Exams",
         "Getting Answers",
@@ -109,10 +109,10 @@ Object {
       "type": "capa",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@problem+block@45d46192272c4f6db6b63586520bbdf4",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd",
-      "location": Array [
+      "location": [
         "Introduction",
         "Demo Course Overview",
         "Introduction: Video and Sequences",
@@ -122,10 +122,10 @@ Object {
       "type": "video",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@problem+block@a0effb954cca4759994f1ac9e9434bf4",
-      "location": Array [
+      "location": [
         "Example Week 1: Getting Started",
         "Homework - Question Styles",
         "Multiple Choice Questions",
@@ -135,10 +135,10 @@ Object {
       "type": "capa",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@problem+block@a0effb954cca4759994f1ac9e9434bf4",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@problem+block@75f9562c77bc4858b61f907bb810d974",
-      "location": Array [
+      "location": [
         "Example Week 1: Getting Started",
         "Homework - Question Styles",
         "Numerical Input",
@@ -148,10 +148,10 @@ Object {
       "type": "capa",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@problem+block@75f9562c77bc4858b61f907bb810d974",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@video+block@636541acbae448d98ab484b028c9a7f6",
-      "location": Array [
+      "location": [
         "Example Week 1: Getting Started",
         "Lesson 1 - Getting Started",
         "Video Presentation Styles",
@@ -161,10 +161,10 @@ Object {
       "type": "video",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@video+block@636541acbae448d98ab484b028c9a7f6",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@problem+block@python_grader",
-      "location": Array [
+      "location": [
         "Example Week 2: Get Interactive",
         "Homework - Labs and Demos",
         "Code Grader",
@@ -174,10 +174,10 @@ Object {
       "type": "capa",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@problem+block@python_grader",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@problem+block@9cee77a606ea4c1aa5440e0ea5d0f618",
-      "location": Array [
+      "location": [
         "Example Week 1: Getting Started",
         "Lesson 1 - Getting Started",
         "Interactive Questions",
@@ -187,10 +187,10 @@ Object {
       "type": "capa",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@problem+block@9cee77a606ea4c1aa5440e0ea5d0f618",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4",
-      "location": Array [
+      "location": [
         "Introduction",
         "Demo Course Overview",
         "Introduction: Video and Sequences",
@@ -200,10 +200,10 @@ Object {
       "type": "text",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@html+block@html_49b4494da2f7",
-      "location": Array [
+      "location": [
         "Example Week 3: Be Social",
         "Lesson 3 - Be Social",
         "Discussion Forums",
@@ -213,10 +213,10 @@ Object {
       "type": "text",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@html+block@html_49b4494da2f7",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@html+block@f4a39219742149f781a1dda6f43a623c",
-      "location": Array [
+      "location": [
         "About Exams and Certificates",
         "edX Exams",
         "Overall Grade Performance",
@@ -226,10 +226,10 @@ Object {
       "type": "text",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@html+block@f4a39219742149f781a1dda6f43a623c",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@html+block@87fa6792d79f4862be098e5169e93339",
-      "location": Array [
+      "location": [
         "Example Week 3: Be Social",
         "Lesson 3 - Be Social",
         "Homework - Find Your Study Buddy",
@@ -239,10 +239,10 @@ Object {
       "type": "text",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@html+block@87fa6792d79f4862be098e5169e93339",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@html+block@6018785795994726950614ce7d0f38c5",
-      "location": Array [
+      "location": [
         "Example Week 3: Be Social",
         "Homework - Find Your Study Buddy",
         "Homework - Find Your Study Buddy",
@@ -252,10 +252,10 @@ Object {
       "type": "text",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@html+block@6018785795994726950614ce7d0f38c5",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@html+block@f9f3a25e7bab46e583fd1fbbd7a2f6a0",
-      "location": Array [
+      "location": [
         "Example Week 3: Be Social",
         "Lesson 3 - Be Social",
         "Be Social",
@@ -265,10 +265,10 @@ Object {
       "type": "text",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@html+block@f9f3a25e7bab46e583fd1fbbd7a2f6a0",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@html+block@8293139743f34377817d537b69911530",
-      "location": Array [
+      "location": [
         "About Exams and Certificates",
         "edX Exams",
         "EdX Exams",
@@ -278,10 +278,10 @@ Object {
       "type": "text",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@html+block@8293139743f34377817d537b69911530",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "block-v1:edX+DemoX+Demo_Course+type@html+block@9d5104b502f24ee89c3d2f4ce9d347cf",
-      "location": Array [
+      "location": [
         "Example Week 1: Getting Started",
         "Lesson 1 - Getting Started",
         "When Are Your Exams? ",
@@ -291,7 +291,7 @@ Object {
       "type": "text",
       "url": "/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@html+block@9d5104b502f24ee89c3d2f4ce9d347cf",
     },
-    Object {
+    {
       "contentHits": 0,
       "id": "random-element-id",
       "location": null,

src/course-home/courseware-search/courseware-search.scss

@@ -5,13 +5,25 @@
   left: 0;
   right: 0;
   bottom: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  margin: 0;
   border-top: 1px solid $light-300;
-  z-index: 200;
+  z-index: $zindex-modal; // Bootstrap's z-index layer for Modals.
+
+  &__form {
+    position: relative;
+
+    .h2 {
+      margin-right: 2.5rem;
+    }
+  }
 
   &__close {
     position: absolute !important; // For some reason it gets overridden
-    top: 0.5rem;
-    right: 1rem;
+    top: 0;
+    right: 0;
     font-size: 1.5rem;
     line-height: 1;
   }
@@ -51,6 +63,8 @@
 
   &__empty {
     color: $gray-500;
+    padding: 6rem 0;
+    text-align: center;
   }
 
   &__item {
@@ -87,6 +101,11 @@
     font-size: 0.875rem;
     color: $black;
 
+    > h3 {
+      font-size: inherit;
+      margin: 0;
+    }
+
     > span {
       display: block;
       overflow: hidden;
@@ -150,9 +169,16 @@
 }
 
 @media (min-width: map-get($grid-breakpoints, 'md')) {
-  .courseware-search__content {
-    padding-top: 8rem;
+  .courseware-search {
+    &__close {
+      right: -2.5rem;
+    }
+
+    &__content {
+      padding-top: 8rem;
+    }
   }
+
 }
 
 body._search-no-scroll {

src/course-home/courseware-search/hooks.js

@@ -70,12 +70,13 @@ export function useLockScroll() {
   }, []);
 }
 
+const initSearchParams = { q: '', f: '' };
 export function useCoursewareSearchParams() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const clearSearchParams = () => setSearchParams({ q: '', f: '' });
+  const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
+  const clearSearchParams = () => setSearchParams(initSearchParams);
 
   const query = searchParams.get('q');
-  const filter = searchParams.get('f');
+  const filter = searchParams.get('f')?.toLowerCase();
 
   const setQuery = (q) => setSearchParams((params) => ({ q, f: params.get('f') }));
   const setFilter = (f) => setSearchParams((params) => ({ q: params.get('q'), f }));

src/course-home/courseware-search/hooks.test.jsx

@@ -1,9 +1,13 @@
 import { renderHook, act } from '@testing-library/react-hooks';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { fetchCoursewareSearchSettings } from '../data/thunks';
 import {
-  useCoursewareSearchFeatureFlag, useCoursewareSearchState, useElementBoundingBox, useLockScroll,
+  useCoursewareSearchFeatureFlag,
+  useCoursewareSearchParams,
+  useCoursewareSearchState,
+  useElementBoundingBox,
+  useLockScroll,
 } from './hooks';
 
 jest.mock('react-redux');
@@ -184,4 +188,45 @@ describe('CoursewareSearch Hooks', () => {
       expect(removeBodyClassSpy).toHaveBeenCalledWith('_search-no-scroll');
     });
   });
+
+  describe('useSearchParams', () => {
+    const initSearch = { q: '', f: '' };
+    const q = { value: '' };
+    const f = { value: '' };
+    const mockedQuery = { q, f };
+    const searchParams = { get: (prop) => mockedQuery[prop].value };
+    const setSearchParams = jest.fn();
+
+    beforeEach(() => {
+      useSearchParams.mockImplementation(() => [searchParams, setSearchParams]);
+    });
+
+    it('should init the search params properly', () => {
+      const {
+        query, filter, setQuery, setFilter, clearSearchParams,
+      } = useCoursewareSearchParams();
+
+      expect(useSearchParams).toBeCalledWith(initSearch);
+      expect(query).toBe('');
+      expect(filter).toBe('');
+
+      setQuery('setQuery');
+      expect(setSearchParams).toBeCalledWith(expect.any(Function));
+
+      setFilter('setFilter');
+      expect(setSearchParams).toBeCalledWith(expect.any(Function));
+
+      clearSearchParams();
+      expect(setSearchParams).toBeCalledWith(initSearch);
+    });
+
+    it('should return the query and lowercase filter if any', () => {
+      q.value = '42';
+      f.value = 'LOWERCASE';
+      const { query, filter } = useCoursewareSearchParams();
+
+      expect(query).toBe('42');
+      expect(filter).toBe('lowercase');
+    });
+  });
 });

src/course-home/courseware-search/messages.ts

@@ -2,79 +2,98 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
   searchOpenAction: {
-    id: 'learn.coursewareSerch.openAction',
+    id: 'learn.coursewareSearch.openAction',
     defaultMessage: 'Search within this course',
     description: 'Aria-label for a button that will pop up Courseware Search.',
   },
+  contentSearchButton: {
+    id: 'learn.coursewareSearch.contentSearchButton',
+    defaultMessage: 'Content search',
+    description: 'Text for a button that will pop up Courseware Search.',
+  },
   searchSubmitLabel: {
-    id: 'learn.coursewareSerch.submitLabel',
+    id: 'learn.coursewareSearch.submitLabel',
     defaultMessage: 'Search',
     description: 'Button label that will submit Courseware Search.',
   },
   searchClearAction: {
-    id: 'learn.coursewareSerch.clearAction',
+    id: 'learn.coursewareSearch.clearAction',
     defaultMessage: 'Clear search',
     description: 'Button label that will the current Courseware Search input.',
   },
   searchCloseAction: {
-    id: 'learn.coursewareSerch.closeAction',
+    id: 'learn.coursewareSearch.closeAction',
     defaultMessage: 'Close the search form',
     description: 'Aria-label for a button that will close Courseware Search.',
   },
   searchModuleTitle: {
-    id: 'learn.coursewareSerch.searchModuleTitle',
+    id: 'learn.coursewareSearch.searchModuleTitle',
     defaultMessage: 'Search this course',
     description: 'Title for the Courseware Search module.',
   },
   searchBarPlaceholderText: {
-    id: 'learn.coursewareSerch.searchBarPlaceholderText',
+    id: 'learn.coursewareSearch.searchBarPlaceholderText',
     defaultMessage: 'Search',
     description: 'Placeholder text for the Courseware Search input control',
   },
   loading: {
-    id: 'learn.coursewareSerch.loading',
+    id: 'learn.coursewareSearch.loading',
     defaultMessage: 'Searching...',
     description: 'Screen reader text to use on the spinner while the search is performing.',
   },
   searchResultsNone: {
-    id: 'learn.coursewareSerch.searchResultsNone',
+    id: 'learn.coursewareSearch.searchResultsNone',
     defaultMessage: 'No results found.',
     description: 'Text to show when the Courseware Search found no results matching the criteria.',
   },
   searchResultsLabel: {
-    id: 'learn.coursewareSerch.searchResultsLabel',
+    id: 'learn.coursewareSearch.searchResultsLabel',
     defaultMessage: 'Results for "{keyword}":',
     description: 'Text to show above the search results response list.',
   },
   searchResultsError: {
-    id: 'learn.coursewareSerch.searchResultsError',
+    id: 'learn.coursewareSearch.searchResultsError',
     defaultMessage: 'There was an error on the search process. Please try again in a few minutes. If the problem persists, please contact the support team.',
     description: 'Error message to show to the users when there\'s an error with the endpoint or the returned payload format.',
   },
-
+  searchResultsFilterDescription: {
+    id: 'learn.coursewareSearch.searchResultsFilterDescription',
+    defaultMessage: 'Search result filters',
+    description: 'Screen Reader text to describe the filter options.',
+  },
+  searchResultsBreadcrumb: {
+    id: 'learn.coursewareSearch.searchResultsBreadcrumb',
+    defaultMessage: 'Location: {path}.',
+    description: 'Screen Reader text to describe the search result breadcrumbs.',
+  },
+  searchResultsBreadcrumbSeparator: {
+    id: 'learn.searchResultsBreadcrumbSeparator',
+    defaultMessage: ', then ',
+    description: 'Screen Reader text to connect breadcrumb sections. i.e.: "Introduction, then Register, then Something else.',
+  },
   // These are translations for labeling the filters
   'filter:all': {
-    id: 'learn.coursewareSerch.filter:all',
+    id: 'learn.coursewareSearch.filter:all',
     defaultMessage: 'All content',
     description: 'Label for the search results filter that shows all content (no filter).',
   },
   'filter:text': {
-    id: 'learn.coursewareSerch.filter:text',
+    id: 'learn.coursewareSearch.filter:text',
     defaultMessage: 'Text',
     description: 'Label for the search results filter that shows results with text content.',
   },
   'filter:video': {
-    id: 'learn.coursewareSerch.filter:video',
+    id: 'learn.coursewareSearch.filter:video',
     defaultMessage: 'Video',
     description: 'Label for the search results filter that shows results with video content.',
   },
   'filter:sequence': {
-    id: 'learn.coursewareSerch.filter:sequence',
+    id: 'learn.coursewareSearch.filter:sequence',
     defaultMessage: 'Section',
     description: 'Label for the search results filter that shows results with section content.',
   },
   'filter:other': {
-    id: 'learn.coursewareSerch.filter:other',
+    id: 'learn.coursewareSearch.filter:other',
     defaultMessage: 'Other',
     description: 'Label for the search results filter that shows results with other content.',
   },

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

@@ -6,6 +6,7 @@ Factory.define('courseHomeMetadata')
   .option('host', 'http://localhost:18000')
   .attrs({
     title: 'Demonstration Course',
+    is_new_discussion_sidebar_view_enabled: false,
     is_self_paced: false,
     is_enrolled: false,
     is_staff: false,

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Data layer integration tests Test fetchDatesTab Should fetch, normalize, and save metadata 1`] = `
-Object {
-  "courseHome": Object {
+{
+  "courseHome": {
     "courseId": "course-v1:edX+DemoX+Demo_Course",
     "courseStatus": "loaded",
     "proctoringPanelStatus": "loading",
@@ -12,9 +12,13 @@ Object {
     "toastBodyText": null,
     "toastHeader": "",
   },
-  "courseware": Object {
+  "courseware": {
     "courseId": null,
+    "courseOutline": {},
+    "courseOutlineShouldUpdate": false,
+    "courseOutlineStatus": "loading",
     "courseStatus": "loading",
+    "coursewareOutlineSidebarSettings": {},
     "sequenceId": null,
     "sequenceMightBeUnit": false,
     "sequenceStatus": "loading",
@@ -22,12 +26,12 @@ Object {
   "learningAssistant": ObjectContaining {
     "conversationId": Any<String>,
   },
-  "models": Object {
-    "courseHomeMeta": Object {
-      "course-v1:edX+DemoX+Demo_Course": Object {
+  "models": {
+    "courseHomeMeta": {
+      "course-v1:edX+DemoX+Demo_Course": {
         "canViewCertificate": true,
         "celebrations": null,
-        "courseAccess": Object {
+        "courseAccess": {
           "additionalContextUserMessage": null,
           "developerMessage": null,
           "errorCode": null,
@@ -38,39 +42,40 @@ Object {
         "id": "course-v1:edX+DemoX+Demo_Course",
         "isEnrolled": false,
         "isMasquerading": false,
+        "isNewDiscussionSidebarViewEnabled": false,
         "isSelfPaced": false,
         "isStaff": false,
         "number": "DemoX",
         "org": "edX",
         "originalUserIsStaff": false,
         "start": "2013-02-05T05:00:00Z",
-        "tabs": Array [
-          Object {
+        "tabs": [
+          {
             "slug": "outline",
             "title": "Course",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/course/",
           },
-          Object {
+          {
             "slug": "discussion",
             "title": "Discussion",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/discussion/forum/",
           },
-          Object {
+          {
             "slug": "wiki",
             "title": "Wiki",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/course_wiki",
           },
-          Object {
+          {
             "slug": "progress",
             "title": "Progress",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/progress",
           },
-          Object {
+          {
             "slug": "instructor",
             "title": "Instructor",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/instructor",
           },
-          Object {
+          {
             "slug": "dates",
             "title": "Dates",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/dates",
@@ -79,7 +84,7 @@ Object {
         "title": "Demonstration Course",
         "userTimezone": "UTC",
         "username": "MockUser",
-        "verifiedMode": Object {
+        "verifiedMode": {
           "accessExpirationDate": null,
           "currency": "USD",
           "currencySymbol": "$",
@@ -89,10 +94,10 @@ Object {
         },
       },
     },
-    "dates": Object {
-      "course-v1:edX+DemoX+Demo_Course": Object {
-        "courseDateBlocks": Array [
-          Object {
+    "dates": {
+      "course-v1:edX+DemoX+Demo_Course": {
+        "courseDateBlocks": [
+          {
             "date": "2020-05-01T17:59:41Z",
             "dateType": "course-start-date",
             "description": "",
@@ -101,7 +106,7 @@ Object {
             "link": "",
             "title": "Course Starts",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "complete": true,
             "date": "2020-05-04T02:59:40.942669Z",
@@ -111,7 +116,7 @@ Object {
             "learnerHasAccess": true,
             "title": "Multi Badges Completed",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2020-05-05T02:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -120,7 +125,7 @@ Object {
             "learnerHasAccess": true,
             "title": "Multi Badges Past Due",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2020-05-27T02:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -130,7 +135,7 @@ Object {
             "link": "https://example.com/",
             "title": "Both Past Due 1",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2020-05-27T02:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -140,7 +145,7 @@ Object {
             "link": "https://example.com/",
             "title": "Both Past Due 2",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "complete": true,
             "date": "2020-05-28T08:59:40.942669Z",
@@ -151,7 +156,7 @@ Object {
             "link": "https://example.com/",
             "title": "One Completed/Due 1",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2020-05-28T08:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -161,7 +166,7 @@ Object {
             "link": "https://example.com/",
             "title": "One Completed/Due 2",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "complete": true,
             "date": "2020-05-29T08:59:40.942669Z",
@@ -172,7 +177,7 @@ Object {
             "link": "https://example.com/",
             "title": "Both Completed 1",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "complete": true,
             "date": "2020-05-29T08:59:40.942669Z",
@@ -183,7 +188,7 @@ Object {
             "link": "https://example.com/",
             "title": "Both Completed 2",
           },
-          Object {
+          {
             "date": "2020-06-16T17:59:40.942669Z",
             "dateType": "verified-upgrade-deadline",
             "description": "Don't miss the opportunity to highlight your new knowledge and skills by earning a verified certificate.",
@@ -192,7 +197,7 @@ Object {
             "link": "https://example.com/",
             "title": "Upgrade to Verified Certificate",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2030-08-17T05:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -202,7 +207,7 @@ Object {
             "link": "https://example.com/",
             "title": "One Verified 1",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2030-08-17T05:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -212,7 +217,7 @@ Object {
             "link": "https://example.com/",
             "title": "One Verified 2",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2030-08-17T05:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -222,7 +227,7 @@ Object {
             "link": "https://example.com/",
             "title": "ORA Verified 2",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2030-08-18T05:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -232,7 +237,7 @@ Object {
             "link": "https://example.com/",
             "title": "Both Verified 1",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2030-08-18T05:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -242,7 +247,7 @@ Object {
             "link": "https://example.com/",
             "title": "Both Verified 2",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2030-08-19T05:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -250,7 +255,7 @@ Object {
             "learnerHasAccess": true,
             "title": "One Unreleased 1",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2030-08-19T05:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -260,7 +265,7 @@ Object {
             "link": "https://example.com/",
             "title": "One Unreleased 2",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2030-08-20T05:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -269,7 +274,7 @@ Object {
             "learnerHasAccess": true,
             "title": "Both Unreleased 1",
           },
-          Object {
+          {
             "assignmentType": "Homework",
             "date": "2030-08-20T05:59:40.942669Z",
             "dateType": "assignment-due-date",
@@ -278,7 +283,7 @@ Object {
             "learnerHasAccess": true,
             "title": "Both Unreleased 2",
           },
-          Object {
+          {
             "date": "2030-08-23T00:00:00Z",
             "dateType": "course-end-date",
             "description": "",
@@ -287,7 +292,7 @@ Object {
             "link": "",
             "title": "Course Ends",
           },
-          Object {
+          {
             "date": "2030-09-01T00:00:00Z",
             "dateType": "verification-deadline-date",
             "description": "You must successfully complete verification before this date to qualify for a Verified Certificate.",
@@ -297,7 +302,7 @@ Object {
             "title": "Verification Deadline",
           },
         ],
-        "datesBannerInfo": Object {
+        "datesBannerInfo": {
           "contentTypeGatingEnabled": false,
           "missedDeadlines": false,
           "missedGatedContent": false,
@@ -309,10 +314,75 @@ Object {
       },
     },
   },
-  "recommendations": Object {
+  "plugins": {},
+  "recommendations": {
     "recommendationsStatus": "loading",
   },
-  "tours": Object {
+  "specialExams": {
+    "activeAttempt": null,
+    "allowProctoringOptOut": false,
+    "apiErrorMsg": "",
+    "exam": {
+      "attempt": {
+        "attempt_code": "",
+        "attempt_id": null,
+        "attempt_status": "",
+        "course_id": "",
+        "desktop_application_js_url": "",
+        "exam_display_name": "",
+        "exam_started_poll_url": "",
+        "exam_type": "",
+        "exam_url_path": "",
+        "external_id": "",
+        "in_timed_exam": true,
+        "ping_interval": null,
+        "taking_as_proctored": true,
+        "time_remaining_seconds": null,
+        "use_legacy_attempt_api": true,
+      },
+      "backend": "",
+      "content_id": "",
+      "course_id": "",
+      "due_date": null,
+      "exam_name": "",
+      "external_id": "",
+      "hide_after_due": false,
+      "id": null,
+      "is_active": true,
+      "is_practice_exam": false,
+      "is_proctored": false,
+      "prerequisite_status": {
+        "are_prerequisites_satisifed": true,
+        "declined_prerequisites": [],
+        "failed_prerequisites": [],
+        "pending_prerequisites": [],
+        "satisfied_prerequisites": [],
+      },
+      "time_limit_mins": null,
+      "type": "",
+    },
+    "examAccessToken": {
+      "exam_access_token": "",
+      "exam_access_token_expiration": "",
+    },
+    "isLoading": true,
+    "proctoringSettings": {
+      "exam_proctoring_backend": {
+        "download_url": "",
+        "instructions": [],
+        "name": "",
+        "rules": {},
+      },
+      "integration_specific_email": "",
+      "learner_notification_from_email": "",
+      "provider_name": "",
+      "provider_tech_support_email": "",
+      "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
+    },
+    "timeIsOver": false,
+  },
+  "tours": {
     "showCoursewareTour": false,
     "showExistingUserCourseHomeTour": false,
     "showNewUserCourseHomeModal": false,
@@ -323,8 +393,8 @@ Object {
 `;
 
 exports[`Data layer integration tests Test fetchOutlineTab Should fetch, normalize, and save metadata 1`] = `
-Object {
-  "courseHome": Object {
+{
+  "courseHome": {
     "courseId": "course-v1:edX+DemoX+Demo_Course",
     "courseStatus": "loaded",
     "proctoringPanelStatus": "loading",
@@ -334,9 +404,13 @@ Object {
     "toastBodyText": null,
     "toastHeader": "",
   },
-  "courseware": Object {
+  "courseware": {
     "courseId": null,
+    "courseOutline": {},
+    "courseOutlineShouldUpdate": false,
+    "courseOutlineStatus": "loading",
     "courseStatus": "loading",
+    "coursewareOutlineSidebarSettings": {},
     "sequenceId": null,
     "sequenceMightBeUnit": false,
     "sequenceStatus": "loading",
@@ -344,12 +418,12 @@ Object {
   "learningAssistant": ObjectContaining {
     "conversationId": Any<String>,
   },
-  "models": Object {
-    "courseHomeMeta": Object {
-      "course-v1:edX+DemoX+Demo_Course": Object {
+  "models": {
+    "courseHomeMeta": {
+      "course-v1:edX+DemoX+Demo_Course": {
         "canViewCertificate": true,
         "celebrations": null,
-        "courseAccess": Object {
+        "courseAccess": {
           "additionalContextUserMessage": null,
           "developerMessage": null,
           "errorCode": null,
@@ -360,39 +434,40 @@ Object {
         "id": "course-v1:edX+DemoX+Demo_Course",
         "isEnrolled": false,
         "isMasquerading": false,
+        "isNewDiscussionSidebarViewEnabled": false,
         "isSelfPaced": false,
         "isStaff": false,
         "number": "DemoX",
         "org": "edX",
         "originalUserIsStaff": false,
         "start": "2013-02-05T05:00:00Z",
-        "tabs": Array [
-          Object {
+        "tabs": [
+          {
             "slug": "outline",
             "title": "Course",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/course/",
           },
-          Object {
+          {
             "slug": "discussion",
             "title": "Discussion",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/discussion/forum/",
           },
-          Object {
+          {
             "slug": "wiki",
             "title": "Wiki",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/course_wiki",
           },
-          Object {
+          {
             "slug": "progress",
             "title": "Progress",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/progress",
           },
-          Object {
+          {
             "slug": "instructor",
             "title": "Instructor",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/instructor",
           },
-          Object {
+          {
             "slug": "dates",
             "title": "Dates",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/dates",
@@ -401,7 +476,7 @@ Object {
         "title": "Demonstration Course",
         "userTimezone": "UTC",
         "username": "MockUser",
-        "verifiedMode": Object {
+        "verifiedMode": {
           "accessExpirationDate": null,
           "currency": "USD",
           "currencySymbol": "$",
@@ -411,77 +486,80 @@ Object {
         },
       },
     },
-    "outline": Object {
-      "course-v1:edX+DemoX+Demo_Course": Object {
+    "outline": {
+      "course-v1:edX+DemoX+Demo_Course": {
         "accessExpiration": null,
         "canShowUpgradeSock": false,
-        "certData": Object {
+        "certData": {
           "certStatus": null,
           "certWebViewUrl": null,
           "certificateAvailableDate": null,
         },
-        "courseBlocks": Object {
-          "courses": Object {
-            "block-v1:edX+DemoX+Demo_Course+type@course+block@bcdabcdabcdabcdabcdabcdabcdabcd3": Object {
+        "courseBlocks": {
+          "courses": {
+            "block-v1:edX+DemoX+Demo_Course+type@course+block@bcdabcdabcdabcdabcdabcdabcdabcd3": {
               "hasScheduledContent": false,
               "id": "course-v1:edX+DemoX+Demo_Course",
-              "sectionIds": Array [
+              "sectionIds": [
                 "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
               ],
               "title": "bcdabcdabcdabcdabcdabcdabcdabcd3",
             },
           },
-          "sections": Object {
-            "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2": Object {
+          "sections": {
+            "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2": {
               "complete": false,
               "courseId": "course-v1:edX+DemoX+Demo_Course",
+              "hideFromTOC": undefined,
               "id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
               "resumeBlock": false,
-              "sequenceIds": Array [
+              "sequenceIds": [
                 "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
               ],
               "title": "Title of Section",
             },
           },
-          "sequences": Object {
-            "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1": Object {
+          "sequences": {
+            "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1": {
               "complete": false,
               "description": null,
               "due": null,
               "effortActivities": 2,
               "effortTime": 15,
+              "hideFromTOC": undefined,
               "icon": null,
               "id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+              "navigationDisabled": undefined,
               "sectionId": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
               "showLink": true,
               "title": "Title of Sequence",
             },
           },
         },
-        "courseGoals": Object {
+        "courseGoals": {
           "daysPerWeek": null,
-          "goalOptions": Array [],
+          "goalOptions": [],
           "selectedGoal": null,
           "subscribedToReminders": null,
           "weeklyLearningGoalEnabled": false,
         },
-        "courseTools": Array [
-          Object {
+        "courseTools": [
+          {
             "analyticsId": "edx.bookmarks",
             "title": "Bookmarks",
             "url": "https://example.com/bookmarks",
           },
         ],
-        "datesBannerInfo": Object {
+        "datesBannerInfo": {
           "contentTypeGatingEnabled": false,
           "missedDeadlines": false,
           "missedGatedContent": false,
         },
-        "datesWidget": Object {
-          "courseDateBlocks": Array [],
+        "datesWidget": {
+          "courseDateBlocks": [],
         },
         "enableProctoredExams": undefined,
-        "enrollAlert": Object {
+        "enrollAlert": {
           "canEnroll": true,
           "extraText": "Contact the administrator.",
         },
@@ -491,13 +569,13 @@ Object {
         "hasScheduledContent": null,
         "id": "course-v1:edX+DemoX+Demo_Course",
         "offer": null,
-        "resumeCourse": Object {
+        "resumeCourse": {
           "hasVisitedCourse": false,
           "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+Test+Block@12345abcde",
         },
         "timeOffsetMillis": 0,
         "userHasPassingGrade": undefined,
-        "verifiedMode": Object {
+        "verifiedMode": {
           "accessExpirationDate": "2050-01-01T12:00:00",
           "currency": "USD",
           "currencySymbol": "$",
@@ -509,10 +587,75 @@ Object {
       },
     },
   },
-  "recommendations": Object {
+  "plugins": {},
+  "recommendations": {
     "recommendationsStatus": "loading",
   },
-  "tours": Object {
+  "specialExams": {
+    "activeAttempt": null,
+    "allowProctoringOptOut": false,
+    "apiErrorMsg": "",
+    "exam": {
+      "attempt": {
+        "attempt_code": "",
+        "attempt_id": null,
+        "attempt_status": "",
+        "course_id": "",
+        "desktop_application_js_url": "",
+        "exam_display_name": "",
+        "exam_started_poll_url": "",
+        "exam_type": "",
+        "exam_url_path": "",
+        "external_id": "",
+        "in_timed_exam": true,
+        "ping_interval": null,
+        "taking_as_proctored": true,
+        "time_remaining_seconds": null,
+        "use_legacy_attempt_api": true,
+      },
+      "backend": "",
+      "content_id": "",
+      "course_id": "",
+      "due_date": null,
+      "exam_name": "",
+      "external_id": "",
+      "hide_after_due": false,
+      "id": null,
+      "is_active": true,
+      "is_practice_exam": false,
+      "is_proctored": false,
+      "prerequisite_status": {
+        "are_prerequisites_satisifed": true,
+        "declined_prerequisites": [],
+        "failed_prerequisites": [],
+        "pending_prerequisites": [],
+        "satisfied_prerequisites": [],
+      },
+      "time_limit_mins": null,
+      "type": "",
+    },
+    "examAccessToken": {
+      "exam_access_token": "",
+      "exam_access_token_expiration": "",
+    },
+    "isLoading": true,
+    "proctoringSettings": {
+      "exam_proctoring_backend": {
+        "download_url": "",
+        "instructions": [],
+        "name": "",
+        "rules": {},
+      },
+      "integration_specific_email": "",
+      "learner_notification_from_email": "",
+      "provider_name": "",
+      "provider_tech_support_email": "",
+      "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
+    },
+    "timeIsOver": false,
+  },
+  "tours": {
     "showCoursewareTour": false,
     "showExistingUserCourseHomeTour": false,
     "showNewUserCourseHomeModal": false,
@@ -523,8 +666,8 @@ Object {
 `;
 
 exports[`Data layer integration tests Test fetchProgressTab Should fetch, normalize, and save metadata 1`] = `
-Object {
-  "courseHome": Object {
+{
+  "courseHome": {
     "courseId": "course-v1:edX+DemoX+Demo_Course",
     "courseStatus": "loaded",
     "proctoringPanelStatus": "loading",
@@ -534,9 +677,13 @@ Object {
     "toastBodyText": null,
     "toastHeader": "",
   },
-  "courseware": Object {
+  "courseware": {
     "courseId": null,
+    "courseOutline": {},
+    "courseOutlineShouldUpdate": false,
+    "courseOutlineStatus": "loading",
     "courseStatus": "loading",
+    "coursewareOutlineSidebarSettings": {},
     "sequenceId": null,
     "sequenceMightBeUnit": false,
     "sequenceStatus": "loading",
@@ -544,12 +691,12 @@ Object {
   "learningAssistant": ObjectContaining {
     "conversationId": Any<String>,
   },
-  "models": Object {
-    "courseHomeMeta": Object {
-      "course-v1:edX+DemoX+Demo_Course": Object {
+  "models": {
+    "courseHomeMeta": {
+      "course-v1:edX+DemoX+Demo_Course": {
         "canViewCertificate": true,
         "celebrations": null,
-        "courseAccess": Object {
+        "courseAccess": {
           "additionalContextUserMessage": null,
           "developerMessage": null,
           "errorCode": null,
@@ -560,39 +707,40 @@ Object {
         "id": "course-v1:edX+DemoX+Demo_Course",
         "isEnrolled": false,
         "isMasquerading": false,
+        "isNewDiscussionSidebarViewEnabled": false,
         "isSelfPaced": false,
         "isStaff": false,
         "number": "DemoX",
         "org": "edX",
         "originalUserIsStaff": false,
         "start": "2013-02-05T05:00:00Z",
-        "tabs": Array [
-          Object {
+        "tabs": [
+          {
             "slug": "outline",
             "title": "Course",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/course/",
           },
-          Object {
+          {
             "slug": "discussion",
             "title": "Discussion",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/discussion/forum/",
           },
-          Object {
+          {
             "slug": "wiki",
             "title": "Wiki",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/course_wiki",
           },
-          Object {
+          {
             "slug": "progress",
             "title": "Progress",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/progress",
           },
-          Object {
+          {
             "slug": "instructor",
             "title": "Instructor",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/instructor",
           },
-          Object {
+          {
             "slug": "dates",
             "title": "Dates",
             "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/dates",
@@ -601,7 +749,7 @@ Object {
         "title": "Demonstration Course",
         "userTimezone": "UTC",
         "username": "MockUser",
-        "verifiedMode": Object {
+        "verifiedMode": {
           "accessExpirationDate": null,
           "currency": "USD",
           "currencySymbol": "$",
@@ -611,16 +759,16 @@ Object {
         },
       },
     },
-    "progress": Object {
-      "course-v1:edX+DemoX+Demo_Course": Object {
+    "progress": {
+      "course-v1:edX+DemoX+Demo_Course": {
         "accessExpiration": null,
-        "certificateData": Object {},
-        "completionSummary": Object {
+        "certificateData": {},
+        "completionSummary": {
           "completeCount": 1,
           "incompleteCount": 1,
           "lockedCount": 0,
         },
-        "courseGrade": Object {
+        "courseGrade": {
           "isPassing": true,
           "letterGrade": "pass",
           "percent": 1,
@@ -631,10 +779,10 @@ Object {
         "enrollmentMode": "audit",
         "gradesFeatureIsFullyLocked": false,
         "gradesFeatureIsPartiallyLocked": false,
-        "gradingPolicy": Object {
-          "assignmentPolicies": Array [
-            Object {
-              "averageGrade": "1.00",
+        "gradingPolicy": {
+          "assignmentPolicies": [
+            {
+              "averageGrade": "1.0000",
               "numDroppable": 1,
               "shortLabel": "HW",
               "type": "Homework",
@@ -642,17 +790,17 @@ Object {
               "weightedGrade": 1,
             },
           ],
-          "gradeRange": Object {
+          "gradeRange": {
             "pass": 0.75,
           },
         },
         "hasScheduledContent": false,
         "id": "course-v1:edX+DemoX+Demo_Course",
-        "sectionScores": Array [
-          Object {
+        "sectionScores": [
+          {
             "displayName": "First section",
-            "subsections": Array [
-              Object {
+            "subsections": [
+              {
                 "assignmentType": "Homework",
                 "blockKey": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345",
                 "displayName": "First subsection",
@@ -661,16 +809,16 @@ Object {
                 "numPointsEarned": 0,
                 "numPointsPossible": 3,
                 "percentGraded": 0,
-                "problemScores": Array [
-                  Object {
+                "problemScores": [
+                  {
                     "earned": 0,
                     "possible": 1,
                   },
-                  Object {
+                  {
                     "earned": 0,
                     "possible": 1,
                   },
-                  Object {
+                  {
                     "earned": 0,
                     "possible": 1,
                   },
@@ -681,18 +829,18 @@ Object {
               },
             ],
           },
-          Object {
+          {
             "displayName": "Second section",
-            "subsections": Array [
-              Object {
+            "subsections": [
+              {
                 "assignmentType": "Homework",
                 "displayName": "Second subsection",
                 "hasGradedAssignment": true,
                 "numPointsEarned": 1,
                 "numPointsPossible": 1,
                 "percentGraded": 1,
-                "problemScores": Array [
-                  Object {
+                "problemScores": [
+                  {
                     "earned": 1,
                     "possible": 1,
                   },
@@ -706,7 +854,7 @@ Object {
         ],
         "studioUrl": "http://studio.edx.org/settings/grading/course-v1:edX+Test+run",
         "userHasPassingGrade": false,
-        "verificationData": Object {
+        "verificationData": {
           "link": null,
           "status": "none",
           "statusDate": null,
@@ -715,10 +863,75 @@ Object {
       },
     },
   },
-  "recommendations": Object {
+  "plugins": {},
+  "recommendations": {
     "recommendationsStatus": "loading",
   },
-  "tours": Object {
+  "specialExams": {
+    "activeAttempt": null,
+    "allowProctoringOptOut": false,
+    "apiErrorMsg": "",
+    "exam": {
+      "attempt": {
+        "attempt_code": "",
+        "attempt_id": null,
+        "attempt_status": "",
+        "course_id": "",
+        "desktop_application_js_url": "",
+        "exam_display_name": "",
+        "exam_started_poll_url": "",
+        "exam_type": "",
+        "exam_url_path": "",
+        "external_id": "",
+        "in_timed_exam": true,
+        "ping_interval": null,
+        "taking_as_proctored": true,
+        "time_remaining_seconds": null,
+        "use_legacy_attempt_api": true,
+      },
+      "backend": "",
+      "content_id": "",
+      "course_id": "",
+      "due_date": null,
+      "exam_name": "",
+      "external_id": "",
+      "hide_after_due": false,
+      "id": null,
+      "is_active": true,
+      "is_practice_exam": false,
+      "is_proctored": false,
+      "prerequisite_status": {
+        "are_prerequisites_satisifed": true,
+        "declined_prerequisites": [],
+        "failed_prerequisites": [],
+        "pending_prerequisites": [],
+        "satisfied_prerequisites": [],
+      },
+      "time_limit_mins": null,
+      "type": "",
+    },
+    "examAccessToken": {
+      "exam_access_token": "",
+      "exam_access_token_expiration": "",
+    },
+    "isLoading": true,
+    "proctoringSettings": {
+      "exam_proctoring_backend": {
+        "download_url": "",
+        "instructions": [],
+        "name": "",
+        "rules": {},
+      },
+      "integration_specific_email": "",
+      "learner_notification_from_email": "",
+      "provider_name": "",
+      "provider_tech_support_email": "",
+      "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
+    },
+    "timeIsOver": false,
+  },
+  "tours": {
     "showCoursewareTour": false,
     "showExistingUserCourseHomeTour": false,
     "showNewUserCourseHomeModal": false,

src/course-home/data/api.js

@@ -18,7 +18,7 @@ const calculateAssignmentTypeGrades = (points, assignmentWeight, numDroppable) =
     // Calculate the average grade for the assignment and round it. This rounding is not ideal and does not accurately
     // reflect what a learner's grade would be, however, we must have parity with the current grading behavior that
     // exists in edx-platform.
-    averageGrade = (points.reduce((a, b) => a + b, 0) / points.length).toFixed(2);
+    averageGrade = (points.reduce((a, b) => a + b, 0) / points.length).toFixed(4);
     weightedGrade = averageGrade * assignmentWeight;
   }
   return { averageGrade, weightedGrade };
@@ -136,6 +136,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           title: block.display_name,
           resumeBlock: block.resume_block,
           sequenceIds: block.children || [],
+          hideFromTOC: block.hide_from_toc,
         };
         break;
 
@@ -152,6 +153,8 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           // link in the outline (even though we ignore the given url and use an internal <Link> to ourselves).
           showLink: !!block.lms_web_url,
           title: block.display_name,
+          hideFromTOC: block.hide_from_toc,
+          navigationDisabled: block.navigation_disabled,
         };
         break;
 
@@ -286,9 +289,17 @@ export async function getProgressTabData(courseId, targetUserId) {
 }
 
 export async function getProctoringInfoData(courseId, username) {
-  let url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}`;
-  if (username) {
-    url += `&username=${encodeURIComponent(username)}`;
+  let url;
+  if (!getConfig().EXAMS_BASE_URL) {
+    url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}`;
+    if (username) {
+      url += `&username=${encodeURIComponent(username)}`;
+    }
+  } else {
+    url = `${getConfig().EXAMS_BASE_URL}/api/v1/student/course_id/${encodeURIComponent(courseId)}/onboarding`;
+    if (username) {
+      url += `?username=${encodeURIComponent(username)}`;
+    }
   }
   try {
     const { data } = await getAuthenticatedHttpClient().get(url);
@@ -446,7 +457,7 @@ export async function unsubscribeFromCourseGoal(token) {
     .then(res => camelCaseObject(res));
 }
 
-export async function getCoursewareSearchEnabledFlag(courseId) {
+export async function getCoursewareSearchEnabled(courseId) {
   const url = new URL(`${getConfig().LMS_BASE_URL}/courses/${courseId}/courseware-search/enabled/`);
   const { data } = await getAuthenticatedHttpClient().get(url.href);
   return { enabled: data.enabled || false };

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

@@ -89,6 +89,7 @@ describe('Course Home Service', () => {
               }),
               title: string('Demonstration Course'),
               username: string('edx'),
+              has_course_author_access: boolean(true),
             },
           },
         });
@@ -133,6 +134,7 @@ describe('Course Home Service', () => {
           ],
           title: 'Demonstration Course',
           username: 'edx',
+          hasCourseAuthorAccess: true,
         };
         const response = getCourseHomeCourseMetadata(courseId, 'outline');
         expect(response).toBeTruthy();

src/course-home/data/slice.js

@@ -1,10 +1,12 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
-export const LOADING = 'loading';
-export const LOADED = 'loaded';
-export const FAILED = 'failed';
-export const DENIED = 'denied';
+import {
+  LOADING,
+  LOADED,
+  FAILED,
+  DENIED,
+} from '@src/constants';
 
 const slice = createSlice({
   name: 'course-home',

src/course-home/data/thunks.js

@@ -12,7 +12,7 @@ import {
   postDismissWelcomeMessage,
   postRequestCert,
   getLiveTabIframe,
-  getCoursewareSearchEnabledFlag,
+  getCoursewareSearchEnabled,
   searchCourseContentFromAPI,
 } from './api';
 
@@ -159,7 +159,7 @@ export function processEvent(eventData, getTabData) {
 
 export async function fetchCoursewareSearchSettings(courseId) {
   try {
-    const { enabled } = await getCoursewareSearchEnabledFlag(courseId);
+    const { enabled } = await getCoursewareSearchEnabled(courseId);
     return { enabled };
   } catch (e) {
     return { enabled: false };

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

@@ -135,6 +135,7 @@ describe('DatesTab', () => {
     });
 
     it('shows extra info', async () => {
+      const user = userEvent.setup();
       const { items } = await getDay('Sat, Aug 17, 2030');
       expect(items).toHaveLength(3);
 
@@ -142,10 +143,12 @@ describe('DatesTab', () => {
       const tipText = "ORA Dates are set by the instructor, and can't be changed";
 
       expect(screen.queryByText(tipText)).toBeNull(); // tooltip does not start in DOM
-      userEvent.hover(tipIcon);
-      const tooltip = screen.getByText(tipText); // now it's there
-      userEvent.unhover(tipIcon);
-      await waitForElementToBeRemoved(tooltip); // and it's gone again
+      await user.hover(tipIcon);
+      screen.getByText(tipText); // now it's there
+      await user.unhover(tipIcon);
+      await waitFor(() => {
+        expect(screen.queryByText(tipText)).toBeNull(); // and it's gone again
+      });
     });
   });
 

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

@@ -8,7 +8,7 @@ import {
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Tooltip, OverlayTrigger } from '@edx/paragon';
+import { Tooltip, OverlayTrigger } from '@openedx/paragon';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 

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

@@ -2,7 +2,7 @@ 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 '@edx/paragon';
+import { Badge } from '@openedx/paragon';
 
 import messages from '../messages';
 import { daycmp, isLearnerAssignment } from '../utils';
@@ -38,21 +38,21 @@ function getBadgeListAndColor(date, intl, item, items) {
       message: messages.today,
       shownForDay: isToday,
       bg: 'bg-warning-300',
-      className: 'text-black',
+      className: 'text-dark',
     },
     {
       message: messages.completed,
       shownForDay: assignments.length && assignments.every(isComplete),
       shownForItem: x => isLearnerAssignment(x) && isComplete(x),
       bg: 'bg-light-500',
-      className: 'text-black',
+      className: 'text-dark',
     },
     {
       message: messages.pastDue,
       shownForDay: assignments.length && assignments.every(isPastDue),
       shownForItem: x => isLearnerAssignment(x) && isPastDue(x),
       bg: 'bg-dark-200',
-      className: 'text-white',
+      className: 'text-dark',
     },
     {
       message: messages.dueNext,

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

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import { LearningHeader as Header } from '@edx/frontend-component-header';
+import HeaderSlot from '../../plugin-slots/HeaderSlot';
 import PageLoading from '../../generic/PageLoading';
 import { unsubscribeFromCourseGoal } from '../data/api';
 
@@ -38,7 +38,7 @@ const GoalUnsubscribe = ({ intl }) => {
 
   return (
     <>
-      <Header showUserDropdown={false} />
+      <HeaderSlot showUserDropdown={false} />
       <main id="main-content" className="container my-5 text-center">
         {isLoading && (
           <PageLoading srMessage={`${intl.formatMessage(messages.loading)}`} />

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Hyperlink } from '@edx/paragon';
+import { Button, Hyperlink } from '@openedx/paragon';
 
 import messages from './messages';
 import { ReactComponent as UnsubscribeIcon } from './unsubscribe.svg';

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

@@ -9,8 +9,9 @@ const LmsHtmlFragment = ({
   title,
   ...rest
 }) => {
+  const direction = document.documentElement?.getAttribute('dir') || 'ltr';
   const wholePage = `
-    <html>
+    <html dir="${direction}">
       <head>
         <base href="${getConfig().LMS_BASE_URL}" target="_parent">
         <link rel="stylesheet" href="/static/${getConfig().LEGACY_THEME_NAME ? `${getConfig().LEGACY_THEME_NAME}/` : ''}css/bootstrap/lms-main.css">
@@ -29,7 +30,7 @@ const LmsHtmlFragment = ({
   const iframe = useRef(null);
   function resetIframeHeight() {
     if (iframe?.current?.contentWindow?.document?.body) {
-      iframe.current.height = iframe.current.contentWindow.document.body.scrollHeight;
+      iframe.current.height = iframe.current.contentWindow.document.body.parentNode.scrollHeight;
     }
   }
 

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

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { AlertList } from '../../generic/user-messages';
 
 import CourseDates from './widgets/CourseDates';
@@ -14,7 +15,6 @@ import WeeklyLearningGoalCard from './widgets/WeeklyLearningGoalCard';
 import CourseTools from './widgets/CourseTools';
 import { fetchOutlineTab } from '../data';
 import messages from './messages';
-import Section from './Section';
 import ShiftDatesAlert from '../suggested-schedule-messaging/ShiftDatesAlert';
 import UpgradeNotification from '../../generic/upgrade-notification/UpgradeNotification';
 import UpgradeToShiftDatesAlert from '../suggested-schedule-messaging/UpgradeToShiftDatesAlert';
@@ -27,8 +27,10 @@ import { useModel } from '../../generic/model-store';
 import WelcomeMessage from './widgets/WelcomeMessage';
 import ProctoringInfoPanel from './widgets/ProctoringInfoPanel';
 import AccountActivationAlert from '../../alerts/logistration-alert/AccountActivationAlert';
+import CourseHomeSectionOutlineSlot from '../../plugin-slots/CourseHomeSectionOutlineSlot';
 
-const OutlineTab = ({ intl }) => {
+const OutlineTab = () => {
+  const intl = useIntl();
   const {
     courseId,
     proctoringPanelStatus,
@@ -41,6 +43,8 @@ const OutlineTab = ({ intl }) => {
     userTimezone,
   } = useModel('courseHomeMeta', courseId);
 
+  const expandButtonRef = useRef();
+
   const {
     accessExpiration,
     courseBlocks: {
@@ -158,27 +162,21 @@ const OutlineTab = ({ intl }) => {
             </>
           )}
           <StartOrResumeCourseCard />
-          <WelcomeMessage courseId={courseId} />
+          <WelcomeMessage courseId={courseId} nextElementRef={expandButtonRef} />
           {rootCourseId && (
             <>
-              <div className="row w-100 m-0 mb-3 justify-content-end">
+              <div id="expand-button-row" className="row w-100 m-0 mb-3 justify-content-end">
                 <div className="col-12 col-md-auto p-0">
-                  <Button variant="outline-primary" block onClick={() => { setExpandAll(!expandAll); }}>
+                  <Button ref={expandButtonRef} variant="outline-primary" block onClick={() => { setExpandAll(!expandAll); }}>
                     {expandAll ? intl.formatMessage(messages.collapseAll) : intl.formatMessage(messages.expandAll)}
                   </Button>
                 </div>
               </div>
-              <ol id="courseHome-outline" className="list-unstyled">
-                {courses[rootCourseId].sectionIds.map((sectionId) => (
-                  <Section
-                    key={sectionId}
-                    courseId={courseId}
-                    defaultOpen={sections[sectionId].resumeBlock}
-                    expand={expandAll}
-                    section={sections[sectionId]}
-                  />
-                ))}
-              </ol>
+              <CourseHomeSectionOutlineSlot
+                expandAll={expandAll}
+                sectionIds={courses[rootCourseId].sectionIds}
+                sections={sections}
+              />
             </>
           )}
         </div>
@@ -194,19 +192,27 @@ const OutlineTab = ({ intl }) => {
               />
             )}
             <CourseTools />
-            <UpgradeNotification
-              offer={offer}
-              verifiedMode={verifiedMode}
-              accessExpiration={accessExpiration}
-              contentTypeGatingEnabled={datesBannerInfo.contentTypeGatingEnabled}
-              marketingUrl={marketingUrl}
-              upsellPageName="course_home"
-              userTimezone={userTimezone}
-              shouldDisplayBorder
-              timeOffsetMillis={timeOffsetMillis}
-              courseId={courseId}
-              org={org}
-            />
+            <PluginSlot
+              id="outline_tab_notifications_slot"
+              pluginProps={{
+                courseId,
+                model: 'outline',
+              }}
+            >
+              <UpgradeNotification
+                offer={offer}
+                verifiedMode={verifiedMode}
+                accessExpiration={accessExpiration}
+                contentTypeGatingEnabled={datesBannerInfo.contentTypeGatingEnabled}
+                marketingUrl={marketingUrl}
+                upsellPageName="course_home"
+                userTimezone={userTimezone}
+                shouldDisplayBorder
+                timeOffsetMillis={timeOffsetMillis}
+                courseId={courseId}
+                org={org}
+              />
+            </PluginSlot>
             <CourseDates />
             <CourseHandouts />
           </div>
@@ -216,8 +222,4 @@ const OutlineTab = ({ intl }) => {
   );
 };
 
-OutlineTab.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(OutlineTab);
+export default OutlineTab;

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

@@ -54,7 +54,7 @@ describe('Outline Tab', () => {
   const goalUrl = `${getConfig().LMS_BASE_URL}/api/course_home/save_course_goal`;
   const masqueradeUrl = `${getConfig().LMS_BASE_URL}/courses/${courseId}/masquerade`;
   const outlineUrl = `${getConfig().LMS_BASE_URL}/api/course_home/outline/${courseId}`;
-  const proctoringInfoUrl = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}&username=MockUser`;
+  const proctoringInfoUrl = `${getConfig().EXAMS_BASE_URL}/api/v1/student/course_id/${encodeURIComponent(courseId)}/onboarding?username=MockUser`;
 
   const store = initializeStore();
   const defaultMetadata = Factory.build('courseHomeMetadata');
@@ -132,7 +132,18 @@ describe('Outline Tab', () => {
       expect(expandedSectionNode).toHaveAttribute('aria-expanded', 'true');
     });
 
+    it('includes outline_tab_notifications_slot', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      setTabData({
+        course_blocks: { blocks: courseBlocks.blocks },
+      });
+      await fetchAndRender();
+
+      expect(screen.getByTestId('outline_tab_notifications_slot')).toBeInTheDocument();
+    });
+
     it('handles expand/collapse all button click', async () => {
+      const user = userEvent.setup();
       await fetchAndRender();
       // Button renders as "Expand All"
       const expandButton = screen.getByRole('button', { name: 'Expand all' });
@@ -143,11 +154,11 @@ describe('Outline Tab', () => {
       expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false');
 
       // Click to expand section
-      userEvent.click(expandButton);
+      await user.click(expandButton);
       await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'true'));
 
       // Click to collapse section
-      userEvent.click(expandButton);
+      await user.click(expandButton);
       await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false'));
     });
 
@@ -157,7 +168,7 @@ describe('Outline Tab', () => {
         course_blocks: { blocks: courseBlocks.blocks },
       });
       await fetchAndRender();
-      expect(screen.getByTitle('Completed section')).toBeInTheDocument();
+      expect(screen.getByLabelText('Completed section')).toBeInTheDocument();
     });
 
     it('displays correct icon for incomplete assignment', async () => {
@@ -166,7 +177,7 @@ describe('Outline Tab', () => {
         course_blocks: { blocks: courseBlocks.blocks },
       });
       await fetchAndRender();
-      expect(screen.getByTitle('Incomplete section')).toBeInTheDocument();
+      expect(screen.getByLabelText('Incomplete section')).toBeInTheDocument();
     });
 
     it('SequenceLink displays link', async () => {
@@ -265,21 +276,50 @@ describe('Outline Tab', () => {
       });
 
       it('renders show more/less button and handles click', async () => {
+        const user = userEvent.setup();
         expect(screen.getByTestId('alert-container-welcome')).toBeInTheDocument();
         let showMoreButton = screen.getByRole('button', { name: 'Show More' });
         expect(showMoreButton).toBeInTheDocument();
 
-        userEvent.click(showMoreButton);
+        await user.click(showMoreButton);
         let showLessButton = screen.getByRole('button', { name: 'Show Less' });
         expect(showLessButton).toBeInTheDocument();
         expect(screen.getByTestId('long-welcome-message-iframe')).toBeInTheDocument();
 
-        userEvent.click(showLessButton);
+        await user.click(showLessButton);
         showLessButton = screen.queryByRole('button', { name: 'Show Less' });
         expect(showLessButton).not.toBeInTheDocument();
         showMoreButton = screen.getByRole('button', { name: 'Show More' });
         expect(showMoreButton).toBeInTheDocument();
       });
+
+      it('dismisses message', async () => {
+        expect(screen.getByTestId('alert-container-welcome')).toBeInTheDocument();
+        const dismissButton = screen.queryByRole('button', { name: 'Dismiss' });
+        const expandButton = screen.queryByRole('button', { name: 'Expand all' });
+
+        fireEvent.click(dismissButton);
+
+        expect(expandButton).toHaveFocus();
+
+        expect(screen.queryByText('Welcome Message')).toBeNull();
+      });
+    });
+
+    it('ignores comments and misformatted HTML', async () => {
+      setTabData({
+        welcome_message_html: '<p class="additional-spaces-in-tag"   >'
+      + '<!-- Even if the welcome_message_html length is above the limit because of comments, we hope it will not be shortened. -->'
+      + '<!-- Even if the welcome_message_html length is above the limit because of comments, we hope it will not be shortened. -->'
+      + 'Test welcome message that happens to be longer than one hundred words because of comments but displayed content is less.'
+      + 'It should not be shortened.'
+      + '<!-- Even if the welcome_message_html length is above the limit because of comments, we hope it will not be shortened. -->'
+      + '<!-- Even if the welcome_message_html length is above the limit because of comments, we hope it will not be shortened. -->'
+      + '</p>',
+      });
+      await fetchAndRender();
+      const showMoreButton = screen.queryByRole('button', { name: 'Show More' });
+      expect(showMoreButton).not.toBeInTheDocument();
     });
 
     it('does not display if no update available', async () => {
@@ -1269,5 +1309,97 @@ describe('Outline Tab', () => {
       await waitFor(() => expect(axiosMock.history.post).toHaveLength(1));
       expect(axiosMock.history.post[0].url).toEqual(resendEmailUrl);
     });
+
+    it('section should show hidden from toc message when hide_from_toc is true', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: true,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSectionNode = screen.getByTestId('hide-from-toc-section-icon');
+      const textHiddenFromTocSectionNode = screen.getByTestId('hide-from-toc-section-text');
+      expect(iconHiddenFromTocSectionNode).toBeInTheDocument();
+      expect(textHiddenFromTocSectionNode).toBeInTheDocument();
+      expect(textHiddenFromTocSectionNode.textContent).toBe('Hidden in Course Outline, accessible via link');
+    });
+
+    it('section should not show hidden from toc message when hide_from_toc is false', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: false,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSectionNode = screen.queryByTestId('hide-from-toc-section-icon');
+      const textHiddenFromTocSectionNode = screen.queryByTestId('hide-from-toc-section-text');
+
+      expect(iconHiddenFromTocSectionNode).not.toBeInTheDocument();
+      expect(textHiddenFromTocSectionNode).not.toBeInTheDocument();
+    });
+
+    it('sequence link should show hidden from toc message when hide_from_toc is true', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: true,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSequenceLinkNode = screen.getByTestId('hide-from-toc-sequence-link-icon');
+      const textHiddenFromTocSequenceLink = screen.getByTestId('hide-from-toc-sequence-link-text');
+      expect(iconHiddenFromTocSequenceLinkNode).toBeInTheDocument();
+      expect(textHiddenFromTocSequenceLink).toBeInTheDocument();
+      expect(textHiddenFromTocSequenceLink.textContent).toBe('Subsections are not navigable between each other, they can only be accessed through their link.');
+    });
+
+    it('sequence link not show hidden from toc message when hide_from_toc is false', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: false,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSequenceLink = screen.queryByTestId('hide-from-toc-sequence-link-icon');
+      const textHiddenFromTocSequenceLink = screen.queryByTestId('hide-from-toc-sequence-link-text');
+
+      expect(iconHiddenFromTocSequenceLink).not.toBeInTheDocument();
+      expect(textHiddenFromTocSequenceLink).not.toBeInTheDocument();
+    });
   });
 });

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

@@ -1,123 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Collapsible, IconButton } from '@edx/paragon';
-import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
-import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import SequenceLink from './SequenceLink';
-import { useModel } from '../../generic/model-store';
-
-import genericMessages from '../../generic/messages';
-import messages from './messages';
-
-const Section = ({
-  courseId,
-  defaultOpen,
-  expand,
-  intl,
-  section,
-}) => {
-  const {
-    complete,
-    sequenceIds,
-    title,
-  } = section;
-  const {
-    courseBlocks: {
-      sequences,
-    },
-  } = useModel('outline', courseId);
-
-  const [open, setOpen] = useState(defaultOpen);
-
-  useEffect(() => {
-    setOpen(expand);
-  }, [expand]);
-
-  useEffect(() => {
-    setOpen(defaultOpen);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const sectionTitle = (
-    <div className="row w-100 m-0">
-      <div className="col-auto p-0">
-        {complete ? (
-          <FontAwesomeIcon
-            icon={fasCheckCircle}
-            fixedWidth
-            className="float-left mt-1 text-success"
-            aria-hidden="true"
-            title={intl.formatMessage(messages.completedSection)}
-          />
-        ) : (
-          <FontAwesomeIcon
-            icon={farCheckCircle}
-            fixedWidth
-            className="float-left mt-1 text-gray-400"
-            aria-hidden="true"
-            title={intl.formatMessage(messages.incompleteSection)}
-          />
-        )}
-      </div>
-      <div className="col-10 ml-3 p-0 font-weight-bold text-dark-500">
-        <span className="align-middle">{title}</span>
-        <span className="sr-only">
-          , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
-        </span>
-      </div>
-    </div>
-  );
-
-  return (
-    <li>
-      <Collapsible
-        className="mb-2"
-        styling="card-lg"
-        title={sectionTitle}
-        open={open}
-        onToggle={() => { setOpen(!open); }}
-        iconWhenClosed={(
-          <IconButton
-            alt={intl.formatMessage(messages.openSection)}
-            icon={faPlus}
-            onClick={() => { setOpen(true); }}
-            size="sm"
-          />
-        )}
-        iconWhenOpen={(
-          <IconButton
-            alt={intl.formatMessage(genericMessages.close)}
-            icon={faMinus}
-            onClick={() => { setOpen(false); }}
-            size="sm"
-          />
-        )}
-      >
-        <ol className="list-unstyled">
-          {sequenceIds.map((sequenceId, index) => (
-            <SequenceLink
-              key={sequenceId}
-              id={sequenceId}
-              courseId={courseId}
-              sequence={sequences[sequenceId]}
-              first={index === 0}
-            />
-          ))}
-        </ol>
-      </Collapsible>
-    </li>
-  );
-};
-
-Section.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  defaultOpen: PropTypes.bool.isRequired,
-  expand: PropTypes.bool.isRequired,
-  intl: intlShape.isRequired,
-  section: PropTypes.shape().isRequired,
-};
-
-export default injectIntl(Section);

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

@@ -1,135 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Link } from 'react-router-dom';
-import {
-  FormattedMessage,
-  FormattedTime,
-  injectIntl,
-  intlShape,
-} from '@edx/frontend-platform/i18n';
-import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-icons';
-import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import EffortEstimate from '../../shared/effort-estimate';
-import { useModel } from '../../generic/model-store';
-import messages from './messages';
-
-const SequenceLink = ({
-  id,
-  intl,
-  courseId,
-  first,
-  sequence,
-}) => {
-  const {
-    complete,
-    description,
-    due,
-    showLink,
-    title,
-  } = sequence;
-  const {
-    userTimezone,
-  } = useModel('outline', courseId);
-
-  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
-
-  const coursewareUrl = <Link to={`/course/${courseId}/${id}`}>{title}</Link>;
-  const displayTitle = showLink ? coursewareUrl : title;
-
-  const dueDateMessage = (
-    <FormattedMessage
-      id="learning.outline.sequence-due-date-set"
-      defaultMessage="{description} due {assignmentDue}"
-      description="Used below an assignment title"
-      values={{
-        assignmentDue: (
-          <FormattedTime
-            key={`${id}-due`}
-            day="numeric"
-            month="short"
-            year="numeric"
-            timeZoneName="short"
-            value={due}
-            {...timezoneFormatArgs}
-          />
-        ),
-        description: description || '',
-      }}
-    />
-  );
-
-  const noDueDateMessage = (
-    <FormattedMessage
-      id="learning.outline.sequence-due-date-not-set"
-      defaultMessage="{description}"
-      description="Used below an assignment title"
-      values={{
-        assignmentDue: (
-          <FormattedTime
-            key={`${id}-due`}
-            day="numeric"
-            month="short"
-            year="numeric"
-            timeZoneName="short"
-            value={due}
-            {...timezoneFormatArgs}
-          />
-        ),
-        description: description || '',
-      }}
-    />
-  );
-
-  return (
-    <li>
-      <div className={classNames('', { 'mt-2 pt-2 border-top border-light': !first })}>
-        <div className="row w-100 m-0">
-          <div className="col-auto p-0">
-            {complete ? (
-              <FontAwesomeIcon
-                icon={fasCheckCircle}
-                fixedWidth
-                className="float-left text-success mt-1"
-                aria-hidden="true"
-                title={intl.formatMessage(messages.completedAssignment)}
-              />
-            ) : (
-              <FontAwesomeIcon
-                icon={farCheckCircle}
-                fixedWidth
-                className="float-left text-gray-400 mt-1"
-                aria-hidden="true"
-                title={intl.formatMessage(messages.incompleteAssignment)}
-              />
-            )}
-          </div>
-          <div className="col-10 p-0 ml-3 text-break">
-            <span className="align-middle">{displayTitle}</span>
-            <span className="sr-only">
-              , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
-            </span>
-            <EffortEstimate className="ml-3 align-middle" block={sequence} />
-          </div>
-        </div>
-        <div className="row w-100 m-0 ml-3 pl-3">
-          <small className="text-body pl-2">
-            {due ? dueDateMessage : noDueDateMessage}
-          </small>
-        </div>
-      </div>
-    </li>
-  );
-};
-
-SequenceLink.propTypes = {
-  id: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
-  courseId: PropTypes.string.isRequired,
-  first: PropTypes.bool.isRequired,
-  sequence: PropTypes.shape().isRequired,
-};
-
-export default injectIntl(SequenceLink);

src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx

@@ -6,7 +6,7 @@ import {
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Alert, Button } from '@edx/paragon';
+import { Alert, Button } from '@openedx/paragon';
 import { useDispatch } from 'react-redux';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

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

@@ -6,8 +6,8 @@ import {
   FormattedRelativeTime,
   FormattedTime,
 } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 
 const DAY_SEC = 24 * 60 * 60; // in seconds
 const DAY_MS = DAY_SEC * 1000; // in ms

src/course-home/outline-tab/alerts/private-course-alert/PrivateCourseAlert.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
-import { Alert, Button, Hyperlink } from '@edx/paragon';
+import { Alert, Button, Hyperlink } from '@openedx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 

src/course-home/outline-tab/alerts/scheduled-content-alert/ScheduledCotentAlert.jsx

@@ -1,5 +1,5 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert, Button } from '@edx/paragon';
+import { Alert, Button } from '@openedx/paragon';
 import React from 'react';
 import PropTypes from 'prop-types';
 

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

@@ -36,6 +36,16 @@ const messages = defineMessages({
     defaultMessage: 'Completed section',
     description: 'Text used to describe the green checkmark icon in front of a section title',
   },
+  hiddenSection: {
+    id: 'learning.outline.hiddenSection',
+    defaultMessage: 'Hidden in Course Outline, accessible via link',
+    description: 'Label for hidden section in course outline',
+  },
+  hiddenSequenceLink: {
+    id: 'learning.outline.hiddenSequenceLink',
+    defaultMessage: 'Subsections are not navigable between each other, they can only be accessed through their link.',
+    description: 'Label for hidden sequence in course outline',
+  },
   dates: {
     id: 'learning.outline.dates',
     defaultMessage: 'Important dates',
@@ -331,6 +341,16 @@ const messages = defineMessages({
     defaultMessage: 'Onboarding Past Due',
     description: 'Text that show when the deadline of proctortrack onboarding exam has passed, it appears on button that start the onboarding exam however for this case the button is disabled for obvious reason',
   },
+  sequenceDueDate: {
+    id: 'learning.outline.sequence-due-date-set',
+    defaultMessage: '{description} due {assignmentDue}',
+    description: 'Used below an assignment title',
+  },
+  sequenceNoDueDate: {
+    id: 'learning.outline.sequence-due-date-not-set',
+    defaultMessage: '{description}',
+    description: 'Used below an assignment title',
+  },
 });
 
 export default messages;

src/course-home/outline-tab/section-outline/HiddenSequenceLink.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import { Block } from '@openedx/paragon/icons';
+
+import messages from '../messages';
+
+interface Props {}
+
+const HiddenSequenceLink: React.FC<Props> = () => {
+  const intl = useIntl();
+
+  return (
+    <div className="row w-100 my-2 mx-4 pl-3">
+      <span className="small d-flex">
+        <Icon className="mr-2" src={Block} data-testid="hide-from-toc-sequence-link-icon" />
+        <span data-testid="hide-from-toc-sequence-link-text">
+          {intl.formatMessage(messages.hiddenSequenceLink)}
+        </span>
+      </span>
+    </div>
+  );
+};
+
+export default HiddenSequenceLink;

src/course-home/outline-tab/section-outline/Section.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Collapsible, IconButton } from '@openedx/paragon';
+import { Minus, Plus } from '@openedx/paragon/icons';
+
+import { useModel } from '../../../generic/model-store';
+import genericMessages from '../../../generic/messages';
+import { useContextId } from '../../../data/hooks';
+import messages from '../messages';
+import SectionTitle from './SectionTitle';
+import SequenceLink from './SequenceLink';
+
+interface Props {
+  defaultOpen: boolean;
+  expand: boolean;
+  section: {
+    complete: boolean;
+    sequenceIds: string[];
+    title: string;
+    hideFromTOC: boolean;
+  };
+}
+
+const Section: React.FC<Props> = ({
+  defaultOpen,
+  expand,
+  section,
+}) => {
+  const intl = useIntl();
+  const courseId = useContextId();
+  const {
+    complete,
+    sequenceIds,
+    title,
+    hideFromTOC,
+  } = section;
+  const {
+    courseBlocks: {
+      sequences,
+    },
+  } = useModel('outline', courseId);
+
+  const [open, setOpen] = useState(defaultOpen);
+
+  useEffect(() => {
+    setOpen(expand);
+  }, [expand]);
+
+  useEffect(() => {
+    setOpen(defaultOpen);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <li>
+      <Collapsible
+        className="mb-2"
+        styling="card-lg"
+        title={<SectionTitle {...{ complete, hideFromTOC, title }} />}
+        open={open}
+        onToggle={() => { setOpen(!open); }}
+        iconWhenClosed={(
+          <IconButton
+            alt={intl.formatMessage(messages.openSection)}
+            iconAs={Plus}
+            onClick={() => { setOpen(true); }}
+            size="sm"
+          />
+        )}
+        iconWhenOpen={(
+          <IconButton
+            alt={intl.formatMessage(genericMessages.close)}
+            iconAs={Minus}
+            onClick={() => { setOpen(false); }}
+            size="sm"
+          />
+        )}
+      >
+        <ol className="list-unstyled">
+          {sequenceIds.map((sequenceId, index) => (
+            <SequenceLink
+              key={sequenceId}
+              id={sequenceId}
+              sequence={sequences[sequenceId]}
+              first={index === 0}
+            />
+          ))}
+        </ol>
+      </Collapsible>
+    </li>
+  );
+};
+
+export default Section;

src/course-home/outline-tab/section-outline/SectionTitle.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import { CheckCircle, CheckCircleOutline, DisabledVisible } from '@openedx/paragon/icons';
+
+import messages from '../messages';
+
+interface Props {
+  complete: boolean;
+  hideFromTOC: boolean;
+  title: string;
+}
+
+const SectionTitle: React.FC<Props> = ({ complete, hideFromTOC, title }) => {
+  const intl = useIntl();
+  return (
+    <div className="d-flex row w-100 m-0">
+      <div className="col-auto p-0">
+        {complete ? (
+          <Icon
+            src={CheckCircle}
+            className="float-left mt-1 text-success"
+            aria-hidden="true"
+            svgAttrs={{ 'aria-label': intl.formatMessage(messages.completedSection) }}
+            size="sm"
+          />
+        ) : (
+          <Icon
+            src={CheckCircleOutline}
+            className="float-left mt-1 text-gray-400"
+            aria-hidden="true"
+            svgAttrs={{ 'aria-label': intl.formatMessage(messages.incompleteSection) }}
+            size="sm"
+          />
+        )}
+      </div>
+      <div className="col-7 ml-3 p-0 font-weight-bold text-dark-500">
+        <span className="align-middle col-6">{title}</span>
+        <span className="sr-only">
+          , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
+        </span>
+      </div>
+      {hideFromTOC && (
+      <div className="row">
+        {hideFromTOC && (
+          <span className="small d-flex align-content-end">
+            <Icon className="mr-2" src={DisabledVisible} data-testid="hide-from-toc-section-icon" />
+            <span data-testid="hide-from-toc-section-text">
+              {intl.formatMessage(messages.hiddenSection)}
+            </span>
+          </span>
+        )}
+      </div>
+      )}
+    </div>
+  );
+};
+
+export default SectionTitle;

src/course-home/outline-tab/section-outline/SequenceDueDate.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { FormattedTime, useIntl } from '@edx/frontend-platform/i18n';
+import { useModel } from '../../../generic/model-store';
+
+import { useContextId } from '../../../data/hooks';
+import messages from '../messages';
+
+interface Props {
+  due: string;
+  id: string;
+  description: string;
+}
+
+const SequenceDueDate: React.FC<Props> = ({
+  due,
+  id,
+  description,
+}) => {
+  const intl = useIntl();
+  const courseId = useContextId();
+  let dueDateMessage: string | React.ReactNode = intl.formatMessage(
+    messages.sequenceNoDueDate,
+    { description: description || '' },
+  );
+  const {
+    userTimezone,
+  } = useModel('outline', courseId);
+
+  if (due) {
+    const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+    dueDateMessage = intl.formatMessage(
+      messages.sequenceDueDate,
+      {
+        assignmentDue: (
+          <FormattedTime
+            key={`${id}-due`}
+            day="numeric"
+            month="short"
+            year="numeric"
+            timeZoneName="short"
+            value={due}
+            {...timezoneFormatArgs}
+          />
+        ),
+        description: description || '',
+      },
+    );
+  }
+
+  return (
+    <div className="row w-100 m-0 ml-3 pl-3">
+      <small className="text-body pl-2">
+        {dueDateMessage}
+      </small>
+    </div>
+  );
+};
+
+export default SequenceDueDate;

src/course-home/outline-tab/section-outline/SequenceLink.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import SequenceDueDate from './SequenceDueDate';
+import HiddenSequenceLink from './HiddenSequenceLink';
+import SequenceTitle from './SequenceTitle';
+
+interface Props {
+  id: string;
+  first: boolean;
+  sequence: {
+    complete: boolean;
+    description: string;
+    due: string;
+    showLink: boolean;
+    title: string;
+    hideFromTOC: boolean;
+  }
+}
+
+const SequenceLink: React.FC<Props> = ({
+  id,
+  first,
+  sequence,
+}) => {
+  const {
+    complete,
+    description,
+    due,
+    showLink,
+    title,
+    hideFromTOC,
+  } = sequence;
+
+  return (
+    <li>
+      <div className={classNames('', { 'mt-2 pt-2 border-top border-light': !first })}>
+        <SequenceTitle
+          {...{
+            complete,
+            showLink,
+            title,
+            sequence,
+            id,
+          }}
+        />
+        {hideFromTOC && (
+          <HiddenSequenceLink />
+        )}
+        <SequenceDueDate {...{ due, id, description }} />
+      </div>
+    </li>
+  );
+};
+
+export default SequenceLink;

src/course-home/outline-tab/section-outline/SequenceTitle.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Link } from 'react-router-dom';
+import { Icon } from '@openedx/paragon';
+import { CheckCircleOutline, CheckCircle } from '@openedx/paragon/icons';
+
+import EffortEstimate from '../../../shared/effort-estimate';
+import messages from '../messages';
+import { useContextId } from '../../../data/hooks';
+
+interface Props {
+  complete: boolean;
+  showLink: boolean;
+  title: string;
+  sequence: object;
+  id: string;
+}
+
+const SequenceTitle: React.FC<Props> = ({
+  complete,
+  showLink,
+  title,
+  sequence,
+  id,
+}) => {
+  const intl = useIntl();
+  const courseId = useContextId();
+  const coursewareUrl = <Link to={`/course/${courseId}/${id}`}>{title}</Link>;
+  const displayTitle = showLink ? coursewareUrl : title;
+
+  return (
+    <div className="row w-100 m-0">
+      <div className="col-auto p-0">
+        {complete ? (
+          <Icon
+            src={CheckCircle}
+            className="float-left text-success mt-1"
+            aria-hidden={complete}
+            svgAttrs={{ 'aria-label': intl.formatMessage(messages.completedAssignment) }}
+            size="sm"
+          />
+        ) : (
+          <Icon
+            src={CheckCircleOutline}
+            className="float-left text-gray-400 mt-1"
+            aria-hidden={complete}
+            svgAttrs={{ 'aria-label': intl.formatMessage(messages.incompleteAssignment) }}
+            size="sm"
+          />
+        )}
+      </div>
+      <div className="col-10 p-0 ml-3 text-break">
+        <span className="align-middle">{displayTitle}</span>
+        <span className="sr-only">
+          , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
+        </span>
+        <EffortEstimate className="ml-3 align-middle" block={sequence} />
+      </div>
+    </div>
+  );
+};
+
+export default SequenceTitle;

src/course-home/outline-tab/widgets/FlagButton.scss

@@ -1,5 +1,5 @@
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 .flag-button {

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

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import camelCase from 'lodash.camelcase';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import messages from '../messages';
 import { getProctoringInfoData } from '../../data/api';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Card } from '@edx/paragon';
+import { Button, Card } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { useSelector } from 'react-redux';

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

@@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import { Form, Card, Icon } from '@edx/paragon';
+import { Form, Card, Icon } from '@openedx/paragon';
 import { history } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Email } from '@edx/paragon/icons';
+import { Email } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 import messages from '../messages';
 import LearningGoalButton from './LearningGoalButton';

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, Button, TransitionReplace } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Alert, Button, TransitionReplace } from '@openedx/paragon';
 import truncate from 'truncate-html';
 
 import { useDispatch } from 'react-redux';
@@ -11,15 +11,31 @@ import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 import { dismissWelcomeMessage } from '../../data/thunks';
 
-const WelcomeMessage = ({ courseId, intl }) => {
+const WelcomeMessage = ({ courseId, nextElementRef }) => {
+  const intl = useIntl();
   const {
     welcomeMessageHtml,
   } = useModel('outline', courseId);
 
+  const messageBodyRef = useRef();
   const [display, setDisplay] = useState(true);
 
-  const shortWelcomeMessageHtml = truncate(welcomeMessageHtml, 100, { byWords: true, keepWhitespaces: true });
-  const messageCanBeShortened = shortWelcomeMessageHtml.length < welcomeMessageHtml.length;
+  // welcomeMessageHtml can contain comments or malformatted HTML which can impact the length that determines
+  // messageCanBeShortened. We clean it by calling truncate with a length of welcomeMessageHtml.length which
+  // will not result in a truncation but a formatting into 'truncate-html' canonical format.
+  const cleanedWelcomeMessageHtml = useMemo(
+    () => truncate(welcomeMessageHtml, welcomeMessageHtml.length, { keepWhitespaces: true }),
+    [welcomeMessageHtml],
+  );
+  const shortWelcomeMessageHtml = useMemo(
+    () => truncate(cleanedWelcomeMessageHtml, 100, { byWords: true, keepWhitespaces: true }),
+    [cleanedWelcomeMessageHtml],
+  );
+  const messageCanBeShortened = useMemo(
+    () => (shortWelcomeMessageHtml.length < cleanedWelcomeMessageHtml.length),
+    [cleanedWelcomeMessageHtml, shortWelcomeMessageHtml],
+  );
+
   const [showShortMessage, setShowShortMessage] = useState(messageCanBeShortened);
   const dispatch = useDispatch();
 
@@ -35,13 +51,20 @@ const WelcomeMessage = ({ courseId, intl }) => {
       dismissible
       show={display}
       onClose={() => {
+        nextElementRef.current?.focus();
         setDisplay(false);
         dispatch(dismissWelcomeMessage(courseId));
       }}
       className="raised-card"
       actions={messageCanBeShortened ? [
         <Button
-          onClick={() => setShowShortMessage(!showShortMessage)}
+          onClick={() => {
+            if (showShortMessage) {
+              messageBodyRef.current?.focus();
+            }
+
+            setShowShortMessage(!showShortMessage);
+          }}
           variant="outline-primary"
         >
           {showShortMessage ? intl.formatMessage(messages.welcomeMessageShowMoreButton)
@@ -49,32 +72,34 @@ const WelcomeMessage = ({ courseId, intl }) => {
         </Button>,
       ] : []}
     >
-      <TransitionReplace className="mb-3" enterDuration={400} exitDuration={200}>
-        {showShortMessage ? (
-          <LmsHtmlFragment
-            className="inline-link"
-            data-testid="short-welcome-message-iframe"
-            key="short-html"
-            html={shortWelcomeMessageHtml}
-            title={intl.formatMessage(messages.welcomeMessage)}
-          />
-        ) : (
-          <LmsHtmlFragment
-            className="inline-link"
-            data-testid="long-welcome-message-iframe"
-            key="full-html"
-            html={welcomeMessageHtml}
-            title={intl.formatMessage(messages.welcomeMessage)}
-          />
-        )}
-      </TransitionReplace>
+      <div ref={messageBodyRef} tabIndex="-1">
+        <TransitionReplace className="mb-3" enterDuration={400} exitDuration={200}>
+          {showShortMessage ? (
+            <LmsHtmlFragment
+              className="inline-link"
+              data-testid="short-welcome-message-iframe"
+              key="short-html"
+              html={shortWelcomeMessageHtml}
+              title={intl.formatMessage(messages.welcomeMessage)}
+            />
+          ) : (
+            <LmsHtmlFragment
+              className="inline-link"
+              data-testid="long-welcome-message-iframe"
+              key="full-html"
+              html={cleanedWelcomeMessageHtml}
+              title={intl.formatMessage(messages.welcomeMessage)}
+            />
+          )}
+        </TransitionReplace>
+      </div>
     </Alert>
   );
 };
 
 WelcomeMessage.propTypes = {
   courseId: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
+  nextElementRef: PropTypes.shape({ current: PropTypes.instanceOf(HTMLInputElement) }),
 };
 
-export default injectIntl(WelcomeMessage);
+export default WelcomeMessage;

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

@@ -1,15 +1,14 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import { useSelector } from 'react-redux';
 
 import { useModel } from '../../generic/model-store';
 
 import messages from './messages';
 
-const ProgressHeader = ({ intl }) => {
+const ProgressHeader = () => {
+  const intl = useIntl();
   const {
     courseId,
     targetUserId,
@@ -37,8 +36,4 @@ const ProgressHeader = ({ intl }) => {
   );
 };
 
-ProgressHeader.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(ProgressHeader);
+export default ProgressHeader;

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

@@ -1,27 +1,20 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { breakpoints, useWindowSize } from '@edx/paragon';
+import { useWindowSize } from '@openedx/paragon';
+import { useContextId } from '../../data/hooks';
+import ProgressTabCertificateStatusSidePanelSlot from '../../plugin-slots/ProgressTabCertificateStatusSidePanelSlot';
 
-import CertificateStatus from './certificate-status/CertificateStatus';
 import CourseCompletion from './course-completion/CourseCompletion';
-import CourseGrade from './grades/course-grade/CourseGrade';
-import DetailedGrades from './grades/detailed-grades/DetailedGrades';
-import GradeSummary from './grades/grade-summary/GradeSummary';
 import ProgressHeader from './ProgressHeader';
-import RelatedLinks from './related-links/RelatedLinks';
 
+import ProgressTabCertificateStatusMainBodySlot from '../../plugin-slots/ProgressTabCertificateStatusMainBodySlot';
+import ProgressTabCourseGradeSlot from '../../plugin-slots/ProgressTabCourseGradeSlot';
+import ProgressTabGradeBreakdownSlot from '../../plugin-slots/ProgressTabGradeBreakdownSlot';
+import ProgressTabRelatedLinksSlot from '../../plugin-slots/ProgressTabRelatedLinksSlot';
 import { useModel } from '../../generic/model-store';
 
 const ProgressTab = () => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
-
-  const {
-    gradesFeatureIsFullyLocked, disableProgressGraph,
-  } = useModel('progress', courseId);
-
-  const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
+  const courseId = useContextId();
+  const { disableProgressGraph } = useModel('progress', courseId);
 
   const windowWidth = useWindowSize().width;
   if (windowWidth === undefined) {
@@ -31,7 +24,6 @@ const ProgressTab = () => {
     return null;
   }
 
-  const wideScreen = windowWidth >= breakpoints.large.minWidth;
   return (
     <>
       <ProgressHeader />
@@ -39,18 +31,15 @@ const ProgressTab = () => {
         {/* Main body */}
         <div className="col-12 col-md-8 p-0">
           {!disableProgressGraph && <CourseCompletion />}
-          {!wideScreen && <CertificateStatus />}
-          <CourseGrade />
-          <div className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
-            <GradeSummary />
-            <DetailedGrades />
-          </div>
+          <ProgressTabCertificateStatusMainBodySlot />
+          <ProgressTabCourseGradeSlot />
+          <ProgressTabGradeBreakdownSlot />
         </div>
 
         {/* Side panel */}
         <div className="col-12 col-md-4 p-0 px-md-4">
-          {wideScreen && <CertificateStatus />}
-          <RelatedLinks />
+          <ProgressTabCertificateStatusSidePanelSlot />
+          <ProgressTabRelatedLinksSlot />
         </div>
       </div>
     </>

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Factory } from 'rosie';
-import { getConfig } from '@edx/frontend-platform';
+import { getConfig, setConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { breakpoints } from '@edx/paragon';
+import { breakpoints } from '@openedx/paragon';
 import MockAdapter from 'axios-mock-adapter';
 
 import {
@@ -111,7 +111,7 @@ describe('Progress Tab', () => {
       await fetchAndRender();
       sendTrackEvent.mockClear();
 
-      const outlineTabLink = screen.getAllByRole('link', { name: 'Course Outline' });
+      const outlineTabLink = screen.getAllByRole('link', { name: 'Course outline' });
       fireEvent.click(outlineTabLink[1]); // outlineTabLink[0] corresponds to the link in the DetailedGrades component
 
       expect(sendTrackEvent).toHaveBeenCalledTimes(1);
@@ -471,9 +471,12 @@ describe('Progress Tab', () => {
       await fetchAndRender();
       expect(screen.getByText('limited feature')).toBeInTheDocument();
       expect(screen.getByText('Unlock to work towards a certificate.')).toBeInTheDocument();
-      expect(screen.queryAllByText('You have limited access to graded assignments as part of the audit track in this course.')).toHaveLength(2);
+      expect(screen.queryAllByText(
+        'You have limited access to graded assignments as part of the audit track in this course.',
+        { exact: false },
+      )).toHaveLength(2);
 
-      expect(screen.queryAllByTestId('blocked-icon')).toHaveLength(4);
+      expect(screen.queryAllByTestId('locked-icon')).toHaveLength(4);
     });
 
     it('does not render subsections for which showGrades is false', async () => {
@@ -545,6 +548,111 @@ describe('Progress Tab', () => {
       await fetchAndRender();
       expect(screen.getByText('Grades & Credit')).toBeInTheDocument();
     });
+
+    it('does not render ungraded subsections when SHOW_UNGRADED_ASSIGNMENT_PROGRESS is false', async () => {
+      // The second assignment has has_graded_assignment set to false, so it should not be shown.
+      setTabData({
+        section_scores: [
+          {
+            display_name: 'First section',
+            subsections: [
+              {
+                assignment_type: 'Homework',
+                block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+                display_name: 'First subsection',
+                learner_has_access: true,
+                has_graded_assignment: true,
+                num_points_earned: 1,
+                num_points_possible: 2,
+                percent_graded: 1.0,
+                show_correctness: 'always',
+                show_grades: true,
+                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+              },
+            ],
+          },
+          {
+            display_name: 'Second section',
+            subsections: [
+              {
+                assignment_type: 'Homework',
+                display_name: 'Second subsection',
+                learner_has_access: true,
+                has_graded_assignment: false,
+                num_points_earned: 1,
+                num_points_possible: 1,
+                percent_graded: 1.0,
+                show_correctness: 'always',
+                show_grades: true,
+                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection',
+              },
+            ],
+          },
+        ],
+      });
+
+      await fetchAndRender();
+      expect(screen.getByText('First subsection')).toBeInTheDocument();
+      expect(screen.queryByText('Second subsection')).not.toBeInTheDocument();
+    });
+
+    it('renders both graded and ungraded subsections when SHOW_UNGRADED_ASSIGNMENT_PROGRESS is true', async () => {
+      // The second assignment has has_graded_assignment set to false.
+      setConfig({
+        ...getConfig(),
+        SHOW_UNGRADED_ASSIGNMENT_PROGRESS: true,
+      });
+
+      setTabData({
+        section_scores: [
+          {
+            display_name: 'First section',
+            subsections: [
+              {
+                assignment_type: 'Homework',
+                block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+                display_name: 'First subsection',
+                learner_has_access: true,
+                has_graded_assignment: true,
+                num_points_earned: 1,
+                num_points_possible: 2,
+                percent_graded: 1.0,
+                show_correctness: 'always',
+                show_grades: true,
+                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+              },
+            ],
+          },
+          {
+            display_name: 'Second section',
+            subsections: [
+              {
+                assignment_type: 'Homework',
+                display_name: 'Second subsection',
+                learner_has_access: true,
+                has_graded_assignment: false,
+                num_points_earned: 1,
+                num_points_possible: 1,
+                percent_graded: 1.0,
+                show_correctness: 'always',
+                show_grades: true,
+                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection',
+              },
+            ],
+          },
+        ],
+      });
+
+      await fetchAndRender();
+      expect(screen.getByText('First subsection')).toBeInTheDocument();
+      expect(screen.getByText('Second subsection')).toBeInTheDocument();
+
+      // reset config for other tests
+      setConfig({
+        ...getConfig(),
+        SHOW_UNGRADED_ASSIGNMENT_PROGRESS: false,
+      });
+    });
   });
 
   describe('Grade Summary', () => {
@@ -788,7 +896,7 @@ describe('Progress Tab', () => {
       sendTrackEvent.mockClear();
       expect(screen.getByText('Detailed grades')).toBeInTheDocument();
 
-      const outlineLink = screen.getAllByRole('link', { name: 'Course Outline' })[0];
+      const outlineLink = screen.getAllByRole('link', { name: 'Course outline' })[0];
       fireEvent.click(outlineLink);
 
       expect(sendTrackEvent).toHaveBeenCalledTimes(1);
@@ -809,7 +917,7 @@ describe('Progress Tab', () => {
 
       // Open the problem score drawer
       fireEvent.click(problemScoreDrawerToggle);
-      expect(screen.getByText('Problem Scores:')).toBeInTheDocument();
+      expect(screen.getAllByText('Graded Scores:').length).toBeGreaterThan(1);
       expect(screen.getAllByText('0/1')).toHaveLength(3);
     });
 
@@ -821,6 +929,14 @@ describe('Progress Tab', () => {
       expect(screen.getByText('Detailed grades')).toBeInTheDocument();
       expect(screen.getByText('You currently have no graded problem scores.')).toBeInTheDocument();
     });
+
+    it('renders Detailed Grades table when section scores are populated', async () => {
+      await fetchAndRender();
+      expect(screen.getByText('Detailed grades')).toBeInTheDocument();
+
+      expect(screen.getByText('First subsection'));
+      expect(screen.getByText('Second subsection'));
+    });
   });
 
   describe('Certificate Status', () => {

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

@@ -1,23 +1,26 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import {
-  FormattedDate, FormattedMessage, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
-import { Button, Card } from '@edx/paragon';
+import { Button, Card } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
+import { useContextId } from '../../../data/hooks';
 import { useModel } from '../../../generic/model-store';
 import { COURSE_EXIT_MODES, getCourseExitMode } from '../../../courseware/course/course-exit/utils';
 import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
 import { requestCert } from '../../data/thunks';
 import messages from './messages';
+import ProgressCertificateStatusSlot from '../../../plugin-slots/ProgressCertificateStatusSlot';
+
+const CertificateStatus = () => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
-const CertificateStatus = ({ intl }) => {
   const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+    entranceExamData,
+  } = useModel('coursewareMeta', courseId);
 
   const {
     isEnrolled,
@@ -42,6 +45,8 @@ const CertificateStatus = ({ intl }) => {
     certificateAvailableDate,
   } = certificateData || {};
 
+  const entranceExamPassed = entranceExamData?.entranceExamPassed ?? null;
+
   const mode = getCourseExitMode(
     certificateData,
     hasScheduledContent,
@@ -49,6 +54,7 @@ const CertificateStatus = ({ intl }) => {
     userHasPassingGrade,
     null, // CourseExitPageIsActive
     canViewCertificate,
+    entranceExamPassed,
   );
 
   const eventProperties = {
@@ -154,7 +160,7 @@ const CertificateStatus = ({ intl }) => {
         certAvailabilityDate = <FormattedDate value={certificateAvailableDate} day="numeric" month="long" year="numeric" />;
         body = (
           <FormattedMessage
-            id="courseCelebration.certificateBody.notAvailable.endDate"
+            id="progress.certificateStatus.notAvailable.endDate"
             defaultMessage="This course ends on {endDate}. Final grades and any earned certificates are
             scheduled to be available after {certAvailabilityDate}."
             description="This shown for leaner when they are eligible for certifcate but it't not available yet, it could because leaners just finished the course quickly!"
@@ -208,7 +214,6 @@ const CertificateStatus = ({ intl }) => {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
   if (!certCase) {
     return null;
   }
@@ -236,32 +241,32 @@ const CertificateStatus = ({ intl }) => {
   return (
     <section data-testid="certificate-status-component" className="text-dark-700 mb-4">
       <Card className="bg-light-200 raised-card">
-        <Card.Header title={header} />
-        <Card.Section className="small text-gray-700">
-          {body}
-        </Card.Section>
-        <Card.Footer>
-          {buttonText && (buttonLocation || buttonAction) && (
-            <Button
-              variant="outline-brand"
-              onClick={() => {
-                logCertificateStatusButtonClicked(certStatus);
-                if (buttonAction) { buttonAction(); }
-              }}
-              href={buttonLocation}
-              block
-            >
-              {buttonText}
-            </Button>
-          )}
-        </Card.Footer>
+        <ProgressCertificateStatusSlot courseId={courseId}>
+          <div id={`${certCase}_certificate_status`}>
+            <Card.Header title={header} />
+            <Card.Section className="small text-gray-700">
+              {body}
+            </Card.Section>
+            <Card.Footer>
+              {buttonText && (buttonLocation || buttonAction) && (
+                <Button
+                  variant="outline-brand"
+                  onClick={() => {
+                    logCertificateStatusButtonClicked(certStatus);
+                    if (buttonAction) { buttonAction(); }
+                  }}
+                  href={buttonLocation}
+                  block
+                >
+                  {buttonText}
+                </Button>
+              )}
+            </Card.Footer>
+          </div>
+        </ProgressCertificateStatusSlot>
       </Card>
     </section>
   );
 };
 
-CertificateStatus.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CertificateStatus);
+export default CertificateStatus;

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

@@ -56,11 +56,6 @@ const messages = defineMessages({
     defaultMessage: 'Your certificate is available!',
     description: 'Header text when the certifcate is available',
   },
-  downloadableBody: {
-    id: 'progress.certificateStatus.downloadableBody',
-    defaultMessage: 'Showcase your accomplishment on LinkedIn or your resumé today. You can download your certificate now and access it any time from your Dashboard and Profile.',
-    description: 'Recommending an action for learner when course certificate is available',
-  },
   viewableButton: {
     id: 'progress.certificateStatus.viewableButton',
     defaultMessage: 'View my certificate',

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

@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { OverlayTrigger, Popover } from '@openedx/paragon';
 
 import messages from './messages';
 
-const CompleteDonutSegment = ({ completePercentage, intl, lockedPercentage }) => {
+const CompleteDonutSegment = ({ completePercentage, lockedPercentage }) => {
+  const intl = useIntl();
   const [showCompletePopover, setShowCompletePopover] = useState(false);
 
   if (!completePercentage) {
@@ -33,7 +34,7 @@ const CompleteDonutSegment = ({ completePercentage, intl, lockedPercentage }) =>
         show={showCompletePopover}
         placement="top"
         overlay={(
-          <Popover aria-hidden="true">
+          <Popover id="complete-content-tooltip-popover" aria-hidden="true">
             <Popover.Content>
               {intl.formatMessage(messages.completeContentTooltip)}
             </Popover.Content>
@@ -82,8 +83,7 @@ const CompleteDonutSegment = ({ completePercentage, intl, lockedPercentage }) =>
 
 CompleteDonutSegment.propTypes = {
   completePercentage: PropTypes.number.isRequired,
-  intl: intlShape.isRequired,
   lockedPercentage: PropTypes.number.isRequired,
 };
 
-export default injectIntl(CompleteDonutSegment);
+export default CompleteDonutSegment;

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

@@ -1,8 +1,5 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import {
-  getLocale, injectIntl, intlShape, isRtl,
-} from '@edx/frontend-platform/i18n';
+import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
+import { useContextId } from '../../../data/hooks';
 import { useModel } from '../../../generic/model-store';
 
 import CompleteDonutSegment from './CompleteDonutSegment';
@@ -10,10 +7,9 @@ import IncompleteDonutSegment from './IncompleteDonutSegment';
 import LockedDonutSegment from './LockedDonutSegment';
 import messages from './messages';
 
-const CompletionDonutChart = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const CompletionDonutChart = () => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
     completionSummary: {
@@ -62,8 +58,4 @@ const CompletionDonutChart = ({ intl }) => {
   );
 };
 
-CompletionDonutChart.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CompletionDonutChart);
+export default CompletionDonutChart;

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

@@ -1,27 +1,26 @@
-import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import CompletionDonutChart from './CompletionDonutChart';
 import messages from './messages';
 
-const CourseCompletion = ({ intl }) => (
-  <section className="text-dark-700 mb-4 rounded raised-card p-4">
-    <div className="row w-100 m-0">
-      <div className="col-12 col-sm-6 col-md-7 p-0">
-        <h2>{intl.formatMessage(messages.courseCompletion)}</h2>
-        <p className="small">
-          {intl.formatMessage(messages.completionBody)}
-        </p>
-      </div>
-      <div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
-        <CompletionDonutChart />
-      </div>
-    </div>
-  </section>
-);
+const CourseCompletion = () => {
+  const intl = useIntl();
 
-CourseCompletion.propTypes = {
-  intl: intlShape.isRequired,
+  return (
+    <section className="text-dark-700 mb-4 rounded raised-card p-4">
+      <div className="row w-100 m-0">
+        <div className="col-12 col-sm-6 col-md-7 p-0">
+          <h2>{intl.formatMessage(messages.courseCompletion)}</h2>
+          <p className="small">
+            {intl.formatMessage(messages.completionBody)}
+          </p>
+        </div>
+        <div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
+          <CompletionDonutChart />
+        </div>
+      </div>
+    </section>
+  );
 };
 
-export default injectIntl(CourseCompletion);
+export default CourseCompletion;

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

@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { OverlayTrigger, Popover } from '@openedx/paragon';
 
 import messages from './messages';
 
-const IncompleteDonutSegment = ({ incompletePercentage, intl }) => {
+const IncompleteDonutSegment = ({ incompletePercentage }) => {
+  const intl = useIntl();
   const [showIncompletePopover, setShowIncompletePopover] = useState(false);
 
   if (!incompletePercentage) {
@@ -37,7 +38,7 @@ const IncompleteDonutSegment = ({ incompletePercentage, intl }) => {
         show={showIncompletePopover}
         placement="top"
         overlay={(
-          <Popover aria-hidden="true">
+          <Popover id="incomplete-tooltip-popover" aria-hidden="true">
             <Popover.Content>
               {intl.formatMessage(messages.incompleteContentTooltip)}
             </Popover.Content>
@@ -53,7 +54,6 @@ const IncompleteDonutSegment = ({ incompletePercentage, intl }) => {
 
 IncompleteDonutSegment.propTypes = {
   incompletePercentage: PropTypes.number.isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(IncompleteDonutSegment);
+export default IncompleteDonutSegment;

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

@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { OverlayTrigger, Popover } from '@edx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { OverlayTrigger, Popover } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 
-const LockedDonutSegment = ({ intl, lockedPercentage }) => {
+const LockedDonutSegment = ({ lockedPercentage }) => {
+  const intl = useIntl();
   const [showLockedPopover, setShowLockedPopover] = useState(false);
 
   if (!lockedPercentage) {
@@ -36,7 +37,7 @@ const LockedDonutSegment = ({ intl, lockedPercentage }) => {
         show={showLockedPopover}
         placement="top"
         overlay={(
-          <Popover aria-hidden="true">
+          <Popover id="locked-tooltip-popover" aria-hidden="true">
             <Popover.Content>
               {intl.formatMessage(messages.lockedContentTooltip)}
             </Popover.Content>
@@ -65,8 +66,7 @@ const LockedDonutSegment = ({ intl, lockedPercentage }) => {
 };
 
 LockedDonutSegment.propTypes = {
-  intl: intlShape.isRequired,
   lockedPercentage: PropTypes.number.isRequired,
 };
 
-export default injectIntl(LockedDonutSegment);
+export default LockedDonutSegment;

src/course-home/progress-tab/credit-information/CreditInformation.jsx

@@ -1,19 +1,17 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { CheckCircle, WarningFilled, WatchFilled } from '@edx/paragon/icons';
-import { Hyperlink, Icon } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { CheckCircle, WarningFilled, WatchFilled } from '@openedx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';
+import { useContextId } from '../../../data/hooks';
 
 import { useModel } from '../../../generic/model-store';
 import { DashboardLink } from '../../../shared/links';
 
 import messages from './messages';
 
-const CreditInformation = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const CreditInformation = () => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
     creditCourseRequirements,
@@ -36,36 +34,13 @@ const CreditInformation = ({ intl }) => {
 
   switch (creditCourseRequirements.eligibilityStatus) {
     case 'not_eligible':
-      eligibilityStatus = (
-        <FormattedMessage
-          id="progress.creditInformation.creditNotEligible"
-          defaultMessage="You are no longer eligible for credit in this course. Learn more about {creditLink}."
-          description="Message to learner who are not eligible for course credit, it can because the a requirement deadline have passed"
-          values={{ creditLink }}
-        />
-      );
+      eligibilityStatus = intl.formatMessage(messages.creditNotEligibleStatus, { creditLink });
       break;
     case 'eligible':
-      eligibilityStatus = (
-        <FormattedMessage
-          id="progress.creditInformation.creditEligible"
-          defaultMessage="
-          You have met the requirements for credit in this course. Go to your
-          {dashboardLink} to purchase course credit. Or learn more about {creditLink}."
-          description="After the credit requirements are met, leaners can then do the last step which purchasing the credit. Note that is only doable for leaners after they met all the requirements"
-          values={{ dashboardLink, creditLink }}
-        />
-      );
+      eligibilityStatus = intl.formatMessage(messages.creditEligibleStatus, { dashboardLink, creditLink });
       break;
     case 'partial_eligible':
-      eligibilityStatus = (
-        <FormattedMessage
-          id="progress.creditInformation.creditPartialEligible"
-          defaultMessage="You have not yet met the requirements for credit. Learn more about {creditLink}."
-          description="This means that one or more requirements is not satisfied yet"
-          values={{ creditLink }}
-        />
-      );
+      eligibilityStatus = intl.formatMessage(messages.creditPartialEligibleStatus, { creditLink });
       break;
     default:
       break;
@@ -108,8 +83,4 @@ const CreditInformation = ({ intl }) => {
   );
 };
 
-CreditInformation.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CreditInformation);
+export default CreditInformation;

src/course-home/progress-tab/credit-information/messages.ts

@@ -35,6 +35,22 @@ const messages = defineMessages({
     defaultMessage: 'Verification submitted',
     description: 'It indicate that the learner submitted a requirement but is not graded or reviewed yet',
   },
+  creditNotEligibleStatus: {
+    id: 'progress.creditInformation.creditNotEligible',
+    defaultMessage: 'You are no longer eligible for credit in this course. Learn more about {creditLink}.',
+    description: 'Message to learner who are not eligible for course credit, it can be that a requirement deadline has passed',
+  },
+  creditEligibleStatus: {
+    id: 'progress.creditInformation.creditEligible',
+    defaultMessage: `You have met the requirements for credit in this course. Go to your
+      {dashboardLink} to purchase course credit. Or learn more about {creditLink}.`,
+    description: 'After the credit requirements are met, leaners can then do the last step which purchasing the credit. Note that is only doable for leaners after they met all the requirements',
+  },
+  creditPartialEligibleStatus: {
+    id: 'progress.creditInformation.creditPartialEligible',
+    defaultMessage: 'You have not yet met the requirements for credit. Learn more about {creditLink}.',
+    description: 'This means that one or more requirements is not satisfied yet',
+  },
 });
 
 export default messages;