fix: do not reload multiple tabs on block save (backport #2600) (#2704)

This handles loading errors when opening the course unit page via direct link as an unauthorized user.

Co-authored-by: Ihor Romaniuk <ihor.romaniuk@raccoongang.com>

.env

@@ -36,17 +36,13 @@ ENABLE_ASSETS_PAGE=false
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=false
 ENABLE_TAGGING_TAXONOMY_PAGES=true
 ENABLE_CERTIFICATE_PAGE=true
-ENABLE_COURSE_IMPORT_IN_LIBRARY=false
 BBB_LEARN_MORE_URL=''
 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
 # "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=''
-ADMIN_CONSOLE_URL='http://localhost:2025/admin-console'

.env.development

@@ -37,7 +37,6 @@ ENABLE_UNIT_PAGE=false
 ENABLE_ASSETS_PAGE=false
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
 ENABLE_CERTIFICATE_PAGE=true
-ENABLE_COURSE_IMPORT_IN_LIBRARY=true
 ENABLE_NEW_VIDEO_UPLOAD_PAGE=true
 ENABLE_TAGGING_TAXONOMY_PAGES=true
 BBB_LEARN_MORE_URL=''
@@ -45,11 +44,8 @@ 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
 # "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=''
-ADMIN_CONSOLE_URL='http://localhost:2025/admin-console'

.env.test

@@ -33,13 +33,11 @@ ENABLE_UNIT_PAGE=true
 ENABLE_ASSETS_PAGE=false
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
 ENABLE_CERTIFICATE_PAGE=true
-ENABLE_COURSE_IMPORT_IN_LIBRARY=true
 ENABLE_TAGGING_TAXONOMY_PAGES=true
 BBB_LEARN_MORE_URL=''
 INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
+ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "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'

.eslintrc.js

@@ -14,15 +14,6 @@ module.exports = createConfig(
       'no-restricted-exports': 'off',
       // There is no reason to disallow this syntax anymore; we don't use regenerator-runtime in new browsers
       'no-restricted-syntax': 'off',
-      'no-restricted-imports': ['error', {
-        patterns: [
-          {
-            group: ['@edx/frontend-platform/i18n'],
-            importNames: ['injectIntl'],
-            message: "Use 'useIntl' hook instead of injectIntl.",
-          },
-        ],
-      }],
     },
     settings: {
       // Import URLs should be resolved using aliases

.github/pull_request_template.md

@@ -2,37 +2,26 @@
 
 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 user roles will this change impact? Common user roles are "Learner", "Course Author",
+- Which edX 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 GitHub issues, or Discourse discussions.
+Link to other information about the change, such as Jira issues, 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 manually testing this change.
+Please provide detailed step-by-step instructions for 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.
-
-## 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`).
-- [ ] Avoid `propTypes` and `defaultProps` 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.
-- [ ] Avoid using `../` in import paths. To import from parent folders, use `@src`, e.g. `import { initializeMocks } from '@src/testUtils';` instead of `from '../../../../testUtils'`
+- Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.

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

@@ -1,18 +0,0 @@
-# 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/add-to-cc-board.yml

@@ -1,15 +0,0 @@
-name: Trigger to add Issue or PR to a Core Contributor project board
-on:
-  issues:
-    types: [labeled]
-  pull_request:
-    types: [labeled]
-
-jobs:
-  add-to-cc-board:
-    if: github.event.label.name == 'Core Contributor assignee'
-    uses: openedx/.github/.github/workflows/add-to-cc-board.yml@master
-    with:
-      board_name: cc-frontend-apps
-    secrets:
-      projects_access_token: ${{ secrets.PROJECTS_TOKEN }}

.github/workflows/validate.yml

@@ -11,13 +11,13 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v5
-    - uses: actions/setup-node@v6
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
     - run: make validate.ci
     - name: Archive code coverage results
-      uses: actions/upload-artifact@v5
+      uses: actions/upload-artifact@v4
       with:
         name: code-coverage-report
         path: coverage/*.*
@@ -25,15 +25,13 @@ jobs:
     runs-on: ubuntu-latest
     needs: tests
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@v4
     - name: Download code coverage results
-      uses: actions/download-artifact@v6
+      uses: actions/download-artifact@v4
       with:
-        pattern: code-coverage-report
-        path: coverage
-        merge-multiple: true
+        name: code-coverage-report
     - name: Upload coverage
-      uses: codecov/codecov-action@v5
+      uses: codecov/codecov-action@v4
       with:
         fail_ci_if_error: true
         token: ${{ secrets.CODECOV_TOKEN }}

.nvmrc

@@ -1 +1 @@
-24
+20

CODEOWNERS

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

README.rst

@@ -165,7 +165,21 @@ Feature: New React XBlock Editors
 
 .. image:: ./docs/readme-images/feature-problem-editor.png
 
-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.
+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.
 
 Feature: New Proctoring Exams View
 ==================================
@@ -179,6 +193,10 @@ 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
@@ -203,6 +221,16 @@ 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
@@ -210,6 +238,16 @@ 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
@@ -217,11 +255,26 @@ 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
 ================================
 
@@ -327,20 +380,6 @@ 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

@@ -14,6 +14,6 @@ metadata:
     openedx.org/arch-interest-groups: ""
     openedx.org/release: "master"
 spec:
-  owner: user:bradenmacdonald
+  owner: group:2u-tnl
   type: 'website'
   lifecycle: 'production'

codecov.yml

@@ -11,5 +11,4 @@ coverage:
 ignore:
   - "src/grading-settings/grading-scale/react-ranger.js"
   - "src/generic/DraggableList/verticalSortableList.ts"
-  - "src/container-comparison/data/api.mock.ts"
   - "src/index.js"

jest.config.js

@@ -11,11 +11,9 @@ 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',
   ],
 });

package.json

@@ -11,10 +11,11 @@
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract --include=plugins",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "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",
@@ -33,8 +34,8 @@
   },
   "dependencies": {
     "@codemirror/lang-html": "^6.0.0",
-    "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/lang-xml": "^6.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/lint": "^6.2.1",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
@@ -43,12 +44,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.5.0",
-    "@edx/frontend-component-footer": "^14.9.0",
-    "@edx/frontend-component-header": "^8.1.0",
+    "@edx/browserslist-config": "1.2.0",
+    "@edx/frontend-component-footer": "^14.6.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",
+    "@edx/frontend-platform": "^8.3.1",
+    "@edx/openedx-atlas": "^0.6.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",
@@ -59,17 +60,17 @@
     "@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.6.2",
+    "@openedx/frontend-build": "^14.3.3",
     "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^23.5.0",
+    "@openedx/paragon": "^22.16.0",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
-    "@tanstack/react-query": "5.90.7",
-    "@tinymce/tinymce-react": "^6.0.0",
+    "@tanstack/react-query": "4.36.1",
+    "@tinymce/tinymce-react": "^3.14.0",
     "classnames": "2.5.1",
     "codemirror": "^6.0.0",
     "email-validator": "2.0.4",
-    "fast-xml-parser": "^5.0.0",
+    "fast-xml-parser": "^4.0.10",
     "file-saver": "^2.0.5",
     "formik": "2.4.6",
     "frontend-components-tinymce-advanced-plugins": "^1.0.3",
@@ -78,6 +79,7 @@
     "meilisearch": "^0.41.0",
     "moment": "2.30.1",
     "moment-shortformat": "^2.1.0",
+    "npm": "^10.8.1",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-datepicker": "^4.13.0",
@@ -87,31 +89,31 @@
     "react-onclickoutside": "^6.13.0",
     "react-redux": "7.2.9",
     "react-responsive": "9.0.2",
-    "react-router": "6.30.1",
-    "react-router-dom": "6.30.1",
-    "react-select": "5.10.2",
+    "react-router": "6.27.0",
+    "react-router-dom": "6.27.0",
+    "react-select": "5.8.0",
     "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "4.4.5",
-    "redux": "4.2.1",
+    "redux": "4.0.5",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.5",
+    "start": "^5.1.0",
     "tinymce": "^5.10.4",
-    "universal-cookie": "^8.0.0",
-    "uuid": "^11.1.0",
+    "universal-cookie": "^4.0.4",
+    "uuid": "^3.4.0",
     "xmlchecker": "^0.1.0",
-    "yup": "0.32.11"
+    "yup": "0.31.1"
   },
   "devDependencies": {
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/stylelint-config-edx": "2.3.3",
     "@edx/typescript-config": "^1.0.1",
     "@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",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/lodash": "^4.17.7",
+    "axios-mock-adapter": "1.22.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "fetch-mock-jest": "^1.5.1",
     "jest-canvas-mock": "^2.5.2",

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

@@ -2,12 +2,16 @@ import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 
 import { RequestStatus } from 'CourseAuthoring/data/constants';
-import { initializeMocks, render } from 'CourseAuthoring/testUtils';
+import { render } from 'CourseAuthoring/pages-and-resources/utils.test';
 import LearningAssistantSettings from './Settings';
 
 const onClose = () => { };
 
 describe('Learning Assistant Settings', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders', async () => {
     const initialState = {
       models: {
@@ -34,8 +38,14 @@ describe('Learning Assistant Settings', () => {
       },
     };
 
-    initializeMocks({ initialState });
-    render(<LearningAssistantSettings onClose={onClose} />);
+    render(
+      <LearningAssistantSettings
+        onClose={onClose}
+      />,
+      {
+        preloadedState: initialState,
+      },
+    );
 
     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.test.jsx

@@ -124,13 +124,12 @@ 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"]');
-    await user.selectOptions(
+    userEvent.selectOptions(
       dropDown,
       getByRole(dropDown, 'option', { name: 'Free' }),
     );

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

@@ -125,13 +125,10 @@ describe('ORASettings', () => {
   });
 
   it('Displays title, helper text and badge when flexible peer grading button is enabled', async () => {
-    await mockStore({ apiStatus: 200, enabled: true });
     renderComponent();
+    await mockStore({ apiStatus: 200, enabled: true });
 
-    const checkbox = await screen.getByRole('checkbox', { name: /Flex Peer Grading/ });
-    expect(checkbox).toBeChecked();
-
-    await waitFor(() => {
+    waitFor(() => {
       const label = screen.getByText(messages.enableFlexPeerGradeLabel.defaultMessage);
       const enableBadge = screen.getByTestId('enable-badge');
 

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

@@ -6,7 +6,7 @@ import MockAdapter from 'axios-mock-adapter';
 
 import { initializeMockApp, mergeConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import StudioApiService from 'CourseAuthoring/data/services/StudioApiService';
@@ -20,6 +20,7 @@ const defaultProps = {
   courseId,
   onClose: () => {},
 };
+const IntlProctoredExamSettings = injectIntl(ProctoredExamSettings);
 let store;
 
 const intlWrapper = children => (
@@ -101,7 +102,7 @@ describe('ProctoredExamSettings', () => {
 
   describe('Field dependencies', () => {
     beforeEach(async () => {
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
     });
 
     it('Updates Zendesk ticket field if proctortrack is provider', async () => {
@@ -151,7 +152,7 @@ describe('ProctoredExamSettings', () => {
         course_start_date: '2070-01-01T00:00:00Z',
       });
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       await waitFor(() => {
         screen.getByText('Proctored exams');
       });
@@ -224,7 +225,7 @@ describe('ProctoredExamSettings', () => {
         StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
       ).reply(200, {});
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
     });
 
     proctoringProvidersRequiringEscalationEmail.forEach(provider => {
@@ -408,7 +409,7 @@ describe('ProctoredExamSettings', () => {
       const isAdmin = false;
       setupApp(isAdmin);
       mockCourseData(mockGetPastCourseData);
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const providerOption = screen.getByTestId('proctortrack');
       expect(providerOption.hasAttribute('disabled')).toEqual(true);
     });
@@ -417,7 +418,7 @@ describe('ProctoredExamSettings', () => {
       const isAdmin = false;
       setupApp(isAdmin);
       mockCourseData(mockGetFutureCourseData);
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const providerOption = screen.getByTestId('proctortrack');
       expect(providerOption.hasAttribute('disabled')).toEqual(false);
     });
@@ -427,7 +428,7 @@ describe('ProctoredExamSettings', () => {
       const org = 'test-org';
       setupApp(isAdmin, org);
       mockCourseData(mockGetFutureCourseData);
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const providerOption = screen.getByTestId('proctortrack');
       expect(providerOption.hasAttribute('disabled')).toEqual(false);
     });
@@ -436,7 +437,7 @@ describe('ProctoredExamSettings', () => {
       const isAdmin = true;
       setupApp(isAdmin);
       mockCourseData(mockGetPastCourseData);
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const providerOption = screen.getByTestId('proctortrack');
       expect(providerOption.hasAttribute('disabled')).toEqual(false);
     });
@@ -445,7 +446,7 @@ describe('ProctoredExamSettings', () => {
       const isAdmin = true;
       setupApp(isAdmin);
       mockCourseData(mockGetFutureCourseData);
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const providerOption = screen.getByTestId('proctortrack');
       expect(providerOption.hasAttribute('disabled')).toEqual(false);
     });
@@ -456,7 +457,7 @@ describe('ProctoredExamSettings', () => {
         available_proctoring_providers: ['lti_external', 'proctortrack', 'mockproc'],
       };
       mockCourseData(courseData);
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       await waitFor(() => {
         screen.getByDisplayValue('mockproc');
       });
@@ -469,7 +470,7 @@ describe('ProctoredExamSettings', () => {
         available_proctoring_providers: ['lti_external', 'proctortrack', 'mockproc'],
       };
       mockCourseData(courseData);
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       await waitFor(() => {
         screen.getByDisplayValue('mockproc');
       });
@@ -482,7 +483,7 @@ describe('ProctoredExamSettings', () => {
       const isAdmin = true;
       setupApp(isAdmin);
       mockCourseData(mockGetFutureCourseData);
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       await waitFor(() => {
         screen.getByDisplayValue('mockproc');
       });
@@ -496,7 +497,7 @@ describe('ProctoredExamSettings', () => {
         EXAMS_BASE_URL: null,
       }, 'CourseAuthoringConfig');
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       await waitFor(() => {
         screen.getByDisplayValue('mockproc');
       });
@@ -515,7 +516,7 @@ describe('ProctoredExamSettings', () => {
       ).reply(200, {
         provider: 'test_lti',
       });
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       await waitFor(() => {
         screen.getByText('Proctoring provider');
       });
@@ -528,14 +529,14 @@ describe('ProctoredExamSettings', () => {
   describe('Toggles field visibility based on user permissions', () => {
     it('Hides opting out and zendesk tickets for non edX staff', async () => {
       setupApp(false);
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       expect(screen.queryByTestId('allowOptingOutYes')).toBeNull();
       expect(screen.queryByTestId('createZendeskTicketsYes')).toBeNull();
     });
 
     it('Shows opting out and zendesk tickets for edX staff', async () => {
       setupApp(true);
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       expect(screen.queryByTestId('allowOptingOutYes')).not.toBeNull();
       expect(screen.queryByTestId('createZendeskTicketsYes')).not.toBeNull();
     });
@@ -543,7 +544,7 @@ describe('ProctoredExamSettings', () => {
 
   describe('Connection states', () => {
     it('Shows the spinner before the connection is complete', async () => {
-      render(intlWrapper(<ProctoredExamSettings {...defaultProps} />));
+      render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />));
       const spinner = await screen.findByRole('status');
       expect(spinner.textContent).toEqual('Loading...');
     });
@@ -553,7 +554,7 @@ describe('ProctoredExamSettings', () => {
         StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
       ).reply(500);
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const connectionError = screen.getByTestId('connectionErrorAlert');
       expect(connectionError.textContent).toEqual(
         expect.stringContaining('We encountered a technical error when loading this page.'),
@@ -565,7 +566,7 @@ describe('ProctoredExamSettings', () => {
         `${ExamsApiService.getExamsBaseUrl()}/api/v1/providers`,
       ).reply(500);
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const connectionError = screen.getByTestId('connectionErrorAlert');
       expect(connectionError.textContent).toEqual(
         expect.stringContaining('We encountered a technical error when loading this page.'),
@@ -577,7 +578,7 @@ describe('ProctoredExamSettings', () => {
         StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
       ).reply(403);
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const permissionError = screen.getByTestId('permissionDeniedAlert');
       expect(permissionError.textContent).toEqual(
         expect.stringContaining('You are not authorized to view this page'),
@@ -596,7 +597,7 @@ describe('ProctoredExamSettings', () => {
     });
 
     it('Disable button while submitting', async () => {
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       let submitButton = screen.getByTestId('submissionButton');
       expect(screen.queryByTestId('saveInProgress')).toBeFalsy();
       fireEvent.click(submitButton);
@@ -606,7 +607,7 @@ describe('ProctoredExamSettings', () => {
     });
 
     it('Makes API call successfully with proctoring_escalation_email if proctortrack', async () => {
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       // Make a change to the provider to proctortrack and set the email
       const selectElement = screen.getByDisplayValue('mockproc');
       fireEvent.change(selectElement, { target: { value: 'proctortrack' } });
@@ -637,7 +638,7 @@ describe('ProctoredExamSettings', () => {
     });
 
     it('Makes API call successfully without proctoring_escalation_email if not proctortrack', async () => {
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
 
       // make sure we have not selected proctortrack as the proctoring provider
       expect(screen.getByDisplayValue('mockproc')).toBeDefined();
@@ -664,7 +665,7 @@ describe('ProctoredExamSettings', () => {
     });
 
     it('Successfully updates exam configuration and studio provider is set to "lti_external" for lti providers', async () => {
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       // Make a change to the provider to test_lti and set the email
       const selectElement = screen.getByDisplayValue('mockproc');
       fireEvent.change(selectElement, { target: { value: 'test_lti' } });
@@ -705,7 +706,7 @@ describe('ProctoredExamSettings', () => {
     });
 
     it('Sets exam service provider to null if a non-lti provider is selected', async () => {
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const submitButton = screen.getByTestId('submissionButton');
       fireEvent.click(submitButton);
       // update exam service config
@@ -749,7 +750,7 @@ describe('ProctoredExamSettings', () => {
         course_start_date: '2070-01-01T00:00:00Z',
       });
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const submitButton = screen.getByTestId('submissionButton');
       fireEvent.click(submitButton);
       // does not update exam service config
@@ -779,7 +780,7 @@ describe('ProctoredExamSettings', () => {
         StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
       ).reply(500);
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const submitButton = screen.getByTestId('submissionButton');
       fireEvent.click(submitButton);
       expect(axiosMock.history.post.length).toBe(1);
@@ -797,7 +798,7 @@ describe('ProctoredExamSettings', () => {
         `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
       ).reply(500, 'error');
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const submitButton = screen.getByTestId('submissionButton');
       fireEvent.click(submitButton);
       expect(axiosMock.history.post.length).toBe(1);
@@ -815,7 +816,7 @@ describe('ProctoredExamSettings', () => {
         `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
       ).reply(403, 'error');
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const submitButton = screen.getByTestId('submissionButton');
       fireEvent.click(submitButton);
       expect(axiosMock.history.post.length).toBe(1);
@@ -834,7 +835,7 @@ describe('ProctoredExamSettings', () => {
         StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
       ).reply(500);
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       const submitButton = screen.getByTestId('submissionButton');
       fireEvent.click(submitButton);
       expect(axiosMock.history.post.length).toBe(1);
@@ -867,7 +868,7 @@ describe('ProctoredExamSettings', () => {
       const isAdmin = false;
       setupApp(isAdmin);
 
-      await act(async () => render(intlWrapper(<ProctoredExamSettings {...defaultProps} />)));
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
       // Make a change to the proctoring provider
       const selectElement = screen.getByDisplayValue('mockproc');
       fireEvent.change(selectElement, { target: { value: 'proctortrack' } });

plugins/course-apps/proctoring/messages.js

@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  'authoring.proctoring.alert.error': {
+    id: 'authoring.proctoring.alert.error',
+    defaultMessage: 'We encountered a technical error while trying to save proctored exam settings. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {support_link} for help.',
+    description: 'Alert message for proctoring settings save error.',
+  },
   'authoring.proctoring.alert.forbidden': {
     id: 'authoring.proctoring.alert.forbidden',
     defaultMessage: 'You do not have permission to edit proctored exam settings for this course. If you are a course team member and this problem persists, please go to the {support_link} for help.',

plugins/course-apps/xpert_unit_summary/data/thunks.js

@@ -19,7 +19,7 @@ export function updateXpertSettings(courseId, state) {
       }
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
       return false;
-    } catch {
+    } catch (error) {
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
       return false;
     }
@@ -33,7 +33,7 @@ export function fetchXpertPluginConfigurable(courseId) {
     try {
       const { response } = await getXpertPluginConfigurable(courseId);
       enabled = response?.enabled;
-    } catch {
+    } catch (e) {
       enabled = undefined;
     }
 
@@ -55,7 +55,7 @@ export function fetchXpertSettings(courseId) {
     try {
       const { response } = await getXpertSettings(courseId);
       enabled = response?.enabled;
-    } catch {
+    } catch (e) {
       enabled = undefined;
     }
 
@@ -86,7 +86,7 @@ export function removeXpertSettings(courseId) {
       }
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
       return false;
-    } catch {
+    } catch (error) {
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
       return false;
     }
@@ -105,7 +105,7 @@ export function resetXpertSettings(courseId, state) {
       }
       dispatch(updateResetStatus({ status: RequestStatus.FAILED }));
       return false;
-    } catch {
+    } catch (error) {
       dispatch(updateResetStatus({ status: RequestStatus.FAILED }));
       return false;
     }

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

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

src/CourseAuthoringPage.jsx

@@ -7,7 +7,7 @@ import {
 } from 'react-router-dom';
 import { StudioFooterSlot } from '@edx/frontend-component-footer';
 import Header from './header';
-import { fetchCourseDetail } from './data/thunks';
+import { fetchCourseDetail, fetchWaffleFlags } from './data/thunks';
 import { useModel } from './generic/model-store';
 import NotFoundAlert from './generic/NotFoundAlert';
 import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
@@ -21,6 +21,7 @@ const CourseAuthoringPage = ({ courseId, children }) => {
 
   useEffect(() => {
     dispatch(fetchCourseDetail(courseId));
+    dispatch(fetchWaffleFlags(courseId));
   }, [courseId]);
 
   useEffect(() => {

src/CourseAuthoringPage.test.jsx

@@ -4,7 +4,7 @@ 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 { fetchCourseDetail, fetchWaffleFlags } from './data/thunks';
 import { getApiWaffleFlagsUrl } from './data/api';
 import { initializeMocks, render } from './testUtils';
 
@@ -26,6 +26,7 @@ beforeEach(async () => {
   axiosMock
     .onGet(getApiWaffleFlagsUrl(courseId))
     .reply(200, {});
+  await executeThunk(fetchWaffleFlags(courseId), store.dispatch);
 });
 
 describe('Editor Pages Load no header', () => {
@@ -101,20 +102,4 @@ describe('Course authoring page', () => {
     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

@@ -17,7 +17,7 @@ import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
 import CourseTeam from './course-team/CourseTeam';
 import { CourseUpdates } from './course-updates';
-import { CourseUnit, SubsectionUnitRedirect } from './course-unit';
+import { CourseUnit } from './course-unit';
 import { Certificates } from './certificates';
 import CourseExportPage from './export-page/CourseExportPage';
 import CourseOptimizerPage from './optimizer-page/CourseOptimizerPage';
@@ -82,10 +82,6 @@ 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}

src/CourseAuthoringRoutes.test.jsx

@@ -1,5 +1,7 @@
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
+import { executeThunk } from './utils';
 import { getApiWaffleFlagsUrl } from './data/api';
+import { fetchWaffleFlags } from './data/thunks';
 import {
   screen, initializeMocks, render, waitFor,
 } from './testUtils';
@@ -9,6 +11,7 @@ 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', () => ({
@@ -48,10 +51,12 @@ jest.mock('./custom-pages/CustomPages', () => (props) => {
 
 describe('<CourseAuthoringRoutes>', () => {
   beforeEach(async () => {
-    const { axiosMock } = initializeMocks();
+    const { axiosMock, reduxStore } = initializeMocks();
+    store = reduxStore;
     axiosMock
       .onGet(getApiWaffleFlagsUrl(courseId))
       .reply(200, {});
+    await executeThunk(fetchWaffleFlags(courseId), store.dispatch);
   });
 
   it('renders the PagesAndResources component when the pages and resources route is active', async () => {

src/__mocks__/clipboardSection.ts

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

src/__mocks__/index.js

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

src/accessibility-page/AccessibilityBody/AccessibilityBody.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { injectIntl, 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 AccessibilityBody;
+export default injectIntl(AccessibilityBody);

src/accessibility-page/AccessibilityForm/AccessibilityForm.jsx

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

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

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

src/accessibility-page/AccessibilityPage.jsx

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

src/accessibility-page/AccessibilityPage.test.jsx

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

src/accessibility-page/constants.ts

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

src/accessibility-page/data/thunks.js

@@ -10,11 +10,9 @@ 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, useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import Placeholder from '../editors/Placeholder';
 
 import AlertProctoringError from '../generic/AlertProctoringError';
@@ -26,8 +26,7 @@ import messages from './messages';
 import ModalError from './modal-error/ModalError';
 import getPageHeadTitle from '../generic/utils';
 
-const AdvancedSettings = ({ courseId }) => {
-  const intl = useIntl();
+const AdvancedSettings = ({ intl, courseId }) => {
   const dispatch = useDispatch();
   const [saveSettingsPrompt, showSaveSettingsPrompt] = useState(false);
   const [showDeprecated, setShowDeprecated] = useState(false);
@@ -279,7 +278,8 @@ const AdvancedSettings = ({ courseId }) => {
 };
 
 AdvancedSettings.propTypes = {
+  intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
 };
 
-export default AdvancedSettings;
+export default injectIntl(AdvancedSettings);

src/advanced-settings/AdvancedSettings.test.jsx

@@ -1,9 +1,12 @@
-import {
-  render as baseRender,
-  fireEvent,
-  initializeMocks,
-  waitFor,
-} from '../testUtils';
+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 { executeThunk } from '../utils';
 import { advancedSettingsMock } from './__mocks__';
 import { getCourseAdvancedSettingsApiUrl } from './data/api';
@@ -25,22 +28,39 @@ jest.mock('react-textarea-autosize', () => jest.fn((props) => (
   />
 )));
 
-const render = () => baseRender(
-  <AdvancedSettings courseId={courseId} />,
-  { path: mockPathname },
+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>
 );
 
 describe('<AdvancedSettings />', () => {
   beforeEach(() => {
-    const mocks = initializeMocks();
-    store = mocks.reduxStore;
-    axiosMock = mocks.axiosMock;
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock
       .onGet(`${getCourseAdvancedSettingsApiUrl(courseId)}?fetch_all=0`)
       .reply(200, advancedSettingsMock);
   });
   it('should render without errors', async () => {
-    const { getByText } = render();
+    const { getByText } = render(<RootWrapper />);
     await waitFor(() => {
       expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
       const advancedSettingsElement = getByText(messages.headingTitle.defaultMessage, {
@@ -52,7 +72,7 @@ describe('<AdvancedSettings />', () => {
     });
   });
   it('should render setting element', async () => {
-    const { getByText, queryByText } = render();
+    const { getByText, queryByText } = render(<RootWrapper />);
     await waitFor(() => {
       const advancedModuleListTitle = getByText(/Advanced Module List/i);
       expect(advancedModuleListTitle).toBeInTheDocument();
@@ -60,7 +80,7 @@ describe('<AdvancedSettings />', () => {
     });
   });
   it('should change to onСhange', async () => {
-    const { getByLabelText } = render();
+    const { getByLabelText } = render(<RootWrapper />);
     await waitFor(() => {
       const textarea = getByLabelText(/Advanced Module List/i);
       expect(textarea).toBeInTheDocument();
@@ -69,7 +89,7 @@ describe('<AdvancedSettings />', () => {
     });
   });
   it('should display a warning alert', async () => {
-    const { getByLabelText, getByText } = render();
+    const { getByLabelText, getByText } = render(<RootWrapper />);
     await waitFor(() => {
       const textarea = getByLabelText(/Advanced Module List/i);
       fireEvent.change(textarea, { target: { value: '[3, 2, 1]' } });
@@ -80,7 +100,7 @@ describe('<AdvancedSettings />', () => {
     });
   });
   it('should display a tooltip on clicking on the icon', async () => {
-    const { getByLabelText, getByText } = render();
+    const { getByLabelText, getByText } = render(<RootWrapper />);
     await waitFor(() => {
       const button = getByLabelText(/Show help text/i);
       fireEvent.click(button);
@@ -88,7 +108,7 @@ describe('<AdvancedSettings />', () => {
     });
   });
   it('should change deprecated button text ', async () => {
-    const { getByText } = render();
+    const { getByText } = render(<RootWrapper />);
     await waitFor(() => {
       const showDeprecatedItemsBtn = getByText(/Show Deprecated Settings/i);
       expect(showDeprecatedItemsBtn).toBeInTheDocument();
@@ -98,7 +118,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();
+    const { getByLabelText, getByText } = render(<RootWrapper />);
     let textarea;
     await waitFor(() => {
       textarea = getByLabelText(/Advanced Module List/i);
@@ -109,7 +129,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();
+    const { getByLabelText, getByText } = render(<RootWrapper />);
     let textarea;
     await waitFor(() => {
       textarea = getByLabelText(/Advanced Module List/i);
@@ -121,7 +141,7 @@ describe('<AdvancedSettings />', () => {
     expect(textarea.value).toBe('[3, 2, 1,');
   });
   it('should show success alert after save', async () => {
-    const { getByLabelText, getByText } = render();
+    const { getByLabelText, getByText } = render(<RootWrapper />);
     let textarea;
     await waitFor(() => {
       textarea = getByLabelText(/Advanced Module List/i);

src/advanced-settings/data/thunks.js

@@ -58,7 +58,7 @@ export function updateCourseAppSetting(courseId, settings) {
       try {
         const { customAttributes: { httpErrorResponseData } } = error;
         errorData = JSON.parse(httpErrorResponseData);
-      } catch {
+      } catch (err) {
         errorData = {};
       }
 
@@ -77,7 +77,7 @@ export function fetchProctoringExamErrors(courseId) {
       const settingValues = await getProctoringExamErrors(courseId);
       dispatch(fetchProctoringExamErrorsSuccess(settingValues));
       return true;
-    } catch {
+    } catch (error) {
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
       return false;
     }

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

@@ -1,57 +1,55 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ActionRow, AlertModal, Button } from '@openedx/paragon';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import ModalErrorListItem from './ModalErrorListItem';
 import messages from './messages';
 
 const ModalError = ({
-  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>
+  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>
     )}
-    >
-      <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> }}
+        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}
         />
-      </p>
-      <hr />
-      <ul className="p-0">
-        {errorList.map((settingName) => (
-          <ModalErrorListItem
-            key={settingName.key}
-            settingName={settingName}
-            settingsData={settingsData}
-          />
-        ))}
-      </ul>
-    </AlertModal>
-  );
-};
+      ))}
+    </ul>
+  </AlertModal>
+);
 
 ModalError.propTypes = {
+  intl: intlShape.isRequired,
   isError: PropTypes.bool.isRequired,
   handleUndoChanges: PropTypes.func.isRequired,
   showErrorModal: PropTypes.func.isRequired,
@@ -62,4 +60,4 @@ ModalError.propTypes = {
   settingsData: PropTypes.shape({}).isRequired,
 };
 
-export default ModalError;
+export default injectIntl(ModalError);

src/advanced-settings/scss/AdvancedSettings.scss

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

src/advanced-settings/scss/_variables.scss

@@ -1 +1 @@
-$text-color-base: var(--pgn-color-gray-700);
+$text-color-base: $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 { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import TextareaAutosize from 'react-textarea-autosize';
 
 import messages from './messages';
@@ -25,12 +25,13 @@ 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);
-  const [target, setTarget] = useState<HTMLButtonElement | null>(null);
+  const [target, setTarget] = useState(null);
   const [newValue, setNewValue] = useState(initialValue);
 
   const handleSettingChange = (e) => {
@@ -114,11 +115,12 @@ const SettingCard = ({
 };
 
 SettingCard.propTypes = {
+  intl: intlShape.isRequired,
   settingData: PropTypes.shape({
     deprecated: PropTypes.bool,
     help: PropTypes.string,
     displayName: PropTypes.string,
-    value: PropTypes.oneOfType([
+    value: PropTypes.PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.bool,
       PropTypes.number,
@@ -135,4 +137,4 @@ SettingCard.propTypes = {
   setIsEditableState: PropTypes.func.isRequired,
 };
 
-export default SettingCard;
+export default injectIntl(SettingCard);

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -21,12 +22,14 @@ jest.mock('react-textarea-autosize', () => jest.fn((props) => (
   <textarea
     {...props}
     onFocus={() => {}}
+    onBlur={() => {}}
   />
 )));
 
 const RootWrapper = () => (
   <IntlProvider locale="en">
     <SettingCard
+      intl={{}}
       isOn
       name="settingName"
       setEdited={setEdited}
@@ -55,6 +58,7 @@ describe('<SettingCard />', () => {
     const { getByText } = render(
       <IntlProvider locale="en">
         <SettingCard
+          intl={{}}
           isOn
           name="settingName"
           setEdited={setEdited}
@@ -75,19 +79,18 @@ 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);
-    await user.clear(inputBox);
-    await user.type(inputBox, '3, 2, 1');
+    userEvent.clear(inputBox);
+    userEvent.type(inputBox, '3, 2, 1');
     await waitFor(() => {
       expect(inputBox).toHaveValue('3, 2, 1');
     });
-    await user.tab(); // blur off of the input.
-    await waitFor(() => {
+    await (async () => {
       expect(setEdited).toHaveBeenCalled();
       expect(handleBlur).toHaveBeenCalled();
     });
+    fireEvent.focusOut(inputBox);
   });
 });

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

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

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

@@ -1,21 +1,43 @@
-// @ts-check
-import { initializeMocks, render } from '../../testUtils';
+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';
 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(() => {
-    initializeMocks();
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
   });
   it('renders about and other sidebar titles correctly', () => {
-    const { getByText } = render(<SettingsSidebar courseId={courseId} />);
+    const { getByText } = render(<RootWrapper />);
     expect(getByText(messages.about.defaultMessage)).toBeInTheDocument();
     expect(getByText(messages.other.defaultMessage)).toBeInTheDocument();
   });
   it('renders about descriptions correctly', () => {
-    const { getByText } = render(<SettingsSidebar courseId={courseId} />);
+    const { getByText } = render(<RootWrapper />);
     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/advanced-settings/utils.js

@@ -17,7 +17,7 @@ export default function validateAdvancedSettingsData(settingObj, setErrorFields,
   Object.entries(settingObj).forEach(([settingName, settingValue]) => {
     try {
       JSON.parse(settingValue);
-    } catch {
+    } catch (e) {
       let targetSettingValue = settingValue;
       const firstNonWhite = settingValue.substring(0, 1);
       const isValid = !['{', '[', "'"].includes(firstNonWhite);
@@ -30,7 +30,7 @@ export default function validateAdvancedSettingsData(settingObj, setErrorFields,
             ...prevEditedSettings,
             [settingName]: targetSettingValue,
           }));
-        } catch { /* empty */ }
+        } catch (quotedE) { /* empty */ }
       }
 
       pushDataToErrorArray(settingName);

src/assets/scss/_form.scss

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

src/assets/scss/_utilities.scss

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

src/assets/scss/_variables.scss

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

src/certificates/Certificates.test.jsx

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

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

@@ -1,6 +1,4 @@
-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';
@@ -87,19 +85,17 @@ describe('CertificateCreateForm', () => {
       }],
     };
 
-    const user = userEvent.setup();
-
     const { getByPlaceholderText, getByRole, getByDisplayValue } = renderComponent();
 
-    await user.type(
+    userEvent.type(
       getByPlaceholderText(detailsMessages.detailsCourseTitleOverride.defaultMessage),
       courseTitleOverrideValue,
     );
-    await user.type(
+    userEvent.type(
       getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage),
       signatoryNameValue,
     );
-    await user.click(getByRole('button', { name: messages.cardCreate.defaultMessage }));
+    userEvent.click(getByRole('button', { name: messages.cardCreate.defaultMessage }));
 
     axiosMock.onPost(
       getCertificateApiUrl(courseId),
@@ -113,9 +109,8 @@ describe('CertificateCreateForm', () => {
   });
 
   it('cancel certificates creation', async () => {
-    const user = userEvent.setup();
     const { getByRole } = renderComponent();
-    await user.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
+    userEvent.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
 
     await waitFor(() => {
       expect(store.getState().certificates.componentMode).toBe(MODE_STATES.noCertificates);
@@ -132,14 +127,13 @@ describe('CertificateCreateForm', () => {
   });
 
   it('add and delete signatory', async () => {
-    const user = userEvent.setup();
     const {
       getAllByRole, queryAllByRole, getByText, getByRole,
     } = renderComponent();
 
     const addSignatoryBtn = getByText(signatoryMessages.addSignatoryButton.defaultMessage);
 
-    await user.click(addSignatoryBtn);
+    userEvent.click(addSignatoryBtn);
 
     const deleteIcons = getAllByRole('button', { name: messages.deleteTooltip.defaultMessage });
 
@@ -147,13 +141,13 @@ describe('CertificateCreateForm', () => {
       expect(deleteIcons.length).toBe(2);
     });
 
-    await user.click(deleteIcons[0]);
+    userEvent.click(deleteIcons[0]);
 
     const confirModal = getByRole('dialog');
     const deleteModalButton = within(confirModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage });
 
-    await user.click(deleteIcons[0]);
-    await user.click(deleteModalButton);
+    userEvent.click(deleteIcons[0]);
+    userEvent.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, screen } from '@testing-library/react';
+import { render, waitFor } 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', async () => {
-    const user = userEvent.setup();
+  it('opens confirm modal on delete button click', () => {
     const { getByRole, getByText } = renderComponent(defaultProps);
     const deleteButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
-    await user.click(deleteButton);
+    userEvent.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 });
-    await user.click(deleteButton);
+    userEvent.click(deleteButton);
 
-    const confirmActionButton = await screen.findByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
-    await user.click(confirmActionButton);
+    await waitFor(() => {
+      const confirmActionButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+      userEvent.click(confirmActionButton);
+    });
 
     expect(mockDispatch).toHaveBeenCalledWith(deleteCourseCertificate(courseId, certificateId));
   });

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

@@ -58,14 +58,13 @@ 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';
 
-    await user.type(input, newInputValue);
+    userEvent.type(input, newInputValue);
 
-    await waitFor(() => {
+    waitFor(() => {
       expect(input.value).toBe(newInputValue);
     });
   });

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

@@ -1,7 +1,5 @@
 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';
@@ -70,15 +68,15 @@ describe('CertificateEditForm Component', () => {
         }],
       }],
     };
-    const user = userEvent.setup();
+
     const { getByDisplayValue, getByRole, getByPlaceholderText } = renderComponent();
 
-    await user.type(
+    userEvent.type(
       getByPlaceholderText(messagesDetails.detailsCourseTitleOverride.defaultMessage),
       courseTitleOverrideValue,
     );
 
-    await user.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
+    userEvent.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
 
     axiosMock.onPost(
       getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
@@ -93,17 +91,16 @@ 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();
 
-    await user.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+    userEvent.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
 
     const confirmDeleteModal = getByRole('dialog');
-    await user.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+    userEvent.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
 
     await executeThunk(deleteCourseCertificate(courseId, certificatesDataMock.certificates[0].id), store.dispatch);
 
@@ -113,17 +110,16 @@ 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();
 
-    await user.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+    userEvent.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
 
     const confirmDeleteModal = getByRole('dialog');
-    await user.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+    userEvent.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
 
     await executeThunk(deleteCourseCertificate(courseId, certificatesDataMock.certificates[0].id), store.dispatch);
 
@@ -133,12 +129,11 @@ describe('CertificateEditForm Component', () => {
   });
 
   it('cancel edit form', async () => {
-    const user = userEvent.setup();
     const { getByRole } = renderComponent();
 
     expect(store.getState().certificates.componentMode).toBe(MODE_STATES.editAll);
 
-    await user.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
+    userEvent.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
 
     expect(store.getState().certificates.componentMode).toBe(MODE_STATES.view);
   });

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -30,7 +30,6 @@ const initialState = {
 };
 
 const defaultProps = {
-  index: 0,
   ...signatoriesMock[0],
   showDeleteButton: true,
   isEdit: true,
@@ -61,59 +60,50 @@ describe('Signatory Component', () => {
   });
 
   it('handles input change', async () => {
-    const user = userEvent.setup();
     const handleChange = jest.fn();
-    renderSignatory({ ...defaultProps, handleChange });
-    const input = screen.getByPlaceholderText(messages.namePlaceholder.defaultMessage);
+    const { getByPlaceholderText } = renderSignatory({ ...defaultProps, handleChange });
+    const input = getByPlaceholderText(messages.namePlaceholder.defaultMessage);
     const newInputValue = 'Jane Doe';
 
-    expect(handleChange).not.toHaveBeenCalled();
-    expect(input.value).not.toBe(newInputValue);
-    await user.type(input, newInputValue);
+    userEvent.type(input, newInputValue, { name: 'signatories[0].name' });
 
-    await waitFor(() => {
-      // This is not a great test; handleChange() gets called for each key press:
-      expect(handleChange).toHaveBeenCalledTimes(newInputValue.length);
-      // And the input value never actually changes because it's a controlled component
-      // and we pass the name in as a prop, which hasn't changed.
-      // expect(input.value).toBe(newInputValue);
+    waitFor(() => {
+      expect(handleChange).toHaveBeenCalledWith(expect.anything());
+      expect(input.value).toBe(newInputValue);
     });
   });
 
-  it('opens image upload modal on button click', async () => {
-    const user = userEvent.setup();
-    const { getByRole, queryByTestId } = renderSignatory(defaultProps);
+  it('opens image upload modal on button click', () => {
+    const { getByRole, queryByRole } = renderSignatory(defaultProps);
     const replaceButton = getByRole(
       'button',
       { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModalReplace.defaultMessage) },
     );
 
-    expect(queryByTestId('dropzone-container')).not.toBeInTheDocument();
+    expect(queryByRole('presentation')).not.toBeInTheDocument();
 
-    await user.click(replaceButton);
+    userEvent.click(replaceButton);
 
-    expect(queryByTestId('dropzone-container')).toBeInTheDocument();
+    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);
 
-    await user.click(deleteIcon);
+    userEvent.click(deleteIcon);
 
     expect(getByText(messages.deleteSignatoryConfirmationMessage.defaultMessage)).toBeInTheDocument();
   });
 
-  it('cancels deletion of a signatory', async () => {
-    const user = userEvent.setup();
+  it('cancels deletion of a signatory', () => {
     const { getByRole } = renderSignatory(defaultProps);
 
     const deleteIcon = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
-    await user.click(deleteIcon);
+    userEvent.click(deleteIcon);
 
     const cancelButton = getByRole('button', { name: commonMessages.cardCancel.defaultMessage });
-    await user.click(cancelButton);
+    userEvent.click(cancelButton);
 
     expect(defaultProps.handleDeleteSignatory).not.toHaveBeenCalled();
   });

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

@@ -1,7 +1,5 @@
 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';
@@ -64,7 +62,6 @@ describe('CertificatesList Component', () => {
   });
 
   it('update certificate', async () => {
-    const user = userEvent.setup();
     const {
       getByText, queryByText, getByPlaceholderText, getByRole, getAllByLabelText,
     } = renderComponent();
@@ -83,13 +80,13 @@ describe('CertificatesList Component', () => {
 
     const editButtons = getAllByLabelText(messages.editTooltip.defaultMessage);
 
-    await user.click(editButtons[1]);
+    userEvent.click(editButtons[1]);
 
     const nameInput = getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage);
-    await user.clear(nameInput);
-    await user.type(nameInput, signatoryNameValue);
+    userEvent.clear(nameInput);
+    userEvent.type(nameInput, signatoryNameValue);
 
-    await user.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
+    userEvent.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
 
     axiosMock
       .onPost(getUpdateCertificateApiUrl(courseId, certificatesMock.id))
@@ -103,7 +100,6 @@ describe('CertificatesList Component', () => {
   });
 
   it('toggle edit signatory', async () => {
-    const user = userEvent.setup();
     const {
       getAllByLabelText, queryByPlaceholderText, getByTestId, getByPlaceholderText,
     } = renderComponent();
@@ -111,13 +107,13 @@ describe('CertificatesList Component', () => {
 
     expect(editButtons.length).toBe(3);
 
-    await user.click(editButtons[1]);
+    userEvent.click(editButtons[1]);
 
     await waitFor(() => {
       expect(getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage)).toBeInTheDocument();
     });
 
-    await user.click(within(getByTestId('signatory-form')).getByRole('button', { name: messages.cardCancel.defaultMessage }));
+    userEvent.click(within(getByTestId('signatory-form')).getByRole('button', { name: messages.cardCancel.defaultMessage }));
 
     await waitFor(() => {
       expect(queryByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage)).not.toBeInTheDocument();
@@ -125,11 +121,10 @@ 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);
-    await user.click(editButton);
+    userEvent.click(editButton);
 
     await waitFor(() => {
       expect(store.getState().certificates.componentMode).toBe(MODE_STATES.editAll);

src/certificates/data/api.js

@@ -35,7 +35,7 @@ export async function createCertificate(courseId, certificatesData) {
       getCertificateApiUrl(courseId),
       prepareCertificatePayload(certificatesData),
     );
-  /* istanbul ignore next */
+
   return camelCaseObject(data);
 }
 
@@ -51,7 +51,6 @@ export async function updateCertificate(courseId, certificateData) {
       getUpdateCertificateApiUrl(courseId, certificateData.id),
       prepareCertificatePayload(certificateData),
     );
-  /* istanbul ignore next */
   return camelCaseObject(data);
 }
 

src/certificates/data/slice.js

@@ -29,11 +29,12 @@ const slice = createSlice({
     fetchCertificatesSuccess: (state, { payload }) => {
       Object.assign(state.certificatesData, payload);
     },
-    createCertificateSuccess: /* istanbul ignore next */ (state, action) => {
+    createCertificateSuccess: (state, action) => {
       state.certificatesData.certificates.push(action.payload);
     },
-    updateCertificateSuccess: /* istanbul ignore next */ (state, action) => {
+    updateCertificateSuccess: (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,4 +1,3 @@
-/* istanbul ignore file */
 import { RequestStatus } from '../../data/constants';
 import {
   hideProcessingNotification,

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

@@ -1,9 +1,14 @@
-// @ts-check
+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';
 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'),
@@ -12,11 +17,25 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   }),
 }));
 
-const renderComponent = (props) => render(<CertificatesSidebar courseId={courseId} {...props} />);
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <CertificatesSidebar courseId={courseId} {...props} />
+    </IntlProvider>
+  </AppProvider>,
+);
 
 describe('CertificatesSidebar', () => {
   beforeEach(() => {
-    initializeMocks();
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
   });
 
   it('renders correctly', async () => {

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

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

src/certificates/scss/Certificates.scss

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

src/constants.js

@@ -7,7 +7,6 @@ export const STATEFUL_BUTTON_STATES = {
   default: 'default',
   pending: 'pending',
   error: 'error',
-  disable: 'disable',
 };
 
 export const USER_ROLES = {
@@ -44,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: [
@@ -62,8 +61,6 @@ export const COURSE_BLOCK_NAMES = ({
   libraryContent: { id: 'library_content', name: 'Library content' },
   splitTest: { id: 'split_test', name: 'Split Test' },
   component: { id: 'component', name: 'Component' },
-  itembank: { id: 'itembank', name: 'Problem Bank' },
-  legacyLibraryContent: { id: 'library_content', name: 'Randomized Content Block' },
 });
 
 export const STUDIO_CLIPBOARD_CHANNEL = 'studio_clipboard_channel';
@@ -108,11 +105,4 @@ export const iframeMessageTypes = {
   resize: 'plugin.resize',
   videoFullScreen: 'plugin.videoFullScreen',
   xblockEvent: 'xblock-event',
-  xblockScroll: 'xblock-scroll',
 };
-
-export const BROKEN = 'broken';
-
-export const LOCKED = 'locked';
-
-export const MANUAL = 'manual';

src/container-comparison/ChildrenPreview.tsx

@@ -1,26 +0,0 @@
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Stack } from '@openedx/paragon';
-import messages from './messages';
-
-interface Props {
-  title: React.ReactNode;
-  children: React.ReactNode;
-  side: 'Before' | 'After';
-}
-
-const ChildrenPreview = ({ title, children, side }: Props) => {
-  const intl = useIntl();
-  const sideTitle = side === 'Before'
-    ? intl.formatMessage(messages.diffBeforeTitle)
-    : intl.formatMessage(messages.diffAfterTitle);
-
-  return (
-    <Stack direction="vertical">
-      <span className="text-center">{sideTitle}</span>
-      <span className="mt-2 mb-3 text-md text-gray-800">{title}</span>
-      {children}
-    </Stack>
-  );
-};
-
-export default ChildrenPreview;

src/container-comparison/CompareContainersWidget.test.tsx

@@ -1,162 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import MockAdapter from 'axios-mock-adapter/types';
-import { getLibraryContainerApiUrl } from '@src/library-authoring/data/api';
-import { mockGetContainerChildren, mockGetContainerMetadata } from '@src/library-authoring/data/api.mocks';
-import { initializeMocks, render, screen } from '@src/testUtils';
-import { CompareContainersWidget } from './CompareContainersWidget';
-import { mockGetCourseContainerChildren } from './data/api.mock';
-
-mockGetCourseContainerChildren.applyMock();
-mockGetContainerChildren.applyMock();
-let axiosMock: MockAdapter;
-
-describe('CompareContainersWidget', () => {
-  beforeEach(() => {
-    ({ axiosMock } = initializeMocks());
-  });
-
-  test('renders the component with a title', async () => {
-    const url = getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId);
-    axiosMock.onGet(url).reply(200, { publishedDisplayName: 'Test Title' });
-    render(<CompareContainersWidget
-      upstreamBlockId={mockGetContainerMetadata.sectionId}
-      downstreamBlockId={mockGetCourseContainerChildren.sectionId}
-    />);
-    expect((await screen.findAllByText('Test Title')).length).toEqual(2);
-    expect((await screen.findAllByText('subsection block 0')).length).toEqual(1);
-    expect((await screen.findAllByText('subsection block 00')).length).toEqual(1);
-    expect((await screen.findAllByText('This subsection will be modified')).length).toEqual(3);
-    expect((await screen.findAllByText('This subsection was modified')).length).toEqual(3);
-    expect((await screen.findAllByText('subsection block 1')).length).toEqual(1);
-    expect((await screen.findAllByText('subsection block 2')).length).toEqual(1);
-    expect((await screen.findAllByText('subsection block 11')).length).toEqual(1);
-    expect((await screen.findAllByText('subsection block 22')).length).toEqual(1);
-    expect(screen.queryByText(
-      /the only change is to text block which has been edited in this course\. accepting will not remove local edits\./i,
-    )).not.toBeInTheDocument();
-  });
-
-  test('renders loading spinner when data is pending', async () => {
-    const url = getLibraryContainerApiUrl(mockGetContainerMetadata.sectionIdLoading);
-    axiosMock.onGet(url).reply(() => new Promise(() => {}));
-    render(<CompareContainersWidget
-      upstreamBlockId={mockGetContainerMetadata.sectionIdLoading}
-      downstreamBlockId={mockGetCourseContainerChildren.sectionIdLoading}
-    />);
-    const spinner = await screen.findAllByRole('status');
-    expect(spinner.length).toEqual(4);
-    expect(spinner[0].textContent).toEqual('Loading...');
-    expect(spinner[1].textContent).toEqual('Loading...');
-    expect(spinner[2].textContent).toEqual('Loading...');
-    expect(spinner[3].textContent).toEqual('Loading...');
-  });
-
-  test('calls onRowClick when a row is clicked and updates diff view', async () => {
-    // mocks title
-    axiosMock.onGet(getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId)).reply(200, { publishedDisplayName: 'Test Title' });
-    axiosMock.onGet(
-      getLibraryContainerApiUrl('lct:org1:Demo_course_generated:subsection:subsection-0'),
-    ).reply(200, { publishedDisplayName: 'subsection block 0' });
-
-    const user = userEvent.setup();
-    render(<CompareContainersWidget
-      upstreamBlockId={mockGetContainerMetadata.sectionId}
-      downstreamBlockId={mockGetCourseContainerChildren.sectionId}
-    />);
-    expect((await screen.findAllByText('Test Title')).length).toEqual(2);
-    // left i.e. before side block
-    let block = await screen.findByText('subsection block 00');
-    await user.click(block);
-    // Breadcrumbs - shows old and new name
-    expect(await screen.findByRole('button', { name: 'subsection block 00' })).toBeInTheDocument();
-    expect(await screen.findByRole('button', { name: 'subsection block 0' })).toBeInTheDocument();
-
-    // Back breadcrumb
-    const backbtns = await screen.findAllByRole('button', { name: 'Back' });
-    expect(backbtns.length).toEqual(2);
-
-    // Go back
-    await user.click(backbtns[0]);
-    expect((await screen.findAllByText('Test Title')).length).toEqual(2);
-    // right i.e. after side block
-    block = await screen.findByText('subsection block 0');
-
-    // After side click also works
-    await user.click(block);
-    expect(await screen.findByRole('button', { name: 'subsection block 00' })).toBeInTheDocument();
-    expect(await screen.findByRole('button', { name: 'subsection block 0' })).toBeInTheDocument();
-  });
-
-  test('should show removed container diff state', async () => {
-    // mocks title
-    axiosMock.onGet(getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId)).reply(200, { publishedDisplayName: 'Test Title' });
-    axiosMock.onGet(
-      getLibraryContainerApiUrl('lct:org1:Demo_course_generated:subsection:subsection-0'),
-    ).reply(200, { publishedDisplayName: 'subsection block 0' });
-
-    const user = userEvent.setup();
-    render(<CompareContainersWidget
-      upstreamBlockId={mockGetContainerMetadata.sectionId}
-      downstreamBlockId={mockGetCourseContainerChildren.sectionId}
-    />);
-    expect((await screen.findAllByText('Test Title')).length).toEqual(2);
-    // left i.e. before side block
-    const block = await screen.findByText('subsection block 00');
-    await user.click(block);
-
-    const removedRows = await screen.findAllByText('This unit was removed');
-    await user.click(removedRows[0]);
-
-    expect(await screen.findByText('This unit has been removed')).toBeInTheDocument();
-  });
-
-  test('should show new added container diff state', async () => {
-    // mocks title
-    axiosMock.onGet(getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId)).reply(200, { publishedDisplayName: 'Test Title' });
-    axiosMock.onGet(
-      getLibraryContainerApiUrl('lct:org1:Demo_course_generated:subsection:subsection-0'),
-    ).reply(200, { publishedDisplayName: 'subsection block 0' });
-
-    const user = userEvent.setup();
-    render(<CompareContainersWidget
-      upstreamBlockId={mockGetContainerMetadata.sectionId}
-      downstreamBlockId="block-v1:UNIX+UX1+2025_T3+type@section+block@0-new"
-    />);
-    const blocks = await screen.findAllByText('This subsection will be added in the new version');
-    await user.click(blocks[0]);
-
-    expect(await screen.findByText(/this subsection is new/i)).toBeInTheDocument();
-  });
-
-  test('should show alert if the only change is a single text component with local overrides', async () => {
-    const url = getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId);
-    axiosMock.onGet(url).reply(200, { publishedDisplayName: 'Test Title' });
-    render(<CompareContainersWidget
-      upstreamBlockId={mockGetContainerMetadata.sectionId}
-      downstreamBlockId={mockGetCourseContainerChildren.sectionShowsAlertSingleText}
-    />);
-
-    expect((await screen.findAllByText('Test Title')).length).toEqual(2);
-
-    expect(screen.getByText(
-      /the only change is to text block which has been edited in this course\. accepting will not remove local edits\./i,
-    )).toBeInTheDocument();
-    expect(screen.getByText(/Html block 11/i)).toBeInTheDocument();
-  });
-
-  test('should show alert if the only changes is multiple text components with local overrides', async () => {
-    const url = getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId);
-    axiosMock.onGet(url).reply(200, { publishedDisplayName: 'Test Title' });
-    render(<CompareContainersWidget
-      upstreamBlockId={mockGetContainerMetadata.sectionId}
-      downstreamBlockId={mockGetCourseContainerChildren.sectionShowsAlertMultipleText}
-    />);
-
-    expect((await screen.findAllByText('Test Title')).length).toEqual(2);
-
-    expect(screen.getByText(
-      /the only change is to which have been edited in this course\. accepting will not remove local edits\./i,
-    )).toBeInTheDocument();
-    expect(screen.getByText(/2 text blocks/i)).toBeInTheDocument();
-  });
-});

src/container-comparison/CompareContainersWidget.tsx

@@ -1,300 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import {
-  Alert,
-  Breadcrumb, Button, Card, Icon, Stack,
-} from '@openedx/paragon';
-import { ArrowBack, Add, Delete } from '@openedx/paragon/icons';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-
-import { ContainerType, getBlockType } from '@src/generic/key-utils';
-import ErrorAlert from '@src/generic/alert-error';
-import { LoadingSpinner } from '@src/generic/Loading';
-import { useContainer, useContainerChildren } from '@src/library-authoring/data/apiHooks';
-import { BoldText } from '@src/utils';
-
-import { Container, LibraryBlockMetadata } from '@src/library-authoring/data/api';
-import ChildrenPreview from './ChildrenPreview';
-import ContainerRow from './ContainerRow';
-import { useCourseContainerChildren } from './data/apiHooks';
-import {
-  ContainerChild, ContainerChildBase, ContainerState, WithState,
-} from './types';
-import { diffPreviewContainerChildren, isRowClickable } from './utils';
-import messages from './messages';
-
-interface ContainerInfoProps {
-  upstreamBlockId: string;
-  downstreamBlockId: string;
-  isReadyToSyncIndividually?: boolean;
-}
-
-interface Props extends ContainerInfoProps {
-  parent: ContainerInfoProps[];
-  onRowClick: (row: WithState<ContainerChild>) => void;
-  onBackBtnClick: () => void;
-  state?: ContainerState;
-  // This two props are used to show an alert for the changes to text components with local overrides.
-  // They may be removed in the future.
-  localUpdateAlertCount: number;
-  localUpdateAlertBlockName: string;
-}
-
-/**
- * Actual implementation of the displaying diff between children of containers.
- */
-const CompareContainersWidgetInner = ({
-  upstreamBlockId,
-  downstreamBlockId,
-  parent,
-  state,
-  onRowClick,
-  onBackBtnClick,
-  localUpdateAlertCount,
-  localUpdateAlertBlockName,
-}: Props) => {
-  const intl = useIntl();
-  const { data, isError, error } = useCourseContainerChildren(downstreamBlockId, parent.length === 0);
-  // There is the case in which the item is removed, but it still exists
-  // in the library, for that case, we avoid bringing the children.
-  const {
-    data: libData,
-    isError: isLibError,
-    error: libError,
-  } = useContainerChildren<Container | LibraryBlockMetadata>(state === 'removed' ? undefined : upstreamBlockId, true);
-  const {
-    data: containerData,
-    isError: isContainerTitleError,
-    error: containerTitleError,
-  } = useContainer(upstreamBlockId);
-
-  const result = useMemo(() => {
-    if ((!data || !libData) && !['added', 'removed'].includes(state || '')) {
-      return [undefined, undefined];
-    }
-
-    return diffPreviewContainerChildren(data?.children || [], libData as ContainerChildBase[] || []);
-  }, [data, libData]);
-
-  const renderBeforeChildren = useCallback(() => {
-    if (!result[0] && state !== 'added') {
-      return <div className="m-auto"><LoadingSpinner /></div>;
-    }
-
-    if (state === 'added') {
-      return (
-        <Stack className="align-items-center justify-content-center bg-light-200 text-gray-800">
-          <Icon src={Add} className="big-icon" />
-          <FormattedMessage
-            {...messages.newContainer}
-            values={{
-              containerType: getBlockType(upstreamBlockId),
-            }}
-          />
-        </Stack>
-      );
-    }
-
-    return result[0]?.map((child) => (
-      <ContainerRow
-        key={child.id}
-        title={child.name}
-        containerType={child.blockType}
-        state={child.state}
-        originalName={child.originalName}
-        side="Before"
-        onClick={() => onRowClick(child)}
-      />
-    ));
-  }, [result]);
-
-  const renderAfterChildren = useCallback(() => {
-    if (!result[1] && state !== 'removed') {
-      return <div className="m-auto"><LoadingSpinner /></div>;
-    }
-
-    if (state === 'removed') {
-      return (
-        <Stack className="align-items-center justify-content-center bg-light-200 text-gray-800">
-          <Icon src={Delete} className="big-icon" />
-          <FormattedMessage
-            {...messages.deletedContainer}
-            values={{
-              containerType: getBlockType(upstreamBlockId),
-            }}
-          />
-        </Stack>
-      );
-    }
-
-    return result[1]?.map((child) => (
-      <ContainerRow
-        key={child.id}
-        title={child.name}
-        containerType={child.blockType}
-        state={child.state}
-        side="After"
-        onClick={() => onRowClick(child)}
-      />
-    ));
-  }, [result]);
-
-  const getTitleComponent = useCallback((title?: string | null) => {
-    if (!title) {
-      return <div className="m-auto"><LoadingSpinner /></div>;
-    }
-
-    if (parent.length === 0) {
-      return title;
-    }
-    return (
-      <Breadcrumb
-        ariaLabel={intl.formatMessage(messages.breadcrumbAriaLabel)}
-        links={[
-          {
-            // This raises failed prop-type error as label expects a string but it works without any issues
-            label: <Stack direction="horizontal" gap={1}><Icon size="xs" src={ArrowBack} />Back</Stack>,
-            onClick: onBackBtnClick,
-            variant: 'link',
-            className: 'px-0 text-gray-900',
-          },
-          {
-            label: title,
-            variant: 'link',
-            className: 'px-0 text-gray-900',
-            disabled: true,
-          },
-        ]}
-        linkAs={Button}
-      />
-    );
-  }, [parent]);
-
-  let beforeTitle: string | undefined | null = data?.displayName;
-  let afterTitle = containerData?.publishedDisplayName;
-  if (!data && state === 'added') {
-    beforeTitle = containerData?.publishedDisplayName;
-  }
-  if (!containerData && state === 'removed') {
-    afterTitle = data?.displayName;
-  }
-
-  if (isError || (isLibError && state !== 'removed') || (isContainerTitleError && state !== 'removed')) {
-    return <ErrorAlert error={error || libError || containerTitleError} />;
-  }
-
-  return (
-    <div className="compare-changes-widget row justify-content-center">
-      {localUpdateAlertCount > 0 && (
-        <Alert variant="info">
-          <FormattedMessage
-            {...messages.localChangeInTextAlert}
-            values={{
-              blockName: localUpdateAlertBlockName,
-              count: localUpdateAlertCount,
-              b: BoldText,
-            }}
-          />
-        </Alert>
-      )}
-      <div className="col col-6 p-1">
-        <Card className="compare-card p-4">
-          <ChildrenPreview title={getTitleComponent(beforeTitle)} side="Before">
-            {renderBeforeChildren()}
-          </ChildrenPreview>
-        </Card>
-      </div>
-      <div className="col col-6 p-1">
-        <Card className="compare-card p-4">
-          <ChildrenPreview title={getTitleComponent(afterTitle)} side="After">
-            {renderAfterChildren()}
-          </ChildrenPreview>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-/**
- * CompareContainersWidget component. Displays a diff of set of child containers from two different sources
- * and allows the user to select the container to view. This is a wrapper component that maintains current
- * source state. Actual implementation of the diff view is done by CompareContainersWidgetInner.
- */
-export const CompareContainersWidget = ({
-  upstreamBlockId,
-  downstreamBlockId,
-  isReadyToSyncIndividually = false,
-}: ContainerInfoProps) => {
-  const [currentContainerState, setCurrentContainerState] = useState<ContainerInfoProps & {
-    state?: ContainerState;
-    parent:(ContainerInfoProps & { state?: ContainerState })[];
-  }>({
-        upstreamBlockId,
-        downstreamBlockId,
-        parent: [],
-        state: 'modified',
-      });
-
-  const { data } = useCourseContainerChildren(downstreamBlockId, true);
-  let localUpdateAlertBlockName = '';
-  let localUpdateAlertCount = 0;
-
-  // Show this alert if the only change is text components with local overrides.
-  // We decided not to put this in `CompareContainersWidgetInner` because if you enter a child,
-  // the alert would disappear. By keeping this call in CompareContainersWidget,
-  // the alert remains in the modal regardless of whether you navigate within the children.
-  if (!isReadyToSyncIndividually && data?.upstreamReadyToSyncChildrenInfo
-      && data.upstreamReadyToSyncChildrenInfo.every(value => value.downstreamCustomized.length > 0 && value.blockType === 'html')
-  ) {
-    localUpdateAlertCount = data.upstreamReadyToSyncChildrenInfo.length;
-    if (localUpdateAlertCount === 1) {
-      localUpdateAlertBlockName = data.upstreamReadyToSyncChildrenInfo[0].name;
-    }
-  }
-
-  const onRowClick = (row: WithState<ContainerChild>) => {
-    if (!isRowClickable(row.state, row.blockType as ContainerType)) {
-      return;
-    }
-
-    setCurrentContainerState((prev) => ({
-      upstreamBlockId: row.id!,
-      downstreamBlockId: row.downstreamId!,
-      state: row.state,
-      parent: [...prev.parent, {
-        upstreamBlockId: prev.upstreamBlockId,
-        downstreamBlockId: prev.downstreamBlockId,
-        state: prev.state,
-      }],
-    }));
-  };
-
-  const onBackBtnClick = () => {
-    setCurrentContainerState((prev) => {
-      // istanbul ignore if: this should never happen
-      if (prev.parent.length < 1) {
-        return prev;
-      }
-      const prevParent = prev.parent[prev.parent.length - 1];
-      return {
-        upstreamBlockId: prevParent!.upstreamBlockId,
-        downstreamBlockId: prevParent!.downstreamBlockId,
-        state: prevParent!.state,
-        parent: prev.parent.slice(0, -1),
-      };
-    });
-  };
-
-  return (
-    <CompareContainersWidgetInner
-      upstreamBlockId={currentContainerState.upstreamBlockId}
-      downstreamBlockId={currentContainerState.downstreamBlockId}
-      parent={currentContainerState.parent}
-      state={currentContainerState.state}
-      onRowClick={onRowClick}
-      onBackBtnClick={onBackBtnClick}
-      localUpdateAlertCount={localUpdateAlertCount}
-      localUpdateAlertBlockName={localUpdateAlertBlockName}
-    />
-  );
-};

src/container-comparison/ContainerRow.test.tsx

@@ -1,96 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import {
-  fireEvent, initializeMocks, render, screen,
-} from '../testUtils';
-import ContainerRow from './ContainerRow';
-import messages from './messages';
-
-describe('<ContainerRow />', () => {
-  beforeEach(() => {
-    initializeMocks();
-  });
-
-  test('renders with default props', async () => {
-    render(<ContainerRow title="Test title" containerType="subsection" side="Before" />);
-    expect(await screen.findByText('Test title')).toBeInTheDocument();
-  });
-
-  test('renders with modified state', async () => {
-    render(<ContainerRow title="Test title" containerType="subsection" side="Before" state="modified" />);
-    expect(await screen.findByText(
-      messages.modifiedDiffBeforeMessage.defaultMessage.replace('{blockType}', 'subsection'),
-    )).toBeInTheDocument();
-  });
-
-  test('renders with removed state', async () => {
-    render(<ContainerRow title="Test title" containerType="subsection" side="After" state="removed" />);
-    expect(await screen.findByText(
-      messages.removedDiffAfterMessage.defaultMessage.replace('{blockType}', 'subsection'),
-    )).toBeInTheDocument();
-  });
-
-  test('calls onClick when clicked', async () => {
-    const onClick = jest.fn();
-    const user = userEvent.setup();
-    render(<ContainerRow
-      title="Test title"
-      containerType="subsection"
-      side="Before"
-      state="modified"
-      onClick={onClick}
-    />);
-    const titleDiv = await screen.findByText('Test title');
-    const card = titleDiv.closest('.clickable');
-    expect(card).not.toBe(null);
-    await user.click(card!);
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  test('calls onClick when pressed enter or space', async () => {
-    const onClick = jest.fn();
-    const user = userEvent.setup();
-    render(<ContainerRow
-      title="Test title"
-      containerType="subsection"
-      side="Before"
-      state="modified"
-      onClick={onClick}
-    />);
-    const titleDiv = await screen.findByText('Test title');
-    const card = titleDiv.closest('.clickable');
-    expect(card).not.toBe(null);
-    fireEvent.select(card!);
-    await user.keyboard('{enter}');
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  test('renders with originalName', async () => {
-    render(<ContainerRow title="Test title" containerType="subsection" side="Before" state="locallyRenamed" originalName="Modified name" />);
-    expect(await screen.findByText(messages.renamedDiffBeforeMessage.defaultMessage.replace('{name}', 'Modified name'))).toBeInTheDocument();
-  });
-
-  test('renders with local content update', async () => {
-    render(<ContainerRow title="Test title" containerType="html" side="Before" state="locallyContentUpdated" />);
-    expect(await screen.findByText(messages.locallyContentUpdatedBeforeMessage.defaultMessage.replace('{blockType}', 'html'))).toBeInTheDocument();
-  });
-
-  test('renders with rename and local content update', async () => {
-    render(<ContainerRow title="Test title" containerType="html" side="Before" state="locallyRenamedAndContentUpdated" originalName="Modified name" />);
-    expect(await screen.findByText(messages.renamedDiffBeforeMessage.defaultMessage.replace('{name}', 'Modified name'))).toBeInTheDocument();
-    expect(await screen.findByText(messages.locallyContentUpdatedBeforeMessage.defaultMessage.replace('{blockType}', 'html'))).toBeInTheDocument();
-  });
-
-  test('renders with moved state', async () => {
-    render(<ContainerRow title="Test title" containerType="subsection" side="After" state="moved" />);
-    expect(await screen.findByText(
-      messages.movedDiffAfterMessage.defaultMessage.replace('{blockType}', 'subsection'),
-    )).toBeInTheDocument();
-  });
-
-  test('renders with added state', async () => {
-    render(<ContainerRow title="Test title" containerType="subsection" side="After" state="added" />);
-    expect(await screen.findByText(
-      messages.addedDiffAfterMessage.defaultMessage.replace('{blockType}', 'subsection'),
-    )).toBeInTheDocument();
-  });
-});

src/container-comparison/ContainerRow.tsx

@@ -1,132 +0,0 @@
-import {
-  ActionRow, Card, Icon, Stack,
-} from '@openedx/paragon';
-import type { MessageDescriptor } from 'react-intl';
-import { useMemo } from 'react';
-import {
-  Cached, ChevronRight, Delete, Done, Plus,
-} from '@openedx/paragon/icons';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { getItemIcon } from '@src/generic/block-type-utils';
-import { ContainerType } from '@src/generic/key-utils';
-import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
-import messages from './messages';
-import { ContainerState } from './types';
-import { isRowClickable } from './utils';
-
-export interface ContainerRowProps {
-  title: string;
-  containerType: ContainerType | keyof typeof COMPONENT_TYPES | string;
-  state?: ContainerState;
-  side: 'Before' | 'After';
-  originalName?: string;
-  onClick?: () => void;
-}
-
-interface StateContext {
-  className: string;
-  icon: React.ComponentType;
-  message?: MessageDescriptor;
-  message2?: MessageDescriptor;
-}
-
-const ContainerRow = ({
-  title, containerType, state, side, originalName, onClick,
-}: ContainerRowProps) => {
-  const isClickable = isRowClickable(state, containerType as ContainerType);
-  const stateContext: StateContext = useMemo(() => {
-    let message: MessageDescriptor | undefined;
-    let message2: MessageDescriptor | undefined;
-    switch (state) {
-      case 'added':
-        message = side === 'Before' ? messages.addedDiffBeforeMessage : messages.addedDiffAfterMessage;
-        return { className: 'text-white bg-success-500', icon: Plus, message };
-      case 'modified':
-        message = side === 'Before' ? messages.modifiedDiffBeforeMessage : messages.modifiedDiffAfterMessage;
-        return { className: 'text-white bg-warning-900', icon: Cached, message };
-      case 'removed':
-        message = side === 'Before' ? messages.removedDiffBeforeMessage : messages.removedDiffAfterMessage;
-        return { className: 'text-white bg-danger-600', icon: Delete, message };
-      case 'locallyRenamed':
-        message = side === 'Before' ? messages.renamedDiffBeforeMessage : messages.renamedUpdatedDiffAfterMessage;
-        return { className: 'bg-light-300 text-light-300 ', icon: Done, message };
-      case 'locallyContentUpdated':
-        message = side === 'Before' ? messages.locallyContentUpdatedBeforeMessage : messages.locallyContentUpdatedAfterMessage;
-        return { className: 'bg-light-300 text-light-300 ', icon: Done, message };
-      case 'locallyRenamedAndContentUpdated':
-        message = side === 'Before' ? messages.renamedDiffBeforeMessage : messages.renamedUpdatedDiffAfterMessage;
-        message2 = side === 'Before' ? messages.locallyContentUpdatedBeforeMessage : messages.locallyContentUpdatedAfterMessage;
-        return {
-          className: 'bg-light-300 text-light-300 ', icon: Done, message, message2,
-        };
-      case 'moved':
-        message = side === 'Before' ? messages.movedDiffBeforeMessage : messages.movedDiffAfterMessage;
-        return { className: 'bg-light-300 text-light-300', icon: Done, message };
-      default:
-        return { className: 'bg-light-300 text-light-300', icon: Done, message };
-    }
-  }, [state, side]);
-
-  return (
-    <Card
-      isClickable={isClickable}
-      onClick={onClick}
-      onKeyDown={(e: KeyboardEvent) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          onClick?.();
-        }
-      }}
-      className="mb-2 rounded shadow-sm border border-light-100"
-    >
-      <Stack direction="horizontal" gap={0}>
-        <div
-          className={`px-1 align-self-stretch align-content-center rounded-left ${stateContext.className}`}
-        >
-          <Icon size="sm" src={stateContext.icon} />
-        </div>
-        <ActionRow className="p-2">
-          <Stack direction="vertical" gap={2}>
-            <Stack direction="horizontal" gap={2}>
-              <Icon
-                src={getItemIcon(containerType)}
-                screenReaderText={containerType}
-                title={title}
-              />
-              <span className="small font-weight-bold">{title}</span>
-            </Stack>
-            {stateContext.message ? (
-              <div className="d-flex flex-column">
-                <span className="micro">
-                  <FormattedMessage
-                    {...stateContext.message}
-                    values={{
-                      blockType: containerType,
-                      name: originalName,
-                    }}
-                  />
-                </span>
-                {stateContext.message2 && (
-                  <span className="micro">
-                    <FormattedMessage
-                      {...stateContext.message2}
-                      values={{
-                        blockType: containerType,
-                        name: originalName,
-                      }}
-                    />
-                  </span>
-                )}
-              </div>
-            ) : (
-              <span className="micro">&nbsp;</span>
-            )}
-          </Stack>
-          <ActionRow.Spacer />
-          {isClickable && <Icon size="md" src={ChevronRight} />}
-        </ActionRow>
-      </Stack>
-    </Card>
-  );
-};
-
-export default ContainerRow;

src/container-comparison/data/api.mock.ts

@@ -1,116 +0,0 @@
-/* istanbul ignore file */
-import { CourseContainerChildrenData, type UpstreamReadyToSyncChildrenInfo } from '@src/course-unit/data/types';
-import * as unitApi from '@src/course-unit/data/api';
-
-/**
- * Mock for `getLibraryContainerChildren()`
- *
- * This mock returns a fixed response for the given container ID.
- */
-export async function mockGetCourseContainerChildren(containerId: string): Promise<CourseContainerChildrenData> {
-  let numChildren: number = 3;
-  let blockType: string;
-  let displayName: string;
-  let upstreamReadyToSyncChildrenInfo: UpstreamReadyToSyncChildrenInfo[] = [];
-  switch (containerId) {
-    case mockGetCourseContainerChildren.unitId:
-      blockType = 'text';
-      displayName = 'unit block 00';
-      break;
-    case mockGetCourseContainerChildren.sectionId:
-      blockType = 'subsection';
-      displayName = 'Test Title';
-      break;
-    case mockGetCourseContainerChildren.subsectionId:
-      blockType = 'unit';
-      displayName = 'subsection block 00';
-      break;
-    case mockGetCourseContainerChildren.sectionShowsAlertSingleText:
-      blockType = 'subsection';
-      displayName = 'Test Title';
-      upstreamReadyToSyncChildrenInfo = [{
-        id: 'block-v1:UNIX+UX1+2025_T3+type@html+block@1',
-        name: 'Html block 11',
-        blockType: 'html',
-        downstreamCustomized: ['display_name'],
-        upstream: 'upstream-id',
-      }];
-      break;
-    case mockGetCourseContainerChildren.sectionShowsAlertMultipleText:
-      blockType = 'subsection';
-      displayName = 'Test Title';
-      upstreamReadyToSyncChildrenInfo = [
-        {
-          id: 'block-v1:UNIX+UX1+2025_T3+type@html+block@1',
-          name: 'Html block 11',
-          blockType: 'html',
-          downstreamCustomized: ['display_name'],
-          upstream: 'upstream-id',
-        },
-        {
-          id: 'block-v1:UNIX+UX1+2025_T3+type@html+block@2',
-          name: 'Html block 22',
-          blockType: 'html',
-          downstreamCustomized: ['display_name'],
-          upstream: 'upstream-id',
-        },
-      ];
-      break;
-    case mockGetCourseContainerChildren.unitIdLoading:
-    case mockGetCourseContainerChildren.sectionIdLoading:
-    case mockGetCourseContainerChildren.subsectionIdLoading:
-      return new Promise(() => { });
-    default:
-      blockType = 'section';
-      displayName = 'section block 00';
-      numChildren = 0;
-      break;
-  }
-  const children = Array(numChildren).fill(mockGetCourseContainerChildren.childTemplate).map((child, idx) => (
-    {
-      ...child,
-      // Generate a unique ID for each child block to avoid "duplicate key" errors in tests
-      id: `block-v1:UNIX+UX1+2025_T3+type@${blockType}+block@${idx}`,
-      name: `${blockType} block ${idx}${idx}`,
-      blockType,
-      upstreamLink: {
-        upstreamRef: `lct:org1:Demo_course_generated:${blockType}:${blockType}-${idx}`,
-        versionSynced: 1,
-        versionAvailable: 2,
-        versionDeclined: null,
-        downstreamCustomized: [],
-      },
-    }
-  ));
-  return Promise.resolve({
-    canPasteComponent: true,
-    isPublished: false,
-    children,
-    displayName,
-    upstreamReadyToSyncChildrenInfo,
-  });
-}
-mockGetCourseContainerChildren.unitId = 'block-v1:UNIX+UX1+2025_T3+type@unit+block@0';
-mockGetCourseContainerChildren.subsectionId = 'block-v1:UNIX+UX1+2025_T3+type@subsection+block@0';
-mockGetCourseContainerChildren.sectionId = 'block-v1:UNIX+UX1+2025_T3+type@section+block@0';
-mockGetCourseContainerChildren.sectionShowsAlertSingleText = 'block-v1:UNIX+UX1+2025_T3+type@section2+block@0';
-mockGetCourseContainerChildren.sectionShowsAlertMultipleText = 'block-v1:UNIX+UX1+2025_T3+type@section3+block@0';
-mockGetCourseContainerChildren.unitIdLoading = 'block-v1:UNIX+UX1+2025_T3+type@unit+block@loading';
-mockGetCourseContainerChildren.subsectionIdLoading = 'block-v1:UNIX+UX1+2025_T3+type@subsection+block@loading';
-mockGetCourseContainerChildren.sectionIdLoading = 'block-v1:UNIX+UX1+2025_T3+type@section+block@loading';
-mockGetCourseContainerChildren.childTemplate = {
-  id: 'block-v1:UNIX+UX1+2025_T3+type@unit+block@1',
-  name: 'Unit 1 remote edit - local edit',
-  blockType: 'unit',
-  upstreamLink: {
-    upstreamRef: 'lct:UNIX:CS1:unit:unit-1-2a1741',
-    versionSynced: 1,
-    versionAvailable: 2,
-    versionDeclined: null,
-    downstreamCustomized: [],
-  },
-};
-/** Apply this mock. Returns a spy object that can tell you if it's been called. */
-mockGetCourseContainerChildren.applyMock = () => {
-  jest.spyOn(unitApi, 'getCourseContainerChildren').mockImplementation(mockGetCourseContainerChildren);
-};

src/container-comparison/data/apiHooks.ts

@@ -1,30 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { getCourseContainerChildren } from '@src/course-unit/data/api';
-import { getCourseKey } from '@src/generic/key-utils';
-
-export const containerComparisonQueryKeys = {
-  all: ['containerComparison'],
-  /**
-   * Base key for a course
-   */
-  course: (courseKey: string) => [...containerComparisonQueryKeys.all, courseKey],
-  /**
-   * Key for a single container
-   */
-  container: (getUpstreamInfo: boolean, usageKey?: string) => {
-    if (usageKey === undefined) {
-      return [undefined, undefined, getUpstreamInfo.toString()];
-    }
-    const courseKey = getCourseKey(usageKey);
-    return [...containerComparisonQueryKeys.course(courseKey), usageKey, getUpstreamInfo.toString()];
-  },
-};
-
-export const useCourseContainerChildren = (usageKey?: string, getUpstreamInfo?: boolean) => (
-  useQuery({
-    enabled: !!usageKey,
-    queryFn: () => getCourseContainerChildren(usageKey!, getUpstreamInfo),
-    // If we first get data with a valid `usageKey` and then the `usageKey` changes to undefined, an error occurs.
-    queryKey: containerComparisonQueryKeys.container(getUpstreamInfo || false, usageKey),
-  })
-);

src/container-comparison/index.scss

@@ -1,10 +0,0 @@
-.compare-changes-widget {
-  .compare-card {
-    min-height: 350px;
-  }
-
-  .big-icon {
-    height: 68px;
-    width: 68px;
-  }
-}

src/container-comparison/messages.ts

@@ -1,101 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  error: {
-    id: 'course-authoring.container-comparison.diff.error.message',
-    defaultMessage: 'Unexpected error: Failed to fetch container data',
-    description: 'Generic error message',
-  },
-  removedDiffBeforeMessage: {
-    id: 'course-authoring.container-comparison.diff.before.removed-message',
-    defaultMessage: 'This {blockType} will be removed in the new version',
-    description: 'Description for removed component in before section of diff preview',
-  },
-  removedDiffAfterMessage: {
-    id: 'course-authoring.container-comparison.diff.after.removed-message',
-    defaultMessage: 'This {blockType} was removed',
-    description: 'Description for removed component in after section of diff preview',
-  },
-  modifiedDiffBeforeMessage: {
-    id: 'course-authoring.container-comparison.diff.before.modified-message',
-    defaultMessage: 'This {blockType} will be modified',
-    description: 'Description for modified component in before section of diff preview',
-  },
-  modifiedDiffAfterMessage: {
-    id: 'course-authoring.container-comparison.diff.after.modified-message',
-    defaultMessage: 'This {blockType} was modified',
-    description: 'Description for modified component in after section of diff preview',
-  },
-  addedDiffBeforeMessage: {
-    id: 'course-authoring.container-comparison.diff.before.added-message',
-    defaultMessage: 'This {blockType} will be added in the new version',
-    description: 'Description for added component in before section of diff preview',
-  },
-  addedDiffAfterMessage: {
-    id: 'course-authoring.container-comparison.diff.after.added-message',
-    defaultMessage: 'This {blockType} was added',
-    description: 'Description for added component in after section of diff preview',
-  },
-  renamedDiffBeforeMessage: {
-    id: 'course-authoring.container-comparison.diff.before.locally-updated-message',
-    defaultMessage: 'Library Name: {name}',
-    description: 'Description for locally updated component in before section of diff preview',
-  },
-  renamedUpdatedDiffAfterMessage: {
-    id: 'course-authoring.container-comparison.diff.after.locally-updated-message',
-    defaultMessage: 'Library name remains overwritten',
-    description: 'Description for locally updated component in after section of diff preview',
-  },
-  locallyContentUpdatedBeforeMessage: {
-    id: 'course-authoring.container-comparison.diff.before.locally-content-updated-message',
-    defaultMessage: 'This {blockType} was edited locally',
-    description: 'Description for locally content updated component in before section of diff preview',
-  },
-  locallyContentUpdatedAfterMessage: {
-    id: 'course-authoring.container-comparison.diff.after.locally-content-updated-message',
-    defaultMessage: 'Local edit will remain',
-    description: 'Description for locally content updated component in after section of diff preview',
-  },
-  movedDiffBeforeMessage: {
-    id: 'course-authoring.container-comparison.diff.before.moved-message',
-    defaultMessage: 'This {blockType} will be moved in the new version',
-    description: 'Description for moved component in before section of diff preview',
-  },
-  movedDiffAfterMessage: {
-    id: 'course-authoring.container-comparison.diff.after.moved-message',
-    defaultMessage: 'This {blockType} was moved',
-    description: 'Description for moved component in after section of diff preview',
-  },
-  breadcrumbAriaLabel: {
-    id: 'course-authoring.container-comparison.diff.breadcrumb.ariaLabel',
-    defaultMessage: 'Title breadcrumb',
-    description: 'Aria label text for breadcrumb in diff preview',
-  },
-  diffBeforeTitle: {
-    id: 'course-authoring.container-comparison.diff.before.title',
-    defaultMessage: 'Before',
-    description: 'Before section title text',
-  },
-  diffAfterTitle: {
-    id: 'course-authoring.container-comparison.diff.after.title',
-    defaultMessage: 'After',
-    description: 'After section title text',
-  },
-  localChangeInTextAlert: {
-    id: 'course-authoring.container-comparison.text-with-local-change.alert',
-    defaultMessage: 'The only change is to {count, plural, one {text block <b>{blockName}</b> which has been edited} other {<b>{count} text blocks</b> which have been edited}} in this course. Accepting will not remove local edits.',
-    description: 'Alert to show if the only change is on text components with local overrides.',
-  },
-  newContainer: {
-    id: 'course-authoring.container-comparison.new-container.text',
-    defaultMessage: 'This {containerType} is new',
-    description: 'Text to show in the comparison when a container is new.',
-  },
-  deletedContainer: {
-    id: 'course-authoring.container-comparison.deleted-container.text',
-    defaultMessage: 'This {containerType} has been removed',
-    description: 'Text to show in the comparison when a container is removed.',
-  },
-});
-
-export default messages;

src/container-comparison/types.ts

@@ -1,31 +0,0 @@
-import { UpstreamInfo } from '@src/data/types';
-
-export type ContainerState = 'removed' | 'added' | 'modified' | 'childrenModified' | 'locallyContentUpdated' | 'locallyRenamed' | 'locallyRenamedAndContentUpdated' | 'moved';
-
-export type WithState<T> = T & { state?: ContainerState, originalName?: string };
-export type WithIndex<T> = T & { index: number };
-
-export type CourseContainerChildBase = {
-  name: string;
-  id: string;
-  upstreamLink: UpstreamInfo;
-  blockType: string;
-};
-
-export type ContainerChildBase = {
-  displayName: string;
-  id: string;
-  containerType?: string;
-  blockType?: string;
-} & ({
-  containerType: string;
-} | {
-  blockType: string;
-});
-
-export type ContainerChild = {
-  name: string;
-  id?: string;
-  downstreamId?: string;
-  blockType: string;
-};

src/container-comparison/utils.test.ts

@@ -1,359 +0,0 @@
-import { ContainerChildBase, CourseContainerChildBase } from './types';
-import { diffPreviewContainerChildren } from './utils';
-
-export const getMockCourseContainerData = (
-  type: 'added|deleted' | 'moved|deleted' | 'all' | 'locallyEdited',
-): [CourseContainerChildBase[], ContainerChildBase[]] => {
-  switch (type) {
-    case 'moved|deleted':
-      return [
-        [
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@1',
-            name: 'Unit 1 remote edit - local edit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:unit-1-2a1741',
-              versionSynced: 11,
-              versionAvailable: 11,
-              versionDeclined: null,
-              downstreamCustomized: ['display_name'],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@2',
-            name: 'New unit remote edit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:new-unit-remote-7eb9d1',
-              versionSynced: 7,
-              versionAvailable: 7,
-              versionDeclined: null,
-              downstreamCustomized: [],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@3',
-            name: 'Unit with tags',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:unit-with-tags-bec5f9',
-              versionSynced: 2,
-              versionAvailable: 2,
-              versionDeclined: null,
-              downstreamCustomized: [],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@4',
-            name: 'One more unit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:one-more-unit-745176',
-              versionSynced: 1,
-              versionAvailable: 1,
-              versionDeclined: null,
-              downstreamCustomized: [],
-            },
-          },
-        ],
-        [
-          {
-            id: 'lct:UNIX:CS1:unit:unit-with-tags-bec5f9',
-            displayName: 'Unit with tags',
-            containerType: 'unit',
-          },
-          {
-            id: 'lct:UNIX:CS1:unit:unit-1-2a1741',
-            displayName: 'Unit 1 remote edit 2',
-            containerType: 'unit',
-          },
-          {
-            id: 'lct:UNIX:CS1:unit:one-more-unit-745176',
-            displayName: 'One more unit',
-            containerType: 'unit',
-          },
-        ],
-      ] as [CourseContainerChildBase[], ContainerChildBase[]];
-    case 'added|deleted':
-      return [
-        [
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@1',
-            name: 'Unit 1 remote edit - local edit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:unit-1-2a1741',
-              versionSynced: 11,
-              versionAvailable: 11,
-              versionDeclined: null,
-              downstreamCustomized: ['display_name'],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@2',
-            name: 'New unit remote edit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:new-unit-remote-7eb9d1',
-              versionSynced: 7,
-              versionAvailable: 7,
-              versionDeclined: null,
-              downstreamCustomized: [],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@3',
-            name: 'Unit with tags',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:unit-with-tags-bec5f9',
-              versionSynced: 2,
-              versionAvailable: 2,
-              versionDeclined: null,
-              downstreamCustomized: [],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@4',
-            name: 'One more unit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:one-more-unit-745176',
-              versionSynced: 1,
-              versionAvailable: 1,
-              versionDeclined: null,
-              downstreamCustomized: [],
-            },
-          },
-        ],
-        [
-          {
-            id: 'lct:UNIX:CS1:unit:unit-1-2a1741',
-            displayName: 'Unit 1 remote edit 2',
-            containerType: 'unit',
-          },
-          {
-            id: 'lct:UNIX:CS1:unit:unit-with-tags-bec5f9',
-            displayName: 'Unit with tags',
-            containerType: 'unit',
-          },
-          {
-            id: 'lct:UNIX:CS1:unit:added-unit-1',
-            displayName: 'Added unit',
-            containerType: 'unit',
-          },
-          {
-            id: 'lct:UNIX:CS1:unit:one-more-unit-745176',
-            displayName: 'One more unit',
-            containerType: 'unit',
-          },
-        ],
-      ] as [CourseContainerChildBase[], ContainerChildBase[]];
-    case 'all':
-      return [
-        [
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@1',
-            name: 'Unit 1 remote edit - local edit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:unit-1-2a1741',
-              versionSynced: 11,
-              versionAvailable: 11,
-              versionDeclined: null,
-              downstreamCustomized: ['display_name'],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@2',
-            name: 'New unit remote edit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:new-unit-remote-7eb9d1',
-              versionSynced: 7,
-              versionAvailable: 7,
-              versionDeclined: null,
-              downstreamCustomized: [],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@3',
-            name: 'Unit with tags',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:unit-with-tags-bec5f9',
-              versionSynced: 2,
-              versionAvailable: 2,
-              versionDeclined: null,
-              downstreamCustomized: [],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@4',
-            name: 'One more unit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:one-more-unit-745176',
-              versionSynced: 1,
-              versionAvailable: 1,
-              versionDeclined: null,
-              downstreamCustomized: [],
-            },
-          },
-        ],
-        [
-          {
-            id: 'lct:UNIX:CS1:unit:unit-with-tags-bec5f9',
-            displayName: 'Unit with tags',
-            containerType: 'unit',
-          },
-          {
-            id: 'lct:UNIX:CS1:unit:added-unit-1',
-            displayName: 'Added unit',
-            containerType: 'unit',
-          },
-          {
-            id: 'lct:UNIX:CS1:unit:one-more-unit-745176',
-            displayName: 'One more unit',
-            containerType: 'unit',
-          },
-          {
-            id: 'lct:UNIX:CS1:unit:unit-1-2a1741',
-            displayName: 'Unit 1 remote edit 2',
-            containerType: 'unit',
-          },
-        ],
-      ] as [CourseContainerChildBase[], ContainerChildBase[]];
-    case 'locallyEdited':
-      return [
-        [
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@1',
-            name: 'Unit 1 remote edit - local edit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:unit-1-2a1741',
-              versionSynced: 11,
-              versionAvailable: 11,
-              versionDeclined: null,
-              downstreamCustomized: ['display_name'],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@2',
-            name: 'New unit remote edit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:new-unit-remote-7eb9d1',
-              versionSynced: 7,
-              versionAvailable: 7,
-              versionDeclined: null,
-              downstreamCustomized: ['data'],
-            },
-          },
-          {
-            id: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@3',
-            name: 'Unit with tags - local edit',
-            blockType: 'vertical',
-            upstreamLink: {
-              upstreamRef: 'lct:UNIX:CS1:unit:unit-with-tags-bec5f9',
-              versionSynced: 2,
-              versionAvailable: 2,
-              versionDeclined: null,
-              downstreamCustomized: ['display_name', 'data'],
-            },
-          },
-        ],
-        [
-          {
-            id: 'lct:UNIX:CS1:unit:unit-1-2a1741',
-            displayName: 'Unit 1 remote edit - remote edit',
-            containerType: 'unit',
-          },
-          {
-            id: 'lct:UNIX:CS1:unit:new-unit-remote-7eb9d1',
-            displayName: 'New unit remote edit',
-            containerType: 'unit',
-          },
-          {
-            id: 'lct:UNIX:CS1:unit:unit-with-tags-bec5f9',
-            displayName: 'Unit with tags - remote edit',
-            containerType: 'unit',
-          },
-        ],
-      ] as [CourseContainerChildBase[], ContainerChildBase[]];
-    default:
-      throw new Error();
-  }
-};
-
-describe('diffPreviewContainerChildren', () => {
-  it('should handle moved and deleted', () => {
-    const [a, b] = getMockCourseContainerData('moved|deleted');
-    const result = diffPreviewContainerChildren(a as CourseContainerChildBase[], b);
-    expect(result[0].length).toEqual(result[1].length);
-    // renamed takes precendence over moved
-    expect(result[0][0].state).toEqual('locallyRenamed');
-    expect(result[1][2].state).toEqual('locallyRenamed');
-    expect(result[0][1].state).toEqual('removed');
-    expect(result[1][1].state).toEqual('removed');
-    expect(result[1][2].name).toEqual(a[0].name);
-  });
-
-  it('should handle add and delete', () => {
-    const [a, b] = getMockCourseContainerData('added|deleted');
-    const result = diffPreviewContainerChildren(a as CourseContainerChildBase[], b);
-    expect(result[0].length).toEqual(result[1].length);
-    // No change, state=undefined
-    expect(result[0][0].state).toEqual('locallyRenamed');
-    expect(result[0][0].originalName).toEqual(b[0].displayName);
-    expect(result[1][0].state).toEqual('locallyRenamed');
-
-    // Deleted entry
-    expect(result[0][1].state).toEqual('removed');
-    expect(result[1][1].state).toEqual('removed');
-    expect(result[1][0].name).toEqual(a[0].name);
-    expect(result[0][3].name).toEqual(result[1][3].name);
-    expect(result[0][3].state).toEqual('added');
-    expect(result[1][3].state).toEqual('added');
-  });
-
-  it('should handle add, delete and moved', () => {
-    const [a, b] = getMockCourseContainerData('all');
-    const result = diffPreviewContainerChildren(a as CourseContainerChildBase[], b);
-    expect(result[0].length).toEqual(result[1].length);
-    // renamed takes precendence over moved
-    expect(result[0][0].state).toEqual('locallyRenamed');
-    expect(result[1][4].state).toEqual('locallyRenamed');
-    expect(result[1][4].id).toEqual(result[0][0].id);
-
-    // Deleted entry
-    expect(result[0][1].state).toEqual('removed');
-    expect(result[1][1].state).toEqual('removed');
-    expect(result[1][1].name).toEqual(result[0][1].name);
-
-    // added entry
-    expect(result[0][2].state).toEqual('added');
-    expect(result[1][2].state).toEqual('added');
-    expect(result[1][2].id).toEqual(result[0][2].id);
-  });
-
-  it('should handle locally edited content', () => {
-    const [a, b] = getMockCourseContainerData('locallyEdited');
-    const result = diffPreviewContainerChildren(a as CourseContainerChildBase[], b);
-    expect(result[0].length).toEqual(result[1].length);
-    // renamed
-    expect(result[0][0].state).toEqual('locallyRenamed');
-    expect(result[1][0].state).toEqual('locallyRenamed');
-    expect(result[1][0].id).toEqual(result[0][0].id);
-    // content updated
-    expect(result[0][1].state).toEqual('locallyContentUpdated');
-    expect(result[1][1].state).toEqual('locallyContentUpdated');
-    expect(result[1][1].id).toEqual(result[0][1].id);
-    // renamed and content updated
-    expect(result[0][2].state).toEqual('locallyRenamedAndContentUpdated');
-    expect(result[1][2].state).toEqual('locallyRenamedAndContentUpdated');
-    expect(result[1][2].id).toEqual(result[0][2].id);
-  });
-});

src/container-comparison/utils.ts

@@ -1,143 +0,0 @@
-import { UpstreamInfo } from '@src/data/types';
-import { ContainerType, normalizeContainerType } from '@src/generic/key-utils';
-import {
-  ContainerChild,
-  ContainerChildBase,
-  ContainerState,
-  CourseContainerChildBase,
-  WithIndex,
-  WithState,
-} from './types';
-
-export function checkIsReadyToSync(link: UpstreamInfo): boolean {
-  return (link.versionSynced < (link.versionAvailable || 0))
-    || (link.versionSynced < (link.versionDeclined || 0))
-      || ((link.readyToSyncChildren?.length || 0) > 0);
-}
-
-/**
- * Compares two arrays of container children (`a` and `b`) to determine the differences between them.
- * It generates two lists indicating which elements have been added, modified, moved, or removed.
- */
-export function diffPreviewContainerChildren<A extends CourseContainerChildBase, B extends ContainerChildBase>(
-  a: A[],
-  b: B[],
-  idKey: string = 'id',
-): [WithState<ContainerChild>[], WithState<ContainerChild>[]] {
-  const mapA = new Map<any, WithIndex<A>>();
-  const mapB = new Map<any, WithIndex<ContainerChild>>();
-  for (let index = 0; index < a.length; index++) {
-    const element = a[index];
-    mapA.set(element.upstreamLink?.upstreamRef, { ...element, index });
-  }
-  const updatedA: WithState<ContainerChild>[] = Array(a.length);
-  const addedA: Array<WithIndex<ContainerChild>> = [];
-  const updatedB: WithState<ContainerChild>[] = [];
-  for (let index = 0; index < b.length; index++) {
-    const newVersion = b[index];
-    const oldVersion = mapA.get(newVersion.id);
-
-    if (!oldVersion) {
-      // This is a newly added component
-      addedA.push({
-        id: newVersion.id,
-        name: newVersion.displayName,
-        blockType: (newVersion.containerType || newVersion.blockType)!,
-        index,
-      });
-      updatedB.push({
-        name: newVersion.displayName,
-        blockType: (newVersion.blockType || newVersion.containerType)!,
-        id: newVersion.id,
-        state: 'added',
-      });
-    } else {
-      // It was present in previous version
-      let state: ContainerState | undefined;
-      const displayName = oldVersion.upstreamLink.downstreamCustomized.includes('display_name') ? oldVersion.name : newVersion.displayName;
-      let originalName: string | undefined;
-      // FIXME: This logic doesn't work when the content is updated locally and the upstream display name is updated.
-      // `isRenamed` becomes true.
-      // We probably need to differentiate between `contentModified` and `rename` in the backend or
-      // send `downstream_customized` field to the frontend and use it here.
-      const isRenamed = displayName !== newVersion.displayName && displayName === oldVersion.name;
-      const isContentModified = oldVersion.upstreamLink.downstreamCustomized.includes('data');
-      if (index !== oldVersion.index) {
-        // has moved from its position
-        state = 'moved';
-      }
-      if ((oldVersion.upstreamLink.downstreamCustomized.length || 0) > 0) {
-        if (isRenamed) {
-          state = 'locallyRenamed';
-          originalName = newVersion.displayName;
-        }
-        if (isContentModified) {
-          state = 'locallyContentUpdated';
-        }
-        if (isRenamed && isContentModified) {
-          state = 'locallyRenamedAndContentUpdated';
-        }
-      } else if (checkIsReadyToSync(oldVersion.upstreamLink)) {
-        // has a new version ready to sync
-        state = 'modified';
-      }
-      // Insert in its original index
-      updatedA.splice(oldVersion.index, 1, {
-        name: oldVersion.name,
-        blockType: normalizeContainerType(oldVersion.blockType),
-        id: oldVersion.upstreamLink.upstreamRef,
-        downstreamId: oldVersion.id,
-        state,
-        originalName,
-      });
-      updatedB.push({
-        name: displayName,
-        blockType: (newVersion.blockType || newVersion.containerType)!,
-        id: newVersion.id,
-        downstreamId: oldVersion.id,
-        state,
-      });
-      // Delete it from mapA as it is processed.
-      mapA.delete(newVersion.id);
-    }
-  }
-
-  // If there are remaining items in mapA, it means they were deleted in newVersion;
-  mapA.forEach((oldVersion) => {
-    updatedA.splice(oldVersion.index, 1, {
-      name: oldVersion.name,
-      blockType: normalizeContainerType(oldVersion.blockType),
-      id: oldVersion.upstreamLink.upstreamRef,
-      downstreamId: oldVersion.id,
-      state: 'removed',
-    });
-    updatedB.splice(oldVersion.index, 0, {
-      id: oldVersion.upstreamLink.upstreamRef,
-      name: oldVersion.name,
-      blockType: normalizeContainerType(oldVersion.blockType),
-      downstreamId: oldVersion.id,
-      state: 'removed',
-    });
-  });
-
-  // Create a map for id with index of newly updatedB array
-  for (let index = 0; index < updatedB.length; index++) {
-    const element = updatedB[index];
-    mapB.set(element[idKey], { ...element, index });
-  }
-
-  // Use new mapB for getting new index for added elements
-  addedA.forEach((addedRow) => {
-    updatedA.splice(mapB.get(addedRow.id)?.index!, 0, { ...addedRow, state: 'added' });
-  });
-
-  return [updatedA, updatedB];
-}
-
-export function isRowClickable(state?: ContainerState, blockType?: ContainerType) {
-  return state && blockType && ['modified', 'added', 'removed'].includes(state) && [
-    ContainerType.Section,
-    ContainerType.Subsection,
-    ContainerType.Unit,
-  ].includes(blockType);
-}

src/content-tags-drawer/ContentTagsCollapsible.jsx

@@ -112,6 +112,7 @@ const CustomLoadingIndicator = () => {
   return (
     <Spinner
       animation="border"
+      size="xl"
       screenReaderText={intl.formatMessage(messages.loadingMessage)}
     />
   );
@@ -435,8 +436,8 @@ const ContentTagsCollapsible = ({
                 onKeyDown={handleSelectOnKeyDown}
                 ref={/** @type {React.RefObject} */(selectRef)}
                 isMulti
-                isLoading={updateTags.isPending}
-                isDisabled={updateTags.isPending}
+                isLoading={updateTags.isLoading}
+                isDisabled={updateTags.isLoading}
                 name="tags-select"
                 placeholder={intl.formatMessage(messages.collapsibleAddTagsPlaceholderText)}
                 isSearchable

src/content-tags-drawer/ContentTagsCollapsible.scss

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

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

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

src/content-tags-drawer/ContentTagsDrawer.scss

@@ -16,7 +16,7 @@
 
   .tags-drawer-cancel-button:hover {
     background-color: transparent;
-    color: var(--pgn-color-gray-300) !important;
+    color: $gray-300 !important;
   }
 
   .other-description {
@@ -25,7 +25,7 @@
 
   .enable-taxonomies-button:not([disabled]):hover {
     background-color: transparent;
-    color: var(--pgn-color-info-900) !important;
+    color: $info-900 !important;
   }
 }
 
@@ -37,9 +37,3 @@
     min-height: 100vh;
   }
 }
-
-// Fix a bug with a toast on edit tags sheet component: can't click on close toast button
-// https://github.com/openedx/frontend-app-authoring/issues/1898
-#toast-root[data-focus-on-hidden] {
-  pointer-events: initial !important;
-}

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

@@ -34,7 +34,6 @@ const {
   languageWithoutTagsId,
   largeTagsId,
   emptyTagsId,
-  containerTagsId,
 } = mockContentTaxonomyTagsData;
 
 jest.mock('react-router-dom', () => ({
@@ -47,15 +46,14 @@ jest.mock('../library-authoring/common/context/SidebarContext', () => ({
   useSidebarContext: () => ({ sidebarAction: mockSidebarAction() }),
 }));
 
-const renderDrawer = (contentId, drawerParams = {}, renderPath = path, containerId = '') => {
-  const params = { contentId, containerId };
-  return render(
+const renderDrawer = (contentId, drawerParams = {}) => (
+  render(
     <ContentTagsDrawerSheetContext.Provider value={drawerParams}>
       <ContentTagsDrawer {...drawerParams} />
     </ContentTagsDrawerSheetContext.Provider>,
-    { path: renderPath, params },
-  );
-};
+    { path, params: { contentId } },
+  )
+);
 
 describe('<ContentTagsDrawer />', () => {
   beforeEach(async () => {
@@ -694,44 +692,6 @@ 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, {
-        queryKey: [
-          '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

@@ -89,6 +89,7 @@ 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,6 +149,7 @@ const ContentTagsDrawerVariantFooter = ({ onClose, readOnly }: ContentTagsDrawer
           : (
             <Spinner
               animation="border"
+              size="xl"
               screenReaderText={intl.formatMessage(messages.loadingMessage)}
             />
           )}
@@ -195,6 +197,7 @@ const ContentTagsComponentVariantFooter = ({ readOnly = false }: ContentTagsComp
             <div className="d-flex justify-content-center">
               <Spinner
                 animation="border"
+                size="xl"
                 screenReaderText={intl.formatMessage(messages.loadingMessage)}
               />
             </div>

src/content-tags-drawer/ContentTagsDropDownSelector.jsx

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

src/content-tags-drawer/TagsTree.scss

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

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

@@ -205,7 +205,7 @@ mockContentTaxonomyTagsData.emptyTagsId = 'block-v1:EmptyTagsOrg+STC1+2023_1+typ
 mockContentTaxonomyTagsData.emptyTags = {
   taxonomies: [],
 };
-mockContentTaxonomyTagsData.containerTagsId = 'lct:StagedTagsOrg:lib:unit:container_tags';
+mockContentTaxonomyTagsData.containerTagsId = 'lct:org:lib:unit:container_tags';
 mockContentTaxonomyTagsData.applyMock = () => jest.spyOn(api, 'getContentTaxonomyTagsData').mockImplementation(mockContentTaxonomyTagsData);
 
 /**

src/content-tags-drawer/data/apiHooks.jsx

@@ -1,3 +1,4 @@
+// @ts-check
 import { useMemo } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import {
@@ -7,7 +8,6 @@ import {
   useQueryClient,
 } from '@tanstack/react-query';
 import { useParams } from 'react-router';
-import { TagData, TagListData } from '@src/taxonomy/data/types';
 import {
   getTaxonomyTagsData,
   getContentTaxonomyTagsData,
@@ -17,16 +17,18 @@ import {
 } from './api';
 import { libraryAuthoringQueryKeys, libraryQueryPredicate, xblockQueryKeys } from '../../library-authoring/data/apiHooks';
 import { getLibraryId } from '../../generic/key-utils';
-import { UpdateTagsData } from './types';
+
+/** @typedef {import("../../taxonomy/data/types.js").TagListData} TagListData */
+/** @typedef {import("../../taxonomy/data/types.js").TagData} TagData */
 
 /**
  * Builds the query to get the taxonomy tags
- * @param taxonomyId The id of the taxonomy to fetch tags for
- * @param parentTag The tag whose children we're loading, if any
- * @param searchTerm The term passed in to perform search on tags
- * @param numPages How many pages of tags to load at this level
+ * @param {number} taxonomyId The id of the taxonomy to fetch tags for
+ * @param {string|null} parentTag The tag whose children we're loading, if any
+ * @param {string} searchTerm The term passed in to perform search on tags
+ * @param {number} numPages How many pages of tags to load at this level
  */
-export const useTaxonomyTagsData = (taxonomyId: number, parentTag: string | null = null, numPages = 1, searchTerm = '') => {
+export const useTaxonomyTagsData = (taxonomyId, parentTag = null, numPages = 1, searchTerm = '') => {
   const queryClient = useQueryClient();
 
   const queryFn = async ({ queryKey }) => {
@@ -34,7 +36,8 @@ export const useTaxonomyTagsData = (taxonomyId: number, parentTag: string | null
     return getTaxonomyTagsData(taxonomyId, { parentTag: parentTag || '', searchTerm, page });
   };
 
-  const queries: { queryKey: any[]; queryFn: typeof queryFn; staleTime: number }[] = [];
+  /** @type {{queryKey: any[], queryFn: typeof queryFn, staleTime: number}[]} */
+  const queries = [];
   for (let page = 1; page <= numPages; page++) {
     queries.push(
       { queryKey: ['taxonomyTags', taxonomyId, parentTag, page, searchTerm], queryFn, staleTime: Infinity },
@@ -51,7 +54,8 @@ export const useTaxonomyTagsData = (taxonomyId: number, parentTag: string | null
     const preLoadedData = new Map();
 
     const newTags = dataPages.map(result => {
-      const simplifiedTagsList: TagData[] = [];
+      /** @type {TagData[]} */
+      const simplifiedTagsList = [];
 
       result.data?.results?.forEach((tag) => {
         if (tag.parentValue === parentTag) {
@@ -69,7 +73,8 @@ export const useTaxonomyTagsData = (taxonomyId: number, parentTag: string | null
     // Store the pre-loaded descendants into the query cache:
     preLoadedData.forEach((tags, parentValue) => {
       const queryKey = ['taxonomyTags', taxonomyId, parentValue, 1, searchTerm];
-      const cachedData: TagListData = {
+      /** @type {TagListData} */
+      const cachedData = {
         next: '',
         previous: '',
         count: tags.length,
@@ -96,9 +101,9 @@ export const useTaxonomyTagsData = (taxonomyId: number, parentTag: string | null
 
 /**
  * Builds the query to get the taxonomy tags applied to the content object
- * @param contentId The ID of the content object to fetch the applied tags for (e.g. an XBlock usage key)
+ * @param {string} contentId The ID of the content object to fetch the applied tags for (e.g. an XBlock usage key)
  */
-export const useContentTaxonomyTagsData = (contentId: string) => (
+export const useContentTaxonomyTagsData = (contentId) => (
   useQuery({
     queryKey: ['contentTaxonomyTags', contentId],
     queryFn: () => getContentTaxonomyTagsData(contentId),
@@ -107,31 +112,38 @@ export const useContentTaxonomyTagsData = (contentId: string) => (
 
 /**
  * Builds the query to get meta data about the content object
- * @param contentId The id of the content object
- * @param enabled Flag to enable/disable the query
+ * @param {string} contentId The id of the content object (unit/component)
+ * @param {boolean} enabled Flag to enable/disable the query
  */
-export const useContentData = (contentId: string, enabled: boolean) => (
+export const useContentData = (contentId, enabled) => (
   useQuery({
     queryKey: ['contentData', contentId],
-    queryFn: () => getContentData(contentId),
+    queryFn: enabled ? () => getContentData(contentId) : undefined,
     enabled,
   })
 );
 
 /**
  * Builds the mutation to update the tags applied to the content object
- * @param contentId The id of the content object to update tags for
+ * @param {string} contentId The id of the content object to update tags for
  */
-export const useContentTaxonomyTagsUpdater = (contentId: string) => {
+export const useContentTaxonomyTagsUpdater = (contentId) => {
   const queryClient = useQueryClient();
   const unitIframe = window.frames['xblock-iframe'];
-  const { containerId } = useParams();
+  const { unitId } = useParams();
 
   return useMutation({
-    mutationFn: ({ tagsData }: { tagsData: Promise<UpdateTagsData[]> }) => (
-      updateContentTaxonomyTags(contentId, tagsData)
-    ),
-    onSettled: () => {
+    /**
+     * @type {import("@tanstack/react-query").MutateFunction<
+     *   any,
+     *   any,
+     *   {
+     *     tagsData: Promise<import("./types.js").UpdateTagsData[]>
+     *   }
+     * >}
+     */
+    mutationFn: ({ tagsData }) => updateContentTaxonomyTags(contentId, tagsData),
+    onSettled: /* istanbul ignore next */ () => {
       queryClient.invalidateQueries({ queryKey: ['contentTaxonomyTags', contentId] });
       /// Invalidate query with pattern on course outline
       let contentPattern;
@@ -145,13 +157,12 @@ export const useContentTaxonomyTagsUpdater = (contentId: string) => {
         // Obtain library id from contentId
         const libraryId = getLibraryId(contentId);
         // Invalidate component metadata to update tags count
-        queryClient.invalidateQueries({ queryKey: xblockQueryKeys.componentMetadata(contentId) });
+        queryClient.invalidateQueries(xblockQueryKeys.componentMetadata(contentId));
         // Invalidate content search to update tags count
-        queryClient.invalidateQueries({ queryKey: ['content_search'], predicate: (query) => libraryQueryPredicate(query, libraryId) });
-        // If the tags for an item were edited from a container page (Unit, Subsection, Section),
-        // invalidate children query to fetch count again.
-        if (containerId) {
-          queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.containerChildren(containerId) });
+        queryClient.invalidateQueries(['content_search'], { predicate: (query) => libraryQueryPredicate(query, libraryId) });
+        // If the tags for a compoent were edited from Unit page, invalidate children query to fetch count again.
+        if (unitId) {
+          queryClient.invalidateQueries(libraryAuthoringQueryKeys.containerChildren(unitId));
         }
       }
     },

src/course-checklist/AriaLiveRegion.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 
@@ -33,4 +33,4 @@ AriaLiveRegion.propTypes = {
   enableQuality: PropTypes.bool.isRequired,
 };
 
-export default AriaLiveRegion;
+export default injectIntl(AriaLiveRegion);

src/course-checklist/ChecklistSection/ChecklistItemBody.jsx

@@ -2,10 +2,11 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { ActionRow, Button, Icon } from '@openedx/paragon';
+import { useSelector } from 'react-redux';
 import { CheckCircle, RadioButtonUnchecked } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 
-import { useWaffleFlags } from '../../data/apiHooks';
+import { getWaffleFlags } from '../../data/selectors';
 import messages from './messages';
 
 const getUpdateLinks = (courseId, waffleFlags) => {
@@ -34,7 +35,7 @@ const ChecklistItemBody = ({
   isCompleted,
 }) => {
   const intl = useIntl();
-  const waffleFlags = useWaffleFlags(courseId);
+  const waffleFlags = useSelector(getWaffleFlags);
   const updateLinks = getUpdateLinks(courseId, waffleFlags);
 
   return (

src/course-checklist/ChecklistSection/ChecklistItemComment.jsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
-import { FormattedMessage, FormattedNumber } from '@edx/frontend-platform/i18n';
+import { useSelector } from 'react-redux';
+import { injectIntl, FormattedMessage, FormattedNumber } from '@edx/frontend-platform/i18n';
 import { Icon } from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 import { ModeComment } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
-import { useWaffleFlags } from '../../data/apiHooks';
+import { getWaffleFlags } from '../../data/selectors';
 import messages from './messages';
 
 const ChecklistItemComment = ({
@@ -12,7 +13,7 @@ const ChecklistItemComment = ({
   checkId,
   data,
 }) => {
-  const waffleFlags = useWaffleFlags(courseId);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const getPathToCourseOutlinePage = (assignmentId) => (waffleFlags.useNewCourseOutlinePage
     ? `/course/${courseId}#${assignmentId}` : `${getConfig().STUDIO_BASE_URL}/course/${courseId}#${assignmentId}`);
@@ -127,4 +128,4 @@ ChecklistItemComment.propTypes = {
   ]).isRequired,
 };
 
-export default ChecklistItemComment;
+export default injectIntl(ChecklistItemComment);

src/course-checklist/ChecklistSection/ChecklistSection.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { injectIntl } from '@edx/frontend-platform/i18n';
 import { Container, Stack } from '@openedx/paragon';
+
 import { LoadingSpinner } from '../../generic/Loading';
 import { getCompletionCount, useChecklistState } from './hooks';
 import ChecklistItemBody from './ChecklistItemBody';
@@ -127,4 +129,4 @@ ChecklistSection.propTypes = {
   isLoading: PropTypes.bool.isRequired,
 };
 
-export default ChecklistSection;
+export default injectIntl(ChecklistSection);

src/course-checklist/ChecklistSection/ChecklistSection.scss

@@ -13,10 +13,10 @@
 
 .assignment-list {
   display: inline;
-  padding-inline-start: var(--pgn-spacing-spacer-1);
+  padding-inline-start: map-get($spacers, 1);
 }
 
 //complete checklist item style
 .checklist-item-complete {
-  box-shadow: -5px 0 0 0 var(--pgn-color-success-500);
+  box-shadow: -5px 0 0 0 $success-500;
 }

src/course-checklist/ChecklistSection/ChecklistSection.test.jsx

@@ -4,7 +4,9 @@ import {
   initializeMocks, render, screen, within,
 } from '../../testUtils';
 import { getApiWaffleFlagsUrl } from '../../data/api';
+import { fetchWaffleFlags } from '../../data/thunks';
 import { generateCourseLaunchData } from '../factories/mockApiResponses';
+import { executeThunk } from '../../utils';
 import { checklistItems } from './utils/courseChecklistData';
 import messages from './messages';
 
@@ -32,7 +34,7 @@ const renderComponent = (props) => {
 
 describe('ChecklistSection', () => {
   beforeEach(async () => {
-    const { axiosMock } = initializeMocks();
+    const { axiosMock, reduxStore } = initializeMocks();
     axiosMock
       .onGet(getApiWaffleFlagsUrl(courseId))
       .reply(200, {
@@ -41,6 +43,7 @@ describe('ChecklistSection', () => {
         useNewScheduleDetailsPage: true,
         useNewCourseOutlinePage: true,
       });
+    await executeThunk(fetchWaffleFlags(courseId), reduxStore.dispatch);
   });
 
   it('a heading using the dataHeading prop', () => {

src/course-checklist/ChecklistSection/messages.js

@@ -71,6 +71,16 @@ const messages = defineMessages({
     defaultMessage: 'Learners engage best with short videos followed by opportunities to practice. Ensure that 80% or more of course videos are less than 10 minutes long.',
     description: 'Description for a section that prompts a user to follow best practices for video length',
   },
+  mobileFriendlyVideoShortDescription: {
+    id: 'mobileFriendlyVideoShortDescription',
+    defaultMessage: 'Create mobile-friendly video',
+    description: 'Label for a section that describes mobile friendly videos',
+  },
+  mobileFriendlyVideoLongDescription: {
+    id: 'mobileFriendlyVideoLongDescription',
+    defaultMessage: 'Mobile-friendly videos can be viewed across all supported devices. Ensure that at least 90% of course videos are mobile friendly by uploading course videos to the edX video pipeline.',
+    description: 'Description for a section that prompts a user to follow best practices for mobile friendly videos',
+  },
   diverseSequencesShortDescription: {
     id: 'diverseSequencesShortDescription',
     defaultMessage: 'Build diverse learning sequences',