fix: iframe height for discussions sidebar (#1404 )

* fix: iframe height for discussions sidebar * fix: increase adaptation brakepoint
feat!: organize plugin slots as components, add footer slot (#1408 )
2024-08-08 15:50:19 -04:00 · 2024-06-06 15:06:54 -03:00 · 2024-06-06 09:09:09 -03:00 · 2024-05-30 13:28:07 -03:00 · 2024-05-07 13:02:06 -03:00 · 2024-04-30 19:09:17 +05:00
249 changed files with 10332 additions and 12434 deletions
--- a/.env
+++ b/.env
@@ -13,7 +13,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=''
--- a/.env.development
+++ b/.env.development
@@ -13,7 +13,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=''
--- a/.env.test
+++ b/.env.test
@@ -13,7 +13,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'
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,3 +3,5 @@ dist/
 packages/
 node_modules/
 jest.config.js
+env.config.jsx
+example.env.config.jsx
--- a/.eslintrc.js
+++ b/.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;
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -18,6 +18,7 @@ jobs:
        node-version: ${{ env.NODE_VER }}
    - run: make validate.ci
    - name: Upload coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
      with:
        fail_ci_if_error: true
+        token: ${{ secrets.CODECOV_TOKEN }}
--- a/.gitignore
+++ b/.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
--- a/.tx/config
+++ b/.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
-
--- a/39
+++ b/39
@@ -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,35 +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 --filter=$(transifex_langs) \
-               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-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

-	$(intl_imports) paragon frontend-component-header frontend-component-footer frontend-app-learning
-endif

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -1,6 +1,6 @@
 #####################
 frontend-app-learning
-######################
+#####################

 |codecov| |license|

@@ -84,10 +84,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,6 +100,12 @@ 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
 ======================

--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -0,0 +1,18 @@
+# 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: ""
+spec:
+  owner: group:2u-aurora
+  type: 'website'
+  lifecycle: 'production'
--- a/example.env.config.jsx
+++ b/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;
--- a/jest.config.js
+++ b/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',
  ],
@@ -14,8 +14,30 @@ module.exports = createConfig('jest', {
    "^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',
  },
  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;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,10 +11,11 @@
  ],
  "scripts": {
    "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
    "prepare": "husky install",
+    "postinstall": "patch-package",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
    "test": "fedx-scripts jest --coverage --passWithNoTests"
@@ -30,18 +31,20 @@
  },
  "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.26.0",
-    "@edx/frontend-lib-learning-assistant": "^1.19.0",
-    "@edx/frontend-platform": "5.5.2",
-    "@edx/paragon": "20.46.0",
-    "@edx/react-unit-test-utils": "npm:@edx/react-unit-test-utils@1.7.0",
+    "@edx/frontend-component-header": "^5.0.2",
+    "@edx/frontend-lib-learning-assistant": "^2.0.0",
+    "@edx/frontend-lib-special-exams": "^3.0.1",
+    "@edx/frontend-platform": "^7.1.2",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/react-unit-test-utils": "^2.0.0",
    "@fortawesome/fontawesome-svg-core": "1.3.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-plugin-framework": "^1.1.2",
+    "@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",
@@ -67,8 +70,8 @@
  },
  "devDependencies": {
    "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "^12.9.10",
    "@edx/reactifex": "2.2.0",
+    "@openedx/frontend-build": "13.1.4",
    "@pact-foundation/pact": "^11.0.2",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "12.1.5",
@@ -77,8 +80,17 @@
    "axios-mock-adapter": "1.20.0",
    "copy-webpack-plugin": "^11.0.0",
    "es-check": "6.2.1",
+    "eslint-import-resolver-webpack": "^0.13.8",
    "husky": "7.0.4",
-    "jest": "29.5.0",
-    "rosie": "2.1.1"
+    "jest": "^26.6.3",
+    "jest-console-group-reporter": "^1.0.1",
+    "jest-when": "^3.6.0",
+    "patch-package": "^8.0.0",
+    "postcss-loader": "^8.1.1",
+    "rosie": "2.1.1",
+    "sass": "^1.72.0",
+    "sass-loader": "^14.1.1",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^3.3.4"
  }
 }
--- a/patches/@openedx+frontend-build+13.0.30.patch
+++ b/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'),
--- a/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
+++ b/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';

--- a/src/alerts/access-expiration-alert/AccessExpirationMasqueradeBanner.jsx
+++ b/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 {
--- a/src/alerts/active-enteprise-alert/ActiveEnterpriseAlert.jsx
+++ b/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';
--- a/src/alerts/course-start-alert/CourseStartAlert.jsx
+++ b/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';

--- a/src/alerts/course-start-alert/CourseStartMasqueradeBanner.jsx
+++ b/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';

--- a/src/alerts/enrollment-alert/EnrollmentAlert.jsx
+++ b/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';
--- a/src/alerts/logistration-alert/AccountActivationAlert.jsx
+++ b/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';
--- a/src/alerts/logistration-alert/LogistrationAlert.jsx
+++ b/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';

--- a/src/constants.js
+++ b/src/constants.js
@@ -33,3 +33,19 @@ export const REDIRECT_MODES = {
  HOME_REDIRECT: 'home-redirect',
  SURVEY_REDIRECT: 'survey-redirect',
 };
+
+export const VERIFIED_MODES = [
+  'professional',
+  'verified',
+  'no-id-professional',
+  'credit',
+  'masters',
+  'executive-education',
+  'paid-executive-education',
+  'paid-bootcamp',
+];
+
+export const WIDGETS = {
+  DISCUSSIONS: 'DISCUSSIONS',
+  NOTIFICATIONS: 'NOTIFICATIONS',
+};
--- a/src/course-home/courseware-search/CoursewareResultsFilter.jsx
+++ b/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
@@ -54,7 +64,7 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
      activeKey={activeKey}
      onSelect={setFilter}
    >
-      {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>
--- a/src/course-home/courseware-search/CoursewareResultsFilter.test.jsx
+++ b/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();
    });
  });
 });
--- a/src/course-home/courseware-search/CoursewareSearch.jsx
+++ b/src/course-home/courseware-search/CoursewareSearch.jsx
@@ -5,10 +5,10 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } 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';
@@ -103,7 +103,7 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
      </div>
      <div className="courseware-search__outer-content">
        <div className="courseware-search__content">
-          <h1 class="h2">{intl.formatMessage(messages.searchModuleTitle)}</h1>
+          <h1 className="h2">{intl.formatMessage(messages.searchModuleTitle)}</h1>
          <CoursewareSearchForm
            searchTerm={searchKeyword}
            onSubmit={handleSubmit}
@@ -122,16 +122,16 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
          )}
          {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>
+              {total > 0 ? (
+                <div
+                  className="courseware-search__results-summary"
+                  aria-live="polite"
+                  aria-relevant="all"
+                  aria-atomic="true"
+                  data-testid="courseware-search-summary"
+                >{intl.formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
+                </div>
+              ) : null}
              <CoursewareSearchResultsFilterContainer />
            </>
          ) : null}
--- a/src/course-home/courseware-search/CoursewareSearch.test.jsx
+++ b/src/course-home/courseware-search/CoursewareSearch.test.jsx
@@ -236,14 +236,14 @@ 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', () => {
--- a/src/course-home/courseware-search/CoursewareSearchForm.jsx
+++ b/src/course-home/courseware-search/CoursewareSearchForm.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SearchField } from '@edx/paragon';
+import { SearchField } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';

--- a/src/course-home/courseware-search/CoursewareSearchResults.jsx
+++ b/src/course-home/courseware-search/CoursewareSearchResults.jsx
@@ -1,16 +1,17 @@
 import React from 'react';
 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';

 const iconTypeMapping = {
-  document: Folder,
  text: TextFields,
  video: VideoCamera,
+  sequence: Folder,
+  other: Article,
 };

 const defaultIcon = Article;
@@ -34,9 +35,7 @@ const CoursewareSearchResults = ({ results = [] }) => {
      }) => {
        const key = type.toLowerCase();
        const icon = iconTypeMapping[key] || defaultIcon;
-
        const isExternal = !url.startsWith('/');
-
        const linkProps = isExternal ? {
          href: url,
          target: '_blank',
--- a/src/course-home/courseware-search/CoursewareSearchToggle.jsx
+++ b/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, Icon } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
 import { useDispatch } from 'react-redux';
 import messages from './messages';
 import { useCoursewareSearchFeatureFlag, useCoursewareSearchParams } from './hooks';
--- a/src/course-home/courseware-search/snapshots/CoursewareSearchResults.test.jsx.snap
+++ b/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>
@@ -140,7 +140,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>
--- a/src/course-home/courseware-search/courseware-search.scss
+++ b/src/course-home/courseware-search/courseware-search.scss
@@ -6,7 +6,7 @@
  right: 0;
  bottom: 0;
  border-top: 1px solid $light-300;
-  z-index: 200;
+  z-index: $zindex-modal; // Bootstrap's z-index layer for Modals.

  &__close {
    position: absolute !important; // For some reason it gets overridden
@@ -51,6 +51,8 @@

  &__empty {
    color: $gray-500;
+    padding: 6rem 0;
+    text-align: center;
  }

  &__item {
--- a/src/course-home/courseware-search/hooks.js
+++ b/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 }));
--- a/src/course-home/courseware-search/hooks.test.jsx
+++ b/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');
+    });
+  });
 });
--- a/src/course-home/data/factories/courseHomeMetadata.factory.js
+++ b/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,
--- a/src/course-home/data/snapshots/redux.test.js.snap
+++ b/src/course-home/data/snapshots/redux.test.js.snap
@@ -14,7 +14,11 @@ Object {
  },
  "courseware": Object {
    "courseId": null,
+    "courseOutline": Object {},
+    "courseOutlineShouldUpdate": false,
+    "courseOutlineStatus": "loading",
    "courseStatus": "loading",
+    "coursewareOutlineSidebarSettings": Object {},
    "sequenceId": null,
    "sequenceMightBeUnit": false,
    "sequenceStatus": "loading",
@@ -38,6 +42,7 @@ Object {
        "id": "course-v1:edX+DemoX+Demo_Course",
        "isEnrolled": false,
        "isMasquerading": false,
+        "isNewDiscussionSidebarViewEnabled": false,
        "isSelfPaced": false,
        "isStaff": false,
        "number": "DemoX",
@@ -309,9 +314,74 @@ Object {
      },
    },
  },
+  "plugins": Object {},
  "recommendations": Object {
    "recommendationsStatus": "loading",
  },
+  "specialExams": Object {
+    "activeAttempt": null,
+    "allowProctoringOptOut": false,
+    "apiErrorMsg": "",
+    "exam": Object {
+      "attempt": Object {
+        "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": Object {
+        "are_prerequisites_satisifed": true,
+        "declined_prerequisites": Array [],
+        "failed_prerequisites": Array [],
+        "pending_prerequisites": Array [],
+        "satisfied_prerequisites": Array [],
+      },
+      "time_limit_mins": null,
+      "type": "",
+    },
+    "examAccessToken": Object {
+      "exam_access_token": "",
+      "exam_access_token_expiration": "",
+    },
+    "isLoading": true,
+    "proctoringSettings": Object {
+      "exam_proctoring_backend": Object {
+        "download_url": "",
+        "instructions": Array [],
+        "name": "",
+        "rules": Object {},
+      },
+      "integration_specific_email": "",
+      "learner_notification_from_email": "",
+      "provider_name": "",
+      "provider_tech_support_email": "",
+      "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
+    },
+    "timeIsOver": false,
+  },
  "tours": Object {
    "showCoursewareTour": false,
    "showExistingUserCourseHomeTour": false,
@@ -336,7 +406,11 @@ Object {
  },
  "courseware": Object {
    "courseId": null,
+    "courseOutline": Object {},
+    "courseOutlineShouldUpdate": false,
+    "courseOutlineStatus": "loading",
    "courseStatus": "loading",
+    "coursewareOutlineSidebarSettings": Object {},
    "sequenceId": null,
    "sequenceMightBeUnit": false,
    "sequenceStatus": "loading",
@@ -360,6 +434,7 @@ Object {
        "id": "course-v1:edX+DemoX+Demo_Course",
        "isEnrolled": false,
        "isMasquerading": false,
+        "isNewDiscussionSidebarViewEnabled": false,
        "isSelfPaced": false,
        "isStaff": false,
        "number": "DemoX",
@@ -435,6 +510,7 @@ Object {
            "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2": Object {
              "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 [
@@ -450,8 +526,10 @@ Object {
              "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",
@@ -509,9 +587,74 @@ Object {
      },
    },
  },
+  "plugins": Object {},
  "recommendations": Object {
    "recommendationsStatus": "loading",
  },
+  "specialExams": Object {
+    "activeAttempt": null,
+    "allowProctoringOptOut": false,
+    "apiErrorMsg": "",
+    "exam": Object {
+      "attempt": Object {
+        "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": Object {
+        "are_prerequisites_satisifed": true,
+        "declined_prerequisites": Array [],
+        "failed_prerequisites": Array [],
+        "pending_prerequisites": Array [],
+        "satisfied_prerequisites": Array [],
+      },
+      "time_limit_mins": null,
+      "type": "",
+    },
+    "examAccessToken": Object {
+      "exam_access_token": "",
+      "exam_access_token_expiration": "",
+    },
+    "isLoading": true,
+    "proctoringSettings": Object {
+      "exam_proctoring_backend": Object {
+        "download_url": "",
+        "instructions": Array [],
+        "name": "",
+        "rules": Object {},
+      },
+      "integration_specific_email": "",
+      "learner_notification_from_email": "",
+      "provider_name": "",
+      "provider_tech_support_email": "",
+      "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
+    },
+    "timeIsOver": false,
+  },
  "tours": Object {
    "showCoursewareTour": false,
    "showExistingUserCourseHomeTour": false,
@@ -536,7 +679,11 @@ Object {
  },
  "courseware": Object {
    "courseId": null,
+    "courseOutline": Object {},
+    "courseOutlineShouldUpdate": false,
+    "courseOutlineStatus": "loading",
    "courseStatus": "loading",
+    "coursewareOutlineSidebarSettings": Object {},
    "sequenceId": null,
    "sequenceMightBeUnit": false,
    "sequenceStatus": "loading",
@@ -560,6 +707,7 @@ Object {
        "id": "course-v1:edX+DemoX+Demo_Course",
        "isEnrolled": false,
        "isMasquerading": false,
+        "isNewDiscussionSidebarViewEnabled": false,
        "isSelfPaced": false,
        "isStaff": false,
        "number": "DemoX",
@@ -715,9 +863,74 @@ Object {
      },
    },
  },
+  "plugins": Object {},
  "recommendations": Object {
    "recommendationsStatus": "loading",
  },
+  "specialExams": Object {
+    "activeAttempt": null,
+    "allowProctoringOptOut": false,
+    "apiErrorMsg": "",
+    "exam": Object {
+      "attempt": Object {
+        "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": Object {
+        "are_prerequisites_satisifed": true,
+        "declined_prerequisites": Array [],
+        "failed_prerequisites": Array [],
+        "pending_prerequisites": Array [],
+        "satisfied_prerequisites": Array [],
+      },
+      "time_limit_mins": null,
+      "type": "",
+    },
+    "examAccessToken": Object {
+      "exam_access_token": "",
+      "exam_access_token_expiration": "",
+    },
+    "isLoading": true,
+    "proctoringSettings": Object {
+      "exam_proctoring_backend": Object {
+        "download_url": "",
+        "instructions": Array [],
+        "name": "",
+        "rules": Object {},
+      },
+      "integration_specific_email": "",
+      "learner_notification_from_email": "",
+      "provider_name": "",
+      "provider_tech_support_email": "",
+      "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
+    },
+    "timeIsOver": false,
+  },
  "tours": Object {
    "showCoursewareTour": false,
    "showExistingUserCourseHomeTour": false,
--- a/src/course-home/data/api.js
+++ b/src/course-home/data/api.js
@@ -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;

--- a/src/course-home/data/redux.test.js
+++ b/src/course-home/data/redux.test.js
@@ -55,6 +55,29 @@ describe('Data layer integration tests', () => {
      expect(store.getState().courseHome.courseStatus).toEqual('failed');
    });

+    it('should result in fetch failed if course metadata call errored', async () => {
+      const datesTabData = Factory.build('datesTabData');
+      const datesUrl = `${datesBaseUrl}/${courseId}`;
+
+      axiosMock.onGet(courseMetadataUrl).networkError();
+      axiosMock.onGet(datesUrl).reply(200, datesTabData);
+
+      await executeThunk(thunks.fetchDatesTab(courseId), store.dispatch);
+
+      expect(loggingService.logError).toHaveBeenCalled();
+      expect(store.getState().courseHome.courseStatus).toEqual('failed');
+    });
+
+    it('should result in fetch failed if course metadata call errored', async () => {
+      axiosMock.onGet(courseMetadataUrl).reply(200, courseHomeMetadata);
+      axiosMock.onGet(`${datesBaseUrl}/${courseId}`).networkError();
+
+      await executeThunk(thunks.fetchDatesTab(courseId), store.dispatch);
+
+      expect(loggingService.logError).toHaveBeenCalled();
+      expect(store.getState().courseHome.courseStatus).toEqual('failed');
+    });
+
    it('Should fetch, normalize, and save metadata', async () => {
      const datesTabData = Factory.build('datesTabData');

@@ -78,18 +101,14 @@ describe('Data layer integration tests', () => {
    });

    it.each([401, 403, 404])(
-      'should result in fetch denied for expected errors and failed for all others',
+      'should result in fetch denied if course access is denied, regardless of dates API status',
      async (errorStatus) => {
        axiosMock.onGet(courseMetadataUrl).reply(200, courseHomeAccessDeniedMetadata);
        axiosMock.onGet(`${datesBaseUrl}/${courseId}`).reply(errorStatus, {});

        await executeThunk(thunks.fetchDatesTab(courseId), store.dispatch);

-        let expectedState = 'failed';
-        if (errorStatus === 401 || errorStatus === 403) {
-          expectedState = 'denied';
-        }
-        expect(store.getState().courseHome.courseStatus).toEqual(expectedState);
+        expect(store.getState().courseHome.courseStatus).toEqual('denied');
      },
    );
  });
@@ -129,18 +148,14 @@ describe('Data layer integration tests', () => {
    });

    it.each([401, 403, 404])(
-      'should result in fetch denied for expected errors and failed for all others',
+      'should result in fetch denied if course access is denied, regardless of outline API status',
      async (errorStatus) => {
        axiosMock.onGet(courseMetadataUrl).reply(200, courseHomeAccessDeniedMetadata);
        axiosMock.onGet(outlineUrl).reply(errorStatus, {});

        await executeThunk(thunks.fetchOutlineTab(courseId), store.dispatch);

-        let expectedState = 'failed';
-        if (errorStatus === 403) {
-          expectedState = 'denied';
-        }
-        expect(store.getState().courseHome.courseStatus).toEqual(expectedState);
+        expect(store.getState().courseHome.courseStatus).toEqual('denied');
      },
    );
  });
--- a/src/course-home/data/thunks.js
+++ b/src/course-home/data/thunks.js
@@ -38,28 +38,41 @@ export function fetchTab(courseId, tab, getTabData, targetUserId) {
  return async (dispatch) => {
    dispatch(fetchTabRequest({ courseId }));
    try {
-      const courseHomeCourseMetadata = await getCourseHomeCourseMetadata(courseId, 'outline');
-      dispatch(addModel({
-        modelType: 'courseHomeMeta',
-        model: {
-          id: courseId,
-          ...courseHomeCourseMetadata,
-        },
-      }));
-      const tabDataResult = getTabData && await getTabData(courseId, targetUserId);
-      if (tabDataResult) {
+      const promisesToFulfill = [getCourseHomeCourseMetadata(courseId, 'outline')];
+      if (getTabData) {
+        promisesToFulfill.push(getTabData(courseId, targetUserId));
+      }
+      const [
+        courseHomeCourseMetadataResult,
+        tabDataResult,
+      ] = await Promise.allSettled(promisesToFulfill);
+      if (courseHomeCourseMetadataResult.status === 'fulfilled') {
+        dispatch(addModel({
+          modelType: 'courseHomeMeta',
+          model: {
+            id: courseId,
+            ...courseHomeCourseMetadataResult.value,
+          },
+        }));
+      }
+      if (tabDataResult?.status === 'fulfilled') {
        dispatch(addModel({
          modelType: tab,
          model: {
            id: courseId,
-            ...tabDataResult,
+            ...tabDataResult.value,
          },
        }));
      }
-      // Disable the access-denied path for now - it caused a regression
-      if (!courseHomeCourseMetadata.courseAccess.hasAccess) {
+      if (courseHomeCourseMetadataResult.status === 'rejected') {
+        throw courseHomeCourseMetadataResult.reason;
+      } else if (!courseHomeCourseMetadataResult.value.courseAccess.hasAccess) {
+        // If the learner does not have access to the course, short cut to dispatch to a denied response regardless of
+        // the tabDataResult.
        dispatch(fetchTabDenied({ courseId }));
-      } else if (tabDataResult || !getTabData) {
+      } else if (tabDataResult?.status === 'rejected') {
+        throw tabDataResult.reason;
+      } else {
        dispatch(fetchTabSuccess({
          courseId,
          targetUserId,
--- a/src/course-home/dates-tab/timeline/Day.jsx
+++ b/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';

--- a/src/course-home/dates-tab/timeline/badgelist.jsx
+++ b/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,
--- a/src/course-home/goal-unsubscribe/ResultPage.jsx
+++ b/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';
--- a/src/course-home/outline-tab/LmsHtmlFragment.jsx
+++ b/src/course-home/outline-tab/LmsHtmlFragment.jsx
@@ -9,8 +9,9 @@ const LmsHtmlFragment = ({
  title,
  ...rest
 }) => {
+  const direction = document.documentElement?.getAttribute('dir') || 'ltr';
  const wholePage = `
-    <html>
+    <html dir="${direction}">
      <head>
        <base href="${getConfig().LMS_BASE_URL}" target="_parent">
        <link rel="stylesheet" href="/static/${getConfig().LEGACY_THEME_NAME ? `${getConfig().LEGACY_THEME_NAME}/` : ''}css/bootstrap/lms-main.css">
@@ -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;
    }
  }

--- a/src/course-home/outline-tab/OutlineTab.jsx
+++ b/src/course-home/outline-tab/OutlineTab.jsx
@@ -4,7 +4,7 @@ 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 { Button } from '@openedx/paragon';
 import { AlertList } from '../../generic/user-messages';

 import CourseDates from './widgets/CourseDates';
--- a/src/course-home/outline-tab/OutlineTab.test.jsx
+++ b/src/course-home/outline-tab/OutlineTab.test.jsx
@@ -282,6 +282,22 @@ describe('Outline Tab', () => {
      });
    });

+    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 () => {
      setTabData({ welcome_message_html: null });
      await fetchAndRender();
@@ -1269,5 +1285,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();
+    });
  });
 });
--- a/src/course-home/outline-tab/Section.jsx
+++ b/src/course-home/outline-tab/Section.jsx
@@ -1,11 +1,12 @@
 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 { Collapsible, IconButton, Icon } from '@openedx/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 { DisabledVisible } from '@openedx/paragon/icons';
 import SequenceLink from './SequenceLink';
 import { useModel } from '../../generic/model-store';

@@ -23,6 +24,7 @@ const Section = ({
    complete,
    sequenceIds,
    title,
+    hideFromTOC,
  } = section;
  const {
    courseBlocks: {
@@ -42,7 +44,7 @@ const Section = ({
  }, []);

  const sectionTitle = (
-    <div className="row w-100 m-0">
+    <div className="d-flex row w-100 m-0">
      <div className="col-auto p-0">
        {complete ? (
          <FontAwesomeIcon
@@ -62,12 +64,24 @@ const Section = ({
          />
        )}
      </div>
-      <div className="col-10 ml-3 p-0 font-weight-bold text-dark-500">
-        <span className="align-middle">{title}</span>
+      <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>
  );

--- a/src/course-home/outline-tab/SequenceLink.jsx
+++ b/src/course-home/outline-tab/SequenceLink.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
@@ -12,6 +11,8 @@ import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-ico
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

+import { Icon } from '@openedx/paragon';
+import { Block } from '@openedx/paragon/icons';
 import EffortEstimate from '../../shared/effort-estimate';
 import { useModel } from '../../generic/model-store';
 import messages from './messages';
@@ -29,6 +30,7 @@ const SequenceLink = ({
    due,
    showLink,
    title,
+    hideFromTOC,
  } = sequence;
  const {
    userTimezone,
@@ -93,7 +95,7 @@ const SequenceLink = ({
                icon={fasCheckCircle}
                fixedWidth
                className="float-left text-success mt-1"
-                aria-hidden="true"
+                aria-hidden={complete}
                title={intl.formatMessage(messages.completedAssignment)}
              />
            ) : (
@@ -101,7 +103,7 @@ const SequenceLink = ({
                icon={farCheckCircle}
                fixedWidth
                className="float-left text-gray-400 mt-1"
-                aria-hidden="true"
+                aria-hidden={complete}
                title={intl.formatMessage(messages.incompleteAssignment)}
              />
            )}
@@ -114,6 +116,16 @@ const SequenceLink = ({
            <EffortEstimate className="ml-3 align-middle" block={sequence} />
          </div>
        </div>
+        {hideFromTOC && (
+          <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>
+        )}
        <div className="row w-100 m-0 ml-3 pl-3">
          <small className="text-body pl-2">
            {due ? dueDateMessage : noDueDateMessage}
--- a/src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx
+++ b/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';
--- a/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx
+++ b/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
--- a/src/course-home/outline-tab/alerts/private-course-alert/PrivateCourseAlert.jsx
+++ b/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';

--- a/src/course-home/outline-tab/alerts/scheduled-content-alert/ScheduledCotentAlert.jsx
+++ b/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';

--- a/src/course-home/outline-tab/messages.js
+++ b/src/course-home/outline-tab/messages.js
@@ -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',
--- a/src/course-home/outline-tab/widgets/FlagButton.scss
+++ b/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 {
--- a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx
+++ b/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';
--- a/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx
+++ b/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';
--- a/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx
+++ b/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';
--- a/src/course-home/outline-tab/widgets/WelcomeMessage.jsx
+++ b/src/course-home/outline-tab/widgets/WelcomeMessage.jsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, Button, TransitionReplace } from '@edx/paragon';
+import { Alert, Button, TransitionReplace } from '@openedx/paragon';
 import truncate from 'truncate-html';

 import { useDispatch } from 'react-redux';
@@ -18,8 +18,22 @@ const WelcomeMessage = ({ courseId, intl }) => {

  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();

@@ -63,7 +77,7 @@ const WelcomeMessage = ({ courseId, intl }) => {
            className="inline-link"
            data-testid="long-welcome-message-iframe"
            key="full-html"
-            html={welcomeMessageHtml}
+            html={cleanedWelcomeMessageHtml}
            title={intl.formatMessage(messages.welcomeMessage)}
          />
        )}
--- a/src/course-home/progress-tab/ProgressHeader.jsx
+++ b/src/course-home/progress-tab/ProgressHeader.jsx
@@ -3,7 +3,7 @@ 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 { Button } from '@openedx/paragon';

 import { useModel } from '../../generic/model-store';

--- a/src/course-home/progress-tab/ProgressTab.jsx
+++ b/src/course-home/progress-tab/ProgressTab.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { breakpoints, useWindowSize } from '@edx/paragon';
+import { breakpoints, useWindowSize } from '@openedx/paragon';

 import CertificateStatus from './certificate-status/CertificateStatus';
 import CourseCompletion from './course-completion/CourseCompletion';
--- a/src/course-home/progress-tab/ProgressTab.test.jsx
+++ b/src/course-home/progress-tab/ProgressTab.test.jsx
@@ -3,7 +3,7 @@ import { Factory } from 'rosie';
 import { getConfig } 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 {
--- a/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
+++ b/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
@@ -6,7 +6,7 @@ import {
  FormattedDate, FormattedMessage, injectIntl, intlShape,
 } from '@edx/frontend-platform/i18n';

-import { Button, Card } from '@edx/paragon';
+import { Button, Card } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { useModel } from '../../../generic/model-store';
 import { COURSE_EXIT_MODES, getCourseExitMode } from '../../../courseware/course/course-exit/utils';
@@ -154,7 +154,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!"
--- a/src/course-home/progress-tab/certificate-status/messages.js
+++ b/src/course-home/progress-tab/certificate-status/messages.js
@@ -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',
--- a/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { OverlayTrigger, Popover } from '@openedx/paragon';

 import messages from './messages';

@@ -33,7 +33,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>
--- a/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { OverlayTrigger, Popover } from '@openedx/paragon';

 import messages from './messages';

@@ -37,7 +37,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>
--- a/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';

-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { OverlayTrigger, Popover } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import messages from './messages';
@@ -36,7 +36,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>
--- a/src/course-home/progress-tab/credit-information/CreditInformation.jsx
+++ b/src/course-home/progress-tab/credit-information/CreditInformation.jsx
@@ -2,8 +2,8 @@ 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 { CheckCircle, WarningFilled, WatchFilled } from '@openedx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';

 import { useModel } from '../../../generic/model-store';
 import { DashboardLink } from '../../../shared/links';
--- a/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx
@@ -3,8 +3,8 @@ import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { CheckCircle, WarningFilled } from '@edx/paragon/icons';
-import { breakpoints, Icon, useWindowSize } from '@edx/paragon';
+import { CheckCircle, WarningFilled } from '@openedx/paragon/icons';
+import { breakpoints, Icon, useWindowSize } from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';

 import GradeRangeTooltip from './GradeRangeTooltip';
--- a/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
@@ -4,8 +4,8 @@ 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 { Locked } from '@edx/paragon/icons';
-import { Button, Icon } from '@edx/paragon';
+import { Locked } from '@openedx/paragon/icons';
+import { Button, Icon } from '@openedx/paragon';

 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';
--- a/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import {
  getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { OverlayTrigger, Popover } from '@openedx/paragon';

 import { useModel } from '../../../../generic/model-store';

--- a/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
@@ -3,10 +3,10 @@ import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { InfoOutline } from '@edx/paragon/icons';
+import { InfoOutline } from '@openedx/paragon/icons';
 import {
  Icon, IconButton, OverlayTrigger, Popover,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';

 import messages from '../messages';
--- a/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {
  getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
-import { OverlayTrigger, Popover } from '@edx/paragon';
+import { OverlayTrigger, Popover } from '@openedx/paragon';

 import messages from '../messages';

--- a/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
@@ -4,8 +4,8 @@ import { useSelector } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Blocked } from '@edx/paragon/icons';
-import { Icon, Hyperlink } from '@edx/paragon';
+import { Blocked } from '@openedx/paragon/icons';
+import { Icon, Hyperlink } from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';

 import DetailedGradesTable from './DetailedGradesTable';
--- a/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import {
  getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';

 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';
--- a/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
@@ -15,8 +15,9 @@ const ProblemScoreDrawer = ({ intl, problemScores, subsection }) => {
      <span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(messages.problemScoreLabel)}</span>
      <div className={classNames('col', 'p-0', { 'greyed-out': !subsection.learnerHasAccess })}>
        <ul className="list-unstyled row w-100 m-0" aria-labelledby="problem-score-label">
-          {problemScores.map(problemScore => (
-            <li className="ml-3">{problemScore.earned}{isLocaleRtl ? '\\' : '/'}{problemScore.possible}</li>
+          {problemScores.map((problemScore, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={i} className="ml-3">{problemScore.earned}{isLocaleRtl ? '\\' : '/'}{problemScore.possible}</li>
          ))}
        </ul>
      </div>
--- a/src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx
@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Collapsible, Icon, Row } from '@edx/paragon';
+import { Collapsible, Icon, Row } from '@openedx/paragon';
 import {
  ArrowDropDown, ArrowDropUp, Blocked, Info,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';

 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';
--- a/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Blocked } from '@edx/paragon/icons';
-import { Icon } from '@edx/paragon';
+import { Blocked } from '@openedx/paragon/icons';
+import { Icon } from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';

--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Icon, IconButton, OverlayTrigger, Popover,
-} from '@edx/paragon';
-import { Blocked, InfoOutline } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Blocked, InfoOutline } from '@openedx/paragon/icons';

 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import {
  getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';

 import AssignmentTypeCell from './AssignmentTypeCell';
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import {
  getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';

 import messages from '../messages';
--- a/src/course-home/progress-tab/related-links/RelatedLinks.jsx
+++ b/src/course-home/progress-tab/related-links/RelatedLinks.jsx
@@ -4,7 +4,7 @@ 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 { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';

 import messages from './messages';
 import { useModel } from '../../../generic/model-store';
--- a/src/course-home/suggested-schedule-messaging/ShiftDatesAlert.jsx
+++ b/src/course-home/suggested-schedule-messaging/ShiftDatesAlert.jsx
@@ -8,7 +8,7 @@ import {
  Button,
  Row,
  Col,
-} from '@edx/paragon';
+} from '@openedx/paragon';

 import { resetDeadlines } from '../data';
 import { useModel } from '../../generic/model-store';
--- a/src/course-home/suggested-schedule-messaging/UpgradeToCompleteAlert.jsx
+++ b/src/course-home/suggested-schedule-messaging/UpgradeToCompleteAlert.jsx
@@ -7,7 +7,7 @@ import {
  Button,
  Col,
  Row,
-} from '@edx/paragon';
+} from '@openedx/paragon';

 import { useModel } from '../../generic/model-store';
 import messages from './messages';
--- a/src/course-home/suggested-schedule-messaging/UpgradeToShiftDatesAlert.jsx
+++ b/src/course-home/suggested-schedule-messaging/UpgradeToShiftDatesAlert.jsx
@@ -8,7 +8,7 @@ import {
  Button,
  Row,
  Col,
-} from '@edx/paragon';
+} from '@openedx/paragon';

 import { useModel } from '../../generic/model-store';
 import messages from './messages';
--- a/src/courseware/CoursewareContainer.test.jsx
+++ b/src/courseware/CoursewareContainer.test.jsx
@@ -88,6 +88,7 @@ describe('CoursewareContainer', () => {
          <Routes>
            {DECODE_ROUTES.COURSEWARE.map((route) => (
              <Route
+                key={route}
                path={route}
                element={<CoursewareContainer />}
              />
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -1,24 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
-import { breakpoints, useWindowSize } from '@edx/paragon';
+import { breakpoints, useWindowSize } from '@openedx/paragon';

-import { AlertList } from '../../generic/user-messages';
-
-import Sequence from './sequence';
-
-import { CelebrationModal, shouldCelebrateOnSectionLoad, WeeklyGoalCelebrationModal } from './celebration';
+import { AlertList } from '@src/generic/user-messages';
+import { useModel } from '@src/generic/model-store';
+import { getCoursewareOutlineSidebarSettings } from '../data/selectors';
+import { Trigger as CourseOutlineTrigger } from './sidebar/sidebars/course-outline';
 import Chat from './chat/Chat';
-import ContentTools from './content-tools';
-import CourseBreadcrumbs from './CourseBreadcrumbs';
 import SidebarProvider from './sidebar/SidebarContextProvider';
 import SidebarTriggers from './sidebar/SidebarTriggers';
 import NewSidebarProvider from './new-sidebar/SidebarContextProvider';
 import NewSidebarTriggers from './new-sidebar/SidebarTriggers';
-
-import { useModel } from '../../generic/model-store';
+import { CelebrationModal, shouldCelebrateOnSectionLoad, WeeklyGoalCelebrationModal } from './celebration';
+import CourseBreadcrumbs from './CourseBreadcrumbs';
+import ContentTools from './content-tools';
+import Sequence from './sequence';

 const Course = ({
  courseId,
@@ -33,10 +32,12 @@ const Course = ({
  const {
    celebrations,
    isStaff,
+    isNewDiscussionSidebarViewEnabled,
  } = useModel('courseHomeMeta', courseId);
  const sequence = useModel('sequences', sequenceId);
  const section = useModel('sections', sequence ? sequence.sectionId : null);
-  const enableNewSidebar = getConfig().ENABLE_NEW_SIDEBAR;
+  const { enableNavigationSidebar } = useSelector(getCoursewareOutlineSidebarSettings);
+  const navigationDisabled = enableNavigationSidebar || (sequence?.navigationDisabled ?? false);

  const pageTitleBreadCrumbs = [
    sequence,
@@ -53,7 +54,7 @@ const Course = ({
  const [weeklyGoalCelebrationOpen, setWeeklyGoalCelebrationOpen] = useState(
    celebrations && !celebrations.streakLengthToCelebrate && celebrations.weeklyGoal,
  );
-  const shouldDisplayTriggers = windowWidth >= breakpoints.small.minWidth;
+  const shouldDisplayChat = windowWidth >= breakpoints.medium.minWidth;
  const daysPerWeek = course?.courseGoals?.selectedGoal?.daysPerWeek;

  useEffect(() => {
@@ -67,22 +68,26 @@ const Course = ({
    ));
  }, [sequenceId]);

-  const SidebarProviderComponent = enableNewSidebar === 'true' ? NewSidebarProvider : SidebarProvider;
+  const SidebarProviderComponent = isNewDiscussionSidebarViewEnabled ? NewSidebarProvider : SidebarProvider;

  return (
    <SidebarProviderComponent courseId={courseId} unitId={unitId}>
      <Helmet>
        <title>{`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`}</title>
      </Helmet>
-      <div className="position-relative d-flex align-items-center mb-4 mt-1">
-        <CourseBreadcrumbs
-          courseId={courseId}
-          sectionId={section ? section.id : null}
-          sequenceId={sequenceId}
-          isStaff={isStaff}
-          unitId={unitId}
-        />
-        {shouldDisplayTriggers && (
+      <div className="position-relative d-flex align-items-xl-center mb-4 mt-1 flex-column flex-xl-row">
+        {navigationDisabled || (
+        <>
+          <CourseBreadcrumbs
+            courseId={courseId}
+            sectionId={section ? section.id : null}
+            sequenceId={sequenceId}
+            isStaff={isStaff}
+            unitId={unitId}
+          />
+        </>
+        )}
+        {shouldDisplayChat && (
          <>
            <Chat
              enabled={course.learningAssistantEnabled}
@@ -92,9 +97,12 @@ const Course = ({
              contentToolsEnabled={course.showCalculator || course.notes.enabled}
              unitId={unitId}
            />
-            {enableNewSidebar === 'true' ? <NewSidebarTriggers /> : <SidebarTriggers /> }
          </>
        )}
+        <div className="w-100 d-flex align-items-center">
+          <CourseOutlineTrigger isMobileView />
+          {isNewDiscussionSidebarViewEnabled ? <NewSidebarTriggers /> : <SidebarTriggers /> }
+        </div>
      </div>

      <AlertList topic="sequence" />
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -1,24 +1,30 @@
 import React from 'react';
+
 import { Factory } from 'rosie';
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import MockAdapter from 'axios-mock-adapter';
-import { breakpoints } from '@edx/paragon';
+
+import { breakpoints } from '@openedx/paragon';
+
 import {
-  act, fireEvent, getByRole, initializeTestStore, loadUnit, render, screen, waitFor,
+  fireEvent, getByRole, initializeTestStore, loadUnit, render, screen, waitFor,
 } from '../../setupTest';
-import { buildTopicsFromUnits } from '../data/__factories__/discussionTopics.factory';
-import { handleNextSectionCelebration } from './celebration';
 import * as celebrationUtils from './celebration/utils';
+import { handleNextSectionCelebration } from './celebration';
 import Course from './Course';
-import { executeThunk } from '../../utils';
-import * as thunks from '../data/thunks';
+import setupDiscussionSidebar from './test-utils';

 jest.mock('@edx/frontend-platform/analytics');
 jest.mock('@edx/frontend-lib-special-exams/dist/data/thunks.js', () => ({
  ...jest.requireActual('@edx/frontend-lib-special-exams/dist/data/thunks.js'),
  checkExamEntry: () => jest.fn(),
 }));
+const mockChatTestId = 'fake-chat';
+jest.mock(
+  './chat/Chat',
+  // eslint-disable-next-line react/prop-types
+  () => function ({ courseId }) {
+    return <div className="fake-chat" data-testid={mockChatTestId}>Chat contents {courseId} </div>;
+  },
+);

 const recordFirstSectionCelebration = jest.fn();
 // eslint-disable-next-line no-import-assign
@@ -51,29 +57,9 @@ describe('Course', () => {
    setItemSpy.mockRestore();
  });

-  const setupDiscussionSidebar = async () => {
-    const courseHomeMetadata = Factory.build('courseHomeMetadata', { verified_mode: null });
-    const testStore = await initializeTestStore({ provider: 'openedx', courseHomeMetadata });
-    const state = testStore.getState();
-    const { courseware: { courseId } } = state;
-    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/${courseId}`).reply(200, { provider: 'openedx' });
-    const topicsResponse = buildTopicsFromUnits(state.models.units);
-    axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/discussion/v2/course_topics/${courseId}`)
-      .reply(200, topicsResponse);
-
-    await executeThunk(thunks.getCourseDiscussionTopics(courseId), testStore.dispatch);
-    const [firstUnitId] = Object.keys(state.models.units);
-    mockData.unitId = firstUnitId;
-    const [firstSequenceId] = Object.keys(state.models.sequences);
-    mockData.sequenceId = firstSequenceId;
-
-    await render(<Course {...mockData} />, { store: testStore, wrapWithRouter: true });
-  };
-
  it('loads learning sequence', async () => {
    render(<Course {...mockData} />, { wrapWithRouter: true });
-    expect(screen.getByRole('navigation', { name: 'breadcrumb' })).toBeInTheDocument();
+    expect(screen.queryByRole('navigation', { name: 'breadcrumb' })).not.toBeInTheDocument();
    expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();

    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
@@ -92,6 +78,27 @@ describe('Course', () => {
    );
  });

+  it('removes breadcrumbs when navigation is disabled', async () => {
+    const sequenceBlocks = [Factory.build(
+      'block',
+      { type: 'sequential', children: [] },
+      { courseId: mockData.courseId },
+    )];
+    const sequenceMetadata = [Factory.build(
+      'sequenceMetadata',
+      { navigation_disabled: true },
+      { courseId: mockData.courseId, sequenceBlock: sequenceBlocks[0] },
+    )];
+    const testStore = await initializeTestStore({ sequenceBlocks, sequenceMetadata }, false);
+    const testData = {
+      ...mockData,
+      sequenceId: sequenceBlocks[0].id,
+      onNavigate: jest.fn(),
+    };
+    render(<Course {...testData} />, { store: testStore, wrapWithRouter: true });
+    expect(screen.queryByRole('navigation', { name: 'breadcrumb' })).not.toBeInTheDocument();
+  });
+
  it('displays first section celebration modal', async () => {
    const courseHomeMetadata = Factory.build('courseHomeMetadata', { celebrations: { firstSection: true } });
    const testStore = await initializeTestStore({ courseHomeMetadata }, false);
@@ -135,27 +142,32 @@ describe('Course', () => {

    const notificationTrigger = screen.getByRole('button', { name: /Show notification tray/i });
    expect(notificationTrigger).toBeInTheDocument();
-    expect(notificationTrigger.parentNode).not.toHaveClass('mt-3', { exact: true });
+    expect(notificationTrigger.parentNode).not.toHaveClass('sidebar-active', { exact: true });
    fireEvent.click(notificationTrigger);
-    expect(notificationTrigger.parentNode).toHaveClass('mt-3');
+    expect(notificationTrigger.parentNode).toHaveClass('sidebar-active');
  });

  it('handles click to open/close discussions sidebar', async () => {
    await setupDiscussionSidebar();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sidebar-DISCUSSIONS')).toBeInTheDocument();
+      expect(screen.getByTestId('sidebar-DISCUSSIONS')).not.toHaveClass('d-none');
+    });
+
    const discussionsTrigger = await screen.getByRole('button', { name: /Show discussions tray/i });
-    const discussionsSideBar = await waitFor(() => screen.findByTestId('sidebar-DISCUSSIONS'));
+    expect(discussionsTrigger).toBeInTheDocument();
+    fireEvent.click(discussionsTrigger);

-    expect(discussionsSideBar).not.toHaveClass('d-none');
-
-    await act(async () => {
-      fireEvent.click(discussionsTrigger);
+    await waitFor(() => {
+      expect(screen.queryByTestId('sidebar-DISCUSSIONS')).not.toBeInTheDocument();
    });
-    await expect(discussionsSideBar).toHaveClass('d-none');

-    await act(async () => {
-      fireEvent.click(discussionsTrigger);
+    fireEvent.click(discussionsTrigger);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('sidebar-DISCUSSIONS')).toBeInTheDocument();
    });
-    await expect(discussionsSideBar).not.toHaveClass('d-none');
  });

  it('displays discussions sidebar when unit changes', async () => {
@@ -183,10 +195,11 @@ describe('Course', () => {
  });

  it('handles click to open/close notification tray', async () => {
-    render(<Course {...mockData} />, { wrapWithRouter: true });
+    await setupDiscussionSidebar();
    const notificationShowButton = await screen.findByRole('button', { name: /Show notification tray/i });
-    expect(screen.queryByRole('region', { name: /notification tray/i })).toHaveClass('d-none');
+    expect(screen.queryByRole('region', { name: /notification tray/i })).not.toBeInTheDocument();
    fireEvent.click(notificationShowButton);
+    expect(screen.queryByRole('region', { name: /notification tray/i })).toBeInTheDocument();
    expect(screen.queryByRole('region', { name: /notification tray/i })).not.toHaveClass('d-none');
  });

@@ -197,7 +210,9 @@ describe('Course', () => {
      { type: 'vertical' },
      { courseId: courseMetadata.id },
    ));
-    const testStore = await initializeTestStore({ courseMetadata, unitBlocks }, false);
+    const testStore = await initializeTestStore({
+      courseMetadata, unitBlocks, enableNavigationSidebar: { enable_navigation_sidebar: false },
+    }, false);
    const { courseware, models } = testStore.getState();
    const { courseId, sequenceId } = courseware;
    const testData = {
@@ -339,4 +354,41 @@ describe('Course', () => {
      await waitFor(() => expect(screen.getByText('To access course materials, you must score 70% or higher on this exam. Your current score is 30%.')).toBeInTheDocument());
    });
  });
+
+  it('displays chat when screen is wide enough (browser)', async () => {
+    const courseMetadata = Factory.build('courseMetadata', {
+      learning_assistant_enabled: true,
+      enrollment: { mode: 'verified' },
+    });
+    const testStore = await initializeTestStore({ courseMetadata }, false);
+    const { courseware } = testStore.getState();
+    const { courseId, sequenceId } = courseware;
+    const testData = {
+      ...mockData,
+      courseId,
+      sequenceId,
+    };
+    render(<Course {...testData} />, { store: testStore, wrapWithRouter: true });
+    const chat = screen.queryByTestId(mockChatTestId);
+    await expect(chat).toBeInTheDocument();
+  });
+
+  it('does not display chat when screen is too narrow (mobile)', async () => {
+    global.innerWidth = breakpoints.extraSmall.minWidth;
+    const courseMetadata = Factory.build('courseMetadata', {
+      learning_assistant_enabled: true,
+      enrollment: { mode: 'verified' },
+    });
+    const testStore = await initializeTestStore({ courseMetadata }, false);
+    const { courseware } = testStore.getState();
+    const { courseId, sequenceId } = courseware;
+    const testData = {
+      ...mockData,
+      courseId,
+      sequenceId,
+    };
+    render(<Course {...testData} />, { store: testStore, wrapWithRouter: true });
+    const chat = screen.queryByTestId(mockChatTestId);
+    await expect(chat).not.toBeInTheDocument();
+  });
 });
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -5,7 +5,7 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHome } from '@fortawesome/free-solid-svg-icons';
 import { useSelector } from 'react-redux';
-import { useToggle, ModalPopup, Menu } from '@edx/paragon';
+import { useToggle, ModalPopup, Menu } from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 import { useModel, useModels } from '../../generic/model-store';
 import JumpNavMenuItem from './JumpNavMenuItem';
@@ -62,6 +62,7 @@ const CourseBreadcrumb = ({
              <Menu>
                {content.map((item) => (
                  <JumpNavMenuItem
+                    key={item.label}
                    isDefault={item.default}
                    sequences={item.sequences}
                    courseId={courseId}
@@ -153,7 +154,7 @@ const CourseBreadcrumbs = ({
  }, [courseStatus, sequenceStatus, allSequencesInSections]);

  return (
-    <nav aria-label="breadcrumb" className="d-inline-block col-sm-10">
+    <nav aria-label="breadcrumb" className="d-inline-block col-sm-10 mb-3">
      <ol className="list-unstyled d-flex flex-nowrap align-items-center m-0">
        <li className="list-unstyled col-auto m-0 p-0">
          <Link
@@ -169,8 +170,10 @@ const CourseBreadcrumbs = ({
            />
          </Link>
        </li>
-        {links.map((content) => (
+        {links.map((content, i) => (
          <CourseBreadcrumb
+            // eslint-disable-next-line react/no-array-index-key
+            key={i}
            courseId={courseId}
            sequenceId={sequenceId}
            content={content}
--- a/src/courseware/course/JumpNavMenuItem.jsx
+++ b/src/courseware/course/JumpNavMenuItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown } from '@edx/paragon';
+import { Dropdown } from '@openedx/paragon';

 import {
  sendTrackingLogEvent,
--- a/src/courseware/course/bookmark/BookmarkButton.jsx
+++ b/src/courseware/course/bookmark/BookmarkButton.jsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { StatefulButton } from '@edx/paragon';
+import { StatefulButton } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { useDispatch } from 'react-redux';
 import BookmarkOutlineIcon from './BookmarkOutlineIcon';
--- a/src/courseware/course/celebration/CelebrationModal.jsx
+++ b/src/courseware/course/celebration/CelebrationModal.jsx
@@ -7,7 +7,7 @@ import {
  Button,
  StandardModal,
  useWindowSize,
-} from '@edx/paragon';
+} from '@openedx/paragon';

 import { useDispatch } from 'react-redux';
 import ClapsMobile from './assets/claps_280x201.gif';
--- a/src/courseware/course/celebration/WeeklyGoalCelebrationModal.jsx
+++ b/src/courseware/course/celebration/WeeklyGoalCelebrationModal.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  ActionRow, Button, Icon, StandardModal,
-} from '@edx/paragon';
-import { Lightbulb } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Lightbulb } from '@openedx/paragon/icons';

 import Target from './assets/target.svg';
 import messages from './messages';
--- a/src/courseware/course/chat/Chat.jsx
+++ b/src/courseware/course/chat/Chat.jsx
@@ -1,9 +1,13 @@
 import { createPortal } from 'react-dom';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

 import { Xpert } from '@edx/frontend-lib-learning-assistant';
 import { injectIntl } from '@edx/frontend-platform/i18n';

+import { VERIFIED_MODES } from '@src/constants';
+import { useModel } from '../../../generic/model-store';
+
 const Chat = ({
  enabled,
  enrollmentMode,
@@ -12,33 +16,38 @@ const Chat = ({
  contentToolsEnabled,
  unitId,
 }) => {
-  const VERIFIED_MODES = [
-    'professional',
-    'verified',
-    'no-id-professional',
-    'credit',
-    'masters',
-    'executive-education',
-    'paid-executive-education',
-    'paid-bootcamp',
-  ];
+  const {
+    activeAttempt, exam,
+  } = useSelector(state => state.specialExams);
+  const course = useModel('coursewareMeta', courseId);

-  const AUDIT_MODES = [
-    'audit',
-    'honor',
-    'unpaid-executive-education',
-    'unpaid-bootcamp',
-  ];
-
-  const isEnrolled = (
+  const hasVerifiedEnrollment = (
    enrollmentMode !== null
    && enrollmentMode !== undefined
-    && [...VERIFIED_MODES, ...AUDIT_MODES].some(mode => mode === enrollmentMode)
+    && VERIFIED_MODES.includes(enrollmentMode)
  );

+  const validDates = () => {
+    const date = new Date();
+    const utcDate = date.toISOString();
+
+    const startDate = course.start || utcDate;
+    const endDate = course.end || utcDate;
+
+    return (
+      startDate <= utcDate
+      && utcDate <= endDate
+    );
+  };
+
  const shouldDisplayChat = (
    enabled
-    && (isEnrolled || isStaff) // display only to enrolled or staff
+    && (hasVerifiedEnrollment || isStaff) // display only to verified learners or staff
+    && validDates()
+    // it is necessary to check both whether the user is in an exam, and whether or not they are viewing an exam
+    // this will prevent the learner from interacting with the tool at any point of the exam flow, even at the
+    // entrance interstitial.
+    && !(activeAttempt?.attempt_id || exam?.id)
  );

  return (
--- a/src/courseware/course/chat/Chat.test.jsx
+++ b/src/courseware/course/chat/Chat.test.jsx
@@ -1,13 +1,33 @@
 import { BrowserRouter } from 'react-router-dom';
-import { configureStore } from '@reduxjs/toolkit';
 import React from 'react';
+import { Factory } from 'rosie';

-import { reducer as learningAssistantReducer } from '@edx/frontend-lib-learning-assistant';
-
-import { initializeMockApp, render, screen } from '../../../setupTest';
+import {
+  initializeMockApp,
+  initializeTestStore,
+  render,
+  screen,
+} from '../../../setupTest';

 import Chat from './Chat';

+// We do a partial mock to avoid mocking out other exported values (e.g. the reducer).
+// We mock out the Xpert component, because the Xpert component has its own rules for whether it renders
+// or not, and this includes the results of API calls it makes. We don't want to test those rules here, just
+// whether the Xpert is rendered by the Chat component in certain conditions. Instead of actually rendering
+// Xpert, we render and assert on a mocked component.
+const mockXpertTestId = 'xpert';
+
+jest.mock('@edx/frontend-lib-learning-assistant', () => {
+  const originalModule = jest.requireActual('@edx/frontend-lib-learning-assistant');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    Xpert: () => (<div data-testid={mockXpertTestId}>mocked Xpert</div>),
+  };
+});
+
 initializeMockApp();

 const courseId = 'course-v1:edX+DemoX+Demo_Course';
@@ -16,11 +36,26 @@ let enabledTestCases = [];
 let disabledTestCases = [];
 const enabledModes = [
  'professional', 'verified', 'no-id-professional', 'credit', 'masters', 'executive-education',
-  'paid-executive-education', 'paid-bootcamp', 'audit', 'honor', 'unpaid-executive-education', 'unpaid-bootcamp',
+  'paid-executive-education', 'paid-bootcamp',
 ];
-const disabledModes = [null, undefined, 'xyz'];
+const disabledModes = [null, undefined, 'xyz', 'audit', 'honor', 'unpaid-executive-education', 'unpaid-bootcamp'];

 describe('Chat', () => {
+  let store;
+
+  beforeAll(async () => {
+    store = await initializeTestStore({
+      specialExams: {
+        activeAttempt: {
+          attempt_id: null,
+        },
+        exam: {
+          id: null,
+        },
+      },
+    });
+  });
+
  // Generate test cases.
  enabledTestCases = enabledModes.map((mode) => ({ enrollmentMode: mode, isVisible: true }));
  disabledTestCases = disabledModes.map((mode) => ({ enrollmentMode: mode, isVisible: false }));
@@ -30,12 +65,6 @@ describe('Chat', () => {
    it(
      `visibility determined by ${test.enrollmentMode} enrollment mode when enabled and not isStaff`,
      async () => {
-        const store = configureStore({
-          reducer: {
-            learningAssistant: learningAssistantReducer,
-          },
-        });
-
        render(
          <BrowserRouter>
            <Chat
@@ -49,7 +78,7 @@ describe('Chat', () => {
          { store },
        );

-        const chat = screen.queryByTestId('toggle-button');
+        const chat = screen.queryByTestId(mockXpertTestId);
        if (test.isVisible) {
          expect(chat).toBeInTheDocument();
        } else {
@@ -63,12 +92,6 @@ describe('Chat', () => {
  testCases = enabledModes.concat(disabledModes).map((mode) => ({ enrollmentMode: mode, isVisible: true }));
  testCases.forEach(test => {
    it('visibility determined by isStaff when enabled and any enrollment mode', async () => {
-      const store = configureStore({
-        reducer: {
-          learningAssistant: learningAssistantReducer,
-        },
-      });
-
      render(
        <BrowserRouter>
          <Chat
@@ -82,7 +105,7 @@ describe('Chat', () => {
        { store },
      );

-      const chat = screen.queryByTestId('toggle-button');
+      const chat = screen.queryByTestId(mockXpertTestId);
      if (test.isVisible) {
        expect(chat).toBeInTheDocument();
      } else {
@@ -124,12 +147,6 @@ describe('Chat', () => {
      `visibility determined by ${test.enabled} enabled when ${test.isStaff} isStaff
      and ${test.enrollmentMode} enrollment mode`,
      async () => {
-        const store = configureStore({
-          reducer: {
-            learningAssistant: learningAssistantReducer,
-          },
-        });
-
        render(
          <BrowserRouter>
            <Chat
@@ -143,7 +160,7 @@ describe('Chat', () => {
          { store },
        );

-        const chat = screen.queryByTestId('toggle-button');
+        const chat = screen.queryByTestId(mockXpertTestId);
        if (test.isVisible) {
          expect(chat).toBeInTheDocument();
        } else {
@@ -152,4 +169,60 @@ describe('Chat', () => {
      },
    );
  });
+
+  it('if course end date has passed, component should not be visible', async () => {
+    store = await initializeTestStore({
+      specialExams: {
+        activeAttempt: {
+          attempt_id: 1,
+        },
+      },
+      courseMetadata: Factory.build('courseMetadata', {
+        start: '2014-02-03T05:00:00Z',
+        end: '2014-02-05T05:00:00Z',
+      }),
+    });
+
+    render(
+      <BrowserRouter>
+        <Chat
+          enrollmentMode="verified"
+          isStaff
+          enabled
+          courseId={courseId}
+          contentToolsEnabled={false}
+        />
+      </BrowserRouter>,
+      { store },
+    );
+
+    const chat = screen.queryByTestId(mockXpertTestId);
+    expect(chat).not.toBeInTheDocument();
+  });
+
+  it('if learner has active exam attempt, component should not be visible', async () => {
+    store = await initializeTestStore({
+      specialExams: {
+        activeAttempt: {
+          attempt_id: 1,
+        },
+      },
+    });
+
+    render(
+      <BrowserRouter>
+        <Chat
+          enrollmentMode="verified"
+          isStaff
+          enabled
+          courseId={courseId}
+          contentToolsEnabled={false}
+        />
+      </BrowserRouter>,
+      { store },
+    );
+
+    const chat = screen.queryByTestId(mockXpertTestId);
+    expect(chat).toBeInTheDocument();
+  });
 });
--- a/src/courseware/course/content-tools/calculator/Calculator.jsx
+++ b/src/courseware/course/content-tools/calculator/Calculator.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Collapsible } from '@edx/paragon';
+import { Collapsible } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import {
--- a/src/courseware/course/course-exit/CatalogSuggestion.jsx
+++ b/src/courseware/course/course-exit/CatalogSuggestion.jsx
@@ -7,7 +7,7 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import {
  FormattedMessage, injectIntl, intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

--- a/src/courseware/course/course-exit/CourseCelebration.jsx
+++ b/src/courseware/course/course-exit/CourseCelebration.jsx
@@ -13,8 +13,8 @@ import {
  Button,
  Hyperlink,
  useWindowSize,
-} from '@edx/paragon';
-import { CheckCircle } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { CheckCircle } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';

--- a/src/courseware/course/course-exit/CourseExit.jsx
+++ b/src/courseware/course/course-exit/CourseExit.jsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';

 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { useSelector } from 'react-redux';
 import { Navigate } from 'react-router-dom';

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ihor Romaniuk	83565059dd	fix: iframe height for discussions sidebar (#1404 ) * fix: iframe height for discussions sidebar * fix: increase adaptation brakepoint	2024-08-08 15:50:19 -04:00
Adolfo R. Brandes	c8a95eb93d	feat!: organize plugin slots as components, add footer slot (#1408 ) BREAKING CHANGE: slot ids have been changed for consistency * `sequence_container_plugin` -> `sequence_container_slot` * `unit_title_plugin` -> `unit_title_slot` Co-authored-by: Brian Smith <112954497+brian-smith-tcril@users.noreply.github.com>	2024-06-06 15:06:54 -03:00
Ihor Romaniuk	7bb75dd256	fix: optimize scroll position observer after video fullscreen exit (#1405 )	2024-06-06 09:09:09 -03:00
Ihor Romaniuk	d76c0cc6ea	feat: [FC-0056] courseware sidebar enhancement (#1398 ) - Display section and sequence progress - Add tracking event to the unit button - Hide the horizontal unit navigation with enabled sidebar navigation	2024-05-30 13:28:07 -03:00
Ihor Romaniuk	1c3610e9af	feat: [FC-0056] create course outline sidebar (#1375 )	2024-05-07 13:02:06 -03:00
Awais Ansari	796bbef10b	fix: removed new sidebar view tickiness (#1376 )	2024-04-30 19:09:17 +05:00
sundasnoreen12	799e57f970	fix: fixed width issues of old and new sidebar (#1374 ) Co-authored-by: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>	2024-04-30 17:40:23 +05:00
Awais Ansari	cf3a91dde0	feat: added course level isNewDiscussionSidebarViewEnabled flag to control sidebar view switching (#1373 ) * feat: added course level isNewDiscussionSidebarViewEnabled flag * test: fixed notification widget test cases	2024-04-29 16:14:08 +05:00
Leangseu Kim	72381a783b	chore: remove UnitTranslationPlugin (#1352 ) * chore: remove UnitTranslationPlugin * chore: add plugin slot for sequence	2024-04-22 12:14:33 -04:00
sundasnoreen12	75f56ea4bd	fix: fixed flicker issue of navbar width (#1364 ) * fix: fixed fliker issue of navbar width * refactor: added hook function * refactor: placed discussion and notification constant on common place * refactor: moved to constant * refactor: fixed variable rename	2024-04-18 15:27:16 +05:00
Rodrigo Martin	a418ba6adb	feat(AU-1894): send track event when requesting translation (#1360 ) * feat(AU-1894): send track event when requesting translation * feat: add source != target language condition	2024-04-17 15:42:51 -03:00
sundasnoreen12	2da930f819	fix: fixed expended view unit bar issue (#1356 ) * fix: fixed expended view unit bar issue * refactor: removed expanded width	2024-04-17 12:29:45 +05:00
renovate[bot]	a2c38112fb	chore(deps): update dependency @openedx/frontend-build to v13.1.4	2024-04-16 18:01:10 +00:00
Alison Langston	36535d188d	feat: upgrade special exams (#1357 )	2024-04-16 12:55:53 -04:00
renovate[bot]	79f49032e3	fix(deps): update dependency @edx/frontend-lib-special-exams to v3.0.1	2024-04-16 16:09:21 +00:00
renovate[bot]	9b3b123e45	fix(deps): update dependency @edx/frontend-component-footer to v13.0.5	2024-04-16 16:08:42 +00:00
sundasnoreen12	98436b4605	fix: fixed zindex and width issue (#1346 )	2024-04-15 19:15:42 +00:00
Leangseu Kim	7652fa46d1	Lk/translation only for verified (#1355 ) * chore: update verified mode logic * chore: add is staff logic * chore: add test	2024-04-15 11:57:20 -03:00
Leangseu Kim	2347ce88cd	chore: update translation tour modal title	2024-04-15 09:40:22 -04:00
Leangseu Kim	78e5c57bd3	chore: fix translation for verified student only logic	2024-04-15 09:40:22 -04:00
Leangseu Kim	108636761c	chore: fix codecov action error	2024-04-12 11:28:23 -04:00
Leangseu Kim	5f56828bda	chore: patch frontend-build deployment	2024-04-12 11:28:23 -04:00
Rodrigo Martin	23e522e893	feat(AU-1949): Restrict WCT to verified track learners only (#1345 ) * feat(AU-1949): Restrict WCT to verified track learners only * fix: use jest-when * fix: clean tests	2024-04-08 11:16:08 -03:00
sundasnoreen12	9423a889ba	fix: fixed units overflow issue (#1343 ) * fix: fixed units overflow issue * refactor: refactor code for desktop and xl screen * refactor: fixed refactor issue	2024-04-05 01:33:07 +05:00
Isaac Lee	85b95adb9f	fix: modal iframe height to 100% (#1341 )	2024-04-02 13:14:05 -04:00
ABBOUD Moncef	d4e7b416b1	fix: course update iframe (#1204 )	2024-03-29 16:12:23 -04:00
renovate[bot]	0cb369af2b	fix(deps): update dependency @openedx/paragon to v22.2.1	2024-03-27 20:57:21 +00:00
renovate[bot]	c908d3a3dd	fix(deps): update dependency @edx/frontend-platform to v7.1.3	2024-03-27 17:48:28 +00:00
renovate[bot]	895a3b6b9f	chore(deps): update dependency @openedx/frontend-build to v13.0.30	2024-03-27 17:47:25 +00:00
Leangseu Kim	36b3c36379	feat: whole course translations (#1330 ) * feat: add language selection chore: update tests so we have less error message test: update test * test: update tests * chore: remove duplicate translation * chore: lint for console * chore: remove comments * chore: make sure the affect url frame refresh after the language selection change * chore: add whole_course_translation and language to courseware meta (#1305) * feat: Add feedback widget UI mock Add unit tests Fix snapshot Clean Sequence component logEvent calls Clean unit test Put feedback widget behind whole course translation flag Fix useFeedbackWidget test * chore: add src and dest translation * feat: first iteration of plugin translation chore: update plugin instruction * feat: Connect FeedbackWidget with backend services (#1325) Connect FeedbackWidget with backend services Move feedback widget to unit translation plugin * feat: Add authentication to WCT feedback endpoints (#1329) * chore: add fetch config and move feedback widget for the plugin chore: rewrite and test the api request chore: rebase chore: update translation feedback chore: test chore: add more tests * chore: rebase * chore: update requested change * chore: update package * chore: upgrade frontend-lib-special-exams and frontend-lib-learning-assistant * chore: update tests * chore: remove unneeded package * chore: update example config * chore: add source-map-loader * fix: feedback widget render error after submit feedback (#1335) * fix: feedback widget render error after submit feedback * fix: widget logic --------- Co-authored-by: Rodrigo Martin <rodrigom_94@hotmail.com>	2024-03-27 13:39:36 -04:00
Isaac Lee	3917262492	fix: bump exams ver to fix exam timer (#1331 )	2024-03-21 15:57:22 -04:00
Alison Langston	7ad120c4d5	feat: upgrade learning assistant version (#1327 )	2024-03-18 15:33:38 -04:00
Samir Sabri	94d20833aa	feat!: remove Transifex calls for OEP-58	2024-03-18 15:01:23 -04:00
Isaac Lee	4698b11ab9	fix: rollback exams lib to unblock pipeline (#1324 )	2024-03-14 14:31:40 -04:00
Awais Ansari	e46d4cc54d	feat: add tracking event in upgrade notifications tray (#1323 )	2024-03-14 20:52:19 +05:00
Ihor Romaniuk	92d8f637c0	fix: sequence container width and responsive for sequence navigation block (#1219 )	2024-03-13 13:29:34 -03:00
Eugene Dyudyunov	c3b786c771	fix: correct rtl for handouts (#1289 )	2024-03-13 12:58:56 -03:00
Isaac Lee	00aab61551	chore: update exams lib (#1321 )	2024-03-13 10:14:15 -04:00
Ihor Romaniuk	b547ada1a5	fix: RTL for the upgrade notification list (#1220 )	2024-03-11 12:31:36 -04:00
Ihor Romaniuk	b7159590d3	fix: wrong text-color class and text contrast on dates page (#1223 )	2024-03-11 12:31:27 -04:00
Marcos Rigoli	a2d7f704a6	fix: Updated search modal to match Bootstrap's z-index. (#1318 )	2024-03-11 11:44:42 -03:00
Maria Grimaldi	bca3aaccf5	feat: use navigation sequence metadata to disable navigation components (#1273 ) Use navigation_disabled sequence metadata based on Hide From TOC block field, so the student cannot navigate to another sequences in the course outline. https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3853975595/Feature+Enhancement+Proposal+Hide+Sections+from+course+outline	2024-03-08 10:51:31 -03:00
Marcos Rigoli	3b46df6d03	fix: Updated exams UI to fix timer (#1317 )	2024-03-07 15:48:20 -03:00
Bryann Valderrama	7c8e26d213	feat: show hide from toc Show message in course outline when Hide From TOC is enabled https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3853975595/Feature+Enhancement+Proposal+Hide+Sections+from+course+outline	2024-03-06 09:42:19 -03:00
Jeremy Ristau	b1c2c1f7b3	chore: create catalog-info.yaml (#1315 ) * chore: create catalog-info.yaml * chore: update catalog-info.yaml	2024-03-05 09:25:08 -05:00
Emad Rad	4797425a21	docs: broken readme fixed (#1264 )	2024-03-03 07:50:01 -05:00
Alison Langston	54bb72b60c	feat: update chat visibility (#1310 )	2024-03-01 08:17:27 -05:00
renovate[bot]	a91ef116f1	fix(deps): update dependency @edx/frontend-platform to v5.6.1	2024-02-29 00:51:21 +00:00
renovate[bot]	80634c6188	fix(deps): update dependency @edx/frontend-component-header to v4.11.1	2024-02-28 21:46:24 +00:00
renovate[bot]	ec1bad25a7	fix(deps): update dependency @edx/frontend-component-footer to v12.7.1	2024-02-28 21:24:08 +00:00
renovate[bot]	b2980f02a0	fix(deps): update dependency @edx/react-unit-test-utils to v1.7.1	2024-02-28 19:24:33 +00:00
renovate[bot]	9d38e9dc93	chore(deps): update dependency @openedx/frontend-build to v13.0.28	2024-02-28 16:52:17 +00:00
Mashal Malik	c28991d6e0	refactor: replace @edx/paragon and @edx/frontend-build (#1261 ) Co-authored-by: mashal-m <mashal.malik@arbisoft.com> Co-authored-by: Bilal Qamar <59555732+BilalQamar95@users.noreply.github.com>	2024-02-28 13:42:44 -03:00
Alison Langston	ff7366d42a	feat: refactor date visibility (#1298 )	2024-02-22 15:25:37 -05:00
Alison Langston	6def66677a	feat: update chat visibility (#1297 )	2024-02-22 11:46:48 -05:00
Alison Langston	8335dec0de	feat: upgrade learning assistant version (#1295 )	2024-02-21 09:31:08 -05:00
Varsha Menon	992ab4887b	feat: show chat for desktop only (#1286 )	2024-02-20 14:37:57 -05:00
Alison Langston	5d2aa5e60a	feat: update learning assistant version (#1294 )	2024-02-20 13:59:48 -05:00
sundasnoreen12	9dd79ca77e	fix: fixed empty section issue (#1292 ) * fix: fixed empty section issue * refactor: added checks to hide view	2024-02-15 15:56:04 +05:00
Muhammad Adeel Tajamul	9bfa0d06b6	feat: stick discussion sidebar to top (#1290 )	2024-02-15 06:43:32 +05:00
Alison Langston	c6d4bb3b45	feat: update exams and learning-assistant versions (#1291 )	2024-02-13 10:29:49 -05:00
Alison Langston	db1fc7782c	feat: gate visibility of chat component by active attempt (#1282 )	2024-02-12 09:17:32 -05:00
Marcos Rigoli	efd57c326e	CoursewareSearch - Show filters if needed only (#1287 ) * fix: CoursewareSearch - Show filters if needed only * fix: Refactored CoursewareSearch filtering logic * chore: Fixed unit tests for CoursewareResultsFilter * chore: Added CoursewareSearch hooks coverage	2024-02-09 12:50:42 -03:00
Muhammad Abdullah Waheed	a18ed8ed6c	feat: babel-plugin-react-intl to babel-plugin-formatjs migration (#1200 )	2024-02-08 14:58:48 -05:00
mashal-m	a340381738	refactor: update lock file version	2024-02-08 14:10:30 -05:00
Michael Roytman	170cbe1da0	Refactor use of frontend-lib-special-exams public API to use hooks. (#1284 ) * feat: refactor use of frontend-lib-special-exams public API to hooks This commit refactors the use of the frontend-lib-special-exams public API to use hooks. This commit also imports the root reducer from the frontend-lib-special-exams library. This root reducer is used for the specialExams slice when configuring the store for this application. * feat: update special exams version * feat: update snapshots --------- Co-authored-by: Alie Langston <alangsto@wellesley.edu>	2024-02-08 13:58:19 -05:00
Michael Roytman	174de4bc1b	feat: update version of frontend-lib-learning-assistant to 1.21.0 (#1285 ) This commit installs version 1.21.0 of @edx/frontend-lib-learning-assistant. This commit also refactors the Chat tests to assert on whether the Xpert component is rendered by the Chat component, not whether Xpert actually renders. This is because Xpert now has its own logic to determine whether to render. This release uses a new GET endpoint published on the Learning Assistant backend to determine whether the Learning Assistant feature is enabled. If the features is not enabled, the Learning Assistant is not rendered, and vice-versa.	2024-02-07 15:39:23 -05:00
alangsto	55e2332b00	feat: remove audit access to learning assistant chat (#1280 ) * feat: remove audit access to la * feat: remove audit access to la	2024-01-29 17:08:17 -05:00
Omar Al-Ithawi	25d746b7c8	feat: tutor-mfe compatiblilty for `atlas pull` (#1279 ) - install atlas - remove `--filter` to pull all languages by default - use ATLAS_OPTIONS to allow custom `--filter` - include frontend-lib-special-exams in `atlas pull`	2024-01-29 12:40:36 -05:00
alangsto	e790e2636f	feat: upgrade learning assistant to latest version (#1278 )	2024-01-24 15:08:30 -05:00
alangsto	c428222125	Revert "feat: update learning-assistant version" (#1277 )	2024-01-24 10:17:21 -05:00
alangsto	58365ba18e	feat: update learning-assistant version (#1276 )	2024-01-24 09:33:38 -05:00
Troy Sankey	ab87167052	fix: ignore failed outline API call when learner has no access If the learner doesn't even have access to the course (e.g. because the course starts in the future), don't worry about a 404 fetching the course outline since we're not planning to use it anyway. ENT-8078	2024-01-22 12:49:08 -08:00
sundasnoreen12	4928f505bd	test: added test cases for new sidebar (#1267 ) * test: added test cases for new sidebar * test: added factory for verified user * refactor: updated description for notification widget	2024-01-11 15:54:25 +05:00
alangsto	59a68afa5d	feat: gate chat visibility by course end date (#1270 )	2024-01-10 09:10:15 -05:00
Zachary Hancock	486faa5744	chore: update exams lib (#1268 )	2024-01-08 13:56:01 -05:00