From 2402769d9d8316557d64cbb3f96030e657863923 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Tue, 28 Nov 2023 13:13:54 -0500
Subject: [PATCH 01/13] fix: sort of boolean columns (#705)

---
 src/files-and-videos/files-page/FilesPage.jsx |  18 +-
 .../files-page/data/thunks.js                 |   3 +
 src/files-and-videos/files-page/data/utils.js |   6 +-
 .../sort-and-filter-modal/utils.js            |  89 +------
 .../sort-and-filter-modal/utils.test.js       | 240 ------------------
 .../videos-page/VideosPage.jsx                |  19 +-
 .../videos-page/data/thunks.js                |   9 +
 .../videos-page/data/utils.js                 |   6 +
 8 files changed, 48 insertions(+), 342 deletions(-)

diff --git a/src/files-and-videos/files-page/FilesPage.jsx b/src/files-and-videos/files-page/FilesPage.jsx
index 1111dbc93a..8bbf0802f3 100644
--- a/src/files-and-videos/files-page/FilesPage.jsx
+++ b/src/files-and-videos/files-page/FilesPage.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { isEmpty } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
 import { CheckboxFilter, Container } from '@edx/paragon';
@@ -85,25 +84,26 @@ const FilesPage = ({
   const maxFileSize = 20 * 1048576;
 
   const activeColumn = {
-    id: 'usageLocations',
+    id: 'activeStatus',
     Header: 'Active',
-    accessor: (({ usageLocations }) => !isEmpty(usageLocations)),
+    accessor: 'activeStatus',
     Cell: ({ row }) => ActiveColumn({ row }),
     Filter: CheckboxFilter,
+    filter: 'exactTextCase',
     filterChoices: [
-      { name: intl.formatMessage(messages.activeCheckboxLabel), value: true },
-      { name: intl.formatMessage(messages.inactiveCheckboxLabel), value: false },
+      { name: intl.formatMessage(messages.activeCheckboxLabel), value: 'active' },
+      { name: intl.formatMessage(messages.inactiveCheckboxLabel), value: 'inactive' },
     ],
   };
   const accessColumn = {
-    id: 'locked',
+    id: 'lockStatus',
     Header: 'Access',
-    accessor: 'locked',
+    accessor: 'lockStatus',
     Cell: ({ row }) => AccessColumn({ row }),
     Filter: CheckboxFilter,
     filterChoices: [
-      { name: intl.formatMessage(messages.lockedCheckboxLabel), value: true },
-      { name: intl.formatMessage(messages.publicCheckboxLabel), value: false },
+      { name: intl.formatMessage(messages.lockedCheckboxLabel), value: 'locked' },
+      { name: intl.formatMessage(messages.publicCheckboxLabel), value: 'public' },
     ],
   };
   const thumbnailColumn = {
diff --git a/src/files-and-videos/files-page/data/thunks.js b/src/files-and-videos/files-page/data/thunks.js
index 27922f095e..5dd502a0dc 100644
--- a/src/files-and-videos/files-page/data/thunks.js
+++ b/src/files-and-videos/files-page/data/thunks.js
@@ -111,6 +111,7 @@ export function updateAssetLock({ assetId, courseId, locked }) {
         model: {
           id: assetId,
           locked,
+          lockStatus: locked,
         },
       }));
       dispatch(updateEditStatus({ editType: 'lock', status: RequestStatus.SUCCESSFUL }));
@@ -133,11 +134,13 @@ export function getUsagePaths({ asset, courseId }) {
     try {
       const { usageLocations } = await getAssetUsagePaths({ assetId: asset.id, courseId });
       const assetLocations = usageLocations[asset.id];
+      const activeStatus = assetLocations?.length > 0 ? 'active' : 'inactive';
       dispatch(updateModel({
         modelType: 'assets',
         model: {
           id: asset.id,
           usageLocations: assetLocations,
+          activeStatus,
         },
       }));
       dispatch(updateEditStatus({ editType: 'usageMetrics', status: RequestStatus.SUCCESSFUL }));
diff --git a/src/files-and-videos/files-page/data/utils.js b/src/files-and-videos/files-page/data/utils.js
index 2526b4ad42..676c140ecd 100644
--- a/src/files-and-videos/files-page/data/utils.js
+++ b/src/files-and-videos/files-page/data/utils.js
@@ -24,13 +24,17 @@ export const updateFileValues = (files) => {
       wrapperType = 'audio';
     }
 
-    const { dateAdded } = file;
+    const { dateAdded, locked, usageLocations } = file;
     const utcDateString = dateAdded.replace(/\bat\b/g, '');
     const utcDateTime = new Date(utcDateString).toString();
+    const lockStatus = locked ? 'locked' : 'public';
+    const activeStatus = usageLocations?.length > 0 ? 'active' : 'inactive';
 
     updatedFiles.push({
       ...file,
       wrapperType,
+      lockStatus,
+      activeStatus,
       dateAdded: utcDateTime,
     });
   });
diff --git a/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.js b/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.js
index 149aed54ce..7c07deeeea 100644
--- a/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.js
+++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.js
@@ -5,30 +5,8 @@ export const getFilterOptions = (columns) => {
   const filterableColumns = columns.filter(column => column?.filterChoices);
 
   filterableColumns.forEach(column => {
-    const { id, filterChoices } = column;
-    let updatedChoices = filterChoices;
-
-    switch (id) {
-    case 'locked':
-      updatedChoices = filterChoices.map(choice => (
-        { ...choice, value: choice.value ? 'locked' : 'public' }
-      ));
-      break;
-    case 'usageLocations':
-      updatedChoices = filterChoices.map(choice => (
-        { ...choice, value: choice.value ? 'active' : 'inactive' }
-      ));
-      break;
-    case 'transcripts':
-      updatedChoices = filterChoices.map(choice => (
-        { ...choice, value: choice.value ? 'transcribed' : 'notTranscribed' }
-      ));
-      break;
-    default:
-      break;
-    }
-
-    allOptions.push(...updatedChoices);
+    const { filterChoices } = column;
+    allOptions.push(...filterChoices);
   });
 
   return allOptions;
@@ -39,26 +17,11 @@ export const getCheckedFilters = (state) => {
   const allFilters = [];
   filters.forEach(filter => {
     const { id, value } = filter;
-    let updatedValues = value;
-
-    switch (id) {
-    case 'locked':
-      updatedValues = value.map(val => (val ? 'locked' : 'public'));
-      break;
-    case 'usageLocations':
-      updatedValues = value.map(val => (val ? 'active' : 'inactive'));
-      break;
-    case 'transcripts':
-      updatedValues = value.map(val => (val ? 'transcribed' : 'notTranscribed'));
-      break;
-    default:
-      break;
-    }
 
-    if (isArray(updatedValues)) {
-      allFilters.push(...updatedValues);
+    if (isArray(value)) {
+      allFilters.push(...value);
     } else {
-      allFilters.push([id, updatedValues]);
+      allFilters.push([id, value]);
     }
   });
 
@@ -77,47 +40,7 @@ export const processFilters = (filters, columns, setAllFilters) => {
 
   filterableColumns.forEach(({ id, filterChoices }) => {
     const filterValues = filterChoices.map(choice => choice.value);
-    let processedFilters = filters;
-
-    switch (id) {
-    case 'locked':
-      processedFilters = filters.map(match => {
-        if (match === 'locked') {
-          return true;
-        }
-        if (match === 'public') {
-          return false;
-        }
-        return match;
-      });
-      break;
-    case 'usageLocations':
-      processedFilters = filters.map(match => {
-        if (match === 'active') {
-          return true;
-        }
-        if (match === 'inactive') {
-          return false;
-        }
-        return match;
-      });
-      break;
-    case 'transcripts':
-      processedFilters = filters.map(match => {
-        if (match === 'transcribed') {
-          return true;
-        }
-        if (match === 'notTranscribed') {
-          return false;
-        }
-        return match;
-      });
-      break;
-    default:
-      break;
-    }
-
-    const matchingFilters = filterValues.filter(value => processedFilters.includes(value));
+    const matchingFilters = filterValues.filter(value => filters.includes(value));
 
     if (!isEmpty(matchingFilters)) {
       allFilters.push({ id, value: matchingFilters });
diff --git a/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.test.js b/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.test.js
index 55fdb3a245..824f2b66d6 100644
--- a/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.test.js
+++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.test.js
@@ -1,84 +1,6 @@
 import { getCheckedFilters, getFilterOptions, processFilters } from './utils';
 
 describe('getCheckboxFilters', () => {
-  describe('switch case locked', () => {
-    it('should equal array with string locked', () => {
-      const state = {
-        filters: [
-          { id: 'locked', value: [true] },
-        ],
-      };
-      const expected = ['locked'];
-      const actual = getCheckedFilters(state);
-
-      expect(actual).toEqual(expected);
-    });
-
-    it('value attribute should equal public', () => {
-      const state = {
-        filters: [
-          { id: 'locked', value: [false] },
-        ],
-      };
-      const expected = ['public'];
-      const actual = getCheckedFilters(state);
-
-      expect(actual).toEqual(expected);
-    });
-  });
-
-  describe('switch case usageLocations', () => {
-    it('value attribute should equal active', () => {
-      const state = {
-        filters: [
-          { id: 'usageLocations', value: [true] },
-        ],
-      };
-      const expected = ['active'];
-      const actual = getCheckedFilters(state);
-
-      expect(actual).toEqual(expected);
-    });
-
-    it('value attribute should equal inactive', () => {
-      const state = {
-        filters: [
-          { id: 'usageLocations', value: [false] },
-        ],
-      };
-      const expected = ['inactive'];
-      const actual = getCheckedFilters(state);
-
-      expect(actual).toEqual(expected);
-    });
-  });
-
-  describe('switch case transcripts', () => {
-    it('should equal array with string transcribed', () => {
-      const state = {
-        filters: [
-          { id: 'transcripts', value: [true] },
-        ],
-      };
-      const expected = ['transcribed'];
-      const actual = getCheckedFilters(state);
-
-      expect(actual).toEqual(expected);
-    });
-
-    it('should equal array with string notTranscribed', () => {
-      const state = {
-        filters: [
-          { id: 'transcripts', value: [false] },
-        ],
-      };
-      const expected = ['notTranscribed'];
-      const actual = getCheckedFilters(state);
-
-      expect(actual).toEqual(expected);
-    });
-  });
-
   describe('switch case default', () => {
     it('should equal array with string test', () => {
       const state = {
@@ -107,84 +29,6 @@ describe('getCheckboxFilters', () => {
 });
 
 describe('getFilterOptions', () => {
-  describe('switch case locked', () => {
-    it('value attribute should equal locked', () => {
-      const columns = [
-        { id: 'locked', filterChoices: [{ name: 'Locked', value: true }] },
-      ];
-      const expected = [
-        { name: 'Locked', value: 'locked' },
-      ];
-      const actual = getFilterOptions(columns);
-
-      expect(actual).toEqual(expected);
-    });
-
-    it('value attribute should equal public', () => {
-      const columns = [
-        { id: 'locked', filterChoices: [{ name: 'Public', value: false }] },
-      ];
-      const expected = [
-        { name: 'Public', value: 'public' },
-      ];
-      const actual = getFilterOptions(columns);
-
-      expect(actual).toEqual(expected);
-    });
-  });
-
-  describe('switch case usageLocation', () => {
-    it('value attribute should equal active', () => {
-      const columns = [
-        { id: 'usageLocations', filterChoices: [{ name: 'Active', value: true }] },
-      ];
-      const expected = [
-        { name: 'Active', value: 'active' },
-      ];
-      const actual = getFilterOptions(columns);
-
-      expect(actual).toEqual(expected);
-    });
-
-    it('value attribute should equal inactive', () => {
-      const columns = [
-        { id: 'usageLocations', filterChoices: [{ name: 'Inactive', value: false }] },
-      ];
-      const expected = [
-        { name: 'Inactive', value: 'inactive' },
-      ];
-      const actual = getFilterOptions(columns);
-
-      expect(actual).toEqual(expected);
-    });
-  });
-
-  describe('switch case transcripts', () => {
-    it('value attribute should equal transcribed', () => {
-      const columns = [
-        { id: 'transcripts', filterChoices: [{ name: 'Transcribed', value: true }] },
-      ];
-      const expected = [
-        { name: 'Transcribed', value: 'transcribed' },
-      ];
-      const actual = getFilterOptions(columns);
-
-      expect(actual).toEqual(expected);
-    });
-
-    it('value attribute should equal notTranscribed', () => {
-      const columns = [
-        { id: 'transcripts', filterChoices: [{ name: 'Not transcribed', value: false }] },
-      ];
-      const expected = [
-        { name: 'Not transcribed', value: 'notTranscribed' },
-      ];
-      const actual = getFilterOptions(columns);
-
-      expect(actual).toEqual(expected);
-    });
-  });
-
   describe('switch case default', () => {
     it('value attribute should equal test', () => {
       const columns = [
@@ -217,90 +61,6 @@ describe('processFilters', () => {
     expect(setAllFilters).toHaveBeenCalledWith(expectedParameter);
   });
 
-  describe('switch case locked', () => {
-    it('should call setAllFilters with locked filter', () => {
-      const filters = ['locked'];
-      const columns = [
-        { id: 'locked', filterChoices: [{ name: 'Locked', value: true }, { name: 'Public', value: false }] },
-      ];
-      const expectedParameter = [{ id: 'locked', value: [true] }];
-      processFilters(filters, columns, setAllFilters);
-
-      expect(setAllFilters).toHaveBeenCalledWith(expectedParameter);
-    });
-
-    it('should call setAllFilters with public filter', () => {
-      const filters = ['public', 'filter'];
-      const columns = [
-        { id: 'locked', filterChoices: [{ name: 'Public', value: false }] },
-        { id: 'test', filterChoices: [{ name: 'Filter', value: 'filter' }] },
-      ];
-      const expectedParameter = [
-        { id: 'locked', value: [false] },
-        { id: 'test', value: ['filter'] },
-      ];
-      processFilters(filters, columns, setAllFilters);
-
-      expect(setAllFilters).toHaveBeenCalledWith(expectedParameter);
-    });
-  });
-
-  describe('switch case usageLocations', () => {
-    it('should call setAllFilters with active filter', () => {
-      const filters = ['active'];
-      const columns = [
-        { id: 'usageLocations', filterChoices: [{ name: 'Active', value: true }] },
-      ];
-      const expectedParameter = [{ id: 'usageLocations', value: [true] }];
-      processFilters(filters, columns, setAllFilters);
-
-      expect(setAllFilters).toHaveBeenCalledWith(expectedParameter);
-    });
-
-    it('should call setAllFilters with inactive filter', () => {
-      const filters = ['inactive', 'filter'];
-      const columns = [
-        { id: 'usageLocations', filterChoices: [{ name: 'Inactive', value: false }] },
-        { id: 'test', filterChoices: [{ name: 'Filter', value: 'filter' }] },
-      ];
-      const expectedParameter = [
-        { id: 'usageLocations', value: [false] },
-        { id: 'test', value: ['filter'] },
-      ];
-      processFilters(filters, columns, setAllFilters);
-
-      expect(setAllFilters).toHaveBeenCalledWith(expectedParameter);
-    });
-  });
-
-  describe('switch case transcripts', () => {
-    it('should call setAllFilters with transcribed filter', () => {
-      const filters = ['transcribed', 'filter'];
-      const columns = [
-        { id: 'transcripts', filterChoices: [{ name: 'Transcribed', value: true }] },
-        { id: 'test', filterChoices: [{ name: 'Filter', value: 'filter' }] },
-      ];
-      const expectedParameter = [
-        { id: 'transcripts', value: [true] },
-        { id: 'test', value: ['filter'] },
-      ];
-      processFilters(filters, columns, setAllFilters);
-
-      expect(setAllFilters).toHaveBeenCalledWith(expectedParameter);
-    });
-
-    it('should call setAllFilters with notTranscribed filter', () => {
-      const filters = ['notTranscribed'];
-      const columns = [
-        { id: 'transcripts', filterChoices: [{ name: 'Not transcribed', value: false }] },
-      ];
-      const expectedParameter = [{ id: 'transcripts', value: [false] }];
-      processFilters(filters, columns, setAllFilters);
-
-      expect(setAllFilters).toHaveBeenCalledWith(expectedParameter);
-    });
-  });
-
   describe('switch case default', () => {
     it('should call setAllFilters with test filter', () => {
       const filters = ['filter'];
diff --git a/src/files-and-videos/videos-page/VideosPage.jsx b/src/files-and-videos/videos-page/VideosPage.jsx
index 984bf9818a..79ebe6ce96 100644
--- a/src/files-and-videos/videos-page/VideosPage.jsx
+++ b/src/files-and-videos/videos-page/VideosPage.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { isEmpty } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   injectIntl,
@@ -111,29 +110,31 @@ const VideosPage = ({
   const infoModalSidebar = (video) => VideoInfoModalSidebar({ video });
   const maxFileSize = videoUploadMaxFileSize * 1073741824;
   const transcriptColumn = {
-    id: 'transcripts',
+    id: 'transcriptStatus',
     Header: 'Transcript',
-    accessor: (({ transcripts }) => !isEmpty(transcripts)),
+    accessor: 'transcriptStatus',
     Cell: ({ row }) => {
       const { transcripts } = row.original;
       const numOfTranscripts = transcripts?.length;
       return numOfTranscripts > 0 ? `(${numOfTranscripts}) available` : null;
     },
     Filter: CheckboxFilter,
+    filter: 'exactTextCase',
     filterChoices: [
-      { name: intl.formatMessage(messages.transcribedCheckboxLabel), value: true },
-      { name: intl.formatMessage(messages.notTranscribedCheckboxLabel), value: false },
+      { name: intl.formatMessage(messages.transcribedCheckboxLabel), value: 'transcribed' },
+      { name: intl.formatMessage(messages.notTranscribedCheckboxLabel), value: 'notTranscribed' },
     ],
   };
   const activeColumn = {
-    id: 'usageLocations',
+    id: 'activeStatus',
     Header: 'Active',
-    accessor: (({ usageLocations }) => !isEmpty(usageLocations)),
+    accessor: 'activeStatus',
     Cell: ({ row }) => ActiveColumn({ row }),
     Filter: CheckboxFilter,
+    filter: 'exactTextCase',
     filterChoices: [
-      { name: intl.formatMessage(messages.activeCheckboxLabel), value: true },
-      { name: intl.formatMessage(messages.inactiveCheckboxLabel), value: false },
+      { name: intl.formatMessage(messages.activeCheckboxLabel), value: 'active' },
+      { name: intl.formatMessage(messages.inactiveCheckboxLabel), value: 'inactive' },
     ],
   };
   const durationColumn = {
diff --git a/src/files-and-videos/videos-page/data/thunks.js b/src/files-and-videos/videos-page/data/thunks.js
index 42547a4719..72719bc1ec 100644
--- a/src/files-and-videos/videos-page/data/thunks.js
+++ b/src/files-and-videos/videos-page/data/thunks.js
@@ -176,11 +176,14 @@ export function deleteVideoTranscript({
         apiUrl,
       });
       const updatedTranscripts = transcripts.filter(transcript => transcript !== language);
+      const transcriptStatus = updatedTranscripts?.length > 0 ? 'transcribed' : 'notTranscribed';
+
       dispatch(updateModel({
         modelType: 'videos',
         model: {
           id: videoId,
           transcripts: updatedTranscripts,
+          transcriptStatus,
         },
       }));
 
@@ -244,11 +247,14 @@ export function uploadVideoTranscript({
         updatedTranscripts = [...transcripts, newLanguage];
       }
 
+      const transcriptStatus = updatedTranscripts?.length > 0 ? 'transcribed' : 'notTranscribed';
+
       dispatch(updateModel({
         modelType: 'videos',
         model: {
           id: videoId,
           transcripts: updatedTranscripts,
+          transcriptStatus,
         },
       }));
 
@@ -272,11 +278,14 @@ export function getUsagePaths({ video, courseId }) {
 
     try {
       const { usageLocations } = await getVideoUsagePaths({ videoId: video.id, courseId });
+      const activeStatus = usageLocations?.length > 0 ? 'active' : 'inactive';
+
       dispatch(updateModel({
         modelType: 'videos',
         model: {
           id: video.id,
           usageLocations,
+          activeStatus,
         },
       }));
       dispatch(updateEditStatus({ editType: 'usageMetrics', status: RequestStatus.SUCCESSFUL }));
diff --git a/src/files-and-videos/videos-page/data/utils.js b/src/files-and-videos/videos-page/data/utils.js
index a5c4963e40..1843c46e93 100644
--- a/src/files-and-videos/videos-page/data/utils.js
+++ b/src/files-and-videos/videos-page/data/utils.js
@@ -22,6 +22,8 @@ export const updateFileValues = (files) => {
       created,
       courseVideoImageUrl,
       status,
+      transcripts,
+      usageLocations,
     } = file;
     const wrapperType = 'video';
 
@@ -29,6 +31,8 @@ export const updateFileValues = (files) => {
     if (thumbnail && thumbnail.startsWith('/')) {
       thumbnail = `${getConfig().STUDIO_BASE_URL}${thumbnail}`;
     }
+    const transcriptStatus = transcripts?.length > 0 ? 'transcribed' : 'notTranscribed';
+    const activeStatus = usageLocations?.length > 0 ? 'active' : 'inactive';
 
     let uploadStatus = status;
     if (status === 'Ready' || status === 'Imported') {
@@ -45,6 +49,8 @@ export const updateFileValues = (files) => {
       dateAdded: created.toString(),
       status: uploadStatus,
       thumbnail,
+      transcriptStatus,
+      activeStatus,
     });
   });
 

From a2dceac62fc13623434ff5324392608d470bc13b Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Tue, 28 Nov 2023 16:55:00 -0500
Subject: [PATCH 02/13] feat: add notification of transcription error (#715)

---
 src/files-and-videos/generic/InfoModal.jsx    | 124 +++++++++++-------
 src/files-and-videos/generic/index.js         |   2 +
 src/files-and-videos/generic/messages.js      |   4 +
 .../generic/table-components/index.js         |   2 +
 .../table-custom-columns/TranscriptColumn.jsx |  37 ++++++
 .../table-custom-columns/index.js             |   2 +
 .../videos-page/VideosPage.jsx                |  11 +-
 .../videos-page/VideosPage.test.jsx           | 119 ++++++++++-------
 .../videos-page/data/constants.js             |   3 +
 .../videos-page/data/utils.js                 |   6 +-
 .../factories/mockApiResponses.jsx            |   3 +
 .../info-sidebar/VideoInfoModalSidebar.jsx    |  17 ++-
 .../videos-page/info-sidebar/messages.js      |   5 +
 13 files changed, 229 insertions(+), 106 deletions(-)
 create mode 100644 src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx

diff --git a/src/files-and-videos/generic/InfoModal.jsx b/src/files-and-videos/generic/InfoModal.jsx
index 8f81149c4c..6b9c5ee5c8 100644
--- a/src/files-and-videos/generic/InfoModal.jsx
+++ b/src/files-and-videos/generic/InfoModal.jsx
@@ -1,19 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
   injectIntl,
+  intlShape,
   FormattedMessage,
 } from '@edx/frontend-platform/i18n';
 import {
+  Icon,
   ModalDialog,
   Stack,
   Truncate,
 } from '@edx/paragon';
+import { Error } from '@edx/paragon/icons';
 
 import messages from './messages';
 import UsageMetricsMessages from './UsageMetricsMessage';
 import FileThumbnail from './ThumbnailPreview';
+import { TRANSCRIPT_FAILURE_STATUSES } from '../videos-page/data/constants';
+import AlertMessage from '../../generic/alert-message';
 
 const InfoModal = ({
   file,
@@ -23,55 +28,74 @@ const InfoModal = ({
   usagePathStatus,
   error,
   sidebar,
-}) => (
-  <ModalDialog
-    title={file?.displayName}
-    isOpen={isOpen}
-    onClose={onClose}
-    size="lg"
-    hasCloseButton
-    data-testid="file-info-modal"
-    style={{ minHeight: '799px' }}
-  >
-    <ModalDialog.Header>
-      <ModalDialog.Title>
-        <div style={{ wordBreak: 'break-word' }}>
-          <Truncate lines={2} className="font-weight-bold small mt-3">
-            {file?.displayName}
-          </Truncate>
-        </div>
-      </ModalDialog.Title>
-    </ModalDialog.Header>
-    <ModalDialog.Body className="pt-0 x-small">
-      <hr />
-      <div className="row flex-nowrap m-0 mt-4">
-        <div className="col-7 mr-3">
-          <Stack gap={5}>
-            <FileThumbnail
-              thumbnail={file?.thumbnail}
-              externalUrl={file?.externalUrl}
-              displayName={file?.displayName}
-              wrapperType={file?.wrapperType}
-              id={file?.id}
-              status={file?.status}
-              thumbnailPreview={thumbnailPreview}
-              imageSize={{ width: '503px', height: '281px' }}
-            />
-            <div>
-              <div className="row m-0 font-weight-bold">
-                <FormattedMessage {...messages.usageTitle} />
+  // injected
+  intl,
+}) => {
+  const [activeTab, setActiveTab] = useState('fileInfo');
+  const showTranscriptionError = TRANSCRIPT_FAILURE_STATUSES.includes(file?.transcriptionStatus)
+    && activeTab !== 'fileInfo';
+
+  return (
+    <ModalDialog
+      title={file?.displayName}
+      isOpen={isOpen}
+      onClose={onClose}
+      size="lg"
+      hasCloseButton
+      data-testid="file-info-modal"
+      style={{ minHeight: '799px' }}
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          <div style={{ wordBreak: 'break-word' }}>
+            <Truncate lines={2} className="font-weight-bold small mt-3">
+              {file?.displayName}
+            </Truncate>
+          </div>
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body className="pt-0 x-small">
+        <hr />
+        {showTranscriptionError && (
+          <AlertMessage
+            description={(
+              <div className="row m-0 align-itmes-center">
+                <Icon src={Error} className="text-danger-500 mr-2" />
+                {intl.formatMessage(messages.transcriptionErrorMessage, { error: file.errorDescription })}
               </div>
-              <UsageMetricsMessages {...{ usageLocations: file?.usageLocations, usagePathStatus, error }} />
-            </div>
-          </Stack>
-        </div>
-        <div className="col-5">
-          {sidebar(file)}
+            )}
+            variant="danger"
+          />
+        )}
+        <div className="row flex-nowrap m-0 mt-4">
+          <div className="col-7 mr-3">
+            <Stack gap={5}>
+              <FileThumbnail
+                thumbnail={file?.thumbnail}
+                externalUrl={file?.externalUrl}
+                displayName={file?.displayName}
+                wrapperType={file?.wrapperType}
+                id={file?.id}
+                status={file?.status}
+                thumbnailPreview={thumbnailPreview}
+                imageSize={{ width: '503px', height: '281px' }}
+              />
+              <div>
+                <div className="row m-0 font-weight-bold">
+                  <FormattedMessage {...messages.usageTitle} />
+                </div>
+                <UsageMetricsMessages {...{ usageLocations: file?.usageLocations, usagePathStatus, error }} />
+              </div>
+            </Stack>
+          </div>
+          <div className="col-5">
+            {sidebar(file, activeTab, setActiveTab)}
+          </div>
         </div>
-      </div>
-    </ModalDialog.Body>
-  </ModalDialog>
-);
+      </ModalDialog.Body>
+    </ModalDialog>
+  );
+};
 
 InfoModal.propTypes = {
   file: PropTypes.shape({
@@ -86,6 +110,8 @@ InfoModal.propTypes = {
     fileSize: PropTypes.number.isRequired,
     usageLocations: PropTypes.arrayOf(PropTypes.string),
     status: PropTypes.string,
+    transcriptionStatus: PropTypes.string,
+    errorDescription: PropTypes.string,
   }),
   onClose: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
@@ -93,6 +119,8 @@ InfoModal.propTypes = {
   error: PropTypes.arrayOf(PropTypes.string).isRequired,
   thumbnailPreview: PropTypes.func.isRequired,
   sidebar: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
 };
 
 InfoModal.defaultProps = {
diff --git a/src/files-and-videos/generic/index.js b/src/files-and-videos/generic/index.js
index 0449cc8705..a9dc9d93ec 100644
--- a/src/files-and-videos/generic/index.js
+++ b/src/files-and-videos/generic/index.js
@@ -6,6 +6,7 @@ import {
   MoreInfoColumn,
   StatusColumn,
   ThumbnailColumn,
+  TranscriptColumn,
 } from './table-components';
 import FileInput, { useFileInput } from './FileInput';
 
@@ -19,6 +20,7 @@ export {
   ThumbnailColumn,
   FileInput,
   useFileInput,
+  TranscriptColumn,
 };
 export { default as FileTable } from './FileTable';
 export { default as EditFileErrors } from './EditFileErrors';
diff --git a/src/files-and-videos/generic/messages.js b/src/files-and-videos/generic/messages.js
index 757e871f21..ba62f2b2d7 100644
--- a/src/files-and-videos/generic/messages.js
+++ b/src/files-and-videos/generic/messages.js
@@ -37,6 +37,10 @@ const messages = defineMessages({
     id: 'course-authoring.files-and-upload.errorAlert.message',
     defaultMessage: '{message}',
   },
+  transcriptionErrorMessage: {
+    id: 'course-authoring.files-and-uploads.file-info.transcripts.error.alert',
+    defaultMessage: 'Transcript failed: "{error}"',
+  },
   usageTitle: {
     id: 'course-authoring.files-and-uploads.file-info.usage.title',
     defaultMessage: 'Usage',
diff --git a/src/files-and-videos/generic/table-components/index.js b/src/files-and-videos/generic/table-components/index.js
index 4d8a1eacee..d82173b263 100644
--- a/src/files-and-videos/generic/table-components/index.js
+++ b/src/files-and-videos/generic/table-components/index.js
@@ -9,6 +9,7 @@ import {
   MoreInfoColumn,
   StatusColumn,
   ThumbnailColumn,
+  TranscriptColumn,
 } from './table-custom-columns';
 
 export {
@@ -22,4 +23,5 @@ export {
   MoreInfoColumn,
   StatusColumn,
   ThumbnailColumn,
+  TranscriptColumn,
 };
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx
new file mode 100644
index 0000000000..0f445c5c3e
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { Info } from '@edx/paragon/icons';
+import { TRANSCRIPT_FAILURE_STATUSES } from '../../../videos-page/data/constants';
+
+const TranscriptColumn = ({ row }) => {
+  const { transcripts, transcriptionStatus } = row.original;
+  const numOfTranscripts = transcripts?.length;
+  const transcriptMessage = numOfTranscripts > 0 ? `(${numOfTranscripts}) available` : null;
+
+  return (
+    <div className="row m-0 align-items-center">
+      {TRANSCRIPT_FAILURE_STATUSES.includes(transcriptionStatus) && (
+        <Icon src={Info} size="sm" className="mr-2 text-danger-500" />
+      )}
+      <FormattedMessage
+        id="course-authoring.videos-page.table.transcriptColumn.message"
+        description="Message with the number of transcripts available"
+        defaultMessage="{message}"
+        values={{ message: transcriptMessage }}
+      />
+    </div>
+  );
+};
+
+TranscriptColumn.propTypes = {
+  row: {
+    original: {
+      transcript: PropTypes.arrayOf([PropTypes.string]).isRequired,
+      transcriptionStatus: PropTypes.string.isRequired,
+    }.isRequired,
+  }.isRequired,
+};
+
+export default injectIntl(TranscriptColumn);
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/index.js b/src/files-and-videos/generic/table-components/table-custom-columns/index.js
index 78284945fc..5c33cab8e6 100644
--- a/src/files-and-videos/generic/table-components/table-custom-columns/index.js
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/index.js
@@ -3,6 +3,7 @@ import ActiveColumn from './ActiveColumn';
 import MoreInfoColumn from './MoreInfoColumn';
 import StatusColumn from './StatusColumn';
 import ThumbnailColumn from './ThumbnailColumn';
+import TranscriptColumn from './TranscriptColumn';
 
 export {
   AccessColumn,
@@ -10,4 +11,5 @@ export {
   MoreInfoColumn,
   StatusColumn,
   ThumbnailColumn,
+  TranscriptColumn,
 };
diff --git a/src/files-and-videos/videos-page/VideosPage.jsx b/src/files-and-videos/videos-page/VideosPage.jsx
index 79ebe6ce96..d2c3b6241c 100644
--- a/src/files-and-videos/videos-page/VideosPage.jsx
+++ b/src/files-and-videos/videos-page/VideosPage.jsx
@@ -36,6 +36,7 @@ import {
   FileTable,
   StatusColumn,
   ThumbnailColumn,
+  TranscriptColumn,
 } from '../generic';
 import TranscriptSettings from './transcript-settings';
 import VideoThumbnail from './VideoThumbnail';
@@ -107,17 +108,15 @@ const VideosPage = ({
     fileType: 'video',
   };
   const thumbnailPreview = (props) => VideoThumbnail({ ...props, handleAddThumbnail, videoImageSettings });
-  const infoModalSidebar = (video) => VideoInfoModalSidebar({ video });
+  const infoModalSidebar = (video, activeTab, setActiveTab) => (
+    VideoInfoModalSidebar({ video, activeTab, setActiveTab })
+  );
   const maxFileSize = videoUploadMaxFileSize * 1073741824;
   const transcriptColumn = {
     id: 'transcriptStatus',
     Header: 'Transcript',
     accessor: 'transcriptStatus',
-    Cell: ({ row }) => {
-      const { transcripts } = row.original;
-      const numOfTranscripts = transcripts?.length;
-      return numOfTranscripts > 0 ? `(${numOfTranscripts}) available` : null;
-    },
+    Cell: ({ row }) => TranscriptColumn({ row }),
     Filter: CheckboxFilter,
     filter: 'exactTextCase',
     filterChoices: [
diff --git a/src/files-and-videos/videos-page/VideosPage.test.jsx b/src/files-and-videos/videos-page/VideosPage.test.jsx
index 1a4e889ce6..b645c0275a 100644
--- a/src/files-and-videos/videos-page/VideosPage.test.jsx
+++ b/src/files-and-videos/videos-page/VideosPage.test.jsx
@@ -430,73 +430,94 @@ describe('FilesAndUploads', () => {
     });
 
     describe('card menu actions', () => {
-      it('should open video info', async () => {
-        renderComponent();
-        await mockStore(RequestStatus.SUCCESSFUL);
-        expect(screen.getByTestId('grid-card-mOckID1')).toBeVisible();
+      describe('Info', () => {
+        it('should open video info', async () => {
+          renderComponent();
+          await mockStore(RequestStatus.SUCCESSFUL);
+          expect(screen.getByTestId('grid-card-mOckID1')).toBeVisible();
 
-        const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
-        expect(videoMenuButton).toBeVisible();
+          const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
+          expect(videoMenuButton).toBeVisible();
 
-        axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`)
-          .reply(201, { usageLocations: ['subsection - unit / block'] });
-        await waitFor(() => {
-          fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
-          fireEvent.click(screen.getByText('Info'));
-        });
+          axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`)
+            .reply(201, { usageLocations: ['subsection - unit / block'] });
+          await waitFor(() => {
+            fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+            fireEvent.click(screen.getByText('Info'));
+          });
 
-        expect(screen.getByText(messages.infoTitle.defaultMessage)).toBeVisible();
+          expect(screen.getByText(messages.infoTitle.defaultMessage)).toBeVisible();
 
-        const { usageStatus } = store.getState().videos;
+          const { usageStatus } = store.getState().videos;
 
-        expect(usageStatus).toEqual(RequestStatus.SUCCESSFUL);
+          expect(usageStatus).toEqual(RequestStatus.SUCCESSFUL);
 
-        expect(screen.getByText('subsection - unit / block')).toBeVisible();
-      });
+          expect(screen.getByText('subsection - unit / block')).toBeVisible();
+        });
 
-      it('should open video info modal and show info tab', async () => {
-        renderComponent();
-        await mockStore(RequestStatus.SUCCESSFUL);
-        expect(screen.getByTestId('grid-card-mOckID1')).toBeVisible();
-        const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
-        expect(videoMenuButton).toBeVisible();
+        it('should open video info modal and show info tab', async () => {
+          renderComponent();
+          await mockStore(RequestStatus.SUCCESSFUL);
+          expect(screen.getByTestId('grid-card-mOckID1')).toBeVisible();
+          const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
+          expect(videoMenuButton).toBeVisible();
 
-        axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`).reply(201, { usageLocations: [] });
-        await waitFor(() => {
-          fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
-          fireEvent.click(screen.getByText('Info'));
+          axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`).reply(201, { usageLocations: [] });
+          await waitFor(() => {
+            fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+            fireEvent.click(screen.getByText('Info'));
+          });
+
+          expect(screen.getByText(messages.usageNotInUseMessage.defaultMessage)).toBeVisible();
+
+          const infoTab = screen.getAllByRole('tab')[0];
+          expect(infoTab).toBeVisible();
+
+          expect(infoTab).toHaveClass('active');
         });
 
-        expect(screen.getByText(messages.usageNotInUseMessage.defaultMessage)).toBeVisible();
+        it('should open video info modal and show transcript tab', async () => {
+          renderComponent();
+          await mockStore(RequestStatus.SUCCESSFUL);
+          expect(screen.getByTestId('grid-card-mOckID1')).toBeVisible();
+          const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
+          expect(videoMenuButton).toBeVisible();
 
-        const infoTab = screen.getAllByRole('tab')[0];
-        expect(infoTab).toBeVisible();
+          axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`).reply(201, { usageLocations: [] });
+          await waitFor(() => {
+            fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+            fireEvent.click(screen.getByText('Info'));
+          });
 
-        expect(infoTab).toHaveClass('active');
-      });
+          expect(screen.getByText(messages.usageNotInUseMessage.defaultMessage)).toBeVisible();
 
-      it('should open video info modal and show transcript tab', async () => {
-        renderComponent();
-        await mockStore(RequestStatus.SUCCESSFUL);
-        expect(screen.getByTestId('grid-card-mOckID1')).toBeVisible();
-        const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
-        expect(videoMenuButton).toBeVisible();
+          const transcriptTab = screen.getAllByRole('tab')[1];
+          await act(async () => {
+            fireEvent.click(transcriptTab);
+          });
+          expect(transcriptTab).toBeVisible();
 
-        axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`).reply(201, { usageLocations: [] });
-        await waitFor(() => {
-          fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
-          fireEvent.click(screen.getByText('Info'));
+          expect(transcriptTab).toHaveClass('active');
         });
 
-        expect(screen.getByText(messages.usageNotInUseMessage.defaultMessage)).toBeVisible();
+        it('should show transcript error', async () => {
+          renderComponent();
+          await mockStore(RequestStatus.SUCCESSFUL);
+          const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID3');
 
-        const transcriptTab = screen.getAllByRole('tab')[1];
-        await act(async () => {
-          fireEvent.click(transcriptTab);
-        });
-        expect(transcriptTab).toBeVisible();
+          axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID3/usage`).reply(201, { usageLocations: [] });
+          await waitFor(() => {
+            fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+            fireEvent.click(screen.getByText('Info'));
+          });
 
-        expect(transcriptTab).toHaveClass('active');
+          const transcriptTab = screen.getAllByRole('tab')[1];
+          await act(async () => {
+            fireEvent.click(transcriptTab);
+          });
+
+          expect(screen.getByText('Transcript (1)')).toBeVisible();
+        });
       });
 
       it('download button should download file', async () => {
diff --git a/src/files-and-videos/videos-page/data/constants.js b/src/files-and-videos/videos-page/data/constants.js
index b534e7eb73..ab666b37aa 100644
--- a/src/files-and-videos/videos-page/data/constants.js
+++ b/src/files-and-videos/videos-page/data/constants.js
@@ -6,3 +6,6 @@ export const MIN_WIDTH = 640;
 export const MIN_HEIGHT = 360;
 export const ASPECT_RATIO = 16 / 9;
 export const ASPECT_RATIO_ERROR_MARGIN = 0.1;
+export const TRANSCRIPT_FAILURE_STATUSES = ['Transcript Failed', 'Partial Failure'];
+export const VIDEO_PROCESSING_STATUSES = ['Uploading', 'In Progress', 'Uploaded'];
+export const VIDEO_SUCCESS_STATUSES = ['Ready', 'Imported'];
diff --git a/src/files-and-videos/videos-page/data/utils.js b/src/files-and-videos/videos-page/data/utils.js
index 1843c46e93..4d9408607b 100644
--- a/src/files-and-videos/videos-page/data/utils.js
+++ b/src/files-and-videos/videos-page/data/utils.js
@@ -7,6 +7,8 @@ import {
   MAX_WIDTH,
   MIN_HEIGHT,
   MIN_WIDTH,
+  VIDEO_PROCESSING_STATUSES,
+  VIDEO_SUCCESS_STATUSES,
 } from './constants';
 
 ensureConfig([
@@ -35,9 +37,9 @@ export const updateFileValues = (files) => {
     const activeStatus = usageLocations?.length > 0 ? 'active' : 'inactive';
 
     let uploadStatus = status;
-    if (status === 'Ready' || status === 'Imported') {
+    if (VIDEO_SUCCESS_STATUSES.includes(status)) {
       uploadStatus = 'Success';
-    } else if (status === 'In Progress' || status === 'Uploaded') {
+    } else if (VIDEO_PROCESSING_STATUSES.includes(status)) {
       uploadStatus = 'Processing';
     }
 
diff --git a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx
index fc0610319d..3aa621e9d9 100644
--- a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx
+++ b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx
@@ -120,6 +120,7 @@ export const generateFetchVideosApiResponse = () => ({
       status: 'Imported',
       duration: 12333,
       downloadLink: 'http://mOckID1.mp4',
+      fileSize: 213456354,
     },
     {
       edx_video_id: 'mOckID5',
@@ -140,6 +141,8 @@ export const generateFetchVideosApiResponse = () => ({
       status: 'Ready',
       duration: null,
       downloadLink: '',
+      transcription_status: 'Transcript Failed',
+      error_description: 'Unable to process transcript request',
     },
   ],
   concurrent_upload_limit: 4,
diff --git a/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx b/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx
index 2c240fb006..dc3f9fa551 100644
--- a/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx
@@ -8,13 +8,20 @@ import {
 import InfoTab from './InfoTab';
 import TranscriptTab from './TranscriptTab';
 import messages from './messages';
+import { TRANSCRIPT_FAILURE_STATUSES } from '../data/constants';
 
 const VideoInfoModalSidebar = ({
   video,
+  activeTab,
+  setActiveTab,
   // injected
   intl,
 }) => (
-  <Tabs>
+  <Tabs
+    id="controlled-info-sidebar-tab"
+    activeKey={activeTab}
+    onSelect={(tab) => setActiveTab(tab)}
+  >
     <Tab eventKey="fileInfo" title={intl.formatMessage(messages.infoTabTitle)}>
       <InfoTab {...{ video }} />
     </Tab>
@@ -24,6 +31,11 @@ const VideoInfoModalSidebar = ({
         messages.transcriptTabTitle,
         { transcriptCount: video.transcripts.length },
       )}
+      notification={TRANSCRIPT_FAILURE_STATUSES.includes(video.transcriptionStatus) && (
+        <span>
+          <span className="sr-only">{intl.formatMessage(messages.notificationScreenReaderText)}</span>
+        </span>
+      )}
     >
       <TranscriptTab {...{ video }} />
     </Tab>
@@ -38,7 +50,10 @@ VideoInfoModalSidebar.propTypes = {
     dateAdded: PropTypes.string.isRequired,
     fileSize: PropTypes.number.isRequired,
     transcripts: PropTypes.arrayOf(PropTypes.string),
+    transcriptionStatus: PropTypes.string.isRequired,
   }),
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
   // injected
   intl: intlShape.isRequired,
 };
diff --git a/src/files-and-videos/videos-page/info-sidebar/messages.js b/src/files-and-videos/videos-page/info-sidebar/messages.js
index 3beb245c61..a1823e4667 100644
--- a/src/files-and-videos/videos-page/info-sidebar/messages.js
+++ b/src/files-and-videos/videos-page/info-sidebar/messages.js
@@ -11,6 +11,11 @@ const messages = defineMessages({
     defaultMessage: 'Transcript ({transcriptCount})',
     description: 'Title for info tab',
   },
+  notificationScreenReaderText: {
+    id: 'course-authoring.video-uploads.file-info.transcriptTab.notification.screenReader.text',
+    defaultMessage: 'Transcription error',
+    description: 'Scrren reader text for transcript tab notification',
+  },
   dateAddedTitle: {
     id: 'course-authoring.video-uploads.file-info.infoTab.dateAdded.title',
     defaultMessage: 'Date added',

From ac1fc43250b70453b5f8f33ca79b03fdaf3c660b Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Thu, 30 Nov 2023 13:21:34 -0500
Subject: [PATCH 03/13] fix: visibility of transcript dropdowns (#719)

---
 .../info-sidebar/transcript-item/LanguageSelect.jsx          | 2 +-
 .../videos-page/info-sidebar/transcript-item/Transcript.jsx  | 5 +++--
 .../info-sidebar/transcript-item/TranscriptMenu.jsx          | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx
index 024c14eff1..f513927a33 100644
--- a/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx
@@ -24,7 +24,7 @@ const LanguageSelect = ({
       >
         {currentSelection}
       </Dropdown.Toggle>
-      <Dropdown.Menu className="m-0">
+      <Dropdown.Menu className="m-0 position-fixed">
         <div style={{ height: '230px', overflowY: 'scroll' }}>
           {Object.entries(options).map(([valueKey, text]) => {
             if (valueKey === value) {
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
index 993aea8c25..af8351a008 100644
--- a/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
@@ -54,18 +54,19 @@ const Transcript = ({
     <>
       {isConfirmationOpen ? (
         <Card className="my-2">
-          <Card.Header title={(<FormattedMessage {...messages.deleteConfirmationHeader} />)} />
+          <Card.Header className="h3" title={(<FormattedMessage {...messages.deleteConfirmationHeader} />)} />
           <Card.Body>
             <Card.Section>
               <FormattedMessage {...messages.deleteConfirmationMessage} />
             </Card.Section>
             <Card.Footer>
-              <Button variant="tertiary" className="mb-2 mb-sm-0" onClick={closeConfirmation}>
+              <Button size="sm" variant="tertiary" className="mb-2 mb-sm-0" onClick={closeConfirmation}>
                 <FormattedMessage {...messages.cancelDeleteLabel} />
               </Button>
               <Button
                 variant="danger"
                 className="mb-2 mb-sm-0"
+                size="sm"
                 onClick={() => {
                   handleTranscript({ language: transcript }, 'delete');
                   closeConfirmation();
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx
index ee97f0f8af..bdeb8a4f0a 100644
--- a/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx
@@ -22,7 +22,7 @@ export const TranscriptActionMenu = ({
       alt="Actions dropdown"
       data-testid={`${language}-transcript-menu`}
     />
-    <Dropdown.Menu className="video_transcript Action Menu">
+    <Dropdown.Menu className="video_transcript position-fixed">
       <Dropdown.Item
         key={`transcript-actions-${language}-replace`}
         onClick={input.click}

From 2fbcfc03ddf46272538619b8c36b4017a188a9e2 Mon Sep 17 00:00:00 2001
From: Maria Grimaldi <maria.grimaldi@edunext.co>
Date: Thu, 30 Nov 2023 16:56:38 -0400
Subject: [PATCH 04/13] fix: remove unnecessary course-v1 from courseId string
 (#687)

---
 src/header/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/header/utils.js b/src/header/utils.js
index 8bce20f904..bc3e7644a7 100644
--- a/src/header/utils.js
+++ b/src/header/utils.js
@@ -44,7 +44,7 @@ export const getSettingMenuItems = ({ studioBaseUrl, courseId, intl }) => ([
     title: intl.formatMessage(messages['header.links.courseTeam']),
   },
   {
-    href: `${studioBaseUrl}/group_configurations/course-v1:${courseId}`,
+    href: `${studioBaseUrl}/group_configurations/${courseId}`,
     title: intl.formatMessage(messages['header.links.groupConfigurations']),
   },
   {

From 16362265720640fafbfb3445a5f16a4ab432fd4f Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 1 Dec 2023 12:33:36 -0500
Subject: [PATCH 05/13] fix(deps): update dependency
 @edx/frontend-lib-content-components to v1.176.4 (#720)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8e2e8758b5..a0dd6e388b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@edx/frontend-component-footer": "^12.3.0",
         "@edx/frontend-component-header": "^4.7.0",
         "@edx/frontend-enterprise-hotjar": "^2.0.0",
-        "@edx/frontend-lib-content-components": "1.176.0",
+        "@edx/frontend-lib-content-components": "1.176.4",
         "@edx/frontend-platform": "5.6.1",
         "@edx/paragon": "^21.5.6",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -2725,9 +2725,9 @@
       }
     },
     "node_modules/@edx/frontend-lib-content-components": {
-      "version": "1.176.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-1.176.0.tgz",
-      "integrity": "sha512-WGEl4+LWnpUJQ1Li2VxHa4VpudNgR4ZEB2i/qZLfaW8zw8hBviWVuig8ONKgYBtaE5uPggInSBMWj0ixVAzYRw==",
+      "version": "1.176.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-1.176.4.tgz",
+      "integrity": "sha512-scxJWs2nVnsUNno5CFHQWIrROSp3m/8b6dxBza6fKaX78Xm6TRTYpnpVM+uMw6XffJRY1NzUKGyT7AbF+36jvA==",
       "dependencies": {
         "@codemirror/lang-html": "^6.0.0",
         "@codemirror/lang-xml": "^6.0.0",
diff --git a/package.json b/package.json
index 9427be6b59..17471fd2d5 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@edx/frontend-component-footer": "^12.3.0",
     "@edx/frontend-component-header": "^4.7.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "1.176.0",
+    "@edx/frontend-lib-content-components": "1.176.4",
     "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "^21.5.6",
     "@fortawesome/fontawesome-svg-core": "1.2.36",

From bebbc1535b60b5d3a247688a229b9ea910360408 Mon Sep 17 00:00:00 2001
From: Jorg Are <jorg2all@yahoo.com>
Date: Tue, 5 Dec 2023 22:22:46 +0100
Subject: [PATCH 06/13] feat: add ai translations component to transcript
 settings (#722)

---
 .env                                          |   1 +
 .env.development                              |   1 +
 package-lock.json                             |  37 ++++++
 package.json                                  |   1 +
 .../TranscriptSettings.jsx                    | 119 ++++++++++--------
 .../TranscriptSettings.scss                   |   4 +
 .../TranscriptSettings.test.jsx               |  60 +++++++++
 7 files changed, 172 insertions(+), 51 deletions(-)

diff --git a/.env b/.env
index 5183e318c7..9c900c37fb 100644
--- a/.env
+++ b/.env
@@ -41,3 +41,4 @@ HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=false
 INVITE_STUDENTS_EMAIL_TO=''
+AI_TRANSLATIONS_BASE_URL=''
diff --git a/.env.development b/.env.development
index 4b98461d45..cc50a024fb 100644
--- a/.env.development
+++ b/.env.development
@@ -43,3 +43,4 @@ HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=true
 INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
+AI_TRANSLATIONS_BASE_URL='http://localhost:18760'
diff --git a/package-lock.json b/package-lock.json
index a0dd6e388b..1593f5447f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "AGPL-3.0",
       "dependencies": {
         "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+        "@edx/frontend-component-ai-translations-edx": "^1.3.0",
         "@edx/frontend-component-footer": "^12.3.0",
         "@edx/frontend-component-header": "^4.7.0",
         "@edx/frontend-enterprise-hotjar": "^2.0.0",
@@ -2540,6 +2541,42 @@
         "node": ">=8"
       }
     },
+    "node_modules/@edx/frontend-component-ai-translations-edx": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-ai-translations-edx/-/frontend-component-ai-translations-edx-1.3.0.tgz",
+      "integrity": "sha512-QMq8k3+EErv/29G8EJuMdpG1+uj9K5unoRP2VrjPoOOrDsK2lCdC8de7hKz2/2lmHzkdF5IOBbKtCQuC+VwxpA==",
+      "dependencies": {
+        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+        "@edx/frontend-platform": "5.6.1",
+        "@edx/paragon": "21.5.6",
+        "babel-polyfill": "6.26.0",
+        "prop-types": "^15.5.10",
+        "react-responsive": "8.2.0"
+      },
+      "peerDependencies": {
+        "@edx/frontend-platform": "^4.0.0 || ^5.0.0 || ^6.0.0",
+        "prop-types": "^15.5.10",
+        "react": "^16.14.0 || ^17.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0"
+      }
+    },
+    "node_modules/@edx/frontend-component-ai-translations-edx/node_modules/react-responsive": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",
+      "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@edx/frontend-component-footer": {
       "version": "12.5.1",
       "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.5.1.tgz",
diff --git a/package.json b/package.json
index 17471fd2d5..4264dd7f4c 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-ai-translations-edx": "^1.3.0",
     "@edx/frontend-component-footer": "^12.3.0",
     "@edx/frontend-component-header": "^4.7.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
diff --git a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx
index 0c94ee0a03..85ddf7b523 100644
--- a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx
+++ b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx
@@ -11,6 +11,7 @@ import {
   TransitionReplace,
 } from '@edx/paragon';
 import { ChevronLeft, ChevronRight, Close } from '@edx/paragon/icons';
+import AITranslationsComponent from '@edx/frontend-component-ai-translations-edx';
 import OrderTranscriptForm from './OrderTranscriptForm';
 import messages from './messages';
 import {
@@ -31,9 +32,11 @@ const TranscriptSettings = ({
     activeTranscriptPreferences,
     transcriptCredentials,
     videoTranscriptSettings,
+    isAiTranslationsEnabled,
   } = pageSettings;
   const { transcriptionPlans } = videoTranscriptSettings || {};
   const [transcriptType, setTranscriptType] = useState(activeTranscriptPreferences?.provider);
+  const [isAiTranslations, setIsAiTranslations] = useState(false);
 
   const handleOrderTranscripts = (data, provider) => {
     const noCredentials = isEmpty(transcriptCredentials) || data.apiKey;
@@ -54,59 +57,73 @@ const TranscriptSettings = ({
       show={isTranscriptSettingsOpen}
       onClose={closeTranscriptSettings}
     >
-      <div style={{ width: '225px' }}>
-        <ActionRow>
+      <div>
+        {!isAiTranslations && (
+          <>
+            <ActionRow>
+              <TransitionReplace>
+                {transcriptType ? (
+                  <IconButton
+                    key="back-button"
+                    size="sm"
+                    iconAs={Icon}
+                    src={ChevronLeft}
+                    onClick={() => setTranscriptType(null)}
+                    alt="back button to main transcript settings view"
+                  />
+                ) : (
+                  <div key="title" className="h3">
+                    <FormattedMessage {...messages.transcriptSettingsTitle} />
+                  </div>
+                )}
+              </TransitionReplace>
+              <ActionRow.Spacer />
+              <IconButton size="sm" iconAs={Icon} src={Close} onClick={closeTranscriptSettings} alt="close settings" />
+            </ActionRow>
+            <TransitionReplace>
+              {transcriptType ? (
+                <div key="transcript-settings">
+                  <OrderTranscriptForm
+                    {...{
+                      setTranscriptType,
+                      transcriptType,
+                      activeTranscriptPreferences,
+                      transcriptCredentials,
+                      closeTranscriptSettings,
+                      handleOrderTranscripts,
+                      transcriptionPlans,
+                      errorMessages,
+                      transcriptStatus,
+                    }}
+                  />
+                </div>
+              ) : (
+                <div key="transcript-type-selection" className="mt-3">
+                  <Collapsible.Advanced
+                    onOpen={() => setTranscriptType('order')}
+                  >
+                    <Collapsible.Trigger
+                      className="row m-0 justify-content-between align-items-center"
+                    >
+                      <FormattedMessage {...messages.orderTranscriptsTitle} />
+                      <Icon src={ChevronRight} />
+                    </Collapsible.Trigger>
+                  </Collapsible.Advanced>
+                </div>
+              )}
+            </TransitionReplace>
+          </>
+        )}
+        {(!transcriptType && isAiTranslationsEnabled) && (
           <TransitionReplace>
-            {transcriptType ? (
-              <IconButton
-                key="back-button"
-                size="sm"
-                iconAs={Icon}
-                src={ChevronLeft}
-                onClick={() => setTranscriptType(null)}
-                alt="back button to main transcript settings view"
-              />
-            ) : (
-              <div key="title" className="h3">
-                <FormattedMessage {...messages.transcriptSettingsTitle} />
-              </div>
-            )}
+            <AITranslationsComponent
+              setIsAiTranslations={setIsAiTranslations}
+              closeTranscriptSettings={closeTranscriptSettings}
+              courseId={courseId}
+              key="ai-component"
+            />
           </TransitionReplace>
-          <ActionRow.Spacer />
-          <IconButton size="sm" iconAs={Icon} src={Close} onClick={closeTranscriptSettings} alt="close settings" />
-        </ActionRow>
-        <TransitionReplace>
-          {transcriptType ? (
-            <div key="transcript-settings">
-              <OrderTranscriptForm
-                {...{
-                  setTranscriptType,
-                  transcriptType,
-                  activeTranscriptPreferences,
-                  transcriptCredentials,
-                  closeTranscriptSettings,
-                  handleOrderTranscripts,
-                  transcriptionPlans,
-                  errorMessages,
-                  transcriptStatus,
-                }}
-              />
-            </div>
-          ) : (
-            <div key="transcript-type-selection" className="mt-3">
-              <Collapsible.Advanced
-                onOpen={() => setTranscriptType('order')}
-              >
-                <Collapsible.Trigger
-                  className="row m-0 justify-content-between align-items-center"
-                >
-                  <FormattedMessage {...messages.orderTranscriptsTitle} />
-                  <Icon src={ChevronRight} />
-                </Collapsible.Trigger>
-              </Collapsible.Advanced>
-            </div>
-          )}
-        </TransitionReplace>
+        )}
       </div>
     </Sheet>
   );
diff --git a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.scss b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.scss
index 465d640e2b..db33fc0adc 100644
--- a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.scss
+++ b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.scss
@@ -2,3 +2,7 @@
 .pgn__selectable_box[disabled] {
   opacity: .5;
 }
+
+.pgn__sheet-component.right {
+  min-width: 352px;
+}
diff --git a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx
index 4af40670fd..d1069e8baf 100644
--- a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx
+++ b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx
@@ -657,4 +657,64 @@ describe('TranscriptSettings', () => {
       });
     });
   });
+
+  describe('Ai translations component fails', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({
+        ...initialState,
+        videos: {
+          ...initialState.videos,
+          pageSettings: {
+            ...initialState.videos.pageSettings,
+          },
+        },
+      });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+      renderComponent(defaultProps);
+    });
+
+    it('doesn\'t display AI translations component if not enabled', () => {
+      expect(screen.queryByText('/Get free translations/')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Ai translations component success', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({
+        ...initialState,
+        videos: {
+          ...initialState.videos,
+          pageSettings: {
+            ...initialState.videos.pageSettings,
+            isAiTranslationsEnabled: true,
+          },
+        },
+      });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+      renderComponent(defaultProps);
+    });
+
+    it('displays AI translations component if enabled', () => {
+      const component = screen.getByText(/Get free translations/);
+      expect(component).toBeVisible();
+    });
+  });
 });

From 04c14274fda2fa9cbe843e8bf02a9d8d560d9f8e Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@disroot.org>
Date: Wed, 6 Dec 2023 20:36:29 +0530
Subject: [PATCH 07/13] feat: course outline page (#694)

* feat: Course outline Top level page (#36)

* feat: [2u-259] add components

* feat: [2u-259] fix sidebar

* feat: [2u-259] add tests, fix links

* feat: [2u-259] fix messages

* feat: [2u-159] fix reducer and sidebar

* feat: [2u-259] fix reducer

* feat: [2u-259] remove warning from selectors

* feat: [2u-259] remove indents

---------

Co-authored-by: Vladislav Keblysh <vladislavkeblysh@Vladislavs-MacBook-Pro.local>

feat: Course outline Status Bar (#50)

* feat: [2u-259] add components

* feat: [2u-259] fix sidebar

* feat: [2u-259] add tests, fix links

* feat: [2u-259] fix messages

* feat: [2u-159] fix reducer and sidebar

* feat: add checklist

* feat: [2u-259] fix reducer

* feat: [2u-259] remove warning from selectors

* feat: [2u-259] remove indents

* feat: [2u-259] add api, enable modal

* feat: [2u-259] add tests

* feat: [2u-259] add translates

* feat: [2u-271] fix transalates

* feat: [2u-281] fix isQuery pending, utils, hooks

* feat: [2u-281] fix useScrollToHashElement

* feat: [2u-271] fix imports

---------

Co-authored-by: Vladislav Keblysh <vladislavkeblysh@Vladislavs-MacBook-Pro.local>

feat: Course Outline Reindex (#55)

* feat: [2u-277] add alerts

* feat: [2u-277] add translates

* feat: [2u-277] fix tests

* fix: [2u-277] fix slice and hook

---------

Co-authored-by: Vladislav Keblysh <vladislavkeblysh@Vladislavs-MacBook-Pro.local>

fix: Course outline tests (#56)

* fix: fixed course outline status bar tests

* fix: fixed course outline status bar tests

* fix: fixed course outline enable highlights modal tests

* fix: enable modal tests

fix: increase code coverage on the page

* refactor: improve course outline page

feat: lms live link

chore: update outline link

fix: course outline link

refactor: remove unnecessary css and rename test file

refactor: remove unnecessary css from outlineSidebar

test: make use of message variable instead of hardcoded text

refactor: remove unnecessary h5 class

test: use test id for detecting component

refactor: update course outline url and some default messages

---------

Co-authored-by: vladislavkeblysh <138868841+vladislavkeblysh@users.noreply.github.com>
---
 .env.development                              |    1 -
 src/CourseAuthoringRoutes.jsx                 |    5 +-
 src/course-outline/CourseOutline.jsx          |  141 +
 src/course-outline/CourseOutline.scss         |    2 +
 src/course-outline/CourseOutline.test.jsx     |  150 +
 .../__mocks__/courseBestPractices.js          |   43 +
 src/course-outline/__mocks__/courseLaunch.js  |   31 +
 .../__mocks__/courseOutlineIndex.js           | 2952 +++++++++++++++++
 .../courseOutlineIndexWithoutSections.js      |   25 +
 src/course-outline/__mocks__/index.js         |    4 +
 src/course-outline/constants.js               |   59 +
 src/course-outline/data/api.js                |  107 +
 src/course-outline/data/selectors.js          |    4 +
 src/course-outline/data/slice.js              |   77 +
 src/course-outline/data/thunk.js              |  104 +
 .../EnableHighlightsModal.jsx                 |   59 +
 .../EnableHighlightsModal.test.jsx            |   55 +
 .../enable-highlights-modal/messages.js       |   30 +
 .../header-navigations/HeaderNavigations.jsx  |  100 +
 .../header-navigations/HeaderNavigations.scss |    4 +
 .../HeaderNavigations.test.jsx                |   81 +
 .../header-navigations/messages.js            |   38 +
 src/course-outline/hooks.jsx                  |   99 +
 src/course-outline/index.js                   |    2 +
 src/course-outline/messages.js                |   34 +
 .../outline-sidebar/OutlineSidebar.jsx        |   66 +
 .../outline-sidebar/OutlineSidebar.test.jsx   |   84 +
 .../outline-sidebar/messages.js               |   70 +
 src/course-outline/outline-sidebar/utils.jsx  |   69 +
 src/course-outline/status-bar/StatusBar.jsx   |  116 +
 src/course-outline/status-bar/StatusBar.scss  |   12 +
 .../status-bar/StatusBar.test.jsx             |  112 +
 src/course-outline/status-bar/messages.js     |   46 +
 .../utils/courseChecklistValidators.js        |  106 +
 .../utils/courseChecklistValidators.test.js   |  297 ++
 .../utils/getChecklistForStatusBar.js         |   79 +
 .../utils/getChecklistValues.js               |   79 +
 .../utils/getChecklistValues.test.js          |   86 +
 src/help-urls/__mocks__/helpUrls.js           |   35 +
 src/help-urls/__mocks__/index.js              |    2 +
 src/help-urls/data/api.js                     |    4 +-
 src/hooks.js                                  |   18 +
 src/i18n/messages/ar.json                     |    2 +-
 src/i18n/messages/de.json                     |    2 +-
 src/i18n/messages/de_DE.json                  |    2 +-
 src/i18n/messages/es_419.json                 |    2 +-
 src/i18n/messages/fr.json                     |    2 +-
 src/i18n/messages/fr_CA.json                  |    2 +-
 src/i18n/messages/hi.json                     |    2 +-
 src/i18n/messages/it.json                     |    2 +-
 src/i18n/messages/it_IT.json                  |    2 +-
 src/i18n/messages/pt.json                     |    2 +-
 src/i18n/messages/pt_PT.json                  |    2 +-
 src/i18n/messages/ru.json                     |    2 +-
 src/i18n/messages/uk.json                     |    2 +-
 src/i18n/messages/zh_CN.json                  |    2 +-
 src/index.scss                                |    1 +
 src/schedule-and-details/index.jsx            |    5 +-
 .../entrance-exam/index.jsx                   |    2 +-
 .../schedule-section/index.jsx                |    2 +-
 src/store.js                                  |    2 +
 61 files changed, 5507 insertions(+), 21 deletions(-)
 create mode 100644 src/course-outline/CourseOutline.jsx
 create mode 100644 src/course-outline/CourseOutline.scss
 create mode 100644 src/course-outline/CourseOutline.test.jsx
 create mode 100644 src/course-outline/__mocks__/courseBestPractices.js
 create mode 100644 src/course-outline/__mocks__/courseLaunch.js
 create mode 100644 src/course-outline/__mocks__/courseOutlineIndex.js
 create mode 100644 src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js
 create mode 100644 src/course-outline/__mocks__/index.js
 create mode 100644 src/course-outline/constants.js
 create mode 100644 src/course-outline/data/api.js
 create mode 100644 src/course-outline/data/selectors.js
 create mode 100644 src/course-outline/data/slice.js
 create mode 100644 src/course-outline/data/thunk.js
 create mode 100644 src/course-outline/enable-highlights-modal/EnableHighlightsModal.jsx
 create mode 100644 src/course-outline/enable-highlights-modal/EnableHighlightsModal.test.jsx
 create mode 100644 src/course-outline/enable-highlights-modal/messages.js
 create mode 100644 src/course-outline/header-navigations/HeaderNavigations.jsx
 create mode 100644 src/course-outline/header-navigations/HeaderNavigations.scss
 create mode 100644 src/course-outline/header-navigations/HeaderNavigations.test.jsx
 create mode 100644 src/course-outline/header-navigations/messages.js
 create mode 100644 src/course-outline/hooks.jsx
 create mode 100644 src/course-outline/index.js
 create mode 100644 src/course-outline/messages.js
 create mode 100644 src/course-outline/outline-sidebar/OutlineSidebar.jsx
 create mode 100644 src/course-outline/outline-sidebar/OutlineSidebar.test.jsx
 create mode 100644 src/course-outline/outline-sidebar/messages.js
 create mode 100644 src/course-outline/outline-sidebar/utils.jsx
 create mode 100644 src/course-outline/status-bar/StatusBar.jsx
 create mode 100644 src/course-outline/status-bar/StatusBar.scss
 create mode 100644 src/course-outline/status-bar/StatusBar.test.jsx
 create mode 100644 src/course-outline/status-bar/messages.js
 create mode 100644 src/course-outline/utils/courseChecklistValidators.js
 create mode 100644 src/course-outline/utils/courseChecklistValidators.test.js
 create mode 100644 src/course-outline/utils/getChecklistForStatusBar.js
 create mode 100644 src/course-outline/utils/getChecklistValues.js
 create mode 100644 src/course-outline/utils/getChecklistValues.test.js
 create mode 100644 src/help-urls/__mocks__/helpUrls.js
 create mode 100644 src/help-urls/__mocks__/index.js
 create mode 100644 src/hooks.js

diff --git a/.env.development b/.env.development
index cc50a024fb..55b8ce70cd 100644
--- a/.env.development
+++ b/.env.development
@@ -33,7 +33,6 @@ ENABLE_ACCESSIBILITY_PAGE=false
 ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_NEW_EDITOR_PAGES=true
-ENABLE_NEW_COURSE_OUTLINE_PAGE = false
 ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
 ENABLE_UNIT_PAGE = false
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = false
diff --git a/src/CourseAuthoringRoutes.jsx b/src/CourseAuthoringRoutes.jsx
index 0aa1043a6d..6ff7f475bd 100644
--- a/src/CourseAuthoringRoutes.jsx
+++ b/src/CourseAuthoringRoutes.jsx
@@ -11,6 +11,7 @@ import VideoSelectorContainer from './selectors/VideoSelectorContainer';
 import CustomPages from './custom-pages';
 import { FilesPage, VideosPage } from './files-and-videos';
 import { AdvancedSettings } from './advanced-settings';
+import { CourseOutline } from './course-outline';
 import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
 import CourseTeam from './course-team/CourseTeam';
@@ -41,8 +42,8 @@ const CourseAuthoringRoutes = () => {
     <CourseAuthoringPage courseId={courseId}>
       <Routes>
         <Route
-          path="outline"
-          element={process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE === 'true' ? <PageWrap><Placeholder /></PageWrap> : null}
+          path="/"
+          element={<PageWrap><CourseOutline courseId={courseId} /></PageWrap>}
         />
         <Route
           path="course_info"
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
new file mode 100644
index 0000000000..51bf39f269
--- /dev/null
+++ b/src/course-outline/CourseOutline.jsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Container,
+  Layout,
+  TransitionReplace,
+} from '@edx/paragon';
+import {
+  CheckCircle as CheckCircleIcon,
+  Warning as WarningIcon,
+} from '@edx/paragon/icons';
+
+import SubHeader from '../generic/sub-header/SubHeader';
+import { RequestStatus } from '../data/constants';
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import AlertMessage from '../generic/alert-message';
+import HeaderNavigations from './header-navigations/HeaderNavigations';
+import OutlineSideBar from './outline-sidebar/OutlineSidebar';
+import messages from './messages';
+import { useCourseOutline } from './hooks';
+import StatusBar from './status-bar/StatusBar';
+import EnableHighlightsModal from './enable-highlights-modal/EnableHighlightsModal';
+
+const CourseOutline = ({ courseId }) => {
+  const intl = useIntl();
+
+  const {
+    savingStatus,
+    statusBarData,
+    isLoading,
+    isReIndexShow,
+    showErrorAlert,
+    showSuccessAlert,
+    isSectionsExpanded,
+    isEnableHighlightsModalOpen,
+    isInternetConnectionAlertFailed,
+    isDisabledReindexButton,
+    headerNavigationsActions,
+    openEnableHighlightsModal,
+    closeEnableHighlightsModal,
+    handleEnableHighlightsSubmit,
+    handleInternetConnectionFailed,
+  } = useCourseOutline({ courseId });
+
+  if (isLoading) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <></>;
+  }
+
+  return (
+    <>
+      <Container size="xl" className="px-4">
+        <section className="course-outline-container mb-4 mt-5">
+          <TransitionReplace>
+            {showSuccessAlert ? (
+              <AlertMessage
+                key={intl.formatMessage(messages.alertSuccessAriaLabelledby)}
+                show={showSuccessAlert}
+                variant="success"
+                icon={CheckCircleIcon}
+                title={intl.formatMessage(messages.alertSuccessTitle)}
+                description={intl.formatMessage(messages.alertSuccessDescription)}
+                aria-hidden="true"
+                aria-labelledby={intl.formatMessage(messages.alertSuccessAriaLabelledby)}
+                aria-describedby={intl.formatMessage(messages.alertSuccessAriaDescribedby)}
+              />
+            ) : null}
+          </TransitionReplace>
+          <SubHeader
+            className="mt-5"
+            title={intl.formatMessage(messages.headingTitle)}
+            subtitle={intl.formatMessage(messages.headingSubtitle)}
+            headerActions={(
+              <HeaderNavigations
+                isReIndexShow={isReIndexShow}
+                isSectionsExpanded={isSectionsExpanded}
+                headerNavigationsActions={headerNavigationsActions}
+                isDisabledReindexButton={isDisabledReindexButton}
+              />
+            )}
+          />
+          <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>
+              <article>
+                <div>
+                  <section className="course-outline-section">
+                    <StatusBar
+                      courseId={courseId}
+                      isLoading={isLoading}
+                      statusBarData={statusBarData}
+                      openEnableHighlightsModal={openEnableHighlightsModal}
+                    />
+                  </section>
+                </div>
+              </article>
+            </Layout.Element>
+            <Layout.Element>
+              <OutlineSideBar courseId={courseId} />
+            </Layout.Element>
+          </Layout>
+          <EnableHighlightsModal
+            isOpen={isEnableHighlightsModalOpen}
+            close={closeEnableHighlightsModal}
+            onEnableHighlightsSubmit={handleEnableHighlightsSubmit}
+            highlightsDocUrl={statusBarData.highlightsDocUrl}
+          />
+        </section>
+      </Container>
+      <div className="alert-toast">
+        <InternetConnectionAlert
+          isFailed={isInternetConnectionAlertFailed}
+          isQueryPending={savingStatus === RequestStatus.PENDING}
+          onInternetConnectionFailed={handleInternetConnectionFailed}
+        />
+        {showErrorAlert && (
+          <AlertMessage
+            key={intl.formatMessage(messages.alertErrorTitle)}
+            show={showErrorAlert}
+            variant="danger"
+            icon={WarningIcon}
+            title={intl.formatMessage(messages.alertErrorTitle)}
+            aria-hidden="true"
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+CourseOutline.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default CourseOutline;
diff --git a/src/course-outline/CourseOutline.scss b/src/course-outline/CourseOutline.scss
new file mode 100644
index 0000000000..732420365c
--- /dev/null
+++ b/src/course-outline/CourseOutline.scss
@@ -0,0 +1,2 @@
+@import "./header-navigations/HeaderNavigations";
+@import "./status-bar/StatusBar";
diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
new file mode 100644
index 0000000000..b6d98bc470
--- /dev/null
+++ b/src/course-outline/CourseOutline.test.jsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import {
+  getCourseBestPracticesApiUrl,
+  getCourseLaunchApiUrl,
+  getCourseOutlineIndexApiUrl,
+  getCourseReindexApiUrl,
+  getEnableHighlightsEmailsApiUrl,
+} from './data/api';
+import {
+  enableCourseHighlightsEmailsQuery,
+  fetchCourseBestPracticesQuery,
+  fetchCourseLaunchQuery,
+  fetchCourseOutlineIndexQuery,
+  fetchCourseReindexQuery,
+} from './data/thunk';
+import initializeStore from '../store';
+import {
+  courseOutlineIndexMock,
+  courseBestPracticesMock,
+  courseLaunchMock,
+} from './__mocks__';
+import { executeThunk } from '../utils';
+import CourseOutline from './CourseOutline';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <CourseOutline courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<CourseOutline />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCourseOutlineIndexApiUrl(courseId))
+      .reply(200, courseOutlineIndexMock);
+    await executeThunk(fetchCourseOutlineIndexQuery(courseId), store.dispatch);
+  });
+
+  it('render CourseOutline component correctly', async () => {
+    const { getByText } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('check reindex and render success alert is correctly', async () => {
+    const { getByText } = render(<RootWrapper />);
+
+    axiosMock
+      .onGet(getCourseReindexApiUrl(courseOutlineIndexMock.reindexLink))
+      .reply(200);
+    await executeThunk(fetchCourseReindexQuery(courseId, courseOutlineIndexMock.reindexLink), store.dispatch);
+
+    expect(getByText(messages.alertSuccessDescription.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('render error alert after failed reindex correctly', async () => {
+    const { getByText } = render(<RootWrapper />);
+
+    axiosMock
+      .onGet(getCourseReindexApiUrl('some link'))
+      .reply(500);
+    await executeThunk(fetchCourseReindexQuery(courseId, 'some link'), store.dispatch);
+
+    expect(getByText(messages.alertErrorTitle.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('render checklist value correctly', async () => {
+    const { getByText } = render(<RootWrapper />);
+
+    axiosMock
+      .onGet(getCourseBestPracticesApiUrl({
+        courseId, excludeGraded: true, all: true,
+      }))
+      .reply(200, courseBestPracticesMock);
+
+    axiosMock
+      .onGet(getCourseLaunchApiUrl({
+        courseId, gradedOnly: true, validateOras: true, all: true,
+      }))
+      .reply(200, courseLaunchMock);
+
+    await executeThunk(fetchCourseLaunchQuery({
+      courseId, gradedOnly: true, validateOras: true, all: true,
+    }), store.dispatch);
+    await executeThunk(fetchCourseBestPracticesQuery({
+      courseId, excludeGraded: true, all: true,
+    }), store.dispatch);
+
+    expect(getByText('4/9 completed')).toBeInTheDocument();
+  });
+
+  it('check highlights are enabled after enable highlights query is successful', async () => {
+    const { findByTestId } = render(<RootWrapper />);
+
+    axiosMock
+      .onGet(getCourseOutlineIndexApiUrl(courseId))
+      .reply(200, {
+        ...courseOutlineIndexMock,
+        highlightsEnabledForMessaging: false,
+      });
+
+    axiosMock
+      .onPost(getEnableHighlightsEmailsApiUrl(courseId), {
+        publish: 'republish',
+        metadata: {
+          highlights_enabled_for_messaging: true,
+        },
+      })
+      .reply(200);
+
+    await executeThunk(enableCourseHighlightsEmailsQuery(courseId), store.dispatch);
+    expect(await findByTestId('highlights-enabled-span')).toBeInTheDocument();
+  });
+});
diff --git a/src/course-outline/__mocks__/courseBestPractices.js b/src/course-outline/__mocks__/courseBestPractices.js
new file mode 100644
index 0000000000..494c54d856
--- /dev/null
+++ b/src/course-outline/__mocks__/courseBestPractices.js
@@ -0,0 +1,43 @@
+module.exports = {
+  isSelfPaced: false,
+  sections: {
+    totalNumber: 6,
+    totalVisible: 4,
+    numberWithHighlights: 2,
+    highlightsActiveForCourse: true,
+    highlightsEnabled: true,
+  },
+  subsections: {
+    totalVisible: 5,
+    numWithOneBlockType: 2,
+    numBlockTypes: {
+      min: 0,
+      max: 3,
+      mean: 1,
+      median: 1,
+      mode: 1,
+    },
+  },
+  units: {
+    totalVisible: 9,
+    numBlocks: {
+      min: 1,
+      max: 2,
+      mean: 2,
+      median: 2,
+      mode: 2,
+    },
+  },
+  videos: {
+    totalNumber: 7,
+    numMobileEncoded: 0,
+    numWithValId: 3,
+    durations: {
+      min: null,
+      max: null,
+      mean: null,
+      median: null,
+      mode: null,
+    },
+  },
+};
diff --git a/src/course-outline/__mocks__/courseLaunch.js b/src/course-outline/__mocks__/courseLaunch.js
new file mode 100644
index 0000000000..40b629f465
--- /dev/null
+++ b/src/course-outline/__mocks__/courseLaunch.js
@@ -0,0 +1,31 @@
+module.exports = {
+  isSelfPaced: false,
+  dates: {
+    hasStartDate: true,
+    hasEndDate: false,
+  },
+  assignments: {
+    totalNumber: 11,
+    totalVisible: 7,
+    assignmentsWithDatesBeforeStart: [],
+    assignmentsWithDatesAfterEnd: [],
+    assignmentsWithOraDatesBeforeStart: [],
+    assignmentsWithOraDatesAfterEnd: [],
+  },
+  grades: {
+    hasGradingPolicy: true,
+    sumOfWeights: 1,
+  },
+  certificates: {
+    isActivated: false,
+    hasCertificate: false,
+    isEnabled: true,
+  },
+  updates: {
+    hasUpdate: true,
+  },
+  proctoring: {
+    needsProctoringEscalationEmail: false,
+    hasProctoringEscalationEmail: false,
+  },
+};
diff --git a/src/course-outline/__mocks__/courseOutlineIndex.js b/src/course-outline/__mocks__/courseOutlineIndex.js
new file mode 100644
index 0000000000..b65784c9be
--- /dev/null
+++ b/src/course-outline/__mocks__/courseOutlineIndex.js
@@ -0,0 +1,2952 @@
+module.exports = {
+  courseReleaseDate: 'Set Date',
+  courseStructure: {
+    id: 'block-v1:edX+DemoX+Demo_Course+type@course+block@course',
+    displayName: 'Demonstration Course',
+    category: 'course',
+    hasChildren: true,
+    unitLevelDiscussions: false,
+    editedOn: 'Aug 23, 2023 at 12:35 UTC',
+    published: true,
+    publishedOn: 'Aug 23, 2023 at 11:32 UTC',
+    studioUrl: '/course/course-v1:edX+DemoX+Demo_Course',
+    releasedToStudents: false,
+    releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+    visibilityState: null,
+    hasExplicitStaffLock: false,
+    start: '2023-11-09T22:00:00Z',
+    graded: false,
+    dueDate: '',
+    due: null,
+    relativeWeeksDue: null,
+    format: null,
+    courseGraders: [
+      'Homework',
+      'Exam',
+    ],
+    hasChanges: false,
+    actions: {
+      deletable: true,
+      draggable: true,
+      childAddable: true,
+      duplicable: true,
+    },
+    explanatoryMessage: null,
+    groupAccess: {},
+    userPartitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 2,
+            name: 'Verified Certificate',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 1,
+            name: 'Audit',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    showCorrectness: 'always',
+    highlightsEnabledForMessaging: true,
+    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',
+    enableProctoredExams: false,
+    createZendeskTickets: true,
+    enableTimedExams: true,
+    childInfo: {
+      category: 'chapter',
+      displayName: 'Section',
+      children: [
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b',
+          displayName: 'Introduction 12',
+          category: 'chapter',
+          hasChildren: true,
+          editedOn: 'Aug 23, 2023 at 12:35 UTC',
+          published: true,
+          publishedOn: 'Aug 23, 2023 at 12:35 UTC',
+          studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40d8a6192ade314473a78242dfeedfbf5b',
+          releasedToStudents: true,
+          releaseDate: 'Aug 10, 2023 at 22:00 UTC',
+          visibilityState: 'staff_only',
+          hasExplicitStaffLock: true,
+          start: '2023-08-10T22:00:00Z',
+          graded: false,
+          dueDate: '',
+          due: null,
+          relativeWeeksDue: null,
+          format: null,
+          courseGraders: [
+            'Homework',
+            'Exam',
+          ],
+          hasChanges: false,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatoryMessage: null,
+          groupAccess: {},
+          userPartitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          showCorrectness: 'always',
+          highlights: [
+            'New Highlight 1',
+            'New Highlight 4',
+          ],
+          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',
+          childInfo: {
+            category: 'sequential',
+            displayName: 'Subsection',
+            children: [
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction',
+                displayName: 'Demo Course Overview',
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                published: true,
+                publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40edx_introduction',
+                releasedToStudents: true,
+                releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                visibilityState: 'staff_only',
+                hasExplicitStaffLock: false,
+                start: '1970-01-01T05:00:00Z',
+                graded: false,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: null,
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+                      displayName: 'Introduction: Video and Sequences',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'staff_only',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: true,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: true,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+            ],
+          },
+          ancestorHasStaffLock: false,
+          staffOnlyMessage: true,
+          hasPartitionGroupComponents: false,
+          userPartitionInfo: {
+            selectablePartitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selectedPartitionIndex: -1,
+            selectedGroupsLabel: '',
+          },
+        },
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions',
+          displayName: 'Example Week 2: Get Interactive',
+          category: 'chapter',
+          hasChildren: true,
+          editedOn: 'Aug 16, 2023 at 11:52 UTC',
+          published: true,
+          publishedOn: 'Aug 16, 2023 at 11:52 UTC',
+          studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40graded_interactions',
+          releasedToStudents: false,
+          releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+          visibilityState: 'ready',
+          hasExplicitStaffLock: false,
+          start: '2023-11-09T22:00:00Z',
+          graded: false,
+          dueDate: '',
+          due: null,
+          relativeWeeksDue: null,
+          format: null,
+          courseGraders: [
+            'Homework',
+            'Exam',
+          ],
+          hasChanges: false,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatoryMessage: null,
+          groupAccess: {},
+          userPartitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          showCorrectness: 'always',
+          highlights: [
+            'New',
+          ],
+          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',
+          childInfo: {
+            category: 'sequential',
+            displayName: 'Subsection',
+            children: [
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@simulations',
+                displayName: "Lesson 2 - Let's Get Interactive!",
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                published: true,
+                publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40simulations',
+                releasedToStudents: true,
+                releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                visibilityState: 'live',
+                hasExplicitStaffLock: false,
+                start: '1970-01-01T05:00:00Z',
+                graded: false,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: null,
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d0d804e8863c4a95a659c04d8a2b2bc0',
+                      displayName: "Lesson 2 - Let's Get Interactive! ",
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@d0d804e8863c4a95a659c04d8a2b2bc0',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_2dbb0072785e',
+                      displayName: 'An Interactive Reference Table',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_2dbb0072785e',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_98cf62510471',
+                      displayName: 'Zooming Diagrams',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_98cf62510471',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_d32bf9b2242c',
+                      displayName: 'Electronic Sound Experiment',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_d32bf9b2242c',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4e592689563243c484af947465eaef0d',
+                      displayName: 'New Unit',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@4e592689563243c484af947465eaef0d',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: false,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@graded_simulations',
+                displayName: 'Homework - Labs and Demos',
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                published: true,
+                publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40graded_simulations',
+                releasedToStudents: true,
+                releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                visibilityState: 'live',
+                hasExplicitStaffLock: false,
+                start: '2013-02-05T00:00:00Z',
+                graded: true,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: 'Homework',
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6cee45205a449369d7ef8f159b22bdf',
+                      displayName: 'Labs and Demos',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6cee45205a449369d7ef8f159b22bdf',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_aae927868e55',
+                      displayName: 'Code Grader',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_aae927868e55',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_c037f3757df1',
+                      displayName: 'Electric Circuit Simulator',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_c037f3757df1',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_bc69a47c6fae',
+                      displayName: 'Protein Creator',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_bc69a47c6fae',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@8f89194410954e768bde1764985454a7',
+                      displayName: 'Molecule Structures',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@8f89194410954e768bde1764985454a7',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: false,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@175e76c4951144a29d46211361266e0e',
+                displayName: 'Homework - Essays',
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                published: true,
+                publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40175e76c4951144a29d46211361266e0e',
+                releasedToStudents: false,
+                releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+                visibilityState: 'ready',
+                hasExplicitStaffLock: false,
+                start: '2023-11-09T22:00:00Z',
+                graded: false,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: null,
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@fb79dcbad35b466a8c6364f8ffee9050',
+                      displayName: 'Peer Assessed Essays',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@fb79dcbad35b466a8c6364f8ffee9050',
+                      releasedToStudents: false,
+                      releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+                      visibilityState: 'ready',
+                      hasExplicitStaffLock: false,
+                      start: '2023-11-09T22:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: false,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+            ],
+          },
+          ancestorHasStaffLock: false,
+          staffOnlyMessage: false,
+          hasPartitionGroupComponents: false,
+          userPartitionInfo: {
+            selectablePartitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selectedPartitionIndex: -1,
+            selectedGroupsLabel: '',
+          },
+        },
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@1414ffd5143b4b508f739b563ab468b7',
+          displayName: 'About Exams and Certificates',
+          category: 'chapter',
+          hasChildren: true,
+          editedOn: 'Aug 10, 2023 at 10:40 UTC',
+          published: true,
+          publishedOn: 'Aug 10, 2023 at 10:40 UTC',
+          studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%401414ffd5143b4b508f739b563ab468b7',
+          releasedToStudents: false,
+          releaseDate: 'Jan 01, 2030 at 05:00 UTC',
+          visibilityState: 'needs_attention',
+          hasExplicitStaffLock: false,
+          start: '2030-01-01T05:00:00Z',
+          graded: false,
+          dueDate: '',
+          due: null,
+          relativeWeeksDue: null,
+          format: null,
+          courseGraders: [
+            'Homework',
+            'Exam',
+          ],
+          hasChanges: false,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatoryMessage: null,
+          groupAccess: {},
+          userPartitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          showCorrectness: 'always',
+          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',
+          childInfo: {
+            category: 'sequential',
+            displayName: 'Subsection',
+            children: [
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@workflow',
+                displayName: 'edX Exams',
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                published: true,
+                publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40workflow',
+                releasedToStudents: true,
+                releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                visibilityState: 'live',
+                hasExplicitStaffLock: false,
+                start: '2013-02-05T00:00:00Z',
+                graded: true,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: 'Exam',
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@934cc32c177d41b580c8413e561346b3',
+                      displayName: 'EdX Exams',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@934cc32c177d41b580c8413e561346b3',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_f04afeac0131',
+                      displayName: 'Immediate Feedback',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_f04afeac0131',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@b6662b497c094bcc9b870d8270c90c93',
+                      displayName: 'Getting Answers',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@b6662b497c094bcc9b870d8270c90c93',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@f91d8d31f7cf48ce990f8d8745ae4cfa',
+                      displayName: 'Answering More Than Once',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@f91d8d31f7cf48ce990f8d8745ae4cfa',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_ac391cde8a91',
+                      displayName: 'Limited Checks',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_ac391cde8a91',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_36e0beb03f0a',
+                      displayName: 'Randomized Questions',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_36e0beb03f0a',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@1b0e2c2c84884b95b1c99fb678cc964c',
+                      displayName: 'Overall Grade Performance',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@1b0e2c2c84884b95b1c99fb678cc964c',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@c7e98fd39a6944edb6b286c32e1150ff',
+                      displayName: 'Passing a Course',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@c7e98fd39a6944edb6b286c32e1150ff',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6eaa391d2be41dea20b8b1bfbcb1c45',
+                      displayName: 'Getting Your edX Certificate',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6eaa391d2be41dea20b8b1bfbcb1c45',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: false,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+            ],
+          },
+          ancestorHasStaffLock: false,
+          staffOnlyMessage: false,
+          hasPartitionGroupComponents: false,
+          userPartitionInfo: {
+            selectablePartitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selectedPartitionIndex: -1,
+            selectedGroupsLabel: '',
+          },
+        },
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@46e11a7b395f45b9837df6c6ac609004',
+          displayName: 'Publish section',
+          category: 'chapter',
+          hasChildren: true,
+          editedOn: 'Aug 23, 2023 at 12:22 UTC',
+          published: true,
+          publishedOn: 'Aug 23, 2023 at 12:22 UTC',
+          studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%4046e11a7b395f45b9837df6c6ac609004',
+          releasedToStudents: false,
+          releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+          visibilityState: 'ready',
+          hasExplicitStaffLock: false,
+          start: '2023-11-09T22:00:00Z',
+          graded: false,
+          dueDate: '',
+          due: null,
+          relativeWeeksDue: null,
+          format: null,
+          courseGraders: [
+            'Homework',
+            'Exam',
+          ],
+          hasChanges: false,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatoryMessage: null,
+          groupAccess: {},
+          userPartitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          showCorrectness: 'always',
+          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',
+          childInfo: {
+            category: 'sequential',
+            displayName: 'Subsection',
+            children: [
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@1945e9656cbe4abe8f2020c67e9e1f61',
+                displayName: 'Subsection sub',
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Aug 23, 2023 at 11:32 UTC',
+                published: true,
+                publishedOn: 'Aug 23, 2023 at 11:33 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%401945e9656cbe4abe8f2020c67e9e1f61',
+                releasedToStudents: false,
+                releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+                visibilityState: 'ready',
+                hasExplicitStaffLock: false,
+                start: '2023-11-09T22:00:00Z',
+                graded: false,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: null,
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@b8149aa5af944aed8eebf9c7dc9f3d0b',
+                      displayName: 'Unit',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Aug 23, 2023 at 11:32 UTC',
+                      published: true,
+                      publishedOn: 'Aug 23, 2023 at 11:33 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@b8149aa5af944aed8eebf9c7dc9f3d0b',
+                      releasedToStudents: false,
+                      releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+                      visibilityState: 'ready',
+                      hasExplicitStaffLock: false,
+                      start: '2023-11-09T22:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: false,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+            ],
+          },
+          ancestorHasStaffLock: false,
+          staffOnlyMessage: false,
+          hasPartitionGroupComponents: false,
+          userPartitionInfo: {
+            selectablePartitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selectedPartitionIndex: -1,
+            selectedGroupsLabel: '',
+          },
+        },
+      ],
+    },
+    ancestorHasStaffLock: false,
+    staffOnlyMessage: false,
+    hasPartitionGroupComponents: false,
+    userPartitionInfo: {
+      selectablePartitions: [
+        {
+          id: 50,
+          name: 'Enrollment Track Groups',
+          scheme: 'enrollment_track',
+          groups: [
+            {
+              id: 2,
+              name: 'Verified Certificate',
+              selected: false,
+              deleted: false,
+            },
+            {
+              id: 1,
+              name: 'Audit',
+              selected: false,
+              deleted: false,
+            },
+          ],
+        },
+      ],
+      selectedPartitionIndex: -1,
+      selectedGroupsLabel: '',
+    },
+  },
+  deprecatedBlocksInfo: {
+    deprecatedEnabledBlockTypes: [],
+    blocks: [],
+    advanceSettingsUrl: '/settings/advanced/course-v1:edx+101+y76',
+  },
+  discussionsIncontextFeedbackUrl: '',
+  discussionsIncontextLearnmoreUrl: '',
+  initialState: {
+    expandedLocators: [
+      'block-v1:edx+101+y76+type@chapter+block@03de0adc9d1c4cc097062d80eb04abf6',
+      'block-v1:edx+101+y76+type@sequential+block@8a85e287e30a47e98d8c1f37f74a6a9d',
+    ],
+    locatorToShow: 'block-v1:edx+101+y76+type@chapter+block@03de0adc9d1c4cc097062d80eb04abf6',
+  },
+  languageCode: 'en',
+  lmsLink: '//localhost:18000/courses/course-v1:edx+101+y76/jump_to/block-v1:edx+101+y76+type@course+block@course',
+  mfeProctoredExamSettingsUrl: '',
+  notificationDismissUrl: '/course_notifications/course-v1:edx+101+y76/2',
+  proctoringErrors: [],
+  reindexLink: '/course/course-v1:edx+101+y76/search_reindex',
+  rerunNotificationId: 2,
+};
diff --git a/src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js b/src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js
new file mode 100644
index 0000000000..89a48492d9
--- /dev/null
+++ b/src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js
@@ -0,0 +1,25 @@
+module.exports = {
+  courseReleaseDate: 'Set Date',
+  courseStructure: {},
+  deprecatedBlocksInfo: {
+    deprecatedEnabledBlockTypes: [],
+    blocks: [],
+    advanceSettingsUrl: '/settings/advanced/course-v1:edx+101+y76',
+  },
+  discussionsIncontextFeedbackUrl: '',
+  discussionsIncontextLearnmoreUrl: '',
+  initialState: {
+    expandedLocators: [
+      'block-v1:edx+101+y76+type@chapter+block@03de0adc9d1c4cc097062d80eb04abf6',
+      'block-v1:edx+101+y76+type@sequential+block@8a85e287e30a47e98d8c1f37f74a6a9d',
+    ],
+    locatorToShow: 'block-v1:edx+101+y76+type@chapter+block@03de0adc9d1c4cc097062d80eb04abf6',
+  },
+  languageCode: 'en',
+  lmsLink: '//localhost:18000/courses/course-v1:edx+101+y76/jump_to/block-v1:edx+101+y76+type@course+block@course',
+  mfeProctoredExamSettingsUrl: '',
+  notificationDismissUrl: '/course_notifications/course-v1:edx+101+y76/2',
+  proctoringErrors: [],
+  reindexLink: '/course/course-v1:edx+101+y76/search_reindex',
+  rerunNotificationId: 2,
+};
diff --git a/src/course-outline/__mocks__/index.js b/src/course-outline/__mocks__/index.js
new file mode 100644
index 0000000000..e699605ef6
--- /dev/null
+++ b/src/course-outline/__mocks__/index.js
@@ -0,0 +1,4 @@
+export { default as courseOutlineIndexMock } from './courseOutlineIndex';
+export { default as courseOutlineIndexWithoutSections } from './courseOutlineIndexWithoutSections';
+export { default as courseBestPracticesMock } from './courseBestPractices';
+export { default as courseLaunchMock } from './courseLaunch';
diff --git a/src/course-outline/constants.js b/src/course-outline/constants.js
new file mode 100644
index 0000000000..cd4c58eeb4
--- /dev/null
+++ b/src/course-outline/constants.js
@@ -0,0 +1,59 @@
+export const CHECKLIST_FILTERS = {
+  ALL: 'ALL',
+  SELF_PACED: 'SELF_PACED',
+  INSTRUCTOR_PACED: 'INSTRUCTOR_PACED',
+};
+
+export const LAUNCH_CHECKLIST = {
+  data: [
+    {
+      id: 'welcomeMessage',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'gradingPolicy',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'certificate',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'courseDates',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'assignmentDeadlines',
+      pacingTypeFilter: CHECKLIST_FILTERS.INSTRUCTOR_PACED,
+    },
+    {
+      id: 'proctoringEmail',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+  ],
+};
+
+export const BEST_PRACTICES_CHECKLIST = {
+  data: [
+    {
+      id: 'videoDuration',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'mobileFriendlyVideo',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'diverseSequences',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'weeklyHighlights',
+      pacingTypeFilter: CHECKLIST_FILTERS.SELF_PACED,
+    },
+    {
+      id: 'unitDepth',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+  ],
+};
diff --git a/src/course-outline/data/api.js b/src/course-outline/data/api.js
new file mode 100644
index 0000000000..9b613bf81c
--- /dev/null
+++ b/src/course-outline/data/api.js
@@ -0,0 +1,107 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const getCourseOutlineIndexApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_index/${courseId}`;
+
+export const getCourseBestPracticesApiUrl = ({
+  courseId,
+  excludeGraded,
+  all,
+}) => `${getApiBaseUrl()}/api/courses/v1/quality/${courseId}/?exclude_graded=${excludeGraded}&all=${all}`;
+
+export const getCourseLaunchApiUrl = ({
+  courseId,
+  gradedOnly,
+  validateOras,
+  all,
+}) => `${getApiBaseUrl()}/api/courses/v1/validation/${courseId}/?graded_only=${gradedOnly}&validate_oras=${validateOras}&all=${all}`;
+
+export const getEnableHighlightsEmailsApiUrl = (courseId) => {
+  const formattedCourseId = courseId.split('course-v1:')[1];
+  return `${getApiBaseUrl()}/xblock/block-v1:${formattedCourseId}+type@course+block@course`;
+};
+
+export const getCourseReindexApiUrl = (reindexLink) => `${getApiBaseUrl()}${reindexLink}`;
+
+/**
+ * Get course outline index.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseOutlineIndex(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseOutlineIndexApiUrl(courseId));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Get course best practices.
+ * @param {string} courseId
+ * @param {boolean} excludeGraded
+ * @param {boolean} all
+ * @returns {Promise<Object>}
+ */
+export async function getCourseBestPractices({
+  courseId,
+  excludeGraded,
+  all,
+}) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseBestPracticesApiUrl({ courseId, excludeGraded, all }));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Get course launch.
+ * @param {string} courseId
+ * @param {boolean} gradedOnly
+ * @param {boolean} validateOras
+ * @param {boolean} all
+ * @returns {Promise<Object>}
+ */
+export async function getCourseLaunch({
+  courseId,
+  gradedOnly,
+  validateOras,
+  all,
+}) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseLaunchApiUrl({
+      courseId, gradedOnly, validateOras, all,
+    }));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Enable course highlights emails
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function enableCourseHighlightsEmails(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getEnableHighlightsEmailsApiUrl(courseId), {
+      publish: 'republish',
+      metadata: {
+        highlights_enabled_for_messaging: true,
+      },
+    });
+
+  return data;
+}
+
+/**
+ * Restart reindex course
+ * @param {string} reindexLink
+ * @returns {Promise<Object>}
+ */
+export async function restartIndexingOnCourse(reindexLink) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseReindexApiUrl(reindexLink));
+
+  return camelCaseObject(data);
+}
diff --git a/src/course-outline/data/selectors.js b/src/course-outline/data/selectors.js
new file mode 100644
index 0000000000..096723ce5d
--- /dev/null
+++ b/src/course-outline/data/selectors.js
@@ -0,0 +1,4 @@
+export const getOutlineIndexData = (state) => state.courseOutline.outlineIndexData;
+export const getLoadingStatus = (state) => state.courseOutline.loadingStatus;
+export const getStatusBarData = (state) => state.courseOutline.statusBarData;
+export const getSavingStatus = (state) => state.courseOutline.savingStatus;
diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
new file mode 100644
index 0000000000..ea08b47026
--- /dev/null
+++ b/src/course-outline/data/slice.js
@@ -0,0 +1,77 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'courseOutline',
+  initialState: {
+    loadingStatus: {
+      outlineIndexLoadingStatus: RequestStatus.IN_PROGRESS,
+      reIndexLoadingStatus: RequestStatus.IN_PROGRESS,
+    },
+    outlineIndexData: {},
+    savingStatus: '',
+    statusBarData: {
+      courseReleaseDate: '',
+      highlightsEnabledForMessaging: false,
+      highlightsDocUrl: '',
+      isSelfPaced: false,
+      checklist: {
+        totalCourseLaunchChecks: 0,
+        completedCourseLaunchChecks: 0,
+        totalCourseBestPracticesChecks: 0,
+        completedCourseBestPracticesChecks: 0,
+      },
+    },
+  },
+  reducers: {
+    fetchOutlineIndexSuccess: (state, { payload }) => {
+      state.outlineIndexData = payload;
+    },
+    updateOutlineIndexLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        outlineIndexLoadingStatus: payload.status,
+      };
+    },
+    updateReindexLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        reIndexLoadingStatus: payload.status,
+      };
+    },
+    updateStatusBar: (state, { payload }) => {
+      state.statusBarData = {
+        ...state.statusBarData,
+        ...payload,
+      };
+    },
+    fetchStatusBarChecklistSuccess: (state, { payload }) => {
+      state.statusBarData.checklist = {
+        ...state.statusBarData.checklist,
+        ...payload,
+      };
+    },
+    fetchStatusBarSelPacedSuccess: (state, { payload }) => {
+      state.statusBarData.isSelfPaced = payload.isSelfPaced;
+    },
+    updateSavingStatus: (state, { payload }) => {
+      state.savingStatus = payload.status;
+    },
+  },
+});
+
+export const {
+  fetchOutlineIndexSuccess,
+  updateOutlineIndexLoadingStatus,
+  updateReindexLoadingStatus,
+  updateStatusBar,
+  fetchStatusBarChecklistSuccess,
+  fetchStatusBarSelPacedSuccess,
+  updateSavingStatus,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
new file mode 100644
index 0000000000..194ae03d79
--- /dev/null
+++ b/src/course-outline/data/thunk.js
@@ -0,0 +1,104 @@
+import { RequestStatus } from '../../data/constants';
+import {
+  getCourseBestPracticesChecklist,
+  getCourseLaunchChecklist,
+} from '../utils/getChecklistForStatusBar';
+import {
+  enableCourseHighlightsEmails,
+  getCourseBestPractices,
+  getCourseLaunch,
+  getCourseOutlineIndex,
+  restartIndexingOnCourse,
+} from './api';
+import {
+  fetchOutlineIndexSuccess,
+  updateOutlineIndexLoadingStatus,
+  updateReindexLoadingStatus,
+  updateStatusBar,
+  fetchStatusBarChecklistSuccess,
+  fetchStatusBarSelPacedSuccess,
+  updateSavingStatus,
+} from './slice';
+
+export function fetchCourseOutlineIndexQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateOutlineIndexLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const outlineIndex = await getCourseOutlineIndex(courseId);
+      const { courseReleaseDate, courseStructure: { highlightsEnabledForMessaging, highlightsDocUrl } } = outlineIndex;
+      dispatch(fetchOutlineIndexSuccess(outlineIndex));
+      dispatch(updateStatusBar({ courseReleaseDate, highlightsEnabledForMessaging, highlightsDocUrl }));
+
+      dispatch(updateOutlineIndexLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateOutlineIndexLoadingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function fetchCourseLaunchQuery({
+  courseId,
+  gradedOnly = true,
+  validateOras = true,
+  all = true,
+}) {
+  return async (dispatch) => {
+    try {
+      const data = await getCourseLaunch({
+        courseId, gradedOnly, validateOras, all,
+      });
+      dispatch(fetchStatusBarSelPacedSuccess({ isSelfPaced: data.isSelfPaced }));
+      dispatch(fetchStatusBarChecklistSuccess(getCourseLaunchChecklist(data)));
+
+      return true;
+    } catch (error) {
+      return false;
+    }
+  };
+}
+
+export function fetchCourseBestPracticesQuery({
+  courseId,
+  excludeGraded = true,
+  all = true,
+}) {
+  return async (dispatch) => {
+    try {
+      const data = await getCourseBestPractices({ courseId, excludeGraded, all });
+      dispatch(fetchStatusBarChecklistSuccess(getCourseBestPracticesChecklist(data)));
+
+      return true;
+    } catch (error) {
+      return false;
+    }
+  };
+}
+
+export function enableCourseHighlightsEmailsQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      await enableCourseHighlightsEmails(courseId);
+      dispatch(fetchCourseOutlineIndexQuery(courseId));
+
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function fetchCourseReindexQuery(courseId, reindexLink) {
+  return async (dispatch) => {
+    dispatch(updateReindexLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      await restartIndexingOnCourse(reindexLink);
+      dispatch(updateReindexLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateReindexLoadingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
diff --git a/src/course-outline/enable-highlights-modal/EnableHighlightsModal.jsx b/src/course-outline/enable-highlights-modal/EnableHighlightsModal.jsx
new file mode 100644
index 0000000000..c7e4258aaa
--- /dev/null
+++ b/src/course-outline/enable-highlights-modal/EnableHighlightsModal.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow, AlertModal, Button, Hyperlink,
+} from '@edx/paragon';
+
+import messages from './messages';
+
+const EnableHighlightsModal = ({
+  onEnableHighlightsSubmit,
+  isOpen,
+  close,
+  highlightsDocUrl,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <AlertModal
+      title={intl.formatMessage(messages.title)}
+      variant="default"
+      size="lg"
+      isOpen={isOpen}
+      onClose={close}
+      footerNode={(
+        <ActionRow>
+          <Button variant="tertiary" onClick={close}>
+            {intl.formatMessage(messages.cancelButton)}
+          </Button>
+          <Button onClick={onEnableHighlightsSubmit}>
+            {intl.formatMessage(messages.submitButton)}
+          </Button>
+        </ActionRow>
+      )}
+    >
+      <p className="small">{intl.formatMessage(messages.description_1)}</p>
+      <p className="small">
+        {intl.formatMessage(messages.description_2)}
+        <Hyperlink
+          className="small ml-2 text-decoration-none"
+          destination={highlightsDocUrl}
+          target="_blank"
+          showLaunchIcon={false}
+        >
+          {intl.formatMessage(messages.link)}
+        </Hyperlink>
+      </p>
+    </AlertModal>
+  );
+};
+
+EnableHighlightsModal.propTypes = {
+  onEnableHighlightsSubmit: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  highlightsDocUrl: PropTypes.string.isRequired,
+};
+
+export default EnableHighlightsModal;
diff --git a/src/course-outline/enable-highlights-modal/EnableHighlightsModal.test.jsx b/src/course-outline/enable-highlights-modal/EnableHighlightsModal.test.jsx
new file mode 100644
index 0000000000..833631d034
--- /dev/null
+++ b/src/course-outline/enable-highlights-modal/EnableHighlightsModal.test.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import EnableHighlightsModal from './EnableHighlightsModal';
+import messages from './messages';
+
+const onEnableHighlightsSubmitMock = jest.fn();
+const closeMock = jest.fn();
+
+const highlightsDocUrl = 'https://example.com/';
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <EnableHighlightsModal
+      isOpen
+      close={closeMock}
+      onEnableHighlightsSubmit={onEnableHighlightsSubmitMock}
+      highlightsDocUrl={highlightsDocUrl}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<EnableHighlightsModal />', () => {
+  it('renders EnableHighlightsModal component correctly', () => {
+    const { getByText, getByRole } = renderComponent();
+
+    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.description_1.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.description_2.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.submitButton.defaultMessage })).toBeInTheDocument();
+
+    const hyperlink = getByText(messages.link.defaultMessage);
+    expect(hyperlink).toBeInTheDocument();
+    expect(hyperlink.href).toBe(highlightsDocUrl);
+  });
+
+  it('calls onEnableHighlightsSubmit function when the "Submit" button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const submitButton = getByRole('button', { name: messages.submitButton.defaultMessage });
+    fireEvent.click(submitButton);
+    expect(onEnableHighlightsSubmitMock).toHaveBeenCalled();
+  });
+
+  it('calls the close function when the "Cancel" button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const cancelButton = getByRole('button', { name: messages.cancelButton.defaultMessage });
+    fireEvent.click(cancelButton);
+    expect(closeMock).toHaveBeenCalled();
+  });
+});
diff --git a/src/course-outline/enable-highlights-modal/messages.js b/src/course-outline/enable-highlights-modal/messages.js
new file mode 100644
index 0000000000..dbad07e941
--- /dev/null
+++ b/src/course-outline/enable-highlights-modal/messages.js
@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.course-outline.status-bar.modal.title',
+    defaultMessage: 'Enable course highlight emails',
+  },
+  description_1: {
+    id: 'course-authoring.course-outline.status-bar.modal.description-1',
+    defaultMessage: 'When you enable course highlight emails, learners automatically receive email messages for each section that has highlights. You cannot disable highlights after you start sending them.',
+  },
+  description_2: {
+    id: 'course-authoring.course-outline.status-bar.modal.description-2',
+    defaultMessage: 'Are you sure you want to enable course highlight emails?',
+  },
+  link: {
+    id: 'course-authoring.course-outline.status-bar.modal.link',
+    defaultMessage: 'Learn more',
+  },
+  cancelButton: {
+    id: 'course-authoring.course-outline.status-bar.modal.cancelButton',
+    defaultMessage: 'Cancel',
+  },
+  submitButton: {
+    id: 'course-authoring.course-outline.status-bar.modal.submitButton',
+    defaultMessage: 'Enable',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/header-navigations/HeaderNavigations.jsx b/src/course-outline/header-navigations/HeaderNavigations.jsx
new file mode 100644
index 0000000000..57cdd693e2
--- /dev/null
+++ b/src/course-outline/header-navigations/HeaderNavigations.jsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, OverlayTrigger, Tooltip } from '@edx/paragon';
+import {
+  Add as IconAdd,
+  ArrowDropDown as ArrowDownIcon,
+  ArrowDropUp as ArrowUpIcon,
+} from '@edx/paragon/icons';
+
+import messages from './messages';
+
+const HeaderNavigations = ({
+  headerNavigationsActions,
+  isReIndexShow,
+  isSectionsExpanded,
+  isDisabledReindexButton,
+}) => {
+  const intl = useIntl();
+  const {
+    handleNewSection, handleReIndex, handleExpandAll, lmsLink,
+  } = headerNavigationsActions;
+
+  return (
+    <nav className="header-navigations ml-auto">
+      <OverlayTrigger
+        placement="bottom"
+        overlay={(
+          <Tooltip id={intl.formatMessage(messages.newSectionButtonTooltip)}>
+            {intl.formatMessage(messages.newSectionButtonTooltip)}
+          </Tooltip>
+        )}
+      >
+        <Button
+          iconBefore={IconAdd}
+          onClick={handleNewSection}
+        >
+          {intl.formatMessage(messages.newSectionButton)}
+        </Button>
+      </OverlayTrigger>
+      {isReIndexShow && (
+        <OverlayTrigger
+          placement="bottom"
+          overlay={!isDisabledReindexButton ? (
+            <Tooltip id={intl.formatMessage(messages.reindexButtonTooltip)}>
+              {intl.formatMessage(messages.reindexButtonTooltip)}
+            </Tooltip>
+          ) : <React.Fragment key="reindex close" />}
+        >
+          <Button
+            onClick={handleReIndex}
+            variant="outline-primary"
+            disabled={isDisabledReindexButton}
+          >
+            {intl.formatMessage(messages.reindexButton)}
+          </Button>
+        </OverlayTrigger>
+      )}
+      <Button
+        variant="outline-primary"
+        iconBefore={isSectionsExpanded ? ArrowUpIcon : ArrowDownIcon}
+        onClick={handleExpandAll}
+      >
+        {isSectionsExpanded
+          ? intl.formatMessage(messages.collapseAllButton)
+          : intl.formatMessage(messages.expandAllButton)}
+      </Button>
+      <OverlayTrigger
+        placement="bottom"
+        overlay={(
+          <Tooltip id={intl.formatMessage(messages.viewLiveButtonTooltip)}>
+            {intl.formatMessage(messages.viewLiveButtonTooltip)}
+          </Tooltip>
+        )}
+      >
+        <Button
+          href={lmsLink}
+          target="_blank"
+          variant="outline-primary"
+        >
+          {intl.formatMessage(messages.viewLiveButton)}
+        </Button>
+      </OverlayTrigger>
+    </nav>
+  );
+};
+
+HeaderNavigations.propTypes = {
+  isReIndexShow: PropTypes.bool.isRequired,
+  isSectionsExpanded: PropTypes.bool.isRequired,
+  isDisabledReindexButton: PropTypes.bool.isRequired,
+  headerNavigationsActions: PropTypes.shape({
+    handleNewSection: PropTypes.func.isRequired,
+    handleReIndex: PropTypes.func.isRequired,
+    handleExpandAll: PropTypes.func.isRequired,
+    lmsLink: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default HeaderNavigations;
diff --git a/src/course-outline/header-navigations/HeaderNavigations.scss b/src/course-outline/header-navigations/HeaderNavigations.scss
new file mode 100644
index 0000000000..e5867e8068
--- /dev/null
+++ b/src/course-outline/header-navigations/HeaderNavigations.scss
@@ -0,0 +1,4 @@
+.header-navigations {
+  display: flex;
+  gap: .75rem;
+}
diff --git a/src/course-outline/header-navigations/HeaderNavigations.test.jsx b/src/course-outline/header-navigations/HeaderNavigations.test.jsx
new file mode 100644
index 0000000000..6b0fde9ca8
--- /dev/null
+++ b/src/course-outline/header-navigations/HeaderNavigations.test.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import HeaderNavigations from './HeaderNavigations';
+import messages from './messages';
+
+const handleNewSectionMock = jest.fn();
+const handleReIndexMock = jest.fn();
+const handleExpandAllMock = jest.fn();
+
+const headerNavigationsActions = {
+  handleNewSection: handleNewSectionMock,
+  handleReIndex: handleReIndexMock,
+  handleExpandAll: handleExpandAllMock,
+  lmsLink: '',
+};
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <HeaderNavigations
+      headerNavigationsActions={headerNavigationsActions}
+      isSectionsExpanded={false}
+      isDisabledReindexButton={false}
+      isReIndexShow
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<HeaderNavigations />', () => {
+  it('render HeaderNavigations component correctly', () => {
+    const { getByRole } = renderComponent();
+
+    expect(getByRole('button', { name: messages.newSectionButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.reindexButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.expandAllButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.viewLiveButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('render HeaderNavigations component with isReIndexShow is false correctly', () => {
+    const { getByRole, queryByRole } = renderComponent({ isReIndexShow: false });
+
+    expect(getByRole('button', { name: messages.newSectionButton.defaultMessage })).toBeInTheDocument();
+    expect(queryByRole('button', { name: messages.reindexButton.defaultMessage })).not.toBeInTheDocument();
+    expect(getByRole('button', { name: messages.expandAllButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.viewLiveButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls the correct handlers when clicking buttons', () => {
+    const { getByRole } = renderComponent();
+
+    const newSectionButton = getByRole('button', { name: messages.newSectionButton.defaultMessage });
+    fireEvent.click(newSectionButton);
+    expect(handleNewSectionMock).toHaveBeenCalledTimes(1);
+
+    const reIndexButton = getByRole('button', { name: messages.reindexButton.defaultMessage });
+    fireEvent.click(reIndexButton);
+    expect(handleReIndexMock).toHaveBeenCalledTimes(1);
+
+    const expandAllButton = getByRole('button', { name: messages.expandAllButton.defaultMessage });
+    fireEvent.click(expandAllButton);
+    expect(handleExpandAllMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('render collapse button correctly', () => {
+    const { getByRole } = renderComponent({
+      isSectionsExpanded: true,
+    });
+
+    expect(getByRole('button', { name: messages.collapseAllButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('render expand button correctly', () => {
+    const { getByRole } = renderComponent({
+      isSectionsExpanded: false,
+    });
+
+    expect(getByRole('button', { name: messages.expandAllButton.defaultMessage })).toBeInTheDocument();
+  });
+});
diff --git a/src/course-outline/header-navigations/messages.js b/src/course-outline/header-navigations/messages.js
new file mode 100644
index 0000000000..588a2fa5d3
--- /dev/null
+++ b/src/course-outline/header-navigations/messages.js
@@ -0,0 +1,38 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  newSectionButton: {
+    id: 'course-authoring.course-outline.header-navigations.button.new-section',
+    defaultMessage: 'New section',
+  },
+  newSectionButtonTooltip: {
+    id: 'course-authoring.course-outline.header-navigations.button.new-section.tooltip',
+    defaultMessage: 'Click to add a new section',
+  },
+  reindexButton: {
+    id: 'course-authoring.course-outline.header-navigations.button.reindex',
+    defaultMessage: 'Reindex',
+  },
+  reindexButtonTooltip: {
+    id: 'course-authoring.course-outline.header-navigations.button.reindex.tooltip',
+    defaultMessage: 'Reindex current course',
+  },
+  expandAllButton: {
+    id: 'course-authoring.course-outline.header-navigations.button.expand-all',
+    defaultMessage: 'Expand all',
+  },
+  collapseAllButton: {
+    id: 'course-authoring.course-outline.header-navigations.button.collapse-all',
+    defaultMessage: 'Collapse all',
+  },
+  viewLiveButton: {
+    id: 'course-authoring.course-outline.header-navigations.button.view-live',
+    defaultMessage: 'View live',
+  },
+  viewLiveButtonTooltip: {
+    id: 'course-authoring.course-outline.header-navigations.button.view-live.tooltip',
+    defaultMessage: 'Click to open the courseware in the LMS in a new tab',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
new file mode 100644
index 0000000000..f96b84641c
--- /dev/null
+++ b/src/course-outline/hooks.jsx
@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useToggle } from '@edx/paragon';
+
+import { RequestStatus } from '../data/constants';
+import { updateSavingStatus } from './data/slice';
+import {
+  getLoadingStatus,
+  getOutlineIndexData,
+  getSavingStatus,
+  getStatusBarData,
+} from './data/selectors';
+import {
+  enableCourseHighlightsEmailsQuery,
+  fetchCourseBestPracticesQuery,
+  fetchCourseLaunchQuery,
+  fetchCourseOutlineIndexQuery,
+  fetchCourseReindexQuery,
+} from './data/thunk';
+
+const useCourseOutline = ({ courseId }) => {
+  const dispatch = useDispatch();
+
+  const { reindexLink, lmsLink } = useSelector(getOutlineIndexData);
+  const { outlineIndexLoadingStatus, reIndexLoadingStatus } = useSelector(getLoadingStatus);
+  const statusBarData = useSelector(getStatusBarData);
+  const savingStatus = useSelector(getSavingStatus);
+
+  const [isEnableHighlightsModalOpen, openEnableHighlightsModal, closeEnableHighlightsModal] = useToggle(false);
+  const [isSectionsExpanded, setSectionsExpanded] = useState(false);
+  const [isDisabledReindexButton, setDisableReindexButton] = useState(false);
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
+  const [showErrorAlert, setShowErrorAlert] = useState(false);
+
+  const headerNavigationsActions = {
+    handleNewSection: () => {
+      // TODO add handler
+    },
+    handleReIndex: () => {
+      setDisableReindexButton(true);
+      setShowSuccessAlert(false);
+      setShowErrorAlert(false);
+
+      dispatch(fetchCourseReindexQuery(courseId, reindexLink)).then(() => {
+        setDisableReindexButton(false);
+      });
+    },
+    handleExpandAll: () => {
+      setSectionsExpanded((prevState) => !prevState);
+    },
+    lmsLink,
+  };
+
+  const handleEnableHighlightsSubmit = () => {
+    dispatch(enableCourseHighlightsEmailsQuery(courseId));
+    closeEnableHighlightsModal();
+  };
+
+  const handleInternetConnectionFailed = () => {
+    dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+  };
+
+  useEffect(() => {
+    dispatch(fetchCourseOutlineIndexQuery(courseId));
+    dispatch(fetchCourseBestPracticesQuery({ courseId }));
+    dispatch(fetchCourseLaunchQuery({ courseId }));
+  }, [courseId]);
+
+  useEffect(() => {
+    if (reIndexLoadingStatus === RequestStatus.FAILED) {
+      setShowErrorAlert(true);
+    }
+
+    if (reIndexLoadingStatus === RequestStatus.SUCCESSFUL) {
+      setShowSuccessAlert(true);
+    }
+  }, [reIndexLoadingStatus]);
+
+  return {
+    savingStatus,
+    isLoading: outlineIndexLoadingStatus === RequestStatus.IN_PROGRESS,
+    isReIndexShow: Boolean(reindexLink),
+    showSuccessAlert,
+    showErrorAlert,
+    isDisabledReindexButton,
+    isSectionsExpanded,
+    headerNavigationsActions,
+    handleEnableHighlightsSubmit,
+    statusBarData,
+    isEnableHighlightsModalOpen,
+    openEnableHighlightsModal,
+    closeEnableHighlightsModal,
+    isInternetConnectionAlertFailed: savingStatus === RequestStatus.FAILED,
+    handleInternetConnectionFailed,
+  };
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { useCourseOutline };
diff --git a/src/course-outline/index.js b/src/course-outline/index.js
new file mode 100644
index 0000000000..fbb90f3e66
--- /dev/null
+++ b/src/course-outline/index.js
@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as CourseOutline } from './CourseOutline';
diff --git a/src/course-outline/messages.js b/src/course-outline/messages.js
new file mode 100644
index 0000000000..387b7f8ded
--- /dev/null
+++ b/src/course-outline/messages.js
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.course-outline.headingTitle',
+    defaultMessage: 'Course outline',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.course-outline.subTitle',
+    defaultMessage: 'Content',
+  },
+  alertSuccessTitle: {
+    id: 'course-authoring.course-outline.reindex.alert.success.title',
+    defaultMessage: 'Course index',
+  },
+  alertSuccessDescription: {
+    id: 'course-authoring.course-outline.reindex.alert.success.description',
+    defaultMessage: 'Course has been successfully reindexed.',
+  },
+  alertSuccessAriaLabelledby: {
+    id: 'course-authoring.course-outline.reindex.alert.success.aria.labelledby',
+    defaultMessage: 'alert-confirmation-title',
+  },
+  alertSuccessAriaDescribedby: {
+    id: 'course-authoring.course-outline.reindex.alert.success.aria.describedby',
+    defaultMessage: 'alert-confirmation-description',
+  },
+  alertErrorTitle: {
+    id: 'course-authoring.course-outline.reindex.alert.error.title',
+    defaultMessage: 'There were errors reindexing course.',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.jsx b/src/course-outline/outline-sidebar/OutlineSidebar.jsx
new file mode 100644
index 0000000000..0440ad6e52
--- /dev/null
+++ b/src/course-outline/outline-sidebar/OutlineSidebar.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Hyperlink } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import { useHelpUrls } from '../../help-urls/hooks';
+import { getFormattedSidebarMessages } from './utils';
+
+const OutlineSideBar = ({ courseId }) => {
+  const intl = useIntl();
+  const {
+    visibility: learnMoreVisibilityUrl,
+    grading: learnMoreGradingUrl,
+    outline: learnMoreOutlineUrl,
+  } = useHelpUrls(['visibility', 'grading', 'outline']);
+
+  const sidebarMessages = getFormattedSidebarMessages(
+    {
+      learnMoreGradingUrl,
+      learnMoreOutlineUrl,
+      learnMoreVisibilityUrl,
+    },
+    intl,
+  );
+
+  return (
+    <HelpSidebar
+      intl={intl}
+      courseId={courseId}
+      showOtherSettings={false}
+      className="outline-sidebar mt-4"
+      data-testid="outline-sidebar"
+    >
+      {sidebarMessages.map(({ title, descriptions, link }, index) => {
+        const isLastSection = index === sidebarMessages.length - 1;
+
+        return (
+          <div className="outline-sidebar-section" key={title}>
+            <h4 className="help-sidebar-about-title">{title}</h4>
+            {descriptions.map((description) => (
+              <p className="help-sidebar-about-descriptions" key={description}>{description}</p>
+            ))}
+            {Boolean(link) && Boolean(link.href) && (
+              <Hyperlink
+                className="small"
+                destination={link.href}
+                target="_blank"
+                showLaunchIcon={false}
+              >
+                {link.text}
+              </Hyperlink>
+            )}
+            {!isLastSection && <hr className="my-3.5" />}
+          </div>
+        );
+      })}
+    </HelpSidebar>
+  );
+};
+
+OutlineSideBar.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default OutlineSideBar;
diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.test.jsx b/src/course-outline/outline-sidebar/OutlineSidebar.test.jsx
new file mode 100644
index 0000000000..0df0095bbb
--- /dev/null
+++ b/src/course-outline/outline-sidebar/OutlineSidebar.test.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { helpUrls } from '../../help-urls/__mocks__';
+import { getHelpUrlsApiUrl } from '../../help-urls/data/api';
+import initializeStore from '../../store';
+import OutlineSidebar from './OutlineSidebar';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <OutlineSidebar courseId={courseId} {...props} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<OutlineSidebar />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getHelpUrlsApiUrl())
+      .reply(200, helpUrls);
+  });
+
+  it('render OutlineSidebar component correctly', async () => {
+    const { getByText } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(messages.section_1_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_1_descriptions_1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_1_descriptions_2.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.section_2_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_2_descriptions_1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_2_link.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.section_3_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_3_descriptions_1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_3_link.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.section_4_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_4_descriptions_1.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.section_4_descriptions_2.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_4_descriptions_3.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.section_4_link.defaultMessage)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/course-outline/outline-sidebar/messages.js b/src/course-outline/outline-sidebar/messages.js
new file mode 100644
index 0000000000..7ef0cf0cfb
--- /dev/null
+++ b/src/course-outline/outline-sidebar/messages.js
@@ -0,0 +1,70 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  section_1_title: {
+    id: 'course-authoring.course-outline.sidebar.section-1.title',
+    defaultMessage: 'Creating your course organization',
+  },
+  section_1_descriptions_1: {
+    id: 'course-authoring.course-outline.sidebar.section-1.descriptions-1',
+    defaultMessage: 'You add sections, subsections, and units directly in the outline.',
+  },
+  section_1_descriptions_2: {
+    id: 'course-authoring.course-outline.sidebar.section-1.descriptions-2',
+    defaultMessage: 'Create a section, then add subsections and units. Open a unit to add course components.',
+  },
+  section_2_title: {
+    id: 'course-authoring.course-outline.sidebar.section-2.title',
+    defaultMessage: 'Reorganizing your course',
+  },
+  section_2_descriptions_1: {
+    id: 'course-authoring.course-outline.sidebar.section-2.descriptions-1',
+    defaultMessage: 'Drag sections, subsections, and units to new locations in the outline.',
+  },
+  section_2_link: {
+    id: 'course-authoring.course-outline.sidebar.section-2.link',
+    defaultMessage: 'Learn more about the course outline',
+  },
+  section_3_title: {
+    id: 'course-authoring.course-outline.sidebar.section-3.title',
+    defaultMessage: 'Setting release dates and grading policies',
+  },
+  section_3_descriptions_1: {
+    id: 'course-authoring.course-outline.sidebar.section-3.descriptions-1',
+    defaultMessage: 'Select the Configure icon for a section or subsection to set its release date. When you configure a subsection, you can also set the grading policy and due date.',
+  },
+  section_3_link: {
+    id: 'course-authoring.course-outline.sidebar.section-3.link',
+    defaultMessage: 'Learn more about grading policy settings',
+  },
+  section_4_title: {
+    id: 'course-authoring.course-outline.sidebar.section-4.title',
+    defaultMessage: 'Changing the content learners see',
+  },
+  section_4_descriptions_1: {
+    id: 'course-authoring.course-outline.sidebar.section-4.descriptions-1',
+    defaultMessage: 'To publish draft content, select the Publish icon for a section, subsection, or unit.',
+  },
+  section_4_descriptions_2: {
+    id: 'course-authoring.course-outline.sidebar.section-4.descriptions-2',
+    defaultMessage: 'To make a section, subsection, or unit unavailable to learners, select the Configure icon for that level, then select the appropriate {hide} option. Grades for hidden sections, subsections, and units are not included in grade calculations.',
+  },
+  section_4_descriptions_2_hide: {
+    id: 'course-authoring.course-outline.sidebar.section-4.descriptions-2.hide',
+    defaultMessage: 'Hide',
+  },
+  section_4_descriptions_3: {
+    id: 'course-authoring.course-outline.sidebar.section-4.descriptions-3',
+    defaultMessage: 'To hide the content of a subsection from learners after the subsection due date has passed, select the Configure icon for a subsection, then select {hide}. Grades for the subsection remain included in grade calculations.',
+  },
+  section_4_descriptions_3_hide: {
+    id: 'course-authoring.course-outline.sidebar.section-4.descriptions-3.hide',
+    defaultMessage: 'Hide content after due date',
+  },
+  section_4_link: {
+    id: 'course-authoring.course-outline.sidebar.section-4.link',
+    defaultMessage: 'Learn more about content visibility settings',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/outline-sidebar/utils.jsx b/src/course-outline/outline-sidebar/utils.jsx
new file mode 100644
index 0000000000..29782a22c6
--- /dev/null
+++ b/src/course-outline/outline-sidebar/utils.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import messages from './messages';
+
+/**
+ * Get formatted sidebar messages for render
+ * @param {object} docsLinks - Docs links object from store
+ * @returns {Array<{
+ *   title: string,
+ *   descriptions: Array<string>,
+ *   link?: {
+ *     text: string,
+ *     href: string
+ *   }
+ * }>}
+ */
+const getFormattedSidebarMessages = (docsLinks, intl) => {
+  const { learnMoreOutlineUrl, learnMoreGradingUrl, learnMoreVisibilityUrl } = docsLinks;
+
+  return [
+    {
+      title: intl.formatMessage(messages.section_1_title),
+      descriptions: [
+        intl.formatMessage(messages.section_1_descriptions_1),
+        intl.formatMessage(messages.section_1_descriptions_2),
+      ],
+    },
+    {
+      title: intl.formatMessage(messages.section_2_title),
+      descriptions: [
+        intl.formatMessage(messages.section_2_descriptions_1),
+      ],
+      link: {
+        text: intl.formatMessage(messages.section_2_link),
+        href: learnMoreOutlineUrl,
+      },
+    },
+    {
+      title: intl.formatMessage(messages.section_3_title),
+      descriptions: [
+        intl.formatMessage(messages.section_3_descriptions_1),
+      ],
+      link: {
+        text: intl.formatMessage(messages.section_3_link),
+        href: learnMoreGradingUrl,
+      },
+    },
+    {
+      title: intl.formatMessage(messages.section_4_title),
+      descriptions: [
+        intl.formatMessage(messages.section_4_descriptions_1),
+        intl.formatMessage(
+          messages.section_4_descriptions_2,
+          { hide: <strong>{intl.formatMessage(messages.section_4_descriptions_2_hide)}</strong> },
+        ),
+        intl.formatMessage(
+          messages.section_4_descriptions_3,
+          { hide: <strong>{intl.formatMessage(messages.section_4_descriptions_3_hide)}</strong> },
+        ),
+      ],
+      link: {
+        text: intl.formatMessage(messages.section_4_link),
+        href: learnMoreVisibilityUrl,
+      },
+    },
+  ];
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { getFormattedSidebarMessages };
diff --git a/src/course-outline/status-bar/StatusBar.jsx b/src/course-outline/status-bar/StatusBar.jsx
new file mode 100644
index 0000000000..62d28f0430
--- /dev/null
+++ b/src/course-outline/status-bar/StatusBar.jsx
@@ -0,0 +1,116 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Hyperlink, Stack } from '@edx/paragon';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import messages from './messages';
+
+const StatusBar = ({
+  statusBarData,
+  isLoading,
+  courseId,
+  openEnableHighlightsModal,
+}) => {
+  const intl = useIntl();
+  const { config } = useContext(AppContext);
+
+  const {
+    courseReleaseDate,
+    highlightsEnabledForMessaging,
+    highlightsDocUrl,
+    checklist,
+    isSelfPaced,
+  } = statusBarData;
+
+  const {
+    completedCourseLaunchChecks,
+    completedCourseBestPracticesChecks,
+    totalCourseLaunchChecks,
+    totalCourseBestPracticesChecks,
+  } = checklist;
+
+  const checkListTitle = `${completedCourseLaunchChecks + completedCourseBestPracticesChecks}/${totalCourseLaunchChecks + totalCourseBestPracticesChecks}`;
+  const checklistDestination = new URL(`checklists/${courseId}`, config.STUDIO_BASE_URL).href;
+  const scheduleDestination = new URL(`course/${courseId}/settings/details#schedule`, config.BASE_URL).href;
+
+  if (isLoading) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <></>;
+  }
+
+  return (
+    <Stack direction="horizontal" gap={3.5} className="outline-status-bar" data-testid="outline-status-bar">
+      <div className="outline-status-bar__item">
+        <h5>{intl.formatMessage(messages.startDateTitle)}</h5>
+        <Hyperlink
+          className="small"
+          destination={scheduleDestination}
+          showLaunchIcon={false}
+        >
+          {courseReleaseDate}
+        </Hyperlink>
+      </div>
+      <div className="outline-status-bar__item">
+        <h5>{intl.formatMessage(messages.pacingTypeTitle)}</h5>
+        <span className="small">
+          {isSelfPaced
+            ? intl.formatMessage(messages.pacingTypeSelfPaced)
+            : intl.formatMessage(messages.pacingTypeInstructorPaced)}
+        </span>
+      </div>
+      <div className="outline-status-bar__item mr-4">
+        <h5>{intl.formatMessage(messages.checklistTitle)}</h5>
+        <Hyperlink
+          className="small"
+          destination={checklistDestination}
+          showLaunchIcon={false}
+        >
+          {checkListTitle} {intl.formatMessage(messages.checklistCompleted)}
+        </Hyperlink>
+      </div>
+      <div className="outline-status-bar__item ml-4">
+        <h5>{intl.formatMessage(messages.highlightEmailsTitle)}</h5>
+        <div className="d-flex align-items-end">
+          {highlightsEnabledForMessaging ? (
+            <span data-testid="highlights-enabled-span" className="small">
+              {intl.formatMessage(messages.highlightEmailsEnabled)}
+            </span>
+          ) : (
+            <Button size="sm" onClick={openEnableHighlightsModal}>
+              {intl.formatMessage(messages.highlightEmailsButton)}
+            </Button>
+          )}
+          <Hyperlink
+            className="small ml-2"
+            destination={highlightsDocUrl}
+            target="_blank"
+            showLaunchIcon={false}
+          >
+            {intl.formatMessage(messages.highlightEmailsLink)}
+          </Hyperlink>
+        </div>
+      </div>
+    </Stack>
+  );
+};
+
+StatusBar.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  openEnableHighlightsModal: PropTypes.func.isRequired,
+  statusBarData: PropTypes.shape({
+    courseReleaseDate: PropTypes.string.isRequired,
+    isSelfPaced: PropTypes.bool.isRequired,
+    checklist: PropTypes.shape({
+      totalCourseLaunchChecks: PropTypes.number.isRequired,
+      completedCourseLaunchChecks: PropTypes.number.isRequired,
+      totalCourseBestPracticesChecks: PropTypes.number.isRequired,
+      completedCourseBestPracticesChecks: PropTypes.number.isRequired,
+    }),
+    highlightsEnabledForMessaging: PropTypes.bool.isRequired,
+    highlightsDocUrl: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default StatusBar;
diff --git a/src/course-outline/status-bar/StatusBar.scss b/src/course-outline/status-bar/StatusBar.scss
new file mode 100644
index 0000000000..873abef83b
--- /dev/null
+++ b/src/course-outline/status-bar/StatusBar.scss
@@ -0,0 +1,12 @@
+.outline-status-bar {
+  .outline-status-bar__item {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    min-height: 3.75rem;
+
+    & h5 {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/src/course-outline/status-bar/StatusBar.test.jsx b/src/course-outline/status-bar/StatusBar.test.jsx
new file mode 100644
index 0000000000..64cd617a5e
--- /dev/null
+++ b/src/course-outline/status-bar/StatusBar.test.jsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import StatusBar from './StatusBar';
+import messages from './messages';
+import initializeStore from '../../store';
+
+let store;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+const isLoading = false;
+const openEnableHighlightsModalMock = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const statusBarData = {
+  courseReleaseDate: 'Feb 05, 2013 at 05:00 UTC',
+  isSelfPaced: true,
+  checklist: {
+    totalCourseLaunchChecks: 5,
+    completedCourseLaunchChecks: 1,
+    totalCourseBestPracticesChecks: 4,
+    completedCourseBestPracticesChecks: 1,
+  },
+  highlightsEnabledForMessaging: true,
+  highlightsDocUrl: 'https://example.com/highlights-doc',
+};
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <StatusBar
+        courseId={courseId}
+        isLoading={isLoading}
+        openEnableHighlightsModal={openEnableHighlightsModalMock}
+        statusBarData={statusBarData}
+        {...props}
+      />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<StatusBar />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('renders StatusBar component correctly', () => {
+    const { getByText } = renderComponent();
+
+    expect(getByText(messages.startDateTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(statusBarData.courseReleaseDate)).toBeInTheDocument();
+
+    expect(getByText(messages.pacingTypeTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.pacingTypeSelfPaced.defaultMessage)).toBeInTheDocument();
+
+    expect(getByText(messages.checklistTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(`2/9 ${messages.checklistCompleted.defaultMessage}`)).toBeInTheDocument();
+
+    expect(getByText(messages.highlightEmailsTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.highlightEmailsLink.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.highlightEmailsEnabled.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders StatusBar when isSelfPaced is false', () => {
+    const { getByText } = renderComponent({
+      statusBarData: {
+        ...statusBarData,
+        isSelfPaced: false,
+      },
+    });
+
+    expect(getByText(messages.pacingTypeInstructorPaced.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls openEnableHighlightsModal function when the "Enable Highlight Emails" button is clicked', () => {
+    const { getByRole } = renderComponent({
+      statusBarData: {
+        ...statusBarData,
+        highlightsEnabledForMessaging: false,
+      },
+    });
+
+    const enableHighlightsButton = getByRole('button', { name: messages.highlightEmailsButton.defaultMessage });
+    fireEvent.click(enableHighlightsButton);
+    expect(openEnableHighlightsModalMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('not render component when isLoading is true', () => {
+    const { queryByTestId } = renderComponent({
+      isLoading: true,
+    });
+
+    expect(queryByTestId('outline-status-bar')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/course-outline/status-bar/messages.js b/src/course-outline/status-bar/messages.js
new file mode 100644
index 0000000000..58ddb2bef3
--- /dev/null
+++ b/src/course-outline/status-bar/messages.js
@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  startDateTitle: {
+    id: 'course-authoring.course-outline.status-bar.start-date',
+    defaultMessage: 'Start date',
+  },
+  pacingTypeTitle: {
+    id: 'course-authoring.course-outline.status-bar.pacing-type',
+    defaultMessage: 'Pacing type',
+  },
+  pacingTypeSelfPaced: {
+    id: 'course-authoring.course-outline.status-bar.pacing-type.self-paced',
+    defaultMessage: 'Self-paced',
+  },
+  pacingTypeInstructorPaced: {
+    id: 'course-authoring.course-outline.status-bar.pacing-type.instructor-Paced',
+    defaultMessage: 'Instructor-paced',
+  },
+  checklistTitle: {
+    id: 'course-authoring.course-outline.status-bar.checklists',
+    defaultMessage: 'Checklists',
+  },
+  checklistCompleted: {
+    id: 'course-authoring.course-outline.status-bar.checklists.completed',
+    defaultMessage: 'completed',
+  },
+  highlightEmailsTitle: {
+    id: 'course-authoring.course-outline.status-bar.highlight-emails',
+    defaultMessage: 'Course highlight emails',
+  },
+  highlightEmailsButton: {
+    id: 'course-authoring.course-outline.status-bar.highlight-emails.button',
+    defaultMessage: 'Enable now',
+  },
+  highlightEmailsEnabled: {
+    id: 'course-authoring.course-outline.status-bar.highlight-emails.enabled',
+    defaultMessage: 'Enabled',
+  },
+  highlightEmailsLink: {
+    id: 'course-authoring.course-outline.status-bar.highlight-emails.link',
+    defaultMessage: 'Learn more',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/utils/courseChecklistValidators.js b/src/course-outline/utils/courseChecklistValidators.js
new file mode 100644
index 0000000000..20fae67a23
--- /dev/null
+++ b/src/course-outline/utils/courseChecklistValidators.js
@@ -0,0 +1,106 @@
+/**
+ * The utilities are taken from the https://github.com/openedx/studio-frontend repository.
+ * Perform a minor refactoring of the functions while preserving their original functionality.
+ */
+
+export const hasWelcomeMessage = (updates) => updates.hasUpdate;
+
+export const hasGradingPolicy = (grades) => {
+  // eslint-disable-next-line no-shadow
+  const { hasGradingPolicy, sumOfWeights } = grades;
+
+  return hasGradingPolicy && parseFloat(sumOfWeights.toPrecision(2), 10) === 1.0;
+};
+
+export const hasCertificate = (certificates) => {
+  // eslint-disable-next-line no-shadow
+  const { isActivated, hasCertificate } = certificates;
+
+  return isActivated && hasCertificate;
+};
+
+export const hasDates = (dates) => {
+  const { hasStartDate, hasEndDate } = dates;
+
+  return hasStartDate && hasEndDate;
+};
+
+export const hasAssignmentDeadlines = (assignments, dates) => {
+  const {
+    totalNumber,
+    assignmentsWithDatesBeforeStart,
+    assignmentsWithDatesAfterEnd,
+    assignmentsWithOraDatesBeforeStart,
+    assignmentsWithOraDatesAfterEnd,
+  } = assignments;
+
+  if (!hasDates(dates)) {
+    return false;
+  }
+  if (totalNumber === 0) {
+    return false;
+  }
+  if (assignmentsWithDatesBeforeStart.length > 0) {
+    return false;
+  }
+  if (assignmentsWithDatesAfterEnd.length > 0) {
+    return false;
+  }
+  if (assignmentsWithOraDatesBeforeStart.length > 0) {
+    return false;
+  }
+  if (assignmentsWithOraDatesAfterEnd.length > 0) {
+    return false;
+  }
+
+  return true;
+};
+
+export const hasShortVideoDuration = (videos) => {
+  const { totalNumber, durations } = videos;
+
+  if (totalNumber === 0) {
+    return true;
+  }
+  if (totalNumber > 0 && durations.median <= 600) {
+    return true;
+  }
+
+  return false;
+};
+
+export const hasMobileFriendlyVideos = (videos) => {
+  const { totalNumber, numMobileEncoded } = videos;
+
+  if (totalNumber === 0) {
+    return true;
+  }
+  if (totalNumber > 0 && (numMobileEncoded / totalNumber) >= 0.9) {
+    return true;
+  }
+
+  return false;
+};
+
+export const hasDiverseSequences = (subsections) => {
+  const { totalVisible, numWithOneBlockType } = subsections;
+
+  if (totalVisible === 0) {
+    return false;
+  }
+  if (totalVisible > 0) {
+    return ((numWithOneBlockType / totalVisible) < 0.2);
+  }
+
+  return false;
+};
+
+export const hasWeeklyHighlights = (sections) => {
+  const { highlightsActiveForCourse, highlightsEnabled } = sections;
+
+  return highlightsActiveForCourse && highlightsEnabled;
+};
+
+export const hasShortUnitDepth = (units) => units.numBlocks.median <= 3;
+
+export const hasProctoringEscalationEmail = (proctoring) => proctoring.hasProctoringEscalationEmail;
diff --git a/src/course-outline/utils/courseChecklistValidators.test.js b/src/course-outline/utils/courseChecklistValidators.test.js
new file mode 100644
index 0000000000..401475bc2f
--- /dev/null
+++ b/src/course-outline/utils/courseChecklistValidators.test.js
@@ -0,0 +1,297 @@
+import * as validators from './courseChecklistValidators';
+
+describe('courseCheckValidators utility functions', () => {
+  describe('hasWelcomeMessage', () => {
+    it('returns true when course run has an update', () => {
+      expect(validators.hasWelcomeMessage({ hasUpdate: true })).toEqual(true);
+    });
+
+    it('returns false when course run does not have an update', () => {
+      expect(validators.hasWelcomeMessage({ hasUpdate: false })).toEqual(false);
+    });
+  });
+
+  describe('hasGradingPolicy', () => {
+    it('returns true when sum of weights is 1', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 1 },
+      )).toEqual(true);
+    });
+
+    it('returns true when sum of weights is not 1 due to floating point approximation (1.00004)', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 1.00004 },
+      )).toEqual(true);
+    });
+
+    it('returns false when sum of weights is not 1', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 2 },
+      )).toEqual(false);
+    });
+
+    it('returns true when hasGradingPolicy is true', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 1 },
+      )).toEqual(true);
+    });
+
+    it('returns false when hasGradingPolicy is false', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: false, sumOfWeights: 1 },
+      )).toEqual(false);
+    });
+  });
+
+  describe('hasCertificate', () => {
+    it('returns true when certificates are activated and course run has a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: true, hasCertificate: true }))
+        .toEqual(true);
+    });
+
+    it('returns false when certificates are not activated and course run has a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: false, hasCertificate: true }))
+        .toEqual(false);
+    });
+
+    it('returns false when certificates are activated and course run does not have a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: true, hasCertificate: false }))
+        .toEqual(false);
+    });
+
+    it('returns false when certificates are not activated and course run does not have a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: false, hasCertificate: false }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasDates', () => {
+    it('returns true when course run has start date and end date', () => {
+      expect(validators.hasDates({ hasStartDate: true, hasEndDate: true })).toEqual(true);
+    });
+
+    it('returns false when course run has no start date and end date', () => {
+      expect(validators.hasDates({ hasStartDate: false, hasEndDate: true })).toEqual(false);
+    });
+
+    it('returns true when course run has start date and no end date', () => {
+      expect(validators.hasDates({ hasStartDate: true, hasEndDate: false })).toEqual(false);
+    });
+
+    it('returns true when course run has no start date and no end date', () => {
+      expect(validators.hasDates({ hasStartDate: false, hasEndDate: false })).toEqual(false);
+    });
+  });
+
+  describe('hasAssignmentDeadlines', () => {
+    it('returns true when a course run has start and end date and all assignments are within range', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(true);
+    });
+
+    it('returns false when a course run has no start and no end date', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {},
+        {
+          hasStartDate: false,
+          hasEndDate: false,
+        },
+      )).toEqual(false);
+    });
+
+    it('returns false when a course has start and end date and no assignments', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          totalNumber: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    });
+
+    it('returns false when a course run has start and end date and assignments before start', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: ['test'],
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    });
+
+    it('returns false when a course run has start and end date and assignments after end', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: ['test'],
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    });
+  });
+
+  it(
+    'returns false when a course run has start and end date and an ora with a date before start',
+    () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: ['test'],
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    },
+  );
+
+  it(
+    'returns false when a course run has start and end date and an ora with a date after end',
+    () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: ['test'],
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    },
+  );
+
+  describe('hasShortVideoDuration', () => {
+    it('returns true if course run has no videos', () => {
+      expect(validators.hasShortVideoDuration({ totalNumber: 0 })).toEqual(true);
+    });
+
+    it('returns true if course run videos have a median duration <= to 600', () => {
+      expect(validators.hasShortVideoDuration({ totalNumber: 1, durations: { median: 100 } }))
+        .toEqual(true);
+    });
+
+    it('returns true if course run videos have a median duration > to 600', () => {
+      expect(validators.hasShortVideoDuration({ totalNumber: 10, durations: { median: 700 } }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasMobileFriendlyVideos', () => {
+    it('returns true if course run has no videos', () => {
+      expect(validators.hasMobileFriendlyVideos({ totalNumber: 0 })).toEqual(true);
+    });
+
+    it('returns true if course run videos are >= 90% mobile friendly', () => {
+      expect(validators.hasMobileFriendlyVideos({ totalNumber: 10, numMobileEncoded: 9 }))
+        .toEqual(true);
+    });
+
+    it('returns true if course run videos are < 90% mobile friendly', () => {
+      expect(validators.hasMobileFriendlyVideos({ totalNumber: 10, numMobileEncoded: 8 }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasDiverseSequences', () => {
+    it('returns true if < 20% of visible subsections have more than one block type', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: 10, numWithOneBlockType: 1 }))
+        .toEqual(true);
+    });
+
+    it('returns false if no visible subsections', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: 0 })).toEqual(false);
+    });
+
+    it('returns false if >= 20% of visible subsections have more than one block type', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: 10, numWithOneBlockType: 3 }))
+        .toEqual(false);
+    });
+
+    it('return false if < 0 visible subsections', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: -1, numWithOneBlockType: 1 }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasWeeklyHighlights', () => {
+    it('returns true when course run has highlights enabled', () => {
+      const data = { highlightsActiveForCourse: true, highlightsEnabled: true };
+      expect(validators.hasWeeklyHighlights(data)).toEqual(true);
+    });
+
+    it('returns false when course run has highlights enabled', () => {
+      const data = { highlightsActiveForCourse: false, highlightsEnabled: false };
+      expect(validators.hasWeeklyHighlights(data)).toEqual(false);
+
+      data.highlightsEnabled = true;
+      data.highlightsActiveForCourse = false;
+      expect(validators.hasWeeklyHighlights(data)).toEqual(false);
+
+      data.highlightsEnabled = false;
+      data.highlightsActiveForCourse = true;
+      expect(validators.hasWeeklyHighlights(data)).toEqual(false);
+    });
+  });
+
+  describe('hasShortUnitDepth', () => {
+    it('returns true when course run has median number of blocks <= 3', () => {
+      const units = {
+        numBlocks: {
+          median: 3,
+        },
+      };
+
+      expect(validators.hasShortUnitDepth(units)).toEqual(true);
+    });
+
+    it('returns false when course run has median number of blocks > 3', () => {
+      const units = {
+        numBlocks: {
+          median: 4,
+        },
+      };
+
+      expect(validators.hasShortUnitDepth(units)).toEqual(false);
+    });
+  });
+
+  describe('hasProctoringEscalationEmail', () => {
+    it('returns true when the course has a proctoring escalation email', () => {
+      const proctoring = { hasProctoringEscalationEmail: true };
+      expect(validators.hasProctoringEscalationEmail(proctoring)).toEqual(true);
+    });
+
+    it('returns false when the course does not have a proctoring escalation email', () => {
+      const proctoring = { hasProctoringEscalationEmail: false };
+      expect(validators.hasProctoringEscalationEmail(proctoring)).toEqual(false);
+    });
+  });
+});
diff --git a/src/course-outline/utils/getChecklistForStatusBar.js b/src/course-outline/utils/getChecklistForStatusBar.js
new file mode 100644
index 0000000000..acab5d7eb3
--- /dev/null
+++ b/src/course-outline/utils/getChecklistForStatusBar.js
@@ -0,0 +1,79 @@
+import { LAUNCH_CHECKLIST, BEST_PRACTICES_CHECKLIST } from '../constants';
+import { getChecklistValues, getChecklistValidatedValue } from './getChecklistValues';
+
+/**
+ * Get status bar course launch checklist values
+ * @param {object} data - course launch data
+ * @returns {
+ *   totalCourseLaunchChecks: {number},
+ *   completedCourseLaunchChecks: {number}
+ * } - total and completed launch checklist items
+ */
+const getCourseLaunchChecklist = (data) => {
+  if (Object.keys(data).length > 0) {
+    const { isSelfPaced, certificates } = data;
+
+    const filteredCourseLaunchChecks = getChecklistValues({
+      checklist: LAUNCH_CHECKLIST.data,
+      isSelfPaced,
+      hasCertificatesEnabled: certificates.isEnabled,
+      hasHighlightsEnabled: false,
+    });
+
+    const completedCourseLaunchChecks = filteredCourseLaunchChecks.reduce((result, currentValue) => {
+      const value = getChecklistValidatedValue(data, currentValue.id);
+      return value ? result + 1 : result;
+    }, 0);
+
+    return {
+      totalCourseLaunchChecks: filteredCourseLaunchChecks.length,
+      completedCourseLaunchChecks,
+    };
+  }
+
+  return {
+    totalCourseLaunchChecks: 0,
+    completedCourseLaunchChecks: 0,
+  };
+};
+
+/**
+ * Get status bar course best practices checklist values
+ * @param {object} data - course best practices data
+ * @returns {
+ *   totalCourseBestPracticesChecks: {number},
+ *   completedCourseBestPracticesChecks: {number}
+ * } - total and completed launch checklist items
+ */
+const getCourseBestPracticesChecklist = (data) => {
+  if (Object.keys(data).length > 0) {
+    const { isSelfPaced, sections } = data;
+
+    const filteredBestPracticesChecks = getChecklistValues({
+      checklist: BEST_PRACTICES_CHECKLIST.data,
+      isSelfPaced,
+      hasCertificatesEnabled: false,
+      hasHighlightsEnabled: sections.highlightsEnadled,
+    });
+
+    const completedCourseBestPracticesChecks = filteredBestPracticesChecks.reduce((result, currentValue) => {
+      const value = getChecklistValidatedValue(data, currentValue.id);
+      return value ? result + 1 : result;
+    }, 0);
+
+    return {
+      totalCourseBestPracticesChecks: filteredBestPracticesChecks.length,
+      completedCourseBestPracticesChecks,
+    };
+  }
+
+  return {
+    totalCourseBestPracticesChecks: 0,
+    completedCourseBestPracticesChecks: 0,
+  };
+};
+
+export {
+  getCourseLaunchChecklist,
+  getCourseBestPracticesChecklist,
+};
diff --git a/src/course-outline/utils/getChecklistValues.js b/src/course-outline/utils/getChecklistValues.js
new file mode 100644
index 0000000000..2ddd965ce8
--- /dev/null
+++ b/src/course-outline/utils/getChecklistValues.js
@@ -0,0 +1,79 @@
+import { CHECKLIST_FILTERS } from '../constants';
+import * as healthValidators from './courseChecklistValidators';
+
+/**
+ * The utilities are taken from the https://github.com/openedx/studio-frontend repository.
+ * Perform a minor refactoring of the functions while preserving their original functionality.
+ */
+const getChecklistValidatedValue = (data, id) => {
+  const {
+    updates,
+    grades,
+    certificates,
+    dates,
+    assignments,
+    videos,
+    subsections,
+    sections,
+    units,
+    proctoring,
+  } = data;
+
+  switch (id) {
+  case 'welcomeMessage':
+    return healthValidators.hasWelcomeMessage(updates);
+  case 'gradingPolicy':
+    return healthValidators.hasGradingPolicy(grades);
+  case 'certificate':
+    return healthValidators.hasCertificate(certificates);
+  case 'courseDates':
+    return healthValidators.hasDates(dates);
+  case 'assignmentDeadlines':
+    return healthValidators.hasAssignmentDeadlines(assignments, dates);
+  case 'videoDuration':
+    return healthValidators.hasShortVideoDuration(videos);
+  case 'mobileFriendlyVideo':
+    return healthValidators.hasMobileFriendlyVideos(videos);
+  case 'diverseSequences':
+    return healthValidators.hasDiverseSequences(subsections);
+  case 'weeklyHighlights':
+    return healthValidators.hasWeeklyHighlights(sections);
+  case 'unitDepth':
+    return healthValidators.hasShortUnitDepth(units);
+  case 'proctoringEmail':
+    return healthValidators.hasProctoringEscalationEmail(proctoring);
+  default:
+    throw new Error(`Unknown validator ${id}.`);
+  }
+};
+
+const getChecklistValues = ({
+  checklist,
+  isSelfPaced,
+  hasCertificatesEnabled,
+  hasHighlightsEnabled,
+  needsProctoringEscalationEmail,
+}) => {
+  let filteredCheckList;
+
+  if (isSelfPaced) {
+    filteredCheckList = checklist.filter(({ pacingTypeFilter }) => pacingTypeFilter === CHECKLIST_FILTERS.ALL
+      || pacingTypeFilter === CHECKLIST_FILTERS.SELF_PACED);
+  } else {
+    filteredCheckList = checklist.filter(({ pacingTypeFilter }) => pacingTypeFilter === CHECKLIST_FILTERS.ALL
+      || pacingTypeFilter === CHECKLIST_FILTERS.INSTRUCTOR_PACED);
+  }
+
+  filteredCheckList = filteredCheckList.filter(({ id }) => id !== 'certificate'
+    || hasCertificatesEnabled);
+
+  filteredCheckList = filteredCheckList.filter(({ id }) => id !== 'weeklyHighlights'
+    || hasHighlightsEnabled);
+
+  filteredCheckList = filteredCheckList.filter(({ id }) => id !== 'proctoringEmail'
+    || needsProctoringEscalationEmail);
+
+  return filteredCheckList;
+};
+
+export { getChecklistValues, getChecklistValidatedValue };
diff --git a/src/course-outline/utils/getChecklistValues.test.js b/src/course-outline/utils/getChecklistValues.test.js
new file mode 100644
index 0000000000..24ac32e973
--- /dev/null
+++ b/src/course-outline/utils/getChecklistValues.test.js
@@ -0,0 +1,86 @@
+import { getChecklistValues } from './getChecklistValues';
+import { CHECKLIST_FILTERS } from '../constants';
+
+const checklist = [
+  {
+    id: 'welcomeMessage',
+    pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+  },
+  {
+    id: 'gradingPolicy',
+    pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+  },
+  {
+    id: 'certificate',
+    pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+  },
+  {
+    id: 'courseDates',
+    pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+  },
+  {
+    id: 'assignmentDeadlines',
+    pacingTypeFilter: CHECKLIST_FILTERS.INSTRUCTOR_PACED,
+  },
+  {
+    id: 'weeklyHighlights',
+    pacingTypeFilter: CHECKLIST_FILTERS.SELF_PACED,
+  },
+  {
+    id: 'proctoringEmail',
+    pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+  },
+];
+
+let courseData;
+describe('getChecklistValues utility function', () => {
+  beforeEach(() => {
+    courseData = {
+      isSelfPaced: true,
+      hasCertificatesEnabled: true,
+      hasHighlightsEnabled: true,
+      needsProctoringEscalationEmail: true,
+    };
+  });
+  it('returns only checklist items with filters ALL and SELF_PACED when isSelfPaced is true', () => {
+    const filteredChecklist = getChecklistValues({ checklist, ...courseData });
+
+    filteredChecklist.forEach(((
+      item => expect(item.pacingTypeFilter === CHECKLIST_FILTERS.ALL
+        || item.pacingTypeFilter === CHECKLIST_FILTERS.SELF_PACED)
+    )));
+
+    expect(filteredChecklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.ALL).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.ALL).length);
+    expect(filteredChecklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.SELF_PACED).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.SELF_PACED).length);
+  });
+
+  it('returns only checklist items with filters ALL and INSTRUCTOR_PACED when isSelfPaced is false', () => {
+    courseData.isSelfPaced = false;
+    const filteredChecklist = getChecklistValues({ checklist, ...courseData });
+
+    filteredChecklist.forEach(((
+      item => expect(item.pacingTypeFilter === CHECKLIST_FILTERS.ALL
+        || item.pacingTypeFilter === CHECKLIST_FILTERS.INSTRUCTOR_PACED)
+    )));
+
+    expect(filteredChecklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.ALL).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.ALL).length);
+    expect(filteredChecklist
+      .filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.INSTRUCTOR_PACED).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.INSTRUCTOR_PACED).length);
+  });
+
+  it('excludes weekly highlights when they are disabled', () => {
+    courseData.hasHighlightsEnabled = false;
+    const filteredChecklist = getChecklistValues({ checklist, ...courseData });
+    expect(filteredChecklist.filter(item => item.id === 'weeklyHighlights').length).toEqual(0);
+  });
+
+  it('excludes proctoring escalation email when not needed', () => {
+    courseData.needsProctoringEscalationEmail = false;
+    const filteredChecklist = getChecklistValues({ checklist, ...courseData });
+    expect(filteredChecklist.filter(item => item.id === 'proctoringEmail').length).toEqual(0);
+  });
+});
diff --git a/src/help-urls/__mocks__/helpUrls.js b/src/help-urls/__mocks__/helpUrls.js
new file mode 100644
index 0000000000..500c558176
--- /dev/null
+++ b/src/help-urls/__mocks__/helpUrls.js
@@ -0,0 +1,35 @@
+module.exports = {
+  default: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/index.html',
+  home: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/getting_started/CA_get_started_Studio.html',
+  develop_course: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/index.html',
+  outline: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_outline.html',
+  unit: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_units.html',
+  visibility: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/controlling_content_visibility.html',
+  updates: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_assets/handouts_updates.html',
+  pages: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_assets/pages.html',
+  files: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_assets/course_files.html',
+  textbooks: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_assets/textbooks.html',
+  schedule: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/set_up_course/studio_add_course_information/index.html',
+  grading: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/grading/index.html',
+  team_course: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/set_up_course/studio_add_course_information/studio_course_staffing.html',
+  team_library: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html#give-other-users-access-to-your-library',
+  advanced: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/index.html',
+  checklist: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/set_up_course/index.html',
+  import_library: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html#import-a-library',
+  import_course: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/releasing_course/export_import_course.html#import-a-course',
+  export_library: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html#export-a-library',
+  export_course: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/releasing_course/export_import_course.html#export-a-course',
+  welcome: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/getting_started/index.html',
+  login: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/getting_started/index.html',
+  register: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/getting_started/index.html',
+  content_libraries: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html',
+  content_groups: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_features/cohorts/cohorted_courseware.html',
+  enrollment_tracks: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_features/diff_content/enroll_track_courseware.html',
+  group_configurations: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_features/content_experiments/content_experiments_configure.html#set-up-group-configurations-in-edx-studio',
+  container: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_components.html#components-that-contain-other-components',
+  video: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/video/index.html',
+  certificates: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/set_up_course/studio_add_course_information/studio_creating_certificates.html',
+  content_highlights: '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',
+  image_accessibility: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/accessibility/best_practices_course_content_dev.html#use-best-practices-for-describing-images',
+  social_sharing: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/social_sharing.html',
+};
diff --git a/src/help-urls/__mocks__/index.js b/src/help-urls/__mocks__/index.js
new file mode 100644
index 0000000000..5acae05196
--- /dev/null
+++ b/src/help-urls/__mocks__/index.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as helpUrls } from './helpUrls';
diff --git a/src/help-urls/data/api.js b/src/help-urls/data/api.js
index 3243f5be33..b612aa419f 100644
--- a/src/help-urls/data/api.js
+++ b/src/help-urls/data/api.js
@@ -2,8 +2,10 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
+export const getHelpUrlsApiUrl = () => `${getConfig().STUDIO_BASE_URL}/api/contentstore/v1/help_urls`;
+
 export async function getHelpUrls() {
   const { data } = await getAuthenticatedHttpClient()
-    .get(`${getConfig().STUDIO_BASE_URL}/api/contentstore/v1/help_urls`);
+    .get(getHelpUrlsApiUrl());
   return camelCaseObject(data);
 }
diff --git a/src/hooks.js b/src/hooks.js
new file mode 100644
index 0000000000..d929bb35d3
--- /dev/null
+++ b/src/hooks.js
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { history } from '@edx/frontend-platform';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useScrollToHashElement = ({ isLoading }) => {
+  useEffect(() => {
+    const currentHash = window.location.hash;
+
+    if (currentHash) {
+      const element = document.querySelector(currentHash);
+
+      if (element) {
+        element.scrollIntoView();
+        history.replace({ hash: '' });
+      }
+    }
+  }, [isLoading]);
+};
diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json
index bb66c2a14d..79c292c0f3 100644
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json
index 030903219c..526e1f518e 100644
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/de_DE.json b/src/i18n/messages/de_DE.json
index 19c91690f8..ed2621dfe9 100644
--- a/src/i18n/messages/de_DE.json
+++ b/src/i18n/messages/de_DE.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/es_419.json b/src/i18n/messages/es_419.json
index 9296e7cceb..2312d83390 100644
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "¡Ya casi terminamos! Para completar su registro, necesitamos que verifique su dirección de correo electrónico ({email}). Un mensaje de activación y los pasos a seguir le estarán esperando allí.",
   "course-authoring.studio-home.verify-email.sidebar.title": "¿Necesita ayuda?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Por favor revise su correo no desado en caso de que nuestro correo no esté en su buzón de entrada. ¿Aún no encuentra el correo de verificación? Pida ayuda a través del vínculo siguiente."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
index d9629a30bc..786d42f27a 100644
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/fr_CA.json b/src/i18n/messages/fr_CA.json
index 201ab0edf5..e3e4b7a3ad 100644
--- a/src/i18n/messages/fr_CA.json
+++ b/src/i18n/messages/fr_CA.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Presque là! Afin de finaliser votre inscription, nous avons besoin que vous vérifiiez votre adresse courriel ({email}). Un message d’activation et les prochaines étapes devraient vous y attendre.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Besoin d'aide?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Merci de vérifier votre corbeille ou votre dossier de pourriel au cas où notre courriel ne se trouve pas dans votre boite de réception. Vous ne trouvez toujours pas le courriel de vérification? Demandez de l'aide via le lien ci-dessous."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/hi.json b/src/i18n/messages/hi.json
index 030903219c..526e1f518e 100644
--- a/src/i18n/messages/hi.json
+++ b/src/i18n/messages/hi.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/it.json b/src/i18n/messages/it.json
index 030903219c..526e1f518e 100644
--- a/src/i18n/messages/it.json
+++ b/src/i18n/messages/it.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/it_IT.json b/src/i18n/messages/it_IT.json
index 95f33456f3..0072e6110d 100644
--- a/src/i18n/messages/it_IT.json
+++ b/src/i18n/messages/it_IT.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/pt.json b/src/i18n/messages/pt.json
index 030903219c..526e1f518e 100644
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/pt_PT.json b/src/i18n/messages/pt_PT.json
index 35de444aad..97514b1a97 100644
--- a/src/i18n/messages/pt_PT.json
+++ b/src/i18n/messages/pt_PT.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json
index 030903219c..526e1f518e 100644
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/uk.json b/src/i18n/messages/uk.json
index 030903219c..526e1f518e 100644
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/zh_CN.json b/src/i18n/messages/zh_CN.json
index 030903219c..526e1f518e 100644
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -976,4 +976,4 @@
   "course-authoring.studio-home.verify-email.banner.description": "Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.",
   "course-authoring.studio-home.verify-email.sidebar.title": "Need help?",
   "course-authoring.studio-home.verify-email.sidebar.description": "Please check your Junk or Spam folders in case our email isn't in your INBOX. Still can't find the verification email? Request help via the link below."
-}
\ No newline at end of file
+}
diff --git a/src/index.scss b/src/index.scss
index a661c3da23..6b7a1f42ae 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -21,3 +21,4 @@
 @import "taxonomy/taxonomy-card/TaxonomyCard";
 @import "files-and-videos";
 @import "content-tags-drawer/TagBubble";
+@import "course-outline/CourseOutline";
diff --git a/src/schedule-and-details/index.jsx b/src/schedule-and-details/index.jsx
index 42e9893e17..06b66acbbf 100644
--- a/src/schedule-and-details/index.jsx
+++ b/src/schedule-and-details/index.jsx
@@ -16,6 +16,8 @@ import { useModel } from '../generic/model-store';
 import AlertMessage from '../generic/alert-message';
 import InternetConnectionAlert from '../generic/internet-connection-alert';
 import { STATEFUL_BUTTON_STATES } from '../constants';
+import getPageHeadTitle from '../generic/utils';
+import { useScrollToHashElement } from '../hooks';
 import {
   fetchCourseSettingsQuery,
   fetchCourseDetailsQuery,
@@ -40,7 +42,6 @@ import LicenseSection from './license-section';
 import ScheduleSidebar from './schedule-sidebar';
 import messages from './messages';
 import { useSaveValuesPrompt } from './hooks';
-import getPageHeadTitle from '../generic/utils';
 
 const ScheduleAndDetails = ({ intl, courseId }) => {
   const courseSettings = useSelector(getCourseSettings);
@@ -133,6 +134,8 @@ const ScheduleAndDetails = ({ intl, courseId }) => {
     dispatch(fetchCourseDetailsQuery(courseId));
   }, [courseId]);
 
+  useScrollToHashElement({ isLoading });
+
   if (isLoading) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return <></>;
diff --git a/src/schedule-and-details/requirements-section/entrance-exam/index.jsx b/src/schedule-and-details/requirements-section/entrance-exam/index.jsx
index a4064d5e51..9f33d4be0a 100644
--- a/src/schedule-and-details/requirements-section/entrance-exam/index.jsx
+++ b/src/schedule-and-details/requirements-section/entrance-exam/index.jsx
@@ -19,7 +19,7 @@ const EntranceExam = ({
   const toggleEntranceExam = () => onChange((!showEntranceExam).toString(), 'entranceExamEnabled');
   const courseOutlineDestination = getPagePath(
     courseId,
-    process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE,
+    'false',
     'course',
   );
 
diff --git a/src/schedule-and-details/schedule-section/index.jsx b/src/schedule-and-details/schedule-section/index.jsx
index 3af55b129a..e7098b3921 100644
--- a/src/schedule-and-details/schedule-section/index.jsx
+++ b/src/schedule-and-details/schedule-section/index.jsx
@@ -109,7 +109,7 @@ const ScheduleSection = ({
   ];
 
   return (
-    <section className="section-container schedule-section">
+    <section className="section-container schedule-section" id="schedule">
       <SectionSubHeader
         title={intl.formatMessage(messages.scheduleTitle)}
         description={intl.formatMessage(messages.scheduleDescription)}
diff --git a/src/store.js b/src/store.js
index bbdacb2548..c20e405193 100644
--- a/src/store.js
+++ b/src/store.js
@@ -19,6 +19,7 @@ import { reducer as courseExportReducer } from './export-page/data/slice';
 import { reducer as genericReducer } from './generic/data/slice';
 import { reducer as courseImportReducer } from './import-page/data/slice';
 import { reducer as videosReducer } from './files-and-videos/videos-page/data/slice';
+import { reducer as courseOutlineReducer } from './course-outline/data/slice';
 
 export default function initializeStore(preloadedState = undefined) {
   return configureStore({
@@ -42,6 +43,7 @@ export default function initializeStore(preloadedState = undefined) {
       generic: genericReducer,
       courseImport: courseImportReducer,
       videos: videosReducer,
+      courseOutline: courseOutlineReducer,
     },
     preloadedState,
   });

From 56ad86ee604fabee0578a79ab65dcdafe9884400 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Thu, 7 Dec 2023 12:30:15 -0500
Subject: [PATCH 08/13] feat: update usage metrics to be a hyperlink (#717)

---
 src/files-and-videos/files-page/FilesPage.test.jsx | 10 +++++++++-
 src/files-and-videos/files-page/data/thunks.js     |  4 +++-
 .../generic/UsageMetricsMessage.jsx                | 14 +++++++++++---
 .../videos-page/VideosPage.test.jsx                |  7 ++++++-
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/files-and-videos/files-page/FilesPage.test.jsx b/src/files-and-videos/files-page/FilesPage.test.jsx
index 9c5f7a46c2..da15d89690 100644
--- a/src/files-and-videos/files-page/FilesPage.test.jsx
+++ b/src/files-and-videos/files-page/FilesPage.test.jsx
@@ -339,7 +339,15 @@ describe('FilesAndUploads', () => {
         const assetMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
         expect(assetMenuButton).toBeVisible();
 
-        axiosMock.onGet(`${getAssetsUrl(courseId)}mOckID1/usage`).reply(201, { usage_locations: { mOckID1: ['subsection - unit / block'] } });
+        axiosMock.onGet(`${getAssetsUrl(courseId)}mOckID1/usage`)
+          .reply(201, {
+            usage_locations: {
+              mOckID1: [{
+                display_location: 'subsection - unit / block',
+                url: 'base/unit_id#block_id',
+              }],
+            },
+          });
         await waitFor(() => {
           fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
           fireEvent.click(screen.getByText('Info'));
diff --git a/src/files-and-videos/files-page/data/thunks.js b/src/files-and-videos/files-page/data/thunks.js
index 5dd502a0dc..90bdb5ab4f 100644
--- a/src/files-and-videos/files-page/data/thunks.js
+++ b/src/files-and-videos/files-page/data/thunks.js
@@ -1,4 +1,6 @@
 import { isEmpty } from 'lodash';
+import { camelCaseObject } from '@edx/frontend-platform';
+
 import { RequestStatus } from '../../../data/constants';
 import {
   addModel,
@@ -139,7 +141,7 @@ export function getUsagePaths({ asset, courseId }) {
         modelType: 'assets',
         model: {
           id: asset.id,
-          usageLocations: assetLocations,
+          usageLocations: camelCaseObject(assetLocations),
           activeStatus,
         },
       }));
diff --git a/src/files-and-videos/generic/UsageMetricsMessage.jsx b/src/files-and-videos/generic/UsageMetricsMessage.jsx
index 84354dcd70..fee391f094 100644
--- a/src/files-and-videos/generic/UsageMetricsMessage.jsx
+++ b/src/files-and-videos/generic/UsageMetricsMessage.jsx
@@ -1,6 +1,12 @@
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
-import { Icon, Row, Spinner } from '@edx/paragon';
+import {
+  Hyperlink,
+  Icon,
+  Row,
+  Spinner,
+} from '@edx/paragon';
 import { ErrorOutline } from '@edx/paragon/icons';
 import isEmpty from 'lodash/isEmpty';
 import { RequestStatus } from '../../data/constants';
@@ -20,8 +26,10 @@ const UsageMetricsMessage = ({
     ) : (
       <ul className="p-0">
         {usageLocations.map(location => (
-          <li key={`usage-location-${location}`} style={{ listStyle: 'none' }}>
-            {location}
+          <li key={`usage-location-${location.displayLocation}`} style={{ listStyle: 'none' }}>
+            <Hyperlink destination={`${getConfig().STUDIO_BASE_URL}${location.url}`} target="_blank">
+              {location.displayLocation}
+            </Hyperlink>
           </li>
         ))}
       </ul>
diff --git a/src/files-and-videos/videos-page/VideosPage.test.jsx b/src/files-and-videos/videos-page/VideosPage.test.jsx
index b645c0275a..d431aa7fc7 100644
--- a/src/files-and-videos/videos-page/VideosPage.test.jsx
+++ b/src/files-and-videos/videos-page/VideosPage.test.jsx
@@ -440,7 +440,12 @@ describe('FilesAndUploads', () => {
           expect(videoMenuButton).toBeVisible();
 
           axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`)
-            .reply(201, { usageLocations: ['subsection - unit / block'] });
+            .reply(201, {
+              usageLocations: [{
+                display_location: 'subsection - unit / block',
+                url: 'base/unit_id#block_id',
+              }],
+            });
           await waitFor(() => {
             fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
             fireEvent.click(screen.getByText('Info'));

From c9b73a50085a9f32c4465a2ed8cd317fd8aad72d Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf.musleh@gmail.com>
Date: Fri, 8 Dec 2023 11:25:57 +0300
Subject: [PATCH 09/13] feat: Add content tags tree state + editing (#704)

This commit adds the add/remove functionality of content tags where the
state is stored and changes are updated in the backend through the API.
Changes are reflected in the UI automatically.
---
 .../ContentTagsCollapsible.jsx                | 115 ++++++++--
 .../ContentTagsCollapsible.scss               |   4 +
 .../ContentTagsCollapsible.test.jsx           | 197 +++++++++++++++--
 .../ContentTagsCollapsibleHelper.jsx          | 206 ++++++++++++++++++
 src/content-tags-drawer/ContentTagsDrawer.jsx |  28 +--
 .../ContentTagsDrawer.test.jsx                |  95 ++++----
 .../ContentTagsDropDownSelector.jsx           |  84 ++++++-
 .../ContentTagsDropDownSelector.scss          |   9 +
 .../ContentTagsDropDownSelector.test.jsx      |  79 ++++---
 src/content-tags-drawer/ContentTagsTree.jsx   |  99 ++++-----
 .../ContentTagsTree.test.jsx                  |  59 +++--
 src/content-tags-drawer/TagBubble.jsx         |  32 ++-
 src/content-tags-drawer/TagBubble.scss        |  16 +-
 src/content-tags-drawer/TagBubble.test.jsx    |  66 ++++--
 src/content-tags-drawer/TagOutlineIcon.jsx    |   1 -
 src/content-tags-drawer/__mocks__/index.js    |   1 +
 .../updateContentTaxonomyTagsMock.js          |  25 +++
 src/content-tags-drawer/data/api.js           |  16 +-
 src/content-tags-drawer/data/api.test.js      |  23 +-
 src/content-tags-drawer/data/apiHooks.jsx     | 114 ++++------
 .../data/apiHooks.test.jsx                    | 139 +++++-------
 src/content-tags-drawer/messages.js           |   4 +
 22 files changed, 988 insertions(+), 424 deletions(-)
 create mode 100644 src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
 create mode 100644 src/content-tags-drawer/__mocks__/updateContentTaxonomyTagsMock.js

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
index 5e27f8291c..2337af8db2 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -17,10 +17,79 @@ import ContentTagsDropDownSelector from './ContentTagsDropDownSelector';
 
 import ContentTagsTree from './ContentTagsTree';
 
+import useContentTagsCollapsibleHelper from './ContentTagsCollapsibleHelper';
+
 /**
  * Collapsible component that holds a Taxonomy along with Tags that belong to it.
  * This includes both applied tags and tags that are available to select
  * from a dropdown list.
+ *
+ * This component also handles all the logic with selecting/deselecting tags and keeps track of the
+ * tags tree in the state. That is used to render the Tag bubbgles as well as the populating the
+ * state of the tags in the dropdown selectors.
+ *
+ * The `contentTags` that is passed are consolidated and converted to a tree structure. For example:
+ *
+ * FROM:
+ *
+ * [
+ *   {
+ *     "value": "DNA Sequencing",
+ *     "lineage": [
+ *       "Science and Research",
+ *       "Genetics Subcategory",
+ *       "DNA Sequencing"
+ *     ]
+ *   },
+ *   {
+ *     "value": "Virology",
+ *     "lineage": [
+ *       "Science and Research",
+ *       "Molecular, Cellular, and Microbiology",
+ *       "Virology"
+ *     ]
+ *   }
+ * ]
+ *
+ * TO:
+ *
+ * {
+ *   "Science and Research": {
+ *     explicit: false,
+ *     children: {
+ *       "Genetics Subcategory": {
+ *         explicit: false,
+ *         children: {
+ *           "DNA Sequencing": {
+ *             explicit: true,
+ *             children: {}
+ *           }
+ *         }
+ *       },
+ *       "Molecular, Cellular, and Microbiology": {
+ *         explicit: false,
+ *         children: {
+ *           "Virology": {
+ *             explicit: true,
+ *             children: {}
+ *           }
+ *         }
+ *       }
+ *     }
+ *   }
+ * };
+ *
+ *
+ * It also keeps track of newly added tags as they are selected in the dropdown selectors.
+ * They are store in the same format above, and then merged to one tree that is used as the
+ * source of truth for both the tag bubble and the dropdowns. They keys are order alphabetically.
+ *
+ * In the dropdowns, the value of each SelectableBox is stored along with it's lineage and is URI encoded.
+ * Ths is so we are able to traverse and manipulate different parts of the tree leading to it.
+ * Here is an example of what the value of the "Virology" tag would be:
+ *
+ *  "Science%20and%20Research,Molecular%2C%20Cellular%2C%20and%20Microbiology,Virology"
+ * @param {string} contentId - Id of the content object
  * @param {Object} taxonomyAndTagsData - Object containing Taxonomy meta data along with applied tags
  * @param {number} taxonomyAndTagsData.id - id of Taxonomy
  * @param {string} taxonomyAndTagsData.name - name of Taxonomy
@@ -35,36 +104,46 @@ import ContentTagsTree from './ContentTagsTree';
  * @param {Object[]} taxonomyAndTagsData.contentTags - Array of taxonomy tags that are applied to the content
  * @param {string} taxonomyAndTagsData.contentTags.value - Value of applied Tag
  * @param {string} taxonomyAndTagsData.contentTags.lineage - Array of Tag's ancestors sorted (ancestor -> tag)
+ * @param {boolean} editable - Whether the tags can be edited
  */
-const ContentTagsCollapsible = ({ taxonomyAndTagsData }) => {
+const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData, editable }) => {
   const intl = useIntl();
+  const { id, name } = taxonomyAndTagsData;
+
   const {
-    id, name, contentTags,
-  } = taxonomyAndTagsData;
+    tagChangeHandler, tagsTree, contentTagsCount, checkedTags,
+  } = useContentTagsCollapsibleHelper(contentId, taxonomyAndTagsData);
 
   const [isOpen, open, close] = useToggle(false);
-  const [target, setTarget] = React.useState(null);
+  const [addTagsButtonRef, setAddTagsButtonRef] = React.useState(null);
+
+  const handleSelectableBoxChange = React.useCallback((e) => {
+    tagChangeHandler(e.target.value, e.target.checked);
+  });
 
   return (
     <div className="d-flex">
       <Collapsible title={name} styling="card-lg" className="taxonomy-tags-collapsible">
         <div key={id}>
-          <ContentTagsTree appliedContentTags={contentTags} />
+          <ContentTagsTree tagsTree={tagsTree} removeTagHandler={tagChangeHandler} editable={editable} />
         </div>
 
         <div className="d-flex taxonomy-tags-selector-menu">
-          <Button
-            ref={setTarget}
-            variant="outline-primary"
-            onClick={open}
-          >
-            <FormattedMessage {...messages.addTagsButtonText} />
-          </Button>
+
+          {editable && (
+            <Button
+              ref={setAddTagsButtonRef}
+              variant="outline-primary"
+              onClick={open}
+            >
+              <FormattedMessage {...messages.addTagsButtonText} />
+            </Button>
+          )}
         </div>
         <ModalPopup
           hasArrow
           placement="bottom"
-          positionRef={target}
+          positionRef={addTagsButtonRef}
           isOpen={isOpen}
           onClose={close}
         >
@@ -76,11 +155,14 @@ const ContentTagsCollapsible = ({ taxonomyAndTagsData }) => {
               columns={1}
               ariaLabel={intl.formatMessage(messages.taxonomyTagsAriaLabel)}
               className="taxonomy-tags-selectable-box-set"
+              onChange={handleSelectableBoxChange}
+              value={checkedTags}
             >
               <ContentTagsDropDownSelector
                 key={`selector-${id}`}
                 taxonomyId={id}
                 level={0}
+                tagsTree={tagsTree}
               />
             </SelectableBox.Set>
           </div>
@@ -92,11 +174,10 @@ const ContentTagsCollapsible = ({ taxonomyAndTagsData }) => {
           variant="light"
           pill
           className={classNames('align-self-start', 'mt-3', {
-            // eslint-disable-next-line quote-props
-            'invisible': contentTags.length === 0,
+            invisible: contentTagsCount === 0,
           })}
         >
-          {contentTags.length}
+          {contentTagsCount}
         </Badge>
       </div>
     </div>
@@ -104,6 +185,7 @@ const ContentTagsCollapsible = ({ taxonomyAndTagsData }) => {
 };
 
 ContentTagsCollapsible.propTypes = {
+  contentId: PropTypes.string.isRequired,
   taxonomyAndTagsData: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
@@ -112,6 +194,7 @@ ContentTagsCollapsible.propTypes = {
       lineage: PropTypes.arrayOf(PropTypes.string),
     })),
   }).isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 export default ContentTagsCollapsible;
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.scss b/src/content-tags-drawer/ContentTagsCollapsible.scss
index a207fd9474..e55d597af3 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.scss
+++ b/src/content-tags-drawer/ContentTagsCollapsible.scss
@@ -22,3 +22,7 @@
   overflow-y: scroll;
   max-height: 20rem;
 }
+
+.pgn__modal-popup__arrow {
+  visibility: hidden;
+}
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
index eca8c94bfc..096eb27457 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
@@ -1,37 +1,59 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { act, render } from '@testing-library/react';
+import {
+  act,
+  render,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
 import PropTypes from 'prop-types';
 
 import ContentTagsCollapsible from './ContentTagsCollapsible';
+import messages from './messages';
+import { useTaxonomyTagsData } from './data/apiHooks';
 
 jest.mock('./data/apiHooks', () => ({
-  useTaxonomyTagsDataResponse: jest.fn(),
-  useIsTaxonomyTagsDataLoaded: jest.fn(),
+  useContentTaxonomyTagsUpdater: jest.fn(() => ({
+    isError: false,
+    mutate: jest.fn(),
+  })),
+  useTaxonomyTagsData: jest.fn(() => ({
+    isSuccess: false,
+    data: {},
+  })),
 }));
 
 const data = {
-  id: 123,
-  name: 'Taxonomy 1',
-  contentTags: [
-    {
-      value: 'Tag 1',
-      lineage: ['Tag 1'],
-    },
-    {
-      value: 'Tag 2',
-      lineage: ['Tag 2'],
-    },
-  ],
+  contentId: 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@7f47fe2dbcaf47c5a071671c741fe1ab',
+  taxonomyAndTagsData: {
+    id: 123,
+    name: 'Taxonomy 1',
+    contentTags: [
+      {
+        value: 'Tag 1',
+        lineage: ['Tag 1'],
+      },
+      {
+        value: 'Tag 1.1',
+        lineage: ['Tag 1', 'Tag 1.1'],
+      },
+      {
+        value: 'Tag 2',
+        lineage: ['Tag 2'],
+      },
+    ],
+  },
+  editable: true,
 };
 
-const ContentTagsCollapsibleComponent = ({ taxonomyAndTagsData }) => (
+const ContentTagsCollapsibleComponent = ({ contentId, taxonomyAndTagsData, editable }) => (
   <IntlProvider locale="en" messages={{}}>
-    <ContentTagsCollapsible taxonomyAndTagsData={taxonomyAndTagsData} />
+    <ContentTagsCollapsible contentId={contentId} taxonomyAndTagsData={taxonomyAndTagsData} editable={editable} />
   </IntlProvider>
 );
 
 ContentTagsCollapsibleComponent.propTypes = {
+  contentId: PropTypes.string.isRequired,
   taxonomyAndTagsData: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
@@ -40,22 +62,155 @@ ContentTagsCollapsibleComponent.propTypes = {
       lineage: PropTypes.arrayOf(PropTypes.string),
     })),
   }).isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 describe('<ContentTagsCollapsible />', () => {
   it('should render taxonomy tags data along content tags number badge', async () => {
     await act(async () => {
-      const { container, getByText } = render(<ContentTagsCollapsibleComponent taxonomyAndTagsData={data} />);
+      const { container, getByText } = render(
+        <ContentTagsCollapsibleComponent
+          contentId={data.contentId}
+          taxonomyAndTagsData={data.taxonomyAndTagsData}
+          editable={data.editable}
+        />,
+      );
       expect(getByText('Taxonomy 1')).toBeInTheDocument();
       expect(container.getElementsByClassName('badge').length).toBe(1);
-      expect(getByText('2')).toBeInTheDocument();
+      expect(getByText('3')).toBeInTheDocument();
+    });
+  });
+
+  it('should render new tags as they are checked in the dropdown', async () => {
+    useTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        results: [{
+          value: 'Tag 1',
+          subTagsUrl: null,
+        }, {
+          value: 'Tag 2',
+          subTagsUrl: null,
+        }, {
+          value: 'Tag 3',
+          subTagsUrl: null,
+        }],
+      },
+    });
+
+    await act(async () => {
+      const { container, getByText, getAllByText } = render(
+        <ContentTagsCollapsibleComponent
+          contentId={data.contentId}
+          taxonomyAndTagsData={data.taxonomyAndTagsData}
+          editable={data.editable}
+        />,
+      );
+
+      // Expand the Taxonomy to view applied tags and "Add tags" button
+      const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
+      await act(async () => {
+        fireEvent.click(expandToggle);
+      });
+
+      // Click on "Add tags" button to open dropdown to select new tags
+      const addTagsButton = getByText(messages.addTagsButtonText.defaultMessage);
+      await act(async () => {
+        fireEvent.click(addTagsButton);
+      });
+
+      // Wait for the dropdown selector for tags to open,
+      // Tag 3 should only appear there
+      await waitFor(() => {
+        expect(getByText('Tag 3')).toBeInTheDocument();
+        expect(getAllByText('Tag 3').length === 1);
+      });
+
+      const tag3 = getByText('Tag 3');
+      await act(async () => {
+        fireEvent.click(tag3);
+      });
+
+      // After clicking on Tag 3, it should also appear in amongst
+      // the tag bubbles in the tree
+      await waitFor(() => {
+        expect(getAllByText('Tag 3').length === 2);
+      });
+    });
+  });
+
+  it('should remove tag when they are unchecked in the dropdown', async () => {
+    useTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        results: [{
+          value: 'Tag 1',
+          subTagsUrl: null,
+        }, {
+          value: 'Tag 2',
+          subTagsUrl: null,
+        }, {
+          value: 'Tag 3',
+          subTagsUrl: null,
+        }],
+      },
+    });
+
+    await act(async () => {
+      const { container, getByText, getAllByText } = render(
+        <ContentTagsCollapsibleComponent
+          contentId={data.contentId}
+          taxonomyAndTagsData={data.taxonomyAndTagsData}
+          editable={data.editable}
+        />,
+      );
+
+      // Expand the Taxonomy to view applied tags and "Add tags" button
+      const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
+      await act(async () => {
+        fireEvent.click(expandToggle);
+      });
+
+      // Check that Tag 2 appears in tag bubbles
+      await waitFor(() => {
+        expect(getByText('Tag 2')).toBeInTheDocument();
+      });
+
+      // Click on "Add tags" button to open dropdown to select new tags
+      const addTagsButton = getByText(messages.addTagsButtonText.defaultMessage);
+      await act(async () => {
+        fireEvent.click(addTagsButton);
+      });
+
+      // Wait for the dropdown selector for tags to open,
+      // Tag 3 should only appear there, (i.e. the dropdown is open, since Tag 3 is not applied)
+      await waitFor(() => {
+        expect(getByText('Tag 3')).toBeInTheDocument();
+      });
+
+      // Get the Tag 2 checkbox and click on it
+      const tag2 = getAllByText('Tag 2')[1];
+      await act(async () => {
+        fireEvent.click(tag2);
+      });
+
+      // After clicking on Tag 2, it should be removed from
+      // the tag bubbles in so only the one in the dropdown appears
+      expect(getAllByText('Tag 2').length === 1);
     });
   });
 
   it('should render taxonomy tags data without tags number badge', async () => {
-    data.contentTags = [];
+    const updatedData = { ...data };
+    updatedData.taxonomyAndTagsData.contentTags = [];
     await act(async () => {
-      const { container, getByText } = render(<ContentTagsCollapsibleComponent taxonomyAndTagsData={data} />);
+      const { container, getByText } = render(
+        <ContentTagsCollapsibleComponent
+          contentId={updatedData.contentId}
+          taxonomyAndTagsData={updatedData.taxonomyAndTagsData}
+          editable={updatedData.editable}
+        />,
+      );
       expect(getByText('Taxonomy 1')).toBeInTheDocument();
       expect(container.getElementsByClassName('invisible').length).toBe(1);
     });
diff --git a/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx b/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
new file mode 100644
index 0000000000..3692e15492
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
@@ -0,0 +1,206 @@
+import React from 'react';
+import { useCheckboxSetValues } from '@edx/paragon';
+import { cloneDeep } from 'lodash';
+
+import { useContentTaxonomyTagsUpdater } from './data/apiHooks';
+
+/**
+ * Util function that consolidates two tag trees into one, sorting the keys in
+ * alphabetical order.
+ *
+ * @param {object} tree1 - first tag tree
+ * @param {object} tree2 - second tag tree
+ * @returns {object} merged tree containing both tree1 and tree2
+ */
+const mergeTrees = (tree1, tree2) => {
+  const mergedTree = cloneDeep(tree1);
+
+  const sortKeysAlphabetically = (obj) => {
+    const sortedObj = {};
+    Object.keys(obj)
+      .sort()
+      .forEach((key) => {
+        sortedObj[key] = obj[key];
+        if (obj[key] && typeof obj[key] === 'object') {
+          sortedObj[key].children = sortKeysAlphabetically(obj[key].children);
+        }
+      });
+    return sortedObj;
+  };
+
+  const mergeRecursively = (destination, source) => {
+    Object.entries(source).forEach(([key, sourceValue]) => {
+      const destinationValue = destination[key];
+
+      if (destinationValue && sourceValue && typeof destinationValue === 'object' && typeof sourceValue === 'object') {
+        mergeRecursively(destinationValue, sourceValue);
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        destination[key] = cloneDeep(sourceValue);
+      }
+    });
+  };
+
+  mergeRecursively(mergedTree, tree2);
+  return sortKeysAlphabetically(mergedTree);
+};
+
+/**
+ * Util function that removes the tag along with its ancestors if it was
+ * the only explicit child tag.
+ *
+ * @param {object} tree - tag tree to remove the tag from
+ * @param {string[]} tagsToRemove - full lineage of tag to remove.
+ *                                  eg: ['grand parent', 'parent', 'tag']
+ */
+const removeTags = (tree, tagsToRemove) => {
+  if (!tree || !tagsToRemove.length) {
+    return;
+  }
+  const key = tagsToRemove[0];
+  if (tree[key]) {
+    removeTags(tree[key].children, tagsToRemove.slice(1));
+
+    if (Object.keys(tree[key].children).length === 0 && (tree[key].explicit === false || tagsToRemove.length === 1)) {
+      // eslint-disable-next-line no-param-reassign
+      delete tree[key];
+    }
+  }
+};
+
+/*
+ * Handles all the underlying logic for the ContentTagsCollapsible component
+ */
+const useContentTagsCollapsibleHelper = (contentId, taxonomyAndTagsData) => {
+  const {
+    id, contentTags,
+  } = taxonomyAndTagsData;
+  // State to determine whether the tags are being updating so we can make a call
+  // to the update endpoint to the reflect those changes
+  const [updatingTags, setUpdatingTags] = React.useState(false);
+  const updateTags = useContentTaxonomyTagsUpdater(contentId, id);
+
+  // Keeps track of the content objects tags count (both implicit and explicit)
+  const [contentTagsCount, setContentTagsCount] = React.useState(0);
+
+  // Keeps track of the tree structure for tags that are add by selecting/unselecting
+  // tags in the dropdowns.
+  const [addedContentTags, setAddedContentTags] = React.useState({});
+
+  // To handle checking/unchecking tags in the SelectableBox
+  const [checkedTags, { add, remove, clear }] = useCheckboxSetValues();
+
+  // Handles making requests to the update endpoint whenever the checked tags change
+  React.useEffect(() => {
+    // We have this check because this hook is fired when the component first loads
+    // and reloads (on refocus). We only want to make a request to the update endpoint when
+    // the user is updating the tags.
+    if (updatingTags) {
+      setUpdatingTags(false);
+      const tags = checkedTags.map(t => decodeURIComponent(t.split(',').slice(-1)));
+      updateTags.mutate({ tags });
+    }
+  }, [contentId, id, checkedTags]);
+
+  // This converts the contentTags prop to the tree structure mentioned above
+  const appliedContentTags = React.useMemo(() => {
+    let contentTagsCounter = 0;
+
+    // Clear all the tags that have not been commited and the checked boxes when
+    // fresh contentTags passed in so the latest state from the backend is rendered
+    setAddedContentTags({});
+    clear();
+
+    // When an error occurs while updating, the contentTags query is invalidated,
+    // hence they will be recalculated, and the updateTags mutation should be reset.
+    if (updateTags.isError) {
+      updateTags.reset();
+    }
+
+    const resultTree = {};
+    contentTags.forEach(item => {
+      let currentLevel = resultTree;
+
+      item.lineage.forEach((key, index) => {
+        if (!currentLevel[key]) {
+          const isExplicit = index === item.lineage.length - 1;
+          currentLevel[key] = {
+            explicit: isExplicit,
+            children: {},
+          };
+
+          // Populating the SelectableBox with "selected" (explicit) tags
+          const value = item.lineage.map(l => encodeURIComponent(l)).join(',');
+          // eslint-disable-next-line no-unused-expressions
+          isExplicit ? add(value) : remove(value);
+          contentTagsCounter += 1;
+        }
+
+        currentLevel = currentLevel[key].children;
+      });
+    });
+
+    setContentTagsCount(contentTagsCounter);
+    return resultTree;
+  }, [contentTags, updateTags.isError]);
+
+  // This is the source of truth that represents the current state of tags in
+  // this Taxonomy as a tree. Whenever either the `appliedContentTags` (i.e. tags passed in
+  // the prop from the backed) change, or when the `addedContentTags` (i.e. tags added by
+  // selecting/unselecting them in the dropdown) change, the tree is recomputed.
+  const tagsTree = React.useMemo(() => (
+    mergeTrees(appliedContentTags, addedContentTags)
+  ), [appliedContentTags, addedContentTags]);
+
+  // Add tag to the tree, and while traversing remove any selected ancestor tags
+  // as they should become implicit
+  const addTags = (tree, tagLineage, selectedTag) => {
+    const value = [];
+    let traversal = tree;
+    tagLineage.forEach(tag => {
+      const isExplicit = selectedTag === tag;
+
+      if (!traversal[tag]) {
+        traversal[tag] = { explicit: isExplicit, children: {} };
+      } else {
+        traversal[tag].explicit = isExplicit;
+      }
+
+      // Clear out the ancestor tags leading to newly selected tag
+      // as they automatically become implicit
+      value.push(encodeURIComponent(tag));
+      // eslint-disable-next-line no-unused-expressions
+      isExplicit ? add(value.join(',')) : remove(value.join(','));
+
+      traversal = traversal[tag].children;
+    });
+  };
+
+  const tagChangeHandler = React.useCallback((tagSelectableBoxValue, checked) => {
+    const tagLineage = tagSelectableBoxValue.split(',').map(t => decodeURIComponent(t));
+    const selectedTag = tagLineage.slice(-1)[0];
+
+    const addedTree = { ...addedContentTags };
+    if (checked) {
+      // We "add" the tag to the SelectableBox.Set inside the addTags method
+      addTags(addedTree, tagLineage, selectedTag);
+    } else {
+      // Remove tag from the SelectableBox.Set
+      remove(tagSelectableBoxValue);
+
+      // We remove them from both incase we are unselecting from an
+      // existing applied Tag or a newly added one
+      removeTags(addedTree, tagLineage);
+      removeTags(appliedContentTags, tagLineage);
+    }
+
+    setAddedContentTags(addedTree);
+    setUpdatingTags(true);
+  });
+
+  return {
+    tagChangeHandler, tagsTree, contentTagsCount, checkedTags,
+  };
+};
+
+export default useContentTagsCollapsibleHelper;
diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
index eeed39be1d..071c8d4075 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.jsx
@@ -10,10 +10,8 @@ import messages from './messages';
 import ContentTagsCollapsible from './ContentTagsCollapsible';
 import { extractOrgFromContentId } from './utils';
 import {
-  useContentTaxonomyTagsDataResponse,
-  useIsContentTaxonomyTagsDataLoaded,
-  useContentDataResponse,
-  useIsContentDataLoaded,
+  useContentTaxonomyTagsData,
+  useContentData,
 } from './data/apiHooks';
 import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from '../taxonomy/data/apiHooks';
 import Loading from '../generic/Loading';
@@ -24,26 +22,17 @@ const ContentTagsDrawer = () => {
 
   const org = extractOrgFromContentId(contentId);
 
-  const useContentData = () => {
-    const contentData = useContentDataResponse(contentId);
-    const isContentDataLoaded = useIsContentDataLoaded(contentId);
-    return { contentData, isContentDataLoaded };
-  };
-
-  const useContentTaxonomyTagsData = () => {
-    const contentTaxonomyTagsData = useContentTaxonomyTagsDataResponse(contentId);
-    const isContentTaxonomyTagsLoaded = useIsContentTaxonomyTagsDataLoaded(contentId);
-    return { contentTaxonomyTagsData, isContentTaxonomyTagsLoaded };
-  };
-
   const useTaxonomyListData = () => {
     const taxonomyListData = useTaxonomyListDataResponse(org);
     const isTaxonomyListLoaded = useIsTaxonomyListDataLoaded(org);
     return { taxonomyListData, isTaxonomyListLoaded };
   };
 
-  const { contentData, isContentDataLoaded } = useContentData();
-  const { contentTaxonomyTagsData, isContentTaxonomyTagsLoaded } = useContentTaxonomyTagsData();
+  const { data: contentData, isSuccess: isContentDataLoaded } = useContentData(contentId);
+  const {
+    data: contentTaxonomyTagsData,
+    isSuccess: isContentTaxonomyTagsLoaded,
+  } = useContentTaxonomyTagsData(contentId);
   const { taxonomyListData, isTaxonomyListLoaded } = useTaxonomyListData();
 
   const closeContentTagsDrawer = () => {
@@ -113,7 +102,8 @@ const ContentTagsDrawer = () => {
         { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded
           ? taxonomies.map((data) => (
             <div key={`taxonomy-tags-collapsible-${data.id}`}>
-              <ContentTagsCollapsible taxonomyAndTagsData={data} />
+              {/* TODO: Properly set whether tags should be editable or not based on permissions */}
+              <ContentTagsCollapsible contentId={contentId} taxonomyAndTagsData={data} editable />
               <hr />
             </div>
           ))
diff --git a/src/content-tags-drawer/ContentTagsDrawer.test.jsx b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
index ad479b1569..c722fb48be 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.test.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
@@ -4,10 +4,8 @@ import { act, render, fireEvent } from '@testing-library/react';
 
 import ContentTagsDrawer from './ContentTagsDrawer';
 import {
-  useContentTaxonomyTagsDataResponse,
-  useIsContentTaxonomyTagsDataLoaded,
-  useContentDataResponse,
-  useIsContentDataLoaded,
+  useContentTaxonomyTagsData,
+  useContentData,
 } from './data/apiHooks';
 import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from '../taxonomy/data/apiHooks';
 
@@ -19,12 +17,17 @@ jest.mock('react-router-dom', () => ({
 }));
 
 jest.mock('./data/apiHooks', () => ({
-  useContentTaxonomyTagsDataResponse: jest.fn(),
-  useIsContentTaxonomyTagsDataLoaded: jest.fn(),
-  useContentDataResponse: jest.fn(),
-  useIsContentDataLoaded: jest.fn(),
-  useTaxonomyTagsDataResponse: jest.fn(),
-  useIsTaxonomyTagsDataLoaded: jest.fn(),
+  useContentTaxonomyTagsData: jest.fn(() => ({
+    isSuccess: false,
+    data: {},
+  })),
+  useContentData: jest.fn(() => ({
+    isSuccess: false,
+    data: {},
+  })),
+  useContentTaxonomyTagsUpdater: jest.fn(() => ({
+    isError: false,
+  })),
 }));
 
 jest.mock('../taxonomy/data/apiHooks', () => ({
@@ -45,7 +48,6 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows spinner before the content data query is complete', async () => {
-    useIsContentDataLoaded.mockReturnValue(false);
     await act(async () => {
       const { getAllByRole } = render(<RootWrapper />);
       const spinner = getAllByRole('status')[0];
@@ -55,7 +57,6 @@ describe('<ContentTagsDrawer />', () => {
 
   it('shows spinner before the taxonomy tags query is complete', async () => {
     useIsTaxonomyListDataLoaded.mockReturnValue(false);
-    useIsContentTaxonomyTagsDataLoaded.mockReturnValue(false);
     await act(async () => {
       const { getAllByRole } = render(<RootWrapper />);
       const spinner = getAllByRole('status')[1];
@@ -64,9 +65,11 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows the content display name after the query is complete', async () => {
-    useIsContentDataLoaded.mockReturnValue(true);
-    useContentDataResponse.mockReturnValue({
-      displayName: 'Unit 1',
+    useContentData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        displayName: 'Unit 1',
+      },
     });
     await act(async () => {
       const { getByText } = render(<RootWrapper />);
@@ -76,36 +79,38 @@ describe('<ContentTagsDrawer />', () => {
 
   it('shows the taxonomies data including tag numbers after the query is complete', async () => {
     useIsTaxonomyListDataLoaded.mockReturnValue(true);
-    useIsContentTaxonomyTagsDataLoaded.mockReturnValue(true);
-    useContentTaxonomyTagsDataResponse.mockReturnValue({
-      taxonomies: [
-        {
-          name: 'Taxonomy 1',
-          taxonomyId: 123,
-          editable: true,
-          tags: [
-            {
-              value: 'Tag 1',
-              lineage: ['Tag 1'],
-            },
-            {
-              value: 'Tag 2',
-              lineage: ['Tag 2'],
-            },
-          ],
-        },
-        {
-          name: 'Taxonomy 2',
-          taxonomyId: 124,
-          editable: true,
-          tags: [
-            {
-              value: 'Tag 3',
-              lineage: ['Tag 3'],
-            },
-          ],
-        },
-      ],
+    useContentTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        taxonomies: [
+          {
+            name: 'Taxonomy 1',
+            taxonomyId: 123,
+            editable: true,
+            tags: [
+              {
+                value: 'Tag 1',
+                lineage: ['Tag 1'],
+              },
+              {
+                value: 'Tag 2',
+                lineage: ['Tag 2'],
+              },
+            ],
+          },
+          {
+            name: 'Taxonomy 2',
+            taxonomyId: 124,
+            editable: true,
+            tags: [
+              {
+                value: 'Tag 3',
+                lineage: ['Tag 3'],
+              },
+            ],
+          },
+        ],
+      },
     });
     useTaxonomyListDataResponse.mockReturnValue({
       results: [{
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
index e71ac8a80f..bde6d5e968 100644
--- a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
@@ -1,19 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   SelectableBox,
   Icon,
   Spinner,
+  Button,
 } from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ArrowDropDown, ArrowDropUp } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 import messages from './messages';
 import './ContentTagsDropDownSelector.scss';
 
-import { useTaxonomyTagsDataResponse, useIsTaxonomyTagsDataLoaded } from './data/apiHooks';
+import { useTaxonomyTagsData } from './data/apiHooks';
 
 const ContentTagsDropDownSelector = ({
-  taxonomyId, level, subTagsUrl,
+  taxonomyId, level, subTagsUrl, lineage, tagsTree,
 }) => {
   const intl = useIntl();
   // This object represents the states of the dropdowns on this level
@@ -21,6 +22,19 @@ const ContentTagsDropDownSelector = ({
   // the value true (open) false (closed)
   const [dropdownStates, setDropdownStates] = useState({});
 
+  const [tags, setTags] = useState([]);
+  const [nextPage, setNextPage] = useState(null);
+
+  // `fetchUrl` is initially `subTagsUrl` to fetch the initial data,
+  // however if it is null that means it is the root, and the apiHooks
+  // would automatically handle it. Later this url is set to the next
+  // page of results (if any)
+  //
+  // TODO: In the future we may need to refactor this to keep track
+  // of the count for how many times the user clicked on "load more" then
+  // use useQueries to load all the pages based on that.
+  const [fetchUrl, setFetchUrl] = useState(subTagsUrl);
+
   const isOpen = (i) => dropdownStates[i];
 
   const clickAndEnterHandler = (i) => {
@@ -29,12 +43,33 @@ const ContentTagsDropDownSelector = ({
     setDropdownStates({ ...dropdownStates, [i]: !dropdownStates[i] });
   };
 
-  const taxonomyTagsData = useTaxonomyTagsDataResponse(taxonomyId, subTagsUrl);
-  const isTaxonomyTagsLoaded = useIsTaxonomyTagsDataLoaded(taxonomyId, subTagsUrl);
+  const { data: taxonomyTagsData, isSuccess: isTaxonomyTagsLoaded } = useTaxonomyTagsData(taxonomyId, fetchUrl);
+
+  const isImplicit = (tag) => {
+    // Traverse the tags tree using the lineage
+    let traversal = tagsTree;
+    lineage.forEach(t => {
+      // We need to decode the tag to traverse the tree since the lineage value is encoded
+      traversal = traversal[decodeURIComponent(t)]?.children || {};
+    });
+
+    return (traversal[tag.value] && !traversal[tag.value].explicit) || false;
+  };
+
+  useEffect(() => {
+    if (isTaxonomyTagsLoaded && taxonomyTagsData) {
+      setTags([...tags, ...taxonomyTagsData.results]);
+      setNextPage(taxonomyTagsData.next);
+    }
+  }, [isTaxonomyTagsLoaded, taxonomyTagsData]);
+
+  const loadMoreTags = useCallback(() => {
+    setFetchUrl(nextPage);
+  }, [nextPage]);
 
   return (
-    isTaxonomyTagsLoaded && taxonomyTagsData
-      ? taxonomyTagsData.results.map((taxonomyTag, i) => (
+    <>
+      {tags.map((taxonomyTag, i) => (
         <div className="d-flex flex-column" key={`selector-div-${taxonomyTag.value}`} style={{ paddingLeft: `${level * 1}rem` }}>
           <div className="d-flex">
             <SelectableBox
@@ -43,6 +78,9 @@ const ContentTagsDropDownSelector = ({
               className="taxonomy-tags-selectable-box"
               aria-label={`${taxonomyTag.value} checkbox`}
               data-selectable-box="taxonomy-tags"
+              value={[...lineage, encodeURIComponent(taxonomyTag.value)].join(',')}
+              isIndeterminate={isImplicit(taxonomyTag)}
+              disabled={isImplicit(taxonomyTag)}
             >
               {taxonomyTag.value}
             </SelectableBox>
@@ -65,12 +103,27 @@ const ContentTagsDropDownSelector = ({
               taxonomyId={taxonomyId}
               subTagsUrl={taxonomyTag.subTagsUrl}
               level={level + 1}
+              lineage={[...lineage, encodeURIComponent(taxonomyTag.value)]}
+              tagsTree={tagsTree}
             />
           )}
 
         </div>
-      ))
-      : (
+      ))}
+
+      { nextPage && isTaxonomyTagsLoaded
+        ? (
+          <Button
+            style={{ marginLeft: `${level * 1}rem` }}
+            variant="outline-primary"
+            onClick={loadMoreTags}
+          >
+            <FormattedMessage {...messages.loadMoreTagsButtonText} />
+          </Button>
+        )
+        : null}
+
+      { !isTaxonomyTagsLoaded ? (
         <div className="d-flex justify-content-center align-items-center flex-column">
           <Spinner
             animation="border"
@@ -78,18 +131,27 @@ const ContentTagsDropDownSelector = ({
             screenReaderText={intl.formatMessage(messages.loadingTagsDropdownMessage)}
           />
         </div>
-      )
+      ) : null}
+    </>
   );
 };
 
 ContentTagsDropDownSelector.defaultProps = {
   subTagsUrl: undefined,
+  lineage: [],
 };
 
 ContentTagsDropDownSelector.propTypes = {
   taxonomyId: PropTypes.number.isRequired,
   level: PropTypes.number.isRequired,
   subTagsUrl: PropTypes.string,
+  lineage: PropTypes.arrayOf(PropTypes.string),
+  tagsTree: PropTypes.objectOf(
+    PropTypes.shape({
+      explicit: PropTypes.bool.isRequired,
+      children: PropTypes.shape({}).isRequired,
+    }).isRequired,
+  ).isRequired,
 };
 
 export default ContentTagsDropDownSelector;
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.scss b/src/content-tags-drawer/ContentTagsDropDownSelector.scss
index 33c29517e8..a6b72affc9 100644
--- a/src/content-tags-drawer/ContentTagsDropDownSelector.scss
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.scss
@@ -6,3 +6,12 @@
   box-shadow: none;
   padding: 0;
 }
+
+.pgn__selectable_box.taxonomy-tags-selectable-box:disabled,
+.pgn__selectable_box.taxonomy-tags-selectable-box[disabled] {
+  opacity: 1 !important;
+}
+
+.pgn__selectable_box-active.taxonomy-tags-selectable-box {
+  outline: none !important;
+}
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
index 80ca659632..5823feaac4 100644
--- a/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
@@ -1,51 +1,64 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { act, render } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
 import PropTypes from 'prop-types';
 
 import ContentTagsDropDownSelector from './ContentTagsDropDownSelector';
-import { useTaxonomyTagsDataResponse, useIsTaxonomyTagsDataLoaded } from './data/apiHooks';
+import { useTaxonomyTagsData } from './data/apiHooks';
 
 jest.mock('./data/apiHooks', () => ({
-  useTaxonomyTagsDataResponse: jest.fn(),
-  useIsTaxonomyTagsDataLoaded: jest.fn(),
+  useTaxonomyTagsData: jest.fn(() => ({
+    isSuccess: false,
+    data: {},
+  })),
 }));
 
 const data = {
   taxonomyId: 123,
   level: 0,
+  tagsTree: {},
 };
 
-const TaxonomyTagsDropDownSelectorComponent = ({
-  taxonomyId, level, subTagsUrl,
+const ContentTagsDropDownSelectorComponent = ({
+  taxonomyId, level, subTagsUrl, lineage, tagsTree,
 }) => (
   <IntlProvider locale="en" messages={{}}>
     <ContentTagsDropDownSelector
       taxonomyId={taxonomyId}
       level={level}
       subTagsUrl={subTagsUrl}
+      lineage={lineage}
+      tagsTree={tagsTree}
     />
   </IntlProvider>
 );
 
-TaxonomyTagsDropDownSelectorComponent.defaultProps = {
+ContentTagsDropDownSelectorComponent.defaultProps = {
   subTagsUrl: undefined,
+  lineage: [],
 };
 
-TaxonomyTagsDropDownSelectorComponent.propTypes = {
+ContentTagsDropDownSelectorComponent.propTypes = {
   taxonomyId: PropTypes.number.isRequired,
   level: PropTypes.number.isRequired,
   subTagsUrl: PropTypes.string,
+  lineage: PropTypes.arrayOf(PropTypes.string),
+  tagsTree: PropTypes.objectOf(
+    PropTypes.shape({
+      explicit: PropTypes.bool.isRequired,
+      children: PropTypes.shape({}).isRequired,
+    }).isRequired,
+  ).isRequired,
 };
 
 describe('<ContentTagsDropDownSelector />', () => {
   it('should render taxonomy tags drop down selector loading with spinner', async () => {
-    useIsTaxonomyTagsDataLoaded.mockReturnValue(false);
     await act(async () => {
       const { getByRole } = render(
-        <TaxonomyTagsDropDownSelectorComponent
+        <ContentTagsDropDownSelectorComponent
           taxonomyId={data.taxonomyId}
           level={data.level}
+          tagsTree={data.tagsTree}
         />,
       );
       const spinner = getByRole('status');
@@ -54,43 +67,53 @@ describe('<ContentTagsDropDownSelector />', () => {
   });
 
   it('should render taxonomy tags drop down selector with no sub tags', async () => {
-    useIsTaxonomyTagsDataLoaded.mockReturnValue(true);
-    useTaxonomyTagsDataResponse.mockReturnValue({
-      results: [{
-        value: 'Tag 1',
-        subTagsUrl: null,
-      }],
+    useTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        results: [{
+          value: 'Tag 1',
+          subTagsUrl: null,
+        }],
+      },
     });
     await act(async () => {
       const { container, getByText } = render(
-        <TaxonomyTagsDropDownSelectorComponent
+        <ContentTagsDropDownSelectorComponent
           key={`selector-${data.taxonomyId}`}
           taxonomyId={data.taxonomyId}
           level={data.level}
+          tagsTree={data.tagsTree}
         />,
       );
-      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);
+      });
     });
   });
 
   it('should render taxonomy tags drop down selector with sub tags', async () => {
-    useIsTaxonomyTagsDataLoaded.mockReturnValue(true);
-    useTaxonomyTagsDataResponse.mockReturnValue({
-      results: [{
-        value: 'Tag 2',
-        subTagsUrl: 'https://example.com',
-      }],
+    useTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        results: [{
+          value: 'Tag 2',
+          subTagsUrl: 'https://example.com',
+        }],
+      },
     });
     await act(async () => {
       const { container, getByText } = render(
-        <TaxonomyTagsDropDownSelectorComponent
+        <ContentTagsDropDownSelectorComponent
           taxonomyId={data.taxonomyId}
           level={data.level}
+          tagsTree={data.tagsTree}
         />,
       );
-      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);
+      });
     });
   });
 });
diff --git a/src/content-tags-drawer/ContentTagsTree.jsx b/src/content-tags-drawer/ContentTagsTree.jsx
index e75ead4766..08ae7e145f 100644
--- a/src/content-tags-drawer/ContentTagsTree.jsx
+++ b/src/content-tags-drawer/ContentTagsTree.jsx
@@ -1,88 +1,77 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import TagBubble from './TagBubble';
 
 /**
- * Component that renders Tags under a Taxonomy in the nested tree format
- * It constructs a tree structure consolidating the tag data. Example:
+ * Component that renders Tags under a Taxonomy in the nested tree format.
  *
- * FROM:
- *
- * [
- *   {
- *     "value": "DNA Sequencing",
- *     "lineage": [
- *       "Science and Research",
- *       "Genetics Subcategory",
- *       "DNA Sequencing"
- *     ]
- *   },
- *   {
- *     "value": "Virology",
- *     "lineage": [
- *       "Science and Research",
- *       "Molecular, Cellular, and Microbiology",
- *       "Virology"
- *     ]
- *   }
- * ]
- *
- * TO:
+ * Example:
  *
  * {
  *   "Science and Research": {
- *     "Genetics Subcategory": {
- *       "DNA Sequencing": {}
- *     },
- *     "Molecular, Cellular, and Microbiology": {
- *       "Virology": {}
+ *     explicit: false,
+ *     children: {
+ *       "Genetics Subcategory": {
+ *         explicit: false,
+ *         children: {
+ *           "DNA Sequencing": {
+ *             explicit: true,
+ *             children: {}
+ *           }
+ *         }
+ *       },
+ *       "Molecular, Cellular, and Microbiology": {
+ *         explicit: false,
+ *         children: {
+ *           "Virology": {
+ *             explicit: true,
+ *             children: {}
+ *           }
+ *         }
+ *       }
  *     }
  *   }
- * }
+ * };
  *
- * @param {Object[]} appliedContentTags - Array of taxonomy tags that are applied to the content
- * @param {string} appliedContentTags.value - Value of applied Tag
- * @param {string} appliedContentTags.lineage - Array of Tag's ancestors sorted (ancestor -> tag)
+ * @param {Object} tagsTree - Array of taxonomy tags that are applied to the content
+ * @param {Func} removeTagHandler - Function that is called when removing tags from tree
+ * @param {boolean} editable - Whether the tags appear with an 'x' allowing the user to remove them
  */
-const ContentTagsTree = ({ appliedContentTags }) => {
-  const tagsTree = useMemo(() => {
-    const tree = {};
-    appliedContentTags.forEach(tag => {
-      tag.lineage.reduce((currentLevel, ancestor) => {
-        // eslint-disable-next-line no-param-reassign
-        currentLevel[ancestor] = currentLevel[ancestor] || {};
-        return currentLevel[ancestor];
-      }, tree);
-    });
-    return tree;
-  }, [appliedContentTags]);
-
-  const renderTagsTree = (tag, level) => Object.keys(tag).map((key) => {
+const ContentTagsTree = ({ tagsTree, removeTagHandler, editable }) => {
+  const renderTagsTree = (tag, level, lineage) => Object.keys(tag).map((key) => {
+    const updatedLineage = [...lineage, encodeURIComponent(key)];
     if (tag[key] !== undefined) {
       return (
         <div key={`tag-${key}-level-${level}`}>
           <TagBubble
             key={`tag-${key}`}
             value={key}
-            implicit={Object.keys(tag[key]).length !== 0}
+            implicit={!tag[key].explicit}
             level={level}
+            lineage={updatedLineage}
+            removeTagHandler={removeTagHandler}
+            editable={editable}
           />
-          { renderTagsTree(tag[key], level + 1) }
+          { renderTagsTree(tag[key].children, level + 1, updatedLineage) }
         </div>
       );
     }
     return null;
   });
 
-  return renderTagsTree(tagsTree, 0);
+  return renderTagsTree(tagsTree, 0, []);
 };
 
 ContentTagsTree.propTypes = {
-  appliedContentTags: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    lineage: PropTypes.arrayOf(PropTypes.string),
-  })).isRequired,
+  tagsTree: PropTypes.objectOf(
+    PropTypes.shape({
+      explicit: PropTypes.bool.isRequired,
+      children: PropTypes.shape({}).isRequired,
+    }).isRequired,
+  ).isRequired,
+  removeTagHandler: PropTypes.func.isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 export default ContentTagsTree;
diff --git a/src/content-tags-drawer/ContentTagsTree.test.jsx b/src/content-tags-drawer/ContentTagsTree.test.jsx
index dd28cc9a98..ac41f3c1f1 100644
--- a/src/content-tags-drawer/ContentTagsTree.test.jsx
+++ b/src/content-tags-drawer/ContentTagsTree.test.jsx
@@ -5,42 +5,53 @@ import PropTypes from 'prop-types';
 
 import ContentTagsTree from './ContentTagsTree';
 
-const data = [
-  {
-    value: 'DNA Sequencing',
-    lineage: [
-      'Science and Research',
-      'Genetics Subcategory',
-      'DNA Sequencing',
-    ],
+const data = {
+  'Science and Research': {
+    explicit: false,
+    children: {
+      'Genetics Subcategory': {
+        explicit: false,
+        children: {
+          'DNA Sequencing': {
+            explicit: true,
+            children: {},
+          },
+        },
+      },
+      'Molecular, Cellular, and Microbiology': {
+        explicit: false,
+        children: {
+          Virology: {
+            explicit: true,
+            children: {},
+          },
+        },
+      },
+    },
   },
-  {
-    value: 'Virology',
-    lineage: [
-      'Science and Research',
-      'Molecular, Cellular, and Microbiology',
-      'Virology',
-    ],
-  },
-];
+};
 
-const ContentTagsTreeComponent = ({ appliedContentTags }) => (
+const ContentTagsTreeComponent = ({ tagsTree, removeTagHandler, editable }) => (
   <IntlProvider locale="en" messages={{}}>
-    <ContentTagsTree appliedContentTags={appliedContentTags} />
+    <ContentTagsTree tagsTree={tagsTree} removeTagHandler={removeTagHandler} editable={editable} />
   </IntlProvider>
 );
 
 ContentTagsTreeComponent.propTypes = {
-  appliedContentTags: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    lineage: PropTypes.arrayOf(PropTypes.string),
-  })).isRequired,
+  tagsTree: PropTypes.objectOf(
+    PropTypes.shape({
+      explicit: PropTypes.bool.isRequired,
+      children: PropTypes.shape({}).isRequired,
+    }).isRequired,
+  ).isRequired,
+  removeTagHandler: PropTypes.func.isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 describe('<ContentTagsTree />', () => {
   it('should render taxonomy tags data along content tags number badge', async () => {
     await act(async () => {
-      const { getByText } = render(<ContentTagsTreeComponent appliedContentTags={data} />);
+      const { getByText } = render(<ContentTagsTreeComponent tagsTree={data} removeTagHandler={() => {}} editable />);
       expect(getByText('Science and Research')).toBeInTheDocument();
       expect(getByText('Genetics Subcategory')).toBeInTheDocument();
       expect(getByText('Molecular, Cellular, and Microbiology')).toBeInTheDocument();
diff --git a/src/content-tags-drawer/TagBubble.jsx b/src/content-tags-drawer/TagBubble.jsx
index 8c7137ffa0..2287e48ab3 100644
--- a/src/content-tags-drawer/TagBubble.jsx
+++ b/src/content-tags-drawer/TagBubble.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Button,
+  Chip,
 } from '@edx/paragon';
 import { Tag, Close } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
@@ -8,35 +8,43 @@ import PropTypes from 'prop-types';
 import TagOutlineIcon from './TagOutlineIcon';
 
 const TagBubble = ({
-  value, subTagsCount, implicit, level,
+  value, implicit, level, lineage, removeTagHandler, editable,
 }) => {
-  const className = `tag-bubble mb-2 ${implicit ? 'implicit' : ''}`;
-  const tagIcon = () => (implicit ? <TagOutlineIcon className="implicit-tag-icon" /> : <Tag />);
+  const className = `tag-bubble mb-2 border-light-300 ${implicit ? 'implicit' : ''}`;
+
+  const handleClick = React.useCallback(() => {
+    if (!implicit && editable) {
+      removeTagHandler(lineage.join(','), false);
+    }
+  }, [implicit, lineage, editable, removeTagHandler]);
+
   return (
     <div style={{ paddingLeft: `${level * 1}rem` }}>
-      <Button
+      <Chip
         className={className}
-        variant="outline-dark"
-        iconBefore={tagIcon}
-        iconAfter={!implicit ? Close : null}
+        variant="light"
+        iconBefore={!implicit ? Tag : TagOutlineIcon}
+        iconAfter={!implicit && editable ? Close : null}
+        onIconAfterClick={handleClick}
       >
-        {value} {subTagsCount > 0 ? `(${subTagsCount})` : null }
-      </Button>
+        {value}
+      </Chip>
     </div>
   );
 };
 
 TagBubble.defaultProps = {
-  subTagsCount: 0,
   implicit: true,
   level: 0,
 };
 
 TagBubble.propTypes = {
   value: PropTypes.string.isRequired,
-  subTagsCount: PropTypes.number,
   implicit: PropTypes.bool,
   level: PropTypes.number,
+  lineage: PropTypes.arrayOf(PropTypes.string).isRequired,
+  removeTagHandler: PropTypes.func.isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 export default TagBubble;
diff --git a/src/content-tags-drawer/TagBubble.scss b/src/content-tags-drawer/TagBubble.scss
index 281d0fe209..c64d80d342 100644
--- a/src/content-tags-drawer/TagBubble.scss
+++ b/src/content-tags-drawer/TagBubble.scss
@@ -1,13 +1,5 @@
-.tag-bubble.btn-outline-dark {
-  border-color: $light-300;
-
-  &:hover {
-    color: $white;
-    background-color: $dark;
-    border-color: $dark;
-  }
-}
-
-.implicit > .implicit-tag-icon {
-  color: $dark;
+.tag-bubble.pgn__chip {
+  border-style: solid;
+  border-width: 2px;
+  background-color: transparent;
 }
diff --git a/src/content-tags-drawer/TagBubble.test.jsx b/src/content-tags-drawer/TagBubble.test.jsx
index 90ba32f288..48fe71ecfd 100644
--- a/src/content-tags-drawer/TagBubble.test.jsx
+++ b/src/content-tags-drawer/TagBubble.test.jsx
@@ -1,66 +1,98 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render } from '@testing-library/react';
+import { act, render, fireEvent } from '@testing-library/react';
 import PropTypes from 'prop-types';
 
 import TagBubble from './TagBubble';
 
 const data = {
   value: 'Tag 1',
+  lineage: [],
+  removeTagHandler: jest.fn(),
 };
 
-const TagBubbleComponent = ({ value, subTagsCount, implicit }) => (
+const TagBubbleComponent = ({
+  value, implicit, level, lineage, removeTagHandler, editable,
+}) => (
   <IntlProvider locale="en" messages={{}}>
-    <TagBubble value={value} subTagsCount={subTagsCount} implicit={implicit} />
+    <TagBubble
+      value={value}
+      implicit={implicit}
+      level={level}
+      lineage={lineage}
+      removeTagHandler={removeTagHandler}
+      editable={editable}
+    />
   </IntlProvider>
 );
 
 TagBubbleComponent.defaultProps = {
-  subTagsCount: 0,
   implicit: true,
+  level: 0,
 };
 
 TagBubbleComponent.propTypes = {
   value: PropTypes.string.isRequired,
-  subTagsCount: PropTypes.number,
   implicit: PropTypes.bool,
+  level: PropTypes.number,
+  lineage: PropTypes.arrayOf(PropTypes.string).isRequired,
+  removeTagHandler: PropTypes.func.isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 describe('<TagBubble />', () => {
-  it('should render only value of the implicit tag with no sub tags', () => {
-    const { container, getByText } = render(<TagBubbleComponent value={data.value} />);
+  it('should render implicit tag', () => {
+    const { container, getByText } = render(
+      <TagBubbleComponent
+        value={data.value}
+        editable
+        lineage={data.lineage}
+        removeTagHandler={data.removeTagHandler}
+      />,
+    );
     expect(getByText(data.value)).toBeInTheDocument();
     expect(container.getElementsByClassName('implicit').length).toBe(1);
+    expect(container.getElementsByClassName('pgn__chip__icon-after').length).toBe(0);
   });
 
-  it('should render value of the implicit tag with sub tags', () => {
+  it('should render explicit tag', () => {
     const tagBubbleData = {
-      subTagsCount: 5,
+      implicit: false,
       ...data,
     };
     const { container, getByText } = render(
       <TagBubbleComponent
         value={tagBubbleData.value}
-        subTagsCount={tagBubbleData.subTagsCount}
+        editable
+        lineage={data.lineage}
+        implicit={tagBubbleData.implicit}
+        removeTagHandler={tagBubbleData.removeTagHandler}
       />,
     );
-    expect(getByText(`${tagBubbleData.value} (${tagBubbleData.subTagsCount})`)).toBeInTheDocument();
-    expect(container.getElementsByClassName('implicit').length).toBe(1);
+    expect(getByText(`${tagBubbleData.value}`)).toBeInTheDocument();
+    expect(container.getElementsByClassName('implicit').length).toBe(0);
+    expect(container.getElementsByClassName('pgn__chip__icon-after').length).toBe(1);
   });
 
-  it('should render value of the explicit tag with no sub tags', () => {
+  it('should call removeTagHandler when "x" clicked on explicit tag', async () => {
     const tagBubbleData = {
       implicit: false,
       ...data,
     };
-    const { container, getByText } = render(
+    const { container } = render(
       <TagBubbleComponent
         value={tagBubbleData.value}
+        editable
+        lineage={data.lineage}
         implicit={tagBubbleData.implicit}
+        removeTagHandler={tagBubbleData.removeTagHandler}
       />,
     );
-    expect(getByText(`${tagBubbleData.value}`)).toBeInTheDocument();
-    expect(container.getElementsByClassName('implicit').length).toBe(0);
-    expect(container.getElementsByClassName('btn-icon-after').length).toBe(1);
+
+    const xButton = container.getElementsByClassName('pgn__chip__icon-after')[0];
+    await act(async () => {
+      fireEvent.click(xButton);
+    });
+    expect(data.removeTagHandler).toHaveBeenCalled();
   });
 });
diff --git a/src/content-tags-drawer/TagOutlineIcon.jsx b/src/content-tags-drawer/TagOutlineIcon.jsx
index f817b1f077..7f9d439254 100644
--- a/src/content-tags-drawer/TagOutlineIcon.jsx
+++ b/src/content-tags-drawer/TagOutlineIcon.jsx
@@ -10,7 +10,6 @@ const TagOutlineIcon = (props) => (
     aria-hidden="true"
     {...props}
   >
-    <path d="M0 0h24v24H0V0z" fill="none" />
     <path
       d="m21.41 11.58-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM13 20.01 4 11V4h7v-.01l9 9-7 7.02z"
     />
diff --git a/src/content-tags-drawer/__mocks__/index.js b/src/content-tags-drawer/__mocks__/index.js
index b09fc5d3ab..5ec3027386 100644
--- a/src/content-tags-drawer/__mocks__/index.js
+++ b/src/content-tags-drawer/__mocks__/index.js
@@ -1,3 +1,4 @@
 export { default as taxonomyTagsMock } from './taxonomyTagsMock';
 export { default as contentTaxonomyTagsMock } from './contentTaxonomyTagsMock';
 export { default as contentDataMock } from './contentDataMock';
+export { default as updateContentTaxonomyTagsMock } from './updateContentTaxonomyTagsMock';
diff --git a/src/content-tags-drawer/__mocks__/updateContentTaxonomyTagsMock.js b/src/content-tags-drawer/__mocks__/updateContentTaxonomyTagsMock.js
new file mode 100644
index 0000000000..cc319f1197
--- /dev/null
+++ b/src/content-tags-drawer/__mocks__/updateContentTaxonomyTagsMock.js
@@ -0,0 +1,25 @@
+module.exports = {
+  'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b': {
+    taxonomies: [
+      {
+        name: 'FlatTaxonomy',
+        taxonomyId: 3,
+        editable: true,
+        tags: [
+          {
+            value: 'flat taxonomy tag 100',
+            lineage: [
+              'flat taxonomy tag 100',
+            ],
+          },
+          {
+            value: 'flat taxonomy tag 3856',
+            lineage: [
+              'flat taxonomy tag 3856',
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/src/content-tags-drawer/data/api.js b/src/content-tags-drawer/data/api.js
index e63b3d0842..562bfaa1ec 100644
--- a/src/content-tags-drawer/data/api.js
+++ b/src/content-tags-drawer/data/api.js
@@ -9,7 +9,7 @@ export const getContentDataApiUrl = (contentId) => new URL(`/xblock/outline/${co
 
 /**
  * Get all tags that belong to taxonomy.
- * @param {string} taxonomyId The id of the taxonomy to fetch tags for
+ * @param {number} taxonomyId The id of the taxonomy to fetch tags for
  * @param {string} fullPathProvided Optional param that contains the full URL to fetch data
  *                 If provided, we use it instead of generating the URL. This is usually for fetching subTags
  * @returns {Promise<Object>}
@@ -40,3 +40,17 @@ export async function getContentData(contentId) {
   const { data } = await getAuthenticatedHttpClient().get(getContentDataApiUrl(contentId));
   return camelCaseObject(data);
 }
+
+/**
+ * Update content object's applied tags
+ * @param {string} contentId The id of the content object (unit/component)
+ * @param {number} taxonomyId The id of the taxonomy the tags belong to
+ * @param {string[]} tags The list of tags (values) to set on content object
+ * @returns {Promise<Object>}
+ */
+export async function updateContentTaxonomyTags(contentId, taxonomyId, tags) {
+  let url = getContentTaxonomyTagsApiUrl(contentId);
+  url = `${url}?taxonomy=${taxonomyId}`;
+  const { data } = await getAuthenticatedHttpClient().put(url, { tags });
+  return camelCaseObject(data[contentId]);
+}
diff --git a/src/content-tags-drawer/data/api.test.js b/src/content-tags-drawer/data/api.test.js
index ffe19ab960..0d474ee0c2 100644
--- a/src/content-tags-drawer/data/api.test.js
+++ b/src/content-tags-drawer/data/api.test.js
@@ -2,7 +2,12 @@ import MockAdapter from 'axios-mock-adapter';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
-import { taxonomyTagsMock, contentTaxonomyTagsMock, contentDataMock } from '../__mocks__';
+import {
+  taxonomyTagsMock,
+  contentTaxonomyTagsMock,
+  contentDataMock,
+  updateContentTaxonomyTagsMock,
+} from '../__mocks__';
 
 import {
   getTaxonomyTagsApiUrl,
@@ -11,6 +16,7 @@ import {
   getTaxonomyTagsData,
   getContentTaxonomyTagsData,
   getContentData,
+  updateContentTaxonomyTags,
 } from './api';
 
 let axiosMock;
@@ -33,7 +39,7 @@ describe('content tags drawer api calls', () => {
   });
 
   it('should get taxonomy tags data', async () => {
-    const taxonomyId = '123';
+    const taxonomyId = 123;
     axiosMock.onGet().reply(200, taxonomyTagsMock);
     const result = await getTaxonomyTagsData(taxonomyId);
 
@@ -42,7 +48,7 @@ describe('content tags drawer api calls', () => {
   });
 
   it('should get taxonomy tags data with fullPathProvided', async () => {
-    const taxonomyId = '123';
+    const taxonomyId = 123;
     const fullPathProvided = 'http://example.com/';
     axiosMock.onGet().reply(200, taxonomyTagsMock);
     const result = await getTaxonomyTagsData(taxonomyId, fullPathProvided);
@@ -68,4 +74,15 @@ describe('content tags drawer api calls', () => {
     expect(axiosMock.history.get[0].url).toEqual(getContentDataApiUrl(contentId));
     expect(result).toEqual(contentDataMock);
   });
+
+  it('should update content taxonomy tags', async () => {
+    const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b';
+    const taxonomyId = 3;
+    const tags = ['flat taxonomy tag 100', 'flat taxonomy tag 3856'];
+    axiosMock.onPut(`${getContentTaxonomyTagsApiUrl(contentId)}?taxonomy=${taxonomyId}`).reply(200, updateContentTaxonomyTagsMock);
+    const result = await updateContentTaxonomyTags(contentId, taxonomyId, tags);
+
+    expect(axiosMock.history.put[0].url).toEqual(`${getContentTaxonomyTagsApiUrl(contentId)}?taxonomy=${taxonomyId}`);
+    expect(result).toEqual(updateContentTaxonomyTagsMock[contentId]);
+  });
 });
diff --git a/src/content-tags-drawer/data/apiHooks.jsx b/src/content-tags-drawer/data/apiHooks.jsx
index 099c88129d..df5f49bebf 100644
--- a/src/content-tags-drawer/data/apiHooks.jsx
+++ b/src/content-tags-drawer/data/apiHooks.jsx
@@ -1,111 +1,71 @@
 // @ts-check
-import { useQuery } from '@tanstack/react-query';
-import { getTaxonomyTagsData, getContentTaxonomyTagsData, getContentData } from './api';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  getTaxonomyTagsData,
+  getContentTaxonomyTagsData,
+  getContentData,
+  updateContentTaxonomyTags,
+} from './api';
 
 /**
  * Builds the query to get the taxonomy tags
- * @param {string} taxonomyId The id of the taxonomy to fetch tags for
+ * @param {number} taxonomyId The id of the taxonomy to fetch tags for
  * @param {string} fullPathProvided Optional param that contains the full URL to fetch data
  *                 If provided, we use it instead of generating the URL. This is usually for fetching subTags
- * @returns {import("./types.mjs").UseQueryResult}
+ * @returns {import("@tanstack/react-query").UseQueryResult<import("./types.mjs").TaxonomyTagsData>}
  */
-const useTaxonomyTagsData = (taxonomyId, fullPathProvided) => (
+export const useTaxonomyTagsData = (taxonomyId, fullPathProvided) => (
   useQuery({
     queryKey: [`taxonomyTags${ fullPathProvided || taxonomyId }`],
     queryFn: () => getTaxonomyTagsData(taxonomyId, fullPathProvided),
   })
 );
 
-/**
- * Gets the taxonomy tags data
- * @param {string} taxonomyId The id of the taxonomy to fetch tags for
- * @param {string} fullPathProvided Optional param that contains the full URL to fetch data
- *                 If provided, we use it instead of generating the URL. This is usually for fetching subTags
- * @returns {import("./types.mjs").TaxonomyTagsData | undefined}
- */
-export const useTaxonomyTagsDataResponse = (taxonomyId, fullPathProvided) => {
-  const response = useTaxonomyTagsData(taxonomyId, fullPathProvided);
-  if (response.status === 'success') {
-    return response.data;
-  }
-  return undefined;
-};
-
-/**
- * Returns the status of the taxonomy tags query
- * @param {string} taxonomyId The id of the taxonomy to fetch tags for
- * @param {string} fullPathProvided Optional param that contains the full URL to fetch data
- *                 If provided, we use it instead of generating the URL. This is usually for fetching subTags
- * @returns {boolean}
- */
-export const useIsTaxonomyTagsDataLoaded = (taxonomyId, fullPathProvided) => (
-  useTaxonomyTagsData(taxonomyId, fullPathProvided).status === 'success'
-);
-
 /**
  * Builds the query to get the taxonomy tags applied to the content object
  * @param {string} contentId The id of the content object to fetch the applied tags for
- * @returns {import("./types.mjs").UseQueryResult}
+ * @returns {import("@tanstack/react-query").UseQueryResult<import("./types.mjs").ContentTaxonomyTagsData>}
  */
-const useContentTaxonomyTagsData = (contentId) => (
+export const useContentTaxonomyTagsData = (contentId) => (
   useQuery({
-    queryKey: ['contentTaxonomyTags'],
+    queryKey: ['contentTaxonomyTags', contentId],
     queryFn: () => getContentTaxonomyTagsData(contentId),
   })
 );
 
-/**
- * Gets the taxonomy tags applied to the content object
- * @param {string} contentId The id of the content object to fetch the applied tags for
- * @returns {import("./types.mjs").ContentTaxonomyTagsData | undefined}
- */
-export const useContentTaxonomyTagsDataResponse = (contentId) => {
-  const response = useContentTaxonomyTagsData(contentId);
-  if (response.status === 'success') {
-    return response.data;
-  }
-  return undefined;
-};
-
-/**
- * Gets the status of the content taxonomy tags query
- * @param {string} contentId The id of the content object to fetch the applied tags for
- * @returns {boolean}
- */
-export const useIsContentTaxonomyTagsDataLoaded = (contentId) => (
-  useContentTaxonomyTagsData(contentId).status === 'success'
-);
-
 /**
  * Builds the query to get meta data about the content object
  * @param {string} contentId The id of the content object (unit/component)
- * @returns {import("./types.mjs").UseQueryResult}
+ * @returns {import("@tanstack/react-query").UseQueryResult<import("./types.mjs").ContentData>}
  */
-const useContentData = (contentId) => (
+export const useContentData = (contentId) => (
   useQuery({
-    queryKey: ['contentData'],
+    queryKey: ['contentData', contentId],
     queryFn: () => getContentData(contentId),
   })
 );
 
 /**
- * Gets the information about the content object
- * @param {string} contentId The id of the content object (unit/component)
- * @returns {import("./types.mjs").ContentData | undefined}
+ * Builds the mutation to update the tags applied to the content object
+ * @param {string} contentId The id of the content object to update tags for
+ * @param {number} taxonomyId The id of the taxonomy the tags belong to
  */
-export const useContentDataResponse = (contentId) => {
-  const response = useContentData(contentId);
-  if (response.status === 'success') {
-    return response.data;
-  }
-  return undefined;
-};
+export const useContentTaxonomyTagsUpdater = (contentId, taxonomyId) => {
+  const queryClient = useQueryClient();
 
-/**
- * Gets the status of the content data query
- * @param {string} contentId The id of the content object (unit/component)
- * @returns {boolean}
- */
-export const useIsContentDataLoaded = (contentId) => (
-  useContentData(contentId).status === 'success'
-);
+  return useMutation({
+    /**
+     * @type {import("@tanstack/react-query").MutateFunction<
+     *   any,
+     *   any,
+     *   {
+     *     tags: string[]
+     *   }
+     * >}
+     */
+    mutationFn: ({ tags }) => updateContentTaxonomyTags(contentId, taxonomyId, tags),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['contentTaxonomyTags', contentId] });
+    },
+  });
+};
diff --git a/src/content-tags-drawer/data/apiHooks.test.jsx b/src/content-tags-drawer/data/apiHooks.test.jsx
index f969782adc..3abf33a223 100644
--- a/src/content-tags-drawer/data/apiHooks.test.jsx
+++ b/src/content-tags-drawer/data/apiHooks.test.jsx
@@ -1,121 +1,96 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { act } from '@testing-library/react';
 import {
-  useTaxonomyTagsDataResponse,
-  useIsTaxonomyTagsDataLoaded,
-  useContentTaxonomyTagsDataResponse,
-  useIsContentTaxonomyTagsDataLoaded,
-  useContentDataResponse,
-  useIsContentDataLoaded,
+  useTaxonomyTagsData,
+  useContentTaxonomyTagsData,
+  useContentData,
+  useContentTaxonomyTagsUpdater,
 } from './apiHooks';
 
+import { updateContentTaxonomyTags } from './api';
+
 jest.mock('@tanstack/react-query', () => ({
   useQuery: jest.fn(),
+  useMutation: jest.fn(),
+  useQueryClient: jest.fn(),
 }));
 
-describe('useTaxonomyTagsDataResponse', () => {
-  it('should return data when status is success', () => {
-    useQuery.mockReturnValueOnce({ status: 'success', data: { data: 'data' } });
-    const taxonomyId = '123';
-    const result = useTaxonomyTagsDataResponse(taxonomyId);
-
-    expect(result).toEqual({ data: 'data' });
-  });
-
-  it('should return undefined when status is not success', () => {
-    useQuery.mockReturnValueOnce({ status: 'error' });
-    const taxonomyId = '123';
-    const result = useTaxonomyTagsDataResponse(taxonomyId);
-
-    expect(result).toBeUndefined();
-  });
-});
+jest.mock('./api', () => ({
+  updateContentTaxonomyTags: jest.fn(),
+}));
 
-describe('useIsTaxonomyTagsDataLoaded', () => {
-  it('should return true when status is success', () => {
-    useQuery.mockReturnValueOnce({ status: 'success' });
-    const taxonomyId = '123';
-    const result = useIsTaxonomyTagsDataLoaded(taxonomyId);
+describe('useTaxonomyTagsData', () => {
+  it('should return success response', () => {
+    useQuery.mockReturnValueOnce({ isSuccess: true, data: 'data' });
+    const taxonomyId = 123;
+    const result = useTaxonomyTagsData(taxonomyId);
 
-    expect(result).toBe(true);
+    expect(result).toEqual({ isSuccess: true, data: 'data' });
   });
 
-  it('should return false when status is not success', () => {
-    useQuery.mockReturnValueOnce({ status: 'error' });
-    const taxonomyId = '123';
-    const result = useIsTaxonomyTagsDataLoaded(taxonomyId);
+  it('should return failure response', () => {
+    useQuery.mockReturnValueOnce({ isSuccess: false });
+    const taxonomyId = 123;
+    const result = useTaxonomyTagsData(taxonomyId);
 
-    expect(result).toBe(false);
+    expect(result).toEqual({ isSuccess: false });
   });
 });
 
-describe('useContentTaxonomyTagsDataResponse', () => {
-  it('should return data when status is success', () => {
-    useQuery.mockReturnValueOnce({ status: 'success', data: { data: 'data' } });
+describe('useContentTaxonomyTagsData', () => {
+  it('should return success response', () => {
+    useQuery.mockReturnValueOnce({ isSuccess: true, data: 'data' });
     const contentId = '123';
-    const result = useContentTaxonomyTagsDataResponse(contentId);
+    const result = useContentTaxonomyTagsData(contentId);
 
-    expect(result).toEqual({ data: 'data' });
+    expect(result).toEqual({ isSuccess: true, data: 'data' });
   });
 
-  it('should return undefined when status is not success', () => {
-    useQuery.mockReturnValueOnce({ status: 'error' });
+  it('should return failure response', () => {
+    useQuery.mockReturnValueOnce({ isSuccess: false });
     const contentId = '123';
-    const result = useContentTaxonomyTagsDataResponse(contentId);
+    const result = useContentTaxonomyTagsData(contentId);
 
-    expect(result).toBeUndefined();
+    expect(result).toEqual({ isSuccess: false });
   });
 });
 
-describe('useIsContentTaxonomyTagsDataLoaded', () => {
-  it('should return true when status is success', () => {
-    useQuery.mockReturnValueOnce({ status: 'success' });
+describe('useContentData', () => {
+  it('should return success response', () => {
+    useQuery.mockReturnValueOnce({ isSuccess: true, data: 'data' });
     const contentId = '123';
-    const result = useIsContentTaxonomyTagsDataLoaded(contentId);
+    const result = useContentData(contentId);
 
-    expect(result).toBe(true);
+    expect(result).toEqual({ isSuccess: true, data: 'data' });
   });
 
-  it('should return false when status is not success', () => {
-    useQuery.mockReturnValueOnce({ status: 'error' });
+  it('should return failure response', () => {
+    useQuery.mockReturnValueOnce({ isSuccess: false });
     const contentId = '123';
-    const result = useIsContentTaxonomyTagsDataLoaded(contentId);
+    const result = useContentData(contentId);
 
-    expect(result).toBe(false);
+    expect(result).toEqual({ isSuccess: false });
   });
 });
 
-describe('useContentDataResponse', () => {
-  it('should return data when status is success', () => {
-    useQuery.mockReturnValueOnce({ status: 'success', data: { data: 'data' } });
-    const contentId = '123';
-    const result = useContentDataResponse(contentId);
+describe('useContentTaxonomyTagsUpdater', () => {
+  it('should call the update content taxonomy tags function', async () => {
+    useMutation.mockReturnValueOnce({ mutate: jest.fn() });
 
-    expect(result).toEqual({ data: 'data' });
-  });
+    const contentId = 'testerContent';
+    const taxonomyId = 123;
+    const mutation = useContentTaxonomyTagsUpdater(contentId, taxonomyId);
+    mutation.mutate({ tags: ['tag1', 'tag2'] });
 
-  it('should return undefined when status is not success', () => {
-    useQuery.mockReturnValueOnce({ status: 'error' });
-    const contentId = '123';
-    const result = useContentDataResponse(contentId);
+    expect(useMutation).toBeCalled();
 
-    expect(result).toBeUndefined();
-  });
-});
-
-describe('useIsContentDataLoaded', () => {
-  it('should return true when status is success', () => {
-    useQuery.mockReturnValueOnce({ status: 'success' });
-    const contentId = '123';
-    const result = useIsContentDataLoaded(contentId);
-
-    expect(result).toBe(true);
-  });
-
-  it('should return false when status is not success', () => {
-    useQuery.mockReturnValueOnce({ status: 'error' });
-    const contentId = '123';
-    const result = useIsContentDataLoaded(contentId);
+    const [config] = useMutation.mock.calls[0];
+    const { mutationFn } = config;
 
-    expect(result).toBe(false);
+    await act(async () => {
+      const tags = ['tag1', 'tag2'];
+      await mutationFn({ tags });
+      expect(updateContentTaxonomyTags).toBeCalledWith(contentId, taxonomyId, tags);
+    });
   });
 });
diff --git a/src/content-tags-drawer/messages.js b/src/content-tags-drawer/messages.js
index 6203bb2e83..2fe9deb994 100644
--- a/src/content-tags-drawer/messages.js
+++ b/src/content-tags-drawer/messages.js
@@ -17,6 +17,10 @@ const messages = defineMessages({
     id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.spinner.loading',
     defaultMessage: 'Loading tags',
   },
+  loadMoreTagsButtonText: {
+    id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.load-more-tags.button',
+    defaultMessage: 'Load more',
+  },
   taxonomyTagsAriaLabel: {
     id: 'course-authoring.content-tags-drawer.content-tags-collapsible.selectable-box.selection.aria.label',
     defaultMessage: 'taxonomy tags selection',

From 5db6b2049f5a3a9dcacdfbc8704923531420bd92 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Fri, 8 Dec 2023 13:21:36 -0500
Subject: [PATCH 10/13] fix: wrong min count alert showing (#730)

---
 .../AssignmentSection.test.jsx                | 26 +++++++++----------
 .../assignment-section/index.jsx              | 11 +++++---
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/grading-settings/assignment-section/AssignmentSection.test.jsx b/src/grading-settings/assignment-section/AssignmentSection.test.jsx
index afc8c8ed8a..1761470a67 100644
--- a/src/grading-settings/assignment-section/AssignmentSection.test.jsx
+++ b/src/grading-settings/assignment-section/AssignmentSection.test.jsx
@@ -62,10 +62,10 @@ describe('<AssignmentSection />', () => {
   it('checking correct assignment weight of total grade value', async () => {
     const { getByTestId } = render(<RootWrapper setGradingData={setGradingData} />);
     await waitFor(() => {
-      const assignmentShortLabelInput = getByTestId('assignment-weight-input');
-      expect(assignmentShortLabelInput.value).toBe('100');
-      fireEvent.change(assignmentShortLabelInput, { target: { value: '123' } });
-      expect(testObj.graders[0].weight).toBe('123');
+      const assignmentWeightInput = getByTestId('assignment-weight-input');
+      expect(assignmentWeightInput.value).toBe('100');
+      fireEvent.change(assignmentWeightInput, { target: { value: '123' } });
+      expect(testObj.graders[0].weight).toBe(123);
     });
   });
   it('checking correct assignment total number value', async () => {
@@ -74,7 +74,7 @@ describe('<AssignmentSection />', () => {
       const assignmentTotalNumberInput = getByTestId('assignment-minCount-input');
       expect(assignmentTotalNumberInput.value).toBe('1');
       fireEvent.change(assignmentTotalNumberInput, { target: { value: '123' } });
-      expect(testObj.graders[0].minCount).toBe('123');
+      expect(testObj.graders[0].minCount).toBe(123);
     });
   });
   it('checking correct assignment number of droppable value', async () => {
@@ -83,7 +83,7 @@ describe('<AssignmentSection />', () => {
       const assignmentNumberOfDroppableInput = getByTestId('assignment-dropCount-input');
       expect(assignmentNumberOfDroppableInput.value).toBe('1');
       fireEvent.change(assignmentNumberOfDroppableInput, { target: { value: '2' } });
-      expect(testObj.graders[0].dropCount).toBe('2');
+      expect(testObj.graders[0].dropCount).toBe(2);
     });
   });
   it('checking correct error msg if dropCount have negative number or empty string', async () => {
@@ -100,20 +100,20 @@ describe('<AssignmentSection />', () => {
   it('checking correct error msg if minCount have negative number or empty string', async () => {
     const { getByText, getByTestId } = render(<RootWrapper />);
     await waitFor(() => {
-      const assignmentNumberOfDroppableInput = getByTestId('assignment-minCount-input');
-      expect(assignmentNumberOfDroppableInput.value).toBe('1');
-      fireEvent.change(assignmentNumberOfDroppableInput, { target: { value: '-2' } });
+      const assignmentMinCountInput = getByTestId('assignment-minCount-input');
+      expect(assignmentMinCountInput.value).toBe('1');
+      fireEvent.change(assignmentMinCountInput, { target: { value: '-2' } });
       expect(getByText(messages.totalNumberErrorMessage.defaultMessage)).toBeInTheDocument();
-      fireEvent.change(assignmentNumberOfDroppableInput, { target: { value: '' } });
+      fireEvent.change(assignmentMinCountInput, { target: { value: '' } });
       expect(getByText(messages.totalNumberErrorMessage.defaultMessage)).toBeInTheDocument();
     });
   });
   it('checking correct error msg if total weight have negative number', async () => {
     const { getByText, getByTestId } = render(<RootWrapper />);
     await waitFor(() => {
-      const assignmentNumberOfDroppableInput = getByTestId('assignment-weight-input');
-      expect(assignmentNumberOfDroppableInput.value).toBe('100');
-      fireEvent.change(assignmentNumberOfDroppableInput, { target: { value: '-100' } });
+      const assignmentWeightInput = getByTestId('assignment-weight-input');
+      expect(assignmentWeightInput.value).toBe('100');
+      fireEvent.change(assignmentWeightInput, { target: { value: '-100' } });
       expect(getByText(messages.weightOfTotalGradeErrorMessage.defaultMessage)).toBeInTheDocument();
     });
   });
diff --git a/src/grading-settings/assignment-section/index.jsx b/src/grading-settings/assignment-section/index.jsx
index 4c7652a5f8..8c329e70f4 100644
--- a/src/grading-settings/assignment-section/index.jsx
+++ b/src/grading-settings/assignment-section/index.jsx
@@ -34,7 +34,12 @@ const AssignmentSection = ({
   }
 
   const handleAssignmentChange = (e, assignmentId) => {
-    const { name, value } = e.target;
+    const { name, value, type: inputType } = e.target;
+
+    let inputValue = value;
+    if (inputType === 'number') {
+      inputValue = parseInt(value, 10);
+    }
 
     setShowSavePrompt(true);
 
@@ -42,7 +47,7 @@ const AssignmentSection = ({
       ...prevState,
       graders: graders.map(grader => {
         if (grader.id === assignmentId) {
-          return { ...grader, [name]: value };
+          return { ...grader, [name]: inputValue };
         }
         return grader;
       }),
@@ -66,7 +71,7 @@ const AssignmentSection = ({
   return (
     <div className="assignment-items">
       {graders?.map((gradeField) => {
-        const courseAssignmentUsage = courseAssignmentLists[gradeField.type.toLowerCase()];
+        const courseAssignmentUsage = courseAssignmentLists[gradeField.type];
         const showDefinedCaseAlert = gradeField.minCount !== courseAssignmentUsage?.length
             && Boolean(courseAssignmentUsage?.length);
         const showNotDefinedCaseAlert = !courseAssignmentUsage?.length && Boolean(gradeField.type);

From 195c9e416c99bb8e53fc469d57887acf245a029c Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Fri, 8 Dec 2023 13:26:36 -0500
Subject: [PATCH 11/13] fix: grading segment number ranges (#729)

---
 .../grading-scale/components/GradingScaleSegment.jsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/grading-settings/grading-scale/components/GradingScaleSegment.jsx b/src/grading-settings/grading-scale/components/GradingScaleSegment.jsx
index 1e7aa76f9b..84bba8baa4 100644
--- a/src/grading-settings/grading-scale/components/GradingScaleSegment.jsx
+++ b/src/grading-settings/grading-scale/components/GradingScaleSegment.jsx
@@ -42,7 +42,7 @@ const GradingScaleSegment = ({
         />
       )}
       <span className="grading-scale-segment-content-number m-0">
-        {gradingSegments[idx === 0 ? 0 : idx - 1]?.previous} - {value}
+        {gradingSegments[idx === 0 ? 0 : idx - 1]?.previous} - {value === 100 ? value : value - 1}
       </span>
     </div>
     {idx !== gradingSegments.length && idx - 1 !== 0 && (

From 67cda575a5aab8d2c4007a65ecc7d42dd05d04ea Mon Sep 17 00:00:00 2001
From: Jorg Are <jorg2all@yahoo.com>
Date: Mon, 11 Dec 2023 15:16:40 +0100
Subject: [PATCH 12/13] fix: bump ai translations component (#739)

---
 package-lock.json | 12 ++++++------
 package.json      |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1593f5447f..107c6f5812 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "AGPL-3.0",
       "dependencies": {
         "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-        "@edx/frontend-component-ai-translations-edx": "^1.3.0",
+        "@edx/frontend-component-ai-translations-edx": "^1.4.1",
         "@edx/frontend-component-footer": "^12.3.0",
         "@edx/frontend-component-header": "^4.7.0",
         "@edx/frontend-enterprise-hotjar": "^2.0.0",
@@ -2542,9 +2542,9 @@
       }
     },
     "node_modules/@edx/frontend-component-ai-translations-edx": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-ai-translations-edx/-/frontend-component-ai-translations-edx-1.3.0.tgz",
-      "integrity": "sha512-QMq8k3+EErv/29G8EJuMdpG1+uj9K5unoRP2VrjPoOOrDsK2lCdC8de7hKz2/2lmHzkdF5IOBbKtCQuC+VwxpA==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-ai-translations-edx/-/frontend-component-ai-translations-edx-1.4.1.tgz",
+      "integrity": "sha512-uHRUv7LwIA+1gBWyTgETMMn6izpIUVxGl5ZicnCLRXnS/sbAMpA+0QWpN/S+7J9szz42KZADhxQEI1XuMnFL4g==",
       "dependencies": {
         "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
         "@edx/frontend-platform": "5.6.1",
@@ -2556,8 +2556,8 @@
       "peerDependencies": {
         "@edx/frontend-platform": "^4.0.0 || ^5.0.0 || ^6.0.0",
         "prop-types": "^15.5.10",
-        "react": "^16.14.0 || ^17.0.0",
-        "react-dom": "^16.14.0 || ^17.0.0"
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0"
       }
     },
     "node_modules/@edx/frontend-component-ai-translations-edx/node_modules/react-responsive": {
diff --git a/package.json b/package.json
index 4264dd7f4c..f6df2ec00b 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-ai-translations-edx": "^1.3.0",
+    "@edx/frontend-component-ai-translations-edx": "^1.4.1",
     "@edx/frontend-component-footer": "^12.3.0",
     "@edx/frontend-component-header": "^4.7.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",

From dcabb77218ace1b39e143e498a82070c89776155 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 11 Dec 2023 13:11:53 -0500
Subject: [PATCH 13/13] fix(deps): update dependency
 @edx/frontend-lib-content-components to v1.177.1 (#727)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 107c6f5812..fa7dd56936 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@edx/frontend-component-footer": "^12.3.0",
         "@edx/frontend-component-header": "^4.7.0",
         "@edx/frontend-enterprise-hotjar": "^2.0.0",
-        "@edx/frontend-lib-content-components": "1.176.4",
+        "@edx/frontend-lib-content-components": "1.177.1",
         "@edx/frontend-platform": "5.6.1",
         "@edx/paragon": "^21.5.6",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -2762,9 +2762,9 @@
       }
     },
     "node_modules/@edx/frontend-lib-content-components": {
-      "version": "1.176.4",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-1.176.4.tgz",
-      "integrity": "sha512-scxJWs2nVnsUNno5CFHQWIrROSp3m/8b6dxBza6fKaX78Xm6TRTYpnpVM+uMw6XffJRY1NzUKGyT7AbF+36jvA==",
+      "version": "1.177.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-1.177.1.tgz",
+      "integrity": "sha512-sEmQa9RV37FdUfYvp1i1026uRKM4/iMHJTe6o0gklAJN8B8YZCMdjLj32POpAPcZdD4yKFNRteRU6EeKUHW68w==",
       "dependencies": {
         "@codemirror/lang-html": "^6.0.0",
         "@codemirror/lang-xml": "^6.0.0",
diff --git a/package.json b/package.json
index f6df2ec00b..5fd9d403f9 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@edx/frontend-component-footer": "^12.3.0",
     "@edx/frontend-component-header": "^4.7.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "1.176.4",
+    "@edx/frontend-lib-content-components": "1.177.1",
     "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "^21.5.6",
     "@fortawesome/fontawesome-svg-core": "1.2.36",