feat: Base page for Migrate Legacy Libraries

Adds the Unlink feature to the Course Outline for Sections, Subsections and Units.

.env

@@ -41,7 +41,10 @@ HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=false
 INVITE_STUDENTS_EMAIL_TO=''
-ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=''
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
-LIBRARY_SUPPORTED_BLOCKS="problem,video,html"
+# "Multi-level" blocks are unsupported in libraries
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+# Fallback in local style files
+PARAGON_THEME_URLS={}
+COURSE_TEAM_SUPPORT_EMAIL=''

.env.development

@@ -44,7 +44,10 @@ HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=true
 INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
-ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
-LIBRARY_SUPPORTED_BLOCKS="problem,video,html"
+# "Multi-level" blocks are unsupported in libraries
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+# Fallback in local style files
+PARAGON_THEME_URLS={}
+COURSE_TEAM_SUPPORT_EMAIL=''

.env.test

@@ -39,4 +39,7 @@ INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
 ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
-LIBRARY_SUPPORTED_BLOCKS="problem,video,html"
+# "Multi-level" blocks are unsupported in libraries
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+PARAGON_THEME_URLS=
+COURSE_TEAM_SUPPORT_EMAIL='support@example.com'

.github/pull_request_template.md

@@ -2,26 +2,37 @@
 
 Describe what this pull request changes, and why. Include implications for people using this change.
 Design decisions and their rationales should be documented in the repo (docstring / ADR), per
+[OEP-19](https://open-edx-proposals.readthedocs.io/en/latest/oep-0019-bp-developer-documentation.html), and can be linked here.
 
 Useful information to include:
-- Which edX user roles will this change impact? Common user roles are "Learner", "Course Author",
+- Which user roles will this change impact? Common user roles are "Learner", "Course Author",
 "Developer", and "Operator".
 - Include screenshots for changes to the UI (ideally, both "before" and "after" screenshots, if applicable).
-- Provide links to the description of corresponding configuration changes. Remember to correctly annotate these
-changes.
 
 ## Supporting information
 
-Link to other information about the change, such as Jira issues, GitHub issues, or Discourse discussions.
+Link to other information about the change, such as GitHub issues, or Discourse discussions.
 Be sure to check they are publicly readable, or if not, repeat the information here.
 
 ## Testing instructions
 
-Please provide detailed step-by-step instructions for testing this change.
-
+Please provide detailed step-by-step instructions for manually testing this change.
 
 ## Other information
 
 Include anything else that will help reviewers and consumers understand the change.
 - Does this change depend on other changes elsewhere?
-- Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.
+- Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.
+
+## Best Practices Checklist
+
+We're trying to move away from some deprecated patterns in this codebase. Please
+check if your PR meets these recommendations before asking for a review:
+
+- [ ] Any _new_ files are using TypeScript (`.ts`, `.tsx`).
+- [ ] Deprecated `propTypes`, `defaultProps`, and `injectIntl` patterns are not used in any new or modified code.
+- [ ] Tests should use the helpers in `src/testUtils.tsx` (specifically `initializeMocks`)
+- [ ] Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
+- [ ] Use React Query to load data from REST APIs. See any `apiHooks.ts` in this repo for examples.
+- [ ] All new i18n messages in `messages.ts` files have a `description` for translators to use.
+- [ ] Imports avoid using `../`. To import from parent folders, use `@src`, e.g. `import { initializeMocks } from '@src/testUtils';` instead of `from '../../../../testUtils'`

.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 }}

.github/workflows/validate.yml

@@ -9,36 +9,29 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [18, 20]
 
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
     - run: make validate.ci
     - name: Archive code coverage results
       uses: actions/upload-artifact@v4
       with:
-        name: code-coverage-report-${{ matrix.node }}
-        # When we're only using Node 20, replace the line above with the following:
-        # name: code-coverage-report
+        name: code-coverage-report
         path: coverage/*.*
   coverage:
     runs-on: ubuntu-latest
     needs: tests
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Download code coverage results
-      uses: actions/download-artifact@v4
+      uses: actions/download-artifact@v5
       with:
-        name: code-coverage-report-20
-        # When we're only using Node 20, replace the line above with the following:
-        # name: code-coverage-report
+        name: code-coverage-report
     - name: Upload coverage
-      uses: codecov/codecov-action@v4
+      uses: codecov/codecov-action@v5
       with:
         fail_ci_if_error: true
         token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .eslintcache
 .idea
+.run
 node_modules
 npm-debug.log
 coverage

CODEOWNERS

@@ -1,2 +0,0 @@
-# The following users are the maintainers of all frontend-app-authoring files
-*       @openedx/2u-tnl

README.rst

@@ -38,7 +38,7 @@ Cloning and Setup
 
     git clone https://github.com/openedx/frontend-app-authoring.git
 
-2. Use node v20.x.
+2. Use the version of Node specified in the ``.nvmrc`` file.
 
   The current version of the micro-frontend build scripts supports node 20.
   Using other major versions of node *may* work, but this is unsupported.  For
@@ -85,8 +85,8 @@ Troubleshooting
 ---------------
 
 * If you see an "Invalid Host header" error, then you're probably using a different domain name for your devstack such as
-``local.edly.io`` or ``local.overhang.io`` (not the new recommended default, ``local.openedx.io``). In that case, run
-these commands to update your devstack's domain names:
+  ``local.edly.io`` or ``local.overhang.io`` (not the new recommended default, ``local.openedx.io``). In that case, run
+  these commands to update your devstack's domain names:
 
 .. code-block:: bash
 
@@ -98,7 +98,7 @@ these commands to update your devstack's domain names:
 * If tutor-mfe is not starting the authoring MFE in development mode (eg. `tutor dev start authoring` fails), it may be due to
   using a tutor version that expects the MFE name to be frontend-app-course-authoring (the previous name of this repo). To fix
   this, you can rename the cloned repo directory to frontend-app-course-authoring. More information can be found in 
-  [this forum post](https://discuss.openedx.org/t/repo-rename-frontend-app-course-authoring-frontend-app-authoring/13930/2)
+  `this forum post <https://discuss.openedx.org/t/repo-rename-frontend-app-course-authoring-frontend-app-authoring/13930/2>`__.
 
 
 Features
@@ -165,21 +165,7 @@ Feature: New React XBlock Editors
 
 .. image:: ./docs/readme-images/feature-problem-editor.png
 
-This allows an operator to enable the use of new React editors for the HTML, Video, and Problem XBlocks, all of which are provided here.
-
-Requirements
-------------
-
-* ``edx-platform`` Waffle flags:
-
-  * ``new_core_editors.use_new_text_editor``: must be enabled for the new HTML Xblock editor to be used in Studio
-  * ``new_core_editors.use_new_video_editor``: must be enabled for the new Video Xblock editor to be used in Studio
-  * ``new_core_editors.use_new_problem_editor``: must be enabled for the new Problem Xblock editor to be used in Studio
-
-Feature Description
--------------------
-
-When a corresponding waffle flag is set, upon editing a block in Studio, the view is rendered by this MFE instead of by the XBlock's authoring view.  The user remains in Studio.
+New React editors for the HTML, Video, and Problem XBlocks are provided here and are rendered by this MFE instead of by the XBlock's authoring view.
 
 Feature: New Proctoring Exams View
 ==================================
@@ -193,10 +179,6 @@ Requirements
 
   * ``ZENDESK_*``: necessary if automatic ZenDesk ticket creation is desired
 
-* ``edx-platform`` Feature flags:
-
-  * ``ENABLE_EXAM_SETTINGS_HTML_VIEW``: this feature flag must be enabled for the link to the settings view to be shown
-
 * `edx-exams <https://github.com/edx/edx-exams>`_: for this feature to work, the ``edx-exams`` IDA must be deployed and its API accessible by the browser
 
 Configuration
@@ -221,16 +203,6 @@ Feature: Advanced Settings
 
 .. image:: ./docs/readme-images/feature-advanced-settings.png
 
-Requirements
-------------
-
-* ``edx-platform`` Waffle flags:
-
-  * ``contentstore.new_studio_mfe.use_new_advanced_settings_page``: this feature flag must be enabled for the link to the settings view to be shown. It can be enabled on a per-course basis.
-
-Feature Description
--------------------
-
 In Studio, the "Advanced Settings" page for each enabled course will now be served by this frontend, instead of the UI built into edx-platform. The advanced settings page holds many different settings for the course, such as what features or XBlocks are enabled.
 
 Feature: Files & Uploads
@@ -238,16 +210,6 @@ Feature: Files & Uploads
 
 .. image:: ./docs/readme-images/feature-files-uploads.png
 
-Requirements
-------------
-
-* ``edx-platform`` Waffle flags:
-
-  * ``contentstore.new_studio_mfe.use_new_files_uploads_page``: this feature flag must be enabled for the link to the Files & Uploads page to go to the MFE. It can be enabled on a per-course basis.
-
-Feature Description
--------------------
-
 In Studio, the "Files & Uploads" page for each enabled course will now be served by this frontend, instead of the UI built into edx-platform. This page allows managing static asset files like PDFs, images, etc. used for the course.
 
 Feature: Course Updates
@@ -255,26 +217,11 @@ Feature: Course Updates
 
 .. image:: ./docs/readme-images/feature-course-updates.png
 
-Requirements
-------------
-
-* ``edx-platform`` Waffle flags:
-
-  * ``contentstore.new_studio_mfe.use_new_updates_page``: this feature flag must be enabled.
-
 Feature: Import/Export Pages
 ============================
 
 .. image:: ./docs/readme-images/feature-export.png
 
-Requirements
-------------
-
-* ``edx-platform`` Waffle flags:
-
-  * ``contentstore.new_studio_mfe.use_new_export_page``: this feature flag will change the CMS to link to the new export page.
-  * ``contentstore.new_studio_mfe.use_new_import_page``: this feature flag will change the CMS to link to the new import page.
-
 Feature: Tagging/Taxonomy Pages
 ================================
 
@@ -315,7 +262,7 @@ In additional to the standard settings, the following local configurations can b
 Developing
 **********
 
-`Devstack <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/installation/index.html>`_.  If you start Devstack with ``make dev.up.studio`` that should give you everything you need as a companion to this frontend.
+`Tutor <https://docs.tutor.edly.io/>`_ is the community-supported Open edX development environment. See the `tutor-mfe plugin README <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`_ for more information.
 
 
 If your devstack includes the default Demo course, you can visit the following URLs to see content:
@@ -380,6 +327,20 @@ For more information about these options, see the `Getting Help`_ page.
 .. _Getting Help: https://openedx.org/community/connect
 
 
+Legacy Studio
+*************
+
+If you would like to use legacy studio for certain features, you can set the following waffle flags in ``edx-platform``:
+  * ``legacy_studio.text_editor``: loads the legacy HTML Xblock editor when editing a text block
+  * ``legacy_studio.video_editor``: loads the legacy Video editor when editing a video block
+  * ``legacy_studio.problem_editor``: loads the legacy Problem editor when editing a problem block
+  * ``legacy_studio.advanced_settings``: Advanced Settings page
+  * ``legacy_studio.updates``: Updates page
+  * ``legacy_studio.export``: Export page
+  * ``legacy_studio.import``: Import page
+  * ``legacy_studio.files_uploads``: Files page
+  * ``legacy_studio.exam_settings``: loads the legacy Exam Settings
+
 License
 *******
 

catalog-info.yaml

@@ -12,7 +12,8 @@ metadata:
       icon: "Web"
   annotations:
     openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
 spec:
-  owner: group:2u-tnl
+  owner: user:bradenmacdonald
   type: 'website'
   lifecycle: 'production'

codecov.yml

@@ -10,4 +10,5 @@ coverage:
         threshold: 0%
 ignore:
   - "src/grading-settings/grading-scale/react-ranger.js"
+  - "src/generic/DraggableList/verticalSortableList.ts"
   - "src/index.js"

jest.config.js

@@ -11,9 +11,11 @@ module.exports = createConfig('jest', {
   ],
   moduleNameMapper: {
     '^lodash-es$': 'lodash',
+    // This alias is for any code in the src directory that wants to avoid '../../' style relative imports:
+    '^@src/(.*)$': '<rootDir>/src/$1',
+    // This alias is used for plugins in the plugins/ folder only.
     '^CourseAuthoring/(.*)$': '<rootDir>/src/$1',
   },
   modulePathIgnorePatterns: [
-    '/src/pages-and-resources/utils.test.jsx',
   ],
 });

openedx.yaml

@@ -1,11 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
-
-nick: cath
-oeps: {}
-owner: edx/platform-core-tnl
-openedx-release:
-  # The openedx-release key is described in OEP-10:
-  #   https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
-  # The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
-  ref: master

package.json

@@ -11,11 +11,10 @@
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "fedx-scripts formatjs extract --include=plugins",
     "stylelint": "stylelint \"plugins/**/*.scss\" \"src/**/*.scss\" \"scss/**/*.scss\" --config .stylelintrc.json",
     "lint": "npm run stylelint && fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "lint:fix": "npm run stylelint -- --fix && fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
-    "snapshot": "TZ=UTC fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "start:with-theme": "paragon install-theme && npm start && npm install",
     "dev": "PUBLIC_PATH=/authoring/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
@@ -23,11 +22,6 @@
     "test:ci": "TZ=UTC fedx-scripts jest --silent --coverage --passWithNoTests",
     "types": "tsc --noEmit"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "author": "edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-authoring#readme",
@@ -39,6 +33,7 @@
   },
   "dependencies": {
     "@codemirror/lang-html": "^6.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/lang-xml": "^6.0.0",
     "@codemirror/lint": "^6.2.1",
     "@codemirror/state": "^6.0.0",
@@ -48,12 +43,12 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
-    "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-component-footer": "^14.1.0",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-platform": "^8.0.3",
-    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/browserslist-config": "1.5.0",
+    "@edx/frontend-component-footer": "^14.9.0",
+    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-enterprise-hotjar": "^7.2.0",
+    "@edx/frontend-platform": "^8.4.0",
+    "@edx/openedx-atlas": "^0.7.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
     "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
     "@openedx-plugins/course-app-learning_assistant": "file:plugins/course-apps/learning_assistant",
@@ -64,12 +59,12 @@
     "@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
     "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
-    "@openedx/frontend-build": "^14.0.14",
-    "@openedx/frontend-plugin-framework": "^1.2.1",
-    "@openedx/paragon": "^22.8.1",
+    "@openedx/frontend-build": "^14.5.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.5.0",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
-    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query": "4.40.1",
     "@tinymce/tinymce-react": "^3.14.0",
     "classnames": "2.5.1",
     "codemirror": "^6.0.0",
@@ -83,48 +78,45 @@
     "meilisearch": "^0.41.0",
     "moment": "2.30.1",
     "moment-shortformat": "^2.1.0",
-    "npm": "^10.8.1",
     "prop-types": "^15.8.1",
-    "react": "17.0.2",
+    "react": "^18.3.1",
     "react-datepicker": "^4.13.0",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",
     "react-onclickoutside": "^6.13.0",
     "react-redux": "7.2.9",
     "react-responsive": "9.0.2",
-    "react-router": "6.23.1",
-    "react-router-dom": "6.23.1",
-    "react-select": "5.8.0",
+    "react-router": "6.30.1",
+    "react-router-dom": "6.30.1",
+    "react-select": "5.10.2",
     "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "4.4.5",
-    "redux": "4.0.5",
+    "redux": "4.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.5",
-    "start": "^5.1.0",
     "tinymce": "^5.10.4",
     "universal-cookie": "^4.0.4",
-    "uuid": "^3.4.0",
+    "uuid": "^11.1.0",
     "xmlchecker": "^0.1.0",
-    "yup": "0.31.1"
+    "yup": "0.32.11"
   },
   "devDependencies": {
-    "@edx/react-unit-test-utils": "3.0.0",
     "@edx/stylelint-config-edx": "2.3.3",
     "@edx/typescript-config": "^1.0.1",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/lodash": "^4.17.7",
-    "axios-mock-adapter": "1.22.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/lodash": "^4.17.17",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "axios-mock-adapter": "2.1.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "fetch-mock-jest": "^1.5.1",
-    "husky": "7.0.4",
     "jest-canvas-mock": "^2.5.2",
     "jest-expect-message": "^1.1.3",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "^18.3.1",
     "redux-mock-store": "^1.5.4"
   }
 }

plugins/course-apps/learning_assistant/Settings.test.jsx

@@ -2,16 +2,12 @@ import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 
 import { RequestStatus } from 'CourseAuthoring/data/constants';
-import { render } from 'CourseAuthoring/pages-and-resources/utils.test';
+import { initializeMocks, render } from 'CourseAuthoring/testUtils';
 import LearningAssistantSettings from './Settings';
 
 const onClose = () => { };
 
 describe('Learning Assistant Settings', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('renders', async () => {
     const initialState = {
       models: {
@@ -38,14 +34,8 @@ describe('Learning Assistant Settings', () => {
       },
     };
 
-    render(
-      <LearningAssistantSettings
-        onClose={onClose}
-      />,
-      {
-        preloadedState: initialState,
-      },
-    );
+    initializeMocks({ initialState });
+    render(<LearningAssistantSettings onClose={onClose} />);
 
     const toggleDescription = 'Reinforce learning concepts by sharing text-based course content '
     + 'with OpenAI (via API) to power an in-course Learning Assistant. Learners can leave feedback about the quality '

plugins/course-apps/live/BBBSettings.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Form, Hyperlink } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import AppConfigFormDivider from 'CourseAuthoring/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider';
@@ -11,10 +11,10 @@ import LiveCommonFields from './LiveCommonFields';
 import messages from './messages';
 
 const BbbSettings = ({
-  intl,
   values,
   setFieldValue,
 }) => {
+  const intl = useIntl();
   const [bbbPlan, setBbbPlan] = useState(values.tierType);
 
   useEffect(() => {
@@ -107,12 +107,10 @@ const BbbSettings = ({
         )}
       </>
     </>
-
   );
 };
 
 BbbSettings.propTypes = {
-  intl: intlShape.isRequired,
   values: PropTypes.shape({
     consumerKey: PropTypes.string,
     consumerSecret: PropTypes.string,
@@ -127,4 +125,4 @@ BbbSettings.propTypes = {
   setFieldValue: PropTypes.func.isRequired,
 };
 
-export default injectIntl(BbbSettings);
+export default BbbSettings;

plugins/course-apps/live/BbbSettings.test.jsx

@@ -124,12 +124,13 @@ describe('BBB Settings', () => {
   );
 
   test('free plans message is visible when free plan is selected', async () => {
+    const user = userEvent.setup();
     await mockStore({ emailSharing: true, isFreeTier: true });
     renderComponent();
     const spinner = getByRole(container, 'status');
     await waitForElementToBeRemoved(spinner);
     const dropDown = container.querySelector('select[name="tierType"]');
-    userEvent.selectOptions(
+    await user.selectOptions(
       dropDown,
       getByRole(dropDown, 'option', { name: 'Free' }),
     );

plugins/course-apps/live/LiveCommonFields.jsx

@@ -1,42 +1,43 @@
 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 FormikControl from 'CourseAuthoring/generic/FormikControl';
 
 import messages from './messages';
 
 const LiveCommonFields = ({
-  intl,
   values,
-}) => (
-  <>
-    <p className="pb-2">{intl.formatMessage(messages.formInstructions)}</p>
-    <FormikControl
-      name="consumerKey"
-      value={values.consumerKey}
-      floatingLabel={intl.formatMessage(messages.consumerKey)}
-      className="pb-1"
-      type="input"
-    />
-    <FormikControl
-      name="consumerSecret"
-      value={values.consumerSecret}
-      floatingLabel={intl.formatMessage(messages.consumerSecret)}
-      className="pb-1"
-      type="password"
-    />
-    <FormikControl
-      name="launchUrl"
-      value={values.launchUrl}
-      floatingLabel={intl.formatMessage(messages.launchUrl)}
-      className="pb-1"
-      type="input"
-    />
-  </>
-);
+}) => {
+  const intl = useIntl();
+  return (
+    <>
+      <p className="pb-2">{intl.formatMessage(messages.formInstructions)}</p>
+      <FormikControl
+        name="consumerKey"
+        value={values.consumerKey}
+        floatingLabel={intl.formatMessage(messages.consumerKey)}
+        className="pb-1"
+        type="input"
+      />
+      <FormikControl
+        name="consumerSecret"
+        value={values.consumerSecret}
+        floatingLabel={intl.formatMessage(messages.consumerSecret)}
+        className="pb-1"
+        type="password"
+      />
+      <FormikControl
+        name="launchUrl"
+        value={values.launchUrl}
+        floatingLabel={intl.formatMessage(messages.launchUrl)}
+        className="pb-1"
+        type="input"
+      />
+    </>
+  );
+};
 
 LiveCommonFields.propTypes = {
-  intl: intlShape.isRequired,
   values: PropTypes.shape({
     consumerKey: PropTypes.string,
     consumerSecret: PropTypes.string,
@@ -45,4 +46,4 @@ LiveCommonFields.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(LiveCommonFields);
+export default LiveCommonFields;

plugins/course-apps/live/Settings.jsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { camelCase } from 'lodash';
 import { Icon } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import * as Yup from 'yup';
 import { useNavigate } from 'react-router-dom';
@@ -20,9 +20,9 @@ import ZoomSettings from './ZoomSettings';
 import BBBSettings from './BBBSettings';
 
 const LiveSettings = ({
-  intl,
   onClose,
 }) => {
+  const intl = useIntl();
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const courseId = useSelector(state => state.courseDetail.courseId);
@@ -130,8 +130,7 @@ const LiveSettings = ({
 };
 
 LiveSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(LiveSettings);
+export default LiveSettings;

plugins/course-apps/live/ZoomSettings.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 FormikControl from 'CourseAuthoring/generic/FormikControl';
 
@@ -8,37 +8,38 @@ import { providerNames } from './constants';
 import LiveCommonFields from './LiveCommonFields';
 
 const ZoomSettings = ({
-  intl,
   values,
-}) => (
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  <>
-    {!values.piiSharingEnable ? (
-      <p data-testid="request-pii-sharing">
-        {intl.formatMessage(messages.requestPiiSharingEnable, { provider: providerNames[values.provider] })}
-      </p>
-    ) : (
-      <>
-        {(values.piiSharingEmail || values.piiSharingUsername)
-          && (
-            <p data-testid="helper-text">
-              {intl.formatMessage(messages.providerHelperText, { providerName: providerNames[values.provider] })}
-            </p>
-          )}
-        <LiveCommonFields values={values} />
-        <FormikControl
-          name="launchEmail"
-          value={values.launchEmail}
-          floatingLabel={intl.formatMessage(messages.launchEmail)}
-          type="input"
-        />
-      </>
-    )}
-  </>
-);
+}) => {
+  const intl = useIntl();
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {!values.piiSharingEnable ? (
+        <p data-testid="request-pii-sharing">
+          {intl.formatMessage(messages.requestPiiSharingEnable, { provider: providerNames[values.provider] })}
+        </p>
+      ) : (
+        <>
+          {(values.piiSharingEmail || values.piiSharingUsername)
+            && (
+              <p data-testid="helper-text">
+                {intl.formatMessage(messages.providerHelperText, { providerName: providerNames[values.provider] })}
+              </p>
+            )}
+          <LiveCommonFields values={values} />
+          <FormikControl
+            name="launchEmail"
+            value={values.launchEmail}
+            floatingLabel={intl.formatMessage(messages.launchEmail)}
+            type="input"
+          />
+        </>
+      )}
+    </>
+  );
+};
 
 ZoomSettings.propTypes = {
-  intl: intlShape.isRequired,
   values: PropTypes.shape({
     consumerKey: PropTypes.string,
     consumerSecret: PropTypes.string,
@@ -51,4 +52,4 @@ ZoomSettings.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(ZoomSettings);
+export default ZoomSettings;

plugins/course-apps/live/data/api.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { bbbPlanTypes } from '../constants';

plugins/course-apps/ora_settings/Settings.test.jsx

@@ -142,7 +142,7 @@ describe('ORASettings', () => {
     renderComponent();
     await mockStore({ apiStatus: 200, enabled: false });
 
-    const label = screen.getByText(messages.enableFlexPeerGradeLabel.defaultMessage);
+    const label = await screen.findByText(messages.enableFlexPeerGradeLabel.defaultMessage);
     const enableBadge = screen.queryByTestId('enable-badge');
 
     expect(label).toBeVisible();

plugins/course-apps/proctoring/Settings.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
   ActionRow, Alert, Badge, Form, Hyperlink, ModalDialog, StatefulButton,
 } from '@openedx/paragon';
@@ -25,7 +25,8 @@ import { PagesAndResourcesContext } from 'CourseAuthoring/pages-and-resources/Pa
 
 import messages from './messages';
 
-const ProctoringSettings = ({ intl, onClose }) => {
+const ProctoringSettings = ({ onClose }) => {
+  const intl = useIntl();
   const initialFormValues = {
     enableProctoredExams: false,
     proctoringProvider: false,
@@ -652,10 +653,9 @@ const ProctoringSettings = ({ intl, onClose }) => {
 };
 
 ProctoringSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
 ProctoringSettings.defaultProps = {};
 
-export default injectIntl(ProctoringSettings);
+export default ProctoringSettings;

plugins/course-apps/proctoring/Settings.test.jsx

@@ -544,12 +544,9 @@ describe('ProctoredExamSettings', () => {
 
   describe('Connection states', () => {
     it('Shows the spinner before the connection is complete', async () => {
-      await act(async () => {
-        render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />));
-        // This expectation is _inside_ the `act` intentionally, so that it executes immediately.
-        const spinner = screen.getByRole('status');
-        expect(spinner.textContent).toEqual('Loading...');
-      });
+      render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />));
+      const spinner = await screen.findByRole('status');
+      expect(spinner.textContent).toEqual('Loading...');
     });
 
     it('Show connection error message when we suffer studio server side error', async () => {

plugins/course-apps/progress/Settings.jsx

@@ -1,4 +1,4 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import React from 'react';
 import * as Yup from 'yup';
@@ -8,7 +8,8 @@ import { useAppSetting } from 'CourseAuthoring/utils';
 import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
 import messages from './messages';
 
-const ProgressSettings = ({ intl, onClose }) => {
+const ProgressSettings = ({ onClose }) => {
+  const intl = useIntl();
   const [disableProgressGraph, saveSetting] = useAppSetting('disableProgressGraph');
   const showProgressGraphSetting = getConfig().ENABLE_PROGRESS_GRAPH_SETTINGS.toString().toLowerCase() === 'true';
 
@@ -48,8 +49,7 @@ const ProgressSettings = ({ intl, onClose }) => {
 };
 
 ProgressSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(ProgressSettings);
+export default ProgressSettings;

plugins/course-apps/teams/GroupEditor.jsx

@@ -1,4 +1,4 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Form, TransitionReplace } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
@@ -30,8 +30,9 @@ const TeamTypeNameMessage = {
 };
 
 const GroupEditor = ({
-  intl, group, onDelete, onChange, onBlur, fieldNameCommonBase, errors,
+  group, onDelete, onChange, onBlur, fieldNameCommonBase, errors,
 }) => {
+  const intl = useIntl();
   const [isDeleting, setDeleting] = useState(false);
   const [isOpen, setOpen] = useState(group.id === null);
   const initiateDeletion = () => setDeleting(true);
@@ -149,7 +150,6 @@ export const groupShape = PropTypes.shape({
 });
 
 GroupEditor.propTypes = {
-  intl: intlShape.isRequired,
   fieldNameCommonBase: PropTypes.string.isRequired,
   errors: PropTypes.shape({
     name: PropTypes.string,
@@ -170,4 +170,4 @@ GroupEditor.defaultProps = {
   },
 };
 
-export default injectIntl(GroupEditor);
+export default GroupEditor;

plugins/course-apps/teams/Settings.jsx

@@ -1,4 +1,4 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Form } from '@openedx/paragon';
 import { Add } from '@openedx/paragon/icons';
 
@@ -17,15 +17,16 @@ import messages from './messages';
 setupYupExtensions();
 
 const TeamSettings = ({
-  intl,
   onClose,
 }) => {
+  const intl = useIntl();
   const [teamsConfiguration, saveSettings] = useAppSetting('teamsConfiguration');
   const blankNewGroup = {
     name: '',
     description: '',
     type: GroupTypes.OPEN,
     maxTeamSize: null,
+    userPartitionId: null,
     id: null,
     key: uuid(),
   };
@@ -38,6 +39,7 @@ const TeamSettings = ({
       type: group.type,
       description: group.description,
       max_team_size: group.maxTeamSize,
+      user_partition_id: group.userPartitionId,
     }));
     return saveSettings({
       team_sets: groups,
@@ -164,8 +166,7 @@ const TeamSettings = ({
 };
 
 TeamSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(TeamSettings);
+export default TeamSettings;

plugins/course-apps/teams/utils.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { getConfig } from '@edx/frontend-platform';
 
 import { GroupTypes } from 'CourseAuthoring/data/constants';

plugins/course-apps/wiki/Settings.jsx

@@ -1,4 +1,4 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import React from 'react';
 import * as Yup from 'yup';
@@ -8,7 +8,8 @@ import { useAppSetting } from 'CourseAuthoring/utils';
 import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
 import messages from './messages';
 
-const WikiSettings = ({ intl, onClose }) => {
+const WikiSettings = ({ onClose }) => {
+  const intl = useIntl();
   const [enablePublicWiki, saveSetting] = useAppSetting('allowPublicWikiAccess');
   const handleSettingsSave = (values) => saveSetting(values.enablePublicWiki);
 
@@ -32,7 +33,7 @@ const WikiSettings = ({ intl, onClose }) => {
             label={intl.formatMessage(messages.enablePublicWikiLabel)}
             helpText={intl.formatMessage(messages.enablePublicWikiHelp)}
             onChange={handleChange}
-            onBlue={handleBlur}
+            onBlur={handleBlur}
             checked={values.enablePublicWiki}
           />
         )
@@ -42,8 +43,7 @@ const WikiSettings = ({ intl, onClose }) => {
 };
 
 WikiSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(WikiSettings);
+export default WikiSettings;

plugins/course-apps/xpert_unit_summary/Settings.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { PagesAndResourcesContext } from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
 import { useNavigate } from 'react-router-dom';
 
@@ -10,7 +9,8 @@ import messages from './messages';
 
 import { fetchXpertSettings } from './data/thunks';
 
-const XpertUnitSummarySettings = ({ intl }) => {
+const XpertUnitSummarySettings = () => {
+  const intl = useIntl();
   const { path: pagesAndResourcesPath, courseId } = useContext(PagesAndResourcesContext);
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -38,8 +38,4 @@ const XpertUnitSummarySettings = ({ intl }) => {
   );
 };
 
-XpertUnitSummarySettings.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(XpertUnitSummarySettings);
+export default XpertUnitSummarySettings;

plugins/course-apps/xpert_unit_summary/Settings.test.jsx

@@ -7,7 +7,7 @@ import {
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
 import {
-  queryByTestId, render, waitFor, getByText, fireEvent,
+  findByTestId, queryByTestId, render, waitFor, getByText, fireEvent,
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
@@ -106,8 +106,9 @@ describe('XpertUnitSummarySettings', () => {
     });
 
     test('Shows switch on if enabled from backend', async () => {
+      const enableBadge = await findByTestId(container, 'enable-badge');
       expect(container.querySelector('#enable-xpert-unit-summary-toggle').checked).toBeTruthy();
-      expect(queryByTestId(container, 'enable-badge')).toBeTruthy();
+      expect(enableBadge).toBeTruthy();
     });
 
     test('Shows switch on if disabled from backend', async () => {

plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.jsx

@@ -1,4 +1,4 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Alert,
@@ -70,38 +70,40 @@ AppSettingsForm.defaultProps = {
 };
 
 const SettingsModalBase = ({
-  intl, title, onClose, variant, isMobile, children, footer,
-}) => (
-  <ModalDialog
-    title={title}
-    isOpen
-    onClose={onClose}
-    size="lg"
-    variant={variant}
-    hasCloseButton={isMobile}
-    isFullscreenOnMobile
-  >
-    <ModalDialog.Header>
-      <ModalDialog.Title data-testid="modal-title">
-        {title}
-      </ModalDialog.Title>
-    </ModalDialog.Header>
-    <ModalDialog.Body>
-      {children}
-    </ModalDialog.Body>
-    <ModalDialog.Footer className="p-4">
-      <ActionRow>
-        <ModalDialog.CloseButton variant="tertiary">
-          {intl.formatMessage(messages.cancel)}
-        </ModalDialog.CloseButton>
-        {footer}
-      </ActionRow>
-    </ModalDialog.Footer>
-  </ModalDialog>
-);
+  title, onClose, variant, isMobile, children, footer,
+}) => {
+  const intl = useIntl();
+  return (
+    <ModalDialog
+      title={title}
+      isOpen
+      onClose={onClose}
+      size="lg"
+      variant={variant}
+      hasCloseButton={isMobile}
+      isFullscreenOnMobile
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title data-testid="modal-title">
+          {title}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        {children}
+      </ModalDialog.Body>
+      <ModalDialog.Footer className="p-4">
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            {intl.formatMessage(messages.cancel)}
+          </ModalDialog.CloseButton>
+          {footer}
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
 
 SettingsModalBase.propTypes = {
-  intl: intlShape.isRequired,
   title: PropTypes.string.isRequired,
   onClose: PropTypes.func.isRequired,
   variant: PropTypes.oneOf(['default', 'dark']).isRequired,
@@ -115,11 +117,11 @@ SettingsModalBase.defaultProps = {
 };
 
 const ResetUnitsButton = ({
-  intl,
   courseId,
   checked,
   visible,
 }) => {
+  const intl = useIntl();
   const resetStatusRequestStatus = useSelector(getResetStatus);
   const dispatch = useDispatch();
 
@@ -185,7 +187,6 @@ const ResetUnitsButton = ({
 };
 
 ResetUnitsButton.propTypes = {
-  intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
   checked: PropTypes.oneOf(['true', 'false']).isRequired,
   visible: PropTypes.bool,
@@ -196,7 +197,6 @@ ResetUnitsButton.defaultProps = {
 };
 
 const SettingsModal = ({
-  intl,
   appId,
   title,
   children,
@@ -213,6 +213,7 @@ const SettingsModal = ({
   allUnitsEnabledText,
   noUnitsEnabledText,
 }) => {
+  const intl = useIntl();
   const { courseId } = useContext(PagesAndResourcesContext);
   const loadingStatus = useSelector(getLoadingStatus);
   const updateSettingsRequestStatus = useSelector(getSavingStatus);
@@ -372,7 +373,6 @@ const SettingsModal = ({
                   >
                     {allUnitsEnabledText}
                     <ResetUnitsButton
-                      intl={intl}
                       courseId={courseId}
                       checked={formikProps.values.checked}
                       visible={formikProps.values.checked === 'true'}
@@ -385,7 +385,6 @@ const SettingsModal = ({
                   >
                     {noUnitsEnabledText}
                     <ResetUnitsButton
-                      intl={intl}
                       courseId={courseId}
                       checked={formikProps.values.checked}
                       visible={formikProps.values.checked === 'false'}
@@ -423,7 +422,6 @@ const SettingsModal = ({
 };
 
 SettingsModal.propTypes = {
-  intl: intlShape.isRequired,
   title: PropTypes.string.isRequired,
   appId: PropTypes.string.isRequired,
   children: PropTypes.func,
@@ -450,4 +448,4 @@ SettingsModal.defaultProps = {
   enableReinitialize: false,
 };
 
-export default injectIntl(SettingsModal);
+export default SettingsModal;

plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.scss

@@ -1,5 +1,4 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/utilities-only";
+@import "~@openedx/paragon/styles/scss/core/utilities-only";
 
 .summary-radio {
   display: flex;

src/CourseAuthoringPage.jsx

@@ -5,13 +5,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import {
   useLocation,
 } from 'react-router-dom';
-import { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } from '@edx/frontend-component-footer';
 import Header from './header';
 import { fetchCourseDetail } from './data/thunks';
 import { useModel } from './generic/model-store';
 import NotFoundAlert from './generic/NotFoundAlert';
 import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
-import { fetchStudioHomeData } from './studio-home/data/thunks';
+import { fetchOnlyStudioHomeData } from './studio-home/data/thunks';
 import { getCourseAppsApiStatus } from './pages-and-resources/data/selectors';
 import { RequestStatus } from './data/constants';
 import Loading from './generic/Loading';
@@ -24,7 +24,7 @@ const CourseAuthoringPage = ({ courseId, children }) => {
   }, [courseId]);
 
   useEffect(() => {
-    dispatch(fetchStudioHomeData());
+    dispatch(fetchOnlyStudioHomeData());
   }, []);
 
   const courseDetail = useModel('courseDetails', courseId);
@@ -65,7 +65,7 @@ const CourseAuthoringPage = ({ courseId, children }) => {
         )
         )}
       {children}
-      {!inProgress && !isEditor && <StudioFooter />}
+      {!inProgress && !isEditor && <StudioFooterSlot />}
     </div>
   );
 };

src/CourseAuthoringPage.test.jsx

@@ -1,18 +1,12 @@
-import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
 
-import { render } from '@testing-library/react';
-
-import { getConfig, initializeMockApp } from '@edx/frontend-platform';
-import MockAdapter from 'axios-mock-adapter';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import initializeStore from './store';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import PagesAndResources from './pages-and-resources/PagesAndResources';
 import { executeThunk } from './utils';
 import { fetchCourseApps } from './pages-and-resources/data/thunks';
 import { fetchCourseDetail } from './data/thunks';
+import { getApiWaffleFlagsUrl } from './data/api';
+import { initializeMocks, render } from './testUtils';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
 let mockPathname = '/evilguy/';
@@ -25,17 +19,13 @@ jest.mock('react-router-dom', () => ({
 let axiosMock;
 let store;
 
-beforeEach(() => {
-  initializeMockApp({
-    authenticatedUser: {
-      userId: 3,
-      username: 'abc123',
-      administrator: true,
-      roles: [],
-    },
-  });
-  store = initializeStore();
-  axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+beforeEach(async () => {
+  const mocks = initializeMocks();
+  store = mocks.reduxStore;
+  axiosMock = mocks.axiosMock;
+  axiosMock
+    .onGet(getApiWaffleFlagsUrl(courseId))
+    .reply(200, {});
 });
 
 describe('Editor Pages Load no header', () => {
@@ -51,13 +41,9 @@ describe('Editor Pages Load no header', () => {
     mockPathname = '/editor/';
     await mockStoreSuccess();
     const wrapper = render(
-      <AppProvider store={store}>
-        <IntlProvider locale="en">
-          <CourseAuthoringPage courseId={courseId}>
-            <PagesAndResources courseId={courseId} />
-          </CourseAuthoringPage>
-        </IntlProvider>
-      </AppProvider>
+      <CourseAuthoringPage courseId={courseId}>
+        <PagesAndResources courseId={courseId} />
+      </CourseAuthoringPage>
       ,
     );
     expect(wrapper.queryByRole('status')).not.toBeInTheDocument();
@@ -66,13 +52,9 @@ describe('Editor Pages Load no header', () => {
     mockPathname = '/evilguy/';
     await mockStoreSuccess();
     const wrapper = render(
-      <AppProvider store={store}>
-        <IntlProvider locale="en">
-          <CourseAuthoringPage courseId={courseId}>
-            <PagesAndResources courseId={courseId} />
-          </CourseAuthoringPage>
-        </IntlProvider>
-      </AppProvider>
+      <CourseAuthoringPage courseId={courseId}>
+        <PagesAndResources courseId={courseId} />
+      </CourseAuthoringPage>
       ,
     );
     expect(wrapper.queryByRole('status')).toBeInTheDocument();
@@ -100,14 +82,7 @@ describe('Course authoring page', () => {
   };
   test('renders not found page on non-existent course key', async () => {
     await mockStoreNotFound();
-    const wrapper = render(
-      <AppProvider store={store}>
-        <IntlProvider locale="en">
-          <CourseAuthoringPage courseId={courseId} />
-        </IntlProvider>
-      </AppProvider>
-      ,
-    );
+    const wrapper = render(<CourseAuthoringPage courseId={courseId} />);
     expect(await wrapper.findByTestId('notFoundAlert')).toBeInTheDocument();
   });
   test('does not render not found page on other kinds of error', async () => {
@@ -118,16 +93,28 @@ describe('Course authoring page', () => {
     // found alert is not present.
     const contentTestId = 'courseAuthoringPageContent';
     const wrapper = render(
-      <AppProvider store={store}>
-        <IntlProvider locale="en">
-          <CourseAuthoringPage courseId={courseId}>
-            <div data-testid={contentTestId} />
-          </CourseAuthoringPage>
-        </IntlProvider>
-      </AppProvider>
+      <CourseAuthoringPage courseId={courseId}>
+        <div data-testid={contentTestId} />
+      </CourseAuthoringPage>
       ,
     );
     expect(await wrapper.findByTestId(contentTestId)).toBeInTheDocument();
     expect(wrapper.queryByTestId('notFoundAlert')).not.toBeInTheDocument();
   });
+  const mockStoreDenied = async () => {
+    const studioApiBaseUrl = getConfig().STUDIO_BASE_URL;
+    const courseAppsApiUrl = `${studioApiBaseUrl}/api/course_apps/v1/apps`;
+
+    axiosMock.onGet(
+      `${courseAppsApiUrl}/${courseId}`,
+    ).reply(403);
+    await executeThunk(fetchCourseApps(courseId), store.dispatch);
+  };
+  test('renders PermissionDeniedAlert when courseAppsApiStatus is DENIED', async () => {
+    mockPathname = '/editor/';
+    await mockStoreDenied();
+
+    const wrapper = render(<CourseAuthoringPage courseId={courseId} />);
+    expect(await wrapper.findByTestId('permissionDeniedAlert')).toBeInTheDocument();
+  });
 });

src/CourseAuthoringRoutes.jsx

@@ -4,7 +4,7 @@ import {
 } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 import { PageWrap } from '@edx/frontend-platform/react';
-import { Textbooks } from 'CourseAuthoring/textbooks';
+import { Textbooks } from './textbooks';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';
 import EditorContainer from './editors/EditorContainer';
@@ -17,13 +17,16 @@ import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
 import CourseTeam from './course-team/CourseTeam';
 import { CourseUpdates } from './course-updates';
-import { CourseUnit } from './course-unit';
+import { CourseUnit, SubsectionUnitRedirect } from './course-unit';
 import { Certificates } from './certificates';
 import CourseExportPage from './export-page/CourseExportPage';
+import CourseOptimizerPage from './optimizer-page/CourseOptimizerPage';
 import CourseImportPage from './import-page/CourseImportPage';
 import { DECODED_ROUTES } from './constants';
 import CourseChecklist from './course-checklist';
 import GroupConfigurations from './group-configurations';
+import { CourseLibraries } from './course-libraries';
+import { IframeProvider } from './generic/hooks/context/iFrameContext';
 
 /**
  * As of this writing, these routes are mounted at a path prefixed with the following:
@@ -55,6 +58,10 @@ const CourseAuthoringRoutes = () => {
           path="course_info"
           element={<PageWrap><CourseUpdates courseId={courseId} /></PageWrap>}
         />
+        <Route
+          path="libraries"
+          element={<PageWrap><CourseLibraries courseId={courseId} /></PageWrap>}
+        />
         <Route
           path="assets"
           element={<PageWrap><FilesPage courseId={courseId} /></PageWrap>}
@@ -75,11 +82,15 @@ const CourseAuthoringRoutes = () => {
           path="custom-pages/*"
           element={<PageWrap><CustomPages courseId={courseId} /></PageWrap>}
         />
+        <Route
+          path="/subsection/:subsectionId"
+          element={<PageWrap><SubsectionUnitRedirect courseId={courseId} /></PageWrap>}
+        />
         {DECODED_ROUTES.COURSE_UNIT.map((path) => (
           <Route
             key={path}
             path={path}
-            element={<PageWrap><CourseUnit courseId={courseId} /></PageWrap>}
+            element={<PageWrap><IframeProvider><CourseUnit courseId={courseId} /></IframeProvider></PageWrap>}
           />
         ))}
         <Route
@@ -118,6 +129,10 @@ const CourseAuthoringRoutes = () => {
           path="export"
           element={<PageWrap><CourseExportPage courseId={courseId} /></PageWrap>}
         />
+        <Route
+          path="optimizer"
+          element={<PageWrap><CourseOptimizerPage courseId={courseId} /></PageWrap>}
+        />
         <Route
           path="checklists"
           element={<PageWrap><CourseChecklist courseId={courseId} /></PageWrap>}

src/CourseAuthoringRoutes.test.jsx

@@ -1,17 +1,14 @@
-import React from 'react';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
-import initializeStore from './store';
+import { getApiWaffleFlagsUrl } from './data/api';
+import {
+  screen, initializeMocks, render, waitFor,
+} from './testUtils';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
 const pagesAndResourcesMockText = 'Pages And Resources';
 const editorContainerMockText = 'Editor Container';
 const videoSelectorContainerMockText = 'Video Selector Container';
 const customPagesMockText = 'Custom Pages';
-let store;
 const mockComponentFn = jest.fn();
 
 jest.mock('react-router-dom', () => ({
@@ -50,68 +47,57 @@ jest.mock('./custom-pages/CustomPages', () => (props) => {
 });
 
 describe('<CourseAuthoringRoutes>', () => {
-  beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
+  beforeEach(async () => {
+    const { axiosMock } = initializeMocks();
+    axiosMock
+      .onGet(getApiWaffleFlagsUrl(courseId))
+      .reply(200, {});
+  });
+
+  it('renders the PagesAndResources component when the pages and resources route is active', async () => {
+    render(
+      <CourseAuthoringRoutes />,
+      { routerProps: { initialEntries: ['/pages-and-resources'] } },
+    );
+    await waitFor(() => {
+      expect(screen.getByText(pagesAndResourcesMockText)).toBeVisible();
+      expect(mockComponentFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          courseId,
+        }),
+      );
     });
-    store = initializeStore();
   });
 
-  fit('renders the PagesAndResources component when the pages and resources route is active', () => {
+  it('renders the EditorContainer component when the course editor route is active', async () => {
     render(
-      <AppProvider store={store} wrapWithRouter={false}>
-        <MemoryRouter initialEntries={['/pages-and-resources']}>
-          <CourseAuthoringRoutes />
-        </MemoryRouter>
-      </AppProvider>,
-    );
-
-    expect(screen.getByText(pagesAndResourcesMockText)).toBeVisible();
-    expect(mockComponentFn).toHaveBeenCalledWith(
-      expect.objectContaining({
-        courseId,
-      }),
+      <CourseAuthoringRoutes />,
+      { routerProps: { initialEntries: ['/editor/video/block-id'] } },
     );
+    await waitFor(() => {
+      expect(screen.queryByText(editorContainerMockText)).toBeInTheDocument();
+      expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
+      expect(mockComponentFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          learningContextId: courseId,
+        }),
+      );
+    });
   });
 
-  it('renders the EditorContainer component when the course editor route is active', () => {
+  it('renders the VideoSelectorContainer component when the course videos route is active', async () => {
     render(
-      <AppProvider store={store} wrapWithRouter={false}>
-        <MemoryRouter initialEntries={['/editor/video/block-id']}>
-          <CourseAuthoringRoutes />
-        </MemoryRouter>
-      </AppProvider>,
-    );
-
-    expect(screen.queryByText(editorContainerMockText)).toBeInTheDocument();
-    expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
-    expect(mockComponentFn).toHaveBeenCalledWith(
-      expect.objectContaining({
-        courseId,
-      }),
-    );
-  });
-
-  it('renders the VideoSelectorContainer component when the course videos route is active', () => {
-    render(
-      <AppProvider store={store} wrapWithRouter={false}>
-        <MemoryRouter initialEntries={['/editor/course-videos/block-id']}>
-          <CourseAuthoringRoutes />
-        </MemoryRouter>
-      </AppProvider>,
-    );
-
-    expect(screen.queryByText(videoSelectorContainerMockText)).toBeInTheDocument();
-    expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
-    expect(mockComponentFn).toHaveBeenCalledWith(
-      expect.objectContaining({
-        courseId,
-      }),
+      <CourseAuthoringRoutes />,
+      { routerProps: { initialEntries: ['/editor/course-videos/block-id'] } },
     );
+    await waitFor(() => {
+      expect(screen.queryByText(videoSelectorContainerMockText)).toBeInTheDocument();
+      expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
+      expect(mockComponentFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          courseId,
+        }),
+      );
+    });
   });
 });

src/__mocks__/clipboardSubsection.js

@@ -0,0 +1,16 @@
+export default {
+  content: {
+    id: 67,
+    userId: 3,
+    created: '2024-01-16T13:09:11.540615Z',
+    purpose: 'clipboard',
+    status: 'ready',
+    blockType: 'sequential',
+    blockTypeDisplay: 'Subsection',
+    olxUrl: 'http://localhost:18010/api/content-staging/v1/staged-content/67/olx',
+    displayName: 'Sequences',
+  },
+  sourceUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@sequential_0270f6de40fc',
+  sourceContextTitle: 'Demonstration Course',
+  sourceEditUrl: 'http://localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@sequential+block@sequential_0270f6de40fc',
+};

src/__mocks__/index.js

@@ -1,2 +1,3 @@
 export { default as clipboardUnit } from './clipboardUnit';
+export { default as clipboardSubsection } from './clipboardSubsection';
 export { default as clipboardXBlock } from './clipboardXBlock';

src/accessibility-page/AccessibilityBody/AccessibilityBody.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Hyperlink, MailtoLink, Stack } from '@openedx/paragon';
 
 import messages from './messages';
@@ -95,4 +95,4 @@ AccessibilityBody.propTypes = {
   email: PropTypes.string.isRequired,
 };
 
-export default injectIntl(AccessibilityBody);
+export default AccessibilityBody;

src/accessibility-page/AccessibilityForm/AccessibilityForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  injectIntl, FormattedMessage, intlShape, FormattedDate, FormattedTime,
+  FormattedMessage, FormattedDate, FormattedTime, useIntl,
 } from '@edx/frontend-platform/i18n';
 import {
   ActionRow, Alert, Form, Stack, StatefulButton,
@@ -15,9 +15,8 @@ import messages from './messages';
 
 const AccessibilityForm = ({
   accessibilityEmail,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const {
     errors,
     values,
@@ -139,8 +138,6 @@ const AccessibilityForm = ({
 
 AccessibilityForm.propTypes = {
   accessibilityEmail: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(AccessibilityForm);
+export default AccessibilityForm;

src/accessibility-page/AccessibilityForm/AccessibilityForm.test.jsx

@@ -1,6 +1,5 @@
 import {
   render,
-  act,
   screen,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -74,22 +73,24 @@ describe('<AccessibilityPolicyForm />', () => {
   describe('statusAlert', () => {
     let formSections;
     let submitButton;
+    let user;
     beforeEach(async () => {
+      user = userEvent.setup();
       renderComponent();
       formSections = screen.getAllByRole('textbox');
-      await act(async () => {
-        userEvent.type(formSections[0], 'email@email.com');
-        userEvent.type(formSections[1], 'test name');
-        userEvent.type(formSections[2], 'feedback message');
-      });
+
+      await user.type(formSections[0], 'email@email.com');
+      await user.type(formSections[1], 'test name');
+      await user.type(formSections[2], 'feedback message');
+
       submitButton = screen.getByText(messages.accessibilityPolicyFormSubmitLabel.defaultMessage);
     });
 
     it('shows correct success message', async () => {
       axiosMock.onPost(getZendeskrUrl()).reply(200);
-      await act(async () => {
-        userEvent.click(submitButton);
-      });
+
+      await user.click(submitButton);
+
       const { savingStatus } = store.getState().accessibilityPage;
       expect(savingStatus).toEqual(RequestStatus.SUCCESSFUL);
 
@@ -104,9 +105,9 @@ describe('<AccessibilityPolicyForm />', () => {
 
     it('shows correct rate limiting message', async () => {
       axiosMock.onPost(getZendeskrUrl()).reply(429);
-      await act(async () => {
-        userEvent.click(submitButton);
-      });
+
+      await user.click(submitButton);
+
       const { savingStatus } = store.getState().accessibilityPage;
       expect(savingStatus).toEqual(RequestStatus.FAILED);
 
@@ -123,23 +124,24 @@ describe('<AccessibilityPolicyForm />', () => {
   describe('input validation', () => {
     let formSections;
     let submitButton;
+    let user;
     beforeEach(async () => {
+      user = userEvent.setup();
       renderComponent();
       formSections = screen.getAllByRole('textbox');
-      await act(async () => {
-        userEvent.type(formSections[0], 'email@email.com');
-        userEvent.type(formSections[1], 'test name');
-        userEvent.type(formSections[2], 'feedback message');
-      });
+
+      await user.type(formSections[0], 'email@email.com');
+      await user.type(formSections[1], 'test name');
+      await user.type(formSections[2], 'feedback message');
+
       submitButton = screen.getByText(messages.accessibilityPolicyFormSubmitLabel.defaultMessage);
     });
 
     it('adds validation checking on each input field', async () => {
-      await act(async () => {
-        userEvent.clear(formSections[0]);
-        userEvent.clear(formSections[1]);
-        userEvent.clear(formSections[2]);
-      });
+      await user.clear(formSections[0]);
+      await user.clear(formSections[1]);
+      await user.clear(formSections[2]);
+
       const emailError = screen.getByTestId('error-feedback-email');
       expect(emailError).toBeVisible();
 
@@ -151,12 +153,10 @@ describe('<AccessibilityPolicyForm />', () => {
     });
 
     it('sumbit button is disabled when trying to submit with all empty fields', async () => {
-      await act(async () => {
-        userEvent.clear(formSections[0]);
-        userEvent.clear(formSections[1]);
-        userEvent.clear(formSections[2]);
-        userEvent.click(submitButton);
-      });
+      await user.clear(formSections[0]);
+      await user.clear(formSections[1]);
+      await user.clear(formSections[2]);
+      await user.click(submitButton);
 
       expect(submitButton.closest('button')).toBeDisabled();
     });

src/accessibility-page/AccessibilityPage.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
 import { Container } from '@openedx/paragon';
-import { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } from '@edx/frontend-component-footer';
 
 import Header from '../header';
 import messages from './messages';
 import AccessibilityBody from './AccessibilityBody';
 import AccessibilityForm from './AccessibilityForm';
 
-const AccessibilityPage = ({
-  // injected
-  intl,
-}) => {
-  const communityAccessibilityLink = 'https://www.edx.org/accessibility';
-  const email = 'accessibility@edx.org';
+import { COMMUNITY_ACCESSIBILITY_LINK, ACCESSIBILITY_EMAIL } from './constants';
+
+const AccessibilityPage = () => {
+  const intl = useIntl();
   return (
     <>
       <Helmet>
@@ -26,17 +24,16 @@ const AccessibilityPage = ({
       </Helmet>
       <Header isHiddenMainMenu />
       <Container size="xl" classNamae="px-4">
-        <AccessibilityBody {...{ email, communityAccessibilityLink }} />
-        <AccessibilityForm accessibilityEmail={email} />
+        <AccessibilityBody
+          {...{ email: ACCESSIBILITY_EMAIL, communityAccessibilityLink: COMMUNITY_ACCESSIBILITY_LINK }}
+        />
+        <AccessibilityForm accessibilityEmail={ACCESSIBILITY_EMAIL} />
       </Container>
-      <StudioFooter />
+      <StudioFooterSlot />
     </>
   );
 };
 
-AccessibilityPage.propTypes = {
-  // injected
-  intl: intlShape.isRequired,
-};
+AccessibilityPage.propTypes = {};
 
-export default injectIntl(AccessibilityPage);
+export default AccessibilityPage;

src/accessibility-page/AccessibilityPage.test.jsx

@@ -1,42 +1,13 @@
-import {
-  render,
-  screen,
-} from '@testing-library/react';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { initializeMockApp } from '@edx/frontend-platform';
-import initializeStore from '../store';
+// @ts-check
+import { initializeMocks, render, screen } from '../testUtils';
 import AccessibilityPage from './index';
 
-const initialState = {
-  accessibilityPage: {
-    status: {},
-  },
-};
-let store;
-
-const renderComponent = () => {
-  render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <AccessibilityPage />
-      </AppProvider>
-    </IntlProvider>,
-  );
-};
+const renderComponent = () => render(<AccessibilityPage />);
 
 describe('<AccessibilityPolicyPage />', () => {
   describe('renders', () => {
     beforeEach(async () => {
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 3,
-          username: 'abc123',
-          administrator: false,
-          roles: [],
-        },
-      });
-      store = initializeStore(initialState);
+      initializeMocks();
     });
     it('contains the policy body', () => {
       renderComponent();

src/accessibility-page/constants.ts

@@ -0,0 +1,2 @@
+export const COMMUNITY_ACCESSIBILITY_LINK = 'https://www.edx.org/accessibility';
+export const ACCESSIBILITY_EMAIL = 'accessibility@edx.org';

src/accessibility-page/data/thunks.js

@@ -10,9 +10,11 @@ function submitAccessibilityForm({ email, name, message }) {
       await postAccessibilityForm({ email, name, message });
       dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
     } catch (error) {
+      /* istanbul ignore else */
       if (error.response && error.response.status === 429) {
         dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
       } else {
+        /* istanbul ignore next */
         dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
       }
     }

src/advanced-settings/AdvancedSettings.jsx

@@ -5,7 +5,7 @@ import {
   Container, Button, Layout, StatefulButton, TransitionReplace,
 } from '@openedx/paragon';
 import { CheckCircle, Info, Warning } from '@openedx/paragon/icons';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import Placeholder from '../editors/Placeholder';
 
 import AlertProctoringError from '../generic/AlertProctoringError';
@@ -26,7 +26,8 @@ import messages from './messages';
 import ModalError from './modal-error/ModalError';
 import getPageHeadTitle from '../generic/utils';
 
-const AdvancedSettings = ({ intl, courseId }) => {
+const AdvancedSettings = ({ courseId }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const [saveSettingsPrompt, showSaveSettingsPrompt] = useState(false);
   const [showDeprecated, setShowDeprecated] = useState(false);
@@ -278,8 +279,7 @@ const AdvancedSettings = ({ intl, courseId }) => {
 };
 
 AdvancedSettings.propTypes = {
-  intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
 };
 
-export default injectIntl(AdvancedSettings);
+export default AdvancedSettings;

src/advanced-settings/AdvancedSettings.test.jsx

@@ -1,12 +1,9 @@
-import React from 'react';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { render, fireEvent, waitFor } from '@testing-library/react';
-import MockAdapter from 'axios-mock-adapter';
-
-import initializeStore from '../store';
+import {
+  render as baseRender,
+  fireEvent,
+  initializeMocks,
+  waitFor,
+} from '../testUtils';
 import { executeThunk } from '../utils';
 import { advancedSettingsMock } from './__mocks__';
 import { getCourseAdvancedSettingsApiUrl } from './data/api';
@@ -28,39 +25,22 @@ jest.mock('react-textarea-autosize', () => jest.fn((props) => (
   />
 )));
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => ({
-    pathname: mockPathname,
-  }),
-}));
-
-const RootWrapper = () => (
-  <AppProvider store={store}>
-    <IntlProvider locale="en" messages={{}}>
-      <AdvancedSettings intl={injectIntl} courseId={courseId} />
-    </IntlProvider>
-  </AppProvider>
+const render = () => baseRender(
+  <AdvancedSettings courseId={courseId} />,
+  { path: mockPathname },
 );
 
 describe('<AdvancedSettings />', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    const mocks = initializeMocks();
+    store = mocks.reduxStore;
+    axiosMock = mocks.axiosMock;
     axiosMock
       .onGet(`${getCourseAdvancedSettingsApiUrl(courseId)}?fetch_all=0`)
       .reply(200, advancedSettingsMock);
   });
   it('should render without errors', async () => {
-    const { getByText } = render(<RootWrapper />);
+    const { getByText } = render();
     await waitFor(() => {
       expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
       const advancedSettingsElement = getByText(messages.headingTitle.defaultMessage, {
@@ -72,7 +52,7 @@ describe('<AdvancedSettings />', () => {
     });
   });
   it('should render setting element', async () => {
-    const { getByText, queryByText } = render(<RootWrapper />);
+    const { getByText, queryByText } = render();
     await waitFor(() => {
       const advancedModuleListTitle = getByText(/Advanced Module List/i);
       expect(advancedModuleListTitle).toBeInTheDocument();
@@ -80,7 +60,7 @@ describe('<AdvancedSettings />', () => {
     });
   });
   it('should change to onСhange', async () => {
-    const { getByLabelText } = render(<RootWrapper />);
+    const { getByLabelText } = render();
     await waitFor(() => {
       const textarea = getByLabelText(/Advanced Module List/i);
       expect(textarea).toBeInTheDocument();
@@ -89,7 +69,7 @@ describe('<AdvancedSettings />', () => {
     });
   });
   it('should display a warning alert', async () => {
-    const { getByLabelText, getByText } = render(<RootWrapper />);
+    const { getByLabelText, getByText } = render();
     await waitFor(() => {
       const textarea = getByLabelText(/Advanced Module List/i);
       fireEvent.change(textarea, { target: { value: '[3, 2, 1]' } });
@@ -100,7 +80,7 @@ describe('<AdvancedSettings />', () => {
     });
   });
   it('should display a tooltip on clicking on the icon', async () => {
-    const { getByLabelText, getByText } = render(<RootWrapper />);
+    const { getByLabelText, getByText } = render();
     await waitFor(() => {
       const button = getByLabelText(/Show help text/i);
       fireEvent.click(button);
@@ -108,7 +88,7 @@ describe('<AdvancedSettings />', () => {
     });
   });
   it('should change deprecated button text ', async () => {
-    const { getByText } = render(<RootWrapper />);
+    const { getByText } = render();
     await waitFor(() => {
       const showDeprecatedItemsBtn = getByText(/Show Deprecated Settings/i);
       expect(showDeprecatedItemsBtn).toBeInTheDocument();
@@ -118,7 +98,7 @@ describe('<AdvancedSettings />', () => {
     expect(getByText('Certificate web/html view enabled')).toBeInTheDocument();
   });
   it('should reset to default value on click on Cancel button', async () => {
-    const { getByLabelText, getByText } = render(<RootWrapper />);
+    const { getByLabelText, getByText } = render();
     let textarea;
     await waitFor(() => {
       textarea = getByLabelText(/Advanced Module List/i);
@@ -129,7 +109,7 @@ describe('<AdvancedSettings />', () => {
     expect(textarea.value).toBe('[]');
   });
   it('should update the textarea value and display the updated value after clicking "Change manually"', async () => {
-    const { getByLabelText, getByText } = render(<RootWrapper />);
+    const { getByLabelText, getByText } = render();
     let textarea;
     await waitFor(() => {
       textarea = getByLabelText(/Advanced Module List/i);
@@ -141,7 +121,7 @@ describe('<AdvancedSettings />', () => {
     expect(textarea.value).toBe('[3, 2, 1,');
   });
   it('should show success alert after save', async () => {
-    const { getByLabelText, getByText } = render(<RootWrapper />);
+    const { getByLabelText, getByText } = render();
     let textarea;
     await waitFor(() => {
       textarea = getByLabelText(/Advanced Module List/i);

src/advanced-settings/__mocks__/index.js

@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as advancedSettingsMock } from './advancedSettings';

src/advanced-settings/data/api.js

@@ -1,6 +1,10 @@
 /* eslint-disable import/prefer-default-export */
-import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import {
+  camelCaseObject,
+  getConfig,
+} from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { camelCase } from 'lodash';
 import { convertObjectToSnakeCase } from '../../utils';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
@@ -15,7 +19,19 @@ const getProctoringErrorsApiUrl = () => `${getApiBaseUrl()}/api/contentstore/v1/
 export async function getCourseAdvancedSettings(courseId) {
   const { data } = await getAuthenticatedHttpClient()
     .get(`${getCourseAdvancedSettingsApiUrl(courseId)}?fetch_all=0`);
-  return camelCaseObject(data);
+  const keepValues = {};
+  Object.keys(data).forEach((key) => {
+    keepValues[camelCase(key)] = { value: data[key].value };
+  });
+  const formattedData = {};
+  const formattedCamelCaseData = camelCaseObject(data);
+  Object.keys(formattedCamelCaseData).forEach((key) => {
+    formattedData[key] = {
+      ...formattedCamelCaseData[key],
+      value: keepValues[key]?.value,
+    };
+  });
+  return formattedData;
 }
 
 /**
@@ -27,7 +43,19 @@ export async function getCourseAdvancedSettings(courseId) {
 export async function updateCourseAdvancedSettings(courseId, settings) {
   const { data } = await getAuthenticatedHttpClient()
     .patch(`${getCourseAdvancedSettingsApiUrl(courseId)}`, convertObjectToSnakeCase(settings));
-  return camelCaseObject(data);
+  const keepValues = {};
+  Object.keys(data).forEach((key) => {
+    keepValues[camelCase(key)] = { value: data[key].value };
+  });
+  const formattedData = {};
+  const formattedCamelCaseData = camelCaseObject(data);
+  Object.keys(formattedCamelCaseData).forEach((key) => {
+    formattedData[key] = {
+      ...formattedCamelCaseData[key],
+      value: keepValues[key]?.value,
+    };
+  });
+  return formattedData;
 }
 
 /**
@@ -37,5 +65,17 @@ export async function updateCourseAdvancedSettings(courseId, settings) {
  */
 export async function getProctoringExamErrors(courseId) {
   const { data } = await getAuthenticatedHttpClient().get(`${getProctoringErrorsApiUrl()}${courseId}`);
-  return camelCaseObject(data);
+  const keepValues = {};
+  Object.keys(data).forEach((key) => {
+    keepValues[camelCase(key)] = { value: data[key].value };
+  });
+  const formattedData = {};
+  const formattedCamelCaseData = camelCaseObject(data);
+  Object.keys(formattedCamelCaseData).forEach((key) => {
+    formattedData[key] = {
+      ...formattedCamelCaseData[key],
+      value: keepValues[key]?.value,
+    };
+  });
+  return formattedData;
 }

src/advanced-settings/data/api.test.js

@@ -0,0 +1,236 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import {
+  getCourseAdvancedSettings,
+  updateCourseAdvancedSettings,
+  getProctoringExamErrors,
+} from './api';
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(),
+}));
+
+describe('courseSettings API', () => {
+  const mockHttpClient = {
+    get: jest.fn(),
+    patch: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getAuthenticatedHttpClient.mockReturnValue(mockHttpClient);
+  });
+
+  describe('getCourseAdvancedSettings', () => {
+    it('should fetch and unformat course advanced settings', async () => {
+      const fakeData = {
+        key_snake_case: {
+          display_name: 'To come camelCase',
+          testCamelCase: 'This key must not be formatted',
+          PascalCase: 'To come camelCase',
+          'kebab-case': 'To come camelCase',
+          UPPER_CASE: 'To come camelCase',
+          lowercase: 'This key must not be formatted',
+          UPPERCASE: 'To come lowercase',
+          'Title Case': 'To come camelCase',
+          'dot.case': 'To come camelCase',
+          SCREAMING_SNAKE_CASE: 'To come camelCase',
+          MixedCase: 'To come camelCase',
+          'Train-Case': 'To come camelCase',
+          nestedOption: {
+            anotherOption: 'To come camelCase',
+          },
+          // value is an object with various cases
+          // this contain must not be formatted to camelCase
+          value: {
+            snake_case: 'snake_case',
+            camelCase: 'camelCase',
+            PascalCase: 'PascalCase',
+            'kebab-case': 'kebab-case',
+            UPPER_CASE: 'UPPER_CASE',
+            lowercase: 'lowercase',
+            UPPERCASE: 'UPPERCASE',
+            'Title Case': 'Title Case',
+            'dot.case': 'dot.case',
+            SCREAMING_SNAKE_CASE: 'SCREAMING_SNAKE_CASE',
+            MixedCase: 'MixedCase',
+            'Train-Case': 'Train-Case',
+            nestedOption: {
+              anotherOption: 'nestedContent',
+            },
+          },
+        },
+      };
+      const expected = {
+        keySnakeCase: {
+          displayName: 'To come camelCase',
+          testCamelCase: 'This key must not be formatted',
+          pascalCase: 'To come camelCase',
+          kebabCase: 'To come camelCase',
+          upperCase: 'To come camelCase',
+          lowercase: 'This key must not be formatted',
+          uppercase: 'To come lowercase',
+          titleCase: 'To come camelCase',
+          dotCase: 'To come camelCase',
+          screamingSnakeCase: 'To come camelCase',
+          mixedCase: 'To come camelCase',
+          trainCase: 'To come camelCase',
+          nestedOption: {
+            anotherOption: 'To come camelCase',
+          },
+          value: fakeData.key_snake_case.value,
+        },
+      };
+
+      mockHttpClient.get.mockResolvedValue({ data: fakeData });
+
+      const result = await getCourseAdvancedSettings('course-v1:Test+T101+2024');
+      expect(mockHttpClient.get).toHaveBeenCalledWith(
+        `${process.env.STUDIO_BASE_URL}/api/contentstore/v0/advanced_settings/course-v1:Test+T101+2024?fetch_all=0`,
+      );
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe('updateCourseAdvancedSettings', () => {
+    it('should update and unformat course advanced settings', async () => {
+      const fakeData = {
+        key_snake_case: {
+          display_name: 'To come camelCase',
+          testCamelCase: 'This key must not be formatted', // because already be camelCase
+          PascalCase: 'To come camelCase',
+          'kebab-case': 'To come camelCase',
+          UPPER_CASE: 'To come camelCase',
+          lowercase: 'This key must not be formatted', // because camelCase in lowercase not formatted
+          UPPERCASE: 'To come lowercase', // because camelCase in UPPERCASE format to lowercase
+          'Title Case': 'To come camelCase',
+          'dot.case': 'To come camelCase',
+          SCREAMING_SNAKE_CASE: 'To come camelCase',
+          MixedCase: 'To come camelCase',
+          'Train-Case': 'To come camelCase',
+          nestedOption: {
+            anotherOption: 'To come camelCase',
+          },
+          // value is an object with various cases
+          // this contain must not be formatted to camelCase
+          value: {
+            snake_case: 'snake_case',
+            camelCase: 'camelCase',
+            PascalCase: 'PascalCase',
+            'kebab-case': 'kebab-case',
+            UPPER_CASE: 'UPPER_CASE',
+            lowercase: 'lowercase',
+            UPPERCASE: 'UPPERCASE',
+            'Title Case': 'Title Case',
+            'dot.case': 'dot.case',
+            SCREAMING_SNAKE_CASE: 'SCREAMING_SNAKE_CASE',
+            MixedCase: 'MixedCase',
+            'Train-Case': 'Train-Case',
+            nestedOption: {
+              anotherOption: 'nestedContent',
+            },
+          },
+        },
+      };
+      const expected = {
+        keySnakeCase: {
+          displayName: 'To come camelCase',
+          testCamelCase: 'This key must not be formatted',
+          pascalCase: 'To come camelCase',
+          kebabCase: 'To come camelCase',
+          upperCase: 'To come camelCase',
+          lowercase: 'This key must not be formatted',
+          uppercase: 'To come lowercase',
+          titleCase: 'To come camelCase',
+          dotCase: 'To come camelCase',
+          screamingSnakeCase: 'To come camelCase',
+          mixedCase: 'To come camelCase',
+          trainCase: 'To come camelCase',
+          nestedOption: {
+            anotherOption: 'To come camelCase',
+          },
+          value: fakeData.key_snake_case.value,
+        },
+      };
+
+      mockHttpClient.patch.mockResolvedValue({ data: fakeData });
+
+      const result = await updateCourseAdvancedSettings('course-v1:Test+T101+2024', {});
+      expect(mockHttpClient.patch).toHaveBeenCalledWith(
+        `${process.env.STUDIO_BASE_URL}/api/contentstore/v0/advanced_settings/course-v1:Test+T101+2024`,
+        {},
+      );
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe('getProctoringExamErrors', () => {
+    it('should fetch proctoring errors and return unformat object', async () => {
+      const fakeData = {
+        key_snake_case: {
+          display_name: 'To come camelCase',
+          testCamelCase: 'This key must not be formatted',
+          PascalCase: 'To come camelCase',
+          'kebab-case': 'To come camelCase',
+          UPPER_CASE: 'To come camelCase',
+          lowercase: 'This key must not be formatted',
+          UPPERCASE: 'To come lowercase',
+          'Title Case': 'To come camelCase',
+          'dot.case': 'To come camelCase',
+          SCREAMING_SNAKE_CASE: 'To come camelCase',
+          MixedCase: 'To come camelCase',
+          'Train-Case': 'To come camelCase',
+          nestedOption: {
+            anotherOption: 'To come camelCase',
+          },
+          // value is an object with various cases
+          // this contain must not be formatted to camelCase
+          value: {
+            snake_case: 'snake_case',
+            camelCase: 'camelCase',
+            PascalCase: 'PascalCase',
+            'kebab-case': 'kebab-case',
+            UPPER_CASE: 'UPPER_CASE',
+            lowercase: 'lowercase',
+            UPPERCASE: 'UPPERCASE',
+            'Title Case': 'Title Case',
+            'dot.case': 'dot.case',
+            SCREAMING_SNAKE_CASE: 'SCREAMING_SNAKE_CASE',
+            MixedCase: 'MixedCase',
+            'Train-Case': 'Train-Case',
+            nestedOption: {
+              anotherOption: 'nestedContent',
+            },
+          },
+        },
+      };
+      const expected = {
+        keySnakeCase: {
+          displayName: 'To come camelCase',
+          testCamelCase: 'This key must not be formatted',
+          pascalCase: 'To come camelCase',
+          kebabCase: 'To come camelCase',
+          upperCase: 'To come camelCase',
+          lowercase: 'This key must not be formatted',
+          uppercase: 'To come lowercase',
+          titleCase: 'To come camelCase',
+          dotCase: 'To come camelCase',
+          screamingSnakeCase: 'To come camelCase',
+          mixedCase: 'To come camelCase',
+          trainCase: 'To come camelCase',
+          nestedOption: {
+            anotherOption: 'To come camelCase',
+          },
+          value: fakeData.key_snake_case.value,
+        },
+      };
+
+      mockHttpClient.get.mockResolvedValue({ data: fakeData });
+
+      const result = await getProctoringExamErrors('course-v1:Test+T101+2024');
+      expect(mockHttpClient.get).toHaveBeenCalledWith(
+        `${process.env.STUDIO_BASE_URL}/api/contentstore/v1/proctoring_errors/course-v1:Test+T101+2024`,
+      );
+      expect(result).toEqual(expected);
+    });
+  });
+});

src/advanced-settings/index.js

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

src/advanced-settings/modal-error/ModalError.jsx

@@ -1,55 +1,57 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ActionRow, AlertModal, Button } from '@openedx/paragon';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import ModalErrorListItem from './ModalErrorListItem';
 import messages from './messages';
 
 const ModalError = ({
-  intl, isError, handleUndoChanges, showErrorModal, errorList, settingsData,
-}) => (
-  <AlertModal
-    title={intl.formatMessage(messages.modalErrorTitle)}
-    isOpen={isError}
-    variant="danger"
-    footerNode={(
-      <ActionRow>
-        <Button
-          variant="tertiary"
-          onClick={() => showErrorModal(!isError)}
-        >
-          {intl.formatMessage(messages.modalErrorButtonChangeManually)}
-        </Button>
-        <Button onClick={handleUndoChanges}>
-          {intl.formatMessage(messages.modalErrorButtonUndoChanges)}
-        </Button>
-      </ActionRow>
+  isError, handleUndoChanges, showErrorModal, errorList, settingsData,
+}) => {
+  const intl = useIntl();
+  return (
+    <AlertModal
+      title={intl.formatMessage(messages.modalErrorTitle)}
+      isOpen={isError}
+      variant="danger"
+      footerNode={(
+        <ActionRow>
+          <Button
+            variant="tertiary"
+            onClick={() => showErrorModal(!isError)}
+          >
+            {intl.formatMessage(messages.modalErrorButtonChangeManually)}
+          </Button>
+          <Button onClick={handleUndoChanges}>
+            {intl.formatMessage(messages.modalErrorButtonUndoChanges)}
+          </Button>
+        </ActionRow>
     )}
-  >
-    <p>
-      <FormattedMessage
-        id="course-authoring.advanced-settings.modal.error.description"
-        defaultMessage="There was {errorCounter} while trying to save the course settings in the database.
+    >
+      <p>
+        <FormattedMessage
+          id="course-authoring.advanced-settings.modal.error.description"
+          defaultMessage="There was {errorCounter} while trying to save the course settings in the database.
             Please check the following validation feedbacks and reflect them in your course settings:"
-        values={{ errorCounter: <strong>{errorList.length} validation error </strong> }}
-      />
-    </p>
-    <hr />
-    <ul className="p-0">
-      {errorList.map((settingName) => (
-        <ModalErrorListItem
-          key={settingName.key}
-          settingName={settingName}
-          settingsData={settingsData}
+          values={{ errorCounter: <strong>{errorList.length} validation error </strong> }}
         />
-      ))}
-    </ul>
-  </AlertModal>
-);
+      </p>
+      <hr />
+      <ul className="p-0">
+        {errorList.map((settingName) => (
+          <ModalErrorListItem
+            key={settingName.key}
+            settingName={settingName}
+            settingsData={settingsData}
+          />
+        ))}
+      </ul>
+    </AlertModal>
+  );
+};
 
 ModalError.propTypes = {
-  intl: intlShape.isRequired,
   isError: PropTypes.bool.isRequired,
   handleUndoChanges: PropTypes.func.isRequired,
   showErrorModal: PropTypes.func.isRequired,
@@ -60,4 +62,4 @@ ModalError.propTypes = {
   settingsData: PropTypes.shape({}).isRequired,
 };
 
-export default injectIntl(ModalError);
+export default ModalError;

src/advanced-settings/scss/AdvancedSettings.scss

@@ -32,7 +32,7 @@
   bottom: 0;
   width: 100%;
   padding: 0 .625rem;
-  z-index: $zindex-modal;
+  z-index: var(--pgn-elevation-modal-zindex);
 }
 
 .alert-proctoring-error {
@@ -66,13 +66,13 @@
 .setting-sidebar-supplementary {
   .setting-sidebar-supplementary-about {
     .setting-sidebar-supplementary-about-title {
-      font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
-      color: $headings-color;
+      font: normal var(--pgn-typography-font-weight-bold) 1.125rem/1.5rem var(--pgn-typography-font-family-base);
+      color: var(--pgn-color-headings-base);
       margin-bottom: 1.25rem;
     }
 
     .setting-sidebar-supplementary-about-descriptions {
-      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+      font: normal var(--pgn-typography-font-weight-normal) .875rem/1.5rem var(--pgn-typography-font-family-base);
       color: $text-color-base;
     }
   }
@@ -81,16 +81,16 @@
     list-style: none;
 
     .setting-sidebar-supplementary-other-link {
-      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+      font: normal var(--pgn-typography-font-weight-normal) .875rem/1.5rem var(--pgn-typography-font-family-base);
       line-height: 1.5rem;
-      color: $info-500;
+      color: var(--pgn-color-info-500);
       margin-bottom: .5rem;
     }
   }
 
   .setting-sidebar-supplementary-other-title {
-    font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
-    color: $headings-color;
+    font: normal var(--pgn-typography-font-weight-bold) 1.125rem/1.5rem var(--pgn-typography-font-family-base);
+    color: var(--pgn-color-headings-base);
     margin-bottom: 1.25rem;
   }
 }
@@ -102,7 +102,7 @@
     display: inline-block;
     margin-right: 5px;
     margin-bottom: 5px;
-    color: $danger;
+    color: var(--pgn-color-danger-base);
   }
 
   .modal-error-item-title {
@@ -113,12 +113,12 @@
 
 .modal-popup-content {
   max-width: 200px;
-  color: $white;
-  background-color: $black;
+  color: var(--pgn-color-white);
+  background-color: var(--pgn-color-black);
   filter: drop-shadow(0 2px 4px rgba(0 0 0 / .15));
   font-weight: 400;
 }
 
 .pgn__modal-popup__arrow::after {
-  border-top-color: $black;
+  border-top-color: var(--pgn-color-black);
 }

src/advanced-settings/scss/_variables.scss

@@ -1 +1 @@
-$text-color-base: $gray-700;
+$text-color-base: var(--pgn-color-gray-700);

src/advanced-settings/setting-card/SettingCard.jsx

@@ -11,7 +11,7 @@ import {
 import { InfoOutline, Warning } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import { capitalize } from 'lodash';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import TextareaAutosize from 'react-textarea-autosize';
 
 import messages from './messages';
@@ -25,9 +25,8 @@ const SettingCard = ({
   saveSettingsPrompt,
   isEditableState,
   setIsEditableState,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const { deprecated, help, displayName } = settingData;
   const initialValue = JSON.stringify(settingData.value, null, 4);
   const [isOpen, open, close] = useToggle(false);
@@ -115,7 +114,6 @@ const SettingCard = ({
 };
 
 SettingCard.propTypes = {
-  intl: intlShape.isRequired,
   settingData: PropTypes.shape({
     deprecated: PropTypes.bool,
     help: PropTypes.string,
@@ -137,4 +135,4 @@ SettingCard.propTypes = {
   setIsEditableState: PropTypes.func.isRequired,
 };
 
-export default injectIntl(SettingCard);
+export default SettingCard;

src/advanced-settings/setting-card/SettingCard.test.jsx

@@ -29,7 +29,6 @@ jest.mock('react-textarea-autosize', () => jest.fn((props) => (
 const RootWrapper = () => (
   <IntlProvider locale="en">
     <SettingCard
-      intl={{}}
       isOn
       name="settingName"
       setEdited={setEdited}
@@ -58,7 +57,6 @@ describe('<SettingCard />', () => {
     const { getByText } = render(
       <IntlProvider locale="en">
         <SettingCard
-          intl={{}}
           isOn
           name="settingName"
           setEdited={setEdited}
@@ -79,11 +77,12 @@ describe('<SettingCard />', () => {
     expect(queryByText(messages.deprecated.defaultMessage)).toBeNull();
   });
   it('calls setEdited on blur', async () => {
+    const user = userEvent.setup();
     const { getByLabelText } = render(<RootWrapper />);
     const inputBox = getByLabelText(/Setting Name/i);
     fireEvent.focus(inputBox);
-    userEvent.clear(inputBox);
-    userEvent.type(inputBox, '3, 2, 1');
+    await user.clear(inputBox);
+    await user.type(inputBox, '3, 2, 1');
     await waitFor(() => {
       expect(inputBox).toHaveValue('3, 2, 1');
     });

src/advanced-settings/settings-sidebar/SettingsSidebar.jsx

@@ -1,28 +1,25 @@
+// @ts-check
 import React from 'react';
-import {
-  FormattedMessage,
-  injectIntl,
-  intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 
 import { HelpSidebar } from '../../generic/help-sidebar';
 import messages from './messages';
 
-const SettingsSidebar = ({ intl, courseId, proctoredExamSettingsUrl }) => (
+const SettingsSidebar = ({ courseId, proctoredExamSettingsUrl = '' }) => (
   <HelpSidebar
     courseId={courseId}
     proctoredExamSettingsUrl={proctoredExamSettingsUrl}
     showOtherSettings
   >
     <h4 className="help-sidebar-about-title">
-      {intl.formatMessage(messages.about)}
+      <FormattedMessage {...messages.about} />
     </h4>
     <p className="help-sidebar-about-descriptions">
-      {intl.formatMessage(messages.aboutDescription1)}
+      <FormattedMessage {...messages.aboutDescription1} />
     </p>
     <p className="help-sidebar-about-descriptions">
-      {intl.formatMessage(messages.aboutDescription2)}
+      <FormattedMessage {...messages.aboutDescription2} />
     </p>
     <p className="help-sidebar-about-descriptions">
       <FormattedMessage
@@ -34,14 +31,9 @@ const SettingsSidebar = ({ intl, courseId, proctoredExamSettingsUrl }) => (
   </HelpSidebar>
 );
 
-SettingsSidebar.defaultProps = {
-  proctoredExamSettingsUrl: '',
-};
-
 SettingsSidebar.propTypes = {
-  intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
   proctoredExamSettingsUrl: PropTypes.string,
 };
 
-export default injectIntl(SettingsSidebar);
+export default SettingsSidebar;

src/advanced-settings/settings-sidebar/SettingsSidebar.test.jsx

@@ -1,43 +1,21 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import initializeStore from '../../store';
+// @ts-check
+import { initializeMocks, render } from '../../testUtils';
 import SettingsSidebar from './SettingsSidebar';
 import messages from './messages';
 
 const courseId = 'course-123';
-let store;
-
-const RootWrapper = () => (
-  <AppProvider store={store}>
-    <IntlProvider locale="en" messages={{}}>
-      <SettingsSidebar intl={{ formatMessage: jest.fn() }} courseId={courseId} />
-    </IntlProvider>
-  </AppProvider>
-);
 
 describe('<SettingsSidebar />', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
+    initializeMocks();
   });
   it('renders about and other sidebar titles correctly', () => {
-    const { getByText } = render(<RootWrapper />);
+    const { getByText } = render(<SettingsSidebar courseId={courseId} />);
     expect(getByText(messages.about.defaultMessage)).toBeInTheDocument();
     expect(getByText(messages.other.defaultMessage)).toBeInTheDocument();
   });
   it('renders about descriptions correctly', () => {
-    const { getByText } = render(<RootWrapper />);
+    const { getByText } = render(<SettingsSidebar courseId={courseId} />);
     const aboutThirtyDescription = getByText('When you enter strings as policy values, ensure that you use double quotation marks (“) around the string. Do not use single quotation marks (‘).');
     expect(getByText(messages.aboutDescription1.defaultMessage)).toBeInTheDocument();
     expect(getByText(messages.aboutDescription2.defaultMessage)).toBeInTheDocument();

src/assets/scss/_form.scss

@@ -1,14 +1,14 @@
 .form-group-custom {
   .pgn__form-label {
-    font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
-    color: $gray-500;
+    font: normal var(--pgn-typography-font-weight-bold) .75rem/1.25rem var(--pgn-typography-font-family-base);
+    color: var(--pgn-color-gray-500);
     margin-bottom: .5rem;
   }
 
   .pgn__form-control-description,
   .pgn__form-text {
-    font: normal $font-weight-normal .75rem/1.25rem $font-family-base;
-    color: $gray-500;
+    font: normal var(--pgn-typography-font-weight-normal) .75rem/1.25rem var(--pgn-typography-font-family-base);
+    color: var(--pgn-color-gray-500);
     margin-top: .5rem;
   }
 
@@ -19,12 +19,12 @@
 
   .form-group-custom_isInvalid {
     input {
-      border-color: $form-feedback-invalid-color;
+      border-color: var(--pgn-color-form-feedback-invalid);
     }
   }
 
   .feedback-error {
-    color: $form-feedback-invalid-color;
+    color: var(--pgn-color-form-feedback-invalid);
   }
 }
 
@@ -34,40 +34,40 @@
   .datepicker-custom-control {
     display: block;
     width: 100%;
-    font-size: $input-font-size;
-    font-weight: $input-font-weight;
-    line-height: $input-line-height;
-    background: $input-bg;
-    border-color: $input-border-color;
-    border-width: $input-border-width;
-    box-shadow: $input-box-shadow;
-    border-radius: $input-border-radius;
-    color: $input-color;
-    padding: $input-padding-y $input-padding-x;
-    height: $input-height;
+    font-size: var(--pgn-typography-form-input-font-size-base);
+    font-weight: var(--pgn-typography-form-input-font-weight);
+    line-height: var(--pgn-typography-form-input-line-height-base);
+    background: var(--pgn-color-form-input-bg-base);
+    border-color: var(--pgn-color-form-input-border);
+    border-width: var(--pgn-size-form-input-width-border);
+    box-shadow: var(--pgn-elevation-form-input-base);
+    border-radius: var(--pgn-size-form-input-radius-border-base);
+    color: var(--pgn-color-form-input-base);
+    padding: var(--pgn-spacing-form-input-padding-y-base) var(--pgn-spacing-form-input-padding-x-base);
+    height: var(--pgn-size-form-input-height-base);
     resize: none;
 
     &:focus,
     :focus-visible {
-      color: $input-focus-color;
-      background-color: $input-bg;
-      border-color: $input-focus-border-color;
-      box-shadow: $input-focus-box-shadow;
+      color: var(--pgn-color-form-input-focus-base);
+      background-color: var(--pgn-color-form-input-bg-base);
+      border-color: var(--pgn-color-form-input-focus-border);
+      box-shadow: var(--pgn-elevation-form-input-focus);
       outline: 0;
     }
 
     &::placeholder {
-      color: $input-placeholder-color;
+      color: var(--pgn-color-form-input-placeholder);
     }
   }
 
   .datepicker-custom-control_readonly {
     border-color: transparent;
-    background: $input-disabled-bg;
+    background: var(--pgn-color-form-input-bg-disabled);
   }
 
   .datepicker-custom-control_isInvalid {
-    border-color: $form-feedback-invalid-color;
+    border-color: var(--pgn-color-form-feedback-invalid);
   }
 
   .datepicker-custom-control-icon {
@@ -76,7 +76,7 @@
     right: 1.188rem;
     top: 50%;
     transform: translateY(-50%);
-    color: $black;
+    color: var(--pgn-color-black);
   }
 }
 

src/assets/scss/_utilities.scss

@@ -1,5 +1,5 @@
 .text-black {
-  color: $black;
+  color: var(--pgn-color-black);
 }
 
 .h-200px {

src/assets/scss/_variables.scss

@@ -1,2 +1,2 @@
-$text-color-base: $gray-700;
+$text-color-base: var(--pgn-color-gray-700);
 $text-color-weak: #3E3E3C;

src/certificates/Certificates.test.jsx

@@ -1,14 +1,9 @@
-import { render, waitFor } from '@testing-library/react';
+// @ts-check
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-import MockAdapter from 'axios-mock-adapter';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
+import { initializeMocks, render, waitFor } from '../testUtils';
 import { RequestStatus } from '../data/constants';
 import { executeThunk } from '../utils';
-import initializeStore from '../store';
 import { getCertificatesApiUrl } from './data/api';
 import { fetchCertificates } from './data/thunks';
 import { certificatesDataMock } from './__mocks__';
@@ -19,26 +14,13 @@ let axiosMock;
 let store;
 const courseId = 'course-123';
 
-const renderComponent = (props) => render(
-  <AppProvider store={store} messages={{}}>
-    <IntlProvider locale="en">
-      <Certificates courseId={courseId} {...props} />
-    </IntlProvider>
-  </AppProvider>,
-);
+const renderComponent = (props) => render(<Certificates courseId={courseId} {...props} />);
 
 describe('Certificates', () => {
   beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    const mocks = initializeMocks();
+    store = mocks.reduxStore;
+    axiosMock = mocks.axiosMock;
   });
 
   it('renders WithoutModes when there are certificates but no certificate modes', async () => {
@@ -129,11 +111,13 @@ describe('Certificates', () => {
       .reply(200, noCertificatesMock);
     await executeThunk(fetchCertificates(courseId), store.dispatch);
 
+    const user = userEvent.setup();
+
     const { queryByTestId, getByTestId, getByRole } = renderComponent();
 
-    await waitFor(() => {
+    await waitFor(async () => {
       const addCertificateButton = getByRole('button', { name: messages.setupCertificateBtn.defaultMessage });
-      userEvent.click(addCertificateButton);
+      await user.click(addCertificateButton);
     });
 
     expect(getByTestId('certificates-create-form')).toBeInTheDocument();
@@ -149,11 +133,13 @@ describe('Certificates', () => {
       .reply(200, certificatesDataMock);
     await executeThunk(fetchCertificates(courseId), store.dispatch);
 
+    const user = userEvent.setup();
+
     const { queryByTestId, getByTestId, getAllByLabelText } = renderComponent();
 
-    await waitFor(() => {
+    await waitFor(async () => {
       const editCertificateButton = getAllByLabelText(messages.editTooltip.defaultMessage)[0];
-      userEvent.click(editCertificateButton);
+      await user.click(editCertificateButton);
     });
 
     expect(getByTestId('certificates-edit-form')).toBeInTheDocument();

src/certificates/certificate-create-form/CertificatesCreateForm.test.jsx

@@ -1,4 +1,6 @@
-import { render, waitFor, within } from '@testing-library/react';
+import {
+  render, waitFor, within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Provider } from 'react-redux';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -85,17 +87,19 @@ describe('CertificateCreateForm', () => {
       }],
     };
 
+    const user = userEvent.setup();
+
     const { getByPlaceholderText, getByRole, getByDisplayValue } = renderComponent();
 
-    userEvent.type(
+    await user.type(
       getByPlaceholderText(detailsMessages.detailsCourseTitleOverride.defaultMessage),
       courseTitleOverrideValue,
     );
-    userEvent.type(
+    await user.type(
       getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage),
       signatoryNameValue,
     );
-    userEvent.click(getByRole('button', { name: messages.cardCreate.defaultMessage }));
+    await user.click(getByRole('button', { name: messages.cardCreate.defaultMessage }));
 
     axiosMock.onPost(
       getCertificateApiUrl(courseId),
@@ -109,8 +113,9 @@ describe('CertificateCreateForm', () => {
   });
 
   it('cancel certificates creation', async () => {
+    const user = userEvent.setup();
     const { getByRole } = renderComponent();
-    userEvent.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
+    await user.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
 
     await waitFor(() => {
       expect(store.getState().certificates.componentMode).toBe(MODE_STATES.noCertificates);
@@ -127,13 +132,14 @@ describe('CertificateCreateForm', () => {
   });
 
   it('add and delete signatory', async () => {
+    const user = userEvent.setup();
     const {
       getAllByRole, queryAllByRole, getByText, getByRole,
     } = renderComponent();
 
     const addSignatoryBtn = getByText(signatoryMessages.addSignatoryButton.defaultMessage);
 
-    userEvent.click(addSignatoryBtn);
+    await user.click(addSignatoryBtn);
 
     const deleteIcons = getAllByRole('button', { name: messages.deleteTooltip.defaultMessage });
 
@@ -141,13 +147,13 @@ describe('CertificateCreateForm', () => {
       expect(deleteIcons.length).toBe(2);
     });
 
-    userEvent.click(deleteIcons[0]);
+    await user.click(deleteIcons[0]);
 
     const confirModal = getByRole('dialog');
     const deleteModalButton = within(confirModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage });
 
-    userEvent.click(deleteIcons[0]);
-    userEvent.click(deleteModalButton);
+    await user.click(deleteIcons[0]);
+    await user.click(deleteModalButton);
 
     await waitFor(() => {
       expect(queryAllByRole('button', { name: messages.deleteTooltip.defaultMessage }).length).toBe(0);

src/certificates/certificate-details/CertificateDetails.test.jsx

@@ -1,6 +1,6 @@
 import { Provider, useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { render, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
@@ -86,24 +86,24 @@ describe('CertificateDetails', () => {
     expect(getByText(defaultProps.detailsCourseTitle)).toBeInTheDocument();
   });
 
-  it('opens confirm modal on delete button click', () => {
+  it('opens confirm modal on delete button click', async () => {
+    const user = userEvent.setup();
     const { getByRole, getByText } = renderComponent(defaultProps);
     const deleteButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
-    userEvent.click(deleteButton);
+    await user.click(deleteButton);
 
     expect(getByText(messages.deleteCertificateConfirmationTitle.defaultMessage)).toBeInTheDocument();
   });
 
   it('dispatches delete action on confirm modal action', async () => {
+    const user = userEvent.setup();
     const props = { ...defaultProps, courseId, certificateId };
     const { getByRole } = renderComponent(props);
     const deleteButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
-    userEvent.click(deleteButton);
+    await user.click(deleteButton);
 
-    await waitFor(() => {
-      const confirmActionButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
-      userEvent.click(confirmActionButton);
-    });
+    const confirmActionButton = await screen.findByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+    await user.click(confirmActionButton);
 
     expect(mockDispatch).toHaveBeenCalledWith(deleteCourseCertificate(courseId, certificateId));
   });

src/certificates/certificate-details/CertificateDetailsForm.test.jsx

@@ -58,11 +58,12 @@ describe('CertificateDetails', () => {
   });
 
   it('handles input change in create mode', async () => {
+    const user = userEvent.setup();
     const { getByPlaceholderText } = renderComponent(defaultProps);
     const input = getByPlaceholderText(messages.detailsCourseTitleOverride.defaultMessage);
     const newInputValue = 'New Title';
 
-    userEvent.type(input, newInputValue);
+    await user.type(input, newInputValue);
 
     waitFor(() => {
       expect(input.value).toBe(newInputValue);

src/certificates/certificate-edit-form/CertificateEditForm.test.jsx

@@ -1,5 +1,7 @@
 import { Provider } from 'react-redux';
-import { render, waitFor, within } from '@testing-library/react';
+import {
+  render, waitFor, within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -68,15 +70,15 @@ describe('CertificateEditForm Component', () => {
         }],
       }],
     };
-
+    const user = userEvent.setup();
     const { getByDisplayValue, getByRole, getByPlaceholderText } = renderComponent();
 
-    userEvent.type(
+    await user.type(
       getByPlaceholderText(messagesDetails.detailsCourseTitleOverride.defaultMessage),
       courseTitleOverrideValue,
     );
 
-    userEvent.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
+    await user.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
 
     axiosMock.onPost(
       getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
@@ -91,16 +93,17 @@ describe('CertificateEditForm Component', () => {
   });
 
   it('deletes a certificate and updates the store', async () => {
+    const user = userEvent.setup();
     axiosMock.onDelete(
       getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
     ).reply(200);
 
     const { getByRole } = renderComponent();
 
-    userEvent.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+    await user.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
 
     const confirmDeleteModal = getByRole('dialog');
-    userEvent.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+    await user.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
 
     await executeThunk(deleteCourseCertificate(courseId, certificatesDataMock.certificates[0].id), store.dispatch);
 
@@ -110,16 +113,17 @@ describe('CertificateEditForm Component', () => {
   });
 
   it('updates loading status if delete fails', async () => {
+    const user = userEvent.setup();
     axiosMock.onDelete(
       getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
     ).reply(404);
 
     const { getByRole } = renderComponent();
 
-    userEvent.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+    await user.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
 
     const confirmDeleteModal = getByRole('dialog');
-    userEvent.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+    await user.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
 
     await executeThunk(deleteCourseCertificate(courseId, certificatesDataMock.certificates[0].id), store.dispatch);
 
@@ -129,11 +133,12 @@ describe('CertificateEditForm Component', () => {
   });
 
   it('cancel edit form', async () => {
+    const user = userEvent.setup();
     const { getByRole } = renderComponent();
 
     expect(store.getState().certificates.componentMode).toBe(MODE_STATES.editAll);
 
-    userEvent.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
+    await user.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
 
     expect(store.getState().certificates.componentMode).toBe(MODE_STATES.view);
   });

src/certificates/certificate-signatories/CertificateSignatories.test.jsx

@@ -88,20 +88,22 @@ describe('CertificateSignatories', () => {
     });
   });
 
-  it('adds a new signatory when add button is clicked', () => {
+  it('adds a new signatory when add button is clicked', async () => {
+    const user = userEvent.setup();
     const { getByText } = renderComponent({ ...defaultProps, isForm: true });
 
-    userEvent.click(getByText(messages.addSignatoryButton.defaultMessage));
+    await user.click(getByText(messages.addSignatoryButton.defaultMessage));
     expect(useCreateSignatory().handleAddSignatory).toHaveBeenCalled();
   });
 
   it('calls remove for the correct signatory when delete icon is clicked', async () => {
+    const user = userEvent.setup();
     const { getAllByRole } = renderComponent(defaultProps);
 
     const deleteIcons = getAllByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
     expect(deleteIcons.length).toBe(signatoriesMock.length);
 
-    userEvent.click(deleteIcons[0]);
+    await user.click(deleteIcons[0]);
 
     waitFor(() => {
       expect(mockArrayHelpers.remove).toHaveBeenCalledWith(0);

src/certificates/certificate-signatories/signatory/Signatory.test.jsx

@@ -34,11 +34,12 @@ describe('Signatory Component', () => {
     expect(queryByText(messages.namePlaceholder.defaultMessage)).not.toBeInTheDocument();
   });
 
-  it('calls handleEdit when the edit button is clicked', () => {
+  it('calls handleEdit when the edit button is clicked', async () => {
+    const user = userEvent.setup();
     const { getByRole } = renderSignatory(defaultProps);
 
     const editButton = getByRole('button', { name: commonMessages.editTooltip.defaultMessage });
-    userEvent.click(editButton);
+    await user.click(editButton);
 
     expect(mockHandleEdit).toHaveBeenCalled();
   });

src/certificates/certificate-signatories/signatory/SignatoryForm.test.jsx

@@ -60,12 +60,13 @@ describe('Signatory Component', () => {
   });
 
   it('handles input change', async () => {
+    const user = userEvent.setup();
     const handleChange = jest.fn();
     const { getByPlaceholderText } = renderSignatory({ ...defaultProps, handleChange });
     const input = getByPlaceholderText(messages.namePlaceholder.defaultMessage);
     const newInputValue = 'Jane Doe';
 
-    userEvent.type(input, newInputValue, { name: 'signatories[0].name' });
+    await user.type(input, newInputValue, { name: 'signatories[0].name' });
 
     waitFor(() => {
       expect(handleChange).toHaveBeenCalledWith(expect.anything());
@@ -73,7 +74,8 @@ describe('Signatory Component', () => {
     });
   });
 
-  it('opens image upload modal on button click', () => {
+  it('opens image upload modal on button click', async () => {
+    const user = userEvent.setup();
     const { getByRole, queryByRole } = renderSignatory(defaultProps);
     const replaceButton = getByRole(
       'button',
@@ -82,28 +84,30 @@ describe('Signatory Component', () => {
 
     expect(queryByRole('presentation')).not.toBeInTheDocument();
 
-    userEvent.click(replaceButton);
+    await user.click(replaceButton);
 
     expect(getByRole('presentation')).toBeInTheDocument();
   });
 
   it('shows confirm modal on delete icon click', async () => {
+    const user = userEvent.setup();
     const { getByLabelText, getByText } = renderSignatory(defaultProps);
     const deleteIcon = getByLabelText(commonMessages.deleteTooltip.defaultMessage);
 
-    userEvent.click(deleteIcon);
+    await user.click(deleteIcon);
 
     expect(getByText(messages.deleteSignatoryConfirmationMessage.defaultMessage)).toBeInTheDocument();
   });
 
-  it('cancels deletion of a signatory', () => {
+  it('cancels deletion of a signatory', async () => {
+    const user = userEvent.setup();
     const { getByRole } = renderSignatory(defaultProps);
 
     const deleteIcon = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
-    userEvent.click(deleteIcon);
+    await user.click(deleteIcon);
 
     const cancelButton = getByRole('button', { name: commonMessages.cardCancel.defaultMessage });
-    userEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     expect(defaultProps.handleDeleteSignatory).not.toHaveBeenCalled();
   });

src/certificates/certificates-list/CertificatesList.test.jsx

@@ -1,5 +1,7 @@
 import { Provider } from 'react-redux';
-import { render, waitFor, within } from '@testing-library/react';
+import {
+  render, waitFor, within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -62,6 +64,7 @@ describe('CertificatesList Component', () => {
   });
 
   it('update certificate', async () => {
+    const user = userEvent.setup();
     const {
       getByText, queryByText, getByPlaceholderText, getByRole, getAllByLabelText,
     } = renderComponent();
@@ -80,13 +83,13 @@ describe('CertificatesList Component', () => {
 
     const editButtons = getAllByLabelText(messages.editTooltip.defaultMessage);
 
-    userEvent.click(editButtons[1]);
+    await user.click(editButtons[1]);
 
     const nameInput = getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage);
-    userEvent.clear(nameInput);
-    userEvent.type(nameInput, signatoryNameValue);
+    await user.clear(nameInput);
+    await user.type(nameInput, signatoryNameValue);
 
-    userEvent.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
+    await user.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
 
     axiosMock
       .onPost(getUpdateCertificateApiUrl(courseId, certificatesMock.id))
@@ -100,6 +103,7 @@ describe('CertificatesList Component', () => {
   });
 
   it('toggle edit signatory', async () => {
+    const user = userEvent.setup();
     const {
       getAllByLabelText, queryByPlaceholderText, getByTestId, getByPlaceholderText,
     } = renderComponent();
@@ -107,13 +111,13 @@ describe('CertificatesList Component', () => {
 
     expect(editButtons.length).toBe(3);
 
-    userEvent.click(editButtons[1]);
+    await user.click(editButtons[1]);
 
     await waitFor(() => {
       expect(getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage)).toBeInTheDocument();
     });
 
-    userEvent.click(within(getByTestId('signatory-form')).getByRole('button', { name: messages.cardCancel.defaultMessage }));
+    await user.click(within(getByTestId('signatory-form')).getByRole('button', { name: messages.cardCancel.defaultMessage }));
 
     await waitFor(() => {
       expect(queryByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage)).not.toBeInTheDocument();
@@ -121,10 +125,11 @@ describe('CertificatesList Component', () => {
   });
 
   it('toggle certificate edit all', async () => {
+    const user = userEvent.setup();
     const { getByTestId } = renderComponent();
     const detailsSection = getByTestId('certificate-details');
     const editButton = within(detailsSection).getByLabelText(messages.editTooltip.defaultMessage);
-    userEvent.click(editButton);
+    await user.click(editButton);
 
     await waitFor(() => {
       expect(store.getState().certificates.componentMode).toBe(MODE_STATES.editAll);

src/certificates/constants.ts

@@ -1,6 +1,5 @@
 import { v4 as uuid } from 'uuid';
 
-// eslint-disable-next-line import/prefer-default-export
 export const defaultCertificate = {
   courseTitle: '',
   signatories: [{

src/certificates/data/api.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
@@ -36,7 +35,7 @@ export async function createCertificate(courseId, certificatesData) {
       getCertificateApiUrl(courseId),
       prepareCertificatePayload(certificatesData),
     );
-
+  /* istanbul ignore next */
   return camelCaseObject(data);
 }
 
@@ -52,6 +51,7 @@ export async function updateCertificate(courseId, certificateData) {
       getUpdateCertificateApiUrl(courseId, certificateData.id),
       prepareCertificatePayload(certificateData),
     );
+  /* istanbul ignore next */
   return camelCaseObject(data);
 }
 

src/certificates/data/slice.js

@@ -29,12 +29,11 @@ const slice = createSlice({
     fetchCertificatesSuccess: (state, { payload }) => {
       Object.assign(state.certificatesData, payload);
     },
-    createCertificateSuccess: (state, action) => {
+    createCertificateSuccess: /* istanbul ignore next */ (state, action) => {
       state.certificatesData.certificates.push(action.payload);
     },
-    updateCertificateSuccess: (state, action) => {
+    updateCertificateSuccess: /* istanbul ignore next */ (state, action) => {
       const index = state.certificatesData.certificates.findIndex(c => c.id === action.payload.id);
-
       if (index !== -1) {
         state.certificatesData.certificates[index] = action.payload;
       }

src/certificates/data/thunks.js

@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 import { RequestStatus } from '../../data/constants';
 import {
   hideProcessingNotification,

src/certificates/index.js

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

src/certificates/layout/certificates-sidebar/CertificatesSidebar.test.jsx

@@ -1,14 +1,9 @@
-import { render, waitFor } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import initializeStore from '../../../store';
+// @ts-check
 import CertificatesSidebar from './CertificatesSidebar';
 import messages from './messages';
+import { initializeMocks, render, waitFor } from '../../../testUtils';
 
 const courseId = 'course-123';
-let store;
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
@@ -17,25 +12,11 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   }),
 }));
 
-const renderComponent = (props) => render(
-  <AppProvider store={store} messages={{}}>
-    <IntlProvider locale="en">
-      <CertificatesSidebar courseId={courseId} {...props} />
-    </IntlProvider>
-  </AppProvider>,
-);
+const renderComponent = (props) => render(<CertificatesSidebar courseId={courseId} {...props} />);
 
 describe('CertificatesSidebar', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
+    initializeMocks();
   });
 
   it('renders correctly', async () => {

src/certificates/layout/certificates-sidebar/utils.jsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const getSidebarData = ({ messages, intl }) => [
   {
     title: intl.formatMessage(messages.workingWithCertificatesTitle),

src/certificates/layout/header-buttons/HeaderButtons.test.jsx

@@ -53,16 +53,17 @@ describe('HeaderButtons Component', () => {
   });
 
   it('updates preview URL param based on selected dropdown item', async () => {
+    const user = userEvent.setup();
     const { getByRole } = renderComponent();
     const previewLink = getByRole('link', { name: messages.headingActionsPreview.defaultMessage });
 
     expect(previewLink).toHaveAttribute('href', expect.stringContaining(certificatesDataMock.courseModes[0]));
 
     const dropdownButton = getByRole('button', { name: certificatesDataMock.courseModes[0] });
-    userEvent.click(dropdownButton);
+    await user.click(dropdownButton);
 
     const verifiedMode = await getByRole('button', { name: certificatesDataMock.courseModes[1] });
-    userEvent.click(verifiedMode);
+    await user.click(verifiedMode);
 
     await waitFor(() => {
       expect(previewLink).toHaveAttribute('href', expect.stringContaining(certificatesDataMock.courseModes[1]));
@@ -70,6 +71,7 @@ describe('HeaderButtons Component', () => {
   });
 
   it('activates certificate when button is clicked', async () => {
+    const user = userEvent.setup();
     const newCertificateData = {
       ...certificatesDataMock,
       isActive: true,
@@ -78,7 +80,7 @@ describe('HeaderButtons Component', () => {
     const { getByRole, queryByRole } = renderComponent();
 
     const activationButton = getByRole('button', { name: messages.headingActionsActivate.defaultMessage });
-    userEvent.click(activationButton);
+    await user.click(activationButton);
 
     axiosMock.onPost(
       getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
@@ -97,6 +99,7 @@ describe('HeaderButtons Component', () => {
   });
 
   it('deactivates certificate when button is clicked', async () => {
+    const user = userEvent.setup();
     axiosMock
       .onGet(getCertificatesApiUrl(courseId))
       .reply(200, { ...certificatesDataMock, isActive: true });
@@ -110,7 +113,7 @@ describe('HeaderButtons Component', () => {
     const { getByRole, queryByRole } = renderComponent();
 
     const deactivateButton = getByRole('button', { name: messages.headingActionsDeactivate.defaultMessage });
-    userEvent.click(deactivateButton);
+    await user.click(deactivateButton);
 
     axiosMock.onPost(
       getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),

src/certificates/scss/Certificates.scss

@@ -2,7 +2,7 @@
 
 .certificates {
   .section-title {
-    color: $black;
+    color: var(--pgn-color-black);
   }
 
   .sub-header-actions {
@@ -11,7 +11,7 @@
 
   .certificate-details {
     .certificate-details__info {
-      color: $black;
+      color: var(--pgn-color-black);
       justify-content: space-between;
       align-items: baseline;
     }
@@ -22,7 +22,7 @@
 
     .certificate-details__info-paragraph-course-number {
       flex: 1;
-      color: $gray-700;
+      color: var(--pgn-color-gray-700);
       text-align: right;
     }
   }
@@ -74,7 +74,7 @@
     }
   }
 
-  @media (max-width: map-get($grid-breakpoints, "xl")) {
+  @media (--pgn-size-breakpoint-max-width-xl) {
     .signatory {
       display: flex;
       flex-direction: column;

src/certificates/utils.js

@@ -1,6 +1,5 @@
 import { convertObjectToSnakeCase } from '../utils';
 
-// eslint-disable-next-line import/prefer-default-export
 export const prepareCertificatePayload = (data) => convertObjectToSnakeCase(({
   ...data,
   courseTitle: data.courseTitle,

src/constants.ts

@@ -27,6 +27,8 @@ export const NOTIFICATION_MESSAGES = {
   copying: 'Copying',
   pasting: 'Pasting',
   discardChanges: 'Discarding changes',
+  moving: 'Moving',
+  undoMoving: 'Undo moving',
   publishing: 'Publishing',
   hidingFromStudents: 'Hiding from students',
   makingVisibleToStudents: 'Making visible to students',
@@ -41,7 +43,7 @@ export const COURSE_CREATOR_STATES = {
   granted: 'granted',
   denied: 'denied',
   disallowedForThisSite: 'disallowed_for_this_site',
-};
+} as const;
 
 export const DECODED_ROUTES = {
   COURSE_UNIT: [
@@ -56,6 +58,8 @@ export const COURSE_BLOCK_NAMES = ({
   chapter: { id: 'chapter', name: 'Section' },
   sequential: { id: 'sequential', name: 'Subsection' },
   vertical: { id: 'vertical', name: 'Unit' },
+  libraryContent: { id: 'library_content', name: 'Library content' },
+  splitTest: { id: 'split_test', name: 'Split Test' },
   component: { id: 'component', name: 'Component' },
 });
 
@@ -74,3 +78,32 @@ export const REGEX_RULES = {
   specialCharsRule: /^[a-zA-Z0-9_\-.'*~\s]+$/,
   noSpaceRule: /^\S*$/,
 };
+
+/**
+ * Feature policy for iframe, allowing access to certain courseware-related media.
+ *
+ * We must use the wildcard (*) origin for each feature, as courseware content
+ * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
+ * block that iframes external course content.
+
+ * This policy was selected in conference with the edX Security Working Group.
+ * Changes to it should be vetted by them (security@edx.org).
+ */
+export const IFRAME_FEATURE_POLICY = (
+  'microphone *; camera *; midi *; geolocation *; encrypted-media *; clipboard-write *'
+);
+
+export const iframeStateKeys = {
+  iframeHeight: 'iframeHeight',
+  hasLoaded: 'hasLoaded',
+  showError: 'showError',
+  windowTopOffset: 'windowTopOffset',
+};
+
+export const iframeMessageTypes = {
+  modal: 'plugin.modal',
+  resize: 'plugin.resize',
+  videoFullScreen: 'plugin.videoFullScreen',
+  xblockEvent: 'xblock-event',
+  xblockScroll: 'xblock-scroll',
+};

src/content-tags-drawer/ContentTagsCollapsible.jsx

@@ -25,9 +25,9 @@ import TagsTree from './TagsTree';
 import { ContentTagsDrawerContext } from './common/context';
 
 /** @typedef {import("./ContentTagsCollapsible").TaxonomySelectProps} TaxonomySelectProps */
-/** @typedef {import("../taxonomy/data/types.mjs").TaxonomyData} TaxonomyData */
-/** @typedef {import("./data/types.mjs").Tag} ContentTagData */
-/** @typedef {import("./data/types.mjs").StagedTagData} StagedTagData */
+/** @typedef {import("../taxonomy/data/types.js").TaxonomyData} TaxonomyData */
+/** @typedef {import("./data/types.js").Tag} ContentTagData */
+/** @typedef {import("./data/types.js").StagedTagData} StagedTagData */
 
 /**
  * Custom Menu component for our Select box
@@ -112,7 +112,6 @@ const CustomLoadingIndicator = () => {
   return (
     <Spinner
       animation="border"
-      size="xl"
       screenReaderText={intl.formatMessage(messages.loadingMessage)}
     />
   );

src/content-tags-drawer/ContentTagsCollapsible.scss

@@ -38,7 +38,7 @@
 
 .add-tags-button:not([disabled]):hover {
   background-color: transparent;
-  color: $info-900 !important;
+  color: var(--pgn-color-info-900) !important;
 }
 
 .react-select-add-tags__control {

src/content-tags-drawer/ContentTagsCollapsible.test.jsx

@@ -508,6 +508,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should handle search term change', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const {
       getByText, getByRole, getByDisplayValue,
     } = await getComponent();
@@ -523,7 +524,7 @@ describe('<ContentTagsCollapsible />', () => {
     const searchTerm = 'memo';
 
     // Trigger a change in the search field
-    userEvent.type(searchField, searchTerm);
+    await user.type(searchField, searchTerm);
 
     await act(async () => {
       // Fast-forward time by 500 milliseconds (for the debounce delay)
@@ -535,14 +536,14 @@ describe('<ContentTagsCollapsible />', () => {
     expect(getByDisplayValue(searchTerm)).toBeInTheDocument();
 
     // Clear search
-    userEvent.clear(searchField);
+    fireEvent.change(searchField, { target: { value: '' } });
 
     // Check that the search term has been cleared
     expect(searchField).toHaveValue('');
   });
 
   it('should close dropdown selector when clicking away', async () => {
-    const { getByText, queryByText } = await getComponent();
+    const { container, getByText, queryByText } = await getComponent();
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
@@ -554,10 +555,9 @@ describe('<ContentTagsCollapsible />', () => {
     expect(queryByText('Tag 3')).toBeInTheDocument();
 
     // Simulate clicking outside the dropdown remove focus
-    userEvent.click(document.body);
-
-    // Simulate clicking outside the dropdown again to close it
-    userEvent.click(document.body);
+    const outsideElement = container.querySelector('.taxonomy-tags-count-chip');
+    const selectElement = container.querySelector('.react-select-add-tags__input');
+    fireEvent.blur(selectElement, { relatedTarget: outsideElement });
 
     // Wait for the dropdown selector for tags to close, Tag 3 is no longer on
     // the page
@@ -565,6 +565,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should test keyboard navigation of add tags widget', async () => {
+    const user = userEvent.setup({ delay: null });
     const {
       getByText,
       queryByText,
@@ -598,59 +599,61 @@ describe('<ContentTagsCollapsible />', () => {
      */
 
     // Press tab to focus on first element in dropdown, Tag 1 should be focused
-    userEvent.tab();
+    await user.keyboard('{Tab}');
+
     const dropdownTag1Div = queryAllByText('Tag 1')[1].closest('.dropdown-selector-tag-actions');
     expect(dropdownTag1Div).toHaveFocus();
 
     // Press right arrow to expand Tag 1, Tag 1.1 & Tag 1.2 should now be visible
-    userEvent.keyboard('{arrowright}');
+    await user.keyboard('{arrowright}');
     expect(queryAllByText('Tag 1.1').length).toBe(2);
     expect(queryByText('Tag 1.2')).toBeInTheDocument();
 
     // Press left arrow to collapse Tag 1, Tag 1.1 & Tag 1.2 should not be visible
-    userEvent.keyboard('{arrowleft}');
+    await user.keyboard('{arrowleft}');
     expect(queryAllByText('Tag 1.1').length).toBe(1);
     expect(queryByText('Tag 1.2')).not.toBeInTheDocument();
 
     // Press enter key to expand Tag 1, Tag 1.1 & Tag 1.2 should now be visible
-    userEvent.keyboard('{enter}');
+    await user.keyboard('{enter}');
     expect(queryAllByText('Tag 1.1').length).toBe(2);
     expect(queryByText('Tag 1.2')).toBeInTheDocument();
 
     // Press down arrow to navigate to Tag 1.1, it should be focused
-    userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
     const dropdownTag1pt1Div = queryAllByText('Tag 1.1')[1].closest('.dropdown-selector-tag-actions');
     expect(dropdownTag1pt1Div).toHaveFocus();
 
     // Press down arrow again to navigate to Tag 1.2, it should be fouced
-    userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
     const dropdownTag1pt2Div = queryAllByText('Tag 1.2')[0].closest('.dropdown-selector-tag-actions');
     expect(dropdownTag1pt2Div).toHaveFocus();
 
     // Press down arrow again to navigate to Tag 2, it should be fouced
-    userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
     const dropdownTag2Div = queryAllByText('Tag 2')[1].closest('.dropdown-selector-tag-actions');
     expect(dropdownTag2Div).toHaveFocus();
 
     // Press up arrow to navigate back to Tag 1.2, it should be focused
-    userEvent.keyboard('{arrowup}');
+    await user.keyboard('{arrowup}');
     expect(dropdownTag1pt2Div).toHaveFocus();
 
     // Press up arrow to navigate back to Tag 1.1, it should be focused
-    userEvent.keyboard('{arrowup}');
+    await user.keyboard('{arrowup}');
     expect(dropdownTag1pt1Div).toHaveFocus();
 
     // Press up arrow again to navigate to Tag 1, it should be focused
-    userEvent.keyboard('{arrowup}');
+    await user.keyboard('{arrowup}');
     expect(dropdownTag1Div).toHaveFocus();
 
     // Press down arrow twice to navigate to Tag 1.2, it should be focsed
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
+    await user.keyboard('{arrowdown}');
     expect(dropdownTag1pt2Div).toHaveFocus();
 
     // Press space key to check Tag 1.2, it should be staged
-    userEvent.keyboard('{space}');
+    await user.keyboard('[Space]');
+
     const taxonomyId = 123;
     const addedStagedTag = {
       value: 'Tag%201,Tag%201.2',
@@ -659,35 +662,35 @@ describe('<ContentTagsCollapsible />', () => {
     expect(data.addStagedContentTag).toHaveBeenCalledWith(taxonomyId, addedStagedTag);
 
     // Press enter key again to uncheck Tag 1.2 (since it's a leaf), it should be unstaged
-    userEvent.keyboard('{enter}');
+    await user.keyboard('{enter}');
     const tagValue = 'Tag%201,Tag%201.2';
     expect(data.removeStagedContentTag).toHaveBeenCalledWith(taxonomyId, tagValue);
 
     // Press left arrow to navigate back to Tag 1, it should be focused
-    userEvent.keyboard('{arrowleft}');
+    await user.keyboard('{arrowleft}');
     expect(dropdownTag1Div).toHaveFocus();
 
     // Press tab key it should jump to cancel button, it should be focused
-    userEvent.tab();
+    await user.keyboard('{Tab}');
     const dropdownCancel = getByText(messages.collapsibleCancelStagedTagsButtonText.defaultMessage);
     expect(dropdownCancel).toHaveFocus();
 
     // Press tab again, it should exit and close the select menu, since there are not staged tags
-    userEvent.tab();
+    await user.keyboard('{Tab}');
     expect(queryByText('Tag 3')).not.toBeInTheDocument();
 
     // Press shift tab, focus back on select menu input, it should open the menu
-    userEvent.tab({ shift: true });
+    await user.tab({ shift: true });
     expect(queryByText('Tag 3')).toBeInTheDocument();
 
     // Press shift tab again, it should focus out and close the select menu
-    userEvent.tab({ shift: true });
+    await user.tab({ shift: true });
     expect(queryByText('Tag 3')).not.toBeInTheDocument();
 
     // Press tab again, the select menu should open, then press escape, it should close
-    userEvent.tab();
+    await user.keyboard('{Tab}');
     expect(queryByText('Tag 3')).toBeInTheDocument();
-    userEvent.keyboard('{escape}');
+    await user.keyboard('{escape}');
     expect(queryByText('Tag 3')).not.toBeInTheDocument();
   });
 
@@ -699,7 +702,7 @@ describe('<ContentTagsCollapsible />', () => {
     const xButtonAppliedTag = within(appliedTag).getByRole('button', {
       name: /delete/i,
     });
-    xButtonAppliedTag.click();
+    fireEvent.click(xButtonAppliedTag);
 
     // Check that the applied tag has been removed
     expect(appliedTag).not.toBeInTheDocument();

src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx

@@ -6,11 +6,11 @@ import { cloneDeep } from 'lodash';
 import { useContentTaxonomyTagsUpdater } from './data/apiHooks';
 import { ContentTagsDrawerContext } from './common/context';
 
-/** @typedef {import("../taxonomy/data/types.mjs").TaxonomyData} TaxonomyData */
-/** @typedef {import("./data/types.mjs").Tag} ContentTagData */
+/** @typedef {import("../taxonomy/data/types.js").TaxonomyData} TaxonomyData */
+/** @typedef {import("./data/types.js").Tag} ContentTagData */
 /** @typedef {import("./ContentTagsCollapsible").TagTreeEntry} TagTreeEntry */
-/** @typedef {import("./data/types.mjs").StagedTagData} StagedTagData */
-/** @typedef {import("./data/types.mjs").UpdateTagsData} UpdateTagsData */
+/** @typedef {import("./data/types.js").StagedTagData} StagedTagData */
+/** @typedef {import("./data/types.js").UpdateTagsData} UpdateTagsData */
 
 /**
  * Util function that sorts the keys of a tree in alphabetical order.

src/content-tags-drawer/ContentTagsDrawer.scss

@@ -16,7 +16,7 @@
 
   .tags-drawer-cancel-button:hover {
     background-color: transparent;
-    color: $gray-300 !important;
+    color: var(--pgn-color-gray-300) !important;
   }
 
   .other-description {
@@ -25,7 +25,7 @@
 
   .enable-taxonomies-button:not([disabled]):hover {
     background-color: transparent;
-    color: $info-900 !important;
+    color: var(--pgn-color-info-900) !important;
   }
 }
 

src/content-tags-drawer/ContentTagsDrawer.test.jsx

@@ -1,5 +1,4 @@
 import {
-  act,
   fireEvent,
   initializeMocks,
   render,
@@ -18,10 +17,11 @@ import {
 } from './data/api.mocks';
 import { getContentTaxonomyTagsApiUrl } from './data/api';
 
-const path = '/content/:contentId/*';
+const path = '/content/:contentId?/*';
 const mockOnClose = jest.fn();
 const mockSetBlockingSheet = jest.fn();
 const mockNavigate = jest.fn();
+const mockSidebarAction = jest.fn();
 mockContentTaxonomyTagsData.applyMock();
 mockTaxonomyListData.applyMock();
 mockTaxonomyTagsData.applyMock();
@@ -34,6 +34,7 @@ const {
   languageWithoutTagsId,
   largeTagsId,
   emptyTagsId,
+  containerTagsId,
 } = mockContentTaxonomyTagsData;
 
 jest.mock('react-router-dom', () => ({
@@ -41,14 +42,20 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockNavigate,
 }));
 
-const renderDrawer = (contentId, drawerParams = {}) => (
-  render(
+jest.mock('../library-authoring/common/context/SidebarContext', () => ({
+  ...jest.requireActual('../library-authoring/common/context/SidebarContext'),
+  useSidebarContext: () => ({ sidebarAction: mockSidebarAction() }),
+}));
+
+const renderDrawer = (contentId, drawerParams = {}, renderPath = path, containerId = '') => {
+  const params = { contentId, containerId };
+  return render(
     <ContentTagsDrawerSheetContext.Provider value={drawerParams}>
       <ContentTagsDrawer {...drawerParams} />
     </ContentTagsDrawerSheetContext.Provider>,
-    { path, params: { contentId } },
-  )
-);
+    { path: renderPath, params },
+  );
+};
 
 describe('<ContentTagsDrawer />', () => {
   beforeEach(async () => {
@@ -61,19 +68,15 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows spinner before the content data query is complete', async () => {
-    await act(async () => {
-      renderDrawer(stagedTagsId);
-      const spinner = screen.getAllByRole('status')[0];
-      expect(spinner.textContent).toEqual('Loading'); // Uses <Spinner />
-    });
+    renderDrawer(stagedTagsId);
+    const spinner = (await screen.findAllByRole('status'))[0];
+    expect(spinner.textContent).toEqual('Loading'); // Uses <Spinner />
   });
 
   it('shows spinner before the taxonomy tags query is complete', async () => {
-    await act(async () => {
-      renderDrawer(stagedTagsId);
-      const spinner = screen.getAllByRole('status')[1];
-      expect(spinner.textContent).toEqual('Loading...'); // Uses <Loading />
-    });
+    renderDrawer(stagedTagsId);
+    const spinner = (await screen.findAllByRole('status'))[1];
+    expect(spinner.textContent).toEqual('Loading...'); // Uses <Loading />
   });
 
   it('shows the content display name after the query is complete in drawer variant', async () => {
@@ -98,15 +101,12 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows the taxonomies data including tag numbers after the query is complete', async () => {
-    await act(async () => {
-      const { container } = renderDrawer(largeTagsId);
-      await waitFor(() => { expect(screen.getByText('Taxonomy 1')).toBeInTheDocument(); });
-      expect(screen.getByText('Taxonomy 1')).toBeInTheDocument();
-      expect(screen.getByText('Taxonomy 2')).toBeInTheDocument();
-      const tagCountBadges = container.getElementsByClassName('taxonomy-tags-count-chip');
-      expect(tagCountBadges[0].textContent).toBe('3');
-      expect(tagCountBadges[1].textContent).toBe('2');
-    });
+    const { container } = renderDrawer(largeTagsId);
+    await screen.findByText('Taxonomy 1');
+    await screen.findByText('Taxonomy 2');
+    const tagCountBadges = container.getElementsByClassName('taxonomy-tags-count-chip');
+    expect(tagCountBadges[0].textContent).toBe('3');
+    expect(tagCountBadges[1].textContent).toBe('2');
   });
 
   it('should be read only on first render on drawer variant', async () => {
@@ -192,6 +192,26 @@ describe('<ContentTagsDrawer />', () => {
     expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
   });
 
+  it('should change to edit mode sidebar action is set to JumpToManageTags', async () => {
+    mockSidebarAction.mockReturnValueOnce('jump-to-manage-tags');
+    renderDrawer(stagedTagsId, { variant: 'component' });
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // Show delete tag buttons
+    expect(screen.getAllByRole('button', {
+      name: /delete/i,
+    }).length).toBe(2);
+
+    // Show add a tag select
+    expect(screen.getByText(/add a tag/i)).toBeInTheDocument();
+
+    // Show cancel button
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+
+    // Show save button
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+  });
+
   it('should change to read mode when click on `Cancel` on drawer variant', async () => {
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
@@ -674,6 +694,42 @@ describe('<ContentTagsDrawer />', () => {
     await waitFor(() => expect(axiosMock.history.put[0].url).toEqual(url));
   });
 
+  [
+    'lct:org:lib:unit:1',
+    'lib-collection:org:lib:1',
+    'lb:org:lib:html:1',
+  ].forEach((containerId) => {
+    it(`should invalidate children query when update child tag when containerId is ${containerId}`, async () => {
+      const newPath = '/container/:containerId/';
+      const { axiosMock, queryClient } = initializeMocks();
+      const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
+      const url = getContentTaxonomyTagsApiUrl(containerTagsId);
+      axiosMock.onPut(url).reply(200);
+      renderDrawer(containerTagsId, { id: containerTagsId }, newPath, containerId);
+      expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+      const editTagsButton = screen.getByRole('button', {
+        name: /edit tags/i,
+      });
+      fireEvent.click(editTagsButton);
+
+      const saveButton = screen.getByRole('button', {
+        name: /save/i,
+      });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => expect(axiosMock.history.put[0].url).toEqual(url));
+      expect(mockInvalidateQueries).toHaveBeenCalledTimes(5);
+      expect(mockInvalidateQueries).toHaveBeenNthCalledWith(5, [
+        'contentLibrary',
+        'lib:org:lib',
+        'content',
+        'container',
+        containerId,
+        'children',
+      ]);
+    });
+  });
+
   it('should taxonomies must be ordered', async () => {
     renderDrawer(largeTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();

src/content-tags-drawer/ContentTagsDrawer.tsx

@@ -12,8 +12,9 @@ import classNames from 'classnames';
 import messages from './messages';
 import ContentTagsCollapsible from './ContentTagsCollapsible';
 import Loading from '../generic/Loading';
-import useContentTagsDrawerContext from './ContentTagsDrawerHelper';
+import { useCreateContentTagsDrawerContext } from './ContentTagsDrawerHelper';
 import { ContentTagsDrawerContext, ContentTagsDrawerSheetContext } from './common/context';
+import { SidebarActions, useSidebarContext } from '../library-authoring/common/context/SidebarContext';
 
 interface TaxonomyListProps {
   contentId: string;
@@ -88,7 +89,6 @@ const ContentTagsDrawerTitle = () => {
           <div className="d-flex justify-content-center align-items-center flex-column">
             <Spinner
               animation="border"
-              size="xl"
               screenReaderText={intl.formatMessage(messages.loadingMessage)}
             />
           </div>
@@ -148,7 +148,6 @@ const ContentTagsDrawerVariantFooter = ({ onClose, readOnly }: ContentTagsDrawer
           : (
             <Spinner
               animation="border"
-              size="xl"
               screenReaderText={intl.formatMessage(messages.loadingMessage)}
             />
           )}
@@ -196,7 +195,6 @@ const ContentTagsComponentVariantFooter = ({ readOnly = false }: ContentTagsComp
             <div className="d-flex justify-content-center">
               <Spinner
                 animation="border"
-                size="xl"
                 screenReaderText={intl.formatMessage(messages.loadingMessage)}
               />
             </div>
@@ -227,7 +225,6 @@ interface ContentTagsDrawerProps {
  * It is used both in interfaces of this MFE and in edx-platform interfaces such as iframe.
  * - If you want to use it as an iframe, the component obtains the `contentId` from the url parameters.
  *   Functions to close the drawer are handled internally.
- *   TODO: We can delete this method when is no longer used on edx-platform.
  * - If you want to use it as react component, you need to pass the content id and the close functions
  *   through the component parameters.
  */
@@ -245,8 +242,9 @@ const ContentTagsDrawer = ({
   if (contentId === undefined) {
     throw new Error('Error: contentId cannot be null.');
   }
+  const { sidebarAction } = useSidebarContext();
 
-  const context = useContentTagsDrawerContext(contentId, !readOnly);
+  const context = useCreateContentTagsDrawerContext(contentId, !readOnly, variant === 'drawer');
   const { blockingSheet } = useContext(ContentTagsDrawerSheetContext);
 
   const {
@@ -261,6 +259,7 @@ const ContentTagsDrawer = ({
     closeToast,
     setCollapsibleToInitalState,
     otherTaxonomies,
+    toEditMode,
   } = context;
 
   let onCloseDrawer: () => void;
@@ -303,8 +302,13 @@ const ContentTagsDrawer = ({
 
   // First call of the initial collapsible states
   React.useEffect(() => {
-    setCollapsibleToInitalState();
-  }, [isTaxonomyListLoaded, isContentTaxonomyTagsLoaded]);
+    // Open tag edit mode when sidebarAction is JumpToManageTags
+    if (sidebarAction === SidebarActions.JumpToManageTags) {
+      toEditMode();
+    } else {
+      setCollapsibleToInitalState();
+    }
+  }, [isTaxonomyListLoaded, isContentTaxonomyTagsLoaded, sidebarAction, toEditMode]);
 
   const renderFooter = () => {
     if (isTaxonomyListLoaded && isContentTaxonomyTagsLoaded) {

src/content-tags-drawer/ContentTagsDrawerHelper.jsx

@@ -8,46 +8,23 @@ import { extractOrgFromContentId, languageExportId } from './utils';
 import messages from './messages';
 import { ContentTagsDrawerSheetContext } from './common/context';
 
-/** @typedef {import("./data/types.mjs").Tag} ContentTagData */
-/** @typedef {import("./data/types.mjs").StagedTagData} StagedTagData */
-/** @typedef {import("./data/types.mjs").TagsInTaxonomy} TagsInTaxonomy */
+/** @typedef {import("./data/types.js").Tag} ContentTagData */
+/** @typedef {import("./data/types.js").StagedTagData} StagedTagData */
+/** @typedef {import("./data/types.js").TagsInTaxonomy} TagsInTaxonomy */
+/** @typedef {import("./common/context").ContentTagsDrawerContextData} ContentTagsDrawerContextData */
 
 /**
- * Handles the context and all the underlying logic for the ContentTagsDrawer component
+ * Helper hook for *creating* a `ContentTagsDrawerContext`.
+ * Handles the context and all the underlying logic for the ContentTagsDrawer component.
+ *
+ * To *use* the context, just use `useContext(ContentTagsDrawerContext)`
  * @param {string} contentId
  * @param {boolean} canTagObject
- * @returns {{
- *     stagedContentTags: Record<number, StagedTagData[]>,
- *     addStagedContentTag: (taxonomyId: number, addedTag: StagedTagData) => void,
- *     removeStagedContentTag: (taxonomyId: number, tagValue: string) => void,
- *     removeGlobalStagedContentTag: (taxonomyId: number, tagValue: string) => void,
- *     addRemovedContentTag: (taxonomyId: number, tagValue: string) => void,
- *     deleteRemovedContentTag: (taxonomyId: number, tagValue: string) => void,
- *     setStagedTags: (taxonomyId: number, tagsList: StagedTagData[]) => void,
- *     globalStagedContentTags: Record<number, StagedTagData[]>,
- *     globalStagedRemovedContentTags: Record<number, string>,
- *     setGlobalStagedContentTags: Function,
- *     commitGlobalStagedTags: () => void,
- *     commitGlobalStagedTagsStatus: string,
- *     isContentDataLoaded: boolean,
- *     isContentTaxonomyTagsLoaded: boolean,
- *     isTaxonomyListLoaded: boolean,
- *     contentName: string,
- *     tagsByTaxonomy: TagsInTaxonomy[],
- *     isEditMode: boolean,
- *     toEditMode: () => void,
- *     toReadMode: () => void,
- *     collapsibleStates: Record<number, boolean>,
- *     openCollapsible: (taxonomyId: number) => void,
- *     closeCollapsible: (taxonomyId: number) => void,
- *     toastMessage: string | undefined,
- *     showToastAfterSave: () => void,
- *     closeToast: () => void,
- *     setCollapsibleToInitalState: () => void,
- *     otherTaxonomies: TagsInTaxonomy[],
- * }}
+ * @param {boolean} fetchMetadata=false If true, fetches metadata for the contentId. This is used on `edx-platform`
+ * and the Course/Unit Outline to show the content name as the drawer title.
+ * @returns {ContentTagsDrawerContextData}
  */
-const useContentTagsDrawerContext = (contentId, canTagObject) => {
+export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetchMetadata = false) => {
   const intl = useIntl();
   const org = extractOrgFromContentId(contentId);
 
@@ -73,7 +50,7 @@ const useContentTagsDrawerContext = (contentId, canTagObject) => {
   const updateTags = useContentTaxonomyTagsUpdater(contentId);
 
   // Fetch from database
-  const { data: contentData, isSuccess: isContentDataLoaded } = useContentData(contentId);
+  const { data: contentData, isSuccess: isContentDataLoaded } = useContentData(contentId, fetchMetadata);
   const {
     data: contentTaxonomyTagsData,
     isSuccess: isContentTaxonomyTagsLoaded,
@@ -465,5 +442,3 @@ const useContentTagsDrawerContext = (contentId, canTagObject) => {
     otherTaxonomies,
   };
 };
-
-export default useContentTagsDrawerContext;

src/content-tags-drawer/ContentTagsDropDownSelector.jsx

@@ -234,7 +234,6 @@ const ContentTagsDropDownSelector = ({
         <div className="d-flex justify-content-center align-items-center flex-row">
           <Spinner
             animation="border"
-            size="xl"
             screenReaderText={intl.formatMessage(messages.loadingTagsDropdownMessage)}
           />
         </div>

src/content-tags-drawer/ContentTagsDropDownSelector.scss

@@ -7,7 +7,7 @@
 
   &:hover {
     background-color: transparent;
-    color: $info-900 !important;
+    color: var(--pgn-color-info-900) !important;
   }
 }
 
@@ -19,7 +19,8 @@
   // In the future, this customizability should be implemented in paragon instead
   input.pgn__form-checkbox-input {
     &:indeterminate {
-      @extend :checked; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+      border-color: var(--pgn-color-form-control-indicator-checked-border-base);
+      background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-base);
     }
   }
 }
@@ -34,6 +35,6 @@
 }
 
 .dropdown-selector-tag-actions:focus-visible {
-  outline: solid 2px $info-900;
+  outline: solid 2px var(--pgn-color-info-900);
   border-radius: 4px;
 }

src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
-  act,
   render,
   waitFor,
   fireEvent,
@@ -74,11 +73,9 @@ describe('<ContentTagsDropDownSelector />', () => {
   }
 
   it('should render taxonomy tags drop down selector loading with spinner', async () => {
-    await act(async () => {
-      const { getByRole } = await getComponent();
-      const spinner = getByRole('status');
-      expect(spinner.textContent).toEqual('Loading tags'); // Uses <Spinner />
-    });
+    const { getByRole } = await getComponent();
+    const spinner = getByRole('status');
+    expect(spinner.textContent).toEqual('Loading tags'); // Uses <Spinner />
   });
 
   it('should render taxonomy tags drop down selector with no sub tags', async () => {
@@ -99,13 +96,11 @@ describe('<ContentTagsDropDownSelector />', () => {
       },
     });
 
-    await act(async () => {
-      const { container, getByText } = await getComponent();
+    const { container, getByText } = await getComponent();
 
-      await waitFor(() => {
-        expect(getByText('Tag 1')).toBeInTheDocument();
-        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(0);
-      });
+    await waitFor(() => {
+      expect(getByText('Tag 1')).toBeInTheDocument();
+      expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(0);
     });
   });
 
@@ -127,13 +122,11 @@ describe('<ContentTagsDropDownSelector />', () => {
       },
     });
 
-    await act(async () => {
-      const { container, getByText } = await getComponent();
+    const { container, getByText } = await getComponent();
 
-      await waitFor(() => {
-        expect(getByText('Tag 2')).toBeInTheDocument();
-        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
-      });
+    await waitFor(() => {
+      expect(getByText('Tag 2')).toBeInTheDocument();
+      expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
     });
   });
 
@@ -155,47 +148,45 @@ describe('<ContentTagsDropDownSelector />', () => {
       },
     });
 
-    await act(async () => {
-      const dataWithTagsTree = {
-        ...data,
-        tagsTree: {
-          'Tag 3': {
-            explicit: false,
-            children: {},
-          },
+    const dataWithTagsTree = {
+      ...data,
+      tagsTree: {
+        'Tag 3': {
+          explicit: false,
+          children: {},
         },
-      };
-      const { container, getByText } = await getComponent(dataWithTagsTree);
-      await waitFor(() => {
-        expect(getByText('Tag 2')).toBeInTheDocument();
-        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
-      });
+      },
+    };
+    const { container, getByText } = await getComponent(dataWithTagsTree);
+    await waitFor(() => {
+      expect(getByText('Tag 2')).toBeInTheDocument();
+      expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
+    });
 
-      // Mock useTaxonomyTagsData again since it gets called in the recursive call
-      useTaxonomyTagsData.mockReturnValueOnce({
-        hasMorePages: false,
-        tagPages: {
-          isLoading: false,
-          isError: false,
-          data: [{
-            value: 'Tag 3',
-            externalId: null,
-            childCount: 0,
-            depth: 1,
-            parentValue: 'Tag 2',
-            id: 12346,
-            subTagsUrl: null,
-          }],
-        },
-      });
+    // Mock useTaxonomyTagsData again since it gets called in the recursive call
+    useTaxonomyTagsData.mockReturnValueOnce({
+      hasMorePages: false,
+      tagPages: {
+        isLoading: false,
+        isError: false,
+        data: [{
+          value: 'Tag 3',
+          externalId: null,
+          childCount: 0,
+          depth: 1,
+          parentValue: 'Tag 2',
+          id: 12346,
+          subTagsUrl: null,
+        }],
+      },
+    });
 
-      // Expand the dropdown to see the subtags selectors
-      const expandToggle = container.querySelector('.taxonomy-tags-arrow-drop-down span');
-      fireEvent.click(expandToggle);
+    // Expand the dropdown to see the subtags selectors
+    const expandToggle = container.querySelector('.taxonomy-tags-arrow-drop-down span');
+    fireEvent.click(expandToggle);
 
-      await waitFor(() => {
-        expect(getByText('Tag 3')).toBeInTheDocument();
-      });
+    await waitFor(() => {
+      expect(getByText('Tag 3')).toBeInTheDocument();
     });
   });
 
@@ -219,48 +210,46 @@ describe('<ContentTagsDropDownSelector />', () => {
     });
 
     const initalSearchTerm = 'test 1';
-    await act(async () => {
-      const { rerender } = await getComponent({ ...data, searchTerm: initalSearchTerm });
+    const { rerender } = await getComponent({ ...data, searchTerm: initalSearchTerm });
 
-      await waitFor(() => {
-        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, initalSearchTerm);
-      });
+    await waitFor(() => {
+      expect(useTaxonomyTagsData).toHaveBeenCalledWith(data.taxonomyId, null, 1, initalSearchTerm);
+    });
 
-      const updatedSearchTerm = 'test 2';
-      rerender(<ContentTagsDropDownSelectorComponent
-        key={`selector-${data.taxonomyId}`}
-        taxonomyId={data.taxonomyId}
-        level={data.level}
-        tagsTree={data.tagsTree}
-        searchTerm={updatedSearchTerm}
-        appliedContentTagsTree={{}}
-        stagedContentTagsTree={{}}
-      />);
+    const updatedSearchTerm = 'test 2';
+    rerender(<ContentTagsDropDownSelectorComponent
+      key={`selector-${data.taxonomyId}`}
+      taxonomyId={data.taxonomyId}
+      level={data.level}
+      tagsTree={data.tagsTree}
+      searchTerm={updatedSearchTerm}
+      appliedContentTagsTree={{}}
+      stagedContentTagsTree={{}}
+    />);
 
-      await waitFor(() => {
-        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, updatedSearchTerm);
-      });
+    await waitFor(() => {
+      expect(useTaxonomyTagsData).toHaveBeenCalledWith(data.taxonomyId, null, 1, updatedSearchTerm);
+    });
 
-      // Clean search term
-      const cleanSearchTerm = '';
-      rerender(<ContentTagsDropDownSelectorComponent
-        key={`selector-${data.taxonomyId}`}
-        taxonomyId={data.taxonomyId}
-        level={data.level}
-        tagsTree={data.tagsTree}
-        searchTerm={cleanSearchTerm}
-        appliedContentTagsTree={{}}
-        stagedContentTagsTree={{}}
-      />);
+    // Clean search term
+    const cleanSearchTerm = '';
+    rerender(<ContentTagsDropDownSelectorComponent
+      key={`selector-${data.taxonomyId}`}
+      taxonomyId={data.taxonomyId}
+      level={data.level}
+      tagsTree={data.tagsTree}
+      searchTerm={cleanSearchTerm}
+      appliedContentTagsTree={{}}
+      stagedContentTagsTree={{}}
+    />);
 
-      await waitFor(() => {
-        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, cleanSearchTerm);
-      });
+    await waitFor(() => {
+      expect(useTaxonomyTagsData).toHaveBeenCalledWith(data.taxonomyId, null, 1, cleanSearchTerm);
     });
   });
 
   it('should render "noTag" message if search doesnt return taxonomies', async () => {
-    useTaxonomyTagsData.mockReturnValueOnce({
+    useTaxonomyTagsData.mockReturnValue({
       hasMorePages: false,
       tagPages: {
         isLoading: false,
@@ -271,20 +260,18 @@ describe('<ContentTagsDropDownSelector />', () => {
     });
 
     const searchTerm = 'uncommon search term';
-    await act(async () => {
-      const { getByText } = await getComponent({ ...data, searchTerm });
+    const { getByText } = await getComponent({ ...data, searchTerm });
 
-      await waitFor(() => {
-        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, searchTerm);
-      });
-
-      const message = `No tags found with the search term "${searchTerm}"`;
-      expect(getByText(message)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(useTaxonomyTagsData).toHaveBeenCalledWith(data.taxonomyId, null, 1, searchTerm);
     });
+
+    const message = `No tags found with the search term "${searchTerm}"`;
+    expect(getByText(message)).toBeInTheDocument();
   });
 
   it('should render "noTagsInTaxonomy" message if taxonomy is empty', async () => {
-    useTaxonomyTagsData.mockReturnValueOnce({
+    useTaxonomyTagsData.mockReturnValue({
       hasMorePages: false,
       tagPages: {
         isLoading: false,
@@ -295,15 +282,13 @@ describe('<ContentTagsDropDownSelector />', () => {
     });
 
     const searchTerm = '';
-    await act(async () => {
-      const { getByText } = await getComponent({ ...data, searchTerm });
+    const { getByText } = await getComponent({ ...data, searchTerm });
 
-      await waitFor(() => {
-        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, searchTerm);
-      });
-
-      const message = 'No tags in this taxonomy yet';
-      expect(getByText(message)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(useTaxonomyTagsData).toHaveBeenCalledWith(data.taxonomyId, null, 1, searchTerm);
     });
+
+    const message = 'No tags in this taxonomy yet';
+    expect(getByText(message)).toBeInTheDocument();
   });
 });

src/content-tags-drawer/TagsTree.scss

@@ -9,13 +9,13 @@
 
     &:hover {
       svg {
-        color: $gray-900;
+        color: var(--pgn-color-gray-900);
       }
     }
 
     &:focus-visible {
       border: 2px solid;
-      border-color: $gray-900;
+      border-color: var(--pgn-color-gray-900);
     }
   }
 }

src/content-tags-drawer/common/context.js

@@ -1,49 +0,0 @@
-// @ts-check
-/* eslint-disable import/prefer-default-export */
-import React from 'react';
-
-/** @typedef {import("../data/types.mjs").TagsInTaxonomy} TagsInTaxonomy */
-/** @typedef {import("../data/types.mjs").StagedTagData} StagedTagData */
-
-/* istanbul ignore next */
-export const ContentTagsDrawerContext = React.createContext({
-  stagedContentTags: /** @type{Record<number, StagedTagData[]>} */ ({}),
-  globalStagedContentTags: /** @type{Record<number, StagedTagData[]>} */ ({}),
-  globalStagedRemovedContentTags: /** @type{Record<number, string>} */ ({}),
-  addStagedContentTag: /** @type{(taxonomyId: number, addedTag: StagedTagData) => void} */ (() => {}),
-  removeStagedContentTag: /** @type{(taxonomyId: number, tagValue: string) => void} */ (() => {}),
-  removeGlobalStagedContentTag: /** @type{(taxonomyId: number, tagValue: string) => void} */ (() => {}),
-  addRemovedContentTag: /** @type{(taxonomyId: number, tagValue: string) => void} */ (() => {}),
-  deleteRemovedContentTag: /** @type{(taxonomyId: number, tagValue: string) => void} */ (() => {}),
-  setStagedTags: /** @type{(taxonomyId: number, tagsList: StagedTagData[]) => void} */ (() => {}),
-  setGlobalStagedContentTags: /** @type{Function} */ (() => {}),
-  commitGlobalStagedTags: /** @type{() => void} */ (() => {}),
-  commitGlobalStagedTagsStatus: /** @type{null|string} */ (null),
-  isContentDataLoaded: /** @type{boolean} */ (false),
-  isContentTaxonomyTagsLoaded: /** @type{boolean} */ (false),
-  isTaxonomyListLoaded: /** @type{boolean} */ (false),
-  contentName: /** @type{string} */ (''),
-  tagsByTaxonomy: /** @type{TagsInTaxonomy[]} */ ([]),
-  isEditMode: /** @type{boolean} */ (false),
-  toEditMode: /** @type{() => void} */ (() => {}),
-  toReadMode: /** @type{() => void} */ (() => {}),
-  collapsibleStates: /** @type{Record<number, boolean>} */ ({}),
-  openCollapsible: /** @type{(taxonomyId: number) => void} */ (() => {}),
-  closeCollapsible: /** @type{(taxonomyId: number) => void} */ (() => {}),
-  toastMessage: /** @type{string|undefined} */ (undefined),
-  showToastAfterSave: /** @type{() => void} */ (() => {}),
-  closeToast: /** @type{() => void} */ (() => {}),
-  setCollapsibleToInitalState: /** @type{() => void} */ (() => {}),
-  otherTaxonomies: /** @type{TagsInTaxonomy[]} */ ([]),
-});
-
-// This context has not been added to ContentTagsDrawerContext because it has been
-// created one level higher to control the behavior of the Sheet that contatins the Drawer.
-// This logic is not used in legacy edx-platform screens. But it can be separated if we keep
-// the contexts separate.
-// TODO We can join both contexts when the Drawer is no longer used on edx-platform
-/* istanbul ignore next */
-export const ContentTagsDrawerSheetContext = React.createContext({
-  blockingSheet: /** @type{boolean} */ (false),
-  setBlockingSheet: /** @type{Function} */ (() => {}),
-});

src/content-tags-drawer/common/context.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import type { TagsInTaxonomy, StagedTagData } from '../data/types';
+
+export interface ContentTagsDrawerContextData {
+  stagedContentTags: Record<number, StagedTagData[]>;
+  globalStagedContentTags: Record<number, StagedTagData[]>;
+  globalStagedRemovedContentTags: Record<number, string>;
+  addStagedContentTag: (taxonomyId: number, addedTag: StagedTagData) => void;
+  removeStagedContentTag: (taxonomyId: number, tagValue: string) => void;
+  removeGlobalStagedContentTag: (taxonomyId: number, tagValue: string) => void;
+  addRemovedContentTag: (taxonomyId: number, tagValue: string) => void;
+  deleteRemovedContentTag: (taxonomyId: number, tagValue: string) => void;
+  setStagedTags: (taxonomyId: number, tagsList: StagedTagData[]) => void;
+  setGlobalStagedContentTags: Function;
+  commitGlobalStagedTags: () => void;
+  commitGlobalStagedTagsStatus: null | string;
+  isContentDataLoaded: boolean;
+  isContentTaxonomyTagsLoaded: boolean;
+  isTaxonomyListLoaded: boolean;
+  contentName: string;
+  tagsByTaxonomy: TagsInTaxonomy[];
+  isEditMode: boolean;
+  toEditMode: () => void;
+  toReadMode: () => void;
+  collapsibleStates: Record<number, boolean>;
+  openCollapsible: (taxonomyId: number) => void;
+  closeCollapsible: (taxonomyId: number) => void;
+  toastMessage: string | undefined;
+  showToastAfterSave: () => void;
+  closeToast: () => void;
+  setCollapsibleToInitalState: () => void;
+  otherTaxonomies: TagsInTaxonomy[];
+}
+
+/* istanbul ignore next */
+export const ContentTagsDrawerContext = React.createContext<ContentTagsDrawerContextData>({
+  stagedContentTags: {},
+  globalStagedContentTags: {},
+  globalStagedRemovedContentTags: {},
+  addStagedContentTag: () => {},
+  removeStagedContentTag: () => {},
+  removeGlobalStagedContentTag: () => {},
+  addRemovedContentTag: () => {},
+  deleteRemovedContentTag: () => {},
+  setStagedTags: () => {},
+  setGlobalStagedContentTags: () => {},
+  commitGlobalStagedTags: () => {},
+  commitGlobalStagedTagsStatus: null,
+  isContentDataLoaded: false,
+  isContentTaxonomyTagsLoaded: false,
+  isTaxonomyListLoaded: false,
+  contentName: '',
+  tagsByTaxonomy: [],
+  isEditMode: false,
+  toEditMode: () => {},
+  toReadMode: () => {},
+  collapsibleStates: {},
+  openCollapsible: () => {},
+  closeCollapsible: () => {},
+  toastMessage: undefined,
+  showToastAfterSave: () => {},
+  closeToast: () => {},
+  setCollapsibleToInitalState: () => {},
+  otherTaxonomies: [],
+});
+
+// This context has not been added to ContentTagsDrawerContext because it has been
+// created one level higher to control the behavior of the Sheet that contatins the Drawer.
+// This logic is not used in legacy edx-platform screens. But it can be separated if we keep
+// the contexts separate.
+// TODO We can join both contexts when the Drawer is no longer used on edx-platform
+/* istanbul ignore next */
+export const ContentTagsDrawerSheetContext = React.createContext({
+  blockingSheet: false,
+  setBlockingSheet: (() => {}) as (blockingSheet: boolean) => void,
+});

src/content-tags-drawer/data/api.js

@@ -38,7 +38,7 @@ export const getContentTaxonomyTagsCountApiUrl = (contentId) => new URL(`api/con
  * Get all tags that belong to taxonomy.
  * @param {number} taxonomyId The id of the taxonomy to fetch tags for
  * @param {{page?: number, searchTerm?: string, parentTag?: string}} options
- * @returns {Promise<import("../../taxonomy/tag-list/data/types.mjs").TagListData>}
+ * @returns {Promise<import("../../taxonomy/data/types.js").TagListData>}
  */
 export async function getTaxonomyTagsData(taxonomyId, options = {}) {
   const url = getTaxonomyTagsApiUrl(taxonomyId, options);
@@ -49,7 +49,7 @@ export async function getTaxonomyTagsData(taxonomyId, options = {}) {
 /**
  * Get the tags that are applied to the content object
  * @param {string} contentId The id of the content object to fetch the applied tags for
- * @returns {Promise<import("./types.mjs").ContentTaxonomyTagsData>}
+ * @returns {Promise<import("./types.js").ContentTaxonomyTagsData>}
  */
 export async function getContentTaxonomyTagsData(contentId) {
   const { data } = await getAuthenticatedHttpClient().get(getContentTaxonomyTagsApiUrl(contentId));
@@ -70,17 +70,12 @@ export async function getContentTaxonomyTagsCount(contentId) {
 }
 
 /**
- * Fetch meta data (eg: display_name) about the content object (unit/compoenent)
+ * Fetch meta data (eg: display_name) about the content object (unit/component)
  * @param {string} contentId The id of the content object (unit/component)
- * @returns {Promise<import("./types.mjs").ContentData | null>}
+ * @returns {Promise<import("./types.js").ContentData>}
  */
 export async function getContentData(contentId) {
   let url;
-  if (contentId.startsWith('lib-collection:')) {
-    // This type of usage_key is not used to obtain collections
-    // is only used in tagging.
-    return null;
-  }
 
   if (contentId.startsWith('lb:')) {
     url = getLibraryContentDataApiUrl(contentId);
@@ -96,8 +91,8 @@ export async function getContentData(contentId) {
 /**
  * Update content object's applied tags
  * @param {string} contentId The id of the content object (unit/component)
- * @param {Promise<import("./types.mjs").UpdateTagsData[]>} tagsData The list of tags (values) to set on content object
- * @returns {Promise<import("./types.mjs").ContentTaxonomyTagsData>}
+ * @param {Promise<import("./types.js").UpdateTagsData[]>} tagsData The list of tags (values) to set on content object
+ * @returns {Promise<import("./types.js").ContentTaxonomyTagsData>}
  */
 export async function updateContentTaxonomyTags(contentId, tagsData) {
   const url = getContentTaxonomyTagsApiUrl(contentId);

src/content-tags-drawer/data/api.mocks.ts

@@ -13,6 +13,7 @@ export async function mockContentTaxonomyTagsData(contentId: string): Promise<an
     case thisMock.languageWithTagsId: return thisMock.languageWithTags;
     case thisMock.languageWithoutTagsId: return thisMock.languageWithoutTags;
     case thisMock.largeTagsId: return thisMock.largeTags;
+    case thisMock.containerTagsId: return thisMock.largeTags;
     case thisMock.emptyTagsId: return thisMock.emptyTags;
     default: throw new Error(`No mock has been set up for contentId "${contentId}"`);
   }
@@ -204,6 +205,7 @@ mockContentTaxonomyTagsData.emptyTagsId = 'block-v1:EmptyTagsOrg+STC1+2023_1+typ
 mockContentTaxonomyTagsData.emptyTags = {
   taxonomies: [],
 };
+mockContentTaxonomyTagsData.containerTagsId = 'lct:StagedTagsOrg:lib:unit:container_tags';
 mockContentTaxonomyTagsData.applyMock = () => jest.spyOn(api, 'getContentTaxonomyTagsData').mockImplementation(mockContentTaxonomyTagsData);
 
 /**