feat: add temporary message alert in sections settings tab in libraries (#2734) (#2766)

- add temporary message alert in sections settings tab in libraries
- increase sidebar width to remove `More` option and display all tabs
together

(cherry picked from commit 3eeca244d7)

.env

@@ -41,10 +41,11 @@ 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

@@ -44,10 +44,11 @@ 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

@@ -36,9 +36,9 @@ ENABLE_CERTIFICATE_PAGE=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'

.github/pull_request_template.md

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

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

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

.github/workflows/add-to-cc-board.yml

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

.nvmrc

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

CODEOWNERS

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

README.rst

@@ -165,21 +165,7 @@ Feature: New React XBlock Editors
 
 .. image:: ./docs/readme-images/feature-problem-editor.png
 
-This allows an operator to enable the use of new React editors for the HTML, Video, and Problem XBlocks, all of which are provided here.
-
-Requirements
-------------
-
-* ``edx-platform`` Waffle flags:
-
-  * ``new_core_editors.use_new_text_editor``: must be enabled for the new HTML Xblock editor to be used in Studio
-  * ``new_core_editors.use_new_video_editor``: must be enabled for the new Video Xblock editor to be used in Studio
-  * ``new_core_editors.use_new_problem_editor``: must be enabled for the new Problem Xblock editor to be used in Studio
-
-Feature Description
--------------------
-
-When a corresponding waffle flag is set, upon editing a block in Studio, the view is rendered by this MFE instead of by the XBlock's authoring view.  The user remains in Studio.
+New React editors for the HTML, Video, and Problem XBlocks are provided here and are rendered by this MFE instead of by the XBlock's authoring view.
 
 Feature: New Proctoring Exams View
 ==================================
@@ -193,10 +179,6 @@ Requirements
 
   * ``ZENDESK_*``: necessary if automatic ZenDesk ticket creation is desired
 
-* ``edx-platform`` Feature flags:
-
-  * ``ENABLE_EXAM_SETTINGS_HTML_VIEW``: this feature flag must be enabled for the link to the settings view to be shown
-
 * `edx-exams <https://github.com/edx/edx-exams>`_: for this feature to work, the ``edx-exams`` IDA must be deployed and its API accessible by the browser
 
 Configuration
@@ -221,16 +203,6 @@ Feature: Advanced Settings
 
 .. image:: ./docs/readme-images/feature-advanced-settings.png
 
-Requirements
-------------
-
-* ``edx-platform`` Waffle flags:
-
-  * ``contentstore.new_studio_mfe.use_new_advanced_settings_page``: this feature flag must be enabled for the link to the settings view to be shown. It can be enabled on a per-course basis.
-
-Feature Description
--------------------
-
 In Studio, the "Advanced Settings" page for each enabled course will now be served by this frontend, instead of the UI built into edx-platform. The advanced settings page holds many different settings for the course, such as what features or XBlocks are enabled.
 
 Feature: Files & Uploads
@@ -238,16 +210,6 @@ Feature: Files & Uploads
 
 .. image:: ./docs/readme-images/feature-files-uploads.png
 
-Requirements
-------------
-
-* ``edx-platform`` Waffle flags:
-
-  * ``contentstore.new_studio_mfe.use_new_files_uploads_page``: this feature flag must be enabled for the link to the Files & Uploads page to go to the MFE. It can be enabled on a per-course basis.
-
-Feature Description
--------------------
-
 In Studio, the "Files & Uploads" page for each enabled course will now be served by this frontend, instead of the UI built into edx-platform. This page allows managing static asset files like PDFs, images, etc. used for the course.
 
 Feature: Course Updates
@@ -255,26 +217,11 @@ Feature: Course Updates
 
 .. image:: ./docs/readme-images/feature-course-updates.png
 
-Requirements
-------------
-
-* ``edx-platform`` Waffle flags:
-
-  * ``contentstore.new_studio_mfe.use_new_updates_page``: this feature flag must be enabled.
-
 Feature: Import/Export Pages
 ============================
 
 .. image:: ./docs/readme-images/feature-export.png
 
-Requirements
-------------
-
-* ``edx-platform`` Waffle flags:
-
-  * ``contentstore.new_studio_mfe.use_new_export_page``: this feature flag will change the CMS to link to the new export page.
-  * ``contentstore.new_studio_mfe.use_new_import_page``: this feature flag will change the CMS to link to the new import page.
-
 Feature: Tagging/Taxonomy Pages
 ================================
 
@@ -380,6 +327,20 @@ For more information about these options, see the `Getting Help`_ page.
 .. _Getting Help: https://openedx.org/community/connect
 
 
+Legacy Studio
+*************
+
+If you would like to use legacy studio for certain features, you can set the following waffle flags in ``edx-platform``:
+  * ``legacy_studio.text_editor``: loads the legacy HTML Xblock editor when editing a text block
+  * ``legacy_studio.video_editor``: loads the legacy Video editor when editing a video block
+  * ``legacy_studio.problem_editor``: loads the legacy Problem editor when editing a problem block
+  * ``legacy_studio.advanced_settings``: Advanced Settings page
+  * ``legacy_studio.updates``: Updates page
+  * ``legacy_studio.export``: Export page
+  * ``legacy_studio.import``: Import page
+  * ``legacy_studio.files_uploads``: Files page
+  * ``legacy_studio.exam_settings``: loads the legacy Exam Settings
+
 License
 *******
 

catalog-info.yaml

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

codecov.yml

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

package.json

@@ -15,7 +15,6 @@
     "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",
@@ -46,7 +45,7 @@
     "@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": "^6.2.0",
+    "@edx/frontend-component-header": "^8.1.0",
     "@edx/frontend-enterprise-hotjar": "^7.2.0",
     "@edx/frontend-platform": "^8.4.0",
     "@edx/openedx-atlas": "^0.7.0",
@@ -60,17 +59,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.5.0",
+    "@openedx/frontend-build": "^14.6.2",
     "@openedx/frontend-plugin-framework": "^1.7.0",
     "@openedx/paragon": "^23.5.0",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
-    "@tanstack/react-query": "4.36.1",
-    "@tinymce/tinymce-react": "^3.14.0",
+    "@tanstack/react-query": "5.90.5",
+    "@tinymce/tinymce-react": "^6.0.0",
     "classnames": "2.5.1",
     "codemirror": "^6.0.0",
     "email-validator": "2.0.4",
-    "fast-xml-parser": "^4.0.10",
+    "fast-xml-parser": "^5.0.0",
     "file-saver": "^2.0.5",
     "formik": "2.4.6",
     "frontend-components-tinymce-advanced-plugins": "^1.0.3",
@@ -88,30 +87,31 @@
     "react-onclickoutside": "^6.13.0",
     "react-redux": "7.2.9",
     "react-responsive": "9.0.2",
-    "react-router": "6.27.0",
-    "react-router-dom": "6.27.0",
-    "react-select": "5.10.1",
+    "react-router": "6.30.1",
+    "react-router-dom": "6.30.1",
+    "react-select": "5.10.2",
     "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "4.4.5",
-    "redux": "4.0.5",
+    "redux": "4.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.5",
     "tinymce": "^5.10.4",
-    "universal-cookie": "^4.0.4",
+    "universal-cookie": "^8.0.0",
     "uuid": "^11.1.0",
     "xmlchecker": "^0.1.0",
     "yup": "0.32.11"
   },
   "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": "^13.2.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/lodash": "^4.17.17",
-    "axios-mock-adapter": "1.22.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "axios-mock-adapter": "2.1.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "fetch-mock-jest": "^1.5.1",
     "jest-canvas-mock": "^2.5.2",

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

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

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

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

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

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

plugins/course-apps/proctoring/messages.js

@@ -1,11 +1,6 @@
 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.',

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, fetchWaffleFlags } from './data/thunks';
+import { fetchCourseDetail } from './data/thunks';
 import { useModel } from './generic/model-store';
 import NotFoundAlert from './generic/NotFoundAlert';
 import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
@@ -21,7 +21,6 @@ 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, fetchWaffleFlags } from './data/thunks';
+import { fetchCourseDetail } from './data/thunks';
 import { getApiWaffleFlagsUrl } from './data/api';
 import { initializeMocks, render } from './testUtils';
 
@@ -26,7 +26,6 @@ beforeEach(async () => {
   axiosMock
     .onGet(getApiWaffleFlagsUrl(courseId))
     .reply(200, {});
-  await executeThunk(fetchWaffleFlags(courseId), store.dispatch);
 });
 
 describe('Editor Pages Load no header', () => {
@@ -102,4 +101,20 @@ 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 } from './course-unit';
+import { CourseUnit, SubsectionUnitRedirect } from './course-unit';
 import { Certificates } from './certificates';
 import CourseExportPage from './export-page/CourseExportPage';
 import CourseOptimizerPage from './optimizer-page/CourseOptimizerPage';
@@ -82,6 +82,10 @@ 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,7 +1,5 @@
 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';
@@ -11,7 +9,6 @@ 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', () => ({
@@ -51,12 +48,10 @@ jest.mock('./custom-pages/CustomPages', () => (props) => {
 
 describe('<CourseAuthoringRoutes>', () => {
   beforeEach(async () => {
-    const { axiosMock, reduxStore } = initializeMocks();
-    store = reduxStore;
+    const { axiosMock } = initializeMocks();
     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

@@ -0,0 +1,16 @@
+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.ts

@@ -1,3 +1,4 @@
 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 { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Hyperlink, MailtoLink, Stack } from '@openedx/paragon';
 
 import messages from './messages';
@@ -95,4 +95,4 @@ AccessibilityBody.propTypes = {
   email: PropTypes.string.isRequired,
 };
 
-export default injectIntl(AccessibilityBody);
+export default AccessibilityBody;

src/accessibility-page/AccessibilityForm/AccessibilityForm.jsx

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

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

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

src/accessibility-page/AccessibilityPage.jsx

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

src/accessibility-page/AccessibilityPage.test.jsx

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

src/accessibility-page/constants.ts

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

src/accessibility-page/data/thunks.js

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

src/advanced-settings/AdvancedSettings.jsx

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

src/advanced-settings/AdvancedSettings.test.jsx

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

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

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

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

@@ -1,4 +1,3 @@
-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';
@@ -22,14 +21,12 @@ jest.mock('react-textarea-autosize', () => jest.fn((props) => (
   <textarea
     {...props}
     onFocus={() => {}}
-    onBlur={() => {}}
   />
 )));
 
 const RootWrapper = () => (
   <IntlProvider locale="en">
     <SettingCard
-      intl={{}}
       isOn
       name="settingName"
       setEdited={setEdited}
@@ -58,7 +55,6 @@ describe('<SettingCard />', () => {
     const { getByText } = render(
       <IntlProvider locale="en">
         <SettingCard
-          intl={{}}
           isOn
           name="settingName"
           setEdited={setEdited}
@@ -79,18 +75,19 @@ describe('<SettingCard />', () => {
     expect(queryByText(messages.deprecated.defaultMessage)).toBeNull();
   });
   it('calls setEdited on blur', async () => {
+    const user = userEvent.setup();
     const { getByLabelText } = render(<RootWrapper />);
     const inputBox = getByLabelText(/Setting Name/i);
     fireEvent.focus(inputBox);
-    userEvent.clear(inputBox);
-    userEvent.type(inputBox, '3, 2, 1');
+    await user.clear(inputBox);
+    await user.type(inputBox, '3, 2, 1');
     await waitFor(() => {
       expect(inputBox).toHaveValue('3, 2, 1');
     });
-    await (async () => {
+    await user.tab(); // blur off of the input.
+    await waitFor(() => {
       expect(setEdited).toHaveBeenCalled();
       expect(handleBlur).toHaveBeenCalled();
     });
-    fireEvent.focusOut(inputBox);
   });
 });

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

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

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

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

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

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

src/authz/constants.ts

@@ -0,0 +1,16 @@
+export const CONTENT_LIBRARY_PERMISSIONS = {
+  DELETE_LIBRARY: 'content_libraries.delete_library',
+  MANAGE_LIBRARY_TAGS: 'content_libraries.manage_library_tags',
+  VIEW_LIBRARY: 'content_libraries.view_library',
+
+  EDIT_LIBRARY_CONTENT: 'content_libraries.edit_library_content',
+  PUBLISH_LIBRARY_CONTENT: 'content_libraries.publish_library_content',
+  REUSE_LIBRARY_CONTENT: 'content_libraries.reuse_library_content',
+
+  CREATE_LIBRARY_COLLECTION: 'content_libraries.create_library_collection',
+  EDIT_LIBRARY_COLLECTION: 'content_libraries.edit_library_collection',
+  DELETE_LIBRARY_COLLECTION: 'content_libraries.delete_library_collection',
+
+  MANAGE_LIBRARY_TEAM: 'content_libraries.manage_library_team',
+  VIEW_LIBRARY_TEAM: 'content_libraries.view_library_team',
+};

src/authz/data/api.ts

@@ -0,0 +1,41 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import {
+  PermissionValidationAnswer,
+  PermissionValidationQuery,
+  PermissionValidationRequestItem,
+  PermissionValidationResponseItem,
+} from '@src/authz/types';
+import { getApiUrl } from './utils';
+
+export const validateUserPermissions = async (
+  query: PermissionValidationQuery,
+): Promise<PermissionValidationAnswer> => {
+  // Convert the validations query object into an array for the API request
+  const request: PermissionValidationRequestItem[] = Object.values(query);
+
+  const { data }: { data: PermissionValidationResponseItem[] } = await getAuthenticatedHttpClient().post(
+    getApiUrl('/api/authz/v1/permissions/validate/me'),
+    request,
+  );
+
+  // Convert the API response back into the expected answer format
+  const result: PermissionValidationAnswer = {};
+  data.forEach((item: { action: string; scope?: string; allowed: boolean }) => {
+    const key = Object.keys(query).find(
+      (k) => query[k].action === item.action
+        && query[k].scope === item.scope,
+    );
+    if (key) {
+      result[key] = item.allowed;
+    }
+  });
+
+  // Fill any missing keys with false
+  Object.keys(query).forEach((key) => {
+    if (!(key in result)) {
+      result[key] = false;
+    }
+  });
+
+  return result;
+};

src/authz/data/apiHooks.test.tsx

@@ -0,0 +1,168 @@
+import { act, ReactNode } from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { useUserPermissions } from './apiHooks';
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(),
+}));
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  return wrapper;
+};
+
+const singlePermission = {
+  canRead: {
+    action: 'example.read',
+    scope: 'lib:example-org:test-lib',
+  },
+};
+
+const mockValidSinglePermission = [
+  { action: 'example.read', scope: 'lib:example-org:test-lib', allowed: true },
+];
+
+const mockInvalidSinglePermission = [
+  { action: 'example.read', scope: 'lib:example-org:test-lib', allowed: false },
+];
+
+const mockEmptyPermissions = [
+  // No permissions returned
+];
+
+const multiplePermissions = {
+  canRead: {
+    action: 'example.read',
+    scope: 'lib:example-org:test-lib',
+  },
+  canWrite: {
+    action: 'example.write',
+    scope: 'lib:example-org:test-lib',
+  },
+};
+
+const mockValidMultiplePermissions = [
+  { action: 'example.read', scope: 'lib:example-org:test-lib', allowed: true },
+  { action: 'example.write', scope: 'lib:example-org:test-lib', allowed: true },
+];
+
+const mockInvalidMultiplePermissions = [
+  { action: 'example.read', scope: 'lib:example-org:test-lib', allowed: false },
+  { action: 'example.write', scope: 'lib:example-org:test-lib', allowed: false },
+];
+
+describe('useUserPermissions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('returns allowed true when permission is valid', async () => {
+    getAuthenticatedHttpClient.mockReturnValue({
+      post: jest.fn().mockResolvedValueOnce({ data: mockValidSinglePermission }),
+    });
+
+    const { result } = renderHook(() => useUserPermissions(singlePermission), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current).toBeDefined());
+    await waitFor(() => expect(result.current.data).toBeDefined());
+
+    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+    expect(result.current.data!.canRead).toBe(true);
+  });
+
+  it('returns allowed false when permission is invalid', async () => {
+    getAuthenticatedHttpClient.mockReturnValue({
+      post: jest.fn().mockResolvedValue({ data: mockInvalidSinglePermission }),
+    });
+
+    const { result } = renderHook(() => useUserPermissions(singlePermission), {
+      wrapper: createWrapper(),
+    });
+    await waitFor(() => expect(result.current).toBeDefined());
+    await waitFor(() => expect(result.current.data).toBeDefined());
+
+    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+    expect(result.current.data!.canRead).toBe(false);
+  });
+
+  it('returns allowed true when multiple permissions are valid', async () => {
+    getAuthenticatedHttpClient.mockReturnValue({
+      post: jest.fn().mockResolvedValueOnce({ data: mockValidMultiplePermissions }),
+    });
+
+    const { result } = renderHook(() => useUserPermissions(multiplePermissions), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current).toBeDefined());
+    await waitFor(() => expect(result.current.data).toBeDefined());
+
+    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+    expect(result.current.data!.canRead).toBe(true);
+    expect(result.current.data!.canWrite).toBe(true);
+  });
+
+  it('returns allowed false when multiple permissions are invalid', async () => {
+    getAuthenticatedHttpClient.mockReturnValue({
+      post: jest.fn().mockResolvedValue({ data: mockInvalidMultiplePermissions }),
+    });
+
+    const { result } = renderHook(() => useUserPermissions(multiplePermissions), {
+      wrapper: createWrapper(),
+    });
+    await waitFor(() => expect(result.current).toBeDefined());
+    await waitFor(() => expect(result.current.data).toBeDefined());
+
+    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+    expect(result.current.data!.canRead).toBe(false);
+    expect(result.current.data!.canWrite).toBe(false);
+  });
+
+  it('returns allowed false when the permission is not included in the server response', async () => {
+    getAuthenticatedHttpClient.mockReturnValue({
+      post: jest.fn().mockResolvedValue({ data: mockEmptyPermissions }),
+    });
+
+    const { result } = renderHook(() => useUserPermissions(singlePermission), {
+      wrapper: createWrapper(),
+    });
+    await waitFor(() => expect(result.current).toBeDefined());
+    await waitFor(() => expect(result.current.data).toBeDefined());
+
+    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+    expect(result.current.data!.canRead).toBe(false);
+  });
+
+  it('handles error when the API call fails', async () => {
+    const mockError = new Error('API Error');
+
+    getAuthenticatedHttpClient.mockReturnValue({
+      post: jest.fn().mockRejectedValue(new Error('API Error')),
+    });
+
+    try {
+      act(() => {
+        renderHook(() => useUserPermissions(singlePermission), {
+          wrapper: createWrapper(),
+        });
+      });
+    } catch (error) {
+      expect(error).toEqual(mockError); // Check for the expected error
+    }
+  });
+});

src/authz/data/apiHooks.ts

@@ -0,0 +1,36 @@
+import { useQuery } from '@tanstack/react-query';
+import { PermissionValidationAnswer, PermissionValidationQuery } from '@src/authz/types';
+import { validateUserPermissions } from './api';
+
+const adminConsoleQueryKeys = {
+  all: ['authz'],
+  permissions: (permissions: PermissionValidationQuery) => [...adminConsoleQueryKeys.all, 'validatePermissions', permissions] as const,
+};
+
+/**
+ * React Query hook to validate if the current user has permissions over a certain object in the instance.
+ * It helps to:
+ * - Determine whether the current user can access certain object.
+ * - Provide role-based rendering logic for UI components.
+ *
+ * @param permissions - A key/value map of objects and actions to validate.
+ * The key is an arbitrary string to identify the permission check,
+ * and the value is an object containing the action and optional scope.
+ *
+ * @example
+ * const { isLoading, data } = useUserPermissions({
+ *     canRead: {
+ *         action: "content_libraries.view_library",
+ *         scope: "lib:OpenedX:CSPROB"
+ *      }
+ *    });
+ * if (data.canRead) { ... }
+ *
+ */
+export const useUserPermissions = (
+  permissions: PermissionValidationQuery,
+) => useQuery<PermissionValidationAnswer, Error>({
+  queryKey: adminConsoleQueryKeys.permissions(permissions),
+  queryFn: () => validateUserPermissions(permissions),
+  retry: false,
+});

src/authz/data/utils.ts

@@ -0,0 +1,4 @@
+import { getConfig } from '@edx/frontend-platform';
+
+export const getApiUrl = (path: string) => `${getConfig().LMS_BASE_URL}${path || ''}`;
+export const getStudioApiUrl = (path: string) => `${getConfig().STUDIO_BASE_URL}${path || ''}`;

src/authz/types.ts

@@ -0,0 +1,16 @@
+export interface PermissionValidationRequestItem {
+  action: string;
+  scope?: string;
+}
+
+export interface PermissionValidationResponseItem extends PermissionValidationRequestItem {
+  allowed: boolean;
+}
+
+export interface PermissionValidationQuery {
+  [permissionKey: string]: PermissionValidationRequestItem;
+}
+
+export interface PermissionValidationAnswer {
+  [permissionKey: string]: boolean;
+}

src/certificates/Certificates.test.jsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { render, waitFor } from '@testing-library/react';
+import { render, screen, 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,6 +30,7 @@ const initialState = {
 };
 
 const defaultProps = {
+  index: 0,
   ...signatoriesMock[0],
   showDeleteButton: true,
   isEdit: true,
@@ -60,50 +61,59 @@ describe('Signatory Component', () => {
   });
 
   it('handles input change', async () => {
+    const user = userEvent.setup();
     const handleChange = jest.fn();
-    const { getByPlaceholderText } = renderSignatory({ ...defaultProps, handleChange });
-    const input = getByPlaceholderText(messages.namePlaceholder.defaultMessage);
+    renderSignatory({ ...defaultProps, handleChange });
+    const input = screen.getByPlaceholderText(messages.namePlaceholder.defaultMessage);
     const newInputValue = 'Jane Doe';
 
-    userEvent.type(input, newInputValue, { name: 'signatories[0].name' });
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(input.value).not.toBe(newInputValue);
+    await user.type(input, newInputValue);
 
-    waitFor(() => {
-      expect(handleChange).toHaveBeenCalledWith(expect.anything());
-      expect(input.value).toBe(newInputValue);
+    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);
     });
   });
 
-  it('opens image upload modal on button click', () => {
-    const { getByRole, queryByRole } = renderSignatory(defaultProps);
+  it('opens image upload modal on button click', async () => {
+    const user = userEvent.setup();
+    const { getByRole, queryByTestId } = renderSignatory(defaultProps);
     const replaceButton = getByRole(
       'button',
       { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModalReplace.defaultMessage) },
     );
 
-    expect(queryByRole('presentation')).not.toBeInTheDocument();
+    expect(queryByTestId('dropzone-container')).not.toBeInTheDocument();
 
-    userEvent.click(replaceButton);
+    await user.click(replaceButton);
 
-    expect(getByRole('presentation')).toBeInTheDocument();
+    expect(queryByTestId('dropzone-container')).toBeInTheDocument();
   });
 
   it('shows confirm modal on delete icon click', async () => {
+    const user = userEvent.setup();
     const { getByLabelText, getByText } = renderSignatory(defaultProps);
     const deleteIcon = getByLabelText(commonMessages.deleteTooltip.defaultMessage);
 
-    userEvent.click(deleteIcon);
+    await user.click(deleteIcon);
 
     expect(getByText(messages.deleteSignatoryConfirmationMessage.defaultMessage)).toBeInTheDocument();
   });
 
-  it('cancels deletion of a signatory', () => {
+  it('cancels deletion of a signatory', async () => {
+    const user = userEvent.setup();
     const { getByRole } = renderSignatory(defaultProps);
 
     const deleteIcon = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
-    userEvent.click(deleteIcon);
+    await user.click(deleteIcon);
 
     const cancelButton = getByRole('button', { name: commonMessages.cardCancel.defaultMessage });
-    userEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     expect(defaultProps.handleDeleteSignatory).not.toHaveBeenCalled();
   });

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

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

src/certificates/data/api.js

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

src/certificates/data/slice.js

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

src/certificates/data/thunks.js

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

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

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

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

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

src/constants.ts

@@ -7,6 +7,7 @@ export const STATEFUL_BUTTON_STATES = {
   default: 'default',
   pending: 'pending',
   error: 'error',
+  disable: 'disable',
 };
 
 export const USER_ROLES = {
@@ -43,7 +44,7 @@ export const COURSE_CREATOR_STATES = {
   granted: 'granted',
   denied: 'denied',
   disallowedForThisSite: 'disallowed_for_this_site',
-};
+} as const;
 
 export const DECODED_ROUTES = {
   COURSE_UNIT: [
@@ -61,6 +62,8 @@ 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';
@@ -105,4 +108,11 @@ 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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,162 @@
+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

@@ -0,0 +1,300 @@
+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

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,116 @@
+/* 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

@@ -0,0 +1,30 @@
+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

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

src/container-comparison/messages.ts

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,359 @@
+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

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

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

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

src/content-tags-drawer/ContentTagsDrawer.scss

@@ -37,3 +37,9 @@
     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,6 +34,7 @@ const {
   languageWithoutTagsId,
   largeTagsId,
   emptyTagsId,
+  containerTagsId,
 } = mockContentTaxonomyTagsData;
 
 jest.mock('react-router-dom', () => ({
@@ -46,14 +47,15 @@ jest.mock('../library-authoring/common/context/SidebarContext', () => ({
   useSidebarContext: () => ({ sidebarAction: mockSidebarAction() }),
 }));
 
-const renderDrawer = (contentId, drawerParams = {}) => (
-  render(
+const renderDrawer = (contentId, drawerParams = {}, renderPath = path, containerId = '') => {
+  const params = { contentId, containerId };
+  return render(
     <ContentTagsDrawerSheetContext.Provider value={drawerParams}>
       <ContentTagsDrawer {...drawerParams} />
     </ContentTagsDrawerSheetContext.Provider>,
-    { path, params: { contentId } },
-  )
-);
+    { path: renderPath, params },
+  );
+};
 
 describe('<ContentTagsDrawer />', () => {
   beforeEach(async () => {
@@ -692,6 +694,44 @@ 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,7 +89,6 @@ const ContentTagsDrawerTitle = () => {
           <div className="d-flex justify-content-center align-items-center flex-column">
             <Spinner
               animation="border"
-              size="xl"
               screenReaderText={intl.formatMessage(messages.loadingMessage)}
             />
           </div>
@@ -149,7 +148,6 @@ const ContentTagsDrawerVariantFooter = ({ onClose, readOnly }: ContentTagsDrawer
           : (
             <Spinner
               animation="border"
-              size="xl"
               screenReaderText={intl.formatMessage(messages.loadingMessage)}
             />
           )}
@@ -197,7 +195,6 @@ const ContentTagsComponentVariantFooter = ({ readOnly = false }: ContentTagsComp
             <div className="d-flex justify-content-center">
               <Spinner
                 animation="border"
-                size="xl"
                 screenReaderText={intl.formatMessage(messages.loadingMessage)}
               />
             </div>

src/content-tags-drawer/ContentTagsDropDownSelector.jsx

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

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

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

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

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

src/course-checklist/AriaLiveRegion.jsx

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

src/course-checklist/ChecklistSection/ChecklistItemBody.jsx

@@ -2,11 +2,10 @@ 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 { getWaffleFlags } from '../../data/selectors';
+import { useWaffleFlags } from '../../data/apiHooks';
 import messages from './messages';
 
 const getUpdateLinks = (courseId, waffleFlags) => {
@@ -35,7 +34,7 @@ const ChecklistItemBody = ({
   isCompleted,
 }) => {
   const intl = useIntl();
-  const waffleFlags = useSelector(getWaffleFlags);
+  const waffleFlags = useWaffleFlags(courseId);
   const updateLinks = getUpdateLinks(courseId, waffleFlags);
 
   return (

src/course-checklist/ChecklistSection/ChecklistItemComment.jsx

@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
-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 { getWaffleFlags } from '../../data/selectors';
+import { useWaffleFlags } from '../../data/apiHooks';
 import messages from './messages';
 
 const ChecklistItemComment = ({
@@ -13,7 +12,7 @@ const ChecklistItemComment = ({
   checkId,
   data,
 }) => {
-  const waffleFlags = useSelector(getWaffleFlags);
+  const waffleFlags = useWaffleFlags(courseId);
 
   const getPathToCourseOutlinePage = (assignmentId) => (waffleFlags.useNewCourseOutlinePage
     ? `/course/${courseId}#${assignmentId}` : `${getConfig().STUDIO_BASE_URL}/course/${courseId}#${assignmentId}`);

src/course-checklist/ChecklistSection/ChecklistSection.jsx

@@ -1,8 +1,6 @@
 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';
@@ -129,4 +127,4 @@ ChecklistSection.propTypes = {
   isLoading: PropTypes.bool.isRequired,
 };
 
-export default injectIntl(ChecklistSection);
+export default ChecklistSection;

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

@@ -4,9 +4,7 @@ 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';
 
@@ -34,7 +32,7 @@ const renderComponent = (props) => {
 
 describe('ChecklistSection', () => {
   beforeEach(async () => {
-    const { axiosMock, reduxStore } = initializeMocks();
+    const { axiosMock } = initializeMocks();
     axiosMock
       .onGet(getApiWaffleFlagsUrl(courseId))
       .reply(200, {
@@ -43,7 +41,6 @@ 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,16 +71,6 @@ 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',

src/course-checklist/ChecklistSection/utils/courseChecklistData.jsx

@@ -36,10 +36,6 @@ export const checklistItems = {
       id: 'videoDuration',
       pacingTypeFilter: filters.ALL,
     },
-    {
-      id: 'mobileFriendlyVideo',
-      pacingTypeFilter: filters.ALL,
-    },
     {
       id: 'diverseSequences',
       pacingTypeFilter: filters.ALL,

src/course-checklist/ChecklistSection/utils/courseChecklistValidators.js

@@ -35,18 +35,8 @@ export const hasAssignmentDeadlines = (assignments, dates) => {
 
 export const hasShortVideoDuration = (videos) => {
   if (videos.totalNumber === 0) {
-    return true;
-  } if (videos.totalNumber > 0 && videos.durations.median <= 600) {
-    return true;
-  }
-
-  return false;
-};
-
-export const hasMobileFriendlyVideos = (videos) => {
-  if (videos.totalNumber === 0) {
-    return true;
-  } if (videos.totalNumber > 0 && (videos.numMobileEncoded / videos.totalNumber) >= 0.9) {
+    return false;
+  } if (videos.totalNumber > 0 && videos.durations.median !== null && videos.durations.median <= 600) {
     return true;
   }
 
@@ -57,7 +47,7 @@ export const hasDiverseSequences = (subsections) => {
   if (subsections.totalVisible === 0) {
     return false;
   } if (subsections.totalVisible > 0) {
-    return ((subsections.numWithOneBlockType / subsections.totalVisible) < 0.2);
+    return ((subsections.numWithOneBlockType / subsections.totalVisible) <= 0.2);
   }
 
   return false;
@@ -68,7 +58,7 @@ export const hasWeeklyHighlights = sections => (
 );
 
 export const hasShortUnitDepth = units => (
-  units.numBlocks.median <= 3
+  units.numBlocks.median <= 3 && units.totalVisible > 0
 );
 
 export const hasProctoringEscalationEmail = proctoring => (

src/course-checklist/ChecklistSection/utils/courseChecklistValidators.test.js

@@ -189,8 +189,8 @@ describe('courseCheckValidators utility functions', () => {
   );
 
   describe('hasShortVideoDuration', () => {
-    it('returns true if course run has no videos', () => {
-      expect(validators.hasShortVideoDuration({ totalNumber: 0 })).toEqual(true);
+    it('returns false if course run has no videos', () => {
+      expect(validators.hasShortVideoDuration({ totalNumber: 0 })).toEqual(false);
     });
 
     it('returns true if course run videos have a median duration <= to 600', () => {
@@ -204,22 +204,6 @@ describe('courseCheckValidators utility functions', () => {
     });
   });
 
-  describe('hasMobileFriendlyVideos', () => {
-    it('returns true if course run has no videos', () => {
-      expect(validators.hasMobileFriendlyVideos({ totalNumber: 0 })).toEqual(true);
-    });
-
-    it('returns true if course run videos are >= 90% mobile friendly', () => {
-      expect(validators.hasMobileFriendlyVideos({ totalNumber: 10, numMobileEncoded: 9 }))
-        .toEqual(true);
-    });
-
-    it('returns true if course run videos are < 90% mobile friendly', () => {
-      expect(validators.hasMobileFriendlyVideos({ totalNumber: 10, numMobileEncoded: 8 }))
-        .toEqual(false);
-    });
-  });
-
   describe('hasDiverseSequences', () => {
     it('returns true if < 20% of visible subsections have more than one block type', () => {
       expect(validators.hasDiverseSequences({ totalVisible: 10, numWithOneBlockType: 1 }))
@@ -264,6 +248,7 @@ describe('courseCheckValidators utility functions', () => {
   describe('hasShortUnitDepth', () => {
     it('returns true when course run has median number of blocks <= 3', () => {
       const units = {
+        totalVisible: 2,
         numBlocks: {
           median: 3,
         },
@@ -274,6 +259,7 @@ describe('courseCheckValidators utility functions', () => {
 
     it('returns false when course run has median number of blocks > 3', () => {
       const units = {
+        totalVisible: 2,
         numBlocks: {
           median: 4,
         },

src/course-checklist/ChecklistSection/utils/getValidatedValue.js

@@ -14,8 +14,6 @@ const getValidatedValue = (data, id) => {
       return healthValidators.hasAssignmentDeadlines(data.assignments, data.dates);
     case 'videoDuration':
       return healthValidators.hasShortVideoDuration(data.videos);
-    case 'mobileFriendlyVideo':
-      return healthValidators.hasMobileFriendlyVideos(data.videos);
     case 'diverseSequences':
       return healthValidators.hasDiverseSequences(data.subsections);
     case 'weeklyHighlights':

src/course-checklist/ChecklistSection/utils/getValidatedValue.test.js

@@ -88,20 +88,6 @@ describe('getValidatedValue utility function', () => {
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
-  it('mobile friendly video', () => {
-    const spy = jest.fn();
-    localValidators.hasMobileFriendlyVideos = spy;
-
-    const props = {
-      data: {
-        videos: {},
-      },
-    };
-
-    getValidatedValue(props, 'mobileFriendlyVideo');
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-
   it('diverse sequences', () => {
     const spy = jest.fn();
     localValidators.hasDiverseSequences = spy;

src/course-checklist/CourseChecklist.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import { Container, Stack } from '@openedx/paragon';
@@ -17,9 +17,8 @@ import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
 
 const CourseChecklist = ({
   courseId,
-  // injected,
-  intl,
 }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const courseDetails = useModel('courseDetails', courseId);
   const enableQuality = getConfig().ENABLE_CHECKLIST_QUALITY === 'true';
@@ -97,8 +96,6 @@ const CourseChecklist = ({
 
 CourseChecklist.propTypes = {
   courseId: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(CourseChecklist);
+export default CourseChecklist;

src/course-libraries/CourseLibraries.test.tsx

@@ -75,51 +75,54 @@ describe('<CourseLibraries />', () => {
   });
 
   it('shows alert when out of sync components are present', async () => {
+    const user = userEvent.setup();
     await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
     const allTab = await screen.findByRole('tab', { name: 'Libraries' });
-    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 5' });
+    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 7' });
     // review tab should be open by default as outOfSyncCount is greater than 0
     expect(reviewTab).toHaveAttribute('aria-selected', 'true');
 
-    userEvent.click(allTab);
+    await user.click(allTab);
     const alert = await screen.findByRole('alert');
     expect(await within(alert).findByText(
-      '5 library components are out of sync. Review updates to accept or ignore changes',
+      '7 library components are out of sync. Review updates to accept or ignore changes',
     )).toBeInTheDocument();
     expect(allTab).toHaveAttribute('aria-selected', 'true');
 
     const reviewBtn = await screen.findByRole('button', { name: 'Review' });
-    userEvent.click(reviewBtn);
+    await user.click(reviewBtn);
 
     expect(allTab).toHaveAttribute('aria-selected', 'false');
-    expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
+    expect(await screen.findByRole('tab', { name: 'Review Content Updates 7' })).toHaveAttribute('aria-selected', 'true');
     expect(alert).not.toBeInTheDocument();
   });
 
   it('hide alert on dismiss', async () => {
+    const user = userEvent.setup();
     await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
-    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 5' });
+    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 7' });
     // review tab should be open by default as outOfSyncCount is greater than 0
     expect(reviewTab).toHaveAttribute('aria-selected', 'true');
     const allTab = await screen.findByRole('tab', { name: 'Libraries' });
-    userEvent.click(allTab);
+    await user.click(allTab);
     expect(allTab).toHaveAttribute('aria-selected', 'true');
 
     const alert = await screen.findByRole('alert');
     expect(await within(alert).findByText(
-      '5 library components are out of sync. Review updates to accept or ignore changes',
+      '7 library components are out of sync. Review updates to accept or ignore changes',
     )).toBeInTheDocument();
     const dismissBtn = await screen.findByRole('button', { name: 'Dismiss' });
-    userEvent.click(dismissBtn);
+    await user.click(dismissBtn);
     expect(allTab).toHaveAttribute('aria-selected', 'true');
-    waitFor(() => expect(alert).not.toBeInTheDocument());
+    await waitFor(() => expect(alert).not.toBeInTheDocument());
     // review updates button
     const reviewActionBtn = await screen.findByRole('button', { name: 'Review Updates' });
-    userEvent.click(reviewActionBtn);
-    expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
+    await user.click(reviewActionBtn);
+    expect(await screen.findByRole('tab', { name: 'Review Content Updates 7' })).toHaveAttribute('aria-selected', 'true');
   });
 
   it('show alert if max lastPublishedDate is greated than the local storage value', async () => {
+    const user = userEvent.setup();
     const lastPublishedDate = new Date('2025-05-01T22:20:44.989042Z');
     localStorage.setItem(
       `outOfSyncCountAlert-${mockGetEntityLinks.courseKey}`,
@@ -128,18 +131,19 @@ describe('<CourseLibraries />', () => {
 
     await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
     const allTab = await screen.findByRole('tab', { name: 'Libraries' });
-    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 5' });
+    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 7' });
     // review tab should be open by default as outOfSyncCount is greater than 0
     expect(reviewTab).toHaveAttribute('aria-selected', 'true');
 
-    userEvent.click(allTab);
+    await user.click(allTab);
     const alert = await screen.findByRole('alert');
     expect(await within(alert).findByText(
-      '5 library components are out of sync. Review updates to accept or ignore changes',
+      '7 library components are out of sync. Review updates to accept or ignore changes',
     )).toBeInTheDocument();
   });
 
   it('doesnt show alert if max lastPublishedDate is less than the local storage value', async () => {
+    const user = userEvent.setup();
     const lastPublishedDate = new Date('2025-05-01T22:20:44.989042Z');
     localStorage.setItem(
       `outOfSyncCountAlert-${mockGetEntityLinks.courseKey}`,
@@ -148,14 +152,12 @@ describe('<CourseLibraries />', () => {
 
     await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
     const allTab = await screen.findByRole('tab', { name: 'Libraries' });
-    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 5' });
+    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 7' });
     // review tab should be open by default as outOfSyncCount is greater than 0
     expect(reviewTab).toHaveAttribute('aria-selected', 'true');
-    userEvent.click(allTab);
+    await user.click(allTab);
     expect(allTab).toHaveAttribute('aria-selected', 'true');
 
-    screen.logTestingPlaygroundURL();
-
     expect(screen.queryByRole('alert')).not.toBeInTheDocument();
   });
 });
@@ -191,94 +193,153 @@ describe('<CourseLibraries ReviewTab />', () => {
   });
 
   it('shows all readyToSync links', async () => {
-    await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
+    await renderCourseLibrariesReviewPage();
     const updateBtns = await screen.findAllByRole('button', { name: 'Update' });
-    expect(updateBtns.length).toEqual(5);
+    expect(updateBtns.length).toEqual(7);
     const ignoreBtns = await screen.findAllByRole('button', { name: 'Ignore' });
-    expect(ignoreBtns.length).toEqual(5);
+    expect(ignoreBtns.length).toEqual(7);
   });
 
-  it('update changes works', async () => {
+  test.each([
+    {
+      label: 'update changes works with components',
+      itemIndex: 0,
+      expectedToastMsg: 'Success! "Dropdown" is updated',
+    },
+    {
+      label: 'update changes works with containers',
+      itemIndex: 5,
+      expectedToastMsg: 'Success! "Unit 1" is updated',
+    },
+  ])('$label', async ({ itemIndex, expectedToastMsg }) => {
+    const user = userEvent.setup();
     const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response[0].downstreamUsageKey;
+    const usageKey = mockGetEntityLinks.response[itemIndex].downstreamUsageKey;
     axiosMock.onPost(libraryBlockChangesUrl(usageKey)).reply(200, {});
     await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
     const updateBtns = await screen.findAllByRole('button', { name: 'Update' });
-    expect(updateBtns.length).toEqual(5);
-    userEvent.click(updateBtns[0]);
+    expect(updateBtns.length).toEqual(7);
+    await user.click(updateBtns[itemIndex]);
     await waitFor(() => {
       expect(axiosMock.history.post.length).toEqual(1);
     });
     expect(axiosMock.history.post[0].url).toEqual(libraryBlockChangesUrl(usageKey));
-    expect(mockShowToast).toHaveBeenCalledWith('Success! "Dropdown" is updated');
-    expect(mockInvalidateQueries).toHaveBeenCalledWith(['courseLibraries', 'course-v1:OpenEdx+DemoX+CourseX']);
+    expect(mockShowToast).toHaveBeenCalledWith(expectedToastMsg);
+    expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['courseLibraries', 'course-v1:OpenEdx+DemoX+CourseX'] });
   });
 
-  it('update changes works in preview modal', async () => {
+  test.each([
+    {
+      label: 'update changes works in preview modal with components',
+      itemIndex: 0,
+      expectedToastMsg: 'Success! "Dropdown" is updated',
+    },
+    {
+      label: 'update changes works in preview modal with containers',
+      itemIndex: 5,
+      expectedToastMsg: 'Success! "Unit 1" is updated',
+    },
+  ])('$label', async ({ itemIndex, expectedToastMsg }) => {
+    const user = userEvent.setup();
     const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response[0].downstreamUsageKey;
+    const usageKey = mockGetEntityLinks.response[itemIndex].downstreamUsageKey;
     axiosMock.onPost(libraryBlockChangesUrl(usageKey)).reply(200, {});
     await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
     const previewBtns = await screen.findAllByRole('button', { name: 'Review Updates' });
-    expect(previewBtns.length).toEqual(5);
-    userEvent.click(previewBtns[0]);
+    expect(previewBtns.length).toEqual(7);
+    await user.click(previewBtns[itemIndex]);
     const dialog = await screen.findByRole('dialog');
     const confirmBtn = await within(dialog).findByRole('button', { name: 'Accept changes' });
-    userEvent.click(confirmBtn);
+    await user.click(confirmBtn);
     await waitFor(() => {
       expect(axiosMock.history.post.length).toEqual(1);
     });
     expect(axiosMock.history.post[0].url).toEqual(libraryBlockChangesUrl(usageKey));
-    expect(mockShowToast).toHaveBeenCalledWith('Success! "Dropdown" is updated');
-    expect(mockInvalidateQueries).toHaveBeenCalledWith(['courseLibraries', 'course-v1:OpenEdx+DemoX+CourseX']);
+    expect(mockShowToast).toHaveBeenCalledWith(expectedToastMsg);
+    expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['courseLibraries', 'course-v1:OpenEdx+DemoX+CourseX'] });
   });
 
-  it('ignore change works', async () => {
+  test.each([
+    {
+      label: 'ignore change works with components',
+      itemIndex: 0,
+      expectedToastMsg: '"Dropdown" will remain out of sync with library content. You will be notified when this component is updated again.',
+    },
+    {
+      label: 'ignore change works with containers',
+      itemIndex: 5,
+      expectedToastMsg: '"Unit 1" will remain out of sync with library content. You will be notified when this component is updated again.',
+    },
+  ])('$label', async ({ itemIndex, expectedToastMsg }) => {
+    const user = userEvent.setup();
     const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response[0].downstreamUsageKey;
+    const usageKey = mockGetEntityLinks.response[itemIndex].downstreamUsageKey;
     axiosMock.onDelete(libraryBlockChangesUrl(usageKey)).reply(204, {});
     await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
     const ignoreBtns = await screen.findAllByRole('button', { name: 'Ignore' });
-    expect(ignoreBtns.length).toEqual(5);
+    expect(ignoreBtns.length).toEqual(7);
     // Show confirmation modal on clicking ignore.
-    userEvent.click(ignoreBtns[0]);
+    await user.click(ignoreBtns[itemIndex]);
     const dialog = await screen.findByRole('dialog', { name: 'Ignore these changes?' });
     expect(dialog).toBeInTheDocument();
     const confirmBtn = await within(dialog).findByRole('button', { name: 'Ignore' });
-    userEvent.click(confirmBtn);
+    await user.click(confirmBtn);
     await waitFor(() => {
       expect(axiosMock.history.delete.length).toEqual(1);
     });
     expect(axiosMock.history.delete[0].url).toEqual(libraryBlockChangesUrl(usageKey));
-    expect(mockShowToast).toHaveBeenCalledWith(
-      '"Dropdown" will remain out of sync with library content. You will be notified when this component is updated again.',
-    );
-    expect(mockInvalidateQueries).toHaveBeenCalledWith(['courseLibraries', 'course-v1:OpenEdx+DemoX+CourseX']);
+    expect(mockShowToast).toHaveBeenCalledWith(expectedToastMsg);
+    expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['courseLibraries', 'course-v1:OpenEdx+DemoX+CourseX'] });
   });
 
-  it('ignore change works in preview', async () => {
+  test.each([
+    {
+      label: 'ignore change works with components',
+      itemIndex: 0,
+      expectedToastMsg: '"Dropdown" will remain out of sync with library content. You will be notified when this component is updated again.',
+    },
+    {
+      label: 'ignore change works with containers',
+      itemIndex: 5,
+      expectedToastMsg: '"Unit 1" will remain out of sync with library content. You will be notified when this component is updated again.',
+    },
+  ])('$label', async ({ itemIndex, expectedToastMsg }) => {
+    const user = userEvent.setup();
     const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response[0].downstreamUsageKey;
+    const usageKey = mockGetEntityLinks.response[itemIndex].downstreamUsageKey;
     axiosMock.onDelete(libraryBlockChangesUrl(usageKey)).reply(204, {});
     await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
     const previewBtns = await screen.findAllByRole('button', { name: 'Review Updates' });
-    expect(previewBtns.length).toEqual(5);
-    userEvent.click(previewBtns[0]);
+    expect(previewBtns.length).toEqual(7);
+    await user.click(previewBtns[itemIndex]);
     const previewDialog = await screen.findByRole('dialog');
     const ignoreBtn = await within(previewDialog).findByRole('button', { name: 'Ignore changes' });
-    userEvent.click(ignoreBtn);
+    await user.click(ignoreBtn);
     // Show confirmation modal on clicking ignore.
     const dialog = await screen.findByRole('dialog', { name: 'Ignore these changes?' });
     expect(dialog).toBeInTheDocument();
     const confirmBtn = await within(dialog).findByRole('button', { name: 'Ignore' });
-    userEvent.click(confirmBtn);
+    await user.click(confirmBtn);
     await waitFor(() => {
       expect(axiosMock.history.delete.length).toEqual(1);
     });
     expect(axiosMock.history.delete[0].url).toEqual(libraryBlockChangesUrl(usageKey));
-    expect(mockShowToast).toHaveBeenCalledWith(
-      '"Dropdown" will remain out of sync with library content. You will be notified when this component is updated again.',
-    );
-    expect(mockInvalidateQueries).toHaveBeenCalledWith(['courseLibraries', 'course-v1:OpenEdx+DemoX+CourseX']);
+    expect(mockShowToast).toHaveBeenCalledWith(expectedToastMsg);
+    expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['courseLibraries', 'course-v1:OpenEdx+DemoX+CourseX'] });
+  });
+
+  it('should show sync modal with local changes', async () => {
+    const itemIndex = 3;
+    const user = userEvent.setup();
+    await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
+    const previewBtns = await screen.findAllByRole('button', { name: 'Review Updates' });
+    expect(previewBtns.length).toEqual(7);
+    await user.click(previewBtns[itemIndex]);
+
+    expect(screen.getByText('This library content has local edits.')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /course content/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /published library content/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /update to published library content/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /keep course content/i })).toBeInTheDocument();
   });
 });

src/course-libraries/OutOfSyncAlert.tsx

@@ -32,14 +32,14 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
   onReview,
 }) => {
   const intl = useIntl();
-  const { data, isLoading } = useEntityLinksSummaryByDownstreamContext(courseId);
+  const { data, isPending } = useEntityLinksSummaryByDownstreamContext(courseId);
   const outOfSyncCount = data?.reduce((count, lib) => count + (lib.readyToSyncCount || 0), 0);
   const lastPublishedDate = data?.map(lib => new Date(lib.lastPublishedAt || 0).getTime())
     .reduce((acc, lastPublished) => Math.max(lastPublished, acc), 0);
   const alertKey = `outOfSyncCountAlert-${courseId}`;
 
   useEffect(() => {
-    if (isLoading) {
+    if (isPending) {
       return;
     }
     if (outOfSyncCount === 0) {
@@ -50,7 +50,7 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
     const dismissedAlertDate = parseInt(localStorage.getItem(alertKey) ?? '0', 10);
 
     setShowAlert((lastPublishedDate ?? 0) > dismissedAlertDate);
-  }, [outOfSyncCount, lastPublishedDate, isLoading, data]);
+  }, [outOfSyncCount, lastPublishedDate, isPending, data]);
 
   const dismissAlert = () => {
     setShowAlert(false);

src/course-libraries/ReviewTabContent.tsx

@@ -19,7 +19,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { Loop } from '@openedx/paragon/icons';
 import messages from './messages';
 import previewChangesMessages from '../course-unit/preview-changes/messages';
-import { courseLibrariesQueryKeys, useEntityLinks } from './data/apiHooks';
+import { invalidateLinksQuery, useEntityLinks } from './data/apiHooks';
 import {
   SearchContextProvider, SearchKeywordsField, useSearchContext, BlockTypeLabel, Highlight, SearchSortWidget,
 } from '../search-manager';
@@ -35,27 +35,45 @@ import { useLoadOnScroll } from '../hooks';
 import DeleteModal from '../generic/delete-modal/DeleteModal';
 import { PublishableEntityLink } from './data/api';
 import AlertError from '../generic/alert-error';
+import NewsstandIcon from '../generic/NewsstandIcon';
 
 interface Props {
   courseId: string;
 }
 
-interface BlockCardProps {
+interface ItemCardProps {
   info: ContentHit;
+  itemType: 'component' | 'container';
   actions?: React.ReactNode;
+  libraryName?: string;
 }
 
-const BlockCard: React.FC<BlockCardProps> = ({ info, actions }) => {
+const ItemCard: React.FC<ItemCardProps> = ({
+  info,
+  itemType,
+  actions,
+  libraryName,
+}) => {
   const intl = useIntl();
-  const componentIcon = getItemIcon(info.blockType);
+  const itemIcon = getItemIcon(info.blockType);
   const breadcrumbs = tail(info.breadcrumbs) as Array<{ displayName: string, usageKey: string }>;
 
-  const getBlockLink = useCallback(() => {
+  const getItemLink = useCallback(() => {
     let key = info.usageKey;
     if (breadcrumbs?.length > 1) {
       key = breadcrumbs[breadcrumbs.length - 1].usageKey || key;
     }
-    return `${getConfig().STUDIO_BASE_URL}/container/${key}`;
+
+    if (itemType === 'component') {
+      return `${getConfig().STUDIO_BASE_URL}/container/${key}`;
+    }
+    if (itemType === 'container') {
+      const encodedKey = encodeURIComponent(key);
+      return `${getConfig().STUDIO_BASE_URL}/course/${info.contextKey}?show=${encodedKey}`;
+    }
+
+    // istanbul ignore next
+    return '';
   }, [info]);
 
   return (
@@ -69,7 +87,7 @@ const BlockCard: React.FC<BlockCardProps> = ({ info, actions }) => {
         <Stack direction="horizontal" gap={2}>
           <Stack direction="vertical" gap={1}>
             <Stack direction="horizontal" gap={1} className="micro text-gray-500">
-              <Icon src={componentIcon} size="xs" />
+              <Icon src={itemIcon} size="xs" />
               <BlockTypeLabel blockType={info.blockType} />
             </Stack>
             <Stack direction="horizontal" className="small" gap={1}>
@@ -78,15 +96,27 @@ const BlockCard: React.FC<BlockCardProps> = ({ info, actions }) => {
               </strong>
             </Stack>
             <Stack direction="horizontal" className="micro" gap={3}>
+              {libraryName && (
+                <Stack direction="horizontal" gap={2}>
+                  <Icon src={NewsstandIcon} size="xs" />
+                  {libraryName}
+                </Stack>
+              )}
               {intl.formatMessage(messages.breadcrumbLabel)}
-              <Hyperlink showLaunchIcon={false} destination={getBlockLink()} target="_blank">
-                <Breadcrumb
-                  className="micro text-gray-700 border-bottom"
-                  ariaLabel={intl.formatMessage(messages.breadcrumbLabel)}
-                  links={breadcrumbs.map((breadcrumb) => ({ label: breadcrumb.displayName }))}
-                  spacer={<span className="custom-spacer">/</span>}
-                  linkAs="span"
-                />
+              <Hyperlink showLaunchIcon={false} destination={getItemLink()} target="_blank">
+                {info.blockType === 'chapter' ? (
+                  <div className="micro text-gray-700 border-bottom">
+                    {intl.formatMessage(messages.viewSectionInCourseLabel)}
+                  </div>
+                ) : (
+                  <Breadcrumb
+                    className="micro text-gray-700 border-bottom"
+                    ariaLabel={intl.formatMessage(messages.breadcrumbLabel)}
+                    links={breadcrumbs.map((breadcrumb) => ({ label: breadcrumb.displayName }))}
+                    spacer={<span className="custom-spacer">/</span>}
+                    linkAs="span"
+                  />
+                )}
               </Hyperlink>
             </Stack>
           </Stack>
@@ -97,19 +127,24 @@ const BlockCard: React.FC<BlockCardProps> = ({ info, actions }) => {
   );
 };
 
-const ComponentReviewList = ({
-  outOfSyncComponents,
+const ItemReviewList = ({
+  outOfSyncItems,
 }: {
-  outOfSyncComponents: PublishableEntityLink[];
+  outOfSyncItems: PublishableEntityLink[];
 }) => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
   const [blockData, setBlockData] = useState<LibraryChangesMessageData | undefined>(undefined);
   // ignore changes confirmation modal toggle.
   const [isConfirmModalOpen, openConfirmModal, closeConfirmModal] = useToggle(false);
+  // Toggle preview changes modal
+  const [isPreviewModalOpen, openPreviewModal, closePreviewModal] = useToggle(false);
+  const acceptChangesMutation = useAcceptLibraryBlockChanges();
+  const ignoreChangesMutation = useIgnoreLibraryBlockChanges();
+
   const {
     hits,
-    isLoading: isIndexDataLoading,
+    isPending: isIndexDataPending,
     hasError,
     hasNextPage,
     isFetchingNextPage,
@@ -125,32 +160,29 @@ const ComponentReviewList = ({
     true,
   );
 
-  const outOfSyncComponentsByKey = useMemo(
-    () => keyBy(outOfSyncComponents, 'downstreamUsageKey'),
-    [outOfSyncComponents],
+  const outOfSyncItemsByKey = useMemo(
+    () => keyBy(outOfSyncItems, 'downstreamUsageKey'),
+    [outOfSyncItems],
   );
   const queryClient = useQueryClient();
 
-  // Toggle preview changes modal
-  const [isModalOpen, openModal, closeModal] = useToggle(false);
-  const acceptChangesMutation = useAcceptLibraryBlockChanges();
-  const ignoreChangesMutation = useIgnoreLibraryBlockChanges();
-
   const setSelectedBlockData = useCallback((info: ContentHit) => {
     setBlockData({
       displayName: info.displayName,
       downstreamBlockId: info.usageKey,
-      upstreamBlockId: outOfSyncComponentsByKey[info.usageKey].upstreamUsageKey,
-      upstreamBlockVersionSynced: outOfSyncComponentsByKey[info.usageKey].versionSynced,
-      isVertical: info.blockType === 'vertical',
+      upstreamBlockId: outOfSyncItemsByKey[info.usageKey].upstreamKey,
+      upstreamBlockVersionSynced: outOfSyncItemsByKey[info.usageKey].versionSynced,
+      isContainer: info.blockType === 'vertical' || info.blockType === 'sequential' || info.blockType === 'chapter',
+      blockType: info.blockType,
+      isLocallyModified: outOfSyncItemsByKey[info.usageKey].downstreamIsModified,
     });
-  }, [outOfSyncComponentsByKey]);
+  }, [outOfSyncItemsByKey]);
 
   // Show preview changes on review
   const onReview = useCallback((info: ContentHit) => {
     setSelectedBlockData(info);
-    openModal();
-  }, [setSelectedBlockData, openModal]);
+    openPreviewModal();
+  }, [setSelectedBlockData, openPreviewModal]);
 
   const onIgnoreClick = useCallback((info: ContentHit) => {
     setSelectedBlockData(info);
@@ -158,9 +190,9 @@ const ComponentReviewList = ({
   }, [setSelectedBlockData, openConfirmModal]);
 
   const reloadLinks = useCallback((usageKey: string) => {
-    const courseKey = outOfSyncComponentsByKey[usageKey].downstreamContextKey;
-    queryClient.invalidateQueries(courseLibrariesQueryKeys.courseLibraries(courseKey));
-  }, [outOfSyncComponentsByKey]);
+    const courseKey = outOfSyncItemsByKey[usageKey].downstreamContextKey;
+    invalidateLinksQuery(queryClient, courseKey);
+  }, [outOfSyncItemsByKey]);
 
   const postChange = (accept: boolean) => {
     // istanbul ignore if: this should never happen
@@ -183,7 +215,10 @@ const ComponentReviewList = ({
 
   const updateBlock = useCallback(async (info: ContentHit) => {
     try {
-      await acceptChangesMutation.mutateAsync(info.usageKey);
+      await acceptChangesMutation.mutateAsync({
+        blockId: info.usageKey,
+        overrideCustomizations: info.blockType === 'html' && outOfSyncItemsByKey[info.usageKey].downstreamIsModified,
+      });
       reloadLinks(info.usageKey);
       showToast(intl.formatMessage(
         messages.updateSingleBlockSuccess,
@@ -200,7 +235,9 @@ const ComponentReviewList = ({
       return;
     }
     try {
-      await ignoreChangesMutation.mutateAsync(blockData.downstreamBlockId);
+      await ignoreChangesMutation.mutateAsync({
+        blockId: blockData.downstreamBlockId,
+      });
       reloadLinks(blockData.downstreamBlockId);
       showToast(intl.formatMessage(
         messages.ignoreSingleBlockSuccess,
@@ -213,7 +250,7 @@ const ComponentReviewList = ({
     }
   }, [blockData]);
 
-  if (isIndexDataLoading) {
+  if (isIndexDataPending) {
     return <Loading />;
   }
 
@@ -224,9 +261,11 @@ const ComponentReviewList = ({
   return (
     <>
       {downstreamInfo?.map((info) => (
-        <BlockCard
+        <ItemCard
           key={info.usageKey}
           info={info}
+          itemType={outOfSyncItemsByKey[info.usageKey]?.upstreamType}
+          libraryName={outOfSyncItemsByKey[info.usageKey]?.upstreamContextTitle}
           actions={(
             <ActionRow>
               <Button
@@ -260,8 +299,8 @@ const ComponentReviewList = ({
       {blockData && (
         <PreviewLibraryXBlockChanges
           blockData={blockData}
-          isModalOpen={isModalOpen}
-          closeModal={closeModal}
+          isModalOpen={isPreviewModalOpen}
+          closeModal={closePreviewModal}
           postChange={postChange}
         />
       )}
@@ -281,15 +320,19 @@ const ComponentReviewList = ({
 const ReviewTabContent = ({ courseId }: Props) => {
   const intl = useIntl();
   const {
-    data: outOfSyncComponents,
-    isLoading: isSyncComponentsLoading,
+    data: outOfSyncItems,
+    isPending: isSyncItemsLoading,
     isError,
     error,
-  } = useEntityLinks({ courseId, readyToSync: true });
+  } = useEntityLinks({
+    courseId,
+    readyToSync: true,
+    useTopLevelParents: true,
+  });
 
   const downstreamKeys = useMemo(
-    () => outOfSyncComponents?.map(link => link.downstreamUsageKey),
-    [outOfSyncComponents],
+    () => outOfSyncItems?.map(link => link.downstreamUsageKey),
+    [outOfSyncItems],
   );
 
   const disableSortOptions = [
@@ -299,7 +342,7 @@ const ReviewTabContent = ({ courseId }: Props) => {
     SearchSortOption.RECENTLY_PUBLISHED,
   ];
 
-  if (isSyncComponentsLoading) {
+  if (isSyncItemsLoading) {
     return <Loading />;
   }
 
@@ -320,8 +363,8 @@ const ReviewTabContent = ({ courseId }: Props) => {
         <SearchSortWidget disableOptions={disableSortOptions} />
         <ActionRow.Spacer />
       </ActionRow>
-      <ComponentReviewList
-        outOfSyncComponents={outOfSyncComponents}
+      <ItemReviewList
+        outOfSyncItems={outOfSyncItems}
       />
     </SearchContextProvider>
   );

src/course-libraries/__mocks__/linkCourseSummary.json

@@ -2,7 +2,7 @@
   {
     "upstreamContextTitle": "CS problems 3",
     "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "readyToSyncCount": 5,
+    "readyToSyncCount": 7,
     "totalCount": 14,
     "lastPublishedAt": "2025-05-01T20:20:44.989042Z"
   },