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, type UnitXBlock, type 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 | UnitXBlock;
+  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
@@ -72,10 +115,9 @@ export const CourseAuthoringProvider = ({
     }
   };
 
-  const addSectionToCourse = async (locator: string) => {
+  const addSectionToCourse = /* istanbul ignore next */ async (locator: string) => {
     try {
       const data = await getCourseItem(locator);
-      // instanbul ignore next
       // Page should scroll to newly added section.
       data.shouldScroll = true;
       dispatch(addSection(data));
@@ -84,23 +126,35 @@ export const CourseAuthoringProvider = ({
     }
   };
 
-  const addSubsectionToCourse = async (locator: string, parentLocator: string) => {
+  const addSubsectionToCourse = /* istanbul ignore next */ async (locator: string, parentLocator: string) => {
     try {
       const data = await getCourseItem(locator);
-      data.shouldScroll = true;
       // Page should scroll to newly added subsection.
+      data.shouldScroll = true;
       dispatch(addSubsection({ parentLocator, data }));
     } catch {
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
     }
   };
 
+  const addUnitToCourse = /* istanbul ignore next */ async (locator: string, parentLocator: string) => {
+    try {
+      const data = await getCourseItem(locator);
+      // Page should scroll to newly added subsection.
+      data.shouldScroll = true;
+      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 +165,19 @@ export const CourseAuthoringProvider = ({
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
+    handleAddAndOpenUnit,
     getUnitUrl,
     openUnitPage,
+    isUnlinkModalOpen,
+    openUnlinkModal,
+    closeUnlinkModal,
+    currentUnlinkModalData,
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
+    currentSelection,
+    setCurrentSelection,
   }), [
     courseId,
     courseUsageKey,
@@ -122,8 +187,19 @@ export const CourseAuthoringProvider = ({
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
+    handleAddAndOpenUnit,
     getUnitUrl,
     openUnitPage,
+    isUnlinkModalOpen,
+    openUnlinkModal,
+    closeUnlinkModal,
+    currentUnlinkModalData,
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
+    currentSelection,
+    setCurrentSelection,
   ]);
 
   return (

src/CourseAuthoringRoutes.tsx

@@ -11,7 +11,11 @@ import VideoSelectorContainer from './selectors/VideoSelectorContainer';
 import CustomPages from './custom-pages';
 import { FilesPage, VideosPage } from './files-and-videos';
 import { AdvancedSettings } from './advanced-settings';
-import { CourseOutline, OutlineSidebarPagesProvider } from './course-outline';
+import {
+  CourseOutline,
+  OutlineSidebarProvider,
+  OutlineSidebarPagesProvider,
+} from './course-outline';
 import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
 import CourseTeam from './course-team/CourseTeam';
@@ -61,7 +65,9 @@ const CourseAuthoringRoutes = () => {
             element={(
               <PageWrap>
                 <OutlineSidebarPagesProvider>
-                  <CourseOutline />
+                  <OutlineSidebarProvider>
+                    <CourseOutline />
+                  </OutlineSidebarProvider>
                 </OutlineSidebarPagesProvider>
               </PageWrap>
             )}