refactor(outline-sidebar): centralize back navigation

Author: navinkarkera

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

@@ -29,7 +29,7 @@ import { COURSE_BLOCK_NAMES } from '@src/constants';
 import { BlockCardButton } from '@src/generic/sidebar/BlockCardButton';
 import AlertMessage from '@src/generic/alert-message';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
-import { navigateBackFromSelection } from './back-navigation';
+import { useBackNavigation } from './back-navigation';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 import messages from './messages';
 
@@ -360,12 +360,10 @@ const AddTabs = () => {
 export const AddSidebar = () => {
   const intl = useIntl();
   const { courseDetails } = useCourseAuthoringContext();
-  const { sections } = useCourseOutlineContext();
   const {
     isCurrentFlowOn,
     currentFlow,
     currentItemData,
-    clearSelection,
     stopCurrentFlow,
     selectedContainerState,
     openContainerSidebar,
@@ -389,14 +387,13 @@ export const AddSidebar = () => {
     courseDetails,
   ]);
 
+  const handleSelectionBack = useBackNavigation({
+    openContainer: openContainerSidebar,
+  });
+
   const handleBack = () => {
     stopCurrentFlow();
-    navigateBackFromSelection({
-      selectedContainerState,
-      sections,
-      openContainer: openContainerSidebar,
-      clearSelection,
-    });
+    handleSelectionBack();
   };
 
   return (

src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx

@@ -19,6 +19,9 @@ describe('OutlineAlignSidebar', () => {
   const setCurrentSelection = jest.fn();
   const clearSelection = jest.fn();
   const openContainerSidebar = jest.fn();
+  const sectionId = 'block-v1:test+course+run+type@chapter+block@section-1';
+  const subsectionId = 'block-v1:test+course+run+type@sequential+block@subsection-1';
+  const unitId = 'block-v1:test+course+run+type@vertical+block@unit-1';
 
   beforeEach(() => {
     initializeMocks();
@@ -36,10 +39,10 @@ describe('OutlineAlignSidebar', () => {
         setCurrentSelection,
         sections: [
           {
-            id: 'section-1',
+            id: sectionId,
             childInfo: {
               children: [
-                { id: 'subsection-1', childInfo: { children: [{ id: 'unit-1' }] } },
+                { id: subsectionId, childInfo: { children: [{ id: unitId }] } },
               ],
             },
           },
@@ -109,9 +112,9 @@ describe('OutlineAlignSidebar', () => {
       .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
       .mockReturnValue({
         selectedContainerState: {
-          currentId: 'unit-1',
-          subsectionId: 'subsection-1',
-          sectionId: 'section-1',
+          currentId: unitId,
+          subsectionId,
+          sectionId,
         },
         clearSelection,
         openContainerSidebar,
@@ -122,11 +125,11 @@ describe('OutlineAlignSidebar', () => {
     const backButton = await screen.findByRole('button', { name: /back/i });
     backButton.click();
 
-    expect(openContainerSidebar).toHaveBeenCalledWith('subsection-1', 'subsection-1', 'section-1', 0);
+    expect(openContainerSidebar).toHaveBeenCalledWith(subsectionId, subsectionId, sectionId, 0);
     expect(setCurrentSelection).toHaveBeenCalledWith({
-      currentId: 'subsection-1',
-      subsectionId: 'subsection-1',
-      sectionId: 'section-1',
+      currentId: subsectionId,
+      subsectionId,
+      sectionId,
       index: 0,
     });
   });
@@ -136,8 +139,8 @@ describe('OutlineAlignSidebar', () => {
       .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
       .mockReturnValue({
         selectedContainerState: {
-          currentId: 'section-1',
-          sectionId: 'section-1',
+          currentId: sectionId,
+          sectionId,
         },
         clearSelection,
         openContainerSidebar,

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

@@ -2,30 +2,25 @@ import { useContentData } from '@src/content-tags-drawer/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useCourseOutlineContext } from '@src/course-outline/CourseOutlineContext';
 import { AlignSidebar } from '@src/generic/sidebar/AlignSidebar';
-import { navigateBackFromSelection } from './back-navigation';
+import { useBackNavigation } from './back-navigation';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 
 /**
  * Align sidebar for course or selected containers.
  */
 export const OutlineAlignSidebar = () => {
   const { courseId } = useCourseAuthoringContext();
-  const { setCurrentSelection, sections } = useCourseOutlineContext();
-  const { selectedContainerState, clearSelection, openContainerSidebar } = useOutlineSidebarContext();
+  const { setCurrentSelection } = useCourseOutlineContext();
+  const { selectedContainerState, openContainerSidebar } = useOutlineSidebarContext();
 
   const sidebarContentId = selectedContainerState?.currentId || courseId;
 
   const { data: contentData } = useContentData(sidebarContentId);
 
-  const handleBack = () => {
-    navigateBackFromSelection({
-      selectedContainerState,
-      sections,
-      openContainer: openContainerSidebar,
-      clearSelection,
-      onSelectionChange: setCurrentSelection,
-    });
-  };
+  const handleBack = useBackNavigation({
+    openContainer: openContainerSidebar,
+    onSelectionChange: setCurrentSelection,
+  });
 
   return (
     <AlignSidebar

src/course-outline/outline-sidebar/back-navigation.test.ts

@@ -1,5 +1,5 @@
 import { SelectionState } from '@src/data/types';
-import { getBackSelectionState, navigateBackFromSelection } from './back-navigation';
+import { getBackSelectionState, openSelectionState } from './back-navigation';
 
 describe('back-navigation', () => {
   const sections = [
@@ -102,53 +102,18 @@ describe('back-navigation', () => {
     });
   });
 
-  describe('navigateBackFromSelection', () => {
-    it('opens parent and propagates selection when back target exists', () => {
+  describe('openSelectionState', () => {
+    it('opens container with SelectionState payload', () => {
       const openContainer = jest.fn();
-      const clearSelection = jest.fn();
-      const onSelectionChange = jest.fn();
-
-      navigateBackFromSelection({
-        selectedContainerState: {
-          currentId: 'unit-1',
-          subsectionId: 'subsection-1',
-          sectionId: 'section-1',
-        },
-        sections,
-        openContainer,
-        clearSelection,
-        onSelectionChange,
-      });
 
-      expect(openContainer).toHaveBeenCalledWith('subsection-1', 'subsection-1', 'section-1', 0);
-      expect(onSelectionChange).toHaveBeenCalledWith({
+      openSelectionState(openContainer, {
         currentId: 'subsection-1',
         subsectionId: 'subsection-1',
         sectionId: 'section-1',
         index: 0,
       });
-      expect(clearSelection).not.toHaveBeenCalled();
-    });
 
-    it('clears selection and propagates undefined when no back target', () => {
-      const openContainer = jest.fn();
-      const clearSelection = jest.fn();
-      const onSelectionChange = jest.fn();
-
-      navigateBackFromSelection({
-        selectedContainerState: {
-          currentId: 'section-1',
-          sectionId: 'section-1',
-        },
-        sections,
-        openContainer,
-        clearSelection,
-        onSelectionChange,
-      });
-
-      expect(clearSelection).toHaveBeenCalled();
-      expect(onSelectionChange).toHaveBeenCalledWith(undefined);
-      expect(openContainer).not.toHaveBeenCalled();
+      expect(openContainer).toHaveBeenCalledWith('subsection-1', 'subsection-1', 'section-1', 0);
     });
   });
 });

src/course-outline/outline-sidebar/back-navigation.ts

@@ -1,4 +1,8 @@
+import { useCallback } from 'react';
+import { useCourseOutlineContext } from '@src/course-outline/CourseOutlineContext';
 import { SelectionState, XBlock } from '@src/data/types';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { useOutlineSidebarContext } from './OutlineSidebarContext';
 
 /**
  * Function signature shared by sidebar container openers.
@@ -15,22 +19,11 @@ type OpenContainerFn = (
 ) => void;
 
 /**
- * Inputs for generic "back" navigation resolution.
+ * Inputs for useBackNavigation hook.
  */
-type NavigateBackOptions = {
-  /** Current selection state in sidebar context. */
-  selectedContainerState: SelectionState | undefined;
-  /** Sections list from course outline context (used for parent index lookup). */
-  sections: Array<XBlock>;
+type UseBackNavigationOptions = {
   /** Callback used to open a container sidebar (align/info/add flavors). */
   openContainer: OpenContainerFn;
-  /** Fallback action when no parent target exists. */
-  clearSelection: () => void;
-  /**
-   * Optional authoritative selected section payload.
-   * Useful when section list is partial/minimal in tests or callers.
-   */
-  selectedSection?: XBlock;
   /** Optional hook to sync external selection state (e.g. align view selection). */
   onSelectionChange?: (selectionState?: SelectionState) => void;
 };
@@ -51,31 +44,34 @@ export const openSelectionState = (
 };
 
 /**
- * Execute generic back navigation for outline sidebars.
+ * Hook that returns standardized sidebar "back" handler.
  *
- * Flow:
- * 1) Compute parent selection state.
- * 2) If parent exists, open parent and optionally sync external selection.
- * 3) Else clear selection and optionally sync undefined.
+ * It pulls required state from context/hooks:
+ * - selectedContainerState + clearSelection (sidebar context)
+ * - sections (course outline context)
+ * - selected section data via useCourseItemData (React Query cache)
  */
-export const navigateBackFromSelection = ({
-  selectedContainerState,
-  sections,
-  openContainer,
-  clearSelection,
-  selectedSection,
-  onSelectionChange,
-}: NavigateBackOptions) => {
-  const backSelectionState = getBackSelectionState(selectedContainerState, sections, selectedSection);
+export const useBackNavigation = ({ openContainer, onSelectionChange }: UseBackNavigationOptions) => {
+  const { sections } = useCourseOutlineContext();
+  const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
+  const { data: selectedSection } = useCourseItemData<XBlock>(
+    selectedContainerState?.sectionId,
+    undefined,
+    Boolean(selectedContainerState?.sectionId),
+  );
 
-  if (backSelectionState) {
-    openSelectionState(openContainer, backSelectionState);
-    onSelectionChange?.(backSelectionState);
-    return;
-  }
+  return useCallback(() => {
+    const backSelectionState = getBackSelectionState(selectedContainerState, sections, selectedSection);
+
+    if (backSelectionState) {
+      openSelectionState(openContainer, backSelectionState);
+      onSelectionChange?.(backSelectionState);
+      return;
+    }
 
-  clearSelection();
-  onSelectionChange?.(undefined);
+    clearSelection();
+    onSelectionChange?.(undefined);
+  }, [selectedContainerState, sections, selectedSection, openContainer, onSelectionChange, clearSelection]);
 };
 
 /**

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

@@ -15,7 +15,7 @@ import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/Ou
 import { getLibraryId } from '@src/generic/key-utils';
 import { possibleSubsectionMoves } from '@src/course-outline/drag-helper/utils';
 import { XBlock } from '@src/data/types';
-import { navigateBackFromSelection } from '../back-navigation';
+import { useBackNavigation } from '../back-navigation';
 
 import { InfoSection } from './InfoSection';
 import { PublishButon } from './PublishButon';
@@ -27,7 +27,6 @@ export const SubsectionSidebar = () => {
   const navigate = useNavigate();
 
   const {
-    clearSelection,
     currentTabKey,
     setCurrentTabKey,
     selectedContainerState,
@@ -60,6 +59,10 @@ export const SubsectionSidebar = () => {
   } = useCourseOutlineContext();
   const sectionIndex = sections.findIndex((s) => s.id === selectedContainerState?.sectionId);
 
+  const handleBack = useBackNavigation({
+    openContainer: openContainerInfoSidebar,
+  });
+
   const handlePublish = () => {
     if (selectedContainerState?.sectionId && subsectionData?.hasChanges) {
       openPublishModal({
@@ -127,16 +130,6 @@ export const SubsectionSidebar = () => {
     }
   };
 
-  const handleBack = () => {
-    navigateBackFromSelection({
-      selectedContainerState,
-      sections,
-      selectedSection: section,
-      openContainer: openContainerInfoSidebar,
-      clearSelection,
-    });
-  };
-
   return (
     <>
       <SidebarTitle

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

@@ -35,7 +35,7 @@ import { InfoSection } from './InfoSection';
 import { useClipboard } from '@src/generic/clipboard';
 import { ToastContext } from '@src/generic/toast-context';
 import { XBlock } from '@src/data/types';
-import { navigateBackFromSelection } from '../back-navigation';
+import { useBackNavigation } from '../back-navigation';
 interface Props {
   unitId: string;
 }
@@ -72,7 +72,6 @@ export const UnitSidebar = () => {
   const navigate = useNavigate();
   const {
     selectedContainerState,
-    clearSelection,
     currentTabKey,
     setCurrentTabKey,
     setSelectedContainerState,
@@ -113,6 +112,10 @@ export const UnitSidebar = () => {
   const { copyToClipboard } = useClipboard();
   const { showToast } = useContext(ToastContext);
 
+  const handleBack = useBackNavigation({
+    openContainer: openContainerInfoSidebar,
+  });
+
   const handlePublish = () => {
     if (unitData?.hasChanges) {
       openPublishModal({
@@ -211,16 +214,6 @@ export const UnitSidebar = () => {
     showToast(intl.formatMessage(messages.locationCopiedText));
   };
 
-  const handleBack = () => {
-    navigateBackFromSelection({
-      selectedContainerState,
-      sections,
-      selectedSection: section,
-      openContainer: openContainerInfoSidebar,
-      clearSelection,
-    });
-  };
-
   return (
     <>
       <SidebarTitle