fix(course-outline): preserve sidebar indices on back nav

Author: navinkarkera

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

@@ -21,7 +21,7 @@ import {
 } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import fetchMock from 'fetch-mock-jest';
 import type { ContainerType } from '@src/generic/key-utils';
-import { XBlock } from '@src/data/types';
+import { SelectionState, XBlock } from '@src/data/types';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { CourseOutlineProvider } from '@src/course-outline/CourseOutlineContext';
 import { snakeCaseKeys } from '@src/editors/utils';
@@ -70,17 +70,21 @@ jest.mock('@src/studio-home/hooks', () => ({
 let currentFlow: OutlineFlow | null = null;
 let isCurrentFlowOn = false;
 let currentItemData: Partial<XBlock> | null;
+let selectedContainerState: SelectionState | undefined;
 const clearSelection = jest.fn();
 const stopCurrentFlow = jest.fn();
+const openContainerSidebar = jest.fn();
 jest.mock('../outline-sidebar/OutlineSidebarContext', () => ({
   ...jest.requireActual('../outline-sidebar/OutlineSidebarContext'),
   useOutlineSidebarContext: () => ({
     ...jest.requireActual('../outline-sidebar/OutlineSidebarContext').useOutlineSidebarContext(),
     currentFlow,
     isCurrentFlowOn,
     currentItemData,
+    selectedContainerState,
     clearSelection,
     stopCurrentFlow,
+    openContainerSidebar,
   }),
 }));
 
@@ -132,6 +136,10 @@ describe('AddSidebar', () => {
       return newMockResult;
     });
     outlineChildren = courseOutlineIndexMock.courseStructure.childInfo.children;
+    selectedContainerState = undefined;
+    clearSelection.mockClear();
+    stopCurrentFlow.mockClear();
+    openContainerSidebar.mockClear();
   });
 
   it('renders the AddSidebar component without any errors', async () => {
@@ -399,7 +407,29 @@ describe('AddSidebar', () => {
 
     const back = await screen.findByRole('button', { name: 'Back' });
     await user.click(back);
-    expect(clearSelection).toHaveBeenCalled();
     expect(stopCurrentFlow).toHaveBeenCalled();
   });
+
+  it('back from unit sets subsection index in selection', async () => {
+    const user = userEvent.setup();
+    const section = outlineChildren[0];
+    const subsection = section.childInfo.children[0];
+    const unit = subsection.childInfo.children[0];
+    selectedContainerState = {
+      currentId: unit.id,
+      subsectionId: subsection.id,
+      sectionId: section.id,
+    };
+    renderComponent();
+
+    const back = await screen.findByRole('button', { name: 'Back' });
+    await user.click(back);
+
+    expect(openContainerSidebar).toHaveBeenCalledWith(
+      subsection.id,
+      subsection.id,
+      section.id,
+      0,
+    );
+  });
 });

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

@@ -359,6 +359,7 @@ const AddTabs = () => {
 export const AddSidebar = () => {
   const intl = useIntl();
   const { courseDetails } = useCourseAuthoringContext();
+  const { sections } = useCourseOutlineContext();
   const {
     isCurrentFlowOn,
     currentFlow,
@@ -395,9 +396,13 @@ export const AddSidebar = () => {
     }
 
     const { currentId, subsectionId, sectionId } = selectedContainerState;
+    const sectionIndex = sections.findIndex((section) => section.id === sectionId);
+    const subsectionIndex = sections
+      .find((section) => section.id === sectionId)
+      ?.childInfo.children.findIndex((subsection) => subsection.id === subsectionId) ?? -1;
 
     if (currentId === subsectionId && sectionId) {
-      openContainerSidebar(sectionId, undefined, sectionId);
+      openContainerSidebar(sectionId, undefined, sectionId, sectionIndex >= 0 ? sectionIndex : undefined);
       return;
     }
 
@@ -407,7 +412,12 @@ export const AddSidebar = () => {
     }
 
     if (subsectionId) {
-      openContainerSidebar(subsectionId, subsectionId, sectionId);
+      openContainerSidebar(
+        subsectionId,
+        subsectionId,
+        sectionId,
+        subsectionIndex >= 0 ? subsectionIndex : undefined,
+      );
       return;
     }
 

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

@@ -34,6 +34,16 @@ describe('OutlineAlignSidebar', () => {
       .spyOn(CourseOutlineContext, 'useCourseOutlineContext')
       .mockReturnValue({
         setCurrentSelection,
+        sections: [
+          {
+            id: 'section-1',
+            childInfo: {
+              children: [
+                { id: 'subsection-1', childInfo: { children: [{ id: 'unit-1' }] } },
+              ],
+            },
+          },
+        ],
       } as any);
     jest
       .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
@@ -112,11 +122,12 @@ describe('OutlineAlignSidebar', () => {
     const backButton = await screen.findByRole('button', { name: /back/i });
     backButton.click();
 
-    expect(openContainerSidebar).toHaveBeenCalledWith('subsection-1', 'subsection-1', 'section-1');
+    expect(openContainerSidebar).toHaveBeenCalledWith('subsection-1', 'subsection-1', 'section-1', 0);
     expect(setCurrentSelection).toHaveBeenCalledWith({
       currentId: 'subsection-1',
       subsectionId: 'subsection-1',
       sectionId: 'section-1',
+      index: 0,
     });
   });
 });

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

@@ -9,7 +9,7 @@ import { useOutlineSidebarContext } from './OutlineSidebarContext';
  */
 export const OutlineAlignSidebar = () => {
   const { courseId } = useCourseAuthoringContext();
-  const { setCurrentSelection } = useCourseOutlineContext();
+  const { setCurrentSelection, sections } = useCourseOutlineContext();
   const { selectedContainerState, clearSelection, openContainerSidebar } = useOutlineSidebarContext();
 
   const sidebarContentId = selectedContainerState?.currentId || courseId;
@@ -18,6 +18,10 @@ export const OutlineAlignSidebar = () => {
 
   const handleBack = () => {
     const { currentId, subsectionId, sectionId } = selectedContainerState || {};
+    const sectionIndex = sections.findIndex((section) => section.id === sectionId);
+    const subsectionIndex = sections
+      .find((section) => section.id === sectionId)
+      ?.childInfo.children.findIndex((subsection) => subsection.id === subsectionId) ?? -1;
 
     if (!currentId) {
       clearSelection();
@@ -26,8 +30,12 @@ export const OutlineAlignSidebar = () => {
     }
 
     if (currentId === subsectionId && sectionId) {
-      openContainerSidebar(sectionId, undefined, sectionId);
-      setCurrentSelection({ currentId: sectionId, sectionId });
+      openContainerSidebar(sectionId, undefined, sectionId, sectionIndex >= 0 ? sectionIndex : undefined);
+      setCurrentSelection({
+        currentId: sectionId,
+        sectionId,
+        index: sectionIndex >= 0 ? sectionIndex : undefined,
+      });
       return;
     }
 
@@ -38,8 +46,18 @@ export const OutlineAlignSidebar = () => {
     }
 
     if (subsectionId) {
-      openContainerSidebar(subsectionId, subsectionId, sectionId);
-      setCurrentSelection({ currentId: subsectionId, subsectionId, sectionId });
+      openContainerSidebar(
+        subsectionId,
+        subsectionId,
+        sectionId,
+        subsectionIndex >= 0 ? subsectionIndex : undefined,
+      );
+      setCurrentSelection({
+        currentId: subsectionId,
+        subsectionId,
+        sectionId,
+        index: subsectionIndex >= 0 ? subsectionIndex : undefined,
+      });
       return;
     }
 

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

@@ -15,6 +15,7 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
     selectedContainerState,
     clearSelection: jest.fn(),
     setSelectedContainerState: mockSetSelectedContainerState,
+    openContainerInfoSidebar: mockOpenContainerInfoSidebar,
   }),
 }));
 
@@ -39,6 +40,7 @@ const updateUnitOrderByIndex = jest.fn();
 const updateSubsectionOrderByIndex = jest.fn();
 const updateSectionOrderByIndex = jest.fn();
 const mockSetSelectedContainerState = jest.fn();
+const mockOpenContainerInfoSidebar = jest.fn();
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let mockSections: any[] = [];
 
@@ -91,6 +93,7 @@ describe('InfoSidebar component', () => {
     updateSubsectionOrderByIndex.mockClear();
     updateSectionOrderByIndex.mockClear();
     mockSetSelectedContainerState.mockClear();
+    mockOpenContainerInfoSidebar.mockClear();
     mockSections = [];
   });
 
@@ -453,6 +456,26 @@ describe('InfoSidebar component', () => {
       await screen.findByRole('button', { name: 'Item Menu' });
     };
 
+    it('goes back to parent section with section index', async () => {
+      const user = userEvent.setup();
+      mockSections = [{
+        id: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@ch1',
+        actions: { childAddable: true },
+        upstreamInfo: null,
+        childInfo: { children: [] },
+      }];
+      await renderSubsectionMenu();
+
+      await user.click(screen.getByRole('button', { name: /back/i }));
+
+      expect(mockOpenContainerInfoSidebar).toHaveBeenCalledWith(
+        'block-v1:UNIX+UX1+2025_T3+type@chapter+block@ch1',
+        undefined,
+        'block-v1:UNIX+UX1+2025_T3+type@chapter+block@ch1',
+        0,
+      );
+    });
+
     it('calls openDeleteModal when Delete is clicked in subsection menu', async () => {
       const user = userEvent.setup();
       await renderSubsectionMenu();

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

@@ -128,7 +128,12 @@ export const SubsectionSidebar = () => {
 
   const handleBack = () => {
     if (selectedContainerState?.sectionId) {
-      openContainerInfoSidebar(selectedContainerState.sectionId, undefined, selectedContainerState.sectionId);
+      openContainerInfoSidebar(
+        selectedContainerState.sectionId,
+        undefined,
+        selectedContainerState.sectionId,
+        sectionIndex >= 0 ? sectionIndex : undefined,
+      );
       return;
     }
     clearSelection();