feat: container info sidebar and add sidebar updates

src/CourseAuthoringContext.tsx

@@ -1,15 +1,27 @@
 import { getConfig } from '@edx/frontend-platform';
-import { createContext, useContext, useMemo } from 'react';
+import {
+  createContext, useContext, useMemo, useState,
+} from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
 import { getCourseItem } from '@src/course-outline/data/api';
 import { useDispatch, useSelector } from 'react-redux';
-import { addSection, addSubsection, updateSavingStatus } from '@src/course-outline/data/slice';
+import {
+  addSection, addSubsection, addUnit, updateSavingStatus,
+} from '@src/course-outline/data/slice';
 import { useNavigate } from 'react-router';
 import { getOutlineIndexData } from '@src/course-outline/data/selectors';
-import { RequestStatus, RequestStatusType } from './data/constants';
-import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
+import { useToggleWithValue } from '@src/hooks';
+import { SelectionState, XBlock } from '@src/data/types';
 import { CourseDetailsData } from './data/api';
+import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
+import { RequestStatus, RequestStatusType } from './data/constants';
+
+type ModalState = {
+  value: XBlock;
+  subsectionId?: string;
+  sectionId?: string;
+};
 
 export type CourseAuthoringContextData = {
   /** The ID of the current course */
@@ -20,9 +32,20 @@ export type CourseAuthoringContextData = {
   canChangeProviders: boolean;
   handleAddSection: ReturnType<typeof useCreateCourseBlock>;
   handleAddSubsection: ReturnType<typeof useCreateCourseBlock>;
+  handleAddAndOpenUnit: ReturnType<typeof useCreateCourseBlock>;
   handleAddUnit: ReturnType<typeof useCreateCourseBlock>;
   openUnitPage: (locator: string) => void;
   getUnitUrl: (locator: string) => string;
+  isUnlinkModalOpen: boolean;
+  currentUnlinkModalData?: ModalState;
+  openUnlinkModal: (value: ModalState) => void;
+  closeUnlinkModal: () => void;
+  isPublishModalOpen: boolean;
+  currentPublishModalData?: ModalState;
+  openPublishModal: (value: ModalState) => void;
+  closePublishModal: () => void;
+  currentSelection?: SelectionState;
+  setCurrentSelection: React.Dispatch<React.SetStateAction<SelectionState | undefined>>;
 };
 
 /**
@@ -50,6 +73,26 @@ export const CourseAuthoringProvider = ({
   const canChangeProviders = getAuthenticatedUser().administrator || new Date(courseDetails?.start ?? 0) > new Date();
   const { courseStructure } = useSelector(getOutlineIndexData);
   const { id: courseUsageKey } = courseStructure || {};
+  const [
+    isUnlinkModalOpen,
+    currentUnlinkModalData,
+    openUnlinkModal,
+    closeUnlinkModal,
+  ] = useToggleWithValue<ModalState>();
+  const [
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
+  ] = useToggleWithValue<ModalState>();
+  /**
+  * This will hold the state of current item that is being operated on,
+  * For example:
+  *  - the details of container that is being edited.
+  *  - the details of container of which see more dropdown is open.
+  * It is mostly used in modals which should be soon be replaced with its equivalent in sidebar.
+  */
+  const [currentSelection, setCurrentSelection] = useState<SelectionState | undefined>();
 
   const getUnitUrl = (locator: string) => {
     if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
@@ -62,7 +105,7 @@ export const CourseAuthoringProvider = ({
   /**
    * Open the unit page for a given locator.
    */
-  const openUnitPage = (locator: string) => {
+  const openUnitPage = async (locator: string) => {
     const url = getUnitUrl(locator);
     if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
       // instanbul ignore next
@@ -95,12 +138,26 @@ export const CourseAuthoringProvider = ({
     }
   };
 
+  const addUnitToCourse = async (locator: string, parentLocator: string) => {
+    try {
+      const data = await getCourseItem(locator);
+      // istanbul ignore next
+      data.shouldScroll = true;
+      // istanbul ignore next
+      // Page should scroll to newly added subsection.
+      dispatch(addUnit({ parentLocator, data }));
+    } catch {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+
   const handleAddSection = useCreateCourseBlock(addSectionToCourse);
   const handleAddSubsection = useCreateCourseBlock(addSubsectionToCourse);
   /**
   * import a unit block from library and redirect user to this unit page.
   */
-  const handleAddUnit = useCreateCourseBlock(openUnitPage);
+  const handleAddAndOpenUnit = useCreateCourseBlock(openUnitPage);
+  const handleAddUnit = useCreateCourseBlock(addUnitToCourse);
 
   const context = useMemo<CourseAuthoringContextData>(() => ({
     courseId,
@@ -111,8 +168,19 @@ export const CourseAuthoringProvider = ({
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
+    handleAddAndOpenUnit,
     getUnitUrl,
     openUnitPage,
+    isUnlinkModalOpen,
+    openUnlinkModal,
+    closeUnlinkModal,
+    currentUnlinkModalData,
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
+    currentSelection,
+    setCurrentSelection,
   }), [
     courseId,
     courseUsageKey,
@@ -122,8 +190,19 @@ export const CourseAuthoringProvider = ({
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
+    handleAddAndOpenUnit,
     getUnitUrl,
     openUnitPage,
+    isUnlinkModalOpen,
+    openUnlinkModal,
+    closeUnlinkModal,
+    currentUnlinkModalData,
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
+    currentSelection,
+    setCurrentSelection,
   ]);
 
   return (

src/CourseAuthoringRoutes.tsx

@@ -3,6 +3,7 @@ import {
 } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 import { PageWrap } from '@edx/frontend-platform/react';
+import { OutlineSidebarPagesProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarPagesContext';
 import { Textbooks } from './textbooks';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';
@@ -11,7 +12,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 { CourseOutline, OutlineSidebarProvider } from './course-outline';
 import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
 import CourseTeam from './course-team/CourseTeam';
@@ -58,7 +59,15 @@ const CourseAuthoringRoutes = () => {
         <Routes>
           <Route
             path="/"
-            element={<PageWrap><CourseOutline /></PageWrap>}
+            element={(
+              <PageWrap>
+                <OutlineSidebarPagesProvider>
+                  <OutlineSidebarProvider>
+                    <CourseOutline />
+                  </OutlineSidebarProvider>
+                </OutlineSidebarPagesProvider>
+              </PageWrap>
+            )}
           />
           <Route
             path="course_info"