test: deprecate react-unit-test-utils 1/2 (#1750)

* feat: add plugin slot for content iframe error component

* style: quality

* fix: copilot suggestions

.env

@@ -12,10 +12,12 @@ CREDIT_HELP_LINK_URL=''
 CSRF_TOKEN_API_PATH=''
 DISCOVERY_API_BASE_URL=''
 DISCUSSIONS_MFE_BASE_URL=''
+DISCOUNT_CODE_INFO_URL=''
 ECOMMERCE_BASE_URL=''
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME=''
+ENTERPRISE_LEARNER_PORTAL_URL=''
 EXAMS_BASE_URL=''
 FAVICON_URL=''
 IGNORED_ERROR_REGEX=''
@@ -49,3 +51,6 @@ TWITTER_URL=''
 USER_INFO_COOKIE_NAME=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
 SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
+FEATURE_ENABLE_CHAT_V2_ENDPOINT=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -8,14 +8,16 @@ APP_ID='learning'
 BASE_URL='http://localhost:2000'
 CONTACT_URL='http://localhost:18000/contact'
 CREDENTIALS_BASE_URL='http://localhost:18150'
-CREDIT_HELP_LINK_URL='https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_credit_courses.html#keep-track-of-credit-requirements'
+CREDIT_HELP_LINK_URL='https://help.edx.org/edxlearner/s/article/Can-I-receive-college-credit-or-credit-hours-for-my-course'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
+DISCOUNT_CODE_INFO_URL=''
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
+ENTERPRISE_LEARNER_PORTAL_URL='http://localhost:8734'
 EXAMS_BASE_URL=''
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 IGNORED_ERROR_REGEX=''
@@ -51,3 +53,6 @@ CHAT_RESPONSE_URL='http://localhost:18000/api/learning_assistant/v1/course_id'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy'
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
 SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
+FEATURE_ENABLE_CHAT_V2_ENDPOINT='false'
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -8,14 +8,16 @@ APP_ID='learning'
 BASE_URL='http://localhost:2000'
 CONTACT_URL='http://localhost:18000/contact'
 CREDENTIALS_BASE_URL='http://localhost:18150'
-CREDIT_HELP_LINK_URL='https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_credit_courses.html#keep-track-of-credit-requirements'
+CREDIT_HELP_LINK_URL='https://help.edx.org/edxlearner/s/article/Can-I-receive-college-credit-or-credit-hours-for-my-course'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
+DISCOUNT_CODE_INFO_URL=''
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
+ENTERPRISE_LEARNER_PORTAL_URL='http://localhost:8734'
 EXAMS_BASE_URL='http://localhost:18740'
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 IGNORED_ERROR_REGEX=''
@@ -48,3 +50,5 @@ TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy'
 SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
+ENTERPRISE_LEARNER_PORTAL_URL='http://localhost:Enterprise'
+FEATURE_ENABLE_CHAT_V2_ENDPOINT='false'

.github/workflows/add-issue-to-btr-project.yml

@@ -0,0 +1,18 @@
+# Run the workflow that adds new tickets that are labelled "release testing"
+# to the org-wide BTR project board
+
+name: Add release testing issues to the BTR project board
+
+on:
+  issues:
+    types: [labeled]
+    # This workflow is triggered when an issue is labeled with 'release testing'.
+    # It adds the issue to the BTR project and applies the 'needs triage' label
+    # if it doesn't already have it.
+
+jobs:
+  handle-release-testing:
+    uses: openedx/.github/.github/workflows/add-issue-to-btr-project.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}

README.rst

@@ -41,9 +41,8 @@ Cloning and Setup
 
     git clone https://github.com/openedx/frontend-app-learning.git
 
-2. Use node v20.x.
+2. Use the version of Node specified in ``.nvmrc``.
 
-  The current version of the micro-frontend build scripts supports node 18.
   Using other major versions of node *may* work, but this is unsupported.  For
   convenience, this repository includes an ``.nvmrc`` file to help in setting the
   correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
@@ -131,7 +130,7 @@ Deployment
 
 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>`_.
+`MFE applications <https://openedx.github.io/frontend-platform/>`_.
 
 Plugins
 =======
@@ -145,7 +144,7 @@ Environment Variables
 This MFE is configured via environment variables supplied at build time.
 All micro-frontends have a shared set of required environment variables,
 as documented in the Open edX Developer Guide under
-`Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`_.
+`Required Environment Variables <https://openedx.github.io/frontend-platform/>`_.
 
 The learning micro-frontend also supports the following additional variables:
 

package.json

@@ -15,11 +15,11 @@
     "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
-    "postinstall": "patch-package",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "start:with-theme": "paragon install-theme && npm start && npm install",
     "dev": "PUBLIC_PATH=/learning/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
-    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "test": "NODE_ENV=test fedx-scripts jest --coverage --passWithNoTests",
     "test:watch": "fedx-scripts jest --watch --passWithNoTests",
     "types": "tsc --noEmit"
   },
@@ -35,20 +35,20 @@
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "1.5.0",
-    "@edx/frontend-component-header": "^5.8.0",
-    "@edx/frontend-lib-learning-assistant": "^2.19.2",
-    "@edx/frontend-lib-special-exams": "^3.1.3",
-    "@edx/frontend-platform": "^8.0.0",
-    "@edx/openedx-atlas": "^0.6.0",
-    "@edx/react-unit-test-utils": "3.0.0",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-lib-learning-assistant": "^2.23.1",
+    "@edx/frontend-lib-special-exams": "^4.0.0",
+    "@edx/frontend-platform": "^8.3.1",
+    "@edx/openedx-atlas": "^0.7.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.4",
-    "@openedx/frontend-build": "^14.2.0",
-    "@openedx/frontend-plugin-framework": "^1.2.1",
-    "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.3.0",
+    "@openedx/frontend-build": "^14.5.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.4.5",
     "@popperjs/core": "2.11.8",
     "@reduxjs/toolkit": "1.9.7",
     "buffer": "^6.0.3",
@@ -58,12 +58,11 @@
     "js-cookie": "3.0.5",
     "lodash": "^4.17.21",
     "lodash.camelcase": "4.3.0",
-    "patch-package": "^8.0.0",
     "postcss-loader": "^8.1.1",
     "prop-types": "15.8.1",
     "query-string": "^7.1.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "6.15.0",
@@ -79,9 +78,8 @@
   "devDependencies": {
     "@edx/reactifex": "2.2.0",
     "@pact-foundation/pact": "^13.0.0",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "14.6.1",
     "axios-mock-adapter": "2.1.0",
     "bundlewatch": "^0.4.0",
@@ -95,7 +93,7 @@
     "files": [
       {
         "path": "dist/*.js",
-        "maxSize": "1400kB"
+        "maxSize": "1450kB"
       }
     ],
     "normalizeFilenames": "^.+?(\\..+?)\\.\\w+$"

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

@@ -1,36 +0,0 @@
-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'),

src/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,228 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
+<React Strict Mode>
+  <ErrorPage
+    message="test-error-message"
+  />
+</React Strict Mode>
+`;
+
+exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
+<React Strict Mode>
+  <AppProvider
+    store={
+      {
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+        Symbol(Symbol.observable): [Function],
+      }
+    }
+  >
+    <HelmetWrapper
+      defer={true}
+      encodeSpecialCharacters={true}
+    >
+      <link
+        href="favicon-url"
+        rel="shortcut icon"
+        type="image/x-icon"
+      />
+    </HelmetWrapper>
+    <PathFixesProvider>
+      <NoticesProvider>
+        <UserMessagesProvider>
+          <div
+            className="app-container"
+          >
+            <Routes>
+              <Route
+                element={
+                  <PageWrap>
+                    <Page Not Found />
+                  </PageWrap>
+                }
+                path="*"
+              />
+              <Route
+                element={
+                  <PageWrap>
+                    <Goal Unsubscribe />
+                  </PageWrap>
+                }
+                path="/goal-unsubscribe/:token"
+              />
+              <Route
+                element={
+                  <PageWrap>
+                    <Courseware Redirect Landing Page />
+                  </PageWrap>
+                }
+                path="/redirect/*"
+              />
+              <Route
+                element={
+                  <PageWrap>
+                    <Preferences Unsubscribe />
+                  </PageWrap>
+                }
+                path="/preferences-unsubscribe/:userToken/:updatePatch?"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Course Access Error Page />
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId/access-denied"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Tab Container
+                      fetch={[Function]}
+                      slice="courseHome"
+                      tab="outline"
+                    >
+                      <Outline Tab />
+                    </Tab Container>
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId/home"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Tab Container
+                      fetch={[Function]}
+                      slice="courseHome"
+                      tab="lti_live"
+                    >
+                      <Live Tab />
+                    </Tab Container>
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId/live"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Tab Container
+                      fetch={[Function]}
+                      slice="courseHome"
+                      tab="dates"
+                    >
+                      <Dates Tab />
+                    </Tab Container>
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId/dates"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Tab Container
+                      fetch={[Function]}
+                      slice="courseHome"
+                      tab="discussion"
+                    >
+                      <Discussion Tab />
+                    </Tab Container>
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId/discussion/:path/*"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Tab Container
+                      fetch={[Function]}
+                      isProgressTab={true}
+                      slice="courseHome"
+                      tab="progress"
+                    >
+                      <Progress Tab />
+                    </Tab Container>
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId/progress/:targetUserId/"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Tab Container
+                      fetch={[Function]}
+                      isProgressTab={true}
+                      slice="courseHome"
+                      tab="progress"
+                    >
+                      <Progress Tab />
+                    </Tab Container>
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId/progress"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Tab Container
+                      fetch={[Function]}
+                      slice="courseware"
+                      tab="courseware"
+                    >
+                      <Course Exit />
+                    </Tab Container>
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId/course-end"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Courseware Container />
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId/:sequenceId/:unitId"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Courseware Container />
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId/:sequenceId"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Courseware Container />
+                  </DecodePageRoute>
+                }
+                path="/course/:courseId"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Courseware Container />
+                  </DecodePageRoute>
+                }
+                path="/preview/course/:courseId/:sequenceId/:unitId"
+              />
+              <Route
+                element={
+                  <DecodePageRoute>
+                    <Courseware Container />
+                  </DecodePageRoute>
+                }
+                path="/preview/course/:courseId/:sequenceId"
+              />
+            </Routes>
+          </div>
+        </UserMessagesProvider>
+      </NoticesProvider>
+    </PathFixesProvider>
+  </AppProvider>
+</React Strict Mode>
+`;

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

@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import {
-  FormattedMessage, FormattedDate, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage, FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 import { Alert, Hyperlink } from '@openedx/paragon';
 import { Info } from '@openedx/paragon/icons';
 
 import messages from './messages';
 
-const AccessExpirationAlert = ({ intl, payload }) => {
+const AccessExpirationAlert = ({ payload }) => {
+  const intl = useIntl();
   const {
     accessExpiration,
     courseId,
@@ -119,7 +118,6 @@ const AccessExpirationAlert = ({ intl, payload }) => {
 };
 
 AccessExpirationAlert.propTypes = {
-  intl: intlShape.isRequired,
   payload: PropTypes.shape({
     accessExpiration: PropTypes.shape({
       expirationDate: PropTypes.string.isRequired,
@@ -134,4 +132,4 @@ AccessExpirationAlert.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(AccessExpirationAlert);
+export default AccessExpirationAlert;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { Alert, Hyperlink } from '@openedx/paragon';
 import { WarningFilled } from '@openedx/paragon/icons';
@@ -7,7 +7,8 @@ import { WarningFilled } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 import genericMessages from './messages';
 
-const ActiveEnterpriseAlert = ({ intl, payload }) => {
+const ActiveEnterpriseAlert = ({ payload }) => {
+  const intl = useIntl();
   const { text, courseId } = payload;
   const changeActiveEnterprise = (
     <Hyperlink
@@ -38,11 +39,10 @@ const ActiveEnterpriseAlert = ({ intl, payload }) => {
 };
 
 ActiveEnterpriseAlert.propTypes = {
-  intl: intlShape.isRequired,
   payload: PropTypes.shape({
     text: PropTypes.string,
     courseId: PropTypes.string,
   }).isRequired,
 };
 
-export default injectIntl(ActiveEnterpriseAlert);
+export default ActiveEnterpriseAlert;

src/alerts/enrollment-alert/EnrollmentAlert.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { Alert, Button } from '@openedx/paragon';
 import { Info, WarningFilled } from '@openedx/paragon/icons';
@@ -11,7 +11,8 @@ import { useModel } from '../../generic/model-store';
 import messages from './messages';
 import useEnrollClickHandler from './clickHook';
 
-const EnrollmentAlert = ({ intl, payload }) => {
+const EnrollmentAlert = ({ payload }) => {
+  const intl = useIntl();
   const {
     canEnroll,
     courseId,
@@ -58,7 +59,6 @@ const EnrollmentAlert = ({ intl, payload }) => {
 };
 
 EnrollmentAlert.propTypes = {
-  intl: intlShape.isRequired,
   payload: PropTypes.shape({
     canEnroll: PropTypes.bool,
     courseId: PropTypes.string,
@@ -67,4 +67,4 @@ EnrollmentAlert.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(EnrollmentAlert);
+export default EnrollmentAlert;

src/alerts/logistration-alert/AccountActivationAlert.jsx

@@ -9,13 +9,12 @@ import {
   Icon,
 } from '@openedx/paragon';
 import { Check, ArrowForward } from '@openedx/paragon/icons';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { sendActivationEmail } from '../../courseware/data';
 import messages from './messages';
 
-const AccountActivationAlert = ({
-  intl,
-}) => {
+const AccountActivationAlert = () => {
+  const intl = useIntl();
   const [showModal, setShowModal] = useState(false);
   const [showSpinner, setShowSpinner] = useState(false);
   const [showCheck, setShowCheck] = useState(false);
@@ -125,8 +124,4 @@ const AccountActivationAlert = ({
   );
 };
 
-AccountActivationAlert.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(AccountActivationAlert);
+export default AccountActivationAlert;

src/alerts/logistration-alert/LogistrationAlert.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
 import { Alert, Hyperlink } from '@openedx/paragon';
 import { WarningFilled } from '@openedx/paragon/icons';
 
 import genericMessages from '../../generic/messages';
 
-const LogistrationAlert = ({ intl }) => {
+const LogistrationAlert = () => {
+  const intl = useIntl();
   const signIn = (
     <Hyperlink
       style={{ textDecoration: 'underline' }}
@@ -43,8 +44,4 @@ const LogistrationAlert = ({ intl }) => {
   );
 };
 
-LogistrationAlert.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(LogistrationAlert);
+export default LogistrationAlert;

src/constants.ts

@@ -22,7 +22,7 @@ export const DECODE_ROUTES = {
 
 export const ROUTES = {
   UNSUBSCRIBE: '/goal-unsubscribe/:token',
-  PREFERENCES_UNSUBSCRIBE: '/preferences-unsubscribe/:userToken/:updatePatch',
+  PREFERENCES_UNSUBSCRIBE: '/preferences-unsubscribe/:userToken/:updatePatch?',
   REDIRECT: '/redirect/*',
   DASHBOARD: 'dashboard',
   ENTERPRISE_LEARNER_DASHBOARD: 'enterprise-learner-dashboard',

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tabs, Tab } from '@openedx/paragon';
 
 import { useParams } from 'react-router';
@@ -13,7 +13,8 @@ const filterTypes = ['text', 'video', 'sequence'];
 const filterOther = 'other';
 const validFilters = [filterAll, ...filterTypes, filterOther];
 
-export const CoursewareSearchResultsFilter = ({ intl }) => {
+export const CoursewareSearchResultsFilter = () => {
+  const intl = useIntl();
   const { courseId } = useParams();
   const lastSearch = useModel('contentSearchResults', courseId);
   const { filter: filterKeyword, setFilter } = useCoursewareSearchParams();
@@ -63,7 +64,6 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
       variant="tabs"
       activeKey={activeKey}
       onSelect={setFilter}
-      aria-label={intl.formatMessage(messages.searchResultsFilterDescription)}
     >
       {filters.filter(({ count }) => (count > 0)).map(({ key, label }) => (
         <Tab key={key} eventKey={key} title={label} data-testid={`courseware-search-results-tabs-${key}`}>
@@ -74,8 +74,4 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
   );
 };
 
-CoursewareSearchResultsFilter.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CoursewareSearchResultsFilter);
+export default CoursewareSearchResultsFilter;

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

@@ -141,15 +141,7 @@ const CoursewareSearch = ({ ...sectionProps }) => {
               </Button>
             </div>
           </div>
-          <div
-            key={status}
-            className="courseware-search__results"
-            aria-live="assertive"
-            aria-atomic="true"
-            aria-busy={status === 'loading'}
-            data-testid="courseware-search-results"
-            role={status === 'results' ? 'alert' : 'none'}
-          >
+          <div className="courseware-search__results" aria-live="polite" data-testid="courseware-search-results">
             {status === 'loading' ? (
               <div className="courseware-search__spinner" data-testid="courseware-search-spinner">
                 <Spinner animation="border" variant="light" screenReaderText={formatMessage(messages.loading)} />
@@ -165,6 +157,8 @@ const CoursewareSearch = ({ ...sectionProps }) => {
                 {total > 0 ? (
                   <div
                     className="courseware-search__results-summary"
+                    aria-relevant="all"
+                    aria-atomic="true"
                     data-testid="courseware-search-summary"
                   >{formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
                   </div>

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

@@ -244,7 +244,7 @@ describe('CoursewareSearch', () => {
       expect(screen.queryByTestId('courseware-search-summary')).not.toBeInTheDocument();
     });
 
-    it('should show a wrapper div with proper aria attributes', () => {
+    it('should show a summary for the results within a container with aria-live="polite"', () => {
       mockModels({
         searchKeyword: 'fubar',
         total: 1,
@@ -253,9 +253,7 @@ describe('CoursewareSearch', () => {
 
       const results = screen.queryByTestId('courseware-search-results');
 
-      expect(results).toHaveAttribute('aria-live', 'assertive');
-      expect(results).toHaveAttribute('aria-atomic', 'true');
-      expect(results).toHaveAttribute('role', 'alert');
+      expect(results).toHaveAttribute('aria-live', 'polite');
       expect(within(results).queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
     });
   });

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

@@ -1,15 +1,14 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 
-const CoursewareSearchEmpty = ({ intl }) => (
-  <div className="courseware-search-results">
-    <p className="courseware-search-results__empty" data-testid="no-results">{intl.formatMessage(messages.searchResultsNone)}</p>
-  </div>
-);
-
-CoursewareSearchEmpty.propTypes = {
-  intl: intlShape.isRequired,
+const CoursewareSearchEmpty = () => {
+  const intl = useIntl();
+  return (
+    <div className="courseware-search-results">
+      <p className="courseware-search-results__empty" data-testid="no-results">{intl.formatMessage(messages.searchResultsNone)}</p>
+    </div>
+  );
 };
 
-export default injectIntl(CoursewareSearchEmpty);
+export default CoursewareSearchEmpty;

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

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

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 import { ManageSearch } from '@openedx/paragon/icons';
 import { useDispatch } from 'react-redux';
@@ -7,9 +7,8 @@ import messages from './messages';
 import { useCoursewareSearchFeatureFlag, useCoursewareSearchParams } from './hooks';
 import { setShowSearch } from '../data/slice';
 
-const CoursewareSearchToggle = ({
-  intl,
-}) => {
+const CoursewareSearchToggle = () => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const enabled = useCoursewareSearchFeatureFlag();
   const { query } = useCoursewareSearchParams();
@@ -41,8 +40,4 @@ const CoursewareSearchToggle = ({
   );
 };
 
-CoursewareSearchToggle.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CoursewareSearchToggle);
+export default CoursewareSearchToggle;

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

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

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

@@ -9,8 +9,8 @@
   height: 100%;
   max-width: none;
   margin: 0;
-  border-top: 1px solid $light-300;
-  z-index: $zindex-modal; // Bootstrap's z-index layer for Modals.
+  border-top: 1px solid var(--pgn-color-light-300);
+  z-index: var(--pgn-elevation-modal-zindex); // Bootstrap's z-index layer for Modals.
 
   &__form {
     position: relative;
@@ -47,7 +47,7 @@
 
   &__results-summary {
     font-size: .9rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     padding: 1rem 0 .5rem;
   }
 
@@ -62,7 +62,7 @@
   margin-top: 1.5rem;
 
   &__empty {
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     padding: 6rem 0;
     text-align: center;
   }
@@ -76,17 +76,17 @@
 
     &:hover {
       text-decoration: none;
-      background: $light-300;
+      background: var(--pgn-color-light-300);
     }
 
     &:not(:first-child) {
-      border-top: 1px solid $light-300;
+      border-top: 1px solid var(--pgn-color-light-300);
     }
   }
 
   &__icon {
     padding: 0.375rem 0 0 0.375rem;
-    color: $gray-300;
+    color: var(--pgn-color-gray-300);
   }
 
   &__info {
@@ -99,12 +99,7 @@
     align-items: center;
     line-height: 2.5;
     font-size: 0.875rem;
-    color: $black;
-
-    > h3 {
-      font-size: inherit;
-      margin: 0;
-    }
+    color: var(--pgn-color-black);
 
     > span {
       display: block;
@@ -118,7 +113,7 @@
       font-variant-numeric: lining-nums tabular-nums;
       min-width: 1.25rem;
       line-height: 1rem;
-      background: $light-300;
+      background: var(--pgn-color-light-300);
       border-radius: 99rem;
       font-style: normal;
       margin-left: 0.375rem;
@@ -130,7 +125,7 @@
   &__breadcrumbs {
     display: flex;
     gap: 1.25rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     overflow: hidden;
     list-style: none;
     padding: 0;
@@ -161,14 +156,14 @@
 }
 
 .courseware-search-results-tabs {
-  border-bottom-color: $gray-400 !important;
+  border-bottom-color: var(--pgn-color-gray-400) !important;
 
   &.nav-tabs .nav-link.active {
     border-bottom-width: 4px !important;
   }
 }
 
-@media (min-width: map-get($grid-breakpoints, 'md')) {
+@media (--pgn-size-breakpoint-min-width-md) {
   .courseware-search {
     &__close {
       right: -2.5rem;

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

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act, waitFor } from '@testing-library/react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { fetchCoursewareSearchSettings } from '../data/thunks';
@@ -38,13 +38,13 @@ describe('CoursewareSearch Hooks', () => {
 
     it('should return true if feature is enabled', async () => {
       const hook = await renderTestHook();
-      await hook.waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
+      await waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
       expect(hook.result.current).toBe(true);
     });
 
     it('should return false if feature is disabled', async () => {
       const hook = await renderTestHook(false);
-      await hook.waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
+      await waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
       expect(hook.result.current).toBe(false);
     });
   });
@@ -125,7 +125,7 @@ describe('CoursewareSearch Hooks', () => {
       it('should return the element bounding box', async () => {
         const hook = await renderTestHook({ elementId: 'test', mockedInfo });
 
-        hook.waitFor(() => expect(getBoundingClientRectSpy).toHaveBeenCalled());
+        await waitFor(() => expect(getBoundingClientRectSpy).toHaveBeenCalled());
 
         expect(hook.result.current).toEqual(mockedInfo);
       });

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

@@ -56,21 +56,7 @@ const messages = defineMessages({
     defaultMessage: 'There was an error on the search process. Please try again in a few minutes. If the problem persists, please contact the support team.',
     description: 'Error message to show to the users when there\'s an error with the endpoint or the returned payload format.',
   },
-  searchResultsFilterDescription: {
-    id: 'learn.coursewareSearch.searchResultsFilterDescription',
-    defaultMessage: 'Search result filters',
-    description: 'Screen Reader text to describe the filter options.',
-  },
-  searchResultsBreadcrumb: {
-    id: 'learn.coursewareSearch.searchResultsBreadcrumb',
-    defaultMessage: 'Location: {path}.',
-    description: 'Screen Reader text to describe the search result breadcrumbs.',
-  },
-  searchResultsBreadcrumbSeparator: {
-    id: 'learn.searchResultsBreadcrumbSeparator',
-    defaultMessage: ', then ',
-    description: 'Screen Reader text to connect breadcrumb sections. i.e.: "Introduction, then Register, then Something else.',
-  },
+
   // These are translations for labeling the filters
   'filter:all': {
     id: 'learn.coursewareSearch.filter:all',

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

@@ -31,7 +31,6 @@ Factory.define('outlineTabData')
     course_access_redirect: false,
     has_scheduled_content: null,
     access_expiration: null,
-    can_show_upgrade_sock: false,
     cert_data: {
       cert_status: null,
       cert_web_view_url: null,

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

@@ -489,7 +489,6 @@ exports[`Data layer integration tests Test fetchOutlineTab Should fetch, normali
     "outline": {
       "course-v1:edX+DemoX+Demo_Course": {
         "accessExpiration": null,
-        "canShowUpgradeSock": false,
         "certData": {
           "certStatus": null,
           "certWebViewUrl": null,

src/course-home/data/api.js

@@ -367,7 +367,6 @@ export async function getOutlineTabData(courseId) {
   } = tabData;
 
   const accessExpiration = camelCaseObject(data.access_expiration);
-  const canShowUpgradeSock = data.can_show_upgrade_sock;
   const certData = camelCaseObject(data.cert_data);
   const courseBlocks = data.course_blocks ? normalizeOutlineBlocks(courseId, data.course_blocks.blocks) : {};
   const courseGoals = camelCaseObject(data.course_goals);
@@ -389,7 +388,6 @@ export async function getOutlineTabData(courseId) {
 
   return {
     accessExpiration,
-    canShowUpgradeSock,
     certData,
     courseBlocks,
     courseGoals,

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

@@ -46,7 +46,6 @@ describe('Course Home Service', () => {
           willRespondWith: {
             status: 200,
             body: {
-              can_show_upgrade_sock: boolean(false),
               verified_mode: like({
                 access_expiration_date: null,
                 currency: 'USD',
@@ -94,7 +93,6 @@ describe('Course Home Service', () => {
           },
         });
         const normalizedTabData = {
-          canShowUpgradeSock: false,
           verifiedMode: {
             accessExpirationDate: null,
             currency: 'USD',

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 import Timeline from './timeline/Timeline';
@@ -14,7 +14,8 @@ import ShiftDatesAlert from '../suggested-schedule-messaging/ShiftDatesAlert';
 import UpgradeToCompleteAlert from '../suggested-schedule-messaging/UpgradeToCompleteAlert';
 import UpgradeToShiftDatesAlert from '../suggested-schedule-messaging/UpgradeToShiftDatesAlert';
 
-const DatesTab = ({ intl }) => {
+const DatesTab = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -59,8 +60,4 @@ const DatesTab = ({ intl }) => {
   );
 };
 
-DatesTab.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(DatesTab);
+export default DatesTab;

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

@@ -5,8 +5,7 @@ import { useSelector } from 'react-redux';
 import {
   FormattedDate,
   FormattedTime,
-  injectIntl,
-  intlShape,
+  useIntl,
 } from '@edx/frontend-platform/i18n';
 import { Tooltip, OverlayTrigger } from '@openedx/paragon';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
@@ -20,10 +19,10 @@ import { isLearnerAssignment } from '../utils';
 const Day = ({
   date,
   first,
-  intl,
   items,
   last,
 }) => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -108,7 +107,6 @@ const Day = ({
 Day.propTypes = {
   date: PropTypes.objectOf(Date).isRequired,
   first: PropTypes.bool,
-  intl: intlShape.isRequired,
   items: PropTypes.arrayOf(PropTypes.shape({
     date: PropTypes.string,
     dateType: PropTypes.string,
@@ -126,4 +124,4 @@ Day.defaultProps = {
   last: false,
 };
 
-export default injectIntl(Day);
+export default Day;

src/course-home/discussion-tab/DiscussionTab.jsx

@@ -1,5 +1,4 @@
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl } from '@edx/frontend-platform/i18n';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams, generatePath, useNavigate } from 'react-router-dom';
@@ -30,6 +29,4 @@ const DiscussionTab = () => {
   );
 };
 
-DiscussionTab.propTypes = {};
-
-export default injectIntl(DiscussionTab);
+export default DiscussionTab;

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import HeaderSlot from '../../plugin-slots/HeaderSlot';
 import PageLoading from '../../generic/PageLoading';
@@ -10,7 +10,8 @@ import { unsubscribeFromCourseGoal } from '../data/api';
 import messages from './messages';
 import ResultPage from './ResultPage';
 
-const GoalUnsubscribe = ({ intl }) => {
+const GoalUnsubscribe = () => {
+  const intl = useIntl();
   const { token } = useParams();
   const [error, setError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -51,8 +52,4 @@ const GoalUnsubscribe = ({ intl }) => {
   );
 };
 
-GoalUnsubscribe.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(GoalUnsubscribe);
+export default GoalUnsubscribe;

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

@@ -1,28 +1,26 @@
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Hyperlink } from '@openedx/paragon';
 
 import messages from './messages';
 import { ReactComponent as UnsubscribeIcon } from './unsubscribe.svg';
 
-const ResultPage = ({ courseTitle, error, intl }) => {
-  const errorDescription = (
-    <FormattedMessage
-      id="learning.goals.unsubscribe.errorDescription"
-      defaultMessage="We were unable to unsubscribe you from goal reminder emails. Please try again later or {contactSupport} for help."
-      values={{
-        contactSupport: (
-          <Hyperlink
-            className="text-reset"
-            style={{ textDecoration: 'underline' }}
-            destination={`${getConfig().CONTACT_URL}`}
-          >
-            {intl.formatMessage(messages.contactSupport)}
-          </Hyperlink>
-        ),
-      }}
-    />
+const ResultPage = ({ courseTitle, error }) => {
+  const intl = useIntl();
+  const errorDescription = intl.formatMessage(
+    messages.errorDescription,
+    {
+      contactSupport: (
+        <Hyperlink
+          className="text-reset"
+          style={{ textDecoration: 'underline' }}
+          destination={`${getConfig().CONTACT_URL}`}
+        >
+          {intl.formatMessage(messages.contactSupport)}
+        </Hyperlink>
+      ),
+    },
   );
 
   const header = error
@@ -54,7 +52,6 @@ ResultPage.defaultProps = {
 ResultPage.propTypes = {
   courseTitle: PropTypes.string,
   error: PropTypes.bool,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(ResultPage);
+export default ResultPage;

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

@@ -16,6 +16,11 @@ const messages = defineMessages({
     defaultMessage: 'Something went wrong',
     description: 'It indicate that the unsubscribing request has failed',
   },
+  errorDescription: {
+    id: 'learning.goals.unsubscribe.errorDescription',
+    defaultMessage: 'We were unable to unsubscribe you from goal reminder emails. Please try again later or {contactSupport} for help.',
+    description: 'Message that notifies user that unsubscribing failed and to try again',
+  },
   goToDashboard: {
     id: 'learning.goals.unsubscribe.goToDashboard',
     defaultMessage: 'Go to dashboard',

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

@@ -65,6 +65,7 @@ const DateSummary = ({
         )}
         {!linkedTitle && dateBlock.link && (
           <a
+            id={dateBlock.dateType === 'verified-upgrade-deadline' ? 'date-verified-upgrade-deadline' : ''}
             href={dateBlock.link}
             onClick={dateBlock.dateType === 'verified-upgrade-deadline' ? logVerifiedUpgradeClick : () => {}}
             className="description-link"

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

@@ -5,7 +5,7 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { CourseOutlineTabNotificationsSlot } from '../../plugin-slots/CourseOutlineTabNotificationsSlot';
 import { AlertList } from '../../generic/user-messages';
 
 import CourseDates from './widgets/CourseDates';
@@ -16,7 +16,6 @@ import CourseTools from './widgets/CourseTools';
 import { fetchOutlineTab } from '../data';
 import messages from './messages';
 import ShiftDatesAlert from '../suggested-schedule-messaging/ShiftDatesAlert';
-import UpgradeNotification from '../../generic/upgrade-notification/UpgradeNotification';
 import UpgradeToShiftDatesAlert from '../suggested-schedule-messaging/UpgradeToShiftDatesAlert';
 import useCertificateAvailableAlert from './alerts/certificate-status-alert';
 import useCourseEndAlert from './alerts/course-end-alert';
@@ -40,13 +39,11 @@ const OutlineTab = () => {
     isSelfPaced,
     org,
     title,
-    userTimezone,
   } = useModel('courseHomeMeta', courseId);
 
   const expandButtonRef = useRef();
 
   const {
-    accessExpiration,
     courseBlocks: {
       courses,
       sections,
@@ -55,20 +52,12 @@ const OutlineTab = () => {
       selectedGoal,
       weeklyLearningGoalEnabled,
     } = {},
-    datesBannerInfo,
     datesWidget: {
       courseDateBlocks,
     },
     enableProctoredExams,
-    offer,
-    timeOffsetMillis,
-    verifiedMode,
   } = useModel('outline', courseId);
 
-  const {
-    marketingUrl,
-  } = useModel('coursewareMeta', courseId);
-
   const [expandAll, setExpandAll] = useState(false);
   const navigate = useNavigate();
 
@@ -192,27 +181,7 @@ const OutlineTab = () => {
               />
             )}
             <CourseTools />
-            <PluginSlot
-              id="outline_tab_notifications_slot"
-              pluginProps={{
-                courseId,
-                model: 'outline',
-              }}
-            >
-              <UpgradeNotification
-                offer={offer}
-                verifiedMode={verifiedMode}
-                accessExpiration={accessExpiration}
-                contentTypeGatingEnabled={datesBannerInfo.contentTypeGatingEnabled}
-                marketingUrl={marketingUrl}
-                upsellPageName="course_home"
-                userTimezone={userTimezone}
-                shouldDisplayBorder
-                timeOffsetMillis={timeOffsetMillis}
-                courseId={courseId}
-                org={org}
-              />
-            </PluginSlot>
+            <CourseOutlineTabNotificationsSlot courseId={courseId} />
             <CourseDates />
             <CourseHandouts />
           </div>

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

@@ -5,7 +5,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Factory } from 'rosie';
 import { getConfig } from '@edx/frontend-platform';
-import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import MockAdapter from 'axios-mock-adapter';
 import Cookies from 'js-cookie';
@@ -139,7 +139,7 @@ describe('Outline Tab', () => {
       });
       await fetchAndRender();
 
-      expect(screen.getByTestId('outline_tab_notifications_slot')).toBeInTheDocument();
+      expect(screen.getByTestId('org.openedx.frontend.learning.course_outline_tab_notifications.v1')).toBeInTheDocument();
     });
 
     it('handles expand/collapse all button click', async () => {
@@ -1190,80 +1190,6 @@ describe('Outline Tab', () => {
     });
   });
 
-  describe('Upgrade Card', () => {
-    it('renders title when upgrade is available', async () => {
-      await fetchAndRender();
-      expect(screen.queryByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument();
-    });
-
-    it('displays link to upgrade', async () => {
-      await fetchAndRender();
-      expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
-    });
-
-    it('viewing upgrade card sends analytics', async () => {
-      sendTrackEvent.mockClear();
-      sendTrackingLogEvent.mockClear();
-      await fetchAndRender();
-
-      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
-      expect(sendTrackEvent).toHaveBeenCalledWith('Promotion Viewed', {
-        org_key: 'edX',
-        courserun_key: courseId,
-        creative: 'sidebarupsell',
-        name: 'In-Course Verification Prompt',
-        position: 'sidebar-message',
-        promotion_id: 'courseware_verified_certificate_upsell',
-      });
-
-      expect(sendTrackingLogEvent).toHaveBeenCalledTimes(1);
-      expect(sendTrackingLogEvent).toHaveBeenCalledWith('edx.bi.course.upgrade.sidebarupsell.displayed', {
-        org_key: 'edX',
-        courserun_key: courseId,
-      });
-    });
-
-    it('clicking upgrade link sends analytics', async () => {
-      await fetchAndRender();
-
-      // Clearing after render to remove any events sent on view (ex. 'Promotion Viewed')
-      sendTrackEvent.mockClear();
-      sendTrackingLogEvent.mockClear();
-      const upgradeButton = screen.getByRole('link', { name: 'Upgrade for $149' });
-
-      fireEvent.click(upgradeButton);
-
-      expect(sendTrackEvent).toHaveBeenCalledTimes(2);
-      expect(sendTrackEvent).toHaveBeenNthCalledWith(1, 'Promotion Clicked', {
-        org_key: 'edX',
-        courserun_key: courseId,
-        creative: 'sidebarupsell',
-        name: 'In-Course Verification Prompt',
-        position: 'sidebar-message',
-        promotion_id: 'courseware_verified_certificate_upsell',
-      });
-      expect(sendTrackEvent).toHaveBeenNthCalledWith(2, 'edx.bi.ecommerce.upsell_links_clicked', {
-        org_key: 'edX',
-        courserun_key: courseId,
-        linkCategory: 'green_upgrade',
-        linkName: 'course_home_green',
-        linkType: 'button',
-        pageName: 'course_home',
-      });
-
-      expect(sendTrackingLogEvent).toHaveBeenCalledTimes(2);
-      expect(sendTrackingLogEvent).toHaveBeenNthCalledWith(1, 'edx.bi.course.upgrade.sidebarupsell.clicked', {
-        org_key: 'edX',
-        courserun_key: courseId,
-      });
-      expect(sendTrackingLogEvent).toHaveBeenNthCalledWith(2, 'edx.course.enrollment.upgrade.clicked', {
-        org_key: 'edX',
-        courserun_key: courseId,
-        location: 'sidebar-message',
-      });
-    });
-  });
-
   describe('Account Activation Alert', () => {
     beforeEach(() => {
       const intersectionObserverMock = () => ({

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

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import {
   FormattedDate,
   FormattedMessage,
-  injectIntl,
-  intlShape,
+  useIntl,
 } from '@edx/frontend-platform/i18n';
 import { Alert, Button } from '@openedx/paragon';
 import { useDispatch } from 'react-redux';
@@ -25,7 +24,8 @@ export const CERT_STATUS_TYPE = {
   UNVERIFIED: 'unverified',
 };
 
-const CertificateStatusAlert = ({ intl, payload }) => {
+const CertificateStatusAlert = ({ payload }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const {
     certificateAvailableDate,
@@ -192,7 +192,6 @@ const CertificateStatusAlert = ({ intl, payload }) => {
 };
 
 CertificateStatusAlert.propTypes = {
-  intl: intlShape.isRequired,
   payload: PropTypes.shape({
     certificateAvailableDate: PropTypes.string,
     certStatus: PropTypes.string,
@@ -210,4 +209,4 @@ CertificateStatusAlert.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(CertificateStatusAlert);
+export default CertificateStatusAlert;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
 import { Alert, Button, Hyperlink } from '@openedx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -14,7 +14,8 @@ import outlineMessages from '../../messages';
 import useEnrollClickHandler from '../../../../alerts/enrollment-alert/clickHook';
 import { useModel } from '../../../../generic/model-store';
 
-const PrivateCourseAlert = ({ intl, payload }) => {
+const PrivateCourseAlert = ({ payload }) => {
+  const intl = useIntl();
   const {
     anonymousUser,
     canEnroll,
@@ -103,7 +104,6 @@ const PrivateCourseAlert = ({ intl, payload }) => {
 };
 
 PrivateCourseAlert.propTypes = {
-  intl: intlShape.isRequired,
   payload: PropTypes.shape({
     anonymousUser: PropTypes.bool,
     canEnroll: PropTypes.bool,
@@ -111,4 +111,4 @@ PrivateCourseAlert.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(PrivateCourseAlert);
+export default PrivateCourseAlert;

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

@@ -1,15 +1,14 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import DateSummary from '../DateSummary';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 
-const CourseDates = ({
-  intl,
-}) => {
+const CourseDates = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -40,7 +39,7 @@ const CourseDates = ({
             />
           ))}
         </ol>
-        <a className="font-weight-bold ml-4 pl-1 small" href={datesTabLink}>
+        <a id="dates-tab-link" className="font-weight-bold ml-4 pl-1 small" href={datesTabLink}>
           {intl.formatMessage(messages.allDates)}
         </a>
       </div>
@@ -48,8 +47,4 @@ const CourseDates = ({
   );
 };
 
-CourseDates.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseDates);
+export default CourseDates;

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import LmsHtmlFragment from '../LmsHtmlFragment';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 
-const CourseHandouts = ({ intl }) => {
+const CourseHandouts = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -31,8 +32,4 @@ const CourseHandouts = ({ intl }) => {
   );
 };
 
-CourseHandouts.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseHandouts);
+export default CourseHandouts;

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

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faBookmark, faCertificate, faInfo, faCalendar, faStar,
@@ -14,7 +14,8 @@ import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 import LaunchCourseHomeTourButton from '../../../product-tours/newUserCourseHomeTour/LaunchCourseHomeTourButton';
 
-const CourseTools = ({ intl }) => {
+const CourseTools = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -81,8 +82,4 @@ const CourseTools = ({ intl }) => {
   );
 };
 
-CourseTools.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseTools);
+export default CourseTools;

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

@@ -1,22 +1,18 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .flag-button {
-  background-color: $white;
-  border: 1px solid $light-400;
+  background-color: var(--pgn-color-white);
+  border: 1px solid var(--pgn-color-light-400);
   border-radius: .2rem;
-  box-shadow: 0 0 0 2px $light-400;
+  box-shadow: 0 0 0 2px var(--pgn-color-light-400);
 
   &:hover {
-    border: 1px solid $primary-300;
-    box-shadow: 0 0 0 2px $white;
+    border: 1px solid var(--pgn-color-primary-300);
+    box-shadow: 0 0 0 2px var(--pgn-color-white);
   }
 }
 
 .flag-button-selected {
-  border: 1px solid $primary-300;
-  box-shadow: 0 0 0 2px $primary-300;
+  border: 1px solid var(--pgn-color-primary-300);
+  box-shadow: 0 0 0 2px var(--pgn-color-primary-300);
   pointer-events: none;
 }
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 // These flag svgs are derivatives of the Flag icon from paragon
 import { ReactComponent as FlagIntenseIcon } from './flag_black.svg';
 import { ReactComponent as FlagCasualIcon } from './flag_outline.svg';
@@ -13,8 +13,8 @@ const LearningGoalButton = ({
   level,
   isSelected,
   handleSelect,
-  intl,
 }) => {
+  const intl = useIntl();
   const buttonDetails = {
     casual: {
       daysPerWeek: 1,
@@ -53,7 +53,6 @@ LearningGoalButton.propTypes = {
   level: PropTypes.string.isRequired,
   isSelected: PropTypes.bool.isRequired,
   handleSelect: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(LearningGoalButton);
+export default LearningGoalButton;

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import camelCase from 'lodash.camelcase';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 
 import messages from '../messages';
@@ -10,7 +10,8 @@ import { getProctoringInfoData } from '../../data/api';
 import { fetchProctoringInfoResolved } from '../../data/slice';
 import { useModel } from '../../../generic/model-store';
 
-const ProctoringInfoPanel = ({ intl }) => {
+const ProctoringInfoPanel = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -216,8 +217,4 @@ const ProctoringInfoPanel = ({ intl }) => {
   );
 };
 
-ProctoringInfoPanel.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(ProctoringInfoPanel);
+export default ProctoringInfoPanel;

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

@@ -1,10 +1,10 @@
 .outline-sidebar-proctoring-panel {
-  border: 1px solid $dark-500;
-  border-top: 5px solid $brand-600;
+  border: 1px solid var(--pgn-color-dark-500);
+  border-top: 5px solid var(--pgn-color-brand-600);
 }
 .proctoring-onboarding-success {
-  border-top: 5px solid $primary-500;
+  border-top: 5px solid var(--pgn-color-primary-500);
 }
 .proctoring-onboarding-submitted {
-  border-top: 5px solid $dark-500;
+  border-top: 5px solid var(--pgn-color-dark-500);
 }

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Button, Card } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useSelector } from 'react-redux';
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 
-const StartOrResumeCourseCard = ({ intl }) => {
+const StartOrResumeCourseCard = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -62,8 +63,4 @@ const StartOrResumeCourseCard = ({ intl }) => {
   );
 };
 
-StartOrResumeCourseCard.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(StartOrResumeCourseCard);
+export default StartOrResumeCourseCard;

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

@@ -6,7 +6,7 @@ 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 { useIntl } from '@edx/frontend-platform/i18n';
 import { Email } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 import messages from '../messages';
@@ -18,8 +18,8 @@ import './FlagButton.scss';
 const WeeklyLearningGoalCard = ({
   daysPerWeek,
   subscribedToReminders,
-  intl,
 }) => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -152,11 +152,10 @@ const WeeklyLearningGoalCard = ({
 WeeklyLearningGoalCard.propTypes = {
   daysPerWeek: PropTypes.number,
   subscribedToReminders: PropTypes.bool,
-  intl: intlShape.isRequired,
 };
 
 WeeklyLearningGoalCard.defaultProps = {
   daysPerWeek: null,
   subscribedToReminders: false,
 };
-export default injectIntl(WeeklyLearningGoalCard);
+export default WeeklyLearningGoalCard;

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

@@ -7,18 +7,18 @@
 
 .donut-chart-label {
   font: {
-    family: $font-family-sans-serif;
+    family: var(--pgn-typography-font-family-sans-serif);
     size: .2rem;
-    weight: $font-weight-normal;
+    weight: var(--pgn-typography-font-weight-normal);
   }
   text-anchor: middle;
 }
 
 .donut-chart-number {
   font: {
-    family: $font-family-monospace;
+    family: var(--pgn-typography-font-family-monospace);
     size: .5rem;
-    weight: $font-weight-bold;
+    weight: var(--pgn-typography-font-weight-bold);
   }
   line-height: 1rem;
   text-anchor: middle;
@@ -29,7 +29,7 @@
 }
 
 .donut-chart-text {
-  fill: $primary-500;
+  fill: var(--pgn-color-primary-500);
   -moz-transform: translateY(0.25em);
   -ms-transform: translateY(0.25em);
   -webkit-transform: translateY(0.25em);
@@ -56,7 +56,7 @@
 
 .donut-ring, .donut-segment, .donut-hole {
   &.complete-stroke {
-    stroke: $info-500;
+    stroke: var(--pgn-color-info-500);
   }
 
   &.divider-stroke {
@@ -65,10 +65,10 @@
   }
 
   &.incomplete-stroke {
-    stroke: $light-300;
+    stroke: var(--pgn-color-light-300);
   }
 
   &.locked-stroke {
-    stroke: $primary-500;
+    stroke: var(--pgn-color-primary-500);
   }
 }

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

@@ -48,7 +48,7 @@ const CourseGradeHeader = () => {
     previewText = intl.formatMessage(messages.courseGradePreviewUpgradeDeadlinePassedBody);
   }
   return (
-    <div className="row w-100 m-0 p-4 rounded-top bg-primary-500 text-white">
+    <div id="grade-course-header" className="row w-100 m-0 p-4 rounded-top bg-primary-500 text-white">
       <div className={`col-12 ${verifiedMode ? 'col-md-9' : ''} p-0`}>
         <div className="row w-100 m-0 p-0">
           <div className="col-1 p-0">
@@ -71,7 +71,7 @@ const CourseGradeHeader = () => {
       </div>
       {verifiedMode && (
         <div className="col-12 col-md-3 mt-3 mt-md-0 p-0 align-self-center text-right">
-          <Button variant="brand" size="sm" href={verifiedMode.upgradeUrl} onClick={logUpgradeButtonClick}>
+          <Button id="upgrade-button" variant="brand" size="sm" href={verifiedMode.upgradeUrl} onClick={logUpgradeButtonClick}>
             {intl.formatMessage(messages.courseGradePreviewUpgradeButton)}
           </Button>
         </div>

src/course-home/progress-tab/grades/course-grade/GradeBar.scss

@@ -4,24 +4,24 @@
   }
 
   .grade-bar__base {
-    fill: $light-300;
+    fill: var(--pgn-color-light-300);
   }
 
   .grade-bar__divider {
-    fill: $primary-500;
+    fill: var(--pgn-color-primary-500);
     width: 1px;
   }
 
   .grade-bar--passing {
-    fill: $primary-500;
+    fill: var(--pgn-color-primary-500);
   }
 
   .grade-bar--current-passing {
-    fill: $success-500;
+    fill: var(--pgn-color-success-500);
   }
 
   .grade-bar--current-non-passing {
-    fill: $accent-b;
+    fill: var(--pgn-color-accent-b);
   }
 }
 
@@ -31,22 +31,22 @@
 
 #minimum-grade-tooltip {
   .arrow::after {
-    border-bottom-color: $primary-500;
+    border-bottom-color: var(--pgn-color-primary-500);
   }
 }
 
 #passing-grade-tooltip {
-  background: $success-500;
+  background: var(--pgn-color-success-500);
 
   .arrow::after {
-    border-top-color: $success-500;
+    border-top-color: var(--pgn-color-success-500);
   }
 }
 
 #non-passing-grade-tooltip {
-  background: $accent-b;
+  background: var(--pgn-color-accent-b);
 
   .arrow::after {
-    border-top-color: $accent-b;
+    border-top-color: var(--pgn-color-accent-b);
   }
 }

src/course-home/suggested-schedule-messaging/ShiftDatesAlert.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Alert,
   Button,
@@ -14,7 +14,8 @@ import { resetDeadlines } from '../data';
 import { useModel } from '../../generic/model-store';
 import messages from './messages';
 
-const ShiftDatesAlert = ({ fetch, intl, model }) => {
+const ShiftDatesAlert = ({ fetch, model }) => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -59,8 +60,7 @@ const ShiftDatesAlert = ({ fetch, intl, model }) => {
 
 ShiftDatesAlert.propTypes = {
   fetch: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
   model: PropTypes.string.isRequired,
 };
 
-export default injectIntl(ShiftDatesAlert);
+export default ShiftDatesAlert;

src/course-home/suggested-schedule-messaging/SuggestedScheduleHeader.jsx

@@ -1,16 +1,15 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 
-const SuggestedScheduleHeader = ({ intl }) => (
-  <p className="large">
-    {intl.formatMessage(messages.suggestedSchedule)}
-  </p>
-);
-
-SuggestedScheduleHeader.propTypes = {
-  intl: intlShape.isRequired,
+const SuggestedScheduleHeader = () => {
+  const intl = useIntl();
+  return (
+    <p className="large">
+      {intl.formatMessage(messages.suggestedSchedule)}
+    </p>
+  );
 };
 
-export default injectIntl(SuggestedScheduleHeader);
+export default SuggestedScheduleHeader;

src/course-home/suggested-schedule-messaging/UpgradeToCompleteAlert.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Alert,
   Button,
@@ -12,7 +12,8 @@ import {
 import { useModel } from '../../generic/model-store';
 import messages from './messages';
 
-const UpgradeToCompleteAlert = ({ intl, logUpgradeLinkClick }) => {
+const UpgradeToCompleteAlert = ({ logUpgradeLinkClick }) => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -33,7 +34,7 @@ const UpgradeToCompleteAlert = ({ intl, logUpgradeLinkClick }) => {
   }
 
   return (
-    <Alert className="bg-light-200">
+    <Alert id="upgrade-complete-alert" className="bg-light-200">
       <Row className="w-100 m-0">
         <Col xs={12} md={9} className="small p-0 pr-md-2">
           <Alert.Heading>{intl.formatMessage(messages.upgradeToCompleteHeader)}</Alert.Heading>
@@ -58,7 +59,6 @@ const UpgradeToCompleteAlert = ({ intl, logUpgradeLinkClick }) => {
 };
 
 UpgradeToCompleteAlert.propTypes = {
-  intl: intlShape.isRequired,
   logUpgradeLinkClick: PropTypes.func,
 };
 
@@ -66,4 +66,4 @@ UpgradeToCompleteAlert.defaultProps = {
   logUpgradeLinkClick: () => {},
 };
 
-export default injectIntl(UpgradeToCompleteAlert);
+export default UpgradeToCompleteAlert;

src/course-home/suggested-schedule-messaging/UpgradeToShiftDatesAlert.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Alert,
   Button,
@@ -13,7 +13,8 @@ import {
 import { useModel } from '../../generic/model-store';
 import messages from './messages';
 
-const UpgradeToShiftDatesAlert = ({ intl, logUpgradeLinkClick, model }) => {
+const UpgradeToShiftDatesAlert = ({ logUpgradeLinkClick, model }) => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -35,7 +36,7 @@ const UpgradeToShiftDatesAlert = ({ intl, logUpgradeLinkClick, model }) => {
   }
 
   return (
-    <Alert className="bg-light-200">
+    <Alert id="upgrade-shift-dates-alert" className="bg-light-200">
       <Row className="w-100 m-0">
         <Col xs={12} md={9} className="small p-0 pr-md-2">
           <strong>{intl.formatMessage(messages.missedDeadlines)}</strong>
@@ -60,7 +61,6 @@ const UpgradeToShiftDatesAlert = ({ intl, logUpgradeLinkClick, model }) => {
 };
 
 UpgradeToShiftDatesAlert.propTypes = {
-  intl: intlShape.isRequired,
   logUpgradeLinkClick: PropTypes.func,
   model: PropTypes.string.isRequired,
 };
@@ -69,4 +69,4 @@ UpgradeToShiftDatesAlert.defaultProps = {
   logUpgradeLinkClick: () => {},
 };
 
-export default injectIntl(UpgradeToShiftDatesAlert);
+export default UpgradeToShiftDatesAlert;

src/course-tabs/CourseTabsNavigation.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 
 import messages from './messages';
@@ -9,8 +9,9 @@ import { CoursewareSearch, CoursewareSearchToggle } from '../course-home/coursew
 import { useCoursewareSearchState } from '../course-home/courseware-search/hooks';
 
 const CourseTabsNavigation = ({
-  activeTabSlug, className, tabs, intl,
+  activeTabSlug, className, tabs,
 }) => {
+  const intl = useIntl();
   const { show } = useCoursewareSearchState();
 
   return (
@@ -51,7 +52,6 @@ CourseTabsNavigation.propTypes = {
     slug: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
   })).isRequired,
-  intl: intlShape.isRequired,
 };
 
 CourseTabsNavigation.defaultProps = {
@@ -59,4 +59,4 @@ CourseTabsNavigation.defaultProps = {
   className: null,
 };
 
-export default injectIntl(CourseTabsNavigation);
+export default CourseTabsNavigation;

src/course-tabs/course-tabs-navigation.scss

@@ -5,13 +5,13 @@
   .nav a,
   .nav button {
     &:hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
     }
   }
 
   .nav a {
     &:not(.active):hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
       border-bottom: none;
     }
   }

src/courseware/CoursewareContainer.test.jsx

@@ -2,7 +2,7 @@ import { getConfig, history } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { waitForElementToBeRemoved, fireEvent } from '@testing-library/dom';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import {
@@ -221,7 +221,7 @@ describe('CoursewareContainer', () => {
         });
 
         history.push(`/course/${courseId}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -244,7 +244,7 @@ describe('CoursewareContainer', () => {
         axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {});
 
         history.push(`/course/${courseId}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -294,7 +294,7 @@ describe('CoursewareContainer', () => {
       describe('when the URL does not contain a unit ID', () => {
         it('should choose a unit within the section\'s first sequence', async () => {
           setUrl(sectionTree[1].id);
-          const container = await waitFor(() => loadContainer());
+          const container = await loadContainer();
           assertLoadedHeader(container);
           assertSequenceNavigation(container, 2);
           assertLocation(container, sequenceTree[1][0].id, unitTree[1][0][0].id);
@@ -369,7 +369,7 @@ describe('CoursewareContainer', () => {
 
       it('should pick the first unit if position was not defined (activeUnitIndex becomes 0)', async () => {
         history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -388,7 +388,7 @@ describe('CoursewareContainer', () => {
         setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });
 
         history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -405,7 +405,7 @@ describe('CoursewareContainer', () => {
 
       it('should load the specified unit', async () => {
         history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -421,7 +421,7 @@ describe('CoursewareContainer', () => {
         });
 
         history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
         const sequenceNextButton = sequenceNavButtons[4];

src/courseware/RedirectPage.test.jsx

@@ -16,6 +16,7 @@ jest.mock('react-router-dom', () => ({
   useLocation: () => ({
     search: '?consentPath=/some-path',
   }),
+  useSearchParams: () => [new URLSearchParams('?consentPath=/some-path'), () => {}],
 }));
 
 describe('RedirectPage component', () => {

src/courseware/RedirectPage.tsx

@@ -1,18 +1,20 @@
-import PropTypes from 'prop-types';
 import {
-  generatePath, useParams, useLocation,
+  generatePath, useParams, useLocation, useSearchParams,
 } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 
-import queryString from 'query-string';
 import { REDIRECT_MODES } from '../constants';
 
-const RedirectPage = ({
-  pattern, mode,
-}) => {
+interface Props {
+  pattern: string;
+  mode: string;
+}
+
+const RedirectPage = ({ pattern = '', mode }: Props) => {
   const { courseId } = useParams();
   const location = useLocation();
-  const { consentPath } = queryString.parse(location?.search);
+  const [searchParams] = useSearchParams();
+  const consentPath = searchParams.get('consentPath') ?? '';
 
   const {
     LMS_BASE_URL,
@@ -39,13 +41,4 @@ const RedirectPage = ({
   return null;
 };
 
-RedirectPage.propTypes = {
-  pattern: PropTypes.string,
-  mode: PropTypes.string.isRequired,
-};
-
-RedirectPage.defaultProps = {
-  pattern: null,
-};
-
 export default RedirectPage;

src/courseware/course/Course.test.jsx

@@ -50,7 +50,11 @@ describe('Course', () => {
     global.innerWidth = breakpoints.extraLarge.minWidth;
   });
 
-  it('loads learning sequence', async () => {
+  // This was passing when it shouldn't have been because of improper
+  // waitFor use. With the React 18 upgrade it no longer improperly passes
+  // so we are skipping it. See https://github.com/openedx/frontend-app-learning/issues/1669
+  // for details.
+  it.skip('loads learning sequence', () => {
     render(<Course {...mockData} />, { wrapWithRouter: true });
     expect(screen.queryByRole('navigation', { name: 'breadcrumb' })).not.toBeInTheDocument();
     waitFor(() => {
@@ -94,7 +98,11 @@ describe('Course', () => {
     expect(screen.queryByRole('navigation', { name: 'breadcrumb' })).not.toBeInTheDocument();
   });
 
-  it('displays first section celebration modal', async () => {
+  // This was passing when it shouldn't have been because of improper
+  // waitFor use. With the React 18 upgrade it no longer improperly passes
+  // so we are skipping it. See https://github.com/openedx/frontend-app-learning/issues/1669
+  // for details.
+  it.skip('displays first section celebration modal', async () => {
     const courseHomeMetadata = Factory.build('courseHomeMetadata', { celebrations: { firstSection: true } });
     const testStore = await initializeTestStore({ courseHomeMetadata }, false);
     const { courseware, models } = testStore.getState();
@@ -116,7 +124,11 @@ describe('Course', () => {
     });
   });
 
-  it('displays weekly goal celebration modal', async () => {
+  // This was passing when it shouldn't have been because of improper
+  // waitFor use. With the React 18 upgrade it no longer improperly passes
+  // so we are skipping it. See https://github.com/openedx/frontend-app-learning/issues/1669
+  // for details.
+  it.skip('displays weekly goal celebration modal', async () => {
     const courseHomeMetadata = Factory.build('courseHomeMetadata', { celebrations: { weeklyGoal: true } });
     const testStore = await initializeTestStore({ courseHomeMetadata }, false);
     const { courseware, models } = testStore.getState();
@@ -136,18 +148,6 @@ describe('Course', () => {
     });
   });
 
-  it('displays notification trigger and toggles active class on click', async () => {
-    render(<Course {...mockData} />, { wrapWithRouter: true });
-
-    waitFor(() => {
-      const notificationTrigger = screen.getByRole('button', { name: /Show notification tray/i });
-      expect(notificationTrigger).toBeInTheDocument();
-      expect(notificationTrigger.parentNode).not.toHaveClass('sidebar-active', { exact: true });
-      fireEvent.click(notificationTrigger);
-      expect(notificationTrigger.parentNode).toHaveClass('sidebar-active');
-    });
-  });
-
   it('handles click to open/close discussions sidebar', async () => {
     await setupDiscussionSidebar();
 

src/courseware/course/CourseBreadcrumbs.test.jsx

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

src/courseware/course/breadcrumbs/BreadcrumbItem.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  useToggle,
+  ModalPopup,
+  Menu,
+  Button,
+} from '@openedx/paragon';
+import { Link, useLocation } from 'react-router-dom';
+import JumpNavMenuItem from '../JumpNavMenuItem';
+
+interface Props {
+  content: {
+    default: boolean,
+    id: string,
+    label: string,
+    sequences: {
+      id: string,
+    }[],
+  } [];
+  withSeparator: boolean | false,
+  separator: string | '';
+  courseId: string;
+  sequenceId: string | '';
+  unitId: string | '';
+  isStaff: boolean | false;
+}
+
+const BreadcrumbItem: React.FC<Props> = ({
+  content,
+  withSeparator,
+  separator,
+  courseId,
+  sequenceId,
+  unitId,
+  isStaff,
+}) => {
+  const defaultContent = content.filter(
+    (destination: { default: boolean }) => destination.default,
+  )[0] || { id: courseId, label: '', sequences: [] };
+
+  const showRegularLink = getConfig().ENABLE_JUMPNAV !== 'true' || content.length < 2 || !isStaff;
+  const [isOpen, open, close] = useToggle(false);
+  const [target, setTarget] = useState(null);
+
+  const { pathname } = useLocation();
+  const isPreview = pathname.startsWith('/preview');
+  const baseUrl = defaultContent.sequences.length
+    ? `/course/${courseId}/${defaultContent.sequences[0].id}`
+    : `/course/${courseId}/${defaultContent.id}`;
+  const link = isPreview ? `/preview${baseUrl}` : baseUrl;
+  return (
+    <>
+      {withSeparator && separator && (
+        <li className="col-auto p-0 mx-2 text-primary-500 text-truncate text-nowrap" role="presentation" aria-hidden>{separator}</li>
+      )}
+
+      <li
+        style={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+        data-testid="breadcrumb-item"
+      >
+        {showRegularLink ? (
+          <Link
+            className="text-primary-500"
+            to={link}
+          >
+            {defaultContent.label}
+          </Link>
+        ) : (
+          <>
+            {
+              // @ts-ignore
+              <Button className="text-primary-500 m-0 p-0" variant="link" onClick={open} ref={setTarget}>
+                {defaultContent.label}
+              </Button>
+            }
+            <ModalPopup positionRef={target} isOpen={isOpen} onClose={close}>
+              <Menu>
+                {content.map((item) => (
+                  <JumpNavMenuItem
+                    key={item.label}
+                    isDefault={item.default}
+                    sequences={item.sequences}
+                    courseId={courseId}
+                    title={item.label}
+                    currentSequence={sequenceId}
+                    currentUnit={unitId}
+                    onClick={close}
+                  />
+                ))}
+              </Menu>
+            </ModalPopup>
+          </>
+        )}
+      </li>
+    </>
+  );
+};
+
+export default BreadcrumbItem;

src/courseware/course/breadcrumbs/CourseBreadcrumbs.jsx

@@ -1,107 +1,13 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { getConfig } from '@edx/frontend-platform';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 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 '@openedx/paragon';
-import { Link } from 'react-router-dom';
-import { useModel, useModels } from '../../generic/model-store';
-import JumpNavMenuItem from './JumpNavMenuItem';
 
-const CourseBreadcrumb = ({
-  content,
-  withSeparator,
-  courseId,
-  sequenceId,
-  unitId,
-  isStaff,
-}) => {
-  const defaultContent = content.filter(
-    (destination) => destination.default,
-  )[0] || { id: courseId, label: '', sequences: [] };
-
-  const showRegularLink = getConfig().ENABLE_JUMPNAV !== 'true' || content.length < 2 || !isStaff;
-  const [isOpen, open, close] = useToggle(false);
-  const [target, setTarget] = useState(null);
-  return (
-    <>
-      {withSeparator && (
-        <li className="col-auto p-0 mx-2 text-primary-500 text-truncate text-nowrap" role="presentation" aria-hidden>/</li>
-      )}
-
-      <li
-        style={{
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-        data-testid="breadcrumb-item"
-      >
-        {showRegularLink ? (
-          <Link
-            className="text-primary-500"
-            to={
-              defaultContent.sequences.length
-                ? `/course/${courseId}/${defaultContent.sequences[0].id}`
-                : `/course/${courseId}/${defaultContent.id}`
-            }
-          >
-            {defaultContent.label}
-          </Link>
-        ) : (
-          <>
-            {
-              // eslint-disable-next-line
-              <a className="text-primary-500" onClick={open} ref={setTarget}>
-                {defaultContent.label}
-              </a>
-            }
-            <ModalPopup positionRef={target} isOpen={isOpen} onClose={close}>
-              <Menu>
-                {content.map((item) => (
-                  <JumpNavMenuItem
-                    key={item.label}
-                    isDefault={item.default}
-                    sequences={item.sequences}
-                    courseId={courseId}
-                    title={item.label}
-                    currentSequence={sequenceId}
-                    currentUnit={unitId}
-                    onClick={close}
-                  />
-                ))}
-              </Menu>
-            </ModalPopup>
-          </>
-        )}
-      </li>
-    </>
-  );
-};
-CourseBreadcrumb.propTypes = {
-  content: PropTypes.arrayOf(
-    PropTypes.shape({
-      default: PropTypes.bool,
-      id: PropTypes.string,
-      label: PropTypes.string,
-    }),
-  ).isRequired,
-  sequenceId: PropTypes.string,
-  unitId: PropTypes.string,
-  withSeparator: PropTypes.bool,
-  courseId: PropTypes.string,
-  isStaff: PropTypes.bool,
-};
-
-CourseBreadcrumb.defaultProps = {
-  withSeparator: false,
-  sequenceId: null,
-  unitId: null,
-  courseId: null,
-  isStaff: null,
-};
+import { useModel, useModels } from '../../../generic/model-store';
+import BreadcrumbItem from './BreadcrumbItem';
 
 const CourseBreadcrumbs = ({
   courseId,
@@ -117,7 +23,7 @@ const CourseBreadcrumbs = ({
   );
 
   const allSequencesInSections = Object.fromEntries(
-    useModels('sections', course.sectionIds).map((section) => [
+    useModels('sections', course.sectionIds)?.map((section) => [
       section.id,
       {
         default: section.id === sectionId,
@@ -171,7 +77,7 @@ const CourseBreadcrumbs = ({
           </Link>
         </li>
         {links.map((content, i) => (
-          <CourseBreadcrumb
+          <BreadcrumbItem
             // eslint-disable-next-line react/no-array-index-key
             key={i}
             courseId={courseId}
@@ -179,6 +85,7 @@ const CourseBreadcrumbs = ({
             content={content}
             unitId={unitId}
             withSeparator
+            separator="/"
             isStaff={isStaff}
           />
         ))}

src/courseware/course/breadcrumbs/CourseBreadcrumbs.test.jsx

@@ -0,0 +1,101 @@
+import { Factory } from 'rosie';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { initializeMockApp, initializeTestStore } from '@src/setupTest';
+import CourseBreadcrumbs from './CourseBreadcrumbs';
+
+const props = {
+  courseId: 'course-v1:edX+DemoX+Demo_Course',
+  sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
+  sequenceId: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
+  isStaff: true,
+};
+
+const courseMetadata = Factory.build('courseMetadata', { courseId: props.courseId, sectionIds: [props.sectionId] });
+const sequenceBlocks = [Factory.build(
+  'block',
+  { type: 'sequential', id: props.sequenceId, title: 'Subsection' },
+  { courseId: props.courseId },
+)];
+const sectionBlocks = [Factory.build(
+  'block',
+  {
+    type: 'chapter',
+    id: props.sectionId,
+    title: 'Section',
+    children: [{ id: props.sequenceId }],
+  },
+  { courseId: props.courseId },
+)];
+
+initializeMockApp();
+
+describe('CourseBreadcrumbs', () => {
+  let store = {};
+
+  const initTestStore = async () => {
+    store = await initializeTestStore({ courseMetadata, sectionBlocks, sequenceBlocks });
+  };
+
+  function renderWithProvider(pathname = '/course') {
+    const { container } = render(
+      <AppProvider store={store} wrapWithRouter={false}>
+        <IntlProvider locale="en">
+          <MemoryRouter initialEntries={[{ pathname }]}>
+            <CourseBreadcrumbs {...props} />
+          </MemoryRouter>
+        </IntlProvider>
+      </AppProvider>,
+    );
+    return container;
+  }
+
+  describe('in live view', () => {
+    it('renders course breadcrumbs as expected', async () => {
+      await initTestStore();
+      renderWithProvider();
+      const courseHomeButtonDestination = screen.getAllByRole('link')[0].href;
+
+      expect(courseHomeButtonDestination).toBe('http://localhost/course/course-v1:edX+DemoX+Demo_Course/home');
+
+      expect(screen.getByRole('navigation', { name: 'breadcrumb' })).toBeInTheDocument();
+
+      expect(screen.queryAllByTestId('breadcrumb-item')).toHaveLength(2);
+    });
+
+    it('section link does not include /preview/', async () => {
+      await initTestStore();
+      renderWithProvider();
+      const sectionBreadcrumb = screen.getByText(sectionBlocks[0].block_id);
+      const sectionLink = sectionBreadcrumb.closest('a').href;
+
+      expect(sectionLink.includes('/preview/')).toBeFalsy();
+    });
+  });
+
+  describe('in live view', () => {
+    it('renders course breadcrumbs as expected', async () => {
+      await initTestStore();
+      renderWithProvider('/preview/courses');
+      const courseHomeButtonDestination = screen.getAllByRole('link')[0].href;
+
+      expect(courseHomeButtonDestination).toBe('http://localhost/course/course-v1:edX+DemoX+Demo_Course/home');
+
+      expect(screen.getByRole('navigation', { name: 'breadcrumb' })).toBeInTheDocument();
+
+      expect(screen.queryAllByTestId('breadcrumb-item')).toHaveLength(2);
+    });
+
+    it('section link does includes /preview/', async () => {
+      await initTestStore();
+      renderWithProvider('/preview/courses');
+      const sectionBreadcrumb = screen.getByText(sectionBlocks[0].block_id);
+      const sectionLink = sectionBreadcrumb.closest('a').href;
+
+      expect(sectionLink.includes('/preview/')).toBeTruthy();
+    });
+  });
+});

src/courseware/course/breadcrumbs/index.js

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

src/courseware/course/celebration/CelebrationModal.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   breakpoints,
@@ -18,8 +18,9 @@ import { recordFirstSectionCelebration } from './utils';
 import { useModel } from '../../../generic/model-store';
 
 const CelebrationModal = ({
-  courseId, intl, isOpen, onClose, ...rest
+  courseId, isOpen, onClose, ...rest
 }) => {
+  const intl = useIntl();
   const { org, celebrations } = useModel('courseHomeMeta', courseId);
   const dispatch = useDispatch();
   const wideScreen = useWindowSize().width >= breakpoints.small.minWidth;
@@ -66,9 +67,8 @@ const CelebrationModal = ({
 
 CelebrationModal.propTypes = {
   courseId: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(CelebrationModal);
+export default CelebrationModal;

src/courseware/course/celebration/CelebrationModal.scss

@@ -22,7 +22,6 @@
     justify-content: center;
 
     button {
-      @extend .btn-primary;
       font-size: 1.2rem;
       width: 50%;
     }

src/courseware/course/celebration/WeeklyGoalCelebrationModal.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow, Button, Icon, StandardModal,
 } from '@openedx/paragon';
@@ -12,8 +12,9 @@ import { recordWeeklyGoalCelebration } from './utils';
 import { useModel } from '../../../generic/model-store';
 
 const WeeklyGoalCelebrationModal = ({
-  courseId, daysPerWeek, intl, isOpen, onClose, ...rest
+  courseId, daysPerWeek, isOpen, onClose, ...rest
 }) => {
+  const intl = useIntl();
   const { org } = useModel('courseHomeMeta', courseId);
 
   useEffect(() => {
@@ -77,9 +78,8 @@ const WeeklyGoalCelebrationModal = ({
 WeeklyGoalCelebrationModal.propTypes = {
   courseId: PropTypes.string.isRequired,
   daysPerWeek: PropTypes.number.isRequired,
-  intl: intlShape.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(WeeklyGoalCelebrationModal);
+export default WeeklyGoalCelebrationModal;

src/courseware/course/chat/Chat.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 
 import { Xpert } from '@edx/frontend-lib-learning-assistant';
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl } from '@edx/frontend-platform/i18n';
 
 import { ALLOW_UPSELL_MODES, VERIFIED_MODES } from '@src/constants';
 import { useModel } from '../../../generic/model-store';
@@ -80,4 +79,4 @@ Chat.defaultProps = {
   enrollmentMode: null,
 };
 
-export default injectIntl(Chat);
+export default Chat;

src/courseware/course/content-tools/calculator/Calculator.jsx

@@ -1,403 +1,389 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { Collapsible } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import {
-  FormattedMessage, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faCalculator, faQuestionCircle, faTimesCircle, faEquals,
 } from '@fortawesome/free-solid-svg-icons';
 import messages from './messages';
 
-class Calculator extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      equation: '',
-      result: '',
-    };
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
+const Calculator = () => {
+  const intl = useIntl();
+  const [equation, setEquation] = useState('');
+  const [result, setResult] = useState('');
 
-  async handleSubmit(event) {
+  const handleSubmit = async (event) => {
     event.preventDefault();
     event.stopPropagation();
     const urlEncoded = new URLSearchParams();
-    urlEncoded.append('equation', this.state.equation);
+    urlEncoded.append('equation', equation);
 
     const response = await getAuthenticatedHttpClient().get(
       `${getConfig().LMS_BASE_URL}/calculate?${urlEncoded.toString()}`,
     );
-    this.setState(() => ({ result: response.data.result }));
-  }
+    setResult(response.data.result);
+  };
 
-  changeEquation(value) {
-    this.setState(() => ({ equation: value }));
-  }
+  const changeEquation = (value) => {
+    setEquation(value);
+  };
 
-  render() {
-    return (
-      <Collapsible.Advanced className="calculator">
-        <div className="text-right">
-          <Collapsible.Trigger tag="a" className="trigger btn">
-            <Collapsible.Visible whenOpen>
-              <FontAwesomeIcon icon={faTimesCircle} aria-hidden="true" className="mr-2" />
-            </Collapsible.Visible>
-            <Collapsible.Visible whenClosed>
-              <FontAwesomeIcon icon={faCalculator} aria-hidden="true" className="mr-2" />
-            </Collapsible.Visible>
-            {this.props.intl.formatMessage(messages['calculator.button.label'])}
-          </Collapsible.Trigger>
-        </div>
-        <Collapsible.Body className="calculator-content pt-4">
-          <form onSubmit={this.handleSubmit} className="container-xl form-inline flex-nowrap">
-            <input
-              type="text"
-              placeholder={this.props.intl.formatMessage(messages['calculator.input.field.label'])}
-              aria-label={this.props.intl.formatMessage(messages['calculator.input.field.label'])}
-              className="form-control w-100"
-              onChange={(event) => this.changeEquation(event.target.value)}
-            />
-            <button
-              className="btn btn-primary mx-3"
-              aria-label={this.props.intl.formatMessage(messages['calculator.submit.button.label'])}
-              type="submit"
-            >
-              <FontAwesomeIcon icon={faEquals} aria-hidden="true" />
-            </button>
-            <input
-              type="text"
-              tabIndex="-1"
-              readOnly
-              aria-live="polite"
-              placeholder={this.props.intl.formatMessage(messages['calculator.result.field.placeholder'])}
-              aria-label={this.props.intl.formatMessage(messages['calculator.result.field.label'])}
-              className="form-control w-50"
-              value={this.state.result}
-            />
-          </form>
+  return (
+    <Collapsible.Advanced className="calculator">
+      <div className="text-right">
+        <Collapsible.Trigger tag="a" className="trigger btn">
+          <Collapsible.Visible whenOpen>
+            <FontAwesomeIcon icon={faTimesCircle} aria-hidden="true" className="mr-2" />
+          </Collapsible.Visible>
+          <Collapsible.Visible whenClosed>
+            <FontAwesomeIcon icon={faCalculator} aria-hidden="true" className="mr-2" />
+          </Collapsible.Visible>
+          {intl.formatMessage(messages['calculator.button.label'])}
+        </Collapsible.Trigger>
+      </div>
+      <Collapsible.Body className="calculator-content pt-4">
+        <form onSubmit={handleSubmit} className="container-xl form-inline flex-nowrap">
+          <input
+            type="text"
+            placeholder={intl.formatMessage(messages['calculator.input.field.label'])}
+            aria-label={intl.formatMessage(messages['calculator.input.field.label'])}
+            className="form-control w-100"
+            onChange={(event) => changeEquation(event.target.value)}
+          />
+          <button
+            className="btn btn-primary mx-3"
+            aria-label={intl.formatMessage(messages['calculator.submit.button.label'])}
+            type="submit"
+          >
+            <FontAwesomeIcon icon={faEquals} aria-hidden="true" />
+          </button>
+          <input
+            type="text"
+            tabIndex="-1"
+            readOnly
+            aria-live="polite"
+            placeholder={intl.formatMessage(messages['calculator.result.field.placeholder'])}
+            aria-label={intl.formatMessage(messages['calculator.result.field.label'])}
+            className="form-control w-50"
+            value={result}
+          />
+        </form>
 
-          <Collapsible.Advanced>
-            <div className="container-xl">
-              <Collapsible.Trigger className="btn btn-link btn-sm px-0 d-inline-flex align-items-center">
-                <Collapsible.Visible whenOpen>
-                  <FontAwesomeIcon icon={faTimesCircle} aria-hidden="true" className="mr-2" />
-                </Collapsible.Visible>
-                <Collapsible.Visible whenClosed>
-                  <FontAwesomeIcon icon={faQuestionCircle} aria-hidden="true" className="mr-2" />
-                </Collapsible.Visible>
-                <FormattedMessage
-                  id="calculator.instructions.button.label"
-                  defaultMessage="Calculator Instructions"
-                />
-              </Collapsible.Trigger>
-            </div>
-            <Collapsible.Body className="container-xl pt-3" style={{ maxHeight: '50vh', overflow: 'auto' }}>
+        <Collapsible.Advanced>
+          <div className="container-xl">
+            <Collapsible.Trigger className="btn btn-link btn-sm px-0 d-inline-flex align-items-center">
+              <Collapsible.Visible whenOpen>
+                <FontAwesomeIcon icon={faTimesCircle} aria-hidden="true" className="mr-2" />
+              </Collapsible.Visible>
+              <Collapsible.Visible whenClosed>
+                <FontAwesomeIcon icon={faQuestionCircle} aria-hidden="true" className="mr-2" />
+              </Collapsible.Visible>
               <FormattedMessage
-                tagName="h6"
-                id="calculator.instructions"
-                defaultMessage="For detailed information, see the {expressions_link}."
-                description="Text that precedes the link which redirects to help page calculator"
-                values={{
-                  expressions_link: (
-                    <a href={getConfig().SUPPORT_URL_CALCULATOR_MATH}>
-                      <FormattedMessage
-                        id="calculator.instructions.support.title"
-                        defaultMessage="Help Center"
-                        description="Anchor text for link which redirects to help page calculator"
-                      />
-                    </a>
-                  ),
-                }}
+                id="calculator.instructions.button.label"
+                defaultMessage="Calculator Instructions"
               />
-              <p>
-                <strong>
-                  <FormattedMessage
-                    id="calculator.instructions.useful.tips"
-                    defaultMessage="Useful tips:"
-                    description="Headline for the (list of tips) about using the calculator"
-                  />
-                </strong>
-              </p>
-              <ul>
-                <li className="hint-item" id="hint-paren">
-                  <FormattedMessage
-                    id="calculator.hint1"
-                    defaultMessage="Use parentheses () to make expressions clear. You can use parentheses inside other parentheses."
-                    description="The text indicate that the calculator supports parentheses"
-                  />
-                </li>
-                <li className="hint-item" id="hint-spaces">
-                  <FormattedMessage
-                    id="calculator.hint2"
-                    defaultMessage="Do not use spaces in expressions."
-                    description="It indicate that using a space might cause un expected behavior"
-                  />
-                </li>
-                <li className="hint-item" id="hint-howto-constants">
-                  <FormattedMessage
-                    id="calculator.hint3"
-                    defaultMessage="For constants, indicate multiplication explicitly (example: 5*c)."
-                    description="It indicate the style of math notation"
-                  />
-                </li>
-                <li className="hint-item" id="hint-howto-maffixes">
-                  <FormattedMessage
-                    id="calculator.hint4"
-                    defaultMessage="For affixes, type the number and affix without a space (example: 5c)."
-                  />
-                </li>
-                <li className="hint-item" id="hint-howto-functions">
-                  <FormattedMessage
-                    id="calculator.hint5"
-                    defaultMessage="For functions, type the name of the function, then the expression in parentheses."
-                    description="It indicate how to use a math function, e.g. exp(4)."
-                  />
-                </li>
-              </ul>
-              <table className="table small">
-                <thead>
-                  <tr>
-                    <th scope="col">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.heading"
-                        defaultMessage="To Use"
-                        description="Column header which indicate  calculator functionality"
-                      />
-                    </th>
-                    <th scope="col">
-                      <FormattedMessage
-                        id="calculator.instruction.table.type.heading"
-                        defaultMessage="Type"
-                        description="Column header which indicate the supported type(s) of a the calculator functionality"
-                      />
-                    </th>
-                    <th scope="col">
-                      <FormattedMessage
-                        id="calculator.instruction.table.examples.heading"
-                        defaultMessage="Examples"
-                        description="Column header which list examples of  calculator functionality"
-                      />
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <th scope="row">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.numbers"
-                        defaultMessage="Numbers"
-                        description="A calculator functionality"
-                      />
-                    </th>
-                    <td>
-                      <ul className="list-unstyled m-0">
-                        <li>
-                          <FormattedMessage
-                            id="calculator.instruction.table.to.use.numbers.type1"
-                            defaultMessage="Integers"
-                            description="Type of numbers that is supported the calculator"
-                          />
-                        </li>
-                        <li>
-                          <FormattedMessage
-                            id="calculator.instruction.table.to.use.numbers.type2"
-                            defaultMessage="Fractions"
-                            description="Type of numbers that is supported by the calculator"
-                          />
-                        </li>
-                        <li>
-                          <FormattedMessage
-                            id="calculator.instruction.table.to.use.numbers.type3"
-                            defaultMessage="Decimals"
-                            description="Type of numbers that is supported by the calculator"
-                          />
-                        </li>
-                      </ul>
-                    </td>
-                    <td dir="auto">
-                      <ul className="list-unstyled m-0">
-                        <li>2520</li>
-                        <li>2/3</li>
-                        <li>3.14, .98</li>
-                      </ul>
-                    </td>
-                  </tr>
-                  <tr>
-                    <th scope="row">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.operators"
-                        defaultMessage="Operators"
-                        description="A calculator functionality"
-                      />
-                    </th>
-                    <td dir="auto">
-                      <ul className="list-unstyled m-0">
-                        <li>
-                          {' + - * / '}
-                          <FormattedMessage
-                            id="calculator.instruction.table.to.use.operators.type1"
-                            defaultMessage="(add, subtract, multiply, divide)"
-                            description="Type of opprators that are supported by the calculator"
-                          />
-                        </li>
-                        <li>
-                          {'^ '}
-                          <FormattedMessage
-                            id="calculator.instruction.table.to.use.operators.type2"
-                            defaultMessage="(raise to a power)"
-                            description="It indicate that symbol (^) is being used to raise power, e.g. 2^2 = 4"
-                          />
-                        </li>
-                        <li>
-                          {'|| '}
-                          <FormattedMessage
-                            id="calculator.instruction.table.to.use.operators.type3"
-                            defaultMessage="(parallel resistors)"
-                            description="It indicate that the sympol (||) is being used to calculate (parallel resistor), it is a concept in electrical/electronic engineering"
-                          />
-                        </li>
-                      </ul>
-                    </td>
-                    <td dir="auto">
-                      <ul className="list-unstyled m-0">
-                        <li>x+(2*y)/x-1</li>
-                        <li>x^(n+1)</li>
-                        <li>v_IN+v_OUT</li>
-                        <li>1||2</li>
-                      </ul>
-                    </td>
-                  </tr>
-                  <tr>
-                    <th scope="row">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.constants"
-                        defaultMessage="Constants"
-                        description="It indicate that the calculator support constants, e.g. the speed of light"
-                      />
-                    </th>
-                    <td dir="auto">e, pi</td>
-                    <td dir="auto">
-                      <ul className="list-unstyled m-0">
-                        <li>20*e</li>
-                        <li>418*pi</li>
-                      </ul>
-                    </td>
-                  </tr>
-                  <tr>
-                    <th scope="row">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.affixes"
-                        defaultMessage="Affixes"
-                      />
-                    </th>
-                    <td dir="auto">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.affixes.type"
-                        defaultMessage="Percent sign (%)"
-                      />
-                    </td>
-                    <td dir="auto">
-                      <ul className="list-unstyled m-0">
-                        <li>20%</li>
-                      </ul>
-                    </td>
-                  </tr>
-                  <tr>
-                    <th scope="row">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.basic.functions"
-                        defaultMessage="Basic functions"
-                        description="It indicate that calculator supports mathematical function"
-                      />
-                    </th>
-                    <td dir="auto">abs, exp, fact, factorial, ln, log2, log10, sqrt</td>
-                    <td dir="auto">
-                      <ul className="list-unstyled m-0">
-                        <li>abs(x+y)</li>
-                        <li>sqrt(x^2-y)</li>
-                      </ul>
-                    </td>
-                  </tr>
-                  <tr>
-                    <th scope="row">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.trig.functions"
-                        defaultMessage="Trigonometric functions"
-                        description="Type of mathematical function that is supported by the calculator"
-                      />
-                    </th>
-                    <td dir="auto">
-                      <ul className="list-unstyled m-0">
-                        <li>sin, cos, tan, sec, csc, cot</li>
-                        <li>arcsin, sinh, arcsinh</li>
-                      </ul>
-                    </td>
-                    <td dir="auto">
-                      <ul className="list-unstyled m-0">
-                        <li>sin(4x+y)</li>
-                        <li>arccsch(4x+y)</li>
-                      </ul>
-                    </td>
-                    <td dir="auto" />
-                  </tr>
-                  <tr>
-                    <th scope="row">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.scientific.notation"
-                        defaultMessage="Scientific notation"
-                        description="It indicate that calculator supports scientific notation"
-                      />
-                    </th>
-                    <td dir="auto">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.scientific.notation.type1"
-                        defaultMessage="{exponentSyntax} and the exponent"
-                        description="Type of scientific notation that is  supported by the calculator"
-                        values={{
-                          exponentSyntax: '10^',
-                        }}
-                      />
-                    </td>
-                    <td dir="auto">10^-9</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.scientific.notation.type2"
-                        defaultMessage="{notationSyntax} notation"
-                        description="It indicate that calculator supports (e) to be used in notation"
-                        values={{
-                          notationSyntax: 'e',
-                        }}
-                      />
-                    </th>
-                    <td dir="auto">
-                      <FormattedMessage
-                        id="calculator.instruction.table.to.use.scientific.notation.type3"
-                        defaultMessage="{notationSyntax} and the exponent"
-                        description="An example for using (e) in notation"
-                        values={{
-                          notationSyntax: '1e',
-                        }}
-                      />
-                    </td>
-                    <td dir="auto">1e-9</td>
-                  </tr>
-                </tbody>
-              </table>
-            </Collapsible.Body>
-          </Collapsible.Advanced>
-        </Collapsible.Body>
-      </Collapsible.Advanced>
-    );
-  }
-}
-
-Calculator.propTypes = {
-  intl: intlShape.isRequired,
+            </Collapsible.Trigger>
+          </div>
+          <Collapsible.Body className="container-xl pt-3" style={{ maxHeight: '50vh', overflow: 'auto' }}>
+            <FormattedMessage
+              tagName="h6"
+              id="calculator.instructions"
+              defaultMessage="For detailed information, see the {expressions_link}."
+              description="Text that precedes the link which redirects to help page calculator"
+              values={{
+                expressions_link: (
+                  <a href={getConfig().SUPPORT_URL_CALCULATOR_MATH}>
+                    <FormattedMessage
+                      id="calculator.instructions.support.title"
+                      defaultMessage="Help Center"
+                      description="Anchor text for link which redirects to help page calculator"
+                    />
+                  </a>
+                ),
+              }}
+            />
+            <p>
+              <strong>
+                <FormattedMessage
+                  id="calculator.instructions.useful.tips"
+                  defaultMessage="Useful tips:"
+                  description="Headline for the (list of tips) about using the calculator"
+                />
+              </strong>
+            </p>
+            <ul>
+              <li className="hint-item" id="hint-paren">
+                <FormattedMessage
+                  id="calculator.hint1"
+                  defaultMessage="Use parentheses () to make expressions clear. You can use parentheses inside other parentheses."
+                  description="The text indicate that the calculator supports parentheses"
+                />
+              </li>
+              <li className="hint-item" id="hint-spaces">
+                <FormattedMessage
+                  id="calculator.hint2"
+                  defaultMessage="Do not use spaces in expressions."
+                  description="It indicate that using a space might cause un expected behavior"
+                />
+              </li>
+              <li className="hint-item" id="hint-howto-constants">
+                <FormattedMessage
+                  id="calculator.hint3"
+                  defaultMessage="For constants, indicate multiplication explicitly (example: 5*c)."
+                  description="It indicate the style of math notation"
+                />
+              </li>
+              <li className="hint-item" id="hint-howto-maffixes">
+                <FormattedMessage
+                  id="calculator.hint4"
+                  defaultMessage="For affixes, type the number and affix without a space (example: 5c)."
+                />
+              </li>
+              <li className="hint-item" id="hint-howto-functions">
+                <FormattedMessage
+                  id="calculator.hint5"
+                  defaultMessage="For functions, type the name of the function, then the expression in parentheses."
+                  description="It indicate how to use a math function, e.g. exp(4)."
+                />
+              </li>
+            </ul>
+            <table className="pgn__data-table small">
+              <thead>
+                <tr>
+                  <th scope="col">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.heading"
+                      defaultMessage="To Use"
+                      description="Column header which indicate  calculator functionality"
+                    />
+                  </th>
+                  <th scope="col">
+                    <FormattedMessage
+                      id="calculator.instruction.table.type.heading"
+                      defaultMessage="Type"
+                      description="Column header which indicate the supported type(s) of a the calculator functionality"
+                    />
+                  </th>
+                  <th scope="col">
+                    <FormattedMessage
+                      id="calculator.instruction.table.examples.heading"
+                      defaultMessage="Examples"
+                      description="Column header which list examples of  calculator functionality"
+                    />
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.numbers"
+                      defaultMessage="Numbers"
+                      description="A calculator functionality"
+                    />
+                  </th>
+                  <td>
+                    <ul className="list-unstyled m-0">
+                      <li>
+                        <FormattedMessage
+                          id="calculator.instruction.table.to.use.numbers.type1"
+                          defaultMessage="Integers"
+                          description="Type of numbers that is supported the calculator"
+                        />
+                      </li>
+                      <li>
+                        <FormattedMessage
+                          id="calculator.instruction.table.to.use.numbers.type2"
+                          defaultMessage="Fractions"
+                          description="Type of numbers that is supported by the calculator"
+                        />
+                      </li>
+                      <li>
+                        <FormattedMessage
+                          id="calculator.instruction.table.to.use.numbers.type3"
+                          defaultMessage="Decimals"
+                          description="Type of numbers that is supported by the calculator"
+                        />
+                      </li>
+                    </ul>
+                  </td>
+                  <td dir="auto">
+                    <ul className="list-unstyled m-0">
+                      <li>2520</li>
+                      <li>2/3</li>
+                      <li>3.14, .98</li>
+                    </ul>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.operators"
+                      defaultMessage="Operators"
+                      description="A calculator functionality"
+                    />
+                  </th>
+                  <td dir="auto">
+                    <ul className="list-unstyled m-0">
+                      <li>
+                        {' + - * / '}
+                        <FormattedMessage
+                          id="calculator.instruction.table.to.use.operators.type1"
+                          defaultMessage="(add, subtract, multiply, divide)"
+                          description="Type of opprators that are supported by the calculator"
+                        />
+                      </li>
+                      <li>
+                        {'^ '}
+                        <FormattedMessage
+                          id="calculator.instruction.table.to.use.operators.type2"
+                          defaultMessage="(raise to a power)"
+                          description="It indicate that symbol (^) is being used to raise power, e.g. 2^2 = 4"
+                        />
+                      </li>
+                      <li>
+                        {'|| '}
+                        <FormattedMessage
+                          id="calculator.instruction.table.to.use.operators.type3"
+                          defaultMessage="(parallel resistors)"
+                          description="It indicate that the sympol (||) is being used to calculate (parallel resistor), it is a concept in electrical/electronic engineering"
+                        />
+                      </li>
+                    </ul>
+                  </td>
+                  <td dir="auto">
+                    <ul className="list-unstyled m-0">
+                      <li>x+(2*y)/x-1</li>
+                      <li>x^(n+1)</li>
+                      <li>v_IN+v_OUT</li>
+                      <li>1||2</li>
+                    </ul>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.constants"
+                      defaultMessage="Constants"
+                      description="It indicate that the calculator support constants, e.g. the speed of light"
+                    />
+                  </th>
+                  <td dir="auto">e, pi</td>
+                  <td dir="auto">
+                    <ul className="list-unstyled m-0">
+                      <li>20*e</li>
+                      <li>418*pi</li>
+                    </ul>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.affixes"
+                      defaultMessage="Affixes"
+                    />
+                  </th>
+                  <td dir="auto">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.affixes.type"
+                      defaultMessage="Percent sign (%)"
+                    />
+                  </td>
+                  <td dir="auto">
+                    <ul className="list-unstyled m-0">
+                      <li>20%</li>
+                    </ul>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.basic.functions"
+                      defaultMessage="Basic functions"
+                      description="It indicate that calculator supports mathematical function"
+                    />
+                  </th>
+                  <td dir="auto">abs, exp, fact, factorial, ln, log2, log10, sqrt</td>
+                  <td dir="auto">
+                    <ul className="list-unstyled m-0">
+                      <li>abs(x+y)</li>
+                      <li>sqrt(x^2-y)</li>
+                    </ul>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.trig.functions"
+                      defaultMessage="Trigonometric functions"
+                      description="Type of mathematical function that is supported by the calculator"
+                    />
+                  </th>
+                  <td dir="auto">
+                    <ul className="list-unstyled m-0">
+                      <li>sin, cos, tan, sec, csc, cot</li>
+                      <li>arcsin, sinh, arcsinh</li>
+                    </ul>
+                  </td>
+                  <td dir="auto">
+                    <ul className="list-unstyled m-0">
+                      <li>sin(4x+y)</li>
+                      <li>arccsch(4x+y)</li>
+                    </ul>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.scientific.notation"
+                      defaultMessage="Scientific notation"
+                      description="It indicate that calculator supports scientific notation"
+                    />
+                  </th>
+                  <td dir="auto">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.scientific.notation.type1"
+                      defaultMessage="{exponentSyntax} and the exponent"
+                      description="Type of scientific notation that is  supported by the calculator"
+                      values={{
+                        exponentSyntax: '10^',
+                      }}
+                    />
+                  </td>
+                  <td dir="auto">10^-9</td>
+                </tr>
+                <tr>
+                  <th scope="row">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.scientific.notation.type2"
+                      defaultMessage="{notationSyntax} notation"
+                      description="It indicate that calculator supports (e) to be used in notation"
+                      values={{
+                        notationSyntax: 'e',
+                      }}
+                    />
+                  </th>
+                  <td dir="auto">
+                    <FormattedMessage
+                      id="calculator.instruction.table.to.use.scientific.notation.type3"
+                      defaultMessage="{notationSyntax} and the exponent"
+                      description="An example for using (e) in notation"
+                      values={{
+                        notationSyntax: '1e',
+                      }}
+                    />
+                  </td>
+                  <td dir="auto">1e-9</td>
+                </tr>
+              </tbody>
+            </table>
+          </Collapsible.Body>
+        </Collapsible.Advanced>
+      </Collapsible.Body>
+    </Collapsible.Advanced>
+  );
 };
 
-export default injectIntl(Calculator);
+export default Calculator;

src/courseware/course/content-tools/calculator/calculator.scss

@@ -4,4 +4,19 @@
     background-color: #f1f1f1;
     box-shadow: 0 -1px 0 0 #ddd;
   }
+
+  table {
+    tr {
+      border-bottom: var(--pgn-size-border-width) solid var(--pgn-color-border);
+    }
+
+    thead tr {
+      border-bottom: calc(2 *  var(--pgn-size-border-width)) solid var(--pgn-color-border);
+      border-top: var(--pgn-size-border-width) solid var(--pgn-color-border);
+    }
+  
+    tbody tr {
+      vertical-align: top;
+    }
+  }
 }

src/courseware/course/content-tools/contentTools.scss

@@ -8,8 +8,8 @@
     display: inline-block;
     position: relative;
     z-index: 2;
-    background-color: #f1f1f1;
-    border: solid 1px #ddd;
+    background-color: #f1f1f1 !important;
+    border: solid 1px #ddd !important;
     border-bottom: none;
     border-top-left-radius: .3rem;
     border-top-right-radius: .3rem;

src/courseware/course/content-tools/notes-visibility/NotesVisibility.jsx

@@ -1,11 +1,9 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import {
-  injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import messages from './messages';
@@ -15,47 +13,41 @@ function toggleNotes() {
   iframe.contentWindow.postMessage('tools.toggleNotes', getConfig().LMS_BASE_URL);
 }
 
-class NotesVisibility extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: props.course.notes.visible,
-    };
-    this.visibilityUrl = `${getConfig().LMS_BASE_URL}/courses/${props.course.id}/edxnotes/visibility/`;
-  }
+const NotesVisibility = ({ course }) => {
+  const intl = useIntl();
+  const [visible, setVisible] = useState(course.notes.visible);
+  const visibilityUrl = `${getConfig().LMS_BASE_URL}/courses/${course.id}/edxnotes/visibility/`;
 
-  handleClick = () => {
-    const data = { visibility: !this.state.visible };
+  const handleClick = () => {
+    const data = { visibility: !visible };
     getAuthenticatedHttpClient().put(
-      this.visibilityUrl,
+      visibilityUrl,
       data,
     ).then(() => {
-      this.setState((state) => ({ visible: !state.visible }));
+      setVisible(!visible);
       toggleNotes();
     });
   };
 
-  render() {
-    const message = this.state.visible ? 'notes.button.hide' : 'notes.button.show';
-    return (
-      <button
-        className={`trigger btn ${this.state.visible ? 'text-secondary' : 'text-success'}  mx-2 `}
-        role="switch"
-        type="button"
-        onClick={this.handleClick}
-        onKeyDown={this.handleClick}
-        tabIndex="-1"
-        aria-checked={this.state.visible ? 'true' : 'false'}
-      >
-        <FontAwesomeIcon icon={faPencilAlt} aria-hidden="true" className="mr-2" />
-        {this.props.intl.formatMessage(messages[message])}
-      </button>
-    );
-  }
-}
+  const message = visible ? 'notes.button.hide' : 'notes.button.show';
+
+  return (
+    <button
+      className={`trigger btn ${visible ? 'text-secondary' : 'text-success'}  mx-2 `}
+      role="switch"
+      type="button"
+      onClick={handleClick}
+      onKeyDown={handleClick}
+      tabIndex="-1"
+      aria-checked={visible ? 'true' : 'false'}
+    >
+      <FontAwesomeIcon icon={faPencilAlt} aria-hidden="true" className="mr-2" />
+      {intl.formatMessage(messages[message])}
+    </button>
+  );
+};
 
 NotesVisibility.propTypes = {
-  intl: intlShape.isRequired,
   course: PropTypes.shape({
     id: PropTypes.string.isRequired,
     notes: PropTypes.shape({
@@ -64,4 +56,4 @@ NotesVisibility.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(NotesVisibility);
+export default NotesVisibility;

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

@@ -4,9 +4,7 @@ import { useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import {
-  FormattedMessage, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink } from '@openedx/paragon';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -16,7 +14,8 @@ import { useModel } from '../../../generic/model-store';
 import messages from './messages';
 import { logClick } from './utils';
 
-const CatalogSuggestion = ({ intl, variant }) => {
+const CatalogSuggestion = ({ variant }) => {
+  const intl = useIntl();
   const { courseId } = useSelector(state => state.courseware);
   const { org } = useModel('courseHomeMeta', courseId);
   const { administrator } = getAuthenticatedUser();
@@ -48,8 +47,7 @@ const CatalogSuggestion = ({ intl, variant }) => {
 };
 
 CatalogSuggestion.propTypes = {
-  intl: intlShape.isRequired,
   variant: PropTypes.string.isRequired,
 };
 
-export default injectIntl(CatalogSuggestion);
+export default CatalogSuggestion;

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

@@ -2,9 +2,7 @@ import React, { useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLinkedinIn } from '@fortawesome/free-brands-svg-icons';
 
-import {
-  FormattedDate, FormattedMessage, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -27,16 +25,17 @@ import messages from './messages';
 import { useModel } from '../../../generic/model-store';
 import { requestCert } from '../../../course-home/data/thunks';
 import ProgramCompletion from './ProgramCompletion';
-import DashboardFootnote from './DashboardFootnote';
 import UpgradeFootnote from './UpgradeFootnote';
 import SocialIcons from '../../social-share/SocialIcons';
 import { logClick, logVisit } from './utils';
 import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
-import CourseRecommendationsSlot from '../../../plugin-slots/CourseRecommendationsSlot';
+import DashboardFootnote from './DashboardFootnote';
+import { CourseRecommendationsSlot } from '../../../plugin-slots/CourseExitPluginSlots';
 
 const LINKEDIN_BLUE = '#2867B2';
 
-const CourseCelebration = ({ intl }) => {
+const CourseCelebration = () => {
+  const intl = useIntl();
   const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
   const { courseId } = useSelector(state => state.courseware);
   const dispatch = useDispatch();
@@ -364,8 +363,4 @@ const CourseCelebration = ({ intl }) => {
   );
 };
 
-CourseCelebration.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseCelebration);
+export default CourseCelebration;

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

@@ -1,8 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@openedx/paragon';
 import { useSelector } from 'react-redux';
 import { Navigate } from 'react-router-dom';
 
@@ -10,12 +7,12 @@ import CourseCelebration from './CourseCelebration';
 import CourseInProgress from './CourseInProgress';
 import CourseNonPassing from './CourseNonPassing';
 import { COURSE_EXIT_MODES, getCourseExitMode } from './utils';
-import messages from './messages';
 import { unsubscribeFromGoalReminders } from './data/thunks';
+import { CourseExitViewCoursesPluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';
 
 import { useModel } from '../../../generic/model-store';
 
-const CourseExit = ({ intl }) => {
+const CourseExit = () => {
   const { courseId } = useSelector(state => state.courseware);
   const {
     certificateData,
@@ -63,21 +60,10 @@ const CourseExit = ({ intl }) => {
 
   return (
     <>
-      <div className="row w-100 mt-2 mb-4 justify-content-end">
-        <Button
-          variant="outline-primary"
-          href={`${getConfig().LMS_BASE_URL}/dashboard`}
-        >
-          {intl.formatMessage(messages.viewCoursesButton)}
-        </Button>
-      </div>
+      <CourseExitViewCoursesPluginSlot />
       {body}
     </>
   );
 };
 
-CourseExit.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseExit);
+export default CourseExit;

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
 import { useSelector } from 'react-redux';
 import { Alert, Button } from '@openedx/paragon';
@@ -14,7 +14,8 @@ import DashboardFootnote from './DashboardFootnote';
 import messages from './messages';
 import { logClick, logVisit } from './utils';
 
-const CourseInProgress = ({ intl }) => {
+const CourseInProgress = () => {
+  const intl = useIntl();
   const { courseId } = useSelector(state => state.courseware);
   const {
     org,
@@ -60,8 +61,4 @@ const CourseInProgress = ({ intl }) => {
   );
 };
 
-CourseInProgress.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseInProgress);
+export default CourseInProgress;

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
 import { useSelector } from 'react-redux';
 import { Alert, Button } from '@openedx/paragon';
@@ -14,7 +14,8 @@ import DashboardFootnote from './DashboardFootnote';
 import messages from './messages';
 import { logClick, logVisit } from './utils';
 
-const CourseNonPassing = ({ intl }) => {
+const CourseNonPassing = () => {
+  const intl = useIntl();
   const { courseId } = useSelector(state => state.courseware);
   const {
     org,
@@ -60,8 +61,4 @@ const CourseNonPassing = ({ intl }) => {
   );
 };
 
-CourseNonPassing.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseNonPassing);
+export default CourseNonPassing;

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

@@ -4,7 +4,7 @@ import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import {
-  FormattedMessage, injectIntl, intlShape, defineMessages,
+  FormattedMessage, useIntl, defineMessages,
 } from '@edx/frontend-platform/i18n';
 import { useSelector, useDispatch } from 'react-redux';
 import {
@@ -64,8 +64,8 @@ const CourseCard = ({
     marketingUrl,
     onClick,
   },
-  intl,
 }) => {
+  const intl = useIntl();
   const formatList = (items, style) => (
     items.join(intl.formatMessage(
       messages.listJoin,
@@ -127,12 +127,12 @@ CourseCard.propTypes = {
     })),
     onClick: PropTypes.func,
   }).isRequired,
-  intl: intlShape.isRequired,
 };
 
-const IntlCard = injectIntl(CourseCard);
+const IntlCard = CourseCard;
 
-const CourseRecommendations = ({ intl, variant }) => {
+const CourseRecommendations = ({ variant }) => {
+  const intl = useIntl();
   const { courseId, recommendationsStatus } = useSelector(state => ({ ...state.recommendations, ...state.courseware }));
   const { recommendations } = useModel('coursewareMeta', courseId);
   const { org, number } = useModel('courseHomeMeta', courseId);
@@ -205,8 +205,7 @@ const CourseRecommendations = ({ intl, variant }) => {
 };
 
 CourseRecommendations.propTypes = {
-  intl: intlShape.isRequired,
   variant: PropTypes.string.isRequired,
 };
 
-export default injectIntl(CourseRecommendations);
+export default CourseRecommendations;

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

@@ -1,55 +1,25 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import {
-  FormattedMessage, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
-import { getConfig } from '@edx/frontend-platform';
-
-import { useModel } from '../../../generic/model-store';
 
+import { DashboardFootnoteLinkPluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';
 import Footnote from './Footnote';
 import messages from './messages';
-import { logClick } from './utils';
 
-const DashboardFootnote = ({ intl, variant }) => {
-  const { courseId } = useSelector(state => state.courseware);
-  const { org } = useModel('courseHomeMeta', courseId);
-  const { administrator } = getAuthenticatedUser();
-
-  const dashboardLink = (
-    <Hyperlink
-      style={{ textDecoration: 'underline' }}
-      destination={`${getConfig().LMS_BASE_URL}/dashboard`}
-      className="text-reset"
-      onClick={() => logClick(org, courseId, administrator, 'dashboard_footnote', { variant })}
-    >
-      {intl.formatMessage(messages.dashboardLink)}
-    </Hyperlink>
-  );
+const DashboardFootnote = ({ variant }) => {
+  const intl = useIntl();
+  const dashboardLink = (<DashboardFootnoteLinkPluginSlot variant={variant} />);
 
   return (
     <Footnote
       icon={faCalendarAlt}
-      text={(
-        <FormattedMessage
-          id="courseCelebration.dashboardInfo" // for historical reasons
-          defaultMessage="You can access this course and its materials on your {dashboardLink}."
-          description="Text that precedes link to learner's dashboard"
-          values={{ dashboardLink }}
-        />
-      )}
+      text={intl.formatMessage(messages.dashboardInfo, { dashboardLink })}
     />
   );
 };
 
 DashboardFootnote.propTypes = {
-  intl: intlShape.isRequired,
   variant: PropTypes.string.isRequired,
 };
 
-export default injectIntl(DashboardFootnote);
+export default DashboardFootnote;

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const Footnote = ({ icon, text }) => (
-  <div className="row w-100 mx-0 my-4 justify-content-center">
+  <div id="celebration-footnote-wrapper" className="row w-100 mx-0 my-4 justify-content-center">
     <p className="text-gray-700">
       <FontAwesomeIcon icon={icon} style={{ width: '20px' }} />&nbsp;
       {text}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Alert, Button, Hyperlink } from '@openedx/paragon';
 import certImage from '../../../generic/assets/edX_certificate.png';
 import messages from './messages';
@@ -20,12 +20,12 @@ import messages from './messages';
 const programTypes = ['microbachelors', 'micromasters', 'professional-certificate', 'xseries'];
 
 const ProgramCompletion = ({
-  intl,
   progress,
   title,
   type,
   url,
 }) => {
+  const intl = useIntl();
   if (!programTypes.includes(type) || progress.notStarted !== 0 || progress.inProgress !== 0) {
     return null;
   }
@@ -98,7 +98,6 @@ const ProgramCompletion = ({
 };
 
 ProgramCompletion.propTypes = {
-  intl: intlShape.isRequired,
   progress: PropTypes.shape({
     completed: PropTypes.number.isRequired,
     inProgress: PropTypes.number.isRequired,
@@ -109,4 +108,4 @@ ProgramCompletion.propTypes = {
   url: PropTypes.string.isRequired,
 };
 
-export default injectIntl(ProgramCompletion);
+export default ProgramCompletion;

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

@@ -3,9 +3,7 @@ import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import {
-  FormattedDate, FormattedMessage, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink } from '@openedx/paragon';
 import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
 
@@ -14,13 +12,15 @@ import { logClick } from './utils';
 import messages from './messages';
 import { useModel } from '../../../generic/model-store';
 
-const UpgradeFootnote = ({ deadline, href, intl }) => {
+const UpgradeFootnote = ({ deadline, href }) => {
+  const intl = useIntl();
   const { courseId } = useSelector(state => state.courseware);
   const { org } = useModel('courseHomeMeta', courseId);
   const { administrator } = getAuthenticatedUser();
 
   const upgradeLink = (
     <Hyperlink
+      id="upgrade-link"
       style={{ textDecoration: 'underline' }}
       destination={href}
       className="text-reset"
@@ -60,7 +60,6 @@ const UpgradeFootnote = ({ deadline, href, intl }) => {
 UpgradeFootnote.propTypes = {
   deadline: PropTypes.instanceOf(Date).isRequired,
   href: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(UpgradeFootnote);
+export default UpgradeFootnote;

src/courseware/course/course-exit/messages.ts

@@ -76,6 +76,11 @@ const messages = defineMessages({
     defaultMessage: 'Dashboard',
     description: 'Link to user’s dashboard',
   },
+  dashboardInfo: {
+    id: 'courseCelebration.dashboardInfo', // for historical reasons
+    defaultMessage: 'You can access this course and its materials on your {dashboardLink}.',
+    description: "Text that precedes link to learner's dashboard",
+  },
   endOfCourseDescription: {
     id: 'courseExit.endOfCourseDescription',
     defaultMessage: 'Unfortunately, you are not currently eligible for a certificate. You need to receive a passing grade to be eligible for a certificate.',

src/courseware/course/course-license/CourseLicense.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCopyright } from '@fortawesome/free-regular-svg-icons';
@@ -105,8 +105,8 @@ function parseLicense(license) {
 
 const CourseLicense = ({
   license,
-  intl,
 }) => {
+  const intl = useIntl();
   const renderAllRightsReservedLicense = () => (
     <div className="text-gray-500">
       <FontAwesomeIcon aria-hidden="true" className="mr-1" icon={faCopyright} />
@@ -155,11 +155,10 @@ const CourseLicense = ({
 
 CourseLicense.propTypes = {
   license: PropTypes.string,
-  intl: intlShape.isRequired,
 };
 
 CourseLicense.defaultProps = {
   license: 'all-rights-reserved',
 };
 
-export default injectIntl(CourseLicense);
+export default CourseLicense;

src/courseware/course/new-sidebar/SidebarContextProvider.tsx

@@ -54,6 +54,8 @@ const SidebarProvider: React.FC<Props> = ({
   }, [courseId]);
 
   useEffect(() => {
+    window.sessionStorage.setItem('hideCourseOutlineSidebar', 'true');
+    window.sessionStorage.setItem(`notificationTrayStatus.${courseId}`, 'open');
     setHideDiscussionbar(!isDiscussionbarAvailable);
     setHideNotificationbar(!isNotificationbarAvailable);
     if (initialSidebar && currentSidebar !== initialSidebar) {

src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.test.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 
+import { fireEvent } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 
 import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
+import { getSessionStorage, setSessionStorage } from '../../../../../../data/sessionStorage';
 import {
   initializeMockApp, initializeTestStore, render, screen,
 } from '../../../../../../setupTest';
@@ -14,11 +16,19 @@ import { buildTopicsFromUnits } from '../../../../../data/__factories__/discussi
 import { getCourseDiscussionTopics } from '../../../../../data/thunks';
 import SidebarContext from '../../../SidebarContext';
 import DiscussionsNotificationsSidebar from '../DiscussionsNotificationsSidebar';
+import DiscussionsNotificationsTrigger from '../DiscussionsNotificationsTrigger';
 import DiscussionsWidget from './DiscussionsWidget';
 
 initializeMockApp();
 jest.mock('@edx/frontend-platform/analytics');
 
+jest.mock('../../../../../../data/sessionStorage', () => ({
+  getSessionStorage: jest.fn(),
+  setSessionStorage: jest.fn(),
+}));
+
+const onClickMock = jest.fn();
+
 describe('DiscussionsWidget', () => {
   let axiosMock;
   let mockData;
@@ -81,4 +91,34 @@ describe('DiscussionsWidget', () => {
     expect(screen.queryByText('Back to course')).toBeInTheDocument();
     expect(sendTrackEvent).toHaveBeenCalledTimes(1);
   });
+
+  it('should open notification tray if closed', () => {
+    (getSessionStorage as jest.Mock).mockReturnValue('closed');
+
+    renderWithProvider(() => <DiscussionsNotificationsTrigger onClick={onClickMock} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(setSessionStorage).toHaveBeenCalledWith(
+      `notificationTrayStatus.${courseId}`,
+      'open',
+    );
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+  it('should close notification tray if open', () => {
+    (getSessionStorage as jest.Mock).mockReturnValue('open');
+
+    renderWithProvider(() => <DiscussionsNotificationsTrigger onClick={onClickMock} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(setSessionStorage).toHaveBeenCalledWith(
+      `notificationTrayStatus.${courseId}`,
+      'open',
+    );
+    expect(onClickMock).toHaveBeenCalled();
+  });
 });

src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.tsx

@@ -9,7 +9,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { breakpoints } from '@openedx/paragon';
 
 import {
-  initializeMockApp, render, screen, within, act, fireEvent, waitFor,
+  initializeMockApp, render, screen, act, fireEvent, waitFor,
 } from '../../../../../../setupTest';
 import initializeStore from '../../../../../../store';
 import { appendBrowserTimezoneToUrl, executeThunk } from '../../../../../../utils';
@@ -90,28 +90,7 @@ describe('NotificationsWidget', () => {
         <NotificationsWidget />
       </SidebarContext.Provider>,
     );
-    expect(screen.getByTestId('notification_widget_slot')).toBeInTheDocument();
-  });
-
-  it('renders upgrade card', async () => {
-    const contextData: Partial<SidebarContextData> = {
-      currentSidebar: ID,
-      courseId,
-      hideNotificationbar: false,
-      isNotificationbarAvailable: true,
-    };
-    await fetchAndRender(
-      <SidebarContext.Provider value={contextData as SidebarContextData}>
-        <NotificationsWidget />
-      </SidebarContext.Provider>,
-    );
-
-    // The Upgrade Notification should be inside the PluginSlot.
-    const UpgradeNotification = document.querySelector('.upgrade-notification');
-    expect(UpgradeNotification).toBeInTheDocument();
-
-    expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
-    expect(screen.queryByText('You have no new notifications at this time.')).not.toBeInTheDocument();
+    expect(screen.getByTestId('org.openedx.frontend.learning.notification_widget.v1')).toBeInTheDocument();
   });
 
   it('renders no notifications bar if no verified mode', async () => {
@@ -130,44 +109,6 @@ describe('NotificationsWidget', () => {
     expect(screen.queryByText('Notifications')).not.toBeInTheDocument();
   });
 
-  it.each([
-    {
-      description: 'close the notification widget.',
-      enabledInContext: true,
-      testId: 'notification-widget',
-    },
-    {
-      description: 'close the sidebar when the notification widget is closed, and the discussion widget is unavailable.',
-      enabledInContext: false,
-      testId: 'sidebar-DISCUSSIONS_NOTIFICATIONS',
-    },
-  ])('successfully %s', async ({ enabledInContext, testId }) => {
-    const userVerifiedMode = Factory.build('verifiedMode');
-
-    await setupDiscussionSidebar({
-      verifiedMode: userVerifiedMode,
-      enabledInContext,
-      isNewDiscussionSidebarViewEnabled: true,
-    });
-
-    const sidebarButton = screen.getByRole('button', { name: /Show sidebar tray/i });
-
-    await act(async () => {
-      fireEvent.click(sidebarButton);
-    });
-
-    const notificationWidget = await waitFor(() => screen.getByTestId('notification-widget'));
-    const closeNotificationButton = within(notificationWidget).getByRole('button', { name: /Close/i });
-
-    await act(async () => {
-      fireEvent.click(closeNotificationButton);
-    });
-
-    await waitFor(() => {
-      expect(screen.queryByTestId(testId)).not.toBeInTheDocument();
-    });
-  });
-
   it('marks notification as seen 3 seconds later', async () => {
     const onNotificationSeen = jest.fn();
     const contextData: Partial<SidebarContextData> = {

src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.tsx

@@ -1,11 +1,10 @@
 import React, { useContext, useEffect, useMemo } from 'react';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useModel } from '../../../../../../generic/model-store';
-import UpgradeNotification from '../../../../../../generic/upgrade-notification/UpgradeNotification';
 import { WIDGETS } from '../../../../../../constants';
 import SidebarContext from '../../../SidebarContext';
+import { NotificationWidgetSlot } from '../../../../../../plugin-slots/NotificationWidgetSlot';
 
 const NotificationsWidget = () => {
   const {
@@ -21,17 +20,11 @@ const NotificationsWidget = () => {
   const course = useModel('coursewareMeta', courseId);
 
   const {
-    accessExpiration,
-    contentTypeGatingEnabled,
     end,
     enrollmentEnd,
     enrollmentMode,
     enrollmentStart,
-    marketingUrl,
-    offer,
     start,
-    timeOffsetMillis,
-    userTimezone,
     verificationStatus,
   } = course;
 
@@ -74,32 +67,12 @@ const NotificationsWidget = () => {
 
   return (
     <div className="border border-light-400 rounded-sm" data-testid="notification-widget">
-      <PluginSlot
-        id="notification_widget_slot"
-        pluginProps={{
-          courseId,
-          model: 'coursewareMeta',
-          notificationCurrentState: upgradeNotificationCurrentState,
-          setNotificationCurrentState: setUpgradeNotificationCurrentState,
-          toggleSidebar: onToggleSidebar,
-        }}
-      >
-        <UpgradeNotification
-          offer={offer}
-          verifiedMode={verifiedMode}
-          accessExpiration={accessExpiration}
-          contentTypeGatingEnabled={contentTypeGatingEnabled}
-          marketingUrl={marketingUrl}
-          upsellPageName="in_course"
-          userTimezone={userTimezone}
-          shouldDisplayBorder={false}
-          timeOffsetMillis={timeOffsetMillis}
-          courseId={courseId}
-          org={org}
-          setupgradeNotificationCurrentState={setUpgradeNotificationCurrentState}
-          toggleSidebar={onToggleSidebar}
-        />
-      </PluginSlot>
+      <NotificationWidgetSlot
+        courseId={courseId}
+        notificationCurrentState={upgradeNotificationCurrentState}
+        setNotificationCurrentState={setUpgradeNotificationCurrentState}
+        toggleSidebar={onToggleSidebar}
+      />
     </div>
   );
 };

src/courseware/course/sequence/Sequence.jsx

@@ -13,17 +13,18 @@ import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import PageLoading from '@src/generic/PageLoading';
 import { useModel } from '@src/generic/model-store';
 import { useSequenceBannerTextAlert, useSequenceEntranceExamAlert } from '@src/alerts/sequence-alerts/hooks';
-import SequenceContainerSlot from '../../../plugin-slots/SequenceContainerSlot';
+import SequenceContainerSlot from '@src/plugin-slots/SequenceContainerSlot';
+import { CourseOutlineSidebarSlot } from '@src/plugin-slots/CourseOutlineSidebarSlot';
+import { CourseOutlineSidebarTriggerSlot } from '@src/plugin-slots/CourseOutlineSidebarTriggerSlot';
+import { NotificationsDiscussionsSidebarSlot } from '@src/plugin-slots/NotificationsDiscussionsSidebarSlot';
+import SequenceNavigationSlot from '@src/plugin-slots/SequenceNavigationSlot';
 
 import { getCoursewareOutlineSidebarSettings } from '../../data/selectors';
 import CourseLicense from '../course-license';
-import { NotificationsDiscussionsSidebarSlot } from '../../../plugin-slots/NotificationsDiscussionsSidebarSlot';
 import messages from './messages';
 import HiddenAfterDue from './hidden-after-due';
-import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
+import { UnitNavigation } from './sequence-navigation';
 import SequenceContent from './SequenceContent';
-import { CourseOutlineSidebarSlot } from '../../../plugin-slots/CourseOutlineSidebarSlot';
-import { CourseOutlineSidebarTriggerSlot } from '../../../plugin-slots/CourseOutlineSidebarTriggerSlot';
 
 const Sequence = ({
   unitId,
@@ -172,7 +173,7 @@ const Sequence = ({
         <div className="sequence w-100">
           {!isEnabledOutlineSidebar && (
             <div className="sequence-navigation-container">
-              <SequenceNavigation
+              <SequenceNavigationSlot
                 sequenceId={sequenceId}
                 unitId={unitId}
                 nextHandler={() => {
@@ -217,18 +218,20 @@ const Sequence = ({
 
   if (sequenceStatus === 'loaded') {
     return (
-      <div>
-        <SequenceExamWrapper
-          sequence={sequence}
-          courseId={courseId}
-          isStaff={isStaff}
-          originalUserIsStaff={originalUserIsStaff}
-          canAccessProctoredExams={canAccessProctoredExams}
-        >
-          {defaultContent}
-        </SequenceExamWrapper>
+      <>
+        <div className="d-flex flex-column flex-grow-1 justify-content-center">
+          <SequenceExamWrapper
+            sequence={sequence}
+            courseId={courseId}
+            isStaff={isStaff}
+            originalUserIsStaff={originalUserIsStaff}
+            canAccessProctoredExams={canAccessProctoredExams}
+          >
+            {defaultContent}
+          </SequenceExamWrapper>
+        </div>
         <CourseLicense license={license || undefined} />
-      </div>
+      </>
     );
   }
 

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

@@ -154,7 +154,7 @@ describe('Sequence', () => {
     testStore.dispatch(fetchSequenceFailure({ sequenceId: mockData.sequenceId }));
     render(<Sequence {...mockData} />, { store: testStore, wrapWithRouter: true });
 
-    expect(screen.getByText('There was an error loading this course.')).toBeInTheDocument();
+    await screen.findByText('There was an error loading this course.');
   });
 
   it('handles loading unit', async () => {

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

@@ -1,12 +1,9 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
-import { ErrorPage } from '@edx/frontend-platform/react';
-import { StrictDict } from '@edx/react-unit-test-utils';
-import { ModalDialog, Modal } from '@openedx/paragon';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { ModalDialog } from '@openedx/paragon';
+import { ContentIFrameLoaderSlot } from '../../../../plugin-slots/ContentIFrameLoaderSlot';
+import { ContentIFrameErrorSlot } from '../../../../plugin-slots/ContentIFrameErrorSlot';
 
-import PageLoading from '@src/generic/PageLoading';
 import * as hooks from './hooks';
 
 /**
@@ -23,10 +20,10 @@ export const IFRAME_FEATURE_POLICY = (
   'microphone *; camera *; midi *; geolocation *; encrypted-media *; clipboard-write *; autoplay *'
 );
 
-export const testIDs = StrictDict({
+export const testIDs = {
   contentIFrame: 'content-iframe-test-id',
   modalIFrame: 'modal-iframe-test-id',
-});
+};
 
 const ContentIFrame = ({
   iframeUrl,
@@ -66,34 +63,13 @@ const ContentIFrame = ({
     onLoad: handleIFrameLoad,
   };
 
-  let modalContent;
-  if (modalOptions.isOpen) {
-    modalContent = modalOptions.body
-      ? <div className="unit-modal">{ modalOptions.body }</div>
-      : (
-        <iframe
-          title={modalOptions.title}
-          allow={IFRAME_FEATURE_POLICY}
-          frameBorder="0"
-          src={modalOptions.url}
-          style={{ width: '100%', height: modalOptions.height }}
-        />
-      );
-  }
-
   return (
     <>
       {(shouldShowContent && !hasLoaded) && (
-        showError ? <ErrorPage /> : (
-          <PluginSlot
-            id="content_iframe_loader_slot"
-            pluginProps={{
-              defaultLoaderComponent: <PageLoading srMessage={loadingMessage} />,
-              courseId,
-            }}
-          >
-            <PageLoading srMessage={loadingMessage} />
-          </PluginSlot>
+        showError ? (
+          <ContentIFrameErrorSlot courseId={courseId} />
+        ) : (
+          <ContentIFrameLoaderSlot courseId={courseId} loadingMessage={loadingMessage} />
         )
       )}
       {shouldShowContent && (
@@ -101,29 +77,30 @@ const ContentIFrame = ({
           <iframe title={title} {...contentIFrameProps} data-testid={testIDs.contentIFrame} />
         </div>
       )}
-      {modalOptions.isOpen && (modalOptions.isFullscreen
-        ? (
+      {modalOptions.isOpen
+          && (
           <ModalDialog
-            dialogClassName="modal-lti"
+            className="modal-lti"
             onClose={handleModalClose}
-            size="fullscreen"
+            size={modalOptions.isFullscreen ? 'fullscreen' : 'md'}
             isOpen
             hasCloseButton={false}
           >
             <ModalDialog.Body className={modalOptions.modalBodyClassName}>
-              {modalContent}
+              {modalOptions.body
+                ? <div className="unit-modal">{ modalOptions.body }</div>
+                : (
+                  <iframe
+                    title={modalOptions.title}
+                    allow={IFRAME_FEATURE_POLICY}
+                    frameBorder="0"
+                    src={modalOptions.url}
+                    style={{ width: '100%', height: modalOptions.height }}
+                  />
+                )}
             </ModalDialog.Body>
           </ModalDialog>
-
-        ) : (
-          <Modal
-            body={modalContent}
-            dialogClassName="modal-lti"
-            onClose={handleModalClose}
-            open
-          />
-        )
-      )}
+          )}
     </>
   );
 };

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

@@ -1,25 +1,11 @@
-import React from 'react';
-
-import { ErrorPage } from '@edx/frontend-platform/react';
-import { ModalDialog, Modal } from '@openedx/paragon';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import PageLoading from '@src/generic/PageLoading';
+import { render, screen } from '@testing-library/react';
 
 import * as hooks from './hooks';
-import ContentIFrame, { IFRAME_FEATURE_POLICY, testIDs } from './ContentIFrame';
+import ContentIFrame, { IFRAME_FEATURE_POLICY } from './ContentIFrame';
 
-jest.mock('@edx/frontend-platform/react', () => ({ ErrorPage: 'ErrorPage' }));
+jest.mock('@edx/frontend-platform/react', () => ({ ErrorPage: () => <div>ErrorPage</div> }));
 
-jest.mock('@openedx/paragon', () => jest.requireActual('@edx/react-unit-test-utils')
-  .mockComponents({
-    Modal: 'Modal',
-    ModalDialog: {
-      Body: 'ModalDialog.Body',
-    },
-  }));
-
-jest.mock('@src/generic/PageLoading', () => 'PageLoading');
+jest.mock('@src/generic/PageLoading', () => jest.fn(() => <div>PageLoading</div>));
 
 jest.mock('./hooks', () => ({
   useIFrameBehavior: jest.fn(),
@@ -67,14 +53,13 @@ const props = {
   title: 'test-title',
 };
 
-let el;
 describe('ContentIFrame Component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
   describe('behavior', () => {
     beforeEach(() => {
-      el = shallow(<ContentIFrame {...props} />);
+      render(<ContentIFrame {...props} />);
     });
     it('initializes iframe behavior hook', () => {
       expect(hooks.useIFrameBehavior).toHaveBeenCalledWith({
@@ -89,61 +74,61 @@ describe('ContentIFrame Component', () => {
     });
   });
   describe('output', () => {
-    let component;
     describe('if shouldShowContent', () => {
       describe('if not hasLoaded', () => {
         it('displays errorPage if showError', () => {
           hooks.useIFrameBehavior.mockReturnValueOnce({ ...iframeBehavior, showError: true });
-          el = shallow(<ContentIFrame {...props} />);
-          expect(el.instance.findByType(ErrorPage).length).toEqual(1);
+          render(<ContentIFrame {...props} />);
+          const errorPage = screen.getByText('ErrorPage');
+          expect(errorPage).toBeInTheDocument();
         });
         it('displays PageLoading component if not showError', () => {
-          el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(PageLoading);
-          expect(component.props.srMessage).toEqual(props.loadingMessage);
+          render(<ContentIFrame {...props} />);
+          const pageLoading = screen.getByText('PageLoading');
+          expect(pageLoading).toBeInTheDocument();
         });
       });
       describe('hasLoaded', () => {
         it('does not display PageLoading or ErrorPage', () => {
           hooks.useIFrameBehavior.mockReturnValueOnce({ ...iframeBehavior, hasLoaded: true });
-          el = shallow(<ContentIFrame {...props} />);
-          expect(el.instance.findByType(PageLoading).length).toEqual(0);
-          expect(el.instance.findByType(ErrorPage).length).toEqual(0);
+          render(<ContentIFrame {...props} />);
+          const pageLoading = screen.queryByText('PageLoading');
+          expect(pageLoading).toBeNull();
+          const errorPage = screen.queryByText('ErrorPage');
+          expect(errorPage).toBeNull();
         });
       });
       it('display iframe with props from hooks', () => {
-        el = shallow(<ContentIFrame {...props} />);
-        [component] = el.instance.findByTestId(testIDs.contentIFrame);
-        expect(component.props).toEqual({
-          allow: IFRAME_FEATURE_POLICY,
-          allowFullScreen: true,
-          scrolling: 'no',
-          referrerPolicy: 'origin',
-          title: props.title,
-          id: props.elementId,
-          src: props.iframeUrl,
-          height: iframeBehavior.iframeHeight,
-          onLoad: iframeBehavior.handleIFrameLoad,
-          'data-testid': testIDs.contentIFrame,
-        });
+        render(<ContentIFrame {...props} />);
+        const iframe = screen.getByTitle(props.title);
+        expect(iframe).toBeInTheDocument();
+        expect(iframe).toHaveAttribute('id', props.elementId);
+        expect(iframe).toHaveAttribute('src', props.iframeUrl);
+        expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
+        expect(iframe).toHaveAttribute('allowfullscreen', '');
+        expect(iframe).toHaveAttribute('scrolling', 'no');
+        expect(iframe).toHaveAttribute('referrerpolicy', 'origin');
       });
     });
     describe('if not shouldShowContent', () => {
       it('does not show PageLoading, ErrorPage, or unit-iframe-wrapper', () => {
-        el = shallow(<ContentIFrame {...{ ...props, shouldShowContent: false }} />);
-        expect(el.instance.findByType(PageLoading).length).toEqual(0);
-        expect(el.instance.findByType(ErrorPage).length).toEqual(0);
-        expect(el.instance.findByTestId(testIDs.contentIFrame).length).toEqual(0);
+        render(<ContentIFrame {...{ ...props, shouldShowContent: false }} />);
+        expect(screen.queryByText('PageLoading')).toBeNull();
+        expect(screen.queryByText('ErrorPage')).toBeNull();
+        expect(screen.queryByTitle(props.title)).toBeNull();
       });
     });
     it('does not display modal if modalOptions returns isOpen: false', () => {
-      el = shallow(<ContentIFrame {...props} />);
-      expect(el.instance.findByType(Modal).length).toEqual(0);
+      render(<ContentIFrame {...props} />);
+      const modal = screen.queryByRole('dialog');
+      expect(modal).toBeNull();
     });
     describe('if modalOptions.isOpen', () => {
       const testModalOpenAndHandleClose = () => {
-        test('Modal component isOpen, with handleModalClose from hook', () => {
-          expect(component.props.onClose).toEqual(modalIFrameData.handleModalClose);
+        it('closes modal on close button click', () => {
+          const closeButton = screen.getByTestId('modal-backdrop');
+          closeButton.click();
+          expect(modalIFrameData.handleModalClose).toHaveBeenCalled();
         });
       };
       describe('fullscreen modal', () => {
@@ -153,14 +138,13 @@ describe('ContentIFrame Component', () => {
               ...modalIFrameData,
               modalOptions: { ...modalOptions.withBody, isFullscreen: true },
             });
-            el = shallow(<ContentIFrame {...props} />);
-            [component] = el.instance.findByType(ModalDialog);
+            render(<ContentIFrame {...props} />);
           });
           it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
-            const content = component.findByType(ModalDialog.Body)[0].children[0];
-            expect(content.matches(shallow(
-              <div className="unit-modal">{modalOptions.withBody.body}</div>,
-            ))).toEqual(true);
+            const dialog = screen.getByRole('dialog');
+            expect(dialog).toBeInTheDocument();
+            const modalBody = screen.getByText(modalOptions.withBody.body);
+            expect(modalBody).toBeInTheDocument();
           });
           testModalOpenAndHandleClose();
         });
@@ -171,53 +155,42 @@ describe('ContentIFrame Component', () => {
                 ...modalIFrameData,
                 modalOptions: { ...modalOptions.withUrl, isFullscreen: true },
               });
-            el = shallow(<ContentIFrame {...props} />);
-            [component] = el.instance.findByType(ModalDialog);
+            render(<ContentIFrame {...props} />);
+          });
+          it('displays Modal with iframe to provided url if modal.body is not provided', () => {
+            const iframe = screen.getByTitle(modalOptions.withUrl.title);
+            expect(iframe).toBeInTheDocument();
+            expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
+            expect(iframe).toHaveAttribute('src', modalOptions.withUrl.url);
           });
           testModalOpenAndHandleClose();
-          it('displays Modal with iframe to provided url if modal.body is not provided', () => {
-            const content = component.findByType(ModalDialog.Body)[0].children[0];
-            expect(content.matches(shallow(
-              <iframe
-                title={modalOptions.withUrl.title}
-                allow={IFRAME_FEATURE_POLICY}
-                frameBorder="0"
-                src={modalOptions.withUrl.url}
-                style={{ width: '100%', height: modalOptions.withUrl.height }}
-              />,
-            ))).toEqual(true);
-          });
         });
       });
       describe('body modal', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withBody });
-          el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(Modal);
+          render(<ContentIFrame {...props} />);
         });
         it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
-          expect(component.props.body).toEqual(<div className="unit-modal">{modalOptions.withBody.body}</div>);
+          const dialog = screen.getByRole('dialog');
+          expect(dialog).toBeInTheDocument();
+          const modalBody = screen.getByText(modalOptions.withBody.body);
+          expect(modalBody).toBeInTheDocument();
         });
         testModalOpenAndHandleClose();
       });
       describe('url modal', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withUrl });
-          el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(Modal);
+          render(<ContentIFrame {...props} />);
+        });
+        it('displays Modal with iframe to provided url if modal.body is not provided', () => {
+          const iframe = screen.getByTitle(modalOptions.withUrl.title);
+          expect(iframe).toBeInTheDocument();
+          expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
+          expect(iframe).toHaveAttribute('src', modalOptions.withUrl.url);
         });
         testModalOpenAndHandleClose();
-        it('displays Modal with iframe to provided url if modal.body is not provided', () => {
-          expect(component.props.body).toEqual(
-            <iframe
-              title={modalOptions.withUrl.title}
-              allow={IFRAME_FEATURE_POLICY}
-              frameBorder="0"
-              src={modalOptions.withUrl.url}
-              style={{ width: '100%', height: modalOptions.withUrl.height }}
-            />,
-          );
-        });
       });
     });
   });

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

@@ -2,14 +2,13 @@ import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
 import { useModel } from '@src/generic/model-store';
 import PageLoading from '@src/generic/PageLoading';
+import { GatedUnitContentMessageSlot } from '../../../../plugin-slots/GatedUnitContentMessageSlot';
 
 import messages from '../messages';
 import HonorCode from '../honor-code';
-import LockPaywall from '../lock-paywall';
 import * as hooks from './hooks';
 import { modelKeys } from './constants';
 
@@ -29,14 +28,7 @@ const UnitSuspense = ({
     <>
       {shouldDisplayContentGating && (
         <Suspense fallback={<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />}>
-          <PluginSlot
-            id="gated_unit_content_message_slot"
-            pluginProps={{
-              courseId,
-            }}
-          >
-            <LockPaywall courseId={courseId} />
-          </PluginSlot>
+          <GatedUnitContentMessageSlot courseId={courseId} />
         </Suspense>
       )}
       {shouldDisplayHonorCode && (

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

@@ -1,21 +1,15 @@
-import React from 'react';
-
-import { formatMessage, shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { useModel } from '@src/generic/model-store';
-import PageLoading from '@src/generic/PageLoading';
-
-import messages from '../messages';
-import HonorCode from '../honor-code';
-import LockPaywall from '../lock-paywall';
 import hooks from './hooks';
 import { modelKeys } from './constants';
 
 import UnitSuspense from './UnitSuspense';
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
   defineMessages: m => m,
-  useIntl: () => ({ formatMessage: jest.requireActual('@edx/react-unit-test-utils').formatMessage }),
 }));
 
 jest.mock('react', () => ({
@@ -23,10 +17,9 @@ jest.mock('react', () => ({
   Suspense: 'Suspense',
 }));
 
-jest.mock('../honor-code', () => 'HonorCode');
-jest.mock('../lock-paywall', () => 'LockPaywall');
+jest.mock('../honor-code', () => jest.fn(() => <div>HonorCode</div>));
+jest.mock('../lock-paywall', () => jest.fn(() => <div>LockPaywall</div>));
 jest.mock('@src/generic/model-store', () => ({ useModel: jest.fn() }));
-jest.mock('@src/generic/PageLoading', () => 'PageLoading');
 
 jest.mock('./hooks', () => ({
   useShouldDisplayHonorCode: jest.fn(() => false),
@@ -45,7 +38,6 @@ const props = {
   id: 'test-id',
 };
 
-let el;
 describe('UnitSuspense component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -53,7 +45,7 @@ describe('UnitSuspense component', () => {
   });
   describe('behavior', () => {
     it('initializes models', () => {
-      el = shallow(<UnitSuspense {...props} />);
+      render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
       const { calls } = useModel.mock;
       const [unitCall] = calls.filter(call => call[0] === modelKeys.units);
       const [metaCall] = calls.filter(call => call[0] === modelKeys.coursewareMeta);
@@ -65,8 +57,9 @@ describe('UnitSuspense component', () => {
     describe('LockPaywall', () => {
       const testNoPaywall = () => {
         it('does not display LockPaywall', () => {
-          el = shallow(<UnitSuspense {...props} />);
-          expect(el.instance.findByType(LockPaywall).length).toEqual(0);
+          render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
+          const lockPaywall = screen.queryByText('LockPaywall');
+          expect(lockPaywall).toBeNull();
         });
       };
       describe('gating not enabled', () => { testNoPaywall(); });
@@ -77,30 +70,29 @@ describe('UnitSuspense component', () => {
       describe('gating enabled, gated content included', () => {
         beforeEach(() => { mockModels(true, true); });
         it('displays LockPaywall in Suspense wrapper with PageLoading fallback', () => {
-          el = shallow(<UnitSuspense {...props} />);
-          const [component] = el.instance.findByType(LockPaywall);
-          expect(component.parent.type).toEqual('PluginSlot');
-          expect(component.parent.parent.type).toEqual('Suspense');
-          expect(component.parent.parent.props.fallback)
-            .toEqual(<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />);
-          expect(component.props.courseId).toEqual(props.courseId);
+          hooks.useShouldDisplayHonorCode.mockReturnValueOnce(false);
+          render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
+          const lockPaywall = screen.getByText('LockPaywall');
+          expect(lockPaywall).toBeInTheDocument();
+          const suspenseWrapper = lockPaywall.closest('suspense');
+          expect(suspenseWrapper).toBeInTheDocument();
         });
       });
     });
     describe('HonorCode', () => {
       it('does not display HonorCode if useShouldDisplayHonorCode => false', () => {
         hooks.useShouldDisplayHonorCode.mockReturnValueOnce(false);
-        el = shallow(<UnitSuspense {...props} />);
-        expect(el.instance.findByType(HonorCode).length).toEqual(0);
+        render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
+        const honorCode = screen.queryByText('HonorCode');
+        expect(honorCode).toBeNull();
       });
       it('displays HonorCode component in Suspense wrapper with PageLoading fallback if shouldDisplayHonorCode', () => {
         hooks.useShouldDisplayHonorCode.mockReturnValueOnce(true);
-        el = shallow(<UnitSuspense {...props} />);
-        const [component] = el.instance.findByType(HonorCode);
-        expect(component.parent.type).toEqual('Suspense');
-        expect(component.parent.props.fallback)
-          .toEqual(<PageLoading srMessage={formatMessage(messages.loadingHonorCode)} />);
-        expect(component.props.courseId).toEqual(props.courseId);
+        render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
+        const honorCode = screen.getByText('HonorCode');
+        expect(honorCode).toBeInTheDocument();
+        const suspenseWrapper = honorCode.closest('suspense');
+        expect(suspenseWrapper).toBeInTheDocument();
       });
     });
   });

src/courseware/course/sequence/Unit/constants.ts

@@ -1,26 +1,25 @@
-import { StrictDict } from '@edx/react-unit-test-utils/dist';
-
-export const modelKeys = StrictDict({
+export const modelKeys = {
   units: 'units',
   coursewareMeta: 'coursewareMeta',
-});
+} as const;
 
-export const views = StrictDict({
+export const views = {
   student: 'student_view',
   public: 'public_view',
-});
+} as const;
 
 export const loadingState = 'loading';
 
-export const messageTypes = StrictDict({
+export const messageTypes = {
   modal: 'plugin.modal',
   resize: 'plugin.resize',
   videoFullScreen: 'plugin.videoFullScreen',
-});
+  autoAdvance: 'plugin.autoAdvance',
+} as const;
 
-export default StrictDict({
+export default {
   modelKeys,
   views,
   loadingState,
   messageTypes,
-});
+};

src/courseware/course/sequence/Unit/hooks/useExamAccess.js

@@ -1,19 +1,13 @@
 import React from 'react';
 
 import { logError } from '@edx/frontend-platform/logging';
-import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
 import { useExamAccessToken, useFetchExamAccessToken, useIsExam } from '@edx/frontend-lib-special-exams';
 
-export const stateKeys = StrictDict({
-  accessToken: 'accessToken',
-  blockAccess: 'blockAccess',
-});
-
 const useExamAccess = ({
   id,
 }) => {
   const isExam = useIsExam();
-  const [blockAccess, setBlockAccess] = useKeyedState(stateKeys.blockAccess, isExam);
+  const [blockAccess, setBlockAccess] = React.useState(isExam);
 
   const fetchExamAccessToken = useFetchExamAccessToken();
 

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { logError } from '@edx/frontend-platform/logging';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { useExamAccessToken, useFetchExamAccessToken, useIsExam } from '@edx/frontend-lib-special-exams';
 
 import { initializeMockApp } from '../../../../../setupTest';
@@ -64,24 +64,27 @@ describe('useExamAccess hook', () => {
     it('returns true for blockAccess if an exam but accessToken not yet fetched', async () => {
       useIsExam.mockImplementation(() => mockUseIsExam(true));
 
-      const { result, waitForNextUpdate } = renderHook(() => useExamAccess({ id }));
+      const { result } = renderHook(() => useExamAccess({ id }));
       const { accessToken, blockAccess } = result.current;
 
       expect(accessToken).toEqual('');
       expect(blockAccess).toBe(true);
       expect(mockFetchExamAccessToken).toHaveBeenCalled();
 
-      // This is to get rid of the act(...) warning.
-      await act(async () => {
-        await waitForNextUpdate();
+      await waitFor(() => {
+        expect(result.current).toBeTruthy();
+        expect(result.current?.isFetching).toBeFalsy();
       });
     });
     it('returns false for blockAccess if an exam and accessToken fetch succeeds', async () => {
       useIsExam.mockImplementation(() => mockUseIsExam(true));
-      const { result, waitForNextUpdate } = renderHook(() => useExamAccess({ id }));
+      const { result } = renderHook(() => useExamAccess({ id }));
 
       // We wait for the promise to resolve and for updates to state to complete so that blockAccess is updated.
-      await waitForNextUpdate();
+      await waitFor(() => {
+        expect(result.current).toBeTruthy();
+        expect(result.current?.isFetching).toBeFalsy();
+      });
 
       const { accessToken, blockAccess } = result.current;
 
@@ -90,7 +93,7 @@ describe('useExamAccess hook', () => {
       expect(mockFetchExamAccessToken).toHaveBeenCalled();
     });
     it('in progress', async () => {
-      const { result, waitForNextUpdate } = renderHook(() => useExamAccess({ id }));
+      const { result } = renderHook(() => useExamAccess({ id }));
 
       let { accessToken, blockAccess } = result.current;
 
@@ -104,7 +107,10 @@ describe('useExamAccess hook', () => {
       // wait for call to setBlockAccess in the finally clause of useEffect hook.
       await act(async () => {
         jest.runAllTimers();
-        await waitForNextUpdate();
+        await waitFor(() => {
+          expect(result.current).toBeTruthy();
+          expect(result.current?.isFetching).toBeFalsy();
+        });
       });
 
       ({ accessToken, blockAccess } = result.current);
@@ -119,17 +125,22 @@ describe('useExamAccess hook', () => {
       const testError = 'test-error';
       mockFetchExamAccessToken.mockImplementationOnce(() => Promise.reject(testError));
 
-      const { result, waitForNextUpdate } = renderHook(() => useExamAccess({ id }));
+      const { result } = renderHook(() => useExamAccess({ id }));
 
       // We wait for the promise to resolve and for updates to state to complete so that blockAccess is updated.
-      await waitForNextUpdate();
+      await waitFor(() => {
+        expect(result.current).toBeTruthy();
+        expect(result.current?.isFetching).toBeFalsy();
+      });
 
       const { accessToken, blockAccess } = result.current;
 
       expect(accessToken).toEqual(testAccessToken.curr);
       expect(blockAccess).toBe(false);
       expect(mockFetchExamAccessToken).toHaveBeenCalled();
-      expect(logError).toHaveBeenCalledWith(testError);
+      await waitFor(() => {
+        expect(logError).toHaveBeenCalledWith(testError);
+      });
     });
   });
 });