feat: Enable Delete in all container info sidebars

ChrisChV · ChrisChV · commit 71816a2ab547 · 2026-03-16T13:51:20.000-05:00
diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
@@ -1,9 +1,9 @@
 import { getConfig } from '@edx/frontend-platform';
 import {
-  createContext, useContext, useEffect, useMemo, useState,
+  createContext, useCallback, useContext, useEffect, useMemo, useState,
 } from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useCreateCourseBlock, useDuplicateItem } from '@src/course-outline/data/apiHooks';
+import { useCreateCourseBlock, useDeleteCourseItem, useDuplicateItem } from '@src/course-outline/data/apiHooks';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router';
 import { getOutlineIndexData, getSectionsList } from '@src/course-outline/data/selectors';
@@ -14,6 +14,10 @@ import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
 import { RequestStatusType } from './data/constants';
 import { arrayMove } from '@dnd-kit/sortable';
 import { fetchCourseOutlineIndexQuery, setSectionOrderListQuery, setSubsectionOrderListQuery, setUnitOrderListQuery } from './course-outline/data/thunk';
+import { useToggle } from '@openedx/paragon';
+import { getBlockType } from './generic/key-utils';
+import { COURSE_BLOCK_NAMES } from './constants';
+import { deleteSection, deleteSubsection, deleteUnit } from './course-outline/data/slice';
 
 type ModalState = {
   value?: XBlock | UnitXBlock;
@@ -46,6 +50,10 @@ export type CourseAuthoringContextData = {
   restoreSectionList: () => void;
   setSections: React.Dispatch<React.SetStateAction<XBlock[]>>;
   isDuplicatingItem: boolean;
+  isDeleteModalOpen: boolean;
+  openDeleteModal: () => void;
+  closeDeleteModal: () => void;
+  getHandleDeleteItemSubmit: (callback: () => void) => () => Promise<void>;
   handleDuplicateSectionSubmit: () => void;
   handleDuplicateSubsectionSubmit: () => void;
   handleDuplicateUnitSubmit: () => void;
@@ -96,6 +104,8 @@ export const CourseAuthoringProvider = ({
   ] = useToggleWithValue<ModalState>();
   const sectionsList = useSelector(getSectionsList);
   const [sections, setSections] = useState<XBlock[]>(sectionsList);
+  const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
+  
 
   const restoreSectionList = () => {
     setSections(() => [...sectionsList]);
@@ -272,6 +282,68 @@ export const CourseAuthoringProvider = ({
     }
   };
 
+  const deleteMutation = useDeleteCourseItem();
+  
+  const getHandleDeleteItemSubmit = useCallback((callback: () => void) => {
+    return async () => {
+      // istanbul ignore if
+      if (!currentSelection) {
+        return;
+      }
+      const category = getBlockType(currentSelection.currentId);
+      switch (category) {
+        case COURSE_BLOCK_NAMES.chapter.id:
+          await deleteMutation.mutateAsync(
+            { itemId: currentSelection.currentId },
+            {
+              onSettled: () => dispatch(deleteSection({ itemId: currentSelection.currentId })),
+            },
+          );
+          break;
+        case COURSE_BLOCK_NAMES.sequential.id:
+          await deleteMutation.mutateAsync(
+            { itemId: currentSelection.currentId, sectionId: currentSelection.sectionId },
+            {
+              onSettled: () => dispatch(deleteSubsection({
+                itemId: currentSelection.currentId,
+                sectionId: currentSelection.sectionId,
+              })),
+            },
+          );
+          break;
+        case COURSE_BLOCK_NAMES.vertical.id:
+          await deleteMutation.mutateAsync(
+            {
+              itemId: currentSelection.currentId,
+              subsectionId: currentSelection.subsectionId,
+              sectionId: currentSelection.sectionId,
+            },
+            {
+              onSettled: () => dispatch(deleteUnit({
+                itemId: currentSelection.currentId,
+                subsectionId: currentSelection.subsectionId,
+                sectionId: currentSelection.sectionId,
+              })),
+            },
+          );
+          break;
+        default:
+          // istanbul ignore next
+          throw new Error(`Unrecognized category ${category}`);
+      }
+      closeDeleteModal();
+      callback();
+    };
+  }, [
+    deleteMutation,
+    closeDeleteModal,
+    currentSelection,
+    dispatch,
+    deleteSection,
+    deleteUnit,
+    deleteSubsection,
+  ]);
+
   const context = useMemo<CourseAuthoringContextData>(() => ({
     courseId,
     courseUsageKey,
@@ -296,6 +368,10 @@ export const CourseAuthoringProvider = ({
     restoreSectionList,
     setSections,
     isDuplicatingItem,
+    isDeleteModalOpen,
+    openDeleteModal,
+    closeDeleteModal,
+    getHandleDeleteItemSubmit,
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
@@ -329,6 +405,10 @@ export const CourseAuthoringProvider = ({
     restoreSectionList,
     setSections,
     isDuplicatingItem,
+    isDeleteModalOpen,
+    openDeleteModal,
+    closeDeleteModal,
+    getHandleDeleteItemSubmit,
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleSectionDragAndDrop,
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
@@ -24,9 +24,6 @@ import {
 } from '@src/course-outline/data/apiHooks';
 import { COURSE_BLOCK_NAMES } from './constants';
 import {
-  deleteSection,
-  deleteSubsection,
-  deleteUnit,
   updateSavingStatus,
 } from './data/slice';
 import {
@@ -45,9 +42,7 @@ import {
   fetchCourseLaunchQuery,
   fetchCourseOutlineIndexQuery,
   fetchCourseReindexQuery,
-  setSectionOrderListQuery,
   setVideoSharingOptionQuery,
-  setSubsectionOrderListQuery,
   dismissNotificationQuery,
   syncDiscussionsTopics,
 } from './data/thunk';
@@ -61,6 +56,10 @@ const useCourseOutline = ({ courseId }) => {
     currentUnlinkModalData,
     closeUnlinkModal,
     isDuplicatingItem,
+    isDeleteModalOpen,
+    openDeleteModal,
+    closeDeleteModal,
+    getHandleDeleteItemSubmit,
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
@@ -70,6 +69,12 @@ const useCourseOutline = ({ courseId }) => {
   } = useCourseAuthoringContext();
   const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
 
+  const handleDeleteItemSubmit = getHandleDeleteItemSubmit(() => {
+    if (selectedContainerState.currentId === currentSelection?.currentId) {
+      clearSelection();
+    }
+  });
+
   const {
     reindexLink,
     courseStructure,
@@ -99,8 +104,6 @@ const useCourseOutline = ({ courseId }) => {
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
   const [isHighlightsModalOpen, openHighlightsModal, closeHighlightsModal] = useToggle(false);
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
-  const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
-  const queryClient = useQueryClient();
 
   const isSavingStatusFailed = savingStatus === RequestStatus.FAILED || genericSavingStatus === RequestStatus.FAILED;
 
@@ -236,71 +239,6 @@ const useCourseOutline = ({ courseId }) => {
     handleConfigureModalClose();
   };
 
-  const deleteMutation = useDeleteCourseItem();
-
-  const handleDeleteItemSubmit = useCallback(async () => {
-    // istanbul ignore if
-    if (!currentSelection) {
-      return;
-    }
-    const category = getBlockType(currentSelection.currentId);
-    switch (category) {
-      case COURSE_BLOCK_NAMES.chapter.id:
-        await deleteMutation.mutateAsync(
-          { itemId: currentSelection.currentId },
-          {
-            onSettled: () => dispatch(deleteSection({ itemId: currentSelection.currentId })),
-          },
-        );
-        break;
-      case COURSE_BLOCK_NAMES.sequential.id:
-        await deleteMutation.mutateAsync(
-          { itemId: currentSelection.currentId, sectionId: currentSelection.sectionId },
-          {
-            onSettled: () => dispatch(deleteSubsection({
-              itemId: currentSelection.currentId,
-              sectionId: currentSelection.sectionId,
-            })),
-          },
-        );
-        break;
-      case COURSE_BLOCK_NAMES.vertical.id:
-        await deleteMutation.mutateAsync(
-          {
-            itemId: currentSelection.currentId,
-            subsectionId: currentSelection.subsectionId,
-            sectionId: currentSelection.sectionId,
-          },
-          {
-            onSettled: () => dispatch(deleteUnit({
-              itemId: currentSelection.currentId,
-              subsectionId: currentSelection.subsectionId,
-              sectionId: currentSelection.sectionId,
-            })),
-          },
-        );
-        break;
-      default:
-        // istanbul ignore next
-        throw new Error(`Unrecognized category ${category}`);
-    }
-    closeDeleteModal();
-    if (selectedContainerState.currentId === currentSelection?.currentId) {
-      clearSelection();
-    }
-  }, [
-    deleteMutation,
-    clearSelection,
-    closeDeleteModal,
-    queryClient,
-    currentSelection,
-    courseOutlineQueryKeys,
-    dispatch,
-    deleteSection,
-    deleteUnit,
-    deleteSubsection,
-  ]);
-
   const handleVideoSharingOptionChange = (value) => {
     dispatch(setVideoSharingOptionQuery(courseId, value));
   };
diff --git a/src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx
@@ -26,6 +26,7 @@ export const SectionSidebar = () => {
     handleDuplicateSectionSubmit,
     sections,
     updateSectionOrderByIndex,
+    openDeleteModal,
   } = useCourseAuthoringContext();
 
   const handlePublish = () => {
@@ -62,7 +63,7 @@ export const SectionSidebar = () => {
           onClickMoveUp: () => handleMove(-1),
           onClickMoveDown: () => handleMove(1),
           onClickUnlink: () => {},
-          onClickDelete: () => {},
+          onClickDelete: openDeleteModal,
           onClickViewLibrary: () => {},
         }}
       />
diff --git a/src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx
@@ -33,6 +33,7 @@ export const SubsectionSidebar = () => {
     handleDuplicateSubsectionSubmit,
     sections,
     updateSubsectionOrderByIndex,
+    openDeleteModal,
   } = useCourseAuthoringContext();
 
   const handlePublish = () => {
@@ -104,7 +105,7 @@ export const SubsectionSidebar = () => {
           onClickMoveUp: () => handleMove(-1),
           onClickMoveDown: () => handleMove(1),
           onClickUnlink: () => {},
-          onClickDelete: () => {},
+          onClickDelete: openDeleteModal,
           onClickViewLibrary: () => {},
         }}
       />
diff --git a/src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx
@@ -41,6 +41,7 @@ export const UnitSidebar = () => {
     handleDuplicateUnitSubmit,
     sections,
     updateUnitOrderByIndex,
+    openDeleteModal,
   } = useCourseAuthoringContext();
 
   const handlePublish = () => {
@@ -128,7 +129,7 @@ export const UnitSidebar = () => {
           onClickMoveUp: () => handleMove(-1),
           onClickMoveDown: () => handleMove(1),
           onClickUnlink: () => {},
-          onClickDelete: () => {},
+          onClickDelete: openDeleteModal,
           onClickViewLibrary: () => {},
           onClickCopy: () => {},
           onClickCopyLocation: () => {},
