feat: course optimizer page better design

- Add filter functionality to course optimizer broken links to check different results
- modify design, make use of logo with better tooltip
- change message texts in different area of the page

.env

@@ -44,4 +44,7 @@ INVITE_STUDENTS_EMAIL_TO=''
 ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=''
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
-LIBRARY_SUPPORTED_BLOCKS="problem,video,html,drag-and-drop-v2"
+# "Multi-level" blocks are unsupported in libraries
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -47,4 +47,7 @@ INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
 ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
-LIBRARY_SUPPORTED_BLOCKS="problem,video,html,drag-and-drop-v2"
+# "Multi-level" blocks are unsupported in libraries
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -39,5 +39,6 @@ INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
 ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
-# "other" is used to test the workflow for creating blocks that aren't supported by the built-in editors
-LIBRARY_SUPPORTED_BLOCKS="problem,video,html,drag-and-drop-v2,other"
+# "Multi-level" blocks are unsupported in libraries
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+PARAGON_THEME_URLS=

README.rst

@@ -38,7 +38,7 @@ Cloning and Setup
 
     git clone https://github.com/openedx/frontend-app-authoring.git
 
-2. Use node v20.x.
+2. Use the version of Node specified in the ``.nvmrc`` file.
 
   The current version of the micro-frontend build scripts supports node 20.
   Using other major versions of node *may* work, but this is unsupported.  For
@@ -315,7 +315,7 @@ In additional to the standard settings, the following local configurations can b
 Developing
 **********
 
-`Devstack <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/installation/index.html>`_.  If you start Devstack with ``make dev.up.studio`` that should give you everything you need as a companion to this frontend.
+`Tutor <https://docs.tutor.edly.io/>`_ is the community-supported Open edX development environment. See the `tutor-mfe plugin README <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`_ for more information.
 
 
 If your devstack includes the default Demo course, you can visit the following URLs to see content:

codecov.yml

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

package.json

@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "fedx-scripts formatjs extract --include=plugins",
     "stylelint": "stylelint \"plugins/**/*.scss\" \"src/**/*.scss\" \"scss/**/*.scss\" --config .stylelintrc.json",
     "lint": "npm run stylelint && fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "lint:fix": "npm run stylelint -- --fix && fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
@@ -23,11 +23,6 @@
     "test:ci": "TZ=UTC fedx-scripts jest --silent --coverage --passWithNoTests",
     "types": "tsc --noEmit"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "author": "edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-authoring#readme",
@@ -39,6 +34,7 @@
   },
   "dependencies": {
     "@codemirror/lang-html": "^6.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/lang-xml": "^6.0.0",
     "@codemirror/lint": "^6.2.1",
     "@codemirror/state": "^6.0.0",
@@ -48,12 +44,12 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
-    "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-component-footer": "^14.1.0",
-    "@edx/frontend-component-header": "^5.8.3",
-    "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-platform": "^8.0.3",
-    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/browserslist-config": "1.5.0",
+    "@edx/frontend-component-footer": "^14.9.0",
+    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-enterprise-hotjar": "^7.2.0",
+    "@edx/frontend-platform": "^8.4.0",
+    "@edx/openedx-atlas": "^0.7.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
     "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
     "@openedx-plugins/course-app-learning_assistant": "file:plugins/course-apps/learning_assistant",
@@ -64,9 +60,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.2.0",
-    "@openedx/frontend-plugin-framework": "^1.2.1",
-    "@openedx/paragon": "^22.8.1",
+    "@openedx/frontend-build": "^14.5.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.5.0",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",
@@ -83,11 +79,10 @@
     "meilisearch": "^0.41.0",
     "moment": "2.30.1",
     "moment-shortformat": "^2.1.0",
-    "npm": "^10.8.1",
     "prop-types": "^15.8.1",
-    "react": "17.0.2",
+    "react": "^18.3.1",
     "react-datepicker": "^4.13.0",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",
     "react-onclickoutside": "^6.13.0",
@@ -95,36 +90,33 @@
     "react-responsive": "9.0.2",
     "react-router": "6.27.0",
     "react-router-dom": "6.27.0",
-    "react-select": "5.8.0",
+    "react-select": "5.10.1",
     "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "4.4.5",
     "redux": "4.0.5",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.5",
-    "start": "^5.1.0",
     "tinymce": "^5.10.4",
     "universal-cookie": "^4.0.4",
-    "uuid": "^3.4.0",
+    "uuid": "^11.1.0",
     "xmlchecker": "^0.1.0",
-    "yup": "0.31.1"
+    "yup": "0.32.11"
   },
   "devDependencies": {
-    "@edx/react-unit-test-utils": "3.0.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/stylelint-config-edx": "2.3.3",
     "@edx/typescript-config": "^1.0.1",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash": "^4.17.17",
     "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": "17.0.2",
+    "react-test-renderer": "^18.3.1",
     "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, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Form, Hyperlink } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import AppConfigFormDivider from 'CourseAuthoring/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider';
@@ -11,10 +11,10 @@ import LiveCommonFields from './LiveCommonFields';
 import messages from './messages';
 
 const BbbSettings = ({
-  intl,
   values,
   setFieldValue,
 }) => {
+  const intl = useIntl();
   const [bbbPlan, setBbbPlan] = useState(values.tierType);
 
   useEffect(() => {
@@ -107,12 +107,10 @@ const BbbSettings = ({
         )}
       </>
     </>
-
   );
 };
 
 BbbSettings.propTypes = {
-  intl: intlShape.isRequired,
   values: PropTypes.shape({
     consumerKey: PropTypes.string,
     consumerSecret: PropTypes.string,
@@ -127,4 +125,4 @@ BbbSettings.propTypes = {
   setFieldValue: PropTypes.func.isRequired,
 };
 
-export default injectIntl(BbbSettings);
+export default BbbSettings;

plugins/course-apps/live/LiveCommonFields.jsx

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

plugins/course-apps/live/Settings.jsx

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

plugins/course-apps/live/ZoomSettings.jsx

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

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

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

plugins/course-apps/proctoring/Settings.jsx

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

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

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

plugins/course-apps/progress/Settings.jsx

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

plugins/course-apps/teams/GroupEditor.jsx

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

plugins/course-apps/teams/Settings.jsx

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

plugins/course-apps/wiki/Settings.jsx

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

plugins/course-apps/xpert_unit_summary/Settings.jsx

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

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

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

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

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

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

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

src/CourseAuthoringPage.jsx

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

src/CourseAuthoringRoutes.jsx

@@ -4,7 +4,7 @@ import {
 } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 import { PageWrap } from '@edx/frontend-platform/react';
-import { Textbooks } from 'CourseAuthoring/textbooks';
+import { Textbooks } from './textbooks';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';
 import EditorContainer from './editors/EditorContainer';
@@ -17,7 +17,7 @@ import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
 import CourseTeam from './course-team/CourseTeam';
 import { CourseUpdates } from './course-updates';
-import { CourseUnit, IframeProvider } from './course-unit';
+import { CourseUnit } from './course-unit';
 import { Certificates } from './certificates';
 import CourseExportPage from './export-page/CourseExportPage';
 import CourseOptimizerPage from './optimizer-page/CourseOptimizerPage';
@@ -25,7 +25,8 @@ 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 { 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:

src/__mocks__/clipboardSubsection.js

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

src/__mocks__/index.js

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

src/accessibility-page/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 { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } 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>
-      <StudioFooter />
+      <StudioFooterSlot />
     </>
   );
 };

src/advanced-settings/data/api.js

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

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

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

src/advanced-settings/scss/AdvancedSettings.scss

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

src/advanced-settings/scss/_variables.scss

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

src/assets/scss/_form.scss

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

src/assets/scss/_utilities.scss

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

src/assets/scss/_variables.scss

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

src/certificates/scss/Certificates.scss

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

src/constants.js

@@ -59,6 +59,7 @@ export const COURSE_BLOCK_NAMES = ({
   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' },
 });
 
@@ -91,3 +92,17 @@ export const REGEX_RULES = {
 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.scss

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

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

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

src/content-tags-drawer/ContentTagsDrawer.scss

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

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

@@ -1,5 +1,4 @@
 import {
-  act,
   fireEvent,
   initializeMocks,
   render,
@@ -22,6 +21,7 @@ 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,6 +41,11 @@ 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}>
@@ -61,19 +66,15 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows spinner before the content data query is complete', async () => {
-    await act(async () => {
-      renderDrawer(stagedTagsId);
-      const spinner = screen.getAllByRole('status')[0];
-      expect(spinner.textContent).toEqual('Loading'); // Uses <Spinner />
-    });
+    renderDrawer(stagedTagsId);
+    const spinner = (await screen.findAllByRole('status'))[0];
+    expect(spinner.textContent).toEqual('Loading'); // Uses <Spinner />
   });
 
   it('shows spinner before the taxonomy tags query is complete', async () => {
-    await act(async () => {
-      renderDrawer(stagedTagsId);
-      const spinner = screen.getAllByRole('status')[1];
-      expect(spinner.textContent).toEqual('Loading...'); // Uses <Loading />
-    });
+    renderDrawer(stagedTagsId);
+    const spinner = (await screen.findAllByRole('status'))[1];
+    expect(spinner.textContent).toEqual('Loading...'); // Uses <Loading />
   });
 
   it('shows the content display name after the query is complete in drawer variant', async () => {
@@ -98,15 +99,12 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows the taxonomies data including tag numbers after the query is complete', async () => {
-    await act(async () => {
-      const { container } = renderDrawer(largeTagsId);
-      await waitFor(() => { expect(screen.getByText('Taxonomy 1')).toBeInTheDocument(); });
-      expect(screen.getByText('Taxonomy 1')).toBeInTheDocument();
-      expect(screen.getByText('Taxonomy 2')).toBeInTheDocument();
-      const tagCountBadges = container.getElementsByClassName('taxonomy-tags-count-chip');
-      expect(tagCountBadges[0].textContent).toBe('3');
-      expect(tagCountBadges[1].textContent).toBe('2');
-    });
+    const { container } = renderDrawer(largeTagsId);
+    await screen.findByText('Taxonomy 1');
+    await screen.findByText('Taxonomy 2');
+    const tagCountBadges = container.getElementsByClassName('taxonomy-tags-count-chip');
+    expect(tagCountBadges[0].textContent).toBe('3');
+    expect(tagCountBadges[1].textContent).toBe('2');
   });
 
   it('should be read only on first render on drawer variant', async () => {
@@ -192,6 +190,26 @@ describe('<ContentTagsDrawer />', () => {
     expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
   });
 
+  it('should change to edit mode sidebar action is set to JumpToManageTags', async () => {
+    mockSidebarAction.mockReturnValueOnce('jump-to-manage-tags');
+    renderDrawer(stagedTagsId, { variant: 'component' });
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // Show delete tag buttons
+    expect(screen.getAllByRole('button', {
+      name: /delete/i,
+    }).length).toBe(2);
+
+    // Show add a tag select
+    expect(screen.getByText(/add a tag/i)).toBeInTheDocument();
+
+    // Show cancel button
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+
+    // Show save button
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+  });
+
   it('should change to read mode when click on `Cancel` on drawer variant', async () => {
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();

src/content-tags-drawer/ContentTagsDrawer.tsx

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

src/content-tags-drawer/ContentTagsDrawerHelper.jsx

@@ -20,9 +20,11 @@ import { ContentTagsDrawerSheetContext } from './common/context';
  * To *use* the context, just use `useContext(ContentTagsDrawerContext)`
  * @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}
  */
-export const useCreateContentTagsDrawerContext = (contentId, canTagObject) => {
+export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetchMetadata = false) => {
   const intl = useIntl();
   const org = extractOrgFromContentId(contentId);
 
@@ -48,7 +50,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject) => {
   const updateTags = useContentTaxonomyTagsUpdater(contentId);
 
   // Fetch from database
-  const { data: contentData, isSuccess: isContentDataLoaded } = useContentData(contentId);
+  const { data: contentData, isSuccess: isContentDataLoaded } = useContentData(contentId, fetchMetadata);
   const {
     data: contentTaxonomyTagsData,
     isSuccess: isContentTaxonomyTagsLoaded,

src/content-tags-drawer/ContentTagsDropDownSelector.scss

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

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

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

src/content-tags-drawer/TagsTree.scss

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

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

@@ -70,17 +70,12 @@ export async function getContentTaxonomyTagsCount(contentId) {
 }
 
 /**
- * Fetch meta data (eg: display_name) about the content object (unit/compoenent)
+ * Fetch meta data (eg: display_name) about the content object (unit/component)
  * @param {string} contentId The id of the content object (unit/component)
- * @returns {Promise<import("./types.js").ContentData | null>}
+ * @returns {Promise<import("./types.js").ContentData>}
  */
 export async function getContentData(contentId) {
   let url;
-  if (contentId.startsWith('lib-collection:')) {
-    // This type of usage_key is not used to obtain collections
-    // is only used in tagging.
-    return null;
-  }
 
   if (contentId.startsWith('lb:')) {
     url = getLibraryContentDataApiUrl(contentId);

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

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

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

@@ -7,6 +7,7 @@ import {
   useMutation,
   useQueryClient,
 } from '@tanstack/react-query';
+import { useParams } from 'react-router';
 import {
   getTaxonomyTagsData,
   getContentTaxonomyTagsData,
@@ -14,7 +15,7 @@ import {
   updateContentTaxonomyTags,
   getContentTaxonomyTagsCount,
 } from './api';
-import { libraryQueryPredicate, xblockQueryKeys } from '../../library-authoring/data/apiHooks';
+import { libraryAuthoringQueryKeys, libraryQueryPredicate, xblockQueryKeys } from '../../library-authoring/data/apiHooks';
 import { getLibraryId } from '../../generic/key-utils';
 
 /** @typedef {import("../../taxonomy/data/types.js").TagListData} TagListData */
@@ -112,11 +113,13 @@ 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) => (
+export const useContentData = (contentId, enabled) => (
   useQuery({
     queryKey: ['contentData', contentId],
-    queryFn: () => getContentData(contentId),
+    queryFn: enabled ? () => getContentData(contentId) : undefined,
+    enabled,
   })
 );
 
@@ -127,6 +130,7 @@ export const useContentData = (contentId) => (
 export const useContentTaxonomyTagsUpdater = (contentId) => {
   const queryClient = useQueryClient();
   const unitIframe = window.frames['xblock-iframe'];
+  const { unitId } = useParams();
 
   return useMutation({
     /**
@@ -149,13 +153,17 @@ export const useContentTaxonomyTagsUpdater = (contentId) => {
         contentPattern = contentId.replace(/\+type@.*$/, '*');
       }
       queryClient.invalidateQueries({ queryKey: ['contentTagsCount', contentPattern] });
-      if (contentId.startsWith('lb:') || contentId.startsWith('lib-collection:')) {
+      if (contentId.startsWith('lb:') || contentId.startsWith('lib-collection:') || contentId.startsWith('lct:')) {
         // 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 */ () => {

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

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

src/content-tags-drawer/index.ts

@@ -1,2 +1,3 @@
 export { default as ContentTagsDrawer } from './ContentTagsDrawer';
 export { default as ContentTagsDrawerSheet } from './ContentTagsDrawerSheet';
+export { useContentTaxonomyTagsData } from './data/apiHooks';

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

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

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

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

src/course-checklist/ChecklistSection/ChecklistSection.scss

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

src/course-libraries/CourseLibraries.test.tsx

@@ -1,22 +1,35 @@
 import fetchMock from 'fetch-mock-jest';
-import { cloneDeep } from 'lodash';
 
 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 mockInfoResult from './__mocks__/courseBlocksInfo.json';
-import CourseLibraries from './CourseLibraries';
-import { mockGetEntityLinksByDownstreamContext } from './data/api.mocks';
+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();
-mockGetEntityLinksByDownstreamContext.applyMock();
+mockGetEntityLinks.applyMock();
+mockGetEntityLinksSummaryByDownstreamContext.applyMock();
+mockUseLibBlockMetadata.applyMock();
 
-const searchEndpoint = 'http://mock.meilisearch.local/indexes/studio/search';
+const searchParamsGetMock = jest.fn();
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string, action?: ToastActionData | undefined) => void;
+let queryClient: QueryClient;
 
 jest.mock('../studio-home/hooks', () => ({
   useStudioHome: () => ({
@@ -26,123 +39,246 @@ jest.mock('../studio-home/hooks', () => ({
   }),
 }));
 
+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();
-
-    // The Meilisearch client-side API uses fetch, not Axios.
-    fetchMock.post(searchEndpoint, (_url, req) => {
-      const requestData = JSON.parse(req.body?.toString() ?? '');
-      const filter = requestData?.filter[1];
-      const mockInfoResultCopy = cloneDeep(mockInfoResult);
-      const resp = mockInfoResultCopy.filter((o: { filter: string }) => o.filter === filter)[0] || {
-        result: {
-          hits: [],
-          query: '',
-          processingTimeMs: 0,
-          limit: 4,
-          offset: 0,
-          estimatedTotalHits: 0,
-        },
-      };
-      const { result } = resp;
-      return result;
-    });
+    mockFetchIndexDocuments.applyMock();
+    localStorage.clear();
+    searchParamsGetMock.mockReturnValue('all');
   });
 
   const renderCourseLibrariesPage = async (courseKey?: string) => {
-    const courseId = courseKey || mockGetEntityLinksByDownstreamContext.courseKey;
+    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(mockGetEntityLinksByDownstreamContext.courseKeyLoading);
+    await renderCourseLibrariesPage(mockGetEntityLinksSummaryByDownstreamContext.courseKeyLoading);
     const spinner = await screen.findByRole('status');
     expect(spinner.textContent).toEqual('Loading...');
   });
 
-  it('shows empty state wheen no links are present', async () => {
-    await renderCourseLibrariesPage(mockGetEntityLinksByDownstreamContext.courseKeyEmpty);
+  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(mockGetEntityLinksByDownstreamContext.courseKey);
+    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.findByRole('alert');
     expect(await within(alert).findByText(
-      '1 library components are out of sync. Review updates to accept or ignore changes',
+      '5 library components are out of sync. Review updates to accept or ignore changes',
     )).toBeInTheDocument();
-    const allTab = await screen.findByRole('tab', { name: 'Libraries' });
     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 (1)' })).toHaveAttribute('aria-selected', 'true');
+    expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
     expect(alert).not.toBeInTheDocument();
-
-    // go back to all tab
-    userEvent.click(allTab);
-    // alert should not be back
-    expect(alert).not.toBeInTheDocument();
-    expect(allTab).toHaveAttribute('aria-selected', 'true');
-
-    // review updates button
-    const reviewActionBtn = await screen.findByRole('button', { name: 'Review Updates' });
-    userEvent.click(reviewActionBtn);
-    expect(await screen.findByRole('tab', { name: 'Review Content Updates (1)' })).toHaveAttribute('aria-selected', 'true');
   });
 
   it('hide alert on dismiss', async () => {
-    await renderCourseLibrariesPage(mockGetEntityLinksByDownstreamContext.courseKey);
+    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.findByRole('alert');
     expect(await within(alert).findByText(
-      '1 library components are out of sync. Review updates to accept or ignore changes',
+      '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.findByRole('alert');
+    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');
 
-    expect(alert).not.toBeInTheDocument();
-  });
+    screen.logTestingPlaygroundURL();
 
-  it('shows links split by library', async () => {
-    await renderCourseLibrariesPage(mockGetEntityLinksByDownstreamContext.courseKey);
-    const msg = await screen.findByText('This course contains content from these libraries.');
-    expect(msg).toBeInTheDocument();
-    const allButtons = await screen.findAllByRole('button');
-    // total 3 components used from lib 1
-    const expectedLib1Blocks = 3;
-    // total 4 components used from lib 1
-    const expectedLib2Blocks = 4;
-    // 1 component has updates.
-    const expectedLib2ToUpdate = 1;
-
-    const libraryCards = allButtons.filter((el) => el.classList.contains('collapsible-trigger'));
-    expect(libraryCards.length).toEqual(2);
-    expect(await within(libraryCards[0]).findByText('CS problems 2')).toBeInTheDocument();
-    expect(await within(libraryCards[0]).findByText(`${expectedLib1Blocks} components applied`)).toBeInTheDocument();
-    expect(await within(libraryCards[0]).findByText('All components up to date')).toBeInTheDocument();
-
-    const libParent1 = libraryCards[0].parentElement;
-    expect(libParent1).not.toBeNull();
-    userEvent.click(libraryCards[0]);
-    const xblockCards1 = libParent1!.querySelectorAll('div.card');
-    expect(xblockCards1.length).toEqual(expectedLib1Blocks);
-
-    expect(await within(libraryCards[1]).findByText('CS problems 3')).toBeInTheDocument();
-    expect(await within(libraryCards[1]).findByText(`${expectedLib2Blocks} components applied`)).toBeInTheDocument();
-    expect(await within(libraryCards[1]).findByText(`${expectedLib2ToUpdate} component out of sync`)).toBeInTheDocument();
-
-    const libParent2 = libraryCards[1].parentElement;
-    expect(libParent2).not.toBeNull();
-    userEvent.click(libraryCards[1]);
-    const xblockCards2 = libParent2!.querySelectorAll('div.card');
-    expect(xblockCards2.length).toEqual(expectedLib2Blocks);
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+});
+
+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,241 +1,115 @@
 import React, {
-  useCallback, useMemo, useState,
+  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,
-  Breadcrumb, Button, Card, Collapsible, Container, Dropdown, Hyperlink, Icon, IconButton, Layout, Stack, Tab, Tabs,
+  ActionRow,
+  Button,
+  Card,
+  Container,
+  Hyperlink,
+  Icon,
+  Stack,
+  Tab,
+  Tabs,
 } from '@openedx/paragon';
 import {
-  Cached, CheckCircle, KeyboardArrowDown, KeyboardArrowRight, Loop, MoreVert,
+  Cached, CheckCircle, Launch, Loop,
 } from '@openedx/paragon/icons';
 
-import {
-  countBy, groupBy, keyBy, tail, uniq,
-} from 'lodash';
-import classNames from 'classnames';
+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 { useEntityLinksByDownstreamContext } from './data/apiHooks';
-import type { PublishableEntityLink } from './data/api';
-import { useFetchIndexDocuments } from '../search-manager/data/apiHooks';
-import { getItemIcon } from '../generic/block-type-utils';
-import { BlockTypeLabel } from '../search-manager';
-import AlertMessage from '../generic/alert-message';
-import type { ContentHit } from '../search-manager/data/api';
-import { SearchSortOption } from '../search-manager/data/api';
+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';
 
 interface Props {
   courseId: string;
 }
 
 interface LibraryCardProps {
-  courseId: string;
-  title: string;
-  links: PublishableEntityLink[];
-}
-
-interface ComponentInfo extends ContentHit {
-  readyToSync: boolean;
-}
-
-interface BlockCardProps {
-  info: ComponentInfo;
+  linkSummary: PublishableEntityLinkSummary;
 }
 
 export enum CourseLibraryTabs {
-  home = '',
+  all = 'all',
   review = 'review',
 }
 
-const BlockCard: React.FC<BlockCardProps> = ({ info }) => {
+const LibraryCard = ({ linkSummary }: LibraryCardProps) => {
   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={classNames(
-        'my-3 shadow-none border-light-600 border',
-        { 'bg-primary-100': info.readyToSync },
-      )}
-      orientation="horizontal"
-      key={info.usageKey}
-    >
-      <Card.Section
-        className="py-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} />
-            <Hyperlink className="lead ml-auto text-black" destination={getBlockLink()} target="_blank">
-              {' '}
-            </Hyperlink>
+    <Card className="my-3 border-light-500 border shadow-none">
+      <Card.Header
+        title={(
+          <Stack direction="horizontal" gap={2}>
+            <Icon src={NewsstandIcon} />
+            {linkSummary.upstreamContextTitle}
           </Stack>
-          <Stack direction="horizontal" className="small" gap={1}>
-            {info.readyToSync && <Icon src={Loop} size="xs" />}
-            {info.formatted?.displayName}
-          </Stack>
-          <div className="micro">{info.formatted?.description}</div>
-          <Breadcrumb
-            className="micro text-gray-500"
-            ariaLabel={intl.formatMessage(messages.breadcrumbAriaLabel)}
-            links={breadcrumbs.map((breadcrumb) => ({ label: breadcrumb.displayName }))}
-            spacer={<span className="custom-spacer">/</span>}
-            linkAs="span"
-          />
+        )}
+        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>
   );
 };
 
-const LibraryCard: React.FC<LibraryCardProps> = ({ courseId, title, links }) => {
-  const intl = useIntl();
-  const linksInfo = useMemo(() => keyBy(links, 'downstreamUsageKey'), [links]);
-  const totalComponents = links.length;
-  const outOfSyncCount = useMemo(() => countBy(links, 'readyToSync').true, [links]);
-  const downstreamKeys = useMemo(() => uniq(Object.keys(linksInfo)), [links]);
-  const { data: downstreamInfo } = useFetchIndexDocuments({
-    filter: [`context_key = "${courseId}"`, `usage_key IN ["${downstreamKeys.join('","')}"]`],
-    limit: downstreamKeys.length,
-    attributesToRetrieve: ['usage_key', 'display_name', 'breadcrumbs', 'description', 'block_type'],
-    attributesToCrop: ['description:30'],
-    sort: [SearchSortOption.TITLE_AZ],
-  }) as unknown as { data: ComponentInfo[] };
-
-  const renderBlockCards = (info: ComponentInfo) => {
-    // eslint-disable-next-line no-param-reassign
-    info.readyToSync = linksInfo[info.usageKey].readyToSync;
-    return <BlockCard info={info} key={info.usageKey} />;
-  };
-
-  return (
-    <Collapsible.Advanced>
-      <Collapsible.Trigger className="bg-white shadow px-2 py-2 my-3 collapsible-trigger d-flex font-weight-normal text-dark">
-        <Collapsible.Visible whenClosed>
-          <Icon src={KeyboardArrowRight} />
-        </Collapsible.Visible>
-        <Collapsible.Visible whenOpen>
-          <Icon src={KeyboardArrowDown} />
-        </Collapsible.Visible>
-        <Stack direction="vertical" className="flex-grow-1 pl-2 x-small" gap={1}>
-          <h4>{title}</h4>
-          <Stack direction="horizontal" gap={2}>
-            <span>
-              {intl.formatMessage(messages.totalComponentLabel, { totalComponents })}
-            </span>
-            <span>/</span>
-            {outOfSyncCount ? (
-              <>
-                <Icon src={Loop} size="xs" />
-                <span>
-                  {intl.formatMessage(messages.outOfSyncCountLabel, { outOfSyncCount })}
-                </span>
-              </>
-            ) : (
-              <>
-                <Icon src={CheckCircle} size="xs" />
-                <span>
-                  {intl.formatMessage(messages.allUptodateLabel)}
-                </span>
-              </>
-            )}
-          </Stack>
-        </Stack>
-        <Dropdown onClick={(e: { stopPropagation: () => void; }) => e.stopPropagation()}>
-          <Dropdown.Toggle
-            id={`dropdown-toggle-${title}`}
-            alt="dropdown-toggle-menu-items"
-            as={IconButton}
-            src={MoreVert}
-            iconAs={Icon}
-            variant="primary"
-            disabled
-          />
-          <Dropdown.Menu>
-            <Dropdown.Item>TODO 1</Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
-      </Collapsible.Trigger>
-
-      <Collapsible.Body className="collapsible-body border-left border-left-purple px-2">
-        {downstreamInfo?.map(info => renderBlockCards(info))}
-      </Collapsible.Body>
-    </Collapsible.Advanced>
-  );
-};
-
-interface ReviewAlertProps {
-  show: boolean;
-  outOfSyncCount: number;
-  onDismiss: () => void;
-  onReview: () => void;
-}
-
-const ReviewAlert: React.FC<ReviewAlertProps> = ({
-  show, outOfSyncCount, onDismiss, onReview,
-}) => {
-  const intl = useIntl();
-  return (
-    <AlertMessage
-      title={intl.formatMessage(messages.outOfSyncCountAlertTitle, { outOfSyncCount })}
-      dismissible
-      show={show}
-      icon={Loop}
-      variant="info"
-      onClose={onDismiss}
-      actions={[
-        <Button
-          onClick={onReview}
-        >
-          {intl.formatMessage(messages.outOfSyncCountAlertReviewBtn)}
-        </Button>,
-      ]}
-    />
-  );
-};
-
-const TabContent = ({ children }: { children: React.ReactNode }) => (
-  <Layout
-    lg={[{ span: 9 }, { span: 3 }]}
-    md={[{ span: 9 }, { span: 3 }]}
-    sm={[{ span: 12 }, { span: 12 }]}
-    xs={[{ span: 12 }, { span: 12 }]}
-    xl={[{ span: 9 }, { span: 3 }]}
-  >
-    <Layout.Element>
-      {children}
-    </Layout.Element>
-    <Layout.Element>
-      Help panel
-    </Layout.Element>
-  </Layout>
-);
-
-const CourseLibraries: React.FC<Props> = ({ courseId }) => {
+export const CourseLibraries: React.FC<Props> = ({ courseId }) => {
   const intl = useIntl();
   const courseDetails = useModel('courseDetails', courseId);
-  const [tabKey, setTabKey] = useState<CourseLibraryTabs>(CourseLibraryTabs.home);
-  const [showReviewAlert, setShowReviewAlert] = useState(true);
-  const { data: links, isLoading } = useEntityLinksByDownstreamContext(courseId);
-  const linksByLib = useMemo(() => groupBy(links, 'upstreamContextKey'), [links]);
-  const outOfSyncCount = useMemo(() => countBy(links, 'readyToSync').true, [links]);
+  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,
@@ -244,33 +118,64 @@ const CourseLibraries: React.FC<Props> = ({ courseId }) => {
 
   const onAlertReview = () => {
     setTabKey(CourseLibraryTabs.review);
-    setShowReviewAlert(false);
-  };
-  const onAlertDismiss = () => {
-    setShowReviewAlert(false);
   };
 
+  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 (links?.length === 0) {
+    if (libraries?.length === 0) {
       return <small><FormattedMessage {...messages.homeTabDescriptionEmpty} /></small>;
     }
     return (
       <>
         <small><FormattedMessage {...messages.homeTabDescription} /></small>
-        {Object.entries(linksByLib).map(([libKey, libLinks]) => (
+        {libraries?.map((library) => (
           <LibraryCard
-            courseId={courseId}
-            title={libLinks[0].upstreamContextTitle}
-            links={libLinks}
-            key={libKey}
+            linkSummary={library}
+            key={library.upstreamContextKey}
           />
         ))}
       </>
     );
-  }, [links, isLoading, linksByLib]);
+  }, [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 (
@@ -288,16 +193,16 @@ const CourseLibraries: React.FC<Props> = ({ courseId }) => {
         </title>
       </Helmet>
       <Container size="xl" className="px-4 pt-4 mt-3">
-        <ReviewAlert
-          show={outOfSyncCount > 0 && tabKey === CourseLibraryTabs.home && showReviewAlert}
-          outOfSyncCount={outOfSyncCount}
-          onDismiss={onAlertDismiss}
+        <OutOfSyncAlert
+          courseId={courseId}
           onReview={onAlertReview}
+          showAlert={showReviewAlert && tabKey === CourseLibraryTabs.all}
+          setShowAlert={setShowReviewAlert}
         />
         <SubHeader
           title={intl.formatMessage(messages.headingTitle)}
           subtitle={intl.formatMessage(messages.headingSubtitle)}
-          headerActions={!showReviewAlert && tabKey === CourseLibraryTabs.home && (
+          headerActions={!showReviewAlert && outOfSyncCount > 0 && tabKey === CourseLibraryTabs.all && (
             <Button
               variant="primary"
               onClick={onAlertReview}
@@ -312,25 +217,27 @@ const CourseLibraries: React.FC<Props> = ({ courseId }) => {
           <Tabs
             id="course-library-tabs"
             activeKey={tabKey}
-            onSelect={(k: CourseLibraryTabs) => setTabKey(k)}
+            onSelect={tabChange}
           >
             <Tab
-              eventKey={CourseLibraryTabs.home}
+              eventKey={CourseLibraryTabs.all}
               title={intl.formatMessage(messages.homeTabTitle)}
               className="px-2 mt-3"
             >
-              <TabContent>
-                {renderLibrariesTabContent()}
-              </TabContent>
+              {renderLibrariesTabContent()}
             </Tab>
             <Tab
               eventKey={CourseLibraryTabs.review}
-              title={intl.formatMessage(
-                outOfSyncCount > 0 ? messages.reviewTabTitle : messages.reviewTabTitleEmpty,
-                { count: outOfSyncCount },
+              title={(
+                <Stack direction="horizontal" gap={1}>
+                  <Icon src={Loop} />
+                  {intl.formatMessage(messages.reviewTabTitle)}
+                </Stack>
               )}
+              notification={outOfSyncCount}
+              className="px-2 mt-3"
             >
-              <TabContent>Help</TabContent>
+              {renderReviewTabContent()}
             </Tab>
           </Tabs>
         </section>
@@ -338,5 +245,3 @@ const CourseLibraries: React.FC<Props> = ({ courseId }) => {
     </>
   );
 };
-
-export default CourseLibraries;

src/course-libraries/OutOfSyncAlert.tsx

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

@@ -0,0 +1,330 @@
+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__/libBlockMetadata.json

@@ -0,0 +1,23 @@
+{
+    "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

@@ -0,0 +1,22 @@
+[
+  {
+    "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

@@ -0,0 +1,376 @@
+{
+  "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,100 +1,72 @@
 [
   {
-    "id": 970,
-    "upstreamContextTitle": "CS problems 2",
-    "upstreamVersion": 15,
-    "readyToSync": false,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB2:html:c0c1ca28-ff25-4757-83bc-3a2c2a0fe9c8",
-    "upstreamContextKey": "lib:OpenedX:CSPROB2",
-    "downstreamUsageKey": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@0dfbabb8c93140caa3a004ab621757f5",
-    "downstreamContextKey": "course-v1:NewOrg3+TSTCS+2025_T1",
-    "versionSynced": 15,
-    "versionDeclined": 13,
-    "created": "2025-02-08T14:11:23.650589Z",
-    "updated": "2025-02-08T14:11:23.650589Z"
-  },
-  {
-    "id": 971,
-    "upstreamContextTitle": "CS problems 2",
-    "upstreamVersion": 3,
-    "readyToSync": false,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB2:html:fd2d3827-e633-4217-bca9-c6661086b4b2",
-    "upstreamContextKey": "lib:OpenedX:CSPROB2",
-    "downstreamUsageKey": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@37a916b53c2f430989d33ddeb47e224d",
-    "downstreamContextKey": "course-v1:NewOrg3+TSTCS+2025_T1",
-    "versionSynced": 3,
-    "versionDeclined": null,
-    "created": "2025-02-08T14:11:23.650589Z",
-    "updated": "2025-02-08T14:11:23.650589Z"
-  },
-  {
-    "id": 972,
-    "upstreamContextTitle": "CS problems 2",
-    "upstreamVersion": 3,
-    "readyToSync": false,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB2:video:ba2023d4-b4e4-44a5-bfc8-322203e8737f",
-    "upstreamContextKey": "lib:OpenedX:CSPROB2",
-    "downstreamUsageKey": "block-v1:NewOrg3+TSTCS+2025_T1+type@video+block@33518787c3e14844ad823af8ff158a83",
-    "downstreamContextKey": "course-v1:NewOrg3+TSTCS+2025_T1",
-    "versionSynced": 3,
-    "versionDeclined": null,
-    "created": "2025-02-08T14:11:23.650589Z",
-    "updated": "2025-02-08T14:11:23.650589Z"
-  },
-  {
-    "id": 974,
+    "id": 875,
     "upstreamContextTitle": "CS problems 3",
-    "upstreamVersion": 18,
-    "readyToSync": false,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB3:html:ca4d2b1f-0b64-4a2d-88fa-592f7e398477",
-    "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "downstreamUsageKey": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@5be06d70f09c45a581d973d215e7ad62",
-    "downstreamContextKey": "course-v1:NewOrg3+TSTCS+2025_T1",
-    "versionSynced": 17,
-    "versionDeclined": 18,
-    "created": "2025-02-12T05:38:53.967738Z",
-    "updated": "2025-02-12T05:41:01.225542Z"
-  },
-  {
-    "id": 975,
-    "upstreamContextTitle": "CS problems 3",
-    "upstreamVersion": 1,
-    "readyToSync": false,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB3:html:4abdfa10-dd1a-4ebb-bad3-489000671acb",
-    "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "downstreamUsageKey": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@d1b006742e0745b0948c8ba8dcd9bc07",
-    "downstreamContextKey": "course-v1:NewOrg3+TSTCS+2025_T1",
-    "versionSynced": 1,
-    "versionDeclined": null,
-    "created": "2025-02-12T05:38:55.899821Z",
-    "updated": "2025-02-12T05:38:55.899821Z"
-  },
-  {
-    "id": 976,
-    "upstreamContextTitle": "CS problems 3",
-    "upstreamVersion": 1,
-    "readyToSync": false,
-    "upstreamUsageKey": "lb:OpenedX:CSPROB3:html:6aff1b41-e406-41ff-9d31-70d02ef42deb",
-    "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "downstreamUsageKey": "block-v1:NewOrg3+TSTCS+2025_T1+type@html+block@276914b632eb49049b2c2568ef24fe4d",
-    "downstreamContextKey": "course-v1:NewOrg3+TSTCS+2025_T1",
-    "versionSynced": 1,
-    "versionDeclined": null,
-    "created": "2025-02-12T05:38:57.228152Z",
-    "updated": "2025-02-12T05:38:57.228152Z"
-  },
-  {
-    "id": 977,
-    "upstreamContextTitle": "CS problems 3",
-    "upstreamVersion": 3,
+    "upstreamVersion": 10,
     "readyToSync": true,
     "upstreamUsageKey": "lb:OpenedX:CSPROB3:problem:d40264d5-80c4-4be8-bfb6-086391de1cd3",
     "upstreamContextKey": "lib:OpenedX:CSPROB3",
-    "downstreamUsageKey": "block-v1:NewOrg3+TSTCS+2025_T1+type@problem+block@fcf430ac5b7a44b6ab316b53a7e67fef",
-    "downstreamContextKey": "course-v1:NewOrg3+TSTCS+2025_T1",
+    "downstreamUsageKey": "block-v1:OpenEdx+DemoX+CourseX+type@problem+block@problem3",
+    "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
     "versionSynced": 2,
     "versionDeclined": null,
-    "created": "2025-02-12T05:38:58.538280Z",
-    "updated": "2025-02-12T05:38:58.538280Z"
+    "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,36 +1,111 @@
+/* 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 `getEntityLinksByDownstreamContext()`
+ * Mock for `getEntityLinks()`
  *
  * This mock returns a fixed response for the downstreamContextKey.
  */
-export async function mockGetEntityLinksByDownstreamContext(
-  downstreamContextKey: string,
-): Promise<api.PublishableEntityLink[]> {
+export async function mockGetEntityLinks(
+  downstreamContextKey?: string,
+  readyToSync?: boolean,
+): ReturnType<typeof api.getEntityLinks> {
   switch (downstreamContextKey) {
-    case mockGetEntityLinksByDownstreamContext.invalidCourseKey:
+    case mockGetEntityLinks.invalidCourseKey:
       throw createAxiosError({
         code: 404,
         message: 'Not found.',
-        path: api.getEntityLinksByDownstreamContextUrl(downstreamContextKey),
+        path: api.getEntityLinksByDownstreamContextUrl(),
       });
-    case mockGetEntityLinksByDownstreamContext.courseKeyLoading:
+    case mockGetEntityLinks.courseKeyLoading:
       return new Promise(() => {});
-    case mockGetEntityLinksByDownstreamContext.courseKeyEmpty:
+    case mockGetEntityLinks.courseKeyEmpty:
       return Promise.resolve([]);
-    default:
-      return Promise.resolve(mockGetEntityLinksByDownstreamContext.response);
+    default: {
+      let { response } = mockGetEntityLinks;
+      if (readyToSync !== undefined) {
+        response = response.filter((o) => o.readyToSync === readyToSync);
+      }
+      return Promise.resolve(response);
+    }
   }
 }
-mockGetEntityLinksByDownstreamContext.courseKey = mockLinksResult[0].downstreamContextKey;
-mockGetEntityLinksByDownstreamContext.invalidCourseKey = 'course_key_error';
-mockGetEntityLinksByDownstreamContext.courseKeyLoading = 'courseKeyLoading';
-mockGetEntityLinksByDownstreamContext.courseKeyEmpty = 'courseKeyEmpty';
-mockGetEntityLinksByDownstreamContext.response = mockLinksResult;
+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. */
-mockGetEntityLinksByDownstreamContext.applyMock = () => {
-  jest.spyOn(api, 'getEntityLinksByDownstreamContext').mockImplementation(mockGetEntityLinksByDownstreamContext);
+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

@@ -3,27 +3,65 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
 
-export const getEntityLinksByDownstreamContextUrl = (downstreamContextKey: string) => `${getApiBaseUrl()}/api/contentstore/v2/upstreams/${downstreamContextKey}`;
+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: string;
+  upstreamVersion: number;
   downstreamUsageKey: string;
-  downstreamContextTitle: string;
   downstreamContextKey: string;
-  versionSynced: string;
-  versionDeclined: string;
+  versionSynced: number;
+  versionDeclined: number | null;
   created: string;
   updated: string;
   readyToSync: boolean;
 }
 
-export const getEntityLinksByDownstreamContext = async (
-  downstreamContextKey: string,
+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(downstreamContextKey));
+    .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,11 +1,10 @@
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { renderHook } from '@testing-library/react-hooks';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import MockAdapter from 'axios-mock-adapter';
-import { waitFor } from '@testing-library/react';
+import { renderHook, waitFor } from '@testing-library/react';
 import { getEntityLinksByDownstreamContextUrl } from './api';
-import { useEntityLinksByDownstreamContext } from './apiHooks';
+import { useEntityLinks } from './apiHooks';
 
 let axiosMock: MockAdapter;
 
@@ -36,15 +35,24 @@ describe('course libraries api hooks', () => {
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
   });
 
-  it('should create library block', async () => {
-    const courseKey = 'course-v1:some+key';
-    const url = getEntityLinksByDownstreamContextUrl(courseKey);
+  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(() => useEntityLinksByDownstreamContext(courseKey), { wrapper });
+    const { result } = renderHook(() => useEntityLinks({ courseId }), { wrapper });
     await waitFor(() => {
       expect(result.current.isLoading).toBeFalsy();
     });
-    expect(result.current.data).toEqual([]);
     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,20 +1,65 @@
 import {
   useQuery,
 } from '@tanstack/react-query';
-import { getEntityLinksByDownstreamContext } from './api';
+import { getEntityLinks, getEntityLinksSummaryByDownstreamContext } from './api';
 
 export const courseLibrariesQueryKeys = {
   all: ['courseLibraries'],
-  courseLibraries: (courseKey?: string) => [...courseLibrariesQueryKeys.all, courseKey],
+  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 a content library by its ID.
+ * 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 useEntityLinksByDownstreamContext = (courseKey: string | undefined) => (
+export const useEntityLinks = ({
+  courseId, readyToSync, upstreamUsageKey,
+}: {
+  courseId?: string,
+  readyToSync?: boolean,
+  upstreamUsageKey?: string,
+}) => (
   useQuery({
-    queryKey: courseLibrariesQueryKeys.courseLibraries(courseKey),
-    queryFn: () => getEntityLinksByDownstreamContext(courseKey!),
-    enabled: courseKey !== undefined,
+    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 +1 @@
-export { default } from './CourseLibraries';
+export { CourseLibraries } from './CourseLibraries';

src/course-libraries/messages.ts

@@ -18,7 +18,7 @@ const messages = defineMessages({
   },
   homeTabDescription: {
     id: 'course-authoring.course-libraries.tab.home.description',
-    defaultMessage: 'This course contains content from these libraries.',
+    defaultMessage: 'Your course contains content from these libraries.',
     description: 'Description text for home tab',
   },
   homeTabDescriptionEmpty: {
@@ -28,18 +28,18 @@ const messages = defineMessages({
   },
   reviewTabTitle: {
     id: 'course-authoring.course-libraries.tab.review.title',
-    defaultMessage: 'Review Content Updates ({count})',
+    defaultMessage: 'Review Content Updates',
     description: 'Tab title for review tab',
   },
-  reviewTabTitleEmpty: {
-    id: 'course-authoring.course-libraries.tab.review.title-no-updates',
-    defaultMessage: 'Review Content Updates',
-    description: 'Tab title for review tab when no updates are available',
+  reviewTabDescriptionEmpty: {
+    id: 'course-authoring.course-libraries.tab.home.description-no-links',
+    defaultMessage: 'All components are up to date',
+    description: 'Description text for home tab',
   },
-  breadcrumbAriaLabel: {
-    id: 'course-authoring.course-libraries.downstream-block.breadcrumb.aria-label',
-    defaultMessage: 'Component breadcrumb',
-    description: 'Aria label for breadcrumb in component cards in course libraries page.',
+  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',
@@ -58,7 +58,7 @@ const messages = defineMessages({
   },
   outOfSyncCountAlertTitle: {
     id: 'course-authoring.course-libraries.libcard.out-of-sync.alert.title',
-    defaultMessage: '{outOfSyncCount} library components are out of sync. Review updates to accept or ignore changes',
+    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: {
@@ -76,6 +76,46 @@ const messages = defineMessages({
     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.',
+  },
 });
 
 export default messages;

src/course-outline/CourseOutline.jsx

@@ -22,6 +22,7 @@ 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';
@@ -35,8 +36,6 @@ 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';
@@ -46,15 +45,16 @@ 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 '../generic/drag-helper/DraggableList';
+import DraggableList from './drag-helper/DraggableList';
 import {
   canMoveSection,
   possibleUnitMoves,
   possibleSubsectionMoves,
-} from '../generic/drag-helper/utils';
+} from './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();
@@ -103,13 +103,12 @@ const CourseOutline = ({ courseId }) => {
     handleNewSectionSubmit,
     handleNewSubsectionSubmit,
     handleNewUnitSubmit,
+    handleAddUnitFromLibrary,
     getUnitUrl,
     handleVideoSharingOptionChange,
-    handleCopyToClipboardClick,
     handlePasteClipboardClick,
     notificationDismissUrl,
     discussionsSettings,
-    discussionsIncontextFeedbackUrl,
     discussionsIncontextLearnmoreUrl,
     deprecatedBlocksInfo,
     proctoringErrors,
@@ -242,7 +241,6 @@ const CourseOutline = ({ courseId }) => {
           notificationDismissUrl={notificationDismissUrl}
           handleDismissNotification={handleDismissNotification}
           discussionsSettings={discussionsSettings}
-          discussionsIncontextFeedbackUrl={discussionsIncontextFeedbackUrl}
           discussionsIncontextLearnmoreUrl={discussionsIncontextLearnmoreUrl}
           deprecatedBlocksInfo={deprecatedBlocksInfo}
           proctoringErrors={proctoringErrors}
@@ -267,7 +265,6 @@ const CourseOutline = ({ courseId }) => {
             notificationDismissUrl={notificationDismissUrl}
             handleDismissNotification={handleDismissNotification}
             discussionsSettings={discussionsSettings}
-            discussionsIncontextFeedbackUrl={discussionsIncontextFeedbackUrl}
             discussionsIncontextLearnmoreUrl={discussionsIncontextLearnmoreUrl}
             deprecatedBlocksInfo={deprecatedBlocksInfo}
             proctoringErrors={proctoringErrors}
@@ -295,7 +292,7 @@ const CourseOutline = ({ courseId }) => {
             title={intl.formatMessage(messages.headingTitle)}
             subtitle={intl.formatMessage(messages.headingSubtitle)}
             headerActions={(
-              <HeaderNavigations
+              <CourseOutlineHeaderActionsSlot
                 isReIndexShow={isReIndexShow}
                 isSectionsExpanded={isSectionsExpanded}
                 headerNavigationsActions={headerNavigationsActions}
@@ -303,6 +300,7 @@ const CourseOutline = ({ courseId }) => {
                 hasSections={Boolean(sectionsList.length)}
                 courseActions={courseActions}
                 errors={errors}
+                sections={sections}
               />
             )}
           />
@@ -377,6 +375,7 @@ const CourseOutline = ({ courseId }) => {
                                             section,
                                             section.childInfo.children,
                                           )}
+                                          isSectionsExpanded={isSectionsExpanded}
                                           isSelfPaced={statusBarData.isSelfPaced}
                                           isCustomRelativeDatesActive={isCustomRelativeDatesActive}
                                           savingStatus={savingStatus}
@@ -386,6 +385,7 @@ const CourseOutline = ({ courseId }) => {
                                           onDuplicateSubmit={handleDuplicateSubsectionSubmit}
                                           onOpenConfigureModal={openConfigureModal}
                                           onNewUnitSubmit={handleNewUnitSubmit}
+                                          onAddUnitFromLibrary={handleAddUnitFromLibrary}
                                           onOrderChange={updateSubsectionOrderByIndex}
                                           onPasteClick={handlePasteClipboardClick}
                                         >
@@ -419,7 +419,6 @@ const CourseOutline = ({ courseId }) => {
                                                 onDuplicateSubmit={handleDuplicateUnitSubmit}
                                                 getTitleLink={getUnitUrl}
                                                 onOrderChange={updateUnitOrderByIndex}
-                                                onCopyToClipboardClick={handleCopyToClipboardClick}
                                                 discussionsSettings={discussionsSettings}
                                               />
                                             ))}
@@ -457,7 +456,11 @@ const CourseOutline = ({ courseId }) => {
               </article>
             </Layout.Element>
             <Layout.Element>
-              <OutlineSideBar courseId={courseId} />
+              <CourseAuthoringOutlineSidebarSlot
+                courseId={courseId}
+                courseName={courseName}
+                sections={sections}
+              />
             </Layout.Element>
           </Layout>
           <EnableHighlightsModal

src/course-outline/CourseOutline.scss

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

src/course-outline/CourseOutline.test.jsx

@@ -58,22 +58,18 @@ import {
   moveUnitOver,
   moveSubsection,
   moveUnit,
-} from '../generic/drag-helper/utils';
+} from './drag-helper/utils';
+import { postXBlockBaseApiUrl } from '../course-unit/data/api';
+import { COMPONENT_TYPES } from '../generic/block-type-utils/constants';
 
 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(),
@@ -100,6 +96,24 @@ 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', () => ({
@@ -139,7 +153,9 @@ describe('<CourseOutline />', () => {
       pathname: mockPathname,
     });
 
-    store = initializeStore();
+    store = initializeStore({
+      studioHome: { studioHomeData: { librariesV2Enabled: true } },
+    });
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock
       .onGet(getCourseOutlineIndexApiUrl(courseId))
@@ -158,6 +174,10 @@ describe('<CourseOutline />', () => {
     await executeThunk(fetchCourseOutlineIndexQuery(courseId), store.dispatch);
   });
 
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it('render CourseOutline component correctly', async () => {
     const { getByText } = render(<RootWrapper />);
 
@@ -268,13 +288,15 @@ describe('<CourseOutline />', () => {
   });
 
   it('check that new section list is saved when dragged', async () => {
-    const { findAllByRole } = render(<RootWrapper />);
-    const courseBlockId = courseOutlineIndexMock.courseStructure.id;
+    const { findAllByRole, findByTestId } = render(<RootWrapper />);
+    const expandAllButton = await findByTestId('expand-collapse-all-button');
+    fireEvent.click(expandAllButton);
+    const [section] = store.getState().courseOutline.sectionsList;
     const sectionsDraggers = await findAllByRole('button', { name: 'Drag to reorder' });
-    const draggableButton = sectionsDraggers[6];
+    const draggableButton = sectionsDraggers[1];
 
     axiosMock
-      .onPut(getCourseBlockApiUrl(courseBlockId))
+      .onPut(getCourseBlockApiUrl(section.id))
       .reply(200, { dummy: 'value' });
 
     const section1 = store.getState().courseOutline.sectionsList[0].id;
@@ -293,13 +315,15 @@ describe('<CourseOutline />', () => {
   });
 
   it('check section list is restored to original order when API call fails', async () => {
-    const { findAllByRole } = render(<RootWrapper />);
-    const courseBlockId = courseOutlineIndexMock.courseStructure.id;
+    const { findAllByRole, findByTestId } = render(<RootWrapper />);
+    const expandAllButton = await findByTestId('expand-collapse-all-button');
+    fireEvent.click(expandAllButton);
+    const [section] = store.getState().courseOutline.sectionsList;
     const sectionsDraggers = await findAllByRole('button', { name: 'Drag to reorder' });
-    const draggableButton = sectionsDraggers[6];
+    const draggableButton = sectionsDraggers[1];
 
     axiosMock
-      .onPut(getCourseBlockApiUrl(courseBlockId))
+      .onPut(getCourseBlockApiUrl(section.id))
       .reply(500);
 
     const section1 = store.getState().courseOutline.sectionsList[0].id;
@@ -374,8 +398,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 units = await within(subsectionElement).findAllByTestId('unit-card');
     expect(units.length).toBe(1);
 
@@ -396,6 +418,40 @@ 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 />);
 
@@ -589,8 +645,6 @@ 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');
@@ -603,8 +657,6 @@ describe('<CourseOutline />', () => {
     const [sectionElement] = await screen.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');
 
@@ -643,8 +695,6 @@ 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');
 
@@ -714,8 +764,6 @@ 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');
 
@@ -1424,8 +1472,6 @@ 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');
 
@@ -1785,8 +1831,6 @@ 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');
 
@@ -1826,8 +1870,6 @@ 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');
 
@@ -1863,8 +1905,6 @@ 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');
 
@@ -1909,8 +1949,6 @@ 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];
@@ -1948,8 +1986,6 @@ 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];
@@ -1994,8 +2030,6 @@ 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');
 
@@ -2015,8 +2049,6 @@ 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');
 
@@ -2037,6 +2069,9 @@ 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];
@@ -2068,6 +2103,9 @@ 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];
@@ -2097,8 +2135,6 @@ 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;
@@ -2133,8 +2169,6 @@ 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;
@@ -2172,8 +2206,6 @@ 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');
 
@@ -2182,9 +2214,6 @@ describe('<CourseOutline />', () => {
       .onPost(getClipboardUrl(), {
         usage_key: unit.id,
       }).reply(200, clipboardUnit);
-    // check that initialUserClipboard state is empty
-    const { initialUserClipboard } = store.getState().courseOutline;
-    expect(initialUserClipboard).toBeUndefined();
 
     // find menu button and click on it to open menu
     const menu = await within(unitElement).findByTestId('unit-card-header__menu-button');
@@ -2194,9 +2223,6 @@ describe('<CourseOutline />', () => {
     const copyButton = await within(unitElement).findByText(cardHeaderMessages.menuCopy.defaultMessage);
     await act(async () => fireEvent.click(copyButton));
 
-    // check that initialUserClipboard state is updated
-    expect(store.getState().generic.clipboardData).toEqual(clipboardUnit);
-
     [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
     // find clipboard content label
     const clipboardLabel = await within(subsectionElement).findByText(
@@ -2260,9 +2286,14 @@ describe('<CourseOutline />', () => {
 
   it('should show toats on export tags', async () => {
     const expectedResponse = 'this is a test';
-    axiosMock
+
+    // Delay to ensure we see "Please wait."
+    // Without the delay the success message renders too quickly
+    const delayedResponse = axiosMock
       .onGet(exportTags(courseId))
-      .reply(200, expectedResponse);
+      .withDelayInMs(500);
+    delayedResponse(200, expectedResponse);
+
     useLocation.mockReturnValue({
       pathname: '/foo-bar',
       hash: '#export-tags',
@@ -2270,37 +2301,41 @@ describe('<CourseOutline />', () => {
     window.URL.createObjectURL = jest.fn().mockReturnValue('http://example.com/archivo');
     window.URL.revokeObjectURL = jest.fn();
     render(<RootWrapper />);
-    expect(await screen.findByText('Please wait. Creating export file for course tags...')).toBeInTheDocument();
+    await screen.findByText('Please wait. Creating export file for course tags...');
 
     const expectedRequest = axiosMock.history.get.filter(request => request.url === exportTags(courseId));
     expect(expectedRequest.length).toBe(1);
 
-    expect(await screen.findByText('Course tags exported successfully')).toBeInTheDocument();
+    await screen.findByText('Course tags exported successfully');
   });
 
   it('should show toast on export tags error', async () => {
-    axiosMock
+    // Delay to ensure we see "Please wait."
+    // Without the delay the error renders too quickly
+    const delayedResponse = axiosMock
       .onGet(exportTags(courseId))
-      .reply(404);
+      .withDelayInMs(500);
+    delayedResponse(404);
+
     useLocation.mockReturnValue({
       pathname: '/foo-bar',
       hash: '#export-tags',
     });
 
     render(<RootWrapper />);
-    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();
+    await screen.findByText('Please wait. Creating export file for course tags...');
+    await screen.findByText('An error has occurred creating the file');
   });
 
-  it('displays an alert and sets status to DENIED when API responds with 403', async () => {
+  it('sets status to DENIED when API responds with 403', async () => {
     axiosMock
       .onGet(getCourseOutlineIndexApiUrl(courseId))
       .reply(403);
 
-    const { getByRole } = render(<RootWrapper />);
+    const { getByTestId } = render(<RootWrapper />);
 
     await waitFor(() => {
-      expect(getByRole('alert')).toBeInTheDocument();
+      expect(getByTestId('redux-provider')).toBeInTheDocument();
       const { outlineIndexLoadingStatus } = store.getState().courseOutline.loadingStatus;
       expect(outlineIndexLoadingStatus).toEqual(RequestStatus.DENIED);
     });

src/course-outline/__mocks__/courseOutlineIndex.js

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

src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js

@@ -6,7 +6,6 @@ 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: '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',
+  highlights_doc_url: 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/manage_course_highlight_emails.html',
   child_info: {
     category: 'sequential',
     display_name: 'Subsection',

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

@@ -15,6 +15,7 @@ import {
 import {
   MoreVert as MoveVertIcon,
   EditOutline as EditIcon,
+  Sync as SyncIcon,
 } from '@openedx/paragon/icons';
 
 import { useContentTagsCount } from '../../generic/data/apiHooks';
@@ -54,6 +55,9 @@ const CardHeader = ({
   discussionEnabled,
   discussionsSettings,
   parentInfo,
+  extraActionsComponent,
+  onClickSync,
+  readyToSync,
 }) => {
   const intl = useIntl();
   const [searchParams] = useSearchParams();
@@ -129,12 +133,23 @@ const CardHeader = ({
         ) : (
           <>
             {titleComponent}
+            {readyToSync && (
+              <IconButton
+                className="item-card-button-icon"
+                data-testid={`${namePrefix}-sync-button`}
+                alt={intl.formatMessage(messages.readyToSyncButtonAlt)}
+                iconAs={SyncIcon}
+                onClick={onClickSync}
+              />
+            )}
             <IconButton
-              className="item-card-edit-icon"
+              className="item-card-button-icon"
               data-testid={`${namePrefix}-edit-button`}
               alt={intl.formatMessage(messages.altButtonEdit)}
               iconAs={EditIcon}
               onClick={onClickEdit}
+              // @ts-ignore
+              disabled={isDisabledEditField}
             />
           </>
         )}
@@ -145,6 +160,7 @@ const CardHeader = ({
           { getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && !!contentTagCount && (
             <TagCount count={contentTagCount} onClick={openManageTagsDrawer} />
           )}
+          {extraActionsComponent}
           <Dropdown data-testid={`${namePrefix}-card-header__menu`} onClick={onClickMenuButton}>
             <Dropdown.Toggle
               className="item-card-header__menu"
@@ -176,6 +192,7 @@ const CardHeader = ({
               </Dropdown.Item>
               <Dropdown.Item
                 data-testid={`${namePrefix}-card-header__menu-configure-button`}
+                disabled={isDisabledEditField}
                 onClick={onClickConfigure}
               >
                 {intl.formatMessage(messages.menuConfigure)}
@@ -183,6 +200,7 @@ 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)}
@@ -252,6 +270,9 @@ CardHeader.defaultProps = {
   discussionsSettings: {},
   parentInfo: {},
   cardId: '',
+  extraActionsComponent: null,
+  readyToSync: false,
+  onClickSync: null,
 };
 
 CardHeader.propTypes = {
@@ -295,6 +316,11 @@ 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

@@ -9,10 +9,10 @@
     height: 1.5rem;
     margin-right: .25rem;
     background: transparent;
-    color: $black;
+    color: var(--pgn-color-black);
   }
 
-  .item-card-edit-icon {
+  .item-card-button-icon {
     opacity: 0;
     transition: opacity .3s linear;
     margin-right: .5rem;
@@ -23,7 +23,7 @@
   }
 
   &:hover {
-    .item-card-edit-icon {
+    .item-card-button-icon {
       opacity: 1;
     }
   }

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

@@ -240,6 +240,35 @@ 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();
 
@@ -339,4 +368,19 @@ 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/TitleButton.jsx

@@ -39,7 +39,7 @@ const TitleButton = ({
         className="item-card-header__title-btn"
         onClick={onTitleClick}
       >
-        <Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
+        <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
       </Button>
     </OverlayTrigger>
   );

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

@@ -14,7 +14,7 @@ const TitleLink = ({
     className="item-card-header__title-btn"
     to={titleLink}
   >
-    <Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
+    <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
   </Button>
 );
 

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

@@ -77,6 +77,11 @@ 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.',
+  },
 });
 
 export default messages;

src/course-outline/data/api.js

@@ -28,7 +28,6 @@ export const getCourseReindexApiUrl = (reindexLink) => `${getApiBaseUrl()}${rein
 export const getXBlockBaseApiUrl = () => `${getApiBaseUrl()}/xblock/`;
 export const getCourseItemApiUrl = (itemId) => `${getXBlockBaseApiUrl()}${itemId}`;
 export const getXBlockApiUrl = (blockId) => `${getXBlockBaseApiUrl()}outline/${blockId}`;
-export const getClipboardUrl = () => `${getApiBaseUrl()}/api/content-staging/v1/clipboard/`;
 export const exportTags = (courseId) => `${getApiBaseUrl()}/api/content_tagging/v1/object_tags/${courseId}/export/`;
 
 /**
@@ -36,7 +35,6 @@ export const exportTags = (courseId) => `${getApiBaseUrl()}/api/content_tagging/
  * @property {string} courseReleaseDate
  * @property {Object} courseStructure
  * @property {Object} deprecatedBlocksInfo
- * @property {string} discussionsIncontextFeedbackUrl
  * @property {string} discussionsIncontextLearnmoreUrl
  * @property {Object} initialState
  * @property {Object} initialUserClipboard

src/course-outline/data/thunk.js

@@ -1,5 +1,4 @@
 import { RequestStatus } from '../../data/constants';
-import { updateClipboardData } from '../../generic/data/slice';
 import { NOTIFICATION_MESSAGES } from '../../constants';
 import { COURSE_BLOCK_NAMES } from '../constants';
 import {
@@ -54,6 +53,7 @@ import {
   setPasteFileNotices,
   updateCourseLaunchQueryStatus,
 } from './slice';
+import { createCourseXblock } from '../../course-unit/data/api';
 
 export function fetchCourseOutlineIndexQuery(courseId) {
   return async (dispatch) => {
@@ -71,7 +71,6 @@ export function fetchCourseOutlineIndexQuery(courseId) {
         },
       } = outlineIndex;
       dispatch(fetchOutlineIndexSuccess(outlineIndex));
-      dispatch(updateClipboardData(outlineIndex.initialUserClipboard));
       dispatch(updateStatusBar({
         courseReleaseDate,
         highlightsEnabledForMessaging,
@@ -542,6 +541,26 @@ export function addNewUnitQuery(parentLocator, callback) {
   };
 }
 
+export function addUnitFromLibrary(body, callback) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await createCourseXblock(body).then(async (result) => {
+        if (result) {
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+          dispatch(hideProcessingNotification());
+          callback(result.locator);
+        }
+      });
+    } catch (error) /* istanbul ignore next */ {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
 function setBlockOrderListQuery(
   parentId,
   blockIds,

src/course-outline/empty-placeholder/EmptyPlaceholder.scss

@@ -3,8 +3,8 @@
   align-items: center;
   justify-content: center;
   gap: 1.25rem;
-  border: .0625rem solid $gray-200;
+  border: .0625rem solid var(--pgn-color-gray-200);
   border-radius: .375rem;
-  box-shadow: inset inset 0 1px .125rem 1px $gray-200;
+  box-shadow: inset inset 0 1px .125rem 1px var(--pgn-color-gray-200);
   padding: 2.5rem;
 }

src/course-outline/header-navigations/HeaderNavigations.jsx

@@ -25,7 +25,7 @@ const HeaderNavigations = ({
   } = headerNavigationsActions;
 
   return (
-    <nav className="header-navigations ml-auto">
+    <>
       {courseActions.childAddable && (
         <OverlayTrigger
           placement="bottom"
@@ -66,6 +66,8 @@ const HeaderNavigations = ({
       {hasSections && (
         <Button
           variant="outline-primary"
+          id="expand-collapse-all-button"
+          data-testid="expand-collapse-all-button"
           iconBefore={isSectionsExpanded ? ArrowUpIcon : ArrowDownIcon}
           onClick={handleExpandAll}
         >
@@ -90,7 +92,7 @@ const HeaderNavigations = ({
           {intl.formatMessage(messages.viewLiveButton)}
         </Button>
       </OverlayTrigger>
-    </nav>
+    </>
   );
 };
 

src/course-outline/header-navigations/HeaderNavigations.scss

@@ -1,4 +0,0 @@
-.header-navigations {
-  display: flex;
-  gap: .75rem;
-}

src/course-outline/highlights-modal/HighlightsModal.scss

@@ -6,7 +6,7 @@
   }
 
   .form-control {
-    color: $black;
+    color: var(--pgn-color-black);
   }
 
   .pgn__form-control-decorator-group {

src/course-outline/hooks.jsx

@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
 import { useToggle } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
-import { copyToClipboard } from '../generic/data/thunks';
 import { getSavingStatus as getGenericSavingStatus } from '../generic/data/selectors';
 import { getWaffleFlags } from '../data/selectors';
 import { RequestStatus } from '../data/constants';
@@ -54,6 +53,7 @@ import {
   setUnitOrderListQuery,
   pasteClipboardContent,
   dismissNotificationQuery,
+  addUnitFromLibrary,
 } from './data/thunk';
 
 const useCourseOutline = ({ courseId }) => {
@@ -67,13 +67,13 @@ const useCourseOutline = ({ courseId }) => {
     lmsLink,
     notificationDismissUrl,
     discussionsSettings,
-    discussionsIncontextFeedbackUrl,
     discussionsIncontextLearnmoreUrl,
     deprecatedBlocksInfo,
     proctoringErrors,
     mfeProctoredExamSettingsUrl,
     advanceSettingsUrl,
   } = useSelector(getOutlineIndexData);
+
   const { outlineIndexLoadingStatus, reIndexLoadingStatus } = useSelector(getLoadingStatus);
   const statusBarData = useSelector(getStatusBarData);
   const savingStatus = useSelector(getSavingStatus);
@@ -97,10 +97,6 @@ const useCourseOutline = ({ courseId }) => {
 
   const isSavingStatusFailed = savingStatus === RequestStatus.FAILED || genericSavingStatus === RequestStatus.FAILED;
 
-  const handleCopyToClipboardClick = (usageKey) => {
-    dispatch(copyToClipboard(usageKey));
-  };
-
   const handlePasteClipboardClick = (parentLocator, sectionId) => {
     dispatch(pasteClipboardContent(parentLocator, sectionId));
   };
@@ -133,6 +129,10 @@ const useCourseOutline = ({ courseId }) => {
     dispatch(addNewUnitQuery(subsectionId, openUnitPage));
   };
 
+  const handleAddUnitFromLibrary = (body) => {
+    dispatch(addUnitFromLibrary(body, openUnitPage));
+  };
+
   const headerNavigationsActions = {
     handleNewSection: handleNewSectionSubmit,
     handleReIndex: () => {
@@ -341,12 +341,11 @@ const useCourseOutline = ({ courseId }) => {
     getUnitUrl,
     openUnitPage,
     handleNewUnitSubmit,
+    handleAddUnitFromLibrary,
     handleVideoSharingOptionChange,
-    handleCopyToClipboardClick,
     handlePasteClipboardClick,
     notificationDismissUrl,
     discussionsSettings,
-    discussionsIncontextFeedbackUrl,
     discussionsIncontextLearnmoreUrl,
     deprecatedBlocksInfo,
     proctoringErrors,

src/course-outline/outline-sidebar/OutlineSidebar.jsx

@@ -26,7 +26,6 @@ const OutlineSideBar = ({ courseId }) => {
 
   return (
     <HelpSidebar
-      intl={intl}
       courseId={courseId}
       showOtherSettings={false}
       className="outline-sidebar mt-4"

src/course-outline/page-alerts/PageAlerts.jsx

@@ -13,7 +13,7 @@ import {
 import {
   Alert, Button, Hyperlink, Truncate,
 } from '@openedx/paragon';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import ErrorAlert from '../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import { RequestStatus } from '../../data/constants';
@@ -24,13 +24,13 @@ import advancedSettingsMessages from '../../advanced-settings/messages';
 import { getPasteFileNotices } from '../data/selectors';
 import { dismissError, removePasteFileNotices } from '../data/slice';
 import { API_ERROR_TYPES } from '../constants';
+import { OutOfSyncAlert } from '../../course-libraries/OutOfSyncAlert';
 
 const PageAlerts = ({
   courseId,
   notificationDismissUrl,
   handleDismissNotification,
   discussionsSettings,
-  discussionsIncontextFeedbackUrl,
   discussionsIncontextLearnmoreUrl,
   deprecatedBlocksInfo,
   proctoringErrors,
@@ -48,6 +48,8 @@ const PageAlerts = ({
     localStorage.getItem(discussionAlertDismissKey) === null,
   );
   const { newFiles, conflictingFiles, errorFiles } = useSelector(getPasteFileNotices);
+  const [showOutOfSyncAlert, setShowOutOfSyncAlert] = useState(false);
+  const navigate = useNavigate();
 
   const getAssetsUrl = () => {
     if (getConfig().ENABLE_ASSETS_PAGE === 'true') {
@@ -111,13 +113,6 @@ const PageAlerts = ({
             platformName: process.env.SITE_NAME,
           })}
         </div>
-        <Hyperlink
-          showLaunchIcon={false}
-          destination={discussionsIncontextFeedbackUrl}
-          target="_blank"
-        >
-          {intl.formatMessage(messages.discussionNotificationFeedback)}
-        </Hyperlink>
       </Alert>
     );
   };
@@ -364,9 +359,9 @@ const PageAlerts = ({
         }
         case API_ERROR_TYPES.serverError: {
           const description = (
-            <Truncate lines={2}>
+            <Truncate.Deprecated lines={2}>
               {v.data || intl.formatMessage(messages.serverErrorAlertBody)}
-            </Truncate>
+            </Truncate.Deprecated>
           );
           return {
             key: k,
@@ -419,6 +414,15 @@ const PageAlerts = ({
     );
   };
 
+  const renderOutOfSyncAlert = () => (
+    <OutOfSyncAlert
+      courseId={courseId}
+      onReview={() => navigate(`/course/${courseId}/libraries?tab=review`)}
+      showAlert={showOutOfSyncAlert}
+      setShowAlert={setShowOutOfSyncAlert}
+    />
+  );
+
   return (
     <>
       {configurationErrors()}
@@ -432,6 +436,7 @@ const PageAlerts = ({
       {errorFilesPasteAlert()}
       {conflictingFilesPasteAlert()}
       {newFilesPasteAlert()}
+      {renderOutOfSyncAlert()}
     </>
   );
 };
@@ -440,7 +445,6 @@ PageAlerts.defaultProps = {
   notificationDismissUrl: '',
   handleDismissNotification: null,
   discussionsSettings: {},
-  discussionsIncontextFeedbackUrl: '',
   discussionsIncontextLearnmoreUrl: '',
   deprecatedBlocksInfo: {},
   proctoringErrors: [],
@@ -457,7 +461,6 @@ PageAlerts.propTypes = {
   discussionsSettings: PropTypes.shape({
     providerType: PropTypes.string,
   }),
-  discussionsIncontextFeedbackUrl: PropTypes.string,
   discussionsIncontextLearnmoreUrl: PropTypes.string,
   deprecatedBlocksInfo: PropTypes.shape({
     blocks: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),

src/course-outline/page-alerts/PageAlerts.test.jsx

@@ -5,7 +5,6 @@ import {
   render,
   fireEvent,
   screen,
-  waitFor,
 } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
@@ -28,6 +27,13 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
 
+jest.mock('../../course-libraries/data/apiHooks', () => ({
+  useEntityLinksSummaryByDownstreamContext: () => ({
+    data: [],
+    isLoading: false,
+  }),
+}));
+
 let store;
 const handleDismissNotification = jest.fn();
 
@@ -36,7 +42,6 @@ const pageAlertsData = {
   notificationDismissUrl: '',
   handleDismissNotification: null,
   discussionsSettings: {},
-  discussionsIncontextFeedbackUrl: '',
   discussionsIncontextLearnmoreUrl: '',
   deprecatedBlocksInfo: {},
   proctoringErrors: [],
@@ -70,9 +75,9 @@ describe('<PageAlerts />', () => {
     useSelector.mockReturnValue({});
   });
 
-  it('renders null when no alerts are present', () => {
+  it('renders null when no alerts are present', async () => {
     renderComponent();
-    expect(screen.queryByTestId('browser-router')).toBeEmptyDOMElement();
+    expect(await screen.findByTestId('browser-router')).toBeEmptyDOMElement();
   });
 
   it('renders configuration alerts', async () => {
@@ -95,7 +100,6 @@ describe('<PageAlerts />', () => {
       discussionsSettings: {
         providerType: 'openedx',
       },
-      discussionsIncontextFeedbackUrl: 'some-feedback-url',
       discussionsIncontextLearnmoreUrl: 'some-learn-more-url',
     });
 
@@ -108,12 +112,6 @@ describe('<PageAlerts />', () => {
     fireEvent.click(dismissBtn);
     const discussionAlertDismissKey = `discussionAlertDismissed-${pageAlertsData.courseId}`;
     expect(localStorage.getItem(discussionAlertDismissKey)).toBe('true');
-
-    await waitFor(() => {
-      const feedbackLink = screen.queryByText(messages.discussionNotificationFeedback.defaultMessage);
-      expect(feedbackLink).toBeInTheDocument();
-      expect(feedbackLink).toHaveAttribute('href', 'some-feedback-url');
-    });
   });
 
   it('renders deprecation warning alerts', async () => {

src/course-outline/section-card/SectionCard.jsx

@@ -13,8 +13,8 @@ import classNames from 'classnames';
 import { setCurrentItem, setCurrentSection } from '../data/slice';
 import { RequestStatus } from '../../data/constants';
 import CardHeader from '../card-header/CardHeader';
-import SortableItem from '../../generic/drag-helper/SortableItem';
-import { DragContext } from '../../generic/drag-helper/DragContextProvider';
+import SortableItem from '../drag-helper/SortableItem';
+import { DragContext } from '../drag-helper/DragContextProvider';
 import TitleButton from '../card-header/TitleButton';
 import XBlockStatus from '../xblock-status/XBlockStatus';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';

src/course-outline/section-card/SectionCard.scss

@@ -2,15 +2,15 @@
   flex-grow: 1;
 
   .section-card__subsections {
-    margin-top: $spacer;
+    margin-top: var(--pgn-spacing-spacer-base);
   }
 
   .section-card-title {
-    font-size: $h3-font-size;
-    font-family: $headings-font-family;
-    font-weight: $headings-font-weight;
-    line-height: $headings-line-height;
-    color: $headings-color;
+    font-size: var(--pgn-typography-font-size-h3-base);
+    font-family: var(--pgn-typography-headings-font-family);
+    font-weight: var(--pgn-typography-headings-font-weight);
+    line-height: var(--pgn-typography-headings-line-height);
+    color: var(--pgn-color-headings-base);
   }
 
   .section-card__content {

src/course-outline/subsection-card/SubsectionCard.jsx

@@ -1,30 +1,37 @@
 // @ts-check
 import React, {
-  useContext, useEffect, useState, useRef,
+  useContext, useEffect, useState, useRef, useCallback,
 } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, useToggle } from '@openedx/paragon';
+import { Button, StandardModal, useToggle } from '@openedx/paragon';
 import { Add as IconAdd } from '@openedx/paragon/icons';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 
+import CourseOutlineSubsectionCardExtraActionsSlot from '../../plugin-slots/CourseOutlineSubsectionCardExtraActionsSlot';
 import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data/slice';
 import { RequestStatus } from '../../data/constants';
 import CardHeader from '../card-header/CardHeader';
-import SortableItem from '../../generic/drag-helper/SortableItem';
-import { DragContext } from '../../generic/drag-helper/DragContextProvider';
-import { useCopyToClipboard, PasteComponent } from '../../generic/clipboard';
+import SortableItem from '../drag-helper/SortableItem';
+import { DragContext } from '../drag-helper/DragContextProvider';
+import { useClipboard, PasteComponent } from '../../generic/clipboard';
 import TitleButton from '../card-header/TitleButton';
 import XBlockStatus from '../xblock-status/XBlockStatus';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
 import messages from './messages';
+import { ComponentPicker } from '../../library-authoring';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
+import { ContainerType } from '../../generic/key-utils';
+import { ContentType } from '../../library-authoring/routes';
+import { getStudioHomeData } from '../../studio-home/data/selectors';
 
 const SubsectionCard = ({
   section,
   subsection,
+  isSectionsExpanded,
   isSelfPaced,
   isCustomRelativeDatesActive,
   children,
@@ -36,6 +43,7 @@ const SubsectionCard = ({
   onOpenDeleteModal,
   onDuplicateSubmit,
   onNewUnitSubmit,
+  onAddUnitFromLibrary,
   onOrderChange,
   onOpenConfigureModal,
   onPasteClick,
@@ -49,7 +57,18 @@ const SubsectionCard = ({
   const isScrolledToElement = locatorId === subsection.id;
   const [isFormOpen, openForm, closeForm] = useToggle(false);
   const namePrefix = 'subsection';
-  const { sharedClipboardData, showPasteUnit } = useCopyToClipboard();
+  const { sharedClipboardData, showPasteUnit } = useClipboard();
+  // WARNING: Do not use "useStudioHome" to get "librariesV2Enabled" flag below,
+  // as it has a useEffect that fetches course waffle flags whenever
+  // location.search is updated. Course search updates location.search when
+  // user types, which will then trigger the useEffect and reload the page.
+  // See https://github.com/openedx/frontend-app-authoring/pull/1938.
+  const { librariesV2Enabled } = useSelector(getStudioHomeData);
+  const [
+    isAddLibraryUnitModalOpen,
+    openAddLibraryUnitModal,
+    closeAddLibraryUnitModal,
+  ] = useToggle(false);
 
   const {
     id,
@@ -80,7 +99,7 @@ const SubsectionCard = ({
 
     return false;
   };
-  const [isExpanded, setIsExpanded] = useState(containsSearchResult() || !isHeaderVisible);
+  const [isExpanded, setIsExpanded] = useState(containsSearchResult() || !isHeaderVisible || isSectionsExpanded);
   const subsectionStatus = getItemStatus({
     published,
     visibilityState,
@@ -88,6 +107,10 @@ const SubsectionCard = ({
   });
   const borderStyle = getItemStatusBorder(subsectionStatus);
 
+  useEffect(() => {
+    setIsExpanded(isSectionsExpanded);
+  }, [isSectionsExpanded]);
+
   const handleExpandContent = () => {
     setIsExpanded((prevState) => !prevState);
   };
@@ -127,6 +150,13 @@ const SubsectionCard = ({
     />
   );
 
+  const extraActionsComponent = (
+    <CourseOutlineSubsectionCardExtraActionsSlot
+      subsection={subsection}
+      section={section}
+    />
+  );
+
   useEffect(() => {
     if (activeId === id && isExpanded) {
       setIsExpanded(false);
@@ -164,89 +194,129 @@ const SubsectionCard = ({
       && !(isHeaderVisible === false)
   );
 
+  const handleSelectLibraryUnit = useCallback((selectedUnit) => {
+    onAddUnitFromLibrary({
+      type: COMPONENT_TYPES.libraryV2,
+      category: ContainerType.Vertical,
+      parentLocator: id,
+      libraryContentKey: selectedUnit.usageKey,
+    });
+    closeAddLibraryUnitModal();
+  }, []);
+
   return (
-    <SortableItem
-      id={id}
-      category={category}
-      key={id}
-      isDraggable={isDraggable}
-      isDroppable={actions.childAddable}
-      componentStyle={{
-        background: '#f8f7f6',
-        ...borderStyle,
-      }}
-    >
-      <div
-        className={`subsection-card ${isScrolledToElement ? 'highlight' : ''}`}
-        data-testid="subsection-card"
-        ref={currentRef}
+    <>
+      <SortableItem
+        id={id}
+        category={category}
+        key={id}
+        isDraggable={isDraggable}
+        isDroppable={actions.childAddable}
+        componentStyle={{
+          background: '#f8f7f6',
+          ...borderStyle,
+        }}
       >
-        {isHeaderVisible && (
-          <>
-            <CardHeader
-              title={displayName}
-              status={subsectionStatus}
-              cardId={id}
-              hasChanges={hasChanges}
-              onClickMenuButton={handleClickMenuButton}
-              onClickPublish={onOpenPublishModal}
-              onClickEdit={openForm}
-              onClickDelete={onOpenDeleteModal}
-              onClickMoveUp={handleSubsectionMoveUp}
-              onClickMoveDown={handleSubsectionMoveDown}
-              onClickConfigure={onOpenConfigureModal}
-              isFormOpen={isFormOpen}
-              closeForm={closeForm}
-              onEditSubmit={handleEditSubmit}
-              isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
-              onClickDuplicate={onDuplicateSubmit}
-              titleComponent={titleComponent}
-              namePrefix={namePrefix}
-              actions={actions}
-              proctoringExamConfigurationLink={proctoringExamConfigurationLink}
-              isSequential
-            />
-            <div className="subsection-card__content item-children" data-testid="subsection-card__content">
-              <XBlockStatus
-                isSelfPaced={isSelfPaced}
-                isCustomRelativeDatesActive={isCustomRelativeDatesActive}
-                blockData={subsection}
+        <div
+          className={`subsection-card ${isScrolledToElement ? 'highlight' : ''}`}
+          data-testid="subsection-card"
+          ref={currentRef}
+        >
+          {isHeaderVisible && (
+            <>
+              <CardHeader
+                title={displayName}
+                status={subsectionStatus}
+                cardId={id}
+                hasChanges={hasChanges}
+                onClickMenuButton={handleClickMenuButton}
+                onClickPublish={onOpenPublishModal}
+                onClickEdit={openForm}
+                onClickDelete={onOpenDeleteModal}
+                onClickMoveUp={handleSubsectionMoveUp}
+                onClickMoveDown={handleSubsectionMoveDown}
+                onClickConfigure={onOpenConfigureModal}
+                isFormOpen={isFormOpen}
+                closeForm={closeForm}
+                onEditSubmit={handleEditSubmit}
+                isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
+                onClickDuplicate={onDuplicateSubmit}
+                titleComponent={titleComponent}
+                namePrefix={namePrefix}
+                actions={actions}
+                proctoringExamConfigurationLink={proctoringExamConfigurationLink}
+                isSequential
+                extraActionsComponent={extraActionsComponent}
               />
-            </div>
-          </>
-        )}
-        {isExpanded && (
-          <div
-            data-testid="subsection-card__units"
-            className={classNames('subsection-card__units', { 'item-children': isDraggable })}
-          >
-            {children}
-            {actions.childAddable && (
-              <>
-                <Button
-                  data-testid="new-unit-button"
-                  className="mt-4"
-                  variant="outline-primary"
-                  iconBefore={IconAdd}
-                  block
-                  onClick={handleNewButtonClick}
-                >
-                  {intl.formatMessage(messages.newUnitButton)}
-                </Button>
-                {enableCopyPasteUnits && showPasteUnit && (
-                  <PasteComponent
+              <div className="subsection-card__content item-children" data-testid="subsection-card__content">
+                <XBlockStatus
+                  isSelfPaced={isSelfPaced}
+                  isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+                  blockData={subsection}
+                />
+              </div>
+            </>
+          )}
+          {(isExpanded) && (
+            <div
+              data-testid="subsection-card__units"
+              className={classNames('subsection-card__units', { 'item-children': isDraggable })}
+            >
+              {children}
+              {actions.childAddable && (
+                <>
+                  <Button
+                    data-testid="new-unit-button"
                     className="mt-4"
-                    text={intl.formatMessage(messages.pasteButton)}
-                    clipboardData={sharedClipboardData}
-                    onClick={handlePasteButtonClick}
-                  />
-                )}
-              </>
-            )}
-          </div>
-        )}
-      </div>
-    </SortableItem>
+                    variant="outline-primary"
+                    iconBefore={IconAdd}
+                    block
+                    onClick={handleNewButtonClick}
+                  >
+                    {intl.formatMessage(messages.newUnitButton)}
+                  </Button>
+                  {enableCopyPasteUnits && showPasteUnit && sharedClipboardData && (
+                    <PasteComponent
+                      className="mt-4"
+                      text={intl.formatMessage(messages.pasteButton)}
+                      clipboardData={sharedClipboardData}
+                      onClick={handlePasteButtonClick}
+                    />
+                  )}
+                  {librariesV2Enabled && (
+                    <Button
+                      data-testid="use-unit-from-library"
+                      className="mt-4"
+                      variant="outline-primary"
+                      iconBefore={IconAdd}
+                      block
+                      onClick={openAddLibraryUnitModal}
+                    >
+                      {intl.formatMessage(messages.useUnitFromLibraryButton)}
+                    </Button>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </SortableItem>
+      <StandardModal
+        title={intl.formatMessage(messages.unitPickerModalTitle)}
+        isOpen={isAddLibraryUnitModalOpen}
+        onClose={closeAddLibraryUnitModal}
+        isOverflowVisible={false}
+        size="xl"
+      >
+        <ComponentPicker
+          showOnlyPublished
+          extraFilter={['block_type = "unit"']}
+          componentPickerMode="single"
+          onComponentSelected={handleSelectLibraryUnit}
+          visibleTabs={[ContentType.units]}
+        />
+      </StandardModal>
+    </>
   );
 };
 
@@ -289,6 +359,7 @@ SubsectionCard.propTypes = {
     }).isRequired,
   }).isRequired,
   children: PropTypes.node,
+  isSectionsExpanded: PropTypes.bool.isRequired,
   isSelfPaced: PropTypes.bool.isRequired,
   isCustomRelativeDatesActive: PropTypes.bool.isRequired,
   onOpenPublishModal: PropTypes.func.isRequired,
@@ -297,6 +368,7 @@ SubsectionCard.propTypes = {
   onOpenDeleteModal: PropTypes.func.isRequired,
   onDuplicateSubmit: PropTypes.func.isRequired,
   onNewUnitSubmit: PropTypes.func.isRequired,
+  onAddUnitFromLibrary: PropTypes.func.isRequired,
   index: PropTypes.number.isRequired,
   getPossibleMoves: PropTypes.func.isRequired,
   onOrderChange: PropTypes.func.isRequired,

src/course-outline/subsection-card/SubsectionCard.scss

@@ -2,15 +2,15 @@
   flex-grow: 1;
 
   .subsection-card__units {
-    margin-top: $spacer;
+    margin-top: var(--pgn-spacing-spacer-base);
   }
 
   .subsection-card-title {
-    font-size: $h4-font-size;
-    font-family: $headings-font-family;
-    font-weight: $headings-font-weight;
-    line-height: $headings-line-height;
-    color: $headings-color;
+    font-size: var(--pgn-typography-font-size-h4-base);
+    font-family: var(--pgn-typography-headings-font-family);
+    font-weight: var(--pgn-typography-headings-font-weight);
+    line-height: var(--pgn-typography-headings-line-height);
+    color: var(--pgn-color-headings-base);
   }
 
   .subsection-card__content {

src/course-outline/subsection-card/SubsectionCard.test.jsx

@@ -1,6 +1,6 @@
 import { MemoryRouter } from 'react-router-dom';
 import {
-  act, render, fireEvent, within,
+  act, render, fireEvent, within, screen,
 } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
@@ -10,9 +10,12 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import initializeStore from '../../store';
 import SubsectionCard from './SubsectionCard';
 import cardHeaderMessages from '../card-header/messages';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 
 let store;
 const mockPathname = '/foo-bar';
+const containerKey = 'lct:org:lib:unit:1';
+const handleOnAddUnitFromLibrary = jest.fn();
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -21,12 +24,30 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-const clipboardBroadcastChannelMock = {
-  postMessage: jest.fn(),
-  close: jest.fn(),
-};
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: () => ({
+    librariesV2Enabled: true,
+  }),
+}));
 
-global.BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+// 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 unit = {
   id: 'unit-1',
@@ -87,6 +108,7 @@ const renderComponent = (props, entry = '/') => render(
             onOpenHighlightsModal={jest.fn()}
             onOpenDeleteModal={jest.fn()}
             onNewUnitSubmit={jest.fn()}
+            onAddUnitFromLibrary={handleOnAddUnitFromLibrary}
             isCustomRelativeDatesActive={false}
             onEditClick={jest.fn()}
             savingStatus=""
@@ -254,4 +276,31 @@ describe('<SubsectionCard />', () => {
     expect(cardUnits).toBeNull();
     expect(newUnitButton).toBeNull();
   });
+
+  it('should add unit from library', async () => {
+    renderComponent();
+
+    const expandButton = await screen.findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandButton);
+
+    const useUnitFromLibraryButton = screen.getByRole('button', {
+      name: /use unit from library/i,
+    });
+    expect(useUnitFromLibraryButton).toBeInTheDocument();
+    fireEvent.click(useUnitFromLibraryButton);
+
+    expect(await screen.findByText('Select unit'));
+
+    // click dummy button to execute onComponentSelected prop.
+    const dummyBtn = await screen.findByRole('button', { name: 'Dummy button' });
+    fireEvent.click(dummyBtn);
+
+    expect(handleOnAddUnitFromLibrary).toHaveBeenCalled();
+    expect(handleOnAddUnitFromLibrary).toHaveBeenCalledWith({
+      type: COMPONENT_TYPES.libraryV2,
+      parentLocator: '123',
+      category: 'vertical',
+      libraryContentKey: containerKey,
+    });
+  });
 });