feat: Enable move in unit sidebar

ChrisChV · ChrisChV · commit 0fd1d2e54871 · 2026-03-16T13:51:20.000-05:00
diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
@@ -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 { fetchCourseOutlineIndexQuery, setSectionOrderListQuery, setSubsectionOrderListQuery } from './course-outline/data/thunk';
+import { fetchCourseOutlineIndexQuery, setSectionOrderListQuery, setSubsectionOrderListQuery, setUnitOrderListQuery } from './course-outline/data/thunk';
 
 type ModalState = {
   value?: XBlock | UnitXBlock;
@@ -51,8 +51,10 @@ export type CourseAuthoringContextData = {
   handleDuplicateUnitSubmit: () => void;
   handleSectionDragAndDrop: (sectionListIds: string[]) => void;
   handleSubsectionDragAndDrop: (sectionId: string, prevSectionId: string, subsectionListIds: string[]) => void;
+  handleUnitDragAndDrop: (sectionId: string, prevSectionId: string, subsectionId: string, unitListIds: string[]) => void;
   updateSectionOrderByIndex: (currentIndex: number, newIndex: number) => void;
   updateSubsectionOrderByIndex: (section: XBlock, moveDetails: any) => void;
+  updateUnitOrderByIndex: (section: XBlock, moveDetails: any) => void;
 };
 
 /**
@@ -202,6 +204,41 @@ export const CourseAuthoringProvider = ({
     ));
   };
 
+  const handleUnitDragAndDrop = (
+    sectionId: string,
+    prevSectionId: string,
+    subsectionId: string,
+    unitListIds: string[],
+  ) => {
+    dispatch(setUnitOrderListQuery(
+      sectionId,
+      subsectionId,
+      prevSectionId,
+      unitListIds,
+      restoreSectionList,
+    ));
+  };
+
+  /**
+   * Uses details from move information and moves unit
+   */
+  const updateUnitOrderByIndex = (section: XBlock, moveDetails) => {
+    const { fn, args, sectionId, subsectionId } = moveDetails;
+    if (!args) {
+      return;
+    }
+    const [sectionsCopy, newUnits] = fn(...args);
+    if (newUnits && subsectionId) {
+      setSections(sectionsCopy);
+      handleUnitDragAndDrop(
+        sectionId,
+        section.id,
+        subsectionId,
+        newUnits.map((unit) => unit.id),
+      );
+    }
+  };
+
   /**
    * Move section to new index
    */
@@ -264,8 +301,10 @@ export const CourseAuthoringProvider = ({
     handleDuplicateUnitSubmit,
     handleSectionDragAndDrop,
     handleSubsectionDragAndDrop,
+    handleUnitDragAndDrop,
     updateSectionOrderByIndex,
     updateSubsectionOrderByIndex,
+    updateUnitOrderByIndex,
   }), [
     courseId,
     courseUsageKey,
@@ -294,8 +333,10 @@ export const CourseAuthoringProvider = ({
     handleDuplicateSubsectionSubmit,
     handleSectionDragAndDrop,
     handleSubsectionDragAndDrop,
+    handleUnitDragAndDrop,
     updateSectionOrderByIndex,
     updateSubsectionOrderByIndex,
+    updateUnitOrderByIndex,
   ]);
 
   return (
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
@@ -80,6 +80,7 @@ const CourseOutline = () => {
     setSections,
     updateSectionOrderByIndex,
     updateSubsectionOrderByIndex,
+    updateUnitOrderByIndex,
   } = useCourseAuthoringContext();
 
   const {
@@ -172,29 +173,6 @@ const CourseOutline = () => {
   const enableProctoredExams = useSelector(getProctoredExamsFlag);
   const enableTimedExams = useSelector(getTimedExamsFlag);
 
-  /**
-   * Uses details from move information and moves unit
-   */
-  const updateUnitOrderByIndex = (section: XBlock, moveDetails) => {
-    const {
-      fn, args, sectionId, subsectionId,
-    } = moveDetails;
-    if (!args) {
-      return;
-    }
-    const [sectionsCopy, newUnits] = fn(...args);
-    if (newUnits && sectionId && subsectionId) {
-      setSections(sectionsCopy);
-      handleUnitDragAndDrop(
-        sectionId,
-        section.id,
-        subsectionId,
-        newUnits.map(unit => unit.id),
-        restoreSectionList,
-      );
-    }
-  };
-
   if (isLoading) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return (
@@ -386,6 +364,7 @@ const CourseOutline = () => {
                                                 unit={unit}
                                                 subsection={subsection}
                                                 section={section}
+                                                sectionIndex={sectionIndex}
                                                 isSelfPaced={statusBarData.isSelfPaced}
                                                 isCustomRelativeDatesActive={isCustomRelativeDatesActive}
                                                 index={unitIndex}
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
@@ -48,7 +48,6 @@ import {
   setSectionOrderListQuery,
   setVideoSharingOptionQuery,
   setSubsectionOrderListQuery,
-  setUnitOrderListQuery,
   dismissNotificationQuery,
   syncDiscussionsTopics,
 } from './data/thunk';
@@ -67,6 +66,7 @@ const useCourseOutline = ({ courseId }) => {
     handleDuplicateUnitSubmit,
     handleSectionDragAndDrop,
     handleSubsectionDragAndDrop,
+    handleUnitDragAndDrop,
   } = useCourseAuthoringContext();
   const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
 
@@ -309,22 +309,6 @@ const useCourseOutline = ({ courseId }) => {
     dispatch(dismissNotificationQuery(`${getConfig().STUDIO_BASE_URL}${notificationDismissUrl}`));
   };
 
-  const handleUnitDragAndDrop = (
-    sectionId,
-    prevSectionId,
-    subsectionId,
-    unitListIds,
-    restoreSectionList,
-  ) => {
-    dispatch(setUnitOrderListQuery(
-      sectionId,
-      subsectionId,
-      prevSectionId,
-      unitListIds,
-      restoreSectionList,
-    ));
-  };
-
   useEffect(() => {
     dispatch(fetchCourseOutlineIndexQuery(courseId));
     dispatch(fetchCourseBestPracticesQuery({ courseId }));
diff --git a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.tsx
@@ -17,29 +17,13 @@ export const InfoSidebar = () => {
   switch (itemType) {
     case ContainerType.Chapter:
     case ContainerType.Section:
-      return (
-        <SectionSidebar
-          sectionId={selectedContainerState.currentId}
-          index={selectedContainerState.index}
-        />
-      );
+      return <SectionSidebar />;
     case ContainerType.Sequential:
     case ContainerType.Subsection:
-      return (
-        <SubsectionSidebar
-          subsectionId={selectedContainerState.currentId}
-          index={selectedContainerState.index}
-          sectionIndex={selectedContainerState.sectionIndex}
-        />
-      );
+      return <SubsectionSidebar />;
     case ContainerType.Vertical:
     case ContainerType.Unit:
-      return (
-        <UnitSidebar
-          unitId={selectedContainerState.currentId}
-          index={selectedContainerState.index}
-        />
-      );
+      return <UnitSidebar />;
     default:
       return <CourseInfoSidebar />;
   }
diff --git a/src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx
@@ -15,22 +15,18 @@ import messages from '../messages';
 import { PublishButon } from './PublishButon';
 import { canMoveSection } from '@src/course-outline/drag-helper/utils';
 
-interface Props {
-  sectionId: string;
-  index?: number; 
-}
-
-export const SectionSidebar = ({ sectionId, index }: Props) => {
+export const SectionSidebar = () => {
   const intl = useIntl();
   const [tab, setTab] = useState<'info' | 'settings'>('info');
+  const { clearSelection, selectedContainerState, setSelectedContainerState } = useOutlineSidebarContext();
+  const { sectionId = '', index } = selectedContainerState ?? {};
   const { data: sectionData, isLoading } = useCourseItemData(sectionId);
   const {
     openPublishModal,
     handleDuplicateSectionSubmit,
     sections,
     updateSectionOrderByIndex,
   } = useCourseAuthoringContext();
-  const { clearSelection, selectedContainerState, setSelectedContainerState } = useOutlineSidebarContext();
 
   const handlePublish = () => {
     if (sectionData?.hasChanges) {
diff --git a/src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx
@@ -22,17 +22,18 @@ interface Props {
   sectionIndex?: number;
 }
 
-export const SubsectionSidebar = ({ subsectionId, index, sectionIndex }: Props) => {
+export const SubsectionSidebar = () => {
   const intl = useIntl();
   const [tab, setTab] = useState<'info' | 'settings'>('info');
+  const { clearSelection, selectedContainerState, setSelectedContainerState } = useOutlineSidebarContext();
+  const { subsectionId = '', index, sectionIndex } = selectedContainerState ?? {};
   const { data: subsectionData, isLoading } = useCourseItemData(subsectionId);
   const {
     openPublishModal,
     handleDuplicateSubsectionSubmit,
     sections,
     updateSubsectionOrderByIndex,
   } = useCourseAuthoringContext();
-  const { clearSelection, selectedContainerState, setSelectedContainerState } = useOutlineSidebarContext();
 
   const handlePublish = () => {
     if (selectedContainerState?.sectionId && subsectionData?.hasChanges) {
diff --git a/src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx
@@ -1,4 +1,6 @@
 import { useState } from 'react';
+import { isEmpty } from 'lodash';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button, Stack, Tab, Tabs,
@@ -17,26 +19,28 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import XBlockContainerIframe from '@src/course-unit/xblock-container-iframe';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
 import { Link } from 'react-router-dom';
+import { possibleUnitMoves } from '@src/course-outline/drag-helper/utils';
 import { useOutlineSidebarContext } from '../OutlineSidebarContext';
 import { PublishButon } from './PublishButon';
 import messages from '../messages';
 import { InfoSection } from './InfoSection';
 
-interface Props {
-  unitId: string;
-  index?: number
-}
-
-export const UnitSidebar = ({ unitId, index }: Props) => {
+export const UnitSidebar = () => {
   const intl = useIntl();
   const [tab, setTab] = useState<'preview' | 'info' | 'settings'>('info');
+  const { selectedContainerState, clearSelection, setSelectedContainerState } = useOutlineSidebarContext();
+  const {
+    currentId: unitId = '',
+    index,
+  } = selectedContainerState ?? {};
   const { data: unitData, isLoading } = useCourseItemData(unitId);
-  const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
   const {
     openPublishModal,
     getUnitUrl,
     courseId,
     handleDuplicateUnitSubmit,
+    sections,
+    updateUnitOrderByIndex,
   } = useCourseAuthoringContext();
 
   const handlePublish = () => {
@@ -53,6 +57,63 @@ export const UnitSidebar = ({ unitId, index }: Props) => {
     return <Loading />;
   }
 
+  // Resolve section and subsection from selectedContainerState indices
+  const sectionIndex = selectedContainerState?.sectionIndex;
+  const section = sectionIndex !== undefined ? sections[sectionIndex] : undefined;
+  const subsectionIndex = section && selectedContainerState?.subsectionId
+    ? section.childInfo.children.findIndex((s) => s.id === selectedContainerState.subsectionId)
+    : -1;
+  const subsection = subsectionIndex !== -1 ? section?.childInfo.children[subsectionIndex] : undefined;
+
+  // Build move calculator only when all ancestor context is available
+  const getPossibleMoves = (section && subsection && subsectionIndex !== -1)
+    ? possibleUnitMoves(
+      [...sections],
+      sectionIndex ?? -1,
+      subsectionIndex,
+      section,
+      subsection,
+      subsection.childInfo.children,
+    )
+    : undefined;
+
+  const canMoveUnit = (oldIndex: number, step: number) => {
+    if (getPossibleMoves) {
+      const moveDetails = getPossibleMoves(oldIndex, step);
+      return !isEmpty(moveDetails);
+    }
+    return false;
+  };
+
+  const handleMove = (step: number) => {
+    if (section && subsection && getPossibleMoves && index !== undefined && sectionIndex !== undefined) {
+      const moveDetails = getPossibleMoves(index, step);
+      // section is the current parent section (used as prevSection in cross-section moves)
+      updateUnitOrderByIndex(section, moveDetails);
+      if (!isEmpty(moveDetails)) {
+        const newSectionId = moveDetails.sectionId;
+        const newSubsectionId = moveDetails.subsectionId;
+        // Cross-subsection move: unit goes to end of previous or start of next subsection
+        const isCrossSubsection = newSubsectionId !== subsection.id;
+        const newSectionIndex = newSectionId !== section.id
+          ? sections.findIndex((s) => s.id === newSectionId)
+          : sectionIndex;
+        const newIndex = isCrossSubsection
+          ? (step === -1
+            ? sections[newSectionIndex].childInfo.children.find((s) => s.id === newSubsectionId)?.childInfo.children.length ?? 0
+            : 0)
+          : index + step;
+        setSelectedContainerState(selectedContainerState ? {
+          ...selectedContainerState,
+          sectionId: newSectionId,
+          sectionIndex: newSectionIndex,
+          subsectionId: newSubsectionId,
+          index: newIndex,
+        } : undefined);
+      }
+    }
+  };
+
   return (
     <>
       <SidebarTitle
@@ -62,9 +123,10 @@ export const UnitSidebar = ({ unitId, index }: Props) => {
         menuProps={{
           itemId: unitId,
           index: index ?? -1,
+          canMoveItem: canMoveUnit,
           onClickDuplicate: handleDuplicateUnitSubmit,
-          onClickMoveUp: () => {},
-          onClickMoveDown: () => {},
+          onClickMoveUp: () => handleMove(-1),
+          onClickMoveDown: () => handleMove(1),
           onClickUnlink: () => {},
           onClickDelete: () => {},
           onClickViewLibrary: () => {},
diff --git a/src/course-outline/section-card/SectionCard.test.tsx b/src/course-outline/section-card/SectionCard.test.tsx
@@ -367,10 +367,12 @@ describe('<SectionCard />', () => {
     expect(setCurrentSelection).toHaveBeenCalledWith({
       currentId: section.id,
       sectionId: section.id,
+      index: 1,
     });
     expect(mockSetSelectedContainerState).toHaveBeenCalledWith({
       currentId: section.id,
       sectionId: section.id,
+      index: 1,
     });
   });
 });
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
diff --git a/src/course-outline/unit-card/UnitCard.test.tsx b/src/course-outline/unit-card/UnitCard.test.tsx
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
diff --git a/src/course-unit/unit-sidebar/unit-info/ComponentInfoSidebar.tsx b/src/course-unit/unit-sidebar/unit-info/ComponentInfoSidebar.tsx
