feat: Enable Move menus in subsections

Author: ChrisChV

src/CourseAuthoringContext.tsx

@@ -1,6 +1,6 @@
 import { getConfig } from '@edx/frontend-platform';
 import {
-  createContext, useContext, useMemo, useState,
+  createContext, useContext, useEffect, useMemo, useState,
 } from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useCreateCourseBlock, useDuplicateItem } from '@src/course-outline/data/apiHooks';
@@ -13,7 +13,7 @@ import { CourseDetailsData } from './data/api';
 import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
 import { RequestStatusType } from './data/constants';
 import { arrayMove } from '@dnd-kit/sortable';
-import { setSectionOrderListQuery } from './course-outline/data/thunk';
+import { fetchCourseOutlineIndexQuery, setSectionOrderListQuery, setSubsectionOrderListQuery } from './course-outline/data/thunk';
 
 type ModalState = {
   value?: XBlock | UnitXBlock;
@@ -50,7 +50,9 @@ export type CourseAuthoringContextData = {
   handleDuplicateSubsectionSubmit: () => void;
   handleDuplicateUnitSubmit: () => void;
   handleSectionDragAndDrop: (sectionListIds: string[]) => void;
+  handleSubsectionDragAndDrop: (sectionId: string, prevSectionId: string, subsectionListIds: string[]) => void;
   updateSectionOrderByIndex: (currentIndex: number, newIndex: number) => void;
+  updateSubsectionOrderByIndex: (section: XBlock, moveDetails: any) => void;
 };
 
 /**
@@ -97,6 +99,14 @@ export const CourseAuthoringProvider = ({
     setSections(() => [...sectionsList]);
   };
 
+  useEffect(() => {
+    dispatch(fetchCourseOutlineIndexQuery(courseId));
+  }, [courseId]);
+
+  useEffect(() => {
+    setSections(sectionsList);
+  }, [sectionsList]);
+
   /**
   * This will hold the state of current item that is being operated on,
   * For example:
@@ -179,6 +189,19 @@ export const CourseAuthoringProvider = ({
     ));
   };
 
+  const handleSubsectionDragAndDrop = (
+    sectionId: string,
+    prevSectionId: string,
+    subsectionListIds: string[],
+  ) => {
+    dispatch(setSubsectionOrderListQuery(
+      sectionId,
+      prevSectionId,
+      subsectionListIds,
+      restoreSectionList,
+    ));
+  };
+
   /**
    * Move section to new index
    */
@@ -193,6 +216,25 @@ export const CourseAuthoringProvider = ({
     });
   };
 
+  /**
+   * Uses details from move information and moves subsection
+   */
+  const updateSubsectionOrderByIndex = (section: XBlock, moveDetails) => {
+    const { fn, args, sectionId } = moveDetails;
+    if (!args) {
+      return;
+    }
+    const [sectionsCopy, newSubsections] = fn(...args);
+    if (newSubsections && sectionId) {
+      setSections(sectionsCopy);
+      handleSubsectionDragAndDrop(
+        sectionId,
+        section.id,
+        newSubsections.map(subsection => subsection.id),
+      );
+    }
+  };
+
   const context = useMemo<CourseAuthoringContextData>(() => ({
     courseId,
     courseUsageKey,
@@ -221,7 +263,9 @@ export const CourseAuthoringProvider = ({
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
     handleSectionDragAndDrop,
+    handleSubsectionDragAndDrop,
     updateSectionOrderByIndex,
+    updateSubsectionOrderByIndex,
   }), [
     courseId,
     courseUsageKey,
@@ -249,7 +293,9 @@ export const CourseAuthoringProvider = ({
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleSectionDragAndDrop,
+    handleSubsectionDragAndDrop,
     updateSectionOrderByIndex,
+    updateSubsectionOrderByIndex,
   ]);
 
   return (

src/course-outline/CourseOutline.tsx

@@ -79,14 +79,14 @@ const CourseOutline = () => {
     restoreSectionList,
     setSections,
     updateSectionOrderByIndex,
+    updateSubsectionOrderByIndex,
   } = useCourseAuthoringContext();
 
   const {
     courseName,
     savingStatus,
     statusBarData,
     courseActions,
-    sectionsList,
     isCustomRelativeDatesActive,
     isLoading,
     isLoadingDenied,
@@ -172,26 +172,6 @@ const CourseOutline = () => {
   const enableProctoredExams = useSelector(getProctoredExamsFlag);
   const enableTimedExams = useSelector(getTimedExamsFlag);
 
-  /**
-   * Uses details from move information and moves subsection
-   */
-  const updateSubsectionOrderByIndex = (section: XBlock, moveDetails) => {
-    const { fn, args, sectionId } = moveDetails;
-    if (!args) {
-      return;
-    }
-    const [sectionsCopy, newSubsections] = fn(...args);
-    if (newSubsections && sectionId) {
-      setSections(sectionsCopy);
-      handleSubsectionDragAndDrop(
-        sectionId,
-        section.id,
-        newSubsections.map(subsection => subsection.id),
-        restoreSectionList,
-      );
-    }
-  };
-
   /**
    * Uses details from move information and moves unit
    */
@@ -215,10 +195,6 @@ const CourseOutline = () => {
     }
   };
 
-  useEffect(() => {
-    setSections(sectionsList);
-  }, [sectionsList]);
-
   if (isLoading) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return (
@@ -294,7 +270,7 @@ const CourseOutline = () => {
                 isSectionsExpanded={isSectionsExpanded}
                 headerNavigationsActions={headerNavigationsActions}
                 isDisabledReindexButton={isDisabledReindexButton}
-                hasSections={Boolean(sectionsList.length)}
+                hasSections={Boolean(sections.length)}
                 courseActions={courseActions}
                 errors={errors}
                 sections={sections}
@@ -324,7 +300,7 @@ const CourseOutline = () => {
                 <div>
                   {showNewActionsBar && (
                   <ActionRow className="mt-3">
-                    {Boolean(sectionsList.length) && (
+                    {Boolean(sections.length) && (
                     <Button
                       variant="outline-primary"
                       id="expand-collapse-all-button"

src/course-outline/hooks.jsx

@@ -66,6 +66,7 @@ const useCourseOutline = ({ courseId }) => {
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
     handleSectionDragAndDrop,
+    handleSubsectionDragAndDrop,
   } = useCourseAuthoringContext();
   const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
 
@@ -308,20 +309,6 @@ const useCourseOutline = ({ courseId }) => {
     dispatch(dismissNotificationQuery(`${getConfig().STUDIO_BASE_URL}${notificationDismissUrl}`));
   };
 
-  const handleSubsectionDragAndDrop = (
-    sectionId,
-    prevSectionId,
-    subsectionListIds,
-    restoreSectionList,
-  ) => {
-    dispatch(setSubsectionOrderListQuery(
-      sectionId,
-      prevSectionId,
-      subsectionListIds,
-      restoreSectionList,
-    ));
-  };
-
   const handleUnitDragAndDrop = (
     sectionId,
     prevSectionId,

src/course-outline/outline-sidebar/OutlineSidebarContext.tsx

@@ -37,7 +37,13 @@ interface OutlineSidebarContextData {
   toggle: () => void;
   selectedContainerState?: SelectionState;
   setSelectedContainerState: (selectedContainerState?: SelectionState) => void;
-  openContainerInfoSidebar: (containerId: string, subsectionId?: string, sectionId?: string, index?: number) => void;
+  openContainerInfoSidebar: (
+    containerId: string,
+    subsectionId?: string,
+    sectionId?: string,
+    index?: number,
+    sectionIndex?: number,
+  ) => void;
   clearSelection: () => void;
   /** Stores last section that allows adding subsections inside it. */
   lastEditableSection?: XBlock;
@@ -124,9 +130,18 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     subsectionId?: string,
     sectionId?: string,
     index?: number,
+    sectionIndex?: number,
   ) => {
     if (isOutlineNewDesignEnabled()) {
-      setSelectedContainerState({ currentId: containerId, subsectionId, sectionId, index });
+      console.log("EEEEEEEEEEEEEEe");
+      console.log(sectionIndex);
+      setSelectedContainerState({
+        currentId: containerId,
+        subsectionId,
+        sectionId,
+        index,
+        sectionIndex,
+      });
       setCurrentPageKey('info');
     }
   }, [setSelectedContainerState, setCurrentPageKey]);

src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.tsx

@@ -29,6 +29,7 @@ export const InfoSidebar = () => {
         <SubsectionSidebar
           subsectionId={selectedContainerState.currentId}
           index={selectedContainerState.index}
+          sectionIndex={selectedContainerState.sectionIndex}
         />
       );
     case ContainerType.Vertical:

src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx

@@ -30,7 +30,7 @@ export const SectionSidebar = ({ sectionId, index }: Props) => {
     sections,
     updateSectionOrderByIndex,
   } = useCourseAuthoringContext();
-  const { clearSelection } = useOutlineSidebarContext();
+  const { clearSelection, selectedContainerState, setSelectedContainerState } = useOutlineSidebarContext();
 
   const handlePublish = () => {
     if (sectionData?.hasChanges) {
@@ -45,17 +45,12 @@ export const SectionSidebar = ({ sectionId, index }: Props) => {
     return <Loading />;
   }
 
-  const handleMoveUp = () => {
-    if (index) {
-      updateSectionOrderByIndex(index, index - 1);
+  const handleMove = (step: number) => {
+    if (index !== undefined) {
+      updateSectionOrderByIndex(index, index + step);
+      setSelectedContainerState(selectedContainerState ? { ...selectedContainerState, index: index + step } : undefined);
     }
-  }
-
-  const handleMoveDown = () => {
-    if (index) {
-      updateSectionOrderByIndex(index, index + 1);
-    }
-  }
+  };
 
   return (
     <>
@@ -68,8 +63,8 @@ export const SectionSidebar = ({ sectionId, index }: Props) => {
           index: index ?? -1,
           canMoveItem: canMoveSection(sections),
           onClickDuplicate: handleDuplicateSectionSubmit,
-          onClickMoveUp: handleMoveUp,
-          onClickMoveDown: handleMoveDown,
+          onClickMoveUp: () => handleMove(-1),
+          onClickMoveDown: () => handleMove(1),
           onClickUnlink: () => {},
           onClickDelete: () => {},
           onClickViewLibrary: () => {},