fix: render proper visibility message on self-paced course type (backport) (#1713)

Backports the bugfixes from https://github.com/openedx/frontend-app-authoring/pull/1646 to Sumac.

.env

@@ -44,5 +44,4 @@ 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"
+LIBRARY_SUPPORTED_BLOCKS="problem,video,html"

.env.development

@@ -47,5 +47,4 @@ 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"
+LIBRARY_SUPPORTED_BLOCKS="problem,video,html"

.env.test

@@ -39,5 +39,4 @@ 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"
+LIBRARY_SUPPORTED_BLOCKS="problem,video,html"

.github/workflows/validate.yml

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

.gitignore

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

README.rst

@@ -38,7 +38,7 @@ Cloning and Setup
 
     git clone https://github.com/openedx/frontend-app-authoring.git
 
-2. Use the version of Node specified in the ``.nvmrc`` file.
+2. Use node v20.x.
 
   The current version of the micro-frontend build scripts supports node 20.
   Using other major versions of node *may* work, but this is unsupported.  For
@@ -85,8 +85,8 @@ Troubleshooting
 ---------------
 
 * If you see an "Invalid Host header" error, then you're probably using a different domain name for your devstack such as
-  ``local.edly.io`` or ``local.overhang.io`` (not the new recommended default, ``local.openedx.io``). In that case, run
-  these commands to update your devstack's domain names:
+``local.edly.io`` or ``local.overhang.io`` (not the new recommended default, ``local.openedx.io``). In that case, run
+these commands to update your devstack's domain names:
 
 .. code-block:: bash
 
@@ -98,7 +98,7 @@ Troubleshooting
 * If tutor-mfe is not starting the authoring MFE in development mode (eg. `tutor dev start authoring` fails), it may be due to
   using a tutor version that expects the MFE name to be frontend-app-course-authoring (the previous name of this repo). To fix
   this, you can rename the cloned repo directory to frontend-app-course-authoring. More information can be found in 
-  `this forum post <https://discuss.openedx.org/t/repo-rename-frontend-app-course-authoring-frontend-app-authoring/13930/2>`__.
+  [this forum post](https://discuss.openedx.org/t/repo-rename-frontend-app-course-authoring-frontend-app-authoring/13930/2)
 
 
 Features
@@ -315,7 +315,7 @@ In additional to the standard settings, the following local configurations can b
 Developing
 **********
 
-`Tutor <https://docs.tutor.edly.io/>`_ is the community-supported Open edX development environment. See the `tutor-mfe plugin README <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`_ for more information.
+`Devstack <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/installation/index.html>`_.  If you start Devstack with ``make dev.up.studio`` that should give you everything you need as a companion to this frontend.
 
 
 If your devstack includes the default Demo course, you can visit the following URLs to see content:

catalog-info.yaml

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

codecov.yml

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

openedx.yaml

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

package.json

@@ -23,6 +23,11 @@
     "test:ci": "TZ=UTC fedx-scripts jest --silent --coverage --passWithNoTests",
     "types": "tsc --noEmit"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
   "author": "edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-authoring#readme",
@@ -35,7 +40,6 @@
   "dependencies": {
     "@codemirror/lang-html": "^6.0.0",
     "@codemirror/lang-xml": "^6.0.0",
-    "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/lint": "^6.2.1",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
@@ -45,10 +49,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-enterprise-hotjar": "^7.2.0",
-    "@edx/frontend-platform": "^8.3.1",
+    "@edx/frontend-component-footer": "^14.1.0",
+    "@edx/frontend-component-header": "^5.6.0",
+    "@edx/frontend-enterprise-hotjar": "^2.0.0",
+    "@edx/frontend-platform": "^8.0.3",
     "@edx/openedx-atlas": "^0.6.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
     "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
@@ -60,9 +64,9 @@
     "@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.3.3",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^22.16.0",
+    "@openedx/frontend-build": "^14.0.14",
+    "@openedx/frontend-plugin-framework": "^1.2.1",
+    "@openedx/paragon": "^22.8.1",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",
@@ -81,9 +85,9 @@
     "moment-shortformat": "^2.1.0",
     "npm": "^10.8.1",
     "prop-types": "^15.8.1",
-    "react": "^18.3.1",
+    "react": "17.0.2",
     "react-datepicker": "^4.13.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "17.0.2",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",
     "react-onclickoutside": "^6.13.0",
@@ -106,19 +110,21 @@
     "yup": "0.31.1"
   },
   "devDependencies": {
-    "@edx/react-unit-test-utils": "^4.0.0",
+    "@edx/react-unit-test-utils": "3.0.0",
     "@edx/stylelint-config-edx": "2.3.3",
     "@edx/typescript-config": "^1.0.1",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
     "@types/lodash": "^4.17.7",
     "axios-mock-adapter": "1.22.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "fetch-mock-jest": "^1.5.1",
+    "husky": "7.0.4",
     "jest-canvas-mock": "^2.5.2",
     "jest-expect-message": "^1.1.3",
-    "react-test-renderer": "^18.3.1",
+    "react-test-renderer": "17.0.2",
     "redux-mock-store": "^1.5.4"
   }
 }

plugins/course-apps/live/BBBSettings.jsx

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

plugins/course-apps/live/LiveCommonFields.jsx

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

plugins/course-apps/live/Settings.jsx

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

plugins/course-apps/live/ZoomSettings.jsx

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

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

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

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

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

plugins/course-apps/proctoring/Settings.jsx

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

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

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

plugins/course-apps/progress/Settings.jsx

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

plugins/course-apps/teams/GroupEditor.jsx

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

plugins/course-apps/teams/Settings.jsx

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

plugins/course-apps/teams/utils.js

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

plugins/course-apps/wiki/Settings.jsx

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

plugins/course-apps/xpert_unit_summary/Settings.jsx

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

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

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

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

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

src/CourseAuthoringPage.jsx

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

src/CourseAuthoringPage.test.jsx

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

src/CourseAuthoringRoutes.jsx

@@ -4,7 +4,7 @@ import {
 } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 import { PageWrap } from '@edx/frontend-platform/react';
-import { Textbooks } from './textbooks';
+import { Textbooks } from 'CourseAuthoring/textbooks';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';
 import EditorContainer from './editors/EditorContainer';
@@ -20,13 +20,10 @@ import { CourseUpdates } from './course-updates';
 import { CourseUnit } from './course-unit';
 import { Certificates } from './certificates';
 import CourseExportPage from './export-page/CourseExportPage';
-import CourseOptimizerPage from './optimizer-page/CourseOptimizerPage';
 import CourseImportPage from './import-page/CourseImportPage';
 import { DECODED_ROUTES } from './constants';
 import CourseChecklist from './course-checklist';
 import GroupConfigurations from './group-configurations';
-import { CourseLibraries } from './course-libraries';
-import { IframeProvider } from './generic/hooks/context/iFrameContext';
 
 /**
  * As of this writing, these routes are mounted at a path prefixed with the following:
@@ -58,10 +55,6 @@ const CourseAuthoringRoutes = () => {
           path="course_info"
           element={<PageWrap><CourseUpdates courseId={courseId} /></PageWrap>}
         />
-        <Route
-          path="libraries"
-          element={<PageWrap><CourseLibraries courseId={courseId} /></PageWrap>}
-        />
         <Route
           path="assets"
           element={<PageWrap><FilesPage courseId={courseId} /></PageWrap>}
@@ -86,7 +79,7 @@ const CourseAuthoringRoutes = () => {
           <Route
             key={path}
             path={path}
-            element={<PageWrap><IframeProvider><CourseUnit courseId={courseId} /></IframeProvider></PageWrap>}
+            element={<PageWrap><CourseUnit courseId={courseId} /></PageWrap>}
           />
         ))}
         <Route
@@ -125,10 +118,6 @@ const CourseAuthoringRoutes = () => {
           path="export"
           element={<PageWrap><CourseExportPage courseId={courseId} /></PageWrap>}
         />
-        <Route
-          path="optimizer"
-          element={<PageWrap><CourseOptimizerPage courseId={courseId} /></PageWrap>}
-        />
         <Route
           path="checklists"
           element={<PageWrap><CourseChecklist courseId={courseId} /></PageWrap>}

src/CourseAuthoringRoutes.test.jsx

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

src/__mocks__/clipboardSubsection.js

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

src/__mocks__/index.js

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

src/accessibility-page/AccessibilityPage.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
 import { Container } from '@openedx/paragon';
-import { StudioFooterSlot } from '@edx/frontend-component-footer';
+import { StudioFooter } from '@edx/frontend-component-footer';
 
 import Header from '../header';
 import messages from './messages';
@@ -29,7 +29,7 @@ const AccessibilityPage = ({
         <AccessibilityBody {...{ email, communityAccessibilityLink }} />
         <AccessibilityForm accessibilityEmail={email} />
       </Container>
-      <StudioFooterSlot />
+      <StudioFooter />
     </>
   );
 };

src/advanced-settings/__mocks__/index.js

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

src/advanced-settings/data/api.js

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

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

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

src/advanced-settings/index.js

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

src/certificates/constants.js

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

src/certificates/data/api.js

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

src/certificates/index.js

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

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

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

src/certificates/utils.js

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

src/constants.js

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

src/content-tags-drawer/ContentTagsCollapsible.jsx

@@ -25,9 +25,9 @@ import TagsTree from './TagsTree';
 import { ContentTagsDrawerContext } from './common/context';
 
 /** @typedef {import("./ContentTagsCollapsible").TaxonomySelectProps} TaxonomySelectProps */
-/** @typedef {import("../taxonomy/data/types.js").TaxonomyData} TaxonomyData */
-/** @typedef {import("./data/types.js").Tag} ContentTagData */
-/** @typedef {import("./data/types.js").StagedTagData} StagedTagData */
+/** @typedef {import("../taxonomy/data/types.mjs").TaxonomyData} TaxonomyData */
+/** @typedef {import("./data/types.mjs").Tag} ContentTagData */
+/** @typedef {import("./data/types.mjs").StagedTagData} StagedTagData */
 
 /**
  * Custom Menu component for our Select box

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

@@ -699,7 +699,7 @@ describe('<ContentTagsCollapsible />', () => {
     const xButtonAppliedTag = within(appliedTag).getByRole('button', {
       name: /delete/i,
     });
-    await userEvent.click(xButtonAppliedTag);
+    xButtonAppliedTag.click();
 
     // Check that the applied tag has been removed
     expect(appliedTag).not.toBeInTheDocument();

src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx

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

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

@@ -1,4 +1,5 @@
 import {
+  act,
   fireEvent,
   initializeMocks,
   render,
@@ -17,11 +18,10 @@ import {
 } from './data/api.mocks';
 import { getContentTaxonomyTagsApiUrl } from './data/api';
 
-const path = '/content/:contentId?/*';
+const path = '/content/:contentId/*';
 const mockOnClose = jest.fn();
 const mockSetBlockingSheet = jest.fn();
 const mockNavigate = jest.fn();
-const mockSidebarAction = jest.fn();
 mockContentTaxonomyTagsData.applyMock();
 mockTaxonomyListData.applyMock();
 mockTaxonomyTagsData.applyMock();
@@ -41,11 +41,6 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockNavigate,
 }));
 
-jest.mock('../library-authoring/common/context/SidebarContext', () => ({
-  ...jest.requireActual('../library-authoring/common/context/SidebarContext'),
-  useSidebarContext: () => ({ sidebarAction: mockSidebarAction() }),
-}));
-
 const renderDrawer = (contentId, drawerParams = {}) => (
   render(
     <ContentTagsDrawerSheetContext.Provider value={drawerParams}>
@@ -66,15 +61,19 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows spinner before the content data query is complete', async () => {
-    renderDrawer(stagedTagsId);
-    const spinner = (await screen.findAllByRole('status'))[0];
-    expect(spinner.textContent).toEqual('Loading'); // Uses <Spinner />
+    await act(async () => {
+      renderDrawer(stagedTagsId);
+      const spinner = screen.getAllByRole('status')[0];
+      expect(spinner.textContent).toEqual('Loading'); // Uses <Spinner />
+    });
   });
 
   it('shows spinner before the taxonomy tags query is complete', async () => {
-    renderDrawer(stagedTagsId);
-    const spinner = (await screen.findAllByRole('status'))[1];
-    expect(spinner.textContent).toEqual('Loading...'); // Uses <Loading />
+    await act(async () => {
+      renderDrawer(stagedTagsId);
+      const spinner = screen.getAllByRole('status')[1];
+      expect(spinner.textContent).toEqual('Loading...'); // Uses <Loading />
+    });
   });
 
   it('shows the content display name after the query is complete in drawer variant', async () => {
@@ -99,12 +98,15 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows the taxonomies data including tag numbers after the query is complete', async () => {
-    const { container } = renderDrawer(largeTagsId);
-    await screen.findByText('Taxonomy 1');
-    await screen.findByText('Taxonomy 2');
-    const tagCountBadges = container.getElementsByClassName('taxonomy-tags-count-chip');
-    expect(tagCountBadges[0].textContent).toBe('3');
-    expect(tagCountBadges[1].textContent).toBe('2');
+    await act(async () => {
+      const { container } = renderDrawer(largeTagsId);
+      await waitFor(() => { expect(screen.getByText('Taxonomy 1')).toBeInTheDocument(); });
+      expect(screen.getByText('Taxonomy 1')).toBeInTheDocument();
+      expect(screen.getByText('Taxonomy 2')).toBeInTheDocument();
+      const tagCountBadges = container.getElementsByClassName('taxonomy-tags-count-chip');
+      expect(tagCountBadges[0].textContent).toBe('3');
+      expect(tagCountBadges[1].textContent).toBe('2');
+    });
   });
 
   it('should be read only on first render on drawer variant', async () => {
@@ -190,26 +192,6 @@ describe('<ContentTagsDrawer />', () => {
     expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
   });
 
-  it('should change to edit mode sidebar action is set to JumpToManageTags', async () => {
-    mockSidebarAction.mockReturnValueOnce('jump-to-manage-tags');
-    renderDrawer(stagedTagsId, { variant: 'component' });
-    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
-
-    // Show delete tag buttons
-    expect(screen.getAllByRole('button', {
-      name: /delete/i,
-    }).length).toBe(2);
-
-    // Show add a tag select
-    expect(screen.getByText(/add a tag/i)).toBeInTheDocument();
-
-    // Show cancel button
-    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-
-    // Show save button
-    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
-  });
-
   it('should change to read mode when click on `Cancel` on drawer variant', async () => {
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();

src/content-tags-drawer/ContentTagsDrawer.tsx

@@ -12,9 +12,8 @@ import classNames from 'classnames';
 import messages from './messages';
 import ContentTagsCollapsible from './ContentTagsCollapsible';
 import Loading from '../generic/Loading';
-import { useCreateContentTagsDrawerContext } from './ContentTagsDrawerHelper';
+import useContentTagsDrawerContext from './ContentTagsDrawerHelper';
 import { ContentTagsDrawerContext, ContentTagsDrawerSheetContext } from './common/context';
-import { SidebarActions, useSidebarContext } from '../library-authoring/common/context/SidebarContext';
 
 interface TaxonomyListProps {
   contentId: string;
@@ -228,6 +227,7 @@ interface ContentTagsDrawerProps {
  * It is used both in interfaces of this MFE and in edx-platform interfaces such as iframe.
  * - If you want to use it as an iframe, the component obtains the `contentId` from the url parameters.
  *   Functions to close the drawer are handled internally.
+ *   TODO: We can delete this method when is no longer used on edx-platform.
  * - If you want to use it as react component, you need to pass the content id and the close functions
  *   through the component parameters.
  */
@@ -245,9 +245,8 @@ const ContentTagsDrawer = ({
   if (contentId === undefined) {
     throw new Error('Error: contentId cannot be null.');
   }
-  const { sidebarAction } = useSidebarContext();
 
-  const context = useCreateContentTagsDrawerContext(contentId, !readOnly, variant === 'drawer');
+  const context = useContentTagsDrawerContext(contentId, !readOnly);
   const { blockingSheet } = useContext(ContentTagsDrawerSheetContext);
 
   const {
@@ -262,7 +261,6 @@ const ContentTagsDrawer = ({
     closeToast,
     setCollapsibleToInitalState,
     otherTaxonomies,
-    toEditMode,
   } = context;
 
   let onCloseDrawer: () => void;
@@ -305,13 +303,8 @@ const ContentTagsDrawer = ({
 
   // First call of the initial collapsible states
   React.useEffect(() => {
-    // Open tag edit mode when sidebarAction is JumpToManageTags
-    if (sidebarAction === SidebarActions.JumpToManageTags) {
-      toEditMode();
-    } else {
-      setCollapsibleToInitalState();
-    }
-  }, [isTaxonomyListLoaded, isContentTaxonomyTagsLoaded, sidebarAction, toEditMode]);
+    setCollapsibleToInitalState();
+  }, [isTaxonomyListLoaded, isContentTaxonomyTagsLoaded]);
 
   const renderFooter = () => {
     if (isTaxonomyListLoaded && isContentTaxonomyTagsLoaded) {

src/content-tags-drawer/ContentTagsDrawerHelper.jsx

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

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

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

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

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

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

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

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

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

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

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

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

@@ -7,7 +7,6 @@ import {
   useMutation,
   useQueryClient,
 } from '@tanstack/react-query';
-import { useParams } from 'react-router';
 import {
   getTaxonomyTagsData,
   getContentTaxonomyTagsData,
@@ -15,11 +14,11 @@ import {
   updateContentTaxonomyTags,
   getContentTaxonomyTagsCount,
 } from './api';
-import { libraryAuthoringQueryKeys, libraryQueryPredicate, xblockQueryKeys } from '../../library-authoring/data/apiHooks';
+import { 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 */
+/** @typedef {import("../../taxonomy/tag-list/data/types.mjs").TagListData} TagListData */
+/** @typedef {import("../../taxonomy/tag-list/data/types.mjs").TagData} TagData */
 
 /**
  * Builds the query to get the taxonomy tags
@@ -113,13 +112,11 @@ 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
  */
-export const useContentData = (contentId, enabled) => (
+export const useContentData = (contentId) => (
   useQuery({
     queryKey: ['contentData', contentId],
-    queryFn: enabled ? () => getContentData(contentId) : undefined,
-    enabled,
+    queryFn: () => getContentData(contentId),
   })
 );
 
@@ -129,8 +126,6 @@ export const useContentData = (contentId, enabled) => (
  */
 export const useContentTaxonomyTagsUpdater = (contentId) => {
   const queryClient = useQueryClient();
-  const unitIframe = window.frames['xblock-iframe'];
-  const { unitId } = useParams();
 
   return useMutation({
     /**
@@ -138,7 +133,7 @@ export const useContentTaxonomyTagsUpdater = (contentId) => {
      *   any,
      *   any,
      *   {
-     *     tagsData: Promise<import("./types.js").UpdateTagsData[]>
+     *     tagsData: Promise<import("./types.mjs").UpdateTagsData[]>
      *   }
      * >}
      */
@@ -153,24 +148,19 @@ export const useContentTaxonomyTagsUpdater = (contentId) => {
         contentPattern = contentId.replace(/\+type@.*$/, '*');
       }
       queryClient.invalidateQueries({ queryKey: ['contentTagsCount', contentPattern] });
-      if (contentId.startsWith('lb:') || contentId.startsWith('lib-collection:') || contentId.startsWith('lct:')) {
+      if (contentId.startsWith('lb:') || contentId.startsWith('lib-collection:')) {
         // Obtain library id from contentId
         const libraryId = getLibraryId(contentId);
         // Invalidate component metadata to update tags count
         queryClient.invalidateQueries(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));
-        }
       }
     },
     onSuccess: /* istanbul ignore next */ () => {
       /* istanbul ignore next */
       if (window.top != null) {
-        // Sends messages to the parent page if the drawer was opened
-        // from an iframe or the unit iframe within the course.
+        // This send messages to the parent page if the drawer is called from a iframe.
         // Is used on Studio to update tags data and counts.
         // In the future, when the Course Outline Page and Unit Page are integrated into this MFE,
         // they should just use React Query to load the tag counts, and React Query will automatically
@@ -179,32 +169,26 @@ export const useContentTaxonomyTagsUpdater = (contentId) => {
 
         // Sends content tags.
         getContentTaxonomyTagsData(contentId).then((data) => {
-          const contentData = { contentId, ...data };
-
-          const message = {
-            type: 'authoring.events.tags.updated',
-            data: contentData,
+          const contentData = {
+            contentId,
+            ...data,
           };
-
-          const targetOrigin = getConfig().STUDIO_BASE_URL;
-
-          unitIframe?.postMessage(message, targetOrigin);
-          window.top?.postMessage(message, targetOrigin);
+          window.top?.postMessage(
+            { type: 'authoring.events.tags.updated', data: contentData },
+            getConfig().STUDIO_BASE_URL,
+          );
         });
 
         // Sends tags count.
-        getContentTaxonomyTagsCount(contentId).then((count) => {
-          const contentData = { contentId, count };
-
-          const message = {
-            type: 'authoring.events.tags.count.updated',
-            data: contentData,
+        getContentTaxonomyTagsCount(contentId).then((data) => {
+          const contentData = {
+            contentId,
+            count: data,
           };
-
-          const targetOrigin = getConfig().STUDIO_BASE_URL;
-
-          unitIframe?.postMessage(message, targetOrigin);
-          window.top?.postMessage(message, targetOrigin);
+          window.top?.postMessage(
+            { type: 'authoring.events.tags.count.updated', data: contentData },
+            getConfig().STUDIO_BASE_URL,
+          );
         });
       }
     },

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

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, useQueries } from '@tanstack/react-query';
-import { act, renderHook } from '@testing-library/react';
+import { act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import {
   useTaxonomyTagsData,
   useContentTaxonomyTagsData,
@@ -157,7 +158,7 @@ describe('useContentTaxonomyTagsUpdater', () => {
 
     const contentId = 'testerContent';
     const taxonomyId = 123;
-    const mutation = renderHook(() => useContentTaxonomyTagsUpdater(contentId)).result.current;
+    const mutation = useContentTaxonomyTagsUpdater(contentId);
     const tagsData = [{
       taxonomy: taxonomyId,
       tags: ['tag1', 'tag2'],

src/content-tags-drawer/data/types.mjs

@@ -0,0 +1,101 @@
+// @ts-check
+
+/**
+ * @typedef {Object} Tag A tag that has been applied to some content.
+ * @property {string} value The value of the tag, also its ID. e.g. "Biology"
+ * @property {string[]} lineage The values of the tag and its parent(s) in the hierarchy
+ * @property {boolean} canChangeObjecttag
+ * @property {boolean} canDeleteObjecttag
+ */
+
+/**
+ * @typedef {Object} ContentTaxonomyTagData A list of the tags from one taxonomy that are applied to a content object.
+ * @property {string} name
+ * @property {number} taxonomyId
+ * @property {boolean} canTagObject
+ * @property {Tag[]} tags
+ * @property {string} exportId
+ */
+
+/**
+ * @typedef {Object} ContentTaxonomyTagsData A list of all the tags applied to some content object, grouped by taxonomy.
+ * @property {ContentTaxonomyTagData[]} taxonomies
+ */
+
+/**
+ * @typedef {Object} ContentActions
+ * @property {boolean} deleteable
+ * @property {boolean} draggable
+ * @property {boolean} childAddable
+ * @property {boolean} duplicable
+ */
+
+/**
+ * @typedef {Object} XBlockData
+ * @property {string} id
+ * @property {string} displayName
+ * @property {string} category
+ * @property {boolean} hasChildren
+ * @property {string} editedOn
+ * @property {boolean} published
+ * @property {string} publishedOn
+ * @property {string} studioUrl
+ * @property {boolean} releasedToStudents
+ * @property {string|null} releaseDate
+ * @property {string} visibilityState
+ * @property {boolean} hasExplicitStaffLock
+ * @property {string} start
+ * @property {boolean} graded
+ * @property {string} dueDate
+ * @property {string} due
+ * @property {string|null} relativeWeeksDue
+ * @property {string|null} format
+ * @property {boolean} hasChanges
+ * @property {ContentActions} actions
+ * @property {string} explanatoryMessage
+ * @property {string} showCorrectness
+ * @property {boolean} discussionEnabled
+ * @property {boolean} ancestorHasStaffLock
+ * @property {boolean} staffOnlyMessage
+ * @property {boolean} hasPartitionGroupComponents
+ */
+
+/**
+ * @typedef {Object} TagsInTaxonomy
+ * @property {boolean} allOrgs
+ * @property {boolean} allowFreeText
+ * @property {boolean} allowMultiple
+ * @property {boolean} canChangeTaxonomy
+ * @property {boolean} canDeleteTaxonomy
+ * @property {boolean} canTagObject
+ * @property {Tag[]} contentTags
+ * @property {string} description
+ * @property {boolean} enabled
+ * @property {string} exportId
+ * @property {number} id
+ * @property {string} name
+ * @property {boolean} systemDefined
+ * @property {number} tagsCount
+ * @property {boolean} visibleToAuthors
+ */
+
+/**
+  * @typedef {Object} CourseData
+  * @property {string} courseDisplayNameWithDefault
+  */
+
+/**
+ * @typedef {XBlockData | CourseData} ContentData
+ */
+
+/**
+ * @typedef {Object} UpdateTagsData
+ * @property {number} taxonomy
+ * @property {string[]} tags
+ */
+
+/**
+ * @typedef {Object} StagedTagData
+ * @property {string} value
+ * @property {string} label
+ */

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

@@ -1,81 +0,0 @@
-import type { TaxonomyData } from '../../taxonomy/data/types';
-
-/** A tag that has been applied to some content. */
-export interface Tag {
-  /** The value of the tag, also its ID. e.g. "Biology" */
-  value: string;
-  /** The values of the tag and its parent(s) in the hierarchy */
-  lineage: string[];
-  canChangeObjecttag: boolean;
-  canDeleteObjecttag: boolean;
-}
-
-/** A list of the tags from one taxonomy that are applied to a content object. */
-export interface ContentTaxonomyTagData {
-  name: string;
-  taxonomyId: number;
-  canTagObject: boolean;
-  tags: Tag[];
-  exportId: string;
-}
-
-/** A list of all the tags applied to some content object, grouped by taxonomy. */
-export interface ContentTaxonomyTagsData {
-  taxonomies: ContentTaxonomyTagData[];
-}
-
-export interface ContentActions {
-  deleteable: boolean;
-  draggable: boolean;
-  childAddable: boolean;
-  duplicable: boolean;
-}
-
-export interface XBlockData {
-  id: string;
-  displayName: string;
-  category: string;
-  hasChildren: boolean;
-  editedOn: string;
-  published: boolean;
-  publishedOn: string;
-  studioUrl: string;
-  releasedToStudents: boolean;
-  releaseDate: string | null;
-  visibilityState: string;
-  hasExplicitStaffLock: boolean;
-  start: string;
-  graded: boolean;
-  dueDate: string;
-  due: string;
-  relativeWeeksDue: string | null;
-  format: string | null;
-  hasChanges: boolean;
-  actions: ContentActions;
-  explanatoryMessage: string;
-  showCorrectness: string;
-  discussionEnabled: boolean;
-  ancestorHasStaffLock: boolean;
-  staffOnlyMessage: boolean;
-  hasPartitionGroupComponents: boolean;
-}
-
-export interface TagsInTaxonomy extends TaxonomyData {
-  contentTags: Tag[];
-}
-
-export interface CourseData {
-  courseDisplayNameWithDefault: string;
-}
-
-export type ContentData = XBlockData | CourseData;
-
-export interface UpdateTagsData {
-  taxonomy: number;
-  tags: string[];
-}
-
-export interface StagedTagData {
-  value: string;
-  label: string;
-}

src/content-tags-drawer/index.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
 export { default as ContentTagsDrawer } from './ContentTagsDrawer';
+// eslint-disable-next-line import/prefer-default-export
 export { default as ContentTagsDrawerSheet } from './ContentTagsDrawerSheet';
-export { useContentTaxonomyTagsData } from './data/apiHooks';

src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx

@@ -1,4 +1,5 @@
-import { useState, useMemo } from 'react';
+// @ts-check
+import React, { useState, useMemo } from 'react';
 import {
   Card, Stack, Button, Collapsible, Icon,
 } from '@openedx/paragon';
@@ -9,19 +10,10 @@ import { ContentTagsDrawerSheet } from '..';
 
 import messages from '../messages';
 import { useContentTaxonomyTagsData } from '../data/apiHooks';
-import type { ContentTaxonomyTagData, Tag } from '../data/types';
 import { LoadingSpinner } from '../../generic/Loading';
 import TagsTree from '../TagsTree';
 
-interface TagsSidebarBodyProps {
-  readOnly: boolean
-}
-
-type TagTree = {
-  [key: string]: { children: TagTree, canChangeObjecttag: boolean, canDeleteObjecttag: boolean }
-};
-
-const TagsSidebarBody = ({ readOnly }: TagsSidebarBodyProps) => {
+const TagsSidebarBody = () => {
   const intl = useIntl();
   const [showManageTags, setShowManageTags] = useState(false);
   const contentId = useParams().blockId;
@@ -32,8 +24,8 @@ const TagsSidebarBody = ({ readOnly }: TagsSidebarBodyProps) => {
     isSuccess: isContentTaxonomyTagsLoaded,
   } = useContentTaxonomyTagsData(contentId || '');
 
-  const buildTagsTree = (contentTags: Tag[]) => {
-    const resultTree: TagTree = {};
+  const buildTagsTree = (contentTags) => {
+    const resultTree = {};
     contentTags.forEach(item => {
       let currentLevel = resultTree;
 
@@ -54,7 +46,7 @@ const TagsSidebarBody = ({ readOnly }: TagsSidebarBodyProps) => {
   };
 
   const tree = useMemo(() => {
-    const result: (Omit<ContentTaxonomyTagData, 'tags'> & { tags: TagTree })[] = [];
+    const result = [];
     if (isContentTaxonomyTagsLoaded && contentTaxonomyTagsData) {
       contentTaxonomyTagsData.taxonomies.forEach((taxonomy) => {
         result.push({
@@ -96,13 +88,7 @@ const TagsSidebarBody = ({ readOnly }: TagsSidebarBodyProps) => {
               </div>
             )}
 
-          <Button
-            className="mt-3 ml-2"
-            variant="outline-primary"
-            size="sm"
-            onClick={() => setShowManageTags(true)}
-            disabled={readOnly}
-          >
+          <Button className="mt-3 ml-2" variant="outline-primary" size="sm" onClick={() => setShowManageTags(true)}>
             {intl.formatMessage(messages.manageTagsButton)}
           </Button>
         </Stack>
@@ -116,4 +102,6 @@ const TagsSidebarBody = ({ readOnly }: TagsSidebarBodyProps) => {
   );
 };
 
+TagsSidebarBody.propTypes = {};
+
 export default TagsSidebarBody;

src/content-tags-drawer/tags-sidebar-controls/index.jsx

@@ -1,14 +1,10 @@
 import TagsSidebarHeader from './TagsSidebarHeader';
 import TagsSidebarBody from './TagsSidebarBody';
 
-interface TagsSidebarControlsProps {
-  readOnly: boolean,
-}
-
-const TagsSidebarControls = ({ readOnly }: TagsSidebarControlsProps) => (
+const TagsSidebarControls = () => (
   <>
     <TagsSidebarHeader />
-    <TagsSidebarBody readOnly={readOnly} />
+    <TagsSidebarBody />
   </>
 );
 

src/content-tags-drawer/utils.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export const extractOrgFromContentId = (contentId) => contentId.split('+')[0].split(':')[1];
+export const languageExportId = 'languages-v1';

src/content-tags-drawer/utils.ts

@@ -1,2 +0,0 @@
-export const extractOrgFromContentId = (contentId: string): string => contentId.split('+')[0].split(':')[1];
-export const languageExportId = 'languages-v1';

src/course-checklist/ChecklistSection/ChecklistItemBody.jsx

@@ -1,95 +1,70 @@
+import React from 'react';
 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 { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Button,
+  Hyperlink,
+  Icon,
+} from '@openedx/paragon';
 import { CheckCircle, RadioButtonUnchecked } from '@openedx/paragon/icons';
-import { getConfig } from '@edx/frontend-platform';
-
-import { getWaffleFlags } from '../../data/selectors';
 import messages from './messages';
 
-const getUpdateLinks = (courseId, waffleFlags) => {
-  const baseUrl = getConfig().STUDIO_BASE_URL;
-  const isLegacyGradingUrl = !waffleFlags.useNewGradingPage;
-  const isLegacyCertificateUrl = !waffleFlags.useNewCertificatesPage;
-  const isLegacyCourseDatesUrl = !waffleFlags.useNewScheduleDetailsPage;
-  const isLegacyOutlineUrl = !waffleFlags.useNewCourseOutlinePage;
-
-  return {
-    welcomeMessage: `/course/${courseId}/course_info`,
-    gradingPolicy: isLegacyGradingUrl
-      ? `${baseUrl}/settings/grading/${courseId}` : `/course/${courseId}/settings/grading`,
-    certificate: isLegacyCertificateUrl
-      ? `${baseUrl}/certificates/${courseId}` : `/course/${courseId}/certificates`,
-    courseDates: isLegacyCourseDatesUrl
-      ? `${baseUrl}/settings/details/${courseId}#schedule` : `/course/${courseId}/settings/details/#schedule`,
-    proctoringEmail: `${baseUrl}/pages-and-resources/proctoring/settings`,
-    outline: isLegacyOutlineUrl ? `${baseUrl}/course/${courseId}` : `/course/${courseId}`,
-  };
-};
-
 const ChecklistItemBody = ({
-  courseId,
   checkId,
   isCompleted,
-}) => {
-  const intl = useIntl();
-  const waffleFlags = useSelector(getWaffleFlags);
-  const updateLinks = getUpdateLinks(courseId, waffleFlags);
-
-  return (
-    <ActionRow>
-      <div className="mr-3" id={`icon-${checkId}`} data-testid={`icon-${checkId}`}>
-        {isCompleted ? (
-          <Icon
-            data-testid="completed-icon"
-            src={CheckCircle}
-            className="text-success"
-            style={{ height: '32px', width: '32px' }}
-            screenReaderText={intl.formatMessage(messages.completedItemLabel)}
-          />
-        ) : (
-          <Icon
-            data-testid="uncompleted-icon"
-            src={RadioButtonUnchecked}
-            style={{ height: '32px', width: '32px' }}
-            screenReaderText={intl.formatMessage(messages.uncompletedItemLabel)}
-          />
-        )}
-      </div>
-      <div>
-        <div>
-          <FormattedMessage {...messages[`${checkId}ShortDescription`]} />
-        </div>
-        <div className="small">
-          <FormattedMessage {...messages[`${checkId}LongDescription`]} />
-        </div>
-      </div>
-      <ActionRow.Spacer />
-      {updateLinks?.[checkId] && (
-        <Link
-          to={updateLinks[checkId]}
-          data-testid="update-link"
-        >
-          <Button size="sm">
-            <FormattedMessage {...messages.updateLinkLabel} />
-          </Button>
-        </Link>
+  updateLink,
+  // injected
+  intl,
+}) => (
+  <ActionRow>
+    <div className="mr-3" id={`icon-${checkId}`} data-testid={`icon-${checkId}`}>
+      {isCompleted ? (
+        <Icon
+          data-testid="completed-icon"
+          src={CheckCircle}
+          className="text-success"
+          style={{ height: '32px', width: '32px' }}
+          screenReaderText={intl.formatMessage(messages.completedItemLabel)}
+        />
+      ) : (
+        <Icon
+          data-testid="uncompleted-icon"
+          src={RadioButtonUnchecked}
+          style={{ height: '32px', width: '32px' }}
+          screenReaderText={intl.formatMessage(messages.uncompletedItemLabel)}
+        />
       )}
-    </ActionRow>
-  );
-};
+    </div>
+    <div>
+      <div>
+        <FormattedMessage {...messages[`${checkId}ShortDescription`]} />
+      </div>
+      <div className="small">
+        <FormattedMessage {...messages[`${checkId}LongDescription`]} />
+      </div>
+    </div>
+    <ActionRow.Spacer />
+    {updateLink && (
+      <Hyperlink destination={updateLink} data-testid="update-hyperlink">
+        <Button size="sm">
+          <FormattedMessage {...messages.updateLinkLabel} />
+        </Button>
+      </Hyperlink>
+    )}
+  </ActionRow>
+);
 
 ChecklistItemBody.defaultProps = {
   updateLink: null,
 };
 
 ChecklistItemBody.propTypes = {
-  courseId: PropTypes.string.isRequired,
   checkId: PropTypes.string.isRequired,
   isCompleted: PropTypes.bool.isRequired,
   updateLink: PropTypes.string,
+  // injected
+  intl: intlShape.isRequired,
 };
 
-export default ChecklistItemBody;
+export default injectIntl(ChecklistItemBody);

src/course-checklist/ChecklistSection/ChecklistItemComment.jsx

@@ -1,23 +1,15 @@
+import React from 'react';
 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 { Hyperlink, Icon } from '@openedx/paragon';
 import { ModeComment } from '@openedx/paragon/icons';
-import { getConfig } from '@edx/frontend-platform';
-import { getWaffleFlags } from '../../data/selectors';
 import messages from './messages';
 
 const ChecklistItemComment = ({
-  courseId,
   checkId,
+  outlineUrl,
   data,
 }) => {
-  const waffleFlags = useSelector(getWaffleFlags);
-
-  const getPathToCourseOutlinePage = (assignmentId) => (waffleFlags.useNewCourseOutlinePage
-    ? `/course/${courseId}#${assignmentId}` : `${getConfig().STUDIO_BASE_URL}/course/${courseId}#${assignmentId}`);
-
   const commentWrapper = (comment) => (
     <div className="row m-0 mt-3 pt-3 border-top align-items-center" data-identifier="comment">
       <div className="mr-4">
@@ -87,9 +79,9 @@ const ChecklistItemComment = ({
         <ul className="assignment-list">
           {gradedAssignmentsOutsideDateRange.map(assignment => (
             <li className="assignment-list-item" key={assignment.id}>
-              <Link to={getPathToCourseOutlinePage(assignment.id)}>
+              <Hyperlink destination={`${outlineUrl}#${assignment.id}`}>
                 {assignment.displayName}
-              </Link>
+              </Hyperlink>
             </li>
           ))}
         </ul>
@@ -104,7 +96,6 @@ const ChecklistItemComment = ({
 };
 
 ChecklistItemComment.propTypes = {
-  courseId: PropTypes.string.isRequired,
   checkId: PropTypes.string.isRequired,
   outlineUrl: PropTypes.string.isRequired,
   data: PropTypes.oneOfType([

src/course-checklist/ChecklistSection/ChecklistSection.jsx

@@ -10,11 +10,11 @@ import ChecklistItemComment from './ChecklistItemComment';
 import { checklistItems } from './utils/courseChecklistData';
 
 const ChecklistSection = ({
-  courseId,
   dataHeading,
   data,
   idPrefix,
   isLoading,
+  updateLinks,
 }) => {
   const dataList = checklistItems[idPrefix];
   const getCompletionCountID = () => (`${idPrefix}-completion-count`);
@@ -37,6 +37,8 @@ const ChecklistSection = ({
             {checks.map(check => {
               const checkId = check.id;
               const isCompleted = values[checkId];
+              const updateLink = updateLinks?.[checkId];
+              const outlineUrl = updateLinks.outline;
               return (
                 <div
                   className={`bg-white border py-3 px-4 ${isCompleted && 'checklist-item-complete'}`}
@@ -44,9 +46,9 @@ const ChecklistSection = ({
                   data-testid={`checklist-item-${checkId}`}
                   key={checkId}
                 >
-                  <ChecklistItemBody courseId={courseId} {...{ checkId, isCompleted }} />
+                  <ChecklistItemBody {...{ checkId, isCompleted, updateLink }} />
                   <div data-testid={`comment-section-${checkId}`}>
-                    <ChecklistItemComment {...{ courseId, checkId, data }} />
+                    <ChecklistItemComment {...{ checkId, outlineUrl, data }} />
                   </div>
                 </div>
               );
@@ -59,11 +61,11 @@ const ChecklistSection = ({
 };
 
 ChecklistSection.defaultProps = {
+  updateLinks: {},
   data: {},
 };
 
 ChecklistSection.propTypes = {
-  courseId: PropTypes.string.isRequired,
   dataHeading: PropTypes.string.isRequired,
   data: PropTypes.oneOfType([
     PropTypes.shape({
@@ -127,6 +129,14 @@ ChecklistSection.propTypes = {
   ]),
   idPrefix: PropTypes.string.isRequired,
   isLoading: PropTypes.bool.isRequired,
+  updateLinks: PropTypes.shape({
+    welcomeMessage: PropTypes.string,
+    gradingPolicy: PropTypes.string,
+    certificate: PropTypes.string,
+    courseDates: PropTypes.string,
+    proctoringEmail: PropTypes.string,
+    outline: PropTypes.string,
+  }),
 };
 
 export default injectIntl(ChecklistSection);

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

@@ -1,49 +1,59 @@
-import { camelCaseObject } from '@edx/frontend-platform';
-
+/* eslint-disable */
 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';
+  render,
+  within,
+  screen,
+} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import ChecklistSection from '.';
+import initializeStore from '../../store';
+import { initialState,generateCourseLaunchData } from '../factories/mockApiResponses';
+import messages from './messages';
+import ChecklistSection from './index';
+import { checklistItems } from './utils/courseChecklistData';
+import getUpdateLinks from '../utils';
 
 const testData = camelCaseObject(generateCourseLaunchData());
 
-const courseId = '123';
 
 const defaultProps = {
-  courseId,
   data: testData,
   dataHeading: 'Test checklist',
   idPrefix: 'launchChecklist',
+  updateLinks: getUpdateLinks('courseId'),
   isLoading: false,
 };
 
 const testChecklistData = checklistItems[defaultProps.idPrefix];
 
-const completedItemIds = ['welcomeMessage', 'courseDates'];
+const completedItemIds = ['welcomeMessage', 'courseDates']
 
 const renderComponent = (props) => {
-  render(<ChecklistSection {...props} />);
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <ChecklistSection {...props} />
+      </AppProvider>
+    </IntlProvider>,
+  );
 };
 
+let store;
+
 describe('ChecklistSection', () => {
-  beforeEach(async () => {
-    const { axiosMock, reduxStore } = initializeMocks();
-    axiosMock
-      .onGet(getApiWaffleFlagsUrl(courseId))
-      .reply(200, {
-        useNewGradingPage: true,
-        useNewCertificatesPage: true,
-        useNewScheduleDetailsPage: true,
-        useNewCourseOutlinePage: true,
-      });
-    await executeThunk(fetchWaffleFlags(courseId), reduxStore.dispatch);
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
   });
 
   it('a heading using the dataHeading prop', () => {
@@ -54,7 +64,6 @@ describe('ChecklistSection', () => {
 
   it('completion count text', () => {
     renderComponent(defaultProps);
-
     const completionText = `${completedItemIds.length}/6 completed`;
     expect(screen.getByTestId('completion-subheader').textContent).toEqual(completionText);
   });
@@ -113,7 +122,7 @@ describe('ChecklistSection', () => {
           grades: {
             ...defaultProps.data.grades,
             sumOfWeights: 1,
-          },
+          }
         },
       };
       renderComponent(props);
@@ -145,7 +154,7 @@ describe('ChecklistSection', () => {
             ...defaultProps.data.assignments,
             assignmentsWithDatesAfterEnd: [],
             assignmentsWithOraDatesBeforeStart: [],
-          },
+          }
         },
       };
       renderComponent(props);
@@ -174,52 +183,73 @@ describe('ChecklistSection', () => {
       expect(assigmentLinks[1].textContent).toEqual('ORA subsection');
     });
   });
+});    
 
-  describe('Checklist Component', () => {
-    let checklistData;
-    let updateLinks;
-
+testChecklistData.forEach((check) => {
+  describe(`check with id '${check.id}'`, () => {
+    let checkItem;
     beforeEach(() => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore(initialState);
       renderComponent(defaultProps);
-
-      checklistData = testChecklistData.map((item) => ({
-        itemId: item.id,
-        checklistItem: screen.getAllByTestId(`checklist-item-${item.id}`),
-        icon: screen.getAllByTestId(`icon-${item.id}`),
-        shortDescription: messages[`${item.id}ShortDescription`].defaultMessage,
-        longDescription: messages[`${item.id}LongDescription`].defaultMessage,
-      }));
-
-      updateLinks = screen.getAllByTestId('update-link');
+      checkItem = screen.getAllByTestId(`checklist-item-${check.id}`);
     });
 
-    it('should display the correct icons based on completion status', () => {
-      checklistData.forEach(({ itemId, icon }) => {
-        const { queryByTestId } = within(icon[0]);
-
-        if (completedItemIds.includes(itemId)) {
-          expect(queryByTestId('completed-icon')).not.toBeNull();
-        } else {
-          expect(queryByTestId('uncompleted-icon')).not.toBeNull();
-        }
-      });
+    it('renders', () => {
+      expect(checkItem).toHaveLength(1);
     });
 
-    it('should display short and long descriptions for each checklist item', () => {
-      checklistData.forEach(({ checklistItem, shortDescription, longDescription }) => {
-        const { getByText } = within(checklistItem[0]);
+    it('has correct icon', () => {
+      const icon = screen.getAllByTestId(`icon-${check.id}`)
 
-        expect(getByText(shortDescription)).toBeVisible();
-        expect(getByText(longDescription)).toBeVisible();
-      });
+      expect(icon).toHaveLength(1);
+
+      const { queryByTestId } = within(icon[0]);
+      if (completedItemIds.includes(check.id)) {
+        expect(queryByTestId('completed-icon')).not.toBeNull();
+      } else {
+        expect(queryByTestId('uncompleted-icon')).not.toBeNull();
+      }
     });
 
-    it('should have valid update links for each checklist item', () => {
-      checklistData.forEach(({ itemId }) => {
-        updateLinks.forEach((link) => {
-          expect(link).toHaveAttribute('href', updateLinks[itemId]);
+    it('has correct short description', () => {
+      const { getByText } = within(checkItem[0]);
+      const shortDescription = messages[`${check.id}ShortDescription`].defaultMessage;
+      expect(getByText(shortDescription)).toBeVisible();
+    });
+
+    it('has correct long description', () => {
+      const { getByText } = within(checkItem[0]);
+      const longDescription = messages[`${check.id}LongDescription`].defaultMessage;
+      expect(getByText(longDescription)).toBeVisible();
+    });
+
+    describe('has correct link', () => {
+      const links = getUpdateLinks('courseId')
+      const shouldShowLink = Object.keys(links).includes(check.id);
+
+      if (shouldShowLink) {
+        it('with a Hyperlink', () => {
+          const { getByRole, getByText } = within(checkItem[0]);
+
+          expect(getByText('Update')).toBeVisible();
+
+          expect(getByRole('link').href).toMatch(links[check.id]);
         });
-      });
+      } else {
+        it('without a Hyperlink', () => {
+          const { queryByText } = within(checkItem[0]);
+
+          expect(queryByText('Update')).toBeNull();
+        });
+      }
     });
   });
 });

src/course-checklist/CourseChecklist.jsx

@@ -13,7 +13,7 @@ import AriaLiveRegion from './AriaLiveRegion';
 import { RequestStatus } from '../data/constants';
 import ChecklistSection from './ChecklistSection';
 import { fetchCourseLaunchQuery, fetchCourseBestPracticesQuery } from './data/thunks';
-import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+import getUpdateLinks from './utils';
 
 const CourseChecklist = ({
   courseId,
@@ -23,6 +23,7 @@ const CourseChecklist = ({
   const dispatch = useDispatch();
   const courseDetails = useModel('courseDetails', courseId);
   const enableQuality = getConfig().ENABLE_CHECKLIST_QUALITY === 'true';
+  const updateLinks = getUpdateLinks(courseId);
 
   useEffect(() => {
     dispatch(fetchCourseLaunchQuery({ courseId }));
@@ -35,19 +36,10 @@ const CourseChecklist = ({
     bestPracticeData,
   } = useSelector(state => state.courseChecklist);
 
-  const { bestPracticeChecklistLoadingStatus, launchChecklistLoadingStatus, launchChecklistStatus } = loadingStatus;
+  const { bestPracticeChecklistLoadingStatus, launchChecklistLoadingStatus } = loadingStatus;
 
   const isCourseLaunchChecklistLoading = bestPracticeChecklistLoadingStatus === RequestStatus.IN_PROGRESS;
   const isCourseBestPracticeChecklistLoading = launchChecklistLoadingStatus === RequestStatus.IN_PROGRESS;
-  const isLoadingDenied = launchChecklistStatus === RequestStatus.DENIED;
-
-  if (isLoadingDenied) {
-    return (
-      <Container size="xl" className="course-unit px-4 mt-4">
-        <ConnectionErrorAlert />
-      </Container>
-    );
-  }
 
   return (
     <>
@@ -74,19 +66,19 @@ const CourseChecklist = ({
         />
         <Stack gap={4}>
           <ChecklistSection
-            courseId={courseId}
             dataHeading={intl.formatMessage(messages.launchChecklistLabel)}
             data={launchData}
             idPrefix="launchChecklist"
             isLoading={isCourseLaunchChecklistLoading}
+            updateLinks={updateLinks}
           />
           {enableQuality && (
             <ChecklistSection
-              courseId={courseId}
               dataHeading={intl.formatMessage(messages.bestPracticesChecklistLabel)}
               data={bestPracticeData}
               idPrefix="bestPracticesChecklist"
               isLoading={isCourseBestPracticeChecklistLoading}
+              updateLinks={updateLinks}
             />
           )}
         </Stack>

src/course-checklist/CourseChecklist.test.jsx

@@ -149,20 +149,5 @@ describe('CourseChecklistPage', () => {
         });
       });
     });
-
-    it('displays an alert and sets status to DENIED when API responds with 403', async () => {
-      const courseLaunchApiUrl = getCourseLaunchApiUrl({
-        courseId, gradedOnly: true, validateOras: true, all: true,
-      });
-      axiosMock.onGet(courseLaunchApiUrl).reply(403);
-
-      renderComponent();
-
-      await waitFor(() => {
-        const { launchChecklistStatus } = store.getState().courseChecklist.loadingStatus;
-        expect(launchChecklistStatus).toEqual(RequestStatus.DENIED);
-        expect(screen.getByRole('alert')).toBeInTheDocument();
-      });
-    });
   });
 });

src/course-checklist/data/thunks.js

@@ -24,11 +24,7 @@ export function fetchCourseLaunchQuery({
       dispatch(fetchLaunchChecklistSuccess({ data }));
       dispatch(updateLaunchChecklistStatus({ status: RequestStatus.SUCCESSFUL }));
     } catch (error) {
-      if (error.response && error.response.status === 403) {
-        dispatch(updateLaunchChecklistStatus({ status: RequestStatus.DENIED }));
-      } else {
-        dispatch(updateLaunchChecklistStatus({ status: RequestStatus.FAILED }));
-      }
+      dispatch(updateLaunchChecklistStatus({ status: RequestStatus.FAILED }));
     }
   };
 }

src/course-checklist/utils.js

@@ -0,0 +1,12 @@
+import { getConfig } from '@edx/frontend-platform';
+
+const getUpdateLinks = (courseId) => ({
+  welcomeMessage: `${getConfig().STUDIO_BASE_URL}/course_info/${courseId}`,
+  gradingPolicy: `${getConfig().STUDIO_BASE_URL}/settings/grading/${courseId}`,
+  certificate: `${getConfig().STUDIO_BASE_URL}/certificates/${courseId}`,
+  courseDates: `${getConfig().STUDIO_BASE_URL}/settings/details/${courseId}#schedule`,
+  proctoringEmail: 'pages-and-resources/proctoring/settings',
+  outline: `${getConfig().STUDIO_BASE_URL}/course/${courseId}`,
+});
+
+export default getUpdateLinks;

src/course-libraries/CourseLibraries.test.tsx

@@ -1,284 +0,0 @@
-import fetchMock from 'fetch-mock-jest';
-
-import userEvent from '@testing-library/user-event';
-import MockAdapter from 'axios-mock-adapter/types';
-import { QueryClient } from '@tanstack/react-query';
-import {
-  initializeMocks,
-  render,
-  screen,
-  waitFor,
-  within,
-} from '../testUtils';
-import { mockContentSearchConfig } from '../search-manager/data/api.mock';
-import { CourseLibraries } from './CourseLibraries';
-import {
-  mockGetEntityLinks,
-  mockGetEntityLinksSummaryByDownstreamContext,
-  mockFetchIndexDocuments,
-  mockUseLibBlockMetadata,
-} from './data/api.mocks';
-import { libraryBlockChangesUrl } from '../course-unit/data/api';
-import { type ToastActionData } from '../generic/toast-context';
-
-mockContentSearchConfig.applyMock();
-mockGetEntityLinks.applyMock();
-mockGetEntityLinksSummaryByDownstreamContext.applyMock();
-mockUseLibBlockMetadata.applyMock();
-
-const searchParamsGetMock = jest.fn();
-let axiosMock: MockAdapter;
-let mockShowToast: (message: string, action?: ToastActionData | undefined) => void;
-let queryClient: QueryClient;
-
-jest.mock('../studio-home/hooks', () => ({
-  useStudioHome: () => ({
-    isLoadingPage: false,
-    isFailedLoadingPage: false,
-    librariesV2Enabled: true,
-  }),
-}));
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
-  useSearchParams: () => [{
-    get: searchParamsGetMock,
-    getAll: () => [],
-  }],
-}));
-
-describe('<CourseLibraries />', () => {
-  beforeEach(() => {
-    initializeMocks();
-    fetchMock.mockReset();
-    mockFetchIndexDocuments.applyMock();
-    localStorage.clear();
-    searchParamsGetMock.mockReturnValue('all');
-  });
-
-  const renderCourseLibrariesPage = async (courseKey?: string) => {
-    const courseId = courseKey || mockGetEntityLinks.courseKey;
-    render(<CourseLibraries courseId={courseId} />);
-  };
-
-  it('shows the spinner before the query is complete', async () => {
-    // This mock will never return data (it loads forever):
-    await renderCourseLibrariesPage(mockGetEntityLinksSummaryByDownstreamContext.courseKeyLoading);
-    const spinner = await screen.findByRole('status');
-    expect(spinner.textContent).toEqual('Loading...');
-  });
-
-  it('shows empty state when no links are present', async () => {
-    await renderCourseLibrariesPage(mockGetEntityLinks.courseKeyEmpty);
-    const emptyMsg = await screen.findByText('This course does not use any content from libraries.');
-    expect(emptyMsg).toBeInTheDocument();
-  });
-
-  it('shows alert when out of sync components are present', async () => {
-    await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
-    const allTab = await screen.findByRole('tab', { name: 'Libraries' });
-    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 5' });
-    // review tab should be open by default as outOfSyncCount is greater than 0
-    expect(reviewTab).toHaveAttribute('aria-selected', 'true');
-
-    userEvent.click(allTab);
-    const alert = (await screen.findAllByRole('alert'))[0];
-    expect(await within(alert).findByText(
-      '5 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);
-
-    expect(allTab).toHaveAttribute('aria-selected', 'false');
-    expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
-    expect(alert).not.toBeInTheDocument();
-  });
-
-  it('hide alert on dismiss', async () => {
-    await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
-    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 5' });
-    // 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);
-    expect(allTab).toHaveAttribute('aria-selected', 'true');
-
-    const alert = (await screen.findAllByRole('alert'))[0];
-    expect(await within(alert).findByText(
-      '5 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);
-    expect(allTab).toHaveAttribute('aria-selected', 'true');
-    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');
-  });
-
-  it('show alert if max lastPublishedDate is greated than the local storage value', async () => {
-    const lastPublishedDate = new Date('2025-05-01T22:20:44.989042Z');
-    localStorage.setItem(
-      `outOfSyncCountAlert-${mockGetEntityLinks.courseKey}`,
-      String(lastPublishedDate.getTime() - 1000),
-    );
-
-    await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
-    const allTab = await screen.findByRole('tab', { name: 'Libraries' });
-    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 5' });
-    // review tab should be open by default as outOfSyncCount is greater than 0
-    expect(reviewTab).toHaveAttribute('aria-selected', 'true');
-
-    userEvent.click(allTab);
-    const alert = (await screen.findAllByRole('alert'))[0];
-    expect(await within(alert).findByText(
-      '5 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 lastPublishedDate = new Date('2025-05-01T22:20:44.989042Z');
-    localStorage.setItem(
-      `outOfSyncCountAlert-${mockGetEntityLinks.courseKey}`,
-      String(lastPublishedDate.getTime() + 1000),
-    );
-
-    await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
-    const allTab = await screen.findByRole('tab', { name: 'Libraries' });
-    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 5' });
-    // review tab should be open by default as outOfSyncCount is greater than 0
-    expect(reviewTab).toHaveAttribute('aria-selected', 'true');
-    userEvent.click(allTab);
-    expect(allTab).toHaveAttribute('aria-selected', 'true');
-
-    screen.logTestingPlaygroundURL();
-
-    expect(screen.queryAllByRole('alert').length).toEqual(1);
-  });
-});
-
-describe('<CourseLibraries ReviewTab />', () => {
-  beforeEach(() => {
-    const mocks = initializeMocks();
-    axiosMock = mocks.axiosMock;
-    mockShowToast = mocks.mockShowToast;
-    fetchMock.mockReset();
-    mockFetchIndexDocuments.applyMock();
-    localStorage.clear();
-    searchParamsGetMock.mockReturnValue('review');
-    queryClient = mocks.queryClient;
-  });
-
-  const renderCourseLibrariesReviewPage = async (courseKey?: string) => {
-    const courseId = courseKey || mockGetEntityLinks.courseKey;
-    render(<CourseLibraries courseId={courseId} />);
-  };
-
-  it('shows the spinner before the query is complete', async () => {
-    // This mock will never return data (it loads forever):
-    await renderCourseLibrariesReviewPage(mockGetEntityLinks.courseKeyLoading);
-    const spinner = await screen.findByRole('status');
-    expect(spinner.textContent).toEqual('Loading...');
-  });
-
-  it('shows empty state when no readyToSync links are present', async () => {
-    await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKeyUpToDate);
-    const emptyMsg = await screen.findByText('All components are up to date');
-    expect(emptyMsg).toBeInTheDocument();
-  });
-
-  it('shows all readyToSync links', async () => {
-    await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
-    const updateBtns = await screen.findAllByRole('button', { name: 'Update' });
-    expect(updateBtns.length).toEqual(5);
-    const ignoreBtns = await screen.findAllByRole('button', { name: 'Ignore' });
-    expect(ignoreBtns.length).toEqual(5);
-  });
-
-  it('update changes works', async () => {
-    const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response[0].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]);
-    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']);
-  });
-
-  it('update changes works in preview modal', async () => {
-    const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response[0].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]);
-    const dialog = await screen.findByRole('dialog');
-    const confirmBtn = await within(dialog).findByRole('button', { name: 'Accept changes' });
-    userEvent.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']);
-  });
-
-  it('ignore change works', async () => {
-    const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response[0].downstreamUsageKey;
-    axiosMock.onDelete(libraryBlockChangesUrl(usageKey)).reply(204, {});
-    await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
-    const ignoreBtns = await screen.findAllByRole('button', { name: 'Ignore' });
-    expect(ignoreBtns.length).toEqual(5);
-    // Show confirmation modal on clicking ignore.
-    userEvent.click(ignoreBtns[0]);
-    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 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']);
-  });
-
-  it('ignore change works in preview', async () => {
-    const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response[0].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]);
-    const previewDialog = await screen.findByRole('dialog');
-    const ignoreBtn = await within(previewDialog).findByRole('button', { name: 'Ignore changes' });
-    userEvent.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 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']);
-  });
-});

src/course-libraries/CourseLibraries.tsx

@@ -1,254 +0,0 @@
-import React, {
-  useCallback, useEffect, useMemo, useState,
-} from 'react';
-import { Helmet } from 'react-helmet';
-import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import {
-  Alert,
-  ActionRow,
-  Button,
-  Card,
-  Container,
-  Hyperlink,
-  Icon,
-  Stack,
-  Tab,
-  Tabs,
-} from '@openedx/paragon';
-import {
-  Cached, CheckCircle, Launch, Loop, Info,
-} from '@openedx/paragon/icons';
-
-import sumBy from 'lodash/sumBy';
-import { useSearchParams } from 'react-router-dom';
-import getPageHeadTitle from '../generic/utils';
-import { useModel } from '../generic/model-store';
-import messages from './messages';
-import SubHeader from '../generic/sub-header/SubHeader';
-import { useEntityLinksSummaryByDownstreamContext } from './data/apiHooks';
-import type { PublishableEntityLinkSummary } from './data/api';
-import Loading from '../generic/Loading';
-import { useStudioHome } from '../studio-home/hooks';
-import NewsstandIcon from '../generic/NewsstandIcon';
-import ReviewTabContent from './ReviewTabContent';
-import { OutOfSyncAlert } from './OutOfSyncAlert';
-import AlertMessage from '../generic/alert-message';
-
-interface Props {
-  courseId: string;
-}
-
-interface LibraryCardProps {
-  linkSummary: PublishableEntityLinkSummary;
-}
-
-export enum CourseLibraryTabs {
-  all = 'all',
-  review = 'review',
-}
-
-const LibraryCard = ({ linkSummary }: LibraryCardProps) => {
-  const intl = useIntl();
-
-  return (
-    <Card className="my-3 border-light-500 border shadow-none">
-      <Card.Header
-        title={(
-          <Stack direction="horizontal" gap={2}>
-            <Icon src={NewsstandIcon} />
-            {linkSummary.upstreamContextTitle}
-          </Stack>
-        )}
-        actions={(
-          <ActionRow>
-            <Button
-              destination={`${getConfig().PUBLIC_PATH}library/${linkSummary.upstreamContextKey}`}
-              target="_blank"
-              className="border border-light-300"
-              variant="tertiary"
-              as={Hyperlink}
-              size="sm"
-              showLaunchIcon={false}
-              iconAfter={Launch}
-            >
-              View Library
-            </Button>
-          </ActionRow>
-        )}
-        size="sm"
-      />
-      <Card.Section>
-        <Stack
-          direction="horizontal"
-          gap={4}
-          className="x-small"
-        >
-          <span>
-            {intl.formatMessage(messages.totalComponentLabel, { totalComponents: linkSummary.totalCount })}
-          </span>
-          {linkSummary.readyToSyncCount > 0 && (
-            <Stack direction="horizontal" gap={1}>
-              <Icon src={Loop} size="xs" />
-              <span>
-                {intl.formatMessage(messages.outOfSyncCountLabel, { outOfSyncCount: linkSummary.readyToSyncCount })}
-              </span>
-            </Stack>
-          )}
-        </Stack>
-      </Card.Section>
-    </Card>
-  );
-};
-
-export const CourseLibraries: React.FC<Props> = ({ courseId }) => {
-  const intl = useIntl();
-  const courseDetails = useModel('courseDetails', courseId);
-  const [searchParams] = useSearchParams();
-  const [tabKey, setTabKey] = useState<CourseLibraryTabs>(
-    () => searchParams.get('tab') as CourseLibraryTabs,
-  );
-  const [showReviewAlert, setShowReviewAlert] = useState(false);
-  const { data: libraries, isLoading } = useEntityLinksSummaryByDownstreamContext(courseId);
-  const outOfSyncCount = useMemo(() => sumBy(libraries, (lib) => lib.readyToSyncCount), [libraries]);
-  const {
-    isLoadingPage: isLoadingStudioHome,
-    isFailedLoadingPage: isFailedLoadingStudioHome,
-    librariesV2Enabled,
-  } = useStudioHome();
-
-  const onAlertReview = () => {
-    setTabKey(CourseLibraryTabs.review);
-  };
-
-  const tabChange = useCallback((selectedTab: CourseLibraryTabs) => {
-    setTabKey(selectedTab);
-  }, []);
-
-  useEffect(() => {
-    setTabKey((prev) => {
-      if (outOfSyncCount > 0) {
-        return CourseLibraryTabs.review;
-      }
-      if (prev) {
-        return prev;
-      }
-      /* istanbul ignore next */
-      return CourseLibraryTabs.all;
-    });
-  }, [outOfSyncCount]);
-
-  const renderLibrariesTabContent = useCallback(() => {
-    if (isLoading) {
-      return <Loading />;
-    }
-    if (libraries?.length === 0) {
-      return <small><FormattedMessage {...messages.homeTabDescriptionEmpty} /></small>;
-    }
-    return (
-      <>
-        <small><FormattedMessage {...messages.homeTabDescription} /></small>
-        {libraries?.map((library) => (
-          <LibraryCard
-            linkSummary={library}
-            key={library.upstreamContextKey}
-          />
-        ))}
-      </>
-    );
-  }, [libraries, isLoading]);
-
-  const renderReviewTabContent = useCallback(() => {
-    if (isLoading) {
-      return <Loading />;
-    }
-    if (tabKey !== CourseLibraryTabs.review) {
-      return null;
-    }
-    if (!outOfSyncCount) {
-      return (
-        <Stack direction="horizontal" gap={2}>
-          <Icon src={CheckCircle} size="xs" />
-          <small>
-            <FormattedMessage {...messages.reviewTabDescriptionEmpty} />
-          </small>
-        </Stack>
-      );
-    }
-    return <ReviewTabContent courseId={courseId} />;
-  }, [outOfSyncCount, isLoading, tabKey]);
-
-  if (!isLoadingStudioHome && (!librariesV2Enabled || isFailedLoadingStudioHome)) {
-    return (
-      <Alert variant="danger">
-        {intl.formatMessage(messages.librariesV2DisabledError)}
-      </Alert>
-    );
-  }
-
-  return (
-    <>
-      <Helmet>
-        <title>
-          {getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.headingTitle))}
-        </title>
-      </Helmet>
-      <Container size="xl" className="px-4 pt-4 mt-3">
-        <OutOfSyncAlert
-          courseId={courseId}
-          onReview={onAlertReview}
-          showAlert={showReviewAlert && tabKey === CourseLibraryTabs.all}
-          setShowAlert={setShowReviewAlert}
-        />
-        { /* TODO: Remove this alert after implement container in this page */}
-        <AlertMessage
-          title={intl.formatMessage(messages.unitsUpdatesWarning)}
-          icon={Info}
-          variant="info"
-        />
-        <SubHeader
-          title={intl.formatMessage(messages.headingTitle)}
-          subtitle={intl.formatMessage(messages.headingSubtitle)}
-          headerActions={!showReviewAlert && outOfSyncCount > 0 && tabKey === CourseLibraryTabs.all && (
-            <Button
-              variant="primary"
-              onClick={onAlertReview}
-              iconBefore={Cached}
-            >
-              {intl.formatMessage(messages.reviewUpdatesBtn)}
-            </Button>
-          )}
-          hideBorder
-        />
-        <section className="mb-4">
-          <Tabs
-            id="course-library-tabs"
-            activeKey={tabKey}
-            onSelect={tabChange}
-          >
-            <Tab
-              eventKey={CourseLibraryTabs.all}
-              title={intl.formatMessage(messages.homeTabTitle)}
-              className="px-2 mt-3"
-            >
-              {renderLibrariesTabContent()}
-            </Tab>
-            <Tab
-              eventKey={CourseLibraryTabs.review}
-              title={(
-                <Stack direction="horizontal" gap={1}>
-                  <Icon src={Loop} />
-                  {intl.formatMessage(messages.reviewTabTitle)}
-                </Stack>
-              )}
-              notification={outOfSyncCount}
-              className="px-2 mt-3"
-            >
-              {renderReviewTabContent()}
-            </Tab>
-          </Tabs>
-        </section>
-      </Container>
-    </>
-  );
-};

src/course-libraries/OutOfSyncAlert.tsx

@@ -1,78 +0,0 @@
-import React, { useEffect } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@openedx/paragon';
-import { Loop } from '@openedx/paragon/icons';
-import AlertMessage from '../generic/alert-message';
-import { useEntityLinksSummaryByDownstreamContext } from './data/apiHooks';
-import messages from './messages';
-
-interface OutOfSyncAlertProps {
-  showAlert: boolean,
-  setShowAlert: React.Dispatch<React.SetStateAction<boolean>>,
-  courseId: string,
-  onDismiss?: () => void;
-  onReview: () => void;
-}
-/**
-* Shows an alert when library components used in the current course were updated and the blocks
-* in course can be updated. Following are the conditions for displaying the alert.
-*
-* * The alert is displayed if components are out of sync.
-* * If the user clicks on dismiss button, the state of dismiss is stored in localstorage of user
-*   in this format: outOfSyncCountAlert-${courseId} = <datetime value in milliseconds>.
-* * If there are not new published components for the course and the user opens outline
-*   in the same browser, they don't see the alert again.
-* * If there is a new published component upstream, the alert is displayed again.
-*/
-export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
-  showAlert,
-  setShowAlert,
-  courseId,
-  onDismiss,
-  onReview,
-}) => {
-  const intl = useIntl();
-  const { data, isLoading } = 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) {
-      return;
-    }
-    if (outOfSyncCount === 0) {
-      localStorage.removeItem(alertKey);
-      setShowAlert(false);
-      return;
-    }
-    const dismissedAlertDate = parseInt(localStorage.getItem(alertKey) ?? '0', 10);
-
-    setShowAlert((lastPublishedDate ?? 0) > dismissedAlertDate);
-  }, [outOfSyncCount, lastPublishedDate, isLoading, data]);
-
-  const dismissAlert = () => {
-    setShowAlert(false);
-    localStorage.setItem(alertKey, Date.now().toString());
-    onDismiss?.();
-  };
-
-  return (
-    <AlertMessage
-      title={intl.formatMessage(messages.outOfSyncCountAlertTitle, { outOfSyncCount })}
-      dismissible
-      show={showAlert}
-      icon={Loop}
-      variant="info"
-      onClose={dismissAlert}
-      actions={[
-        <Button
-          onClick={onReview}
-        >
-          {intl.formatMessage(messages.outOfSyncCountAlertReviewBtn)}
-        </Button>,
-      ]}
-    />
-  );
-};

src/course-libraries/ReviewTabContent.tsx

@@ -1,330 +0,0 @@
-import React, {
-  useCallback, useContext, useMemo, useState,
-} from 'react';
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  ActionRow,
-  Breadcrumb,
-  Button,
-  Card,
-  Hyperlink,
-  Icon,
-  Stack,
-  useToggle,
-} from '@openedx/paragon';
-
-import { tail, keyBy } from 'lodash';
-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 {
-  SearchContextProvider, SearchKeywordsField, useSearchContext, BlockTypeLabel, Highlight, SearchSortWidget,
-} from '../search-manager';
-import { getItemIcon } from '../generic/block-type-utils';
-import type { ContentHit } from '../search-manager/data/api';
-import { SearchSortOption } from '../search-manager/data/api';
-import Loading from '../generic/Loading';
-import { useAcceptLibraryBlockChanges, useIgnoreLibraryBlockChanges } from '../course-unit/data/apiHooks';
-import { PreviewLibraryXBlockChanges, LibraryChangesMessageData } from '../course-unit/preview-changes';
-import LoadingButton from '../generic/loading-button';
-import { ToastContext } from '../generic/toast-context';
-import { useLoadOnScroll } from '../hooks';
-import DeleteModal from '../generic/delete-modal/DeleteModal';
-import { PublishableEntityLink } from './data/api';
-import AlertError from '../generic/alert-error';
-
-interface Props {
-  courseId: string;
-}
-
-interface BlockCardProps {
-  info: ContentHit;
-  actions?: React.ReactNode;
-}
-
-const BlockCard: React.FC<BlockCardProps> = ({ info, actions }) => {
-  const intl = useIntl();
-  const componentIcon = getItemIcon(info.blockType);
-  const breadcrumbs = tail(info.breadcrumbs) as Array<{ displayName: string, usageKey: string }>;
-
-  const getBlockLink = useCallback(() => {
-    let key = info.usageKey;
-    if (breadcrumbs?.length > 1) {
-      key = breadcrumbs[breadcrumbs.length - 1].usageKey || key;
-    }
-    return `${getConfig().STUDIO_BASE_URL}/container/${key}`;
-  }, [info]);
-
-  return (
-    <Card
-      className="my-3 border-light-500 border shadow-none"
-      orientation="horizontal"
-    >
-      <Card.Section
-        className="py-3"
-      >
-        <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" />
-              <BlockTypeLabel blockType={info.blockType} />
-            </Stack>
-            <Stack direction="horizontal" className="small" gap={1}>
-              <strong>
-                <Highlight text={info.formatted?.displayName ?? ''} />
-              </strong>
-            </Stack>
-            <Stack direction="horizontal" className="micro" gap={3}>
-              {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>
-            </Stack>
-          </Stack>
-          {actions}
-        </Stack>
-      </Card.Section>
-    </Card>
-  );
-};
-
-const ComponentReviewList = ({
-  outOfSyncComponents,
-}: {
-  outOfSyncComponents: 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);
-  const {
-    hits,
-    isLoading: isIndexDataLoading,
-    hasError,
-    hasNextPage,
-    isFetchingNextPage,
-    fetchNextPage,
-  } = useSearchContext();
-
-  const downstreamInfo = hits as ContentHit[];
-
-  useLoadOnScroll(
-    hasNextPage,
-    isFetchingNextPage,
-    fetchNextPage,
-    true,
-  );
-
-  const outOfSyncComponentsByKey = useMemo(
-    () => keyBy(outOfSyncComponents, 'downstreamUsageKey'),
-    [outOfSyncComponents],
-  );
-  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',
-    });
-  }, [outOfSyncComponentsByKey]);
-
-  // Show preview changes on review
-  const onReview = useCallback((info: ContentHit) => {
-    setSelectedBlockData(info);
-    openModal();
-  }, [setSelectedBlockData, openModal]);
-
-  const onIgnoreClick = useCallback((info: ContentHit) => {
-    setSelectedBlockData(info);
-    openConfirmModal();
-  }, [setSelectedBlockData, openConfirmModal]);
-
-  const reloadLinks = useCallback((usageKey: string) => {
-    const courseKey = outOfSyncComponentsByKey[usageKey].downstreamContextKey;
-    queryClient.invalidateQueries(courseLibrariesQueryKeys.courseLibraries(courseKey));
-  }, [outOfSyncComponentsByKey]);
-
-  const postChange = (accept: boolean) => {
-    // istanbul ignore if: this should never happen
-    if (!blockData) {
-      return;
-    }
-    reloadLinks(blockData.downstreamBlockId);
-    if (accept) {
-      showToast(intl.formatMessage(
-        messages.updateSingleBlockSuccess,
-        { name: blockData.displayName },
-      ));
-    } else {
-      showToast(intl.formatMessage(
-        messages.ignoreSingleBlockSuccess,
-        { name: blockData.displayName },
-      ));
-    }
-  };
-
-  const updateBlock = useCallback(async (info: ContentHit) => {
-    try {
-      await acceptChangesMutation.mutateAsync(info.usageKey);
-      reloadLinks(info.usageKey);
-      showToast(intl.formatMessage(
-        messages.updateSingleBlockSuccess,
-        { name: info.displayName },
-      ));
-    } catch (e) {
-      showToast(intl.formatMessage(previewChangesMessages.acceptChangesFailure));
-    }
-  }, []);
-
-  const ignoreBlock = useCallback(async () => {
-    // istanbul ignore if: this should never happen
-    if (!blockData) {
-      return;
-    }
-    try {
-      await ignoreChangesMutation.mutateAsync(blockData.downstreamBlockId);
-      reloadLinks(blockData.downstreamBlockId);
-      showToast(intl.formatMessage(
-        messages.ignoreSingleBlockSuccess,
-        { name: blockData.displayName },
-      ));
-    } catch (e) {
-      showToast(intl.formatMessage(previewChangesMessages.ignoreChangesFailure));
-    } finally {
-      closeConfirmModal();
-    }
-  }, [blockData]);
-
-  if (isIndexDataLoading) {
-    return <Loading />;
-  }
-
-  if (hasError) {
-    return <AlertError error={intl.formatMessage(messages.genericErrorMessage)} />;
-  }
-
-  return (
-    <>
-      {downstreamInfo?.map((info) => (
-        <BlockCard
-          key={info.usageKey}
-          info={info}
-          actions={(
-            <ActionRow>
-              <Button
-                size="sm"
-                variant="outline-primary border-light-300"
-                onClick={() => onReview(info)}
-                iconBefore={Loop}
-                className="mr-2"
-              >
-                {intl.formatMessage(messages.cardReviewContentBtn)}
-              </Button>
-              <span className="border border-dark py-3 ml-4 mr-3" />
-              <Button
-                variant="tertiary"
-                size="sm"
-                onClick={() => onIgnoreClick(info)}
-              >
-                {intl.formatMessage(messages.cardIgnoreContentBtn)}
-              </Button>
-              <LoadingButton
-                label={intl.formatMessage(messages.cardUpdateContentBtn)}
-                variant="primary"
-                size="sm"
-                onClick={() => updateBlock(info)}
-                className="rounded-0"
-              />
-            </ActionRow>
-          )}
-        />
-      ))}
-      {blockData && (
-        <PreviewLibraryXBlockChanges
-          blockData={blockData}
-          isModalOpen={isModalOpen}
-          closeModal={closeModal}
-          postChange={postChange}
-        />
-      )}
-      <DeleteModal
-        isOpen={isConfirmModalOpen}
-        close={closeConfirmModal}
-        variant="warning"
-        title={intl.formatMessage(previewChangesMessages.confirmationTitle)}
-        description={intl.formatMessage(previewChangesMessages.confirmationDescription)}
-        onDeleteSubmit={ignoreBlock}
-        btnLabel={intl.formatMessage(previewChangesMessages.confirmationConfirmBtn)}
-      />
-    </>
-  );
-};
-
-const ReviewTabContent = ({ courseId }: Props) => {
-  const intl = useIntl();
-  const {
-    data: outOfSyncComponents,
-    isLoading: isSyncComponentsLoading,
-    isError,
-    error,
-  } = useEntityLinks({ courseId, readyToSync: true });
-
-  const downstreamKeys = useMemo(
-    () => outOfSyncComponents?.map(link => link.downstreamUsageKey),
-    [outOfSyncComponents],
-  );
-
-  const disableSortOptions = [
-    SearchSortOption.RELEVANCE,
-    SearchSortOption.OLDEST,
-    SearchSortOption.NEWEST,
-    SearchSortOption.RECENTLY_PUBLISHED,
-  ];
-
-  if (isSyncComponentsLoading) {
-    return <Loading />;
-  }
-
-  if (isError) {
-    return <AlertError error={error} />;
-  }
-
-  return (
-    <SearchContextProvider
-      extraFilter={[`context_key = "${courseId}"`, `usage_key IN ["${downstreamKeys?.join('","')}"]`]}
-      skipUrlUpdate
-      skipBlockTypeFetch
-    >
-      <ActionRow>
-        <SearchKeywordsField
-          placeholder={intl.formatMessage(messages.searchPlaceholder)}
-        />
-        <SearchSortWidget disableOptions={disableSortOptions} />
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ComponentReviewList
-        outOfSyncComponents={outOfSyncComponents}
-      />
-    </SearchContextProvider>
-  );
-};
-
-export default ReviewTabContent;

src/course-libraries/__mocks__/courseBlocksInfo.json

@@ -1,374 +0,0 @@
-[
-  {
-    "filter": "usage_key IN [\"block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@5be06d70f09c45a581d973d215e7ad62\",\"block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@d1b006742e0745b0948c8ba8dcd9bc07\",\"block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@276914b632eb49049b2c2568ef24fe4d\",\"block-v1:NewOrg3+TSTCS+2025_T1+type@problem+block@fcf430ac5b7a44b6ab316b53a7e67fef\"]",
-    "result": {
-      "hits": [
-        {
-          "display_name": "Dropdown",
-          "description": "asfd sdaf afd",
-          "breadcrumbs": [
-            {
-              "display_name": "Learn UNIXY"
-            },
-            {
-              "display_name": "Section",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@eb4f4db1032f46fdad5a7a9ebde12698"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@eaea16cbcf2d45ba98ddfe72631b9734"
-            },
-            {
-              "display_name": "Problem Bank",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@itembank+block@abca641f6a19447c83e64730808d36d3"
-            }
-          ],
-          "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@problem+block@fcf430ac5b7a44b6ab316b53a7e67fef",
-          "block_type": "problem",
-          "_formatted": {
-            "display_name": "Dropdown",
-            "description": "asfd sdaf afd",
-            "breadcrumbs": [
-              {
-                "display_name": "Learn UNIXY"
-              },
-              {
-                "display_name": "Section",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@eb4f4db1032f46fdad5a7a9ebde12698"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@eaea16cbcf2d45ba98ddfe72631b9734"
-              },
-              {
-                "display_name": "Problem Bank",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@itembank+block@abca641f6a19447c83e64730808d36d3"
-              }
-            ],
-            "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@problem+block@fcf430ac5b7a44b6ab316b53a7e67fef",
-            "block_type": "problem"
-          }
-        },
-        {
-          "display_name": "HTML 12",
-          "description": "A step beyond the simplicity of the WYSIWYG editor is the Raw HTML component which allows you to use HTML, CSS, and Javascript to create highly flexible content that looks good, excites your learners, and keeps them engaged and coming back to your courses. Unlike many learning platforms, the Open edX platform does not restrict authors in terms of what can be used in HTML components. If you can build it, the platform will not stop you. But use judgement and consider consulting with a web design expert. When used correctly, custom HTML, CSS and Javascript can be powerful tools for a course developer. But they can also lead to experiences that are inaccessible, unpleasant or even insecure to the learner and the provider. 1",
-          "breadcrumbs": [
-            {
-              "display_name": "Learn UNIXY"
-            },
-            {
-              "display_name": "Section",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@eb4f4db1032f46fdad5a7a9ebde12698"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@eaea16cbcf2d45ba98ddfe72631b9734"
-            },
-            {
-              "display_name": "Problem Bank",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@itembank+block@abca641f6a19447c83e64730808d36d3"
-            }
-          ],
-          "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@5be06d70f09c45a581d973d215e7ad62",
-          "block_type": "html",
-          "_formatted": {
-            "display_name": "HTML 12",
-            "description": "A step beyond the simplicity of the WYSIWYG editor is the Raw HTML component which allows you to use HTML, CSS, and Javascript to create highly flexible content that looks…",
-            "breadcrumbs": [
-              {
-                "display_name": "Learn UNIXY"
-              },
-              {
-                "display_name": "Section",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@eb4f4db1032f46fdad5a7a9ebde12698"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@eaea16cbcf2d45ba98ddfe72631b9734"
-              },
-              {
-                "display_name": "Problem Bank",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@itembank+block@abca641f6a19447c83e64730808d36d3"
-              }
-            ],
-            "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@5be06d70f09c45a581d973d215e7ad62",
-            "block_type": "html"
-          }
-        },
-        {
-          "display_name": "Text",
-          "breadcrumbs": [
-            {
-              "display_name": "Learn UNIXY"
-            },
-            {
-              "display_name": "Section",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@eb4f4db1032f46fdad5a7a9ebde12698"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@eaea16cbcf2d45ba98ddfe72631b9734"
-            },
-            {
-              "display_name": "Problem Bank",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@itembank+block@abca641f6a19447c83e64730808d36d3"
-            }
-          ],
-          "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@d1b006742e0745b0948c8ba8dcd9bc07",
-          "block_type": "html",
-          "_formatted": {
-            "display_name": "Text",
-            "breadcrumbs": [
-              {
-                "display_name": "Learn UNIXY"
-              },
-              {
-                "display_name": "Section",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@eb4f4db1032f46fdad5a7a9ebde12698"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@eaea16cbcf2d45ba98ddfe72631b9734"
-              },
-              {
-                "display_name": "Problem Bank",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@itembank+block@abca641f6a19447c83e64730808d36d3"
-              }
-            ],
-            "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@d1b006742e0745b0948c8ba8dcd9bc07",
-            "block_type": "html"
-          }
-        },
-        {
-          "display_name": "Text",
-          "breadcrumbs": [
-            {
-              "display_name": "Learn UNIXY"
-            },
-            {
-              "display_name": "Section",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@eb4f4db1032f46fdad5a7a9ebde12698"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@eaea16cbcf2d45ba98ddfe72631b9734"
-            },
-            {
-              "display_name": "Problem Bank",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@itembank+block@abca641f6a19447c83e64730808d36d3"
-            }
-          ],
-          "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@276914b632eb49049b2c2568ef24fe4d",
-          "block_type": "html",
-          "_formatted": {
-            "display_name": "Text",
-            "breadcrumbs": [
-              {
-                "display_name": "Learn UNIXY"
-              },
-              {
-                "display_name": "Section",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@eb4f4db1032f46fdad5a7a9ebde12698"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@eaea16cbcf2d45ba98ddfe72631b9734"
-              },
-              {
-                "display_name": "Problem Bank",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@itembank+block@abca641f6a19447c83e64730808d36d3"
-              }
-            ],
-            "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@276914b632eb49049b2c2568ef24fe4d",
-            "block_type": "html"
-          }
-        }
-      ],
-      "query": "",
-      "processingTimeMs": 0,
-      "limit": 4,
-      "offset": 0,
-      "estimatedTotalHits": 4
-    }
-  },
-  {
-    "filter": "usage_key IN [\"block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@0dfbabb8c93140caa3a004ab621757f5\",\"block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@37a916b53c2f430989d33ddeb47e224d\",\"block-v1:NewOrg3+TSTCS+2025_T1+type@video+block@33518787c3e14844ad823af8ff158a83\"]",
-    "result": {
-      "hits": [
-        {
-          "display_name": "Edited title",
-          "breadcrumbs": [
-            {
-              "display_name": "Learn UNIXY"
-            },
-            {
-              "display_name": "Section",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@d6e696f3d7d14cde82876a72a75cb208"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@05da683dc74e405ca355c6b90d58ad6e"
-            }
-          ],
-          "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@video+block@33518787c3e14844ad823af8ff158a83",
-          "block_type": "video",
-          "_formatted": {
-            "display_name": "Edited title",
-            "breadcrumbs": [
-              {
-                "display_name": "Learn UNIXY"
-              },
-              {
-                "display_name": "Section",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@d6e696f3d7d14cde82876a72a75cb208"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@05da683dc74e405ca355c6b90d58ad6e"
-              }
-            ],
-            "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@video+block@33518787c3e14844ad823af8ff158a83",
-            "block_type": "video"
-          }
-        },
-        {
-          "display_name": "Text 1",
-          "description": " 8¹⁺² 3²  Accept change now!d",
-          "breadcrumbs": [
-            {
-              "display_name": "Learn UNIXY"
-            },
-            {
-              "display_name": "Section",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@d6e696f3d7d14cde82876a72a75cb208"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@bab96d80267041138975e91a96e20f35"
-            }
-          ],
-          "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@0dfbabb8c93140caa3a004ab621757f5",
-          "block_type": "html",
-          "_formatted": {
-            "display_name": "Text 1",
-            "description": " 8¹⁺² 3²  Accept change now!d",
-            "breadcrumbs": [
-              {
-                "display_name": "Learn UNIXY"
-              },
-              {
-                "display_name": "Section",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@d6e696f3d7d14cde82876a72a75cb208"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@bab96d80267041138975e91a96e20f35"
-              }
-            ],
-            "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@0dfbabb8c93140caa3a004ab621757f5",
-            "block_type": "html"
-          }
-        },
-        {
-          "display_name": "Text 23",
-          "description": " AB = \\begin{pmatrix} 7 & 10 \\\\ 13 & 18 \\end{pmatrix} ",
-          "breadcrumbs": [
-            {
-              "display_name": "Learn UNIXY"
-            },
-            {
-              "display_name": "Section",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@d6e696f3d7d14cde82876a72a75cb208"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@bab96d80267041138975e91a96e20f35"
-            }
-          ],
-          "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@37a916b53c2f430989d33ddeb47e224d",
-          "block_type": "html",
-          "_formatted": {
-            "display_name": "Text 23",
-            "description": " AB = \\begin{pmatrix} 7 & 10 \\\\ 13 & 18 \\end{pmatrix} ",
-            "breadcrumbs": [
-              {
-                "display_name": "Learn UNIXY"
-              },
-              {
-                "display_name": "Section",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@chapter+block@6104ecc39b0046c5888db9e64db30887"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@sequential+block@d6e696f3d7d14cde82876a72a75cb208"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@vertical+block@bab96d80267041138975e91a96e20f35"
-              }
-            ],
-            "usage_key": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@37a916b53c2f430989d33ddeb47e224d",
-            "block_type": "html"
-          }
-        }
-      ],
-      "query": "",
-      "processingTimeMs": 0,
-      "limit": 3,
-      "offset": 0,
-      "estimatedTotalHits": 3
-    }
-  }
-]

src/course-libraries/__mocks__/libBlockMetadata.json

@@ -1,23 +0,0 @@
-{
-    "id": "lb:OpenedX:CSPROB3:problem:d40264d5-80c4-4be8-bfb6-086391de1cd3",
-    "def_key": null,
-    "block_type": "problem",
-    "display_name": "Dropdown 123",
-    "last_published": "2025-02-19T13:58:49Z",
-    "published_by": "edx",
-    "last_draft_created": "2025-02-19T13:58:48Z",
-    "last_draft_created_by": null,
-    "has_unpublished_changes": false,
-    "created": "2024-10-30T10:48:35Z",
-    "modified": "2025-02-19T13:58:48Z",
-    "collections": [
-        {
-            "key": "second-collection",
-            "title": "Second collection"
-        },
-        {
-            "key": "test-collection-2",
-            "title": "Test collection 2"
-        }
-    ]
-}

src/course-libraries/__mocks__/linkCourseSummary.json

@@ -1,22 +0,0 @@
-[
-  {
-    "upstreamContextTitle": "CS problems 3",
-    "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "readyToSyncCount": 5,
-    "totalCount": 14,
-    "lastPublishedAt": "2025-05-01T20:20:44.989042Z"
-  },
-  {
-    "upstreamContextTitle": "CS problems 2",
-    "upstreamContextKey": "lib:OpenedX:CSPROB2",
-    "readyToSyncCount": 0,
-    "totalCount": 21,
-    "lastPublishedAt": "2025-05-01T21:20:44.989042Z"
-  },
-  {
-    "upstreamContextTitle": "CS problems",
-    "upstreamContextKey": "lib:OpenedX:CSPROB",
-    "totalCount": 3,
-    "lastPublishedAt": "2025-05-01T22:20:44.989042Z"
-  }
-]

src/course-libraries/__mocks__/linkDetailsFromIndex.json

@@ -1,376 +0,0 @@
-{
-  "results": [
-    {
-      "indexUid": "tutor_studio_content",
-      "hits": [
-        {
-          "display_name": "Dropdown",
-          "block_id": "problem3",
-          "content": {
-            "problem_types": [
-              "optionresponse"
-            ],
-            "capa_content": "asfd sdaf afd"
-          },
-          "description": "asfd sdaf afd",
-          "tags": {},
-          "id": "block-v1itcracydemoxcoursextypeproblemblockproblem3-31ecf30b",
-          "type": "course_block",
-          "breadcrumbs": [
-            {
-              "display_name": "OpenedX Demo Course"
-            },
-            {
-              "display_name": "Module 1: Dive into the Open edX® platform!",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@chapter+block@30b3fbb840024953b2d4b2e700a53002"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@sequential+block@46032ed27e6c47e887782fed91703240"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@vertical+block@43eb5cbc0ea2491aa93f968f5e705ebd"
-            }
-          ],
-          "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@problem3",
-          "block_type": "problem",
-          "context_key": "course-v1:OpenEdx+DemoX+CourseX",
-          "org": "OpenEdx",
-          "access_id": 4,
-          "_formatted": {
-            "display_name": "Dropdown",
-            "block_id": "problem3",
-            "content": {
-              "problem_types": [
-                "optionresponse"
-              ],
-              "capa_content": "asfd sdaf afd"
-            },
-            "description": "asfd sdaf afd",
-            "tags": {},
-            "id": "block-v1itcracydemoxcoursextypeproblemblockproblem3-31ecf30b",
-            "type": "course_block",
-            "breadcrumbs": [
-              {
-                "display_name": "OpenedX Demo Course"
-              },
-              {
-                "display_name": "Module 1: Dive into the Open edX® platform!",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@chapter+block@30b3fbb840024953b2d4b2e700a53002"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@sequential+block@46032ed27e6c47e887782fed91703240"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@vertical+block@43eb5cbc0ea2491aa93f968f5e705ebd"
-              }
-            ],
-            "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@problem3",
-            "block_type": "problem",
-            "context_key": "course-v1:OpenEdx+DemoX+CourseX",
-            "org": "OpenEdx",
-            "access_id": "4"
-          }
-        },
-        {
-          "display_name": "Dropdown",
-          "block_id": "problem6",
-          "content": {
-            "problem_types": [
-              "optionresponse"
-            ],
-            "capa_content": "asfd sdaf afd"
-          },
-          "description": "asfd sdaf afd",
-          "tags": {},
-          "id": "block-v1itcracydemoxcoursextypeproblemblockproblem6-5bb64bab",
-          "type": "course_block",
-          "breadcrumbs": [
-            {
-              "display_name": "OpenedX Demo Course"
-            },
-            {
-              "display_name": "Module 1: Dive into the Open edX® platform!",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@chapter+block@30b3fbb840024953b2d4b2e700a53002"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@sequential+block@46032ed27e6c47e887782fed91703240"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@vertical+block@43eb5cbc0ea2491aa93f968f5e705ebd"
-            }
-          ],
-          "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@problem6",
-          "block_type": "problem",
-          "context_key": "course-v1:OpenEdx+DemoX+CourseX",
-          "org": "OpenEdx",
-          "access_id": 4,
-          "_formatted": {
-            "display_name": "Dropdown",
-            "block_id": "problem6",
-            "content": {
-              "problem_types": [
-                "optionresponse"
-              ],
-              "capa_content": "asfd sdaf afd"
-            },
-            "description": "asfd sdaf afd",
-            "tags": {},
-            "id": "block-v1itcracydemoxcoursextypeproblemblockproblem6-5bb64bab",
-            "type": "course_block",
-            "breadcrumbs": [
-              {
-                "display_name": "OpenedX Demo Course"
-              },
-              {
-                "display_name": "Module 1: Dive into the Open edX® platform!",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@chapter+block@30b3fbb840024953b2d4b2e700a53002"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@sequential+block@46032ed27e6c47e887782fed91703240"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@vertical+block@43eb5cbc0ea2491aa93f968f5e705ebd"
-              }
-            ],
-            "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@problem6",
-            "block_type": "problem",
-            "context_key": "course-v1:OpenEdx+DemoX+CourseX",
-            "org": "OpenEdx",
-            "access_id": "4"
-          }
-        },
-        {
-          "display_name": "Dropdown",
-          "block_id": "210e356cfa304b0aac591af53f6a6ae0",
-          "content": {
-            "problem_types": [
-              "optionresponse"
-            ],
-            "capa_content": "asfd sdaf afd"
-          },
-          "description": "asfd sdaf afd",
-          "tags": {},
-          "id": "block-v1itcracydemoxcoursextypeproblemblock210e356cfa304b0aac591af53f6a6ae0-d02782e3",
-          "type": "course_block",
-          "breadcrumbs": [
-            {
-              "display_name": "OpenedX Demo Course"
-            },
-            {
-              "display_name": "Module 1: Dive into the Open edX® platform!",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@chapter+block@30b3fbb840024953b2d4b2e700a53002"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@sequential+block@46032ed27e6c47e887782fed91703240"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@vertical+block@59dc4eea07fa4c20aad677d433ada9f1"
-            },
-            {
-              "display_name": "Problem Bank",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@itembank+block@3ba55d8eae5544aa9d3fb5e3f100ed62"
-            }
-          ],
-          "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@210e356cfa304b0aac591af53f6a6ae0",
-          "block_type": "problem",
-          "context_key": "course-v1:OpenEdx+DemoX+CourseX",
-          "org": "OpenEdx",
-          "access_id": 4,
-          "_formatted": {
-            "display_name": "Dropdown",
-            "block_id": "210e356cfa304b0aac591af53f6a6ae0",
-            "content": {
-              "problem_types": [
-                "optionresponse"
-              ],
-              "capa_content": "asfd sdaf afd"
-            },
-            "description": "asfd sdaf afd",
-            "tags": {},
-            "id": "block-v1itcracydemoxcoursextypeproblemblock210e356cfa304b0aac591af53f6a6ae0-d02782e3",
-            "type": "course_block",
-            "breadcrumbs": [
-              {
-                "display_name": "OpenedX Demo Course"
-              },
-              {
-                "display_name": "Module 1: Dive into the Open edX® platform!",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@chapter+block@30b3fbb840024953b2d4b2e700a53002"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@sequential+block@46032ed27e6c47e887782fed91703240"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@vertical+block@59dc4eea07fa4c20aad677d433ada9f1"
-              },
-              {
-                "display_name": "Problem Bank",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@itembank+block@3ba55d8eae5544aa9d3fb5e3f100ed62"
-              }
-            ],
-            "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@210e356cfa304b0aac591af53f6a6ae0",
-            "block_type": "problem",
-            "context_key": "course-v1:OpenEdx+DemoX+CourseX",
-            "org": "OpenEdx",
-            "access_id": "4"
-          }
-        },
-        {
-          "display_name": "HTML 1",
-          "block_id": "257e68e3386d4a8f8739d45b67e76a9b",
-          "content": {
-            "html_content": "A step beyond the simplicity of the WYSIWYG editor is the Raw HTML component which allows you to use HTML, CSS, and Javascript to create highly flexible content that looks good, excites your learners, and keeps them engaged and coming back to your courses. Unlike many learning platforms, the Open edX platform does not restrict authors in terms of what can be used in HTML components. If you can build it, the platform will not stop you. But use judgement and consider consulting with a web design expert. When used correctly, custom HTML, CSS and Javascript can be powerful tools for a course developer. But they can also lead to experiences that are inaccessible, unpleasant or even insecure to the learner and the provider. 1"
-          },
-          "description": "A step beyond the simplicity of the WYSIWYG editor is the Raw HTML component which allows you to use HTML, CSS, and Javascript to create highly flexible content that looks good, excites your learners, and keeps them engaged and coming back to your courses. Unlike many learning platforms, the Open edX platform does not restrict authors in terms of what can be used in HTML components. If you can build it, the platform will not stop you. But use judgement and consider consulting with a web design expert. When used correctly, custom HTML, CSS and Javascript can be powerful tools for a course developer. But they can also lead to experiences that are inaccessible, unpleasant or even insecure to the learner and the provider. 1",
-          "tags": {},
-          "id": "block-v1itcracydemoxcoursextypehtmlblock257e68e3386d4a8f8739d45b67e76a9b-e5cd0344",
-          "type": "course_block",
-          "breadcrumbs": [
-            {
-              "display_name": "OpenedX Demo Course"
-            },
-            {
-              "display_name": "Module 1: Dive into the Open edX® platform!",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@chapter+block@30b3fbb840024953b2d4b2e700a53002"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@sequential+block@46032ed27e6c47e887782fed91703240"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@vertical+block@59dc4eea07fa4c20aad677d433ada9f1"
-            }
-          ],
-          "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@html+block@257e68e3386d4a8f8739d45b67e76a9b",
-          "block_type": "html",
-          "context_key": "course-v1:OpenEdx+DemoX+CourseX",
-          "org": "OpenEdx",
-          "access_id": 4,
-          "_formatted": {
-            "display_name": "HTML 1",
-            "block_id": "257e68e3386d4a8f8739d45b67e76a9b",
-            "content": {
-              "html_content": "A step beyond the simplicity of the WYSIWYG editor is the Raw HTML component which allows you to use HTML, CSS, and Javascript to create highly flexible content that looks good, excites your learners, and keeps them engaged and coming back to your courses. Unlike many learning platforms, the Open edX platform does not restrict authors in terms of what can be used in HTML components. If you can build it, the platform will not stop you. But use judgement and consider consulting with a web design expert. When used correctly, custom HTML, CSS and Javascript can be powerful tools for a course developer. But they can also lead to experiences that are inaccessible, unpleasant or even insecure to the learner and the provider. 1"
-            },
-            "description": "A step beyond the simplicity of the WYSIWYG editor is…",
-            "tags": {},
-            "id": "block-v1itcracydemoxcoursextypehtmlblock257e68e3386d4a8f8739d45b67e76a9b-e5cd0344",
-            "type": "course_block",
-            "breadcrumbs": [
-              {
-                "display_name": "OpenedX Demo Course"
-              },
-              {
-                "display_name": "Module 1: Dive into the Open edX® platform!",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@chapter+block@30b3fbb840024953b2d4b2e700a53002"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@sequential+block@46032ed27e6c47e887782fed91703240"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@vertical+block@59dc4eea07fa4c20aad677d433ada9f1"
-              }
-            ],
-            "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@html+block@257e68e3386d4a8f8739d45b67e76a9b",
-            "block_type": "html",
-            "context_key": "course-v1:OpenEdx+DemoX+CourseX",
-            "org": "OpenEdx",
-            "access_id": "4"
-          }
-        },
-        {
-          "display_name": "Dropdown",
-          "block_id": "a4455860b03647219ff8b01cde49cf37",
-          "content": {
-            "problem_types": [
-              "optionresponse"
-            ],
-            "capa_content": "asfd sdaf afd"
-          },
-          "description": "asfd sdaf afd",
-          "tags": {},
-          "id": "block-v1itcracydemoxcoursextypeproblemblocka4455860b03647219ff8b01cde49cf37-709012d2",
-          "type": "course_block",
-          "breadcrumbs": [
-            {
-              "display_name": "OpenedX Demo Course"
-            },
-            {
-              "display_name": "Module 1: Dive into the Open edX® platform!",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@chapter+block@30b3fbb840024953b2d4b2e700a53002"
-            },
-            {
-              "display_name": "Subsection",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@sequential+block@46032ed27e6c47e887782fed91703240"
-            },
-            {
-              "display_name": "Unit",
-              "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@vertical+block@59dc4eea07fa4c20aad677d433ada9f1"
-            }
-          ],
-          "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@a4455860b03647219ff8b01cde49cf37",
-          "block_type": "problem",
-          "context_key": "course-v1:OpenEdx+DemoX+CourseX",
-          "org": "OpenEdx",
-          "access_id": 4,
-          "_formatted": {
-            "display_name": "Dropdown",
-            "block_id": "a4455860b03647219ff8b01cde49cf37",
-            "content": {
-              "problem_types": [
-                "optionresponse"
-              ],
-              "capa_content": "asfd sdaf afd"
-            },
-            "description": "asfd sdaf afd",
-            "tags": {},
-            "id": "block-v1itcracydemoxcoursextypeproblemblocka4455860b03647219ff8b01cde49cf37-709012d2",
-            "type": "course_block",
-            "breadcrumbs": [
-              {
-                "display_name": "OpenedX Demo Course"
-              },
-              {
-                "display_name": "Module 1: Dive into the Open edX® platform!",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@chapter+block@30b3fbb840024953b2d4b2e700a53002"
-              },
-              {
-                "display_name": "Subsection",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@sequential+block@46032ed27e6c47e887782fed91703240"
-              },
-              {
-                "display_name": "Unit",
-                "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@vertical+block@59dc4eea07fa4c20aad677d433ada9f1"
-              }
-            ],
-            "usage_key": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@a4455860b03647219ff8b01cde49cf37",
-            "block_type": "problem",
-            "context_key": "course-v1:OpenEdx+DemoX+CourseX",
-            "org": "OpenEdx",
-            "access_id": "4"
-          }
-        }
-      ],
-      "query": "",
-      "processingTimeMs": 8,
-      "limit": 20,
-      "offset": 0,
-      "estimatedTotalHits": 5
-    }
-  ]
-}

src/course-libraries/__mocks__/publishableEntityLinks.json

@@ -1,72 +0,0 @@
-[
-  {
-    "id": 875,
-    "upstreamContextTitle": "CS problems 3",
-    "upstreamVersion": 10,
-    "readyToSync": true,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB3:problem:d40264d5-80c4-4be8-bfb6-086391de1cd3",
-    "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "downstreamUsageKey": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@problem3",
-    "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
-    "versionSynced": 2,
-    "versionDeclined": null,
-    "created": "2025-02-08T14:07:05.588484Z",
-    "updated": "2025-02-08T14:07:05.588484Z"
-  },
-  {
-    "id": 876,
-    "upstreamContextTitle": "CS problems 3",
-    "upstreamVersion": 10,
-    "readyToSync": true,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB3:problem:d40264d5-80c4-4be8-bfb6-086391de1cd3",
-    "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "downstreamUsageKey": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@problem6",
-    "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
-    "versionSynced": 2,
-    "versionDeclined": null,
-    "created": "2025-02-08T14:07:05.588484Z",
-    "updated": "2025-02-08T14:07:05.588484Z"
-  },
-  {
-    "id": 884,
-    "upstreamContextTitle": "CS problems 3",
-    "upstreamVersion": 26,
-    "readyToSync": true,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB3:html:ca4d2b1f-0b64-4a2d-88fa-592f7e398477",
-    "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "downstreamUsageKey": "block-v1:OpenEdx+DemoX+CourseX+type@html+block@257e68e3386d4a8f8739d45b67e76a9b",
-    "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
-    "versionSynced": 16,
-    "versionDeclined": null,
-    "created": "2025-02-08T14:07:05.588484Z",
-    "updated": "2025-02-08T14:07:05.588484Z"
-  },
-  {
-    "id": 889,
-    "upstreamContextTitle": "CS problems 3",
-    "upstreamVersion": 10,
-    "readyToSync": true,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB3:problem:d40264d5-80c4-4be8-bfb6-086391de1cd3",
-    "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "downstreamUsageKey": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@a4455860b03647219ff8b01cde49cf37",
-    "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
-    "versionSynced": 2,
-    "versionDeclined": null,
-    "created": "2025-02-08T14:07:05.588484Z",
-    "updated": "2025-02-08T14:07:05.588484Z"
-  },
-  {
-    "id": 890,
-    "upstreamContextTitle": "CS problems 3",
-    "upstreamVersion": 10,
-    "readyToSync": true,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB3:problem:d40264d5-80c4-4be8-bfb6-086391de1cd3",
-    "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "downstreamUsageKey": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@210e356cfa304b0aac591af53f6a6ae0",
-    "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
-    "versionSynced": 2,
-    "versionDeclined": null,
-    "created": "2025-02-08T14:07:05.588484Z",
-    "updated": "2025-02-08T14:07:05.588484Z"
-  }
-]

src/course-libraries/data/api.mocks.ts

@@ -1,111 +0,0 @@
-/* istanbul ignore file */
-// eslint-disable-next-line import/no-extraneous-dependencies
-import fetchMock from 'fetch-mock-jest';
-import mockLinksResult from '../__mocks__/publishableEntityLinks.json';
-import mockSummaryResult from '../__mocks__/linkCourseSummary.json';
-import mockLinkDetailsFromIndex from '../__mocks__/linkDetailsFromIndex.json';
-import mockLibBlockMetadata from '../__mocks__/libBlockMetadata.json';
-import { createAxiosError } from '../../testUtils';
-import * as api from './api';
-import * as libApi from '../../library-authoring/data/api';
-
-/**
- * Mock for `getEntityLinks()`
- *
- * This mock returns a fixed response for the downstreamContextKey.
- */
-export async function mockGetEntityLinks(
-  downstreamContextKey?: string,
-  readyToSync?: boolean,
-): ReturnType<typeof api.getEntityLinks> {
-  switch (downstreamContextKey) {
-    case mockGetEntityLinks.invalidCourseKey:
-      throw createAxiosError({
-        code: 404,
-        message: 'Not found.',
-        path: api.getEntityLinksByDownstreamContextUrl(),
-      });
-    case mockGetEntityLinks.courseKeyLoading:
-      return new Promise(() => {});
-    case mockGetEntityLinks.courseKeyEmpty:
-      return Promise.resolve([]);
-    default: {
-      let { response } = mockGetEntityLinks;
-      if (readyToSync !== undefined) {
-        response = response.filter((o) => o.readyToSync === readyToSync);
-      }
-      return Promise.resolve(response);
-    }
-  }
-}
-mockGetEntityLinks.courseKey = mockLinksResult[0].downstreamContextKey;
-mockGetEntityLinks.invalidCourseKey = 'course_key_error';
-mockGetEntityLinks.courseKeyLoading = 'courseKeyLoading';
-mockGetEntityLinks.courseKeyEmpty = 'courseKeyEmpty';
-mockGetEntityLinks.response = mockLinksResult;
-/** Apply this mock. Returns a spy object that can tell you if it's been called. */
-mockGetEntityLinks.applyMock = () => {
-  jest.spyOn(api, 'getEntityLinks').mockImplementation(mockGetEntityLinks);
-};
-
-/**
- * Mock for `getEntityLinksSummaryByDownstreamContext()`
- *
- * This mock returns a fixed response for the downstreamContextKey.
- */
-export async function mockGetEntityLinksSummaryByDownstreamContext(
-  courseId?: string,
-): ReturnType<typeof api.getEntityLinksSummaryByDownstreamContext> {
-  switch (courseId) {
-    case mockGetEntityLinksSummaryByDownstreamContext.invalidCourseKey:
-      throw createAxiosError({
-        code: 404,
-        message: 'Not found.',
-        path: api.getEntityLinksByDownstreamContextUrl(),
-      });
-    case mockGetEntityLinksSummaryByDownstreamContext.courseKeyLoading:
-      return new Promise(() => {});
-    case mockGetEntityLinksSummaryByDownstreamContext.courseKeyEmpty:
-      return Promise.resolve([]);
-    case mockGetEntityLinksSummaryByDownstreamContext.courseKeyUpToDate:
-      return Promise.resolve(mockGetEntityLinksSummaryByDownstreamContext.response.filter(
-        (o: { readyToSyncCount: number }) => o.readyToSyncCount === 0,
-      ));
-    default:
-      return Promise.resolve(mockGetEntityLinksSummaryByDownstreamContext.response);
-  }
-}
-mockGetEntityLinksSummaryByDownstreamContext.courseKey = mockLinksResult[0].downstreamContextKey;
-mockGetEntityLinksSummaryByDownstreamContext.invalidCourseKey = 'course_key_error';
-mockGetEntityLinksSummaryByDownstreamContext.courseKeyLoading = 'courseKeySummaryLoading';
-mockGetEntityLinksSummaryByDownstreamContext.courseKeyEmpty = 'courseKeyEmpty';
-mockGetEntityLinksSummaryByDownstreamContext.courseKeyUpToDate = 'courseKeyUpToDate';
-mockGetEntityLinksSummaryByDownstreamContext.response = mockSummaryResult;
-/** Apply this mock. Returns a spy object that can tell you if it's been called. */
-mockGetEntityLinksSummaryByDownstreamContext.applyMock = () => {
-  jest.spyOn(api, 'getEntityLinksSummaryByDownstreamContext').mockImplementation(mockGetEntityLinksSummaryByDownstreamContext);
-};
-
-/**
- * Mock for multi-search from meilisearch index for link details.
- */
-export async function mockFetchIndexDocuments() {
-  return mockLinkDetailsFromIndex;
-}
-mockFetchIndexDocuments.applyMock = () => {
-  fetchMock.post(
-    'http://mock.meilisearch.local/multi-search',
-    mockFetchIndexDocuments,
-    { overwriteRoutes: true },
-  );
-};
-
-/**
- * Mock for library block metadata
- */
-export async function mockUseLibBlockMetadata() {
-  return mockLibBlockMetadata;
-}
-mockUseLibBlockMetadata.applyMock = () => {
-  jest.spyOn(libApi, 'getLibraryBlockMetadata').mockImplementation(mockUseLibBlockMetadata);
-};

src/course-libraries/data/api.ts

@@ -1,67 +0,0 @@
-import { camelCaseObject, getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-
-const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
-
-export const getEntityLinksByDownstreamContextUrl = () => `${getApiBaseUrl()}/api/contentstore/v2/downstreams/`;
-
-export const getEntityLinksSummaryByDownstreamContextUrl = (downstreamContextKey: string) => `${getApiBaseUrl()}/api/contentstore/v2/downstreams/${downstreamContextKey}/summary`;
-
-export interface PaginatedData<T> {
-  next: string | null;
-  previous: string | null;
-  nextPageNum: number | null;
-  previousPageNum: number | null;
-  count: number;
-  numPages: number;
-  currentPage: number;
-  results: T,
-}
-
-export interface PublishableEntityLink {
-  id: number;
-  upstreamUsageKey: string;
-  upstreamContextKey: string;
-  upstreamContextTitle: string;
-  upstreamVersion: number;
-  downstreamUsageKey: string;
-  downstreamContextKey: string;
-  versionSynced: number;
-  versionDeclined: number | null;
-  created: string;
-  updated: string;
-  readyToSync: boolean;
-}
-
-export interface PublishableEntityLinkSummary {
-  upstreamContextKey: string;
-  upstreamContextTitle: string;
-  readyToSyncCount: number;
-  totalCount: number;
-  lastPublishedAt: string;
-}
-
-export const getEntityLinks = async (
-  downstreamContextKey?: string,
-  readyToSync?: boolean,
-  upstreamUsageKey?: string,
-): Promise<PublishableEntityLink[]> => {
-  const { data } = await getAuthenticatedHttpClient()
-    .get(getEntityLinksByDownstreamContextUrl(), {
-      params: {
-        course_id: downstreamContextKey,
-        ready_to_sync: readyToSync,
-        upstream_usage_key: upstreamUsageKey,
-        no_page: true,
-      },
-    });
-  return camelCaseObject(data);
-};
-
-export const getEntityLinksSummaryByDownstreamContext = async (
-  downstreamContextKey: string,
-): Promise<PublishableEntityLinkSummary[]> => {
-  const { data } = await getAuthenticatedHttpClient()
-    .get(getEntityLinksSummaryByDownstreamContextUrl(downstreamContextKey));
-  return camelCaseObject(data);
-};

src/course-libraries/data/apiHooks.test.tsx

@@ -1,58 +0,0 @@
-import { initializeMockApp } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import MockAdapter from 'axios-mock-adapter';
-import { renderHook, waitFor } from '@testing-library/react';
-import { getEntityLinksByDownstreamContextUrl } from './api';
-import { useEntityLinks } from './apiHooks';
-
-let axiosMock: MockAdapter;
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
-
-const wrapper = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    {children}
-  </QueryClientProvider>
-);
-
-describe('course libraries api hooks', () => {
-  beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-  });
-
-  afterEach(() => {
-    axiosMock.reset();
-  });
-
-  it('should return links for course', async () => {
-    const courseId = 'course-v1:some+key';
-    const url = getEntityLinksByDownstreamContextUrl();
-    axiosMock.onGet(url).reply(200, []);
-    const { result } = renderHook(() => useEntityLinks({ courseId }), { wrapper });
-    await waitFor(() => {
-      expect(result.current.isLoading).toBeFalsy();
-    });
-    expect(axiosMock.history.get[0].url).toEqual(url);
-    expect(axiosMock.history.get[0].params).toEqual({
-      course_id: courseId,
-      ready_to_sync: undefined,
-      upstream_usage_key: undefined,
-      no_page: true,
-    });
-  });
-});

src/course-libraries/data/apiHooks.ts

@@ -1,65 +0,0 @@
-import {
-  useQuery,
-} from '@tanstack/react-query';
-import { getEntityLinks, getEntityLinksSummaryByDownstreamContext } from './api';
-
-export const courseLibrariesQueryKeys = {
-  all: ['courseLibraries'],
-  courseLibraries: (courseId?: string) => [...courseLibrariesQueryKeys.all, courseId],
-  courseReadyToSyncLibraries: ({ courseId, readyToSync, upstreamUsageKey }: {
-    courseId?: string,
-    readyToSync?: boolean,
-    upstreamUsageKey?: string,
-    pageSize?: number,
-  }) => {
-    const key: Array<string | boolean | number> = [...courseLibrariesQueryKeys.all];
-    if (courseId !== undefined) {
-      key.push(courseId);
-    }
-    if (readyToSync !== undefined) {
-      key.push(readyToSync);
-    }
-    if (upstreamUsageKey !== undefined) {
-      key.push(upstreamUsageKey);
-    }
-    return key;
-  },
-  courseLibrariesSummary: (courseId?: string) => [...courseLibrariesQueryKeys.courseLibraries(courseId), 'summary'],
-};
-
-/**
- * Hook to fetch list of publishable entity links by course key.
- * (That is, get a list of the library components used in the given course.)
- */
-export const useEntityLinks = ({
-  courseId, readyToSync, upstreamUsageKey,
-}: {
-  courseId?: string,
-  readyToSync?: boolean,
-  upstreamUsageKey?: string,
-}) => (
-  useQuery({
-    queryKey: courseLibrariesQueryKeys.courseReadyToSyncLibraries({
-      courseId,
-      readyToSync,
-      upstreamUsageKey,
-    }),
-    queryFn: () => getEntityLinks(
-      courseId,
-      readyToSync,
-      upstreamUsageKey,
-    ),
-    enabled: courseId !== undefined || upstreamUsageKey !== undefined || readyToSync !== undefined,
-  })
-);
-
-/**
- * Hook to fetch publishable entity links summary by course key.
- */
-export const useEntityLinksSummaryByDownstreamContext = (courseId?: string) => (
-  useQuery({
-    queryKey: courseLibrariesQueryKeys.courseLibrariesSummary(courseId),
-    queryFn: () => getEntityLinksSummaryByDownstreamContext(courseId!),
-    enabled: courseId !== undefined,
-  })
-);

src/course-libraries/index.tsx

@@ -1 +0,0 @@
-export { CourseLibraries } from './CourseLibraries';

src/course-libraries/messages.ts

@@ -1,126 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  headingTitle: {
-    id: 'course-authoring.course-libraries.header.title',
-    defaultMessage: 'Libraries',
-    description: 'Title for page',
-  },
-  headingSubtitle: {
-    id: 'course-authoring.course-libraries.header.subtitle',
-    defaultMessage: 'Content',
-    description: 'Subtitle for page',
-  },
-  homeTabTitle: {
-    id: 'course-authoring.course-libraries.tab.home.title',
-    defaultMessage: 'Libraries',
-    description: 'Tab title for home tab',
-  },
-  homeTabDescription: {
-    id: 'course-authoring.course-libraries.tab.home.description',
-    defaultMessage: 'Your course contains content from these libraries.',
-    description: 'Description text for home tab',
-  },
-  homeTabDescriptionEmpty: {
-    id: 'course-authoring.course-libraries.tab.home.description-no-links',
-    defaultMessage: 'This course does not use any content from libraries.',
-    description: 'Description text for home tab',
-  },
-  reviewTabTitle: {
-    id: 'course-authoring.course-libraries.tab.review.title',
-    defaultMessage: 'Review Content Updates',
-    description: 'Tab title for review tab',
-  },
-  reviewTabDescriptionEmpty: {
-    id: 'course-authoring.course-libraries.tab.home.description-no-links',
-    defaultMessage: 'All components are up to date',
-    description: 'Description text for home tab',
-  },
-  breadcrumbLabel: {
-    id: 'course-authoring.course-libraries.downstream-block.breadcrumb.label',
-    defaultMessage: 'Location:',
-    description: 'label for breadcrumb in component cards in course libraries page.',
-  },
-  totalComponentLabel: {
-    id: 'course-authoring.course-libraries.libcard.total-component.label',
-    defaultMessage: '{totalComponents, plural, one {# component} other {# components}} applied',
-    description: 'Prints total components applied from library',
-  },
-  allUptodateLabel: {
-    id: 'course-authoring.course-libraries.libcard.up-to-date.label',
-    defaultMessage: 'All components up to date',
-    description: 'Shown if all components under a library are up to date',
-  },
-  outOfSyncCountLabel: {
-    id: 'course-authoring.course-libraries.libcard.out-of-sync.label',
-    defaultMessage: '{outOfSyncCount, plural, one {# component} other {# components}} out of sync',
-    description: 'Prints number of components out of sync from library',
-  },
-  outOfSyncCountAlertTitle: {
-    id: 'course-authoring.course-libraries.libcard.out-of-sync.alert.title',
-    defaultMessage: '{outOfSyncCount, plural, one {# library component is} other {# library components are}} out of sync. Review updates to accept or ignore changes',
-    description: 'Alert message shown when library components are out of sync',
-  },
-  reviewUpdatesBtn: {
-    id: 'course-authoring.course-libraries.libcard.review-updates.btn.text',
-    defaultMessage: 'Review Updates',
-    description: 'Action button to review updates',
-  },
-  outOfSyncCountAlertReviewBtn: {
-    id: 'course-authoring.course-libraries.libcard.out-of-sync.alert.review-btn-text',
-    defaultMessage: 'Review',
-    description: 'Alert review button text',
-  },
-  librariesV2DisabledError: {
-    id: 'course-authoring.course-libraries.alert.error.libraries.v2.disabled',
-    defaultMessage: 'This page cannot be shown: Libraries v2 are disabled.',
-    description: 'Error message shown to users when trying to load a libraries V2 page while libraries v2 are disabled.',
-  },
-  cardReviewContentBtn: {
-    id: 'course-authoring.course-libraries.review-tab.libcard.review-btn-text',
-    defaultMessage: 'Review Updates',
-    description: 'Card review button for component in review tab',
-  },
-  cardUpdateContentBtn: {
-    id: 'course-authoring.course-libraries.review-tab.libcard.update-btn-text',
-    defaultMessage: 'Update',
-    description: 'Card update button for component in review tab',
-  },
-  cardIgnoreContentBtn: {
-    id: 'course-authoring.course-libraries.review-tab.libcard.ignore-btn-text',
-    defaultMessage: 'Ignore',
-    description: 'Card ignore button for component in review tab',
-  },
-  updateSingleBlockSuccess: {
-    id: 'course-authoring.course-libraries.review-tab.libcard.update-success-toast',
-    defaultMessage: 'Success! "{name}" is updated',
-    description: 'Success toast message when a component is updated.',
-  },
-  ignoreSingleBlockSuccess: {
-    id: 'course-authoring.course-libraries.review-tab.libcard.ignore-success-toast',
-    defaultMessage: '"{name}" will remain out of sync with library content. You will be notified when this component is updated again.',
-    description: 'Success toast message when a component update is ignored.',
-  },
-  searchPlaceholder: {
-    id: 'course-authoring.course-libraries.review-tab.search.placeholder',
-    defaultMessage: 'Search',
-    description: 'Search text box in review tab placeholder text',
-  },
-  brokenLinkTooltip: {
-    id: 'course-authoring.course-libraries.home-tab.broken-link.tooltip',
-    defaultMessage: 'Sourced from a library - but the upstream link is broken/invalid.',
-    description: 'Tooltip text describing broken link in component listing.',
-  },
-  genericErrorMessage: {
-    id: 'course-authoring.course-libraries.home-tab.error.message',
-    defaultMessage: 'Something went wrong! Could not fetch results.',
-    description: 'Generic error message displayed when fetching link data fails.',
-  },
-  unitsUpdatesWarning: {
-    id: 'course-authoring.course-libraries.home-tab.warning.units',
-    defaultMessage: 'Currently this page only tracks component updates. To check for unit updates, go to your Course Outline.',
-    description: 'Warning message shown in library sync page about units updates.',
-  },
-});
-
-export default messages;

src/course-outline/CourseOutline.jsx

@@ -22,7 +22,6 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { useLocation } from 'react-router-dom';
-import { CourseAuthoringOutlineSidebarSlot } from '../plugin-slots/CourseAuthoringOutlineSidebarSlot';
 
 import { LoadingSpinner } from '../generic/Loading';
 import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
@@ -36,6 +35,8 @@ import AlertMessage from '../generic/alert-message';
 import getPageHeadTitle from '../generic/utils';
 import { getCurrentItem, getProctoredExamsFlag } from './data/selectors';
 import { COURSE_BLOCK_NAMES } from './constants';
+import HeaderNavigations from './header-navigations/HeaderNavigations';
+import OutlineSideBar from './outline-sidebar/OutlineSidebar';
 import StatusBar from './status-bar/StatusBar';
 import EnableHighlightsModal from './enable-highlights-modal/EnableHighlightsModal';
 import SectionCard from './section-card/SectionCard';
@@ -45,16 +46,15 @@ import HighlightsModal from './highlights-modal/HighlightsModal';
 import EmptyPlaceholder from './empty-placeholder/EmptyPlaceholder';
 import PublishModal from './publish-modal/PublishModal';
 import PageAlerts from './page-alerts/PageAlerts';
-import DraggableList from './drag-helper/DraggableList';
+import DraggableList from '../generic/drag-helper/DraggableList';
 import {
   canMoveSection,
   possibleUnitMoves,
   possibleSubsectionMoves,
-} from './drag-helper/utils';
+} from '../generic/drag-helper/utils';
 import { useCourseOutline } from './hooks';
 import messages from './messages';
 import { getTagsExportFile } from './data/api';
-import CourseOutlineHeaderActionsSlot from '../plugin-slots/CourseOutlineHeaderActionsSlot';
 
 const CourseOutline = ({ courseId }) => {
   const intl = useIntl();
@@ -68,7 +68,6 @@ const CourseOutline = ({ courseId }) => {
     sectionsList,
     isCustomRelativeDatesActive,
     isLoading,
-    isLoadingDenied,
     isReIndexShow,
     showSuccessAlert,
     isSectionsExpanded,
@@ -103,12 +102,12 @@ const CourseOutline = ({ courseId }) => {
     handleNewSectionSubmit,
     handleNewSubsectionSubmit,
     handleNewUnitSubmit,
-    handleAddUnitFromLibrary,
     getUnitUrl,
     handleVideoSharingOptionChange,
     handlePasteClipboardClick,
     notificationDismissUrl,
     discussionsSettings,
+    discussionsIncontextFeedbackUrl,
     discussionsIncontextLearnmoreUrl,
     deprecatedBlocksInfo,
     proctoringErrors,
@@ -233,26 +232,6 @@ const CourseOutline = ({ courseId }) => {
     );
   }
 
-  if (isLoadingDenied) {
-    return (
-      <Container size="xl" className="px-4 mt-4">
-        <PageAlerts
-          courseId={courseId}
-          notificationDismissUrl={notificationDismissUrl}
-          handleDismissNotification={handleDismissNotification}
-          discussionsSettings={discussionsSettings}
-          discussionsIncontextLearnmoreUrl={discussionsIncontextLearnmoreUrl}
-          deprecatedBlocksInfo={deprecatedBlocksInfo}
-          proctoringErrors={proctoringErrors}
-          mfeProctoredExamSettingsUrl={mfeProctoredExamSettingsUrl}
-          advanceSettingsUrl={advanceSettingsUrl}
-          savingStatus={savingStatus}
-          errors={errors}
-        />
-      </Container>
-    );
-  }
-
   return (
     <>
       <Helmet>
@@ -265,6 +244,7 @@ const CourseOutline = ({ courseId }) => {
             notificationDismissUrl={notificationDismissUrl}
             handleDismissNotification={handleDismissNotification}
             discussionsSettings={discussionsSettings}
+            discussionsIncontextFeedbackUrl={discussionsIncontextFeedbackUrl}
             discussionsIncontextLearnmoreUrl={discussionsIncontextLearnmoreUrl}
             deprecatedBlocksInfo={deprecatedBlocksInfo}
             proctoringErrors={proctoringErrors}
@@ -292,7 +272,7 @@ const CourseOutline = ({ courseId }) => {
             title={intl.formatMessage(messages.headingTitle)}
             subtitle={intl.formatMessage(messages.headingSubtitle)}
             headerActions={(
-              <CourseOutlineHeaderActionsSlot
+              <HeaderNavigations
                 isReIndexShow={isReIndexShow}
                 isSectionsExpanded={isSectionsExpanded}
                 headerNavigationsActions={headerNavigationsActions}
@@ -300,7 +280,6 @@ const CourseOutline = ({ courseId }) => {
                 hasSections={Boolean(sectionsList.length)}
                 courseActions={courseActions}
                 errors={errors}
-                sections={sections}
               />
             )}
           />
@@ -375,7 +354,6 @@ const CourseOutline = ({ courseId }) => {
                                             section,
                                             section.childInfo.children,
                                           )}
-                                          isSectionsExpanded={isSectionsExpanded}
                                           isSelfPaced={statusBarData.isSelfPaced}
                                           isCustomRelativeDatesActive={isCustomRelativeDatesActive}
                                           savingStatus={savingStatus}
@@ -385,7 +363,6 @@ const CourseOutline = ({ courseId }) => {
                                           onDuplicateSubmit={handleDuplicateSubsectionSubmit}
                                           onOpenConfigureModal={openConfigureModal}
                                           onNewUnitSubmit={handleNewUnitSubmit}
-                                          onAddUnitFromLibrary={handleAddUnitFromLibrary}
                                           onOrderChange={updateSubsectionOrderByIndex}
                                           onPasteClick={handlePasteClipboardClick}
                                         >
@@ -456,11 +433,7 @@ const CourseOutline = ({ courseId }) => {
               </article>
             </Layout.Element>
             <Layout.Element>
-              <CourseAuthoringOutlineSidebarSlot
-                courseId={courseId}
-                courseName={courseName}
-                sections={sections}
-              />
+              <OutlineSideBar courseId={courseId} />
             </Layout.Element>
           </Layout>
           <EnableHighlightsModal

src/course-outline/CourseOutline.scss

@@ -1,3 +1,4 @@
+@import "./header-navigations/HeaderNavigations";
 @import "./status-bar/StatusBar";
 @import "./section-card/SectionCard";
 @import "./subsection-card/SubsectionCard";
@@ -7,4 +8,3 @@
 @import "./highlights-modal/HighlightsModal";
 @import "./publish-modal/PublishModal";
 @import "./xblock-status/XBlockStatus";
-@import "./drag-helper/SortableItem";

src/course-outline/CourseOutline.test.jsx

@@ -58,18 +58,22 @@ import {
   moveUnitOver,
   moveSubsection,
   moveUnit,
-} from './drag-helper/utils';
-import { postXBlockBaseApiUrl } from '../course-unit/data/api';
-import { COMPONENT_TYPES } from '../generic/block-type-utils/constants';
+} from '../generic/drag-helper/utils';
 
 let axiosMock;
 let store;
 const mockPathname = '/foo-bar';
 const courseId = '123';
-const containerKey = 'lct:org:lib:unit:1';
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+global.BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useLocation: jest.fn(),
@@ -96,24 +100,6 @@ jest.mock('./data/api', () => ({
   getTagsCount: () => jest.fn().mockResolvedValue({}),
 }));
 
-// Mock ComponentPicker to call onComponentSelected on click
-jest.mock('../library-authoring/component-picker', () => ({
-  ComponentPicker: (props) => {
-    const onClick = () => {
-      // eslint-disable-next-line react/prop-types
-      props.onComponentSelected({
-        usageKey: containerKey,
-        blockType: 'unti',
-      });
-    };
-    return (
-      <button type="submit" onClick={onClick}>
-        Dummy button
-      </button>
-    );
-  },
-}));
-
 const queryClient = new QueryClient();
 
 jest.mock('@dnd-kit/core', () => ({
@@ -153,9 +139,7 @@ describe('<CourseOutline />', () => {
       pathname: mockPathname,
     });
 
-    store = initializeStore({
-      studioHome: { studioHomeData: { librariesV2Enabled: true } },
-    });
+    store = initializeStore();
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock
       .onGet(getCourseOutlineIndexApiUrl(courseId))
@@ -174,10 +158,6 @@ describe('<CourseOutline />', () => {
     await executeThunk(fetchCourseOutlineIndexQuery(courseId), store.dispatch);
   });
 
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
   it('render CourseOutline component correctly', async () => {
     const { getByText } = render(<RootWrapper />);
 
@@ -288,15 +268,13 @@ describe('<CourseOutline />', () => {
   });
 
   it('check that new section list is saved when dragged', async () => {
-    const { findAllByRole, findByTestId } = render(<RootWrapper />);
-    const expandAllButton = await findByTestId('expand-collapse-all-button');
-    fireEvent.click(expandAllButton);
-    const [section] = store.getState().courseOutline.sectionsList;
+    const { findAllByRole } = render(<RootWrapper />);
+    const courseBlockId = courseOutlineIndexMock.courseStructure.id;
     const sectionsDraggers = await findAllByRole('button', { name: 'Drag to reorder' });
-    const draggableButton = sectionsDraggers[1];
+    const draggableButton = sectionsDraggers[6];
 
     axiosMock
-      .onPut(getCourseBlockApiUrl(section.id))
+      .onPut(getCourseBlockApiUrl(courseBlockId))
       .reply(200, { dummy: 'value' });
 
     const section1 = store.getState().courseOutline.sectionsList[0].id;
@@ -315,15 +293,13 @@ describe('<CourseOutline />', () => {
   });
 
   it('check section list is restored to original order when API call fails', async () => {
-    const { findAllByRole, findByTestId } = render(<RootWrapper />);
-    const expandAllButton = await findByTestId('expand-collapse-all-button');
-    fireEvent.click(expandAllButton);
-    const [section] = store.getState().courseOutline.sectionsList;
+    const { findAllByRole } = render(<RootWrapper />);
+    const courseBlockId = courseOutlineIndexMock.courseStructure.id;
     const sectionsDraggers = await findAllByRole('button', { name: 'Drag to reorder' });
-    const draggableButton = sectionsDraggers[1];
+    const draggableButton = sectionsDraggers[6];
 
     axiosMock
-      .onPut(getCourseBlockApiUrl(section.id))
+      .onPut(getCourseBlockApiUrl(courseBlockId))
       .reply(500);
 
     const section1 = store.getState().courseOutline.sectionsList[0].id;
@@ -398,6 +374,8 @@ describe('<CourseOutline />', () => {
     const { findAllByTestId } = render(<RootWrapper />);
     const [sectionElement] = await findAllByTestId('section-card');
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
     const units = await within(subsectionElement).findAllByTestId('unit-card');
     expect(units.length).toBe(1);
 
@@ -418,40 +396,6 @@ describe('<CourseOutline />', () => {
     }));
   });
 
-  it('adds a unit from library correctly', async () => {
-    render(<RootWrapper />);
-    const [sectionElement] = await screen.findAllByTestId('section-card');
-    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
-    const units = await within(subsectionElement).findAllByTestId('unit-card');
-    expect(units.length).toBe(1);
-
-    axiosMock
-      .onPost(postXBlockBaseApiUrl())
-      .reply(200, {
-        locator: 'some',
-      });
-
-    const addUnitFromLibraryButton = within(subsectionElement).getByRole('button', {
-      name: /use unit from library/i,
-    });
-    fireEvent.click(addUnitFromLibraryButton);
-
-    // click dummy button to execute onComponentSelected prop.
-    const dummyBtn = await screen.findByRole('button', { name: 'Dummy button' });
-    fireEvent.click(dummyBtn);
-
-    waitFor(() => expect(axiosMock.history.post.length).toBe(1));
-
-    const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
-    const [subsection] = section.childInfo.children;
-    expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
-      type: COMPONENT_TYPES.libraryV2,
-      category: 'vertical',
-      parent_locator: subsection.id,
-      library_content_key: containerKey,
-    }));
-  });
-
   it('render checklist value correctly', async () => {
     const { getByText } = render(<RootWrapper />);
 
@@ -645,24 +589,28 @@ describe('<CourseOutline />', () => {
     await checkEditTitle(section, subsectionElement, subsection, 'New subsection name', 'subsection');
 
     // check unit
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
     const [unit] = subsection.childInfo.children;
     const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
     await checkEditTitle(section, unitElement, unit, 'New unit name', 'unit');
   });
 
   it('check whether section, subsection and unit is deleted when corresponding delete button is clicked', async () => {
-    render(<RootWrapper />);
+    const { findAllByTestId, findByTestId, queryByText } = render(<RootWrapper />);
     // get section, subsection and unit
     const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
-    const [sectionElement] = await screen.findAllByTestId('section-card');
+    const [sectionElement] = await findAllByTestId('section-card');
     const [subsection] = section.childInfo.children;
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
     const [unit] = subsection.childInfo.children;
     const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
 
     const checkDeleteBtn = async (item, element, elementName) => {
       await waitFor(() => {
-        expect(screen.queryByText(item.displayName), `Failed for ${elementName}!`).toBeInTheDocument();
+        expect(queryByText(item.displayName), `Failed for ${elementName}!`).toBeInTheDocument();
       });
 
       axiosMock.onDelete(getCourseItemApiUrl(item.id)).reply(200);
@@ -671,11 +619,11 @@ describe('<CourseOutline />', () => {
       fireEvent.click(menu);
       const deleteButton = await within(element).findByTestId(`${elementName}-card-header__menu-delete-button`);
       fireEvent.click(deleteButton);
-      const confirmButton = await screen.findByRole('button', { name: 'Delete' });
-      fireEvent.click(confirmButton);
+      const confirmButton = await findByTestId('delete-confirm-button');
+      await act(async () => fireEvent.click(confirmButton));
 
       await waitFor(() => {
-        expect(screen.queryByText(item.displayName), `Failed for ${elementName}!`).not.toBeInTheDocument();
+        expect(queryByText(item.displayName), `Failed for ${elementName}!`).not.toBeInTheDocument();
       });
     };
 
@@ -695,6 +643,8 @@ describe('<CourseOutline />', () => {
     const [sectionElement] = await findAllByTestId('section-card');
     const [subsection] = section.childInfo.children;
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
     const [unit] = subsection.childInfo.children;
     const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
 
@@ -764,6 +714,8 @@ describe('<CourseOutline />', () => {
     const [sectionElement] = await findAllByTestId('section-card');
     const [subsection] = section.childInfo.children;
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
     const [unit] = subsection.childInfo.children;
     const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
 
@@ -1472,6 +1424,8 @@ describe('<CourseOutline />', () => {
 
     const [firstSection] = await findAllByTestId('section-card');
     const [firstSubsection] = await within(firstSection).findAllByTestId('subsection-card');
+    const subsectionExpandButton = await within(firstSubsection).getByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(subsectionExpandButton);
     const [firstUnit] = await within(firstSubsection).findAllByTestId('unit-card');
     const unitDropdownButton = await within(firstUnit).findByTestId('unit-card-header__menu-button');
 
@@ -1831,6 +1785,8 @@ describe('<CourseOutline />', () => {
     const [, sectionElement] = await findAllByTestId('section-card');
     const [, subsection] = section.childInfo.children;
     const [, subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
     const [, secondUnit] = subsection.childInfo.children;
     const [, unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
 
@@ -1870,6 +1826,8 @@ describe('<CourseOutline />', () => {
     const [, sectionElement] = await findAllByTestId('section-card');
     const [firstSubsection, subsection] = section.childInfo.children;
     const [, subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
     const [unit] = subsection.childInfo.children;
     const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
 
@@ -1905,6 +1863,8 @@ describe('<CourseOutline />', () => {
     const [subsection] = secondSection.childInfo.children;
     const firstSectionLastSubsection = firstSection.childInfo.children[firstSection.childInfo.children.length - 1];
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
     const [unit] = subsection.childInfo.children;
     const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
 
@@ -1949,6 +1909,8 @@ describe('<CourseOutline />', () => {
     const [, sectionElement] = await findAllByTestId('section-card');
     const [firstSubsection, subsection] = section.childInfo.children;
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
     const lastUnitIdx = firstSubsection.childInfo.children.length - 1;
     const unit = firstSubsection.childInfo.children[lastUnitIdx];
     const unitElement = (await within(subsectionElement).findAllByTestId('unit-card'))[lastUnitIdx];
@@ -1986,6 +1948,8 @@ describe('<CourseOutline />', () => {
     const secondSectionLastSubsection = secondSection.childInfo.children[lastSubIndex];
     const thirdSectionFirstSubsection = thirdSection.childInfo.children[0];
     const subsectionElement = (await within(sectionElement).findAllByTestId('subsection-card'))[lastSubIndex];
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
     const lastUnitIdx = secondSectionLastSubsection.childInfo.children.length - 1;
     const unit = secondSectionLastSubsection.childInfo.children[lastUnitIdx];
     const unitElement = (await within(subsectionElement).findAllByTestId('unit-card'))[lastUnitIdx];
@@ -2030,6 +1994,8 @@ describe('<CourseOutline />', () => {
     const sections = await findAllByTestId('section-card');
     const [sectionElement] = sections;
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
     // get first and only unit in the subsection
     const [firstUnit] = await within(subsectionElement).findAllByTestId('unit-card');
 
@@ -2049,6 +2015,8 @@ describe('<CourseOutline />', () => {
     const lastSection = sections[sections.length - 1];
     // it has only one subsection
     const [lastSubsectionElement] = await within(lastSection).findAllByTestId('subsection-card');
+    const lastExpandBtn = await within(lastSubsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(lastExpandBtn));
     // get last and the only unit in the subsection
     const [lastUnit] = await within(lastSubsectionElement).findAllByTestId('unit-card');
 
@@ -2069,9 +2037,6 @@ describe('<CourseOutline />', () => {
     const { findAllByTestId } = render(<RootWrapper />);
 
     const [sectionElement] = await findAllByTestId('section-card');
-    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
-    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
-    fireEvent.click(expandBtn);
     const [section] = store.getState().courseOutline.sectionsList;
     const subsectionsDraggers = within(sectionElement).getAllByRole('button', { name: 'Drag to reorder' });
     const draggableButton = subsectionsDraggers[1];
@@ -2103,9 +2068,6 @@ describe('<CourseOutline />', () => {
     const { findAllByTestId } = render(<RootWrapper />);
 
     const [sectionElement] = await findAllByTestId('section-card');
-    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
-    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
-    fireEvent.click(expandBtn);
     const [section] = store.getState().courseOutline.sectionsList;
     const subsectionsDraggers = within(sectionElement).getAllByRole('button', { name: 'Drag to reorder' });
     const draggableButton = subsectionsDraggers[1];
@@ -2135,6 +2097,8 @@ describe('<CourseOutline />', () => {
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
     const section = store.getState().courseOutline.sectionsList[2];
     const [subsection] = section.childInfo.children;
+    const expandBtn = within(subsectionElement).getByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
     const unitDraggers = await within(subsectionElement).findAllByRole('button', { name: 'Drag to reorder' });
     const draggableButton = unitDraggers[1];
     const sections = courseOutlineIndexMock.courseStructure.childInfo.children;
@@ -2169,6 +2133,8 @@ describe('<CourseOutline />', () => {
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
     const section = store.getState().courseOutline.sectionsList[2];
     const [subsection] = section.childInfo.children;
+    const expandBtn = within(subsectionElement).getByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
     const unitDraggers = await within(subsectionElement).findAllByRole('button', { name: 'Drag to reorder' });
     const draggableButton = unitDraggers[1];
     const sections = courseOutlineIndexMock.courseStructure.childInfo.children;
@@ -2206,6 +2172,8 @@ describe('<CourseOutline />', () => {
       .onGet(getXBlockApiUrl(section.id))
       .reply(200, courseSectionMock);
     let [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
     const [unit] = subsection.childInfo.children;
     const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
 
@@ -2286,14 +2254,9 @@ describe('<CourseOutline />', () => {
 
   it('should show toats on export tags', async () => {
     const expectedResponse = 'this is a test';
-
-    // Delay to ensure we see "Please wait."
-    // Without the delay the success message renders too quickly
-    const delayedResponse = axiosMock
+    axiosMock
       .onGet(exportTags(courseId))
-      .withDelayInMs(500);
-    delayedResponse(200, expectedResponse);
-
+      .reply(200, expectedResponse);
     useLocation.mockReturnValue({
       pathname: '/foo-bar',
       hash: '#export-tags',
@@ -2301,43 +2264,25 @@ describe('<CourseOutline />', () => {
     window.URL.createObjectURL = jest.fn().mockReturnValue('http://example.com/archivo');
     window.URL.revokeObjectURL = jest.fn();
     render(<RootWrapper />);
-    await screen.findByText('Please wait. Creating export file for course tags...');
+    expect(await screen.findByText('Please wait. Creating export file for course tags...')).toBeInTheDocument();
 
     const expectedRequest = axiosMock.history.get.filter(request => request.url === exportTags(courseId));
     expect(expectedRequest.length).toBe(1);
 
-    await screen.findByText('Course tags exported successfully');
+    expect(await screen.findByText('Course tags exported successfully')).toBeInTheDocument();
   });
 
   it('should show toast on export tags error', async () => {
-    // Delay to ensure we see "Please wait."
-    // Without the delay the error renders too quickly
-    const delayedResponse = axiosMock
+    axiosMock
       .onGet(exportTags(courseId))
-      .withDelayInMs(500);
-    delayedResponse(404);
-
+      .reply(404);
     useLocation.mockReturnValue({
       pathname: '/foo-bar',
       hash: '#export-tags',
     });
 
     render(<RootWrapper />);
-    await screen.findByText('Please wait. Creating export file for course tags...');
-    await screen.findByText('An error has occurred creating the file');
-  });
-
-  it('sets status to DENIED when API responds with 403', async () => {
-    axiosMock
-      .onGet(getCourseOutlineIndexApiUrl(courseId))
-      .reply(403);
-
-    const { getByTestId } = render(<RootWrapper />);
-
-    await waitFor(() => {
-      expect(getByTestId('redux-provider')).toBeInTheDocument();
-      const { outlineIndexLoadingStatus } = store.getState().courseOutline.loadingStatus;
-      expect(outlineIndexLoadingStatus).toEqual(RequestStatus.DENIED);
-    });
+    expect(await screen.findByText('Please wait. Creating export file for course tags...')).toBeInTheDocument();
+    expect(await screen.findByText('An error has occurred creating the file')).toBeInTheDocument();
   });
 });

src/course-outline/__mocks__/courseOutlineIndex.js

@@ -60,7 +60,7 @@ module.exports = {
     highlightsEnabledForMessaging: false,
     highlightsEnabled: true,
     highlightsPreviewOnly: false,
-    highlightsDocUrl: 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/manage_course_highlight_emails.html',
+    highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
     enableProctoredExams: true,
     createZendeskTickets: true,
     enableTimedExams: true,
@@ -128,7 +128,7 @@ module.exports = {
           ],
           highlightsEnabled: true,
           highlightsPreviewOnly: false,
-          highlightsDocUrl: 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/manage_course_highlight_emails.html',
+          highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
           childInfo: {
             category: 'sequential',
             displayName: 'Subsection',
@@ -292,11 +292,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                   ],
                 },
@@ -522,7 +517,7 @@ module.exports = {
           ],
           highlightsEnabled: true,
           highlightsPreviewOnly: false,
-          highlightsDocUrl: 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/manage_course_highlight_emails.html',
+          highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
           childInfo: {
             category: 'sequential',
             displayName: 'Subsection',
@@ -680,11 +675,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_2dbb0072785e',
@@ -769,11 +759,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_98cf62510471',
@@ -858,11 +843,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_d32bf9b2242c',
@@ -947,11 +927,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4e592689563243c484af947465eaef0d',
@@ -1036,11 +1011,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                   ],
                 },
@@ -1226,11 +1196,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_aae927868e55',
@@ -1315,11 +1280,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_c037f3757df1',
@@ -1404,11 +1364,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_bc69a47c6fae',
@@ -1493,11 +1448,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@8f89194410954e768bde1764985454a7',
@@ -1582,11 +1532,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                   ],
                 },
@@ -1772,11 +1717,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                   ],
                 },
@@ -1897,7 +1837,7 @@ module.exports = {
           highlights: [],
           highlightsEnabled: true,
           highlightsPreviewOnly: false,
-          highlightsDocUrl: 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/manage_course_highlight_emails.html',
+          highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
           childInfo: {
             category: 'sequential',
             displayName: 'Subsection',
@@ -2055,11 +1995,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_f04afeac0131',
@@ -2144,11 +2079,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@b6662b497c094bcc9b870d8270c90c93',
@@ -2233,11 +2163,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@f91d8d31f7cf48ce990f8d8745ae4cfa',
@@ -2322,11 +2247,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_ac391cde8a91',
@@ -2411,11 +2331,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_36e0beb03f0a',
@@ -2500,11 +2415,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@1b0e2c2c84884b95b1c99fb678cc964c',
@@ -2589,11 +2499,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@c7e98fd39a6944edb6b286c32e1150ff',
@@ -2678,11 +2583,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                     {
                       id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6eaa391d2be41dea20b8b1bfbcb1c45',
@@ -2767,11 +2667,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                   ],
                 },
@@ -2892,7 +2787,7 @@ module.exports = {
           highlights: [],
           highlightsEnabled: true,
           highlightsPreviewOnly: false,
-          highlightsDocUrl: 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/manage_course_highlight_emails.html',
+          highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
           childInfo: {
             category: 'sequential',
             displayName: 'Subsection',
@@ -3050,11 +2945,6 @@ module.exports = {
                         selectedPartitionIndex: -1,
                         selectedGroupsLabel: '',
                       },
-                      upstreamInfo: {
-                        readyToSync: false,
-                        upstreamRef: undefined,
-                        versionSynced: undefined,
-                      },
                     },
                   ],
                 },
@@ -3154,6 +3044,7 @@ module.exports = {
     blocks: [],
     advanceSettingsUrl: '/settings/advanced/course-v1:edx+101+y76',
   },
+  discussionsIncontextFeedbackUrl: '',
   discussionsIncontextLearnmoreUrl: '',
   initialState: {
     expandedLocators: [

src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js

@@ -6,6 +6,7 @@ module.exports = {
     blocks: [],
     advanceSettingsUrl: '/settings/advanced/course-v1:edx+101+y76',
   },
+  discussionsIncontextFeedbackUrl: '',
   discussionsIncontextLearnmoreUrl: '',
   initialState: {
     expandedLocators: [

src/course-outline/__mocks__/courseSection.js

@@ -55,7 +55,7 @@ module.exports = {
   highlights: [],
   highlights_enabled: true,
   highlights_preview_only: false,
-  highlights_doc_url: 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/manage_course_highlight_emails.html',
+  highlights_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
   child_info: {
     category: 'sequential',
     display_name: 'Subsection',

src/course-outline/card-header/CardHeader.jsx

@@ -1,7 +1,6 @@
 // @ts-check
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSearchParams } from 'react-router-dom';
@@ -11,13 +10,11 @@ import {
   Hyperlink,
   Icon,
   IconButton,
-  IconButtonWithTooltip,
   useToggle,
 } from '@openedx/paragon';
 import {
   MoreVert as MoveVertIcon,
   EditOutline as EditIcon,
-  Sync as SyncIcon,
 } from '@openedx/paragon/icons';
 
 import { useContentTagsCount } from '../../generic/data/apiHooks';
@@ -57,9 +54,6 @@ const CardHeader = ({
   discussionEnabled,
   discussionsSettings,
   parentInfo,
-  extraActionsComponent,
-  onClickSync,
-  readyToSync,
 }) => {
   const intl = useIntl();
   const [searchParams] = useSearchParams();
@@ -135,28 +129,12 @@ const CardHeader = ({
         ) : (
           <>
             {titleComponent}
-            <IconButtonWithTooltip
-              className={classNames(
-                'item-card-button-icon',
-                {
-                  'item-card-button-icon-disabled': isDisabledEditField,
-                },
-              )}
+            <IconButton
+              className="item-card-edit-icon"
               data-testid={`${namePrefix}-edit-button`}
-              alt={intl.formatMessage(
-                isDisabledEditField ? messages.cannotEditTooltip : messages.altButtonRename,
-              )}
-              tooltipContent={(
-                <div>
-                  {intl.formatMessage(
-                    isDisabledEditField ? messages.cannotEditTooltip : messages.altButtonRename,
-                  )}
-                </div>
-              )}
+              alt={intl.formatMessage(messages.altButtonEdit)}
               iconAs={EditIcon}
               onClick={onClickEdit}
-              // @ts-ignore
-              disabled={isDisabledEditField}
             />
           </>
         )}
@@ -167,16 +145,6 @@ const CardHeader = ({
           { getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && !!contentTagCount && (
             <TagCount count={contentTagCount} onClick={openManageTagsDrawer} />
           )}
-          {extraActionsComponent}
-          {readyToSync && (
-            <IconButtonWithTooltip
-              data-testid={`${namePrefix}-sync-button`}
-              alt={intl.formatMessage(messages.readyToSyncButtonAlt)}
-              iconAs={SyncIcon}
-              tooltipContent={<div>{intl.formatMessage(messages.readyToSyncButtonAlt)}</div>}
-              onClick={onClickSync}
-            />
-          )}
           <Dropdown data-testid={`${namePrefix}-card-header__menu`} onClick={onClickMenuButton}>
             <Dropdown.Toggle
               className="item-card-header__menu"
@@ -208,7 +176,6 @@ const CardHeader = ({
               </Dropdown.Item>
               <Dropdown.Item
                 data-testid={`${namePrefix}-card-header__menu-configure-button`}
-                disabled={isDisabledEditField}
                 onClick={onClickConfigure}
               >
                 {intl.formatMessage(messages.menuConfigure)}
@@ -216,7 +183,6 @@ const CardHeader = ({
               {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
                 <Dropdown.Item
                   data-testid={`${namePrefix}-card-header__menu-manage-tags-button`}
-                  disabled={isDisabledEditField}
                   onClick={openManageTagsDrawer}
                 >
                   {intl.formatMessage(messages.menuManageTags)}
@@ -286,9 +252,6 @@ CardHeader.defaultProps = {
   discussionsSettings: {},
   parentInfo: {},
   cardId: '',
-  extraActionsComponent: null,
-  readyToSync: false,
-  onClickSync: null,
 };
 
 CardHeader.propTypes = {
@@ -332,11 +295,6 @@ CardHeader.propTypes = {
     isTimeLimited: PropTypes.bool,
     graded: PropTypes.bool,
   }),
-  // An optional component that is rendered before the dropdown. This is used by the Subsection
-  // and Unit card components to render their plugin slots.
-  extraActionsComponent: PropTypes.node,
-  onClickSync: PropTypes.func,
-  readyToSync: PropTypes.bool,
 };
 
 export default CardHeader;

src/course-outline/card-header/CardHeader.scss

@@ -5,17 +5,16 @@
   .item-card-header__title-btn {
     justify-content: flex-start;
     padding: 0;
-    flex: 1 1 0%;
+    width: fit-content;
     height: 1.5rem;
     margin-right: .25rem;
     background: transparent;
     color: $black;
   }
 
-  .item-card-button-icon {
+  .item-card-edit-icon {
     opacity: 0;
     transition: opacity .3s linear;
-    margin-right: .5rem;
 
     &:focus {
       opacity: 1;
@@ -23,14 +22,8 @@
   }
 
   &:hover {
-    .item-card-button-icon {
+    .item-card-edit-icon {
       opacity: 1;
-
-      &.item-card-button-icon-disabled {
-        pointer-events: all;
-        opacity: .5;
-        cursor: default;
-      }
     }
   }
 }

src/course-outline/card-header/CardHeader.test.jsx

@@ -240,35 +240,6 @@ describe('<CardHeader />', () => {
     expect(await findByTestId('subsection-edit-field')).toBeDisabled();
   });
 
-  it('check editing is enabled when isDisabledEditField is false', async () => {
-    const { getByTestId } = renderComponent({
-      ...cardHeaderProps,
-    });
-
-    expect(getByTestId('subsection-edit-button')).toBeEnabled();
-
-    // Ensure menu items related to editing are enabled
-    const menuButton = getByTestId('subsection-card-header__menu-button');
-    await act(async () => fireEvent.click(menuButton));
-    expect(await getByTestId('subsection-card-header__menu-configure-button')).not.toHaveAttribute('aria-disabled');
-    expect(await getByTestId('subsection-card-header__menu-manage-tags-button')).not.toHaveAttribute('aria-disabled');
-  });
-
-  it('check editing is disabled when isDisabledEditField is true', async () => {
-    const { getByTestId } = renderComponent({
-      ...cardHeaderProps,
-      isDisabledEditField: true,
-    });
-
-    expect(await getByTestId('subsection-edit-button')).toBeDisabled();
-
-    // Ensure menu items related to editing are disabled
-    const menuButton = getByTestId('subsection-card-header__menu-button');
-    await act(async () => fireEvent.click(menuButton));
-    expect(await getByTestId('subsection-card-header__menu-configure-button')).toHaveAttribute('aria-disabled', 'true');
-    expect(await getByTestId('subsection-card-header__menu-manage-tags-button')).toHaveAttribute('aria-disabled', 'true');
-  });
-
   it('calls onClickDelete when item is clicked', async () => {
     const { findByText, findByTestId } = renderComponent();
 
@@ -368,19 +339,4 @@ describe('<CardHeader />', () => {
     renderComponent();
     expect(screen.queryByText('0')).not.toBeInTheDocument();
   });
-
-  it('should render sync button when is ready to sync', () => {
-    const mockClickSync = jest.fn();
-
-    renderComponent({
-      readyToSync: true,
-      onClickSync: mockClickSync,
-    });
-
-    const syncButton = screen.getByRole('button', { name: /update available - click to sync/i });
-    expect(syncButton).toBeInTheDocument();
-    fireEvent.click(syncButton);
-
-    expect(mockClickSync).toHaveBeenCalled();
-  });
 });

src/course-outline/card-header/messages.js

@@ -29,9 +29,9 @@ const messages = defineMessages({
     id: 'course-authoring.course-outline.card.status-badge.draft-unpublished-changes',
     defaultMessage: 'Draft (Unpublished changes)',
   },
-  altButtonRename: {
+  altButtonEdit: {
     id: 'course-authoring.course-outline.card.button.edit.alt',
-    defaultMessage: 'Rename',
+    defaultMessage: 'Edit',
   },
   menuPublish: {
     id: 'course-authoring.course-outline.card.menu.publish',
@@ -77,16 +77,6 @@ const messages = defineMessages({
     id: 'course-authoring.course-outline.card.menu.manageTags',
     defaultMessage: 'Manage tags',
   },
-  readyToSyncButtonAlt: {
-    id: 'course-authoring.course-outline.card.button.sync.alt',
-    defaultMessage: 'Update available - click to sync',
-    description: 'Alt text for the sync icon button.',
-  },
-  cannotEditTooltip: {
-    id: 'course-authoring.course-outline.card.button.edit.disable.tooltip',
-    defaultMessage: 'This object was added from a library, so it cannot be edited.',
-    description: 'Tooltip text of button when the object was added from a library.',
-  },
 });
 
 export default messages;

src/course-outline/constants.js

@@ -87,5 +87,4 @@ export const API_ERROR_TYPES = /** @type {const} */ ({
   networkError: 'networkError',
   serverError: 'serverError',
   unknown: 'unknown',
-  forbidden: 'forbidden',
 });