fix(course-outline): update sidebar back navigation

Author: navinkarkera

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

@@ -366,6 +366,7 @@ export const AddSidebar = () => {
     clearSelection,
     stopCurrentFlow,
     selectedContainerState,
+    openContainerSidebar,
   } = useOutlineSidebarContext();
   const { data: flowData } = useCourseItemData(currentFlow?.parentLocator);
   const titleAndIcon = useMemo(() => {
@@ -387,8 +388,30 @@ export const AddSidebar = () => {
   ]);
 
   const handleBack = () => {
-    clearSelection();
     stopCurrentFlow();
+
+    if (!selectedContainerState) {
+      return;
+    }
+
+    const { currentId, subsectionId, sectionId } = selectedContainerState;
+
+    if (currentId === subsectionId && sectionId) {
+      openContainerSidebar(sectionId, undefined, sectionId);
+      return;
+    }
+
+    if (currentId === sectionId) {
+      clearSelection();
+      return;
+    }
+
+    if (subsectionId) {
+      openContainerSidebar(subsectionId, subsectionId, sectionId);
+      return;
+    }
+
+    clearSelection();
   };
 
   return (

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

@@ -16,8 +16,15 @@ jest.mock('@src/content-tags-drawer', () => ({
 }));
 
 describe('OutlineAlignSidebar', () => {
+  const setCurrentSelection = jest.fn();
+  const clearSelection = jest.fn();
+  const openContainerSidebar = jest.fn();
+
   beforeEach(() => {
     initializeMocks();
+    setCurrentSelection.mockReset();
+    clearSelection.mockReset();
+    openContainerSidebar.mockReset();
     jest
       .spyOn(CourseAuthoringContext, 'useCourseAuthoringContext')
       .mockReturnValue({
@@ -26,14 +33,16 @@ describe('OutlineAlignSidebar', () => {
     jest
       .spyOn(CourseOutlineContext, 'useCourseOutlineContext')
       .mockReturnValue({
-        setCurrentSelection: jest.fn(),
+        setCurrentSelection,
       } as any);
     jest
       .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
       .mockReturnValue({
         selectedContainerState: {
           currentId: 'block-v1:test+course+run+type@sequential+block@seq1',
         },
+        clearSelection,
+        openContainerSidebar,
       } as any);
     jest
       .spyOn(CourseDetailsApi, 'useCourseDetails')
@@ -67,6 +76,8 @@ describe('OutlineAlignSidebar', () => {
       .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
       .mockReturnValue({
         selectedContainerState: undefined,
+        clearSelection,
+        openContainerSidebar,
       } as any);
     jest
       .spyOn(CourseDetailsApi, 'useCourseDetails')
@@ -82,4 +93,30 @@ describe('OutlineAlignSidebar', () => {
 
     expect(await screen.findByText('Test Course')).toBeInTheDocument();
   });
+
+  it('back button selects parent block in align sidebar', async () => {
+    jest
+      .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
+      .mockReturnValue({
+        selectedContainerState: {
+          currentId: 'unit-1',
+          subsectionId: 'subsection-1',
+          sectionId: 'section-1',
+        },
+        clearSelection,
+        openContainerSidebar,
+      } as any);
+
+    render(<OutlineAlignSidebar />);
+
+    const backButton = await screen.findByRole('button', { name: /back/i });
+    backButton.click();
+
+    expect(openContainerSidebar).toHaveBeenCalledWith('subsection-1', 'subsection-1', 'section-1');
+    expect(setCurrentSelection).toHaveBeenCalledWith({
+      currentId: 'subsection-1',
+      subsectionId: 'subsection-1',
+      sectionId: 'section-1',
+    });
+  });
 });

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

@@ -10,14 +10,39 @@ import { useOutlineSidebarContext } from './OutlineSidebarContext';
 export const OutlineAlignSidebar = () => {
   const { courseId } = useCourseAuthoringContext();
   const { setCurrentSelection } = useCourseOutlineContext();
-  const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
+  const { selectedContainerState, clearSelection, openContainerSidebar } = useOutlineSidebarContext();
 
   const sidebarContentId = selectedContainerState?.currentId || courseId;
 
   const { data: contentData } = useContentData(sidebarContentId);
 
-  // istanbul ignore next
   const handleBack = () => {
+    const { currentId, subsectionId, sectionId } = selectedContainerState || {};
+
+    if (!currentId) {
+      clearSelection();
+      setCurrentSelection(undefined);
+      return;
+    }
+
+    if (currentId === subsectionId && sectionId) {
+      openContainerSidebar(sectionId, undefined, sectionId);
+      setCurrentSelection({ currentId: sectionId, sectionId });
+      return;
+    }
+
+    if (currentId === sectionId) {
+      clearSelection();
+      setCurrentSelection(undefined);
+      return;
+    }
+
+    if (subsectionId) {
+      openContainerSidebar(subsectionId, subsectionId, sectionId);
+      setCurrentSelection({ currentId: subsectionId, subsectionId, sectionId });
+      return;
+    }
+
     clearSelection();
     setCurrentSelection(undefined);
   };

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

@@ -31,6 +31,7 @@ export const SubsectionSidebar = () => {
     setCurrentTabKey,
     selectedContainerState,
     setSelectedContainerState,
+    openContainerInfoSidebar,
   } = useOutlineSidebarContext();
   const { subsectionId = '', index } = selectedContainerState ?? {};
 
@@ -125,12 +126,20 @@ export const SubsectionSidebar = () => {
     }
   };
 
+  const handleBack = () => {
+    if (selectedContainerState?.sectionId) {
+      openContainerInfoSidebar(selectedContainerState.sectionId, undefined, selectedContainerState.sectionId);
+      return;
+    }
+    clearSelection();
+  };
+
   return (
     <>
       <SidebarTitle
         title={subsectionData?.displayName || ''}
         icon={getItemIcon(subsectionData?.category || '')}
-        onBackBtnClick={clearSelection}
+        onBackBtnClick={handleBack}
         menuProps={{
           itemId: subsectionId,
           index: index ?? -1,

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

@@ -75,6 +75,7 @@ export const UnitSidebar = () => {
     currentTabKey,
     setCurrentTabKey,
     setSelectedContainerState,
+    openContainerInfoSidebar,
   } = useOutlineSidebarContext();
   const {
     currentId: unitId = /* istanbul ignore next */ '',
@@ -209,12 +210,25 @@ export const UnitSidebar = () => {
     showToast(intl.formatMessage(messages.locationCopiedText));
   };
 
+  const handleBack = () => {
+    if (selectedContainerState?.subsectionId) {
+      openContainerInfoSidebar(
+        selectedContainerState.subsectionId,
+        selectedContainerState.subsectionId,
+        selectedContainerState.sectionId,
+        subsectionIndex >= 0 ? subsectionIndex : undefined,
+      );
+      return;
+    }
+    clearSelection();
+  };
+
   return (
     <>
       <SidebarTitle
         title={unitData?.displayName || ''}
         icon={getItemIcon(unitData?.category || '')}
-        onBackBtnClick={clearSelection}
+        onBackBtnClick={handleBack}
         menuProps={{
           itemId: unitId,
           index: index ?? -1,