fix: update to new course outline structure and design

Author: rpenido

src/components/AspectsSidebar/index.test.tsx

@@ -71,25 +71,19 @@ const defaultProps = {
 };
 
 type InitialState = {
-  sidebarOpen: boolean,
   activeBlock?: Block | null,
   filterUnit?: Block | null,
   filteredBlocks?: string[]
 };
 
 // Helper component to set context values for tests
 function TestContextHelper({
-  sidebarOpen = true, activeBlock = null, filterUnit = null, filteredBlocks = [],
+  activeBlock = null, filterUnit = null, filteredBlocks = [],
 }: InitialState) {
   const {
-    setSidebarOpen, setActiveBlock, setFilterUnit, setFilteredBlocks,
+    setActiveBlock, setFilterUnit, setFilteredBlocks,
   } = useAspectsSidebarContext();
 
-  // This effect is run only one to set the initial state for the tests.
-  React.useEffect(() => {
-    setSidebarOpen(sidebarOpen);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
   // The sidebar will clear active/filter stuff to render cleanly on initalization
   // So, we can't set these values in the useEffect above. The only way to cleanly
   // do it is by userEvent.click - simulating real-world scenario
@@ -109,7 +103,7 @@ function TestContextHelper({
 
 describe('AspectsSidebar', () => {
   const renderComponent = (
-    initialState: InitialState = { sidebarOpen: true },
+    initialState: InitialState = {},
     props?: Partial<React.ComponentProps<typeof AspectsSidebar>>,
   ) => render(
 
@@ -126,19 +120,6 @@ describe('AspectsSidebar', () => {
     jest.clearAllMocks();
   });
 
-  it('closes the sidebar when the close button is clicked', async () => {
-    renderComponent();
-    // Ensure the sidebar is initially open and visible
-    expect(screen.getByTestId('sidebar')).toBeVisible();
-    expect(screen.getByTestId('sidebar-title')).toHaveTextContent('Test Course');
-
-    const closeButton = screen.getByRole('button', { name: 'Close' });
-    fireEvent.click(closeButton);
-
-    // Assert that the sidebar is no longer visible
-    expect(screen.queryByTestId('sidebar')).not.toBeInTheDocument();
-  });
-
   it('shows the back button and changes the title when a block is clicked', () => {
     renderComponent();
 
@@ -168,7 +149,7 @@ describe('AspectsSidebar', () => {
 
   it('shows an Alert message when the content lists are empty on a Unit Page', () => {
     // NOTE: Currently there is not "Unit Page Dashboard", hence the alert
-    renderComponent({ sidebarOpen: true }, { blockType: BlockTypes.vertical, contentLists: [] });
+    renderComponent(undefined, { blockType: BlockTypes.vertical, contentLists: [] });
 
     expect(mockDashboard).not.toHaveBeenCalled();
     expect(screen.getByRole('alert')).toHaveTextContent(messages.noAnalyticsForUnit.defaultMessage);
@@ -177,7 +158,6 @@ describe('AspectsSidebar', () => {
   it('shows filtered set of components in the Course Outline view when specific unit is selected', () => {
     // render the component as if the "UnitActionsButton" has been clicked
     renderComponent({
-      sidebarOpen: true,
       activeBlock: mockUnit,
       filterUnit: mockUnit,
       filteredBlocks: ['block-v1:TEST+COURSE+SECTION1+prob2'],
@@ -194,7 +174,6 @@ describe('AspectsSidebar', () => {
 
   it('navigate to component and back in filtered unit view', () => {
     renderComponent({
-      sidebarOpen: true,
       activeBlock: mockUnit,
       filterUnit: mockUnit,
       filteredBlocks: ['block-v1:TEST+COURSE+SECTION1+prob2'],
@@ -220,7 +199,7 @@ describe('AspectsSidebar', () => {
 
   it('posts a callback with the activatedBlock in Unit Page View', () => {
     const callback = jest.fn();
-    renderComponent({ sidebarOpen: true }, {
+    renderComponent(undefined, {
       title: 'Test Unit',
       blockType: BlockTypes.vertical,
       contentLists: mockContentLists.slice(0, 1),

src/components/AspectsSidebar/index.tsx

@@ -1,10 +1,10 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import * as React from 'react';
 import {
-  Alert, Icon, IconButton, IconButtonWithTooltip, Stack, Sticky,
+  Alert, Icon, IconButton, Stack, Sticky,
 } from '@openedx/paragon';
 import {
-  ArrowBack, AutoGraph, Close, Warning,
+  ArrowBack, Warning,
 } from '@openedx/paragon/icons';
 import { BlockTypes, ICON_MAP } from '../../constants';
 import { useAspectsSidebarContext } from '../../hooks';
@@ -36,7 +36,7 @@ export function AspectsSidebar({
 }: AspectsSidebarProps) {
   const intl = useIntl();
   const {
-    sidebarOpen, setSidebarOpen, setFilteredBlocks, activeBlock, setActiveBlock,
+    setFilteredBlocks, activeBlock, setActiveBlock,
     filterUnit, setFilterUnit, filteredBlocks,
   } = useAspectsSidebarContext();
 
@@ -52,10 +52,6 @@ export function AspectsSidebar({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (!sidebarOpen) {
-    return null;
-  }
-
   const hideDashboard: boolean = (
     (!!activeBlock && (activeBlock.type === 'vertical'))
     || (!activeBlock && (blockType === 'vertical'))
@@ -92,32 +88,7 @@ export function AspectsSidebar({
       <Sticky className="shadow rounded" offset={2}>
         <div className="bg-white rounded w-100">
           <Stack className="sidebar-header">
-            <Stack className="course-unit-sidebar-header px-4 pt-4" direction="horizontal">
-              <h5 className="course-unit-sidebar-header-title h5 flex-grow-1 text-gray">
-                {intl.formatMessage(messages.analyticsLabel)}
-                <Icon
-                  src={AutoGraph}
-                  size="xs"
-                  className="d-inline-block ml-1"
-                  aria-hidden
-                  style={{ verticalAlign: 'middle' }}
-                />
-              </h5>
-              <IconButtonWithTooltip
-                className="ml-auto"
-                tooltipContent={intl.formatMessage(messages.closeButtonLabel)}
-                tooltipPlacement="top"
-                alt={intl.formatMessage(messages.closeButtonLabel)}
-                src={Close}
-                iconAs={Icon}
-                variant="black"
-                onClick={() => {
-                  setSidebarOpen(false);
-                }}
-                size="sm"
-              />
-            </Stack>
-            <h3 className="h3 px-4 pb-4 mb-0 d-flex align-items-center" data-testid="sidebar-title">
+            <h3 className="h3 p-4 mb-0 d-flex align-items-center" data-testid="sidebar-title">
               {(activeBlock) && (
                 <IconButton
                   className="mr-2"

src/components/CourseHeaderButton.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { CourseOutlineSidebar } from './CourseOutlineSidebar';
+
+// @ts-ignore
+import {
+  useOutlineSidebarPagesContext,
+} from 'CourseAuthoring/course-outline/outline-sidebar/OutlineSidebarPagesContext';
+
+import { CourseOutlineAspectsPage, CourseOutlineSidebarWrapper } from './CourseOutlineSidebar';
 import { useCourseBlocks, useAspectsSidebarContext } from '../hooks';
 import { AspectsSidebar } from './AspectsSidebar';
 import { BlockTypes } from '../constants';
@@ -24,6 +30,20 @@ jest.mock('../hooks', () => ({
   useAspectsSidebarContext: jest.fn(),
 }));
 
+jest.mock(
+  'CourseAuthoring/course-outline/outline-sidebar/OutlineSidebarPagesContext',
+  () => {
+    const mockOutlineSidebarPagesContext = React.createContext({});
+    const useOutlineSidebarPagesContextMocked = () => React.useContext(mockOutlineSidebarPagesContext) as Record<string, any>;
+
+    return {
+      OutlineSidebarPagesContext: mockOutlineSidebarPagesContext,
+      useOutlineSidebarPagesContext: useOutlineSidebarPagesContextMocked,
+    };
+  },
+  { virtual: true },
+);
+
 // Test Data
 const mockCourseId = 'course-v1:TestX+TST101+2025';
 const mockCourseName = 'Test Course 101';
@@ -103,7 +123,7 @@ const mockVideos: Block[] = [
 ];
 
 // Test Suite
-describe('CourseOutlineSidebar', () => {
+describe('CourseOutlineAspectsPage', () => {
   // Mock implementations setup
   const mockFormatMessage = jest.fn((message) => message.defaultMessage || message.id);
   const mockUseIntl = useIntl as jest.Mock;
@@ -122,13 +142,13 @@ describe('CourseOutlineSidebar', () => {
     MockAspectsSidebar.mockClear(); // Clear calls specifically for the component mock
   });
 
-  const renderComponent = (props: Partial<React.ComponentProps<typeof CourseOutlineSidebar>> = {}) => {
+  const renderComponent = (props: Partial<React.ComponentProps<typeof CourseOutlineAspectsPage>> = {}) => {
     const defaultProps = {
       courseId: mockCourseId,
       courseName: mockCourseName,
       sections: mockSections,
     };
-    return render(<CourseOutlineSidebar {...defaultProps} {...props} />);
+    return render(<CourseOutlineAspectsPage {...defaultProps} {...props} />);
   };
 
   // --- Test Cases ---
@@ -310,3 +330,30 @@ describe('CourseOutlineSidebar', () => {
     expect(mockFormatMessage).not.toHaveBeenCalledWith(messages.gradedSubsectionAnalytics);
   });
 });
+
+function MockComponent() {
+  const sidebarPages = useOutlineSidebarPagesContext();
+
+  // Return a div with the title of the analytics page, reading from the context
+  return (
+    <div>
+      {sidebarPages.analytics.title.defaultMessage}
+    </div>
+  );
+}
+
+describe('CourseOutlineSidebarWrapper', () => {
+  const renderComponent = () => render(<CourseOutlineSidebarWrapper
+    component={<MockComponent />}
+    pluginProps={{
+      courseId: mockCourseId,
+      courseName: mockCourseName,
+      sections: mockSections,
+    }}
+  />);
+
+  it('adds analytics page to the sidebar', () => {
+    renderComponent();
+    expect(screen.getByText('Analytics')).toBeInTheDocument();
+  });
+});

src/components/CourseOutlineSidebar.test.tsx

@@ -1,12 +1,20 @@
-import * as React from 'react';
+import React, { useMemo } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { AutoGraph } from '@openedx/paragon/icons';
+
+import {
+  OutlineSidebarPagesContext,
+  useOutlineSidebarPagesContext,
+// @ts-ignore
+} from 'CourseAuthoring/course-outline/outline-sidebar/OutlineSidebarPagesContext';
+
 import { useCourseBlocks, useAspectsSidebarContext } from '../hooks';
 import { BlockTypes } from '../constants';
 import { AspectsSidebar } from './AspectsSidebar';
 import messages from '../messages';
 import { Section, Block, castToBlock } from '../types';
 
-interface Props {
+interface CourseOutlineAspectsPageProps {
   courseId: string;
   courseName: string;
   sections: Section[];
@@ -22,7 +30,7 @@ function* getGradedSubsections(sections: Section[]) {
   }
 }
 
-export function CourseOutlineSidebar({ courseId, courseName, sections }: Props) {
+export function CourseOutlineAspectsPage({ courseId, courseName, sections }: CourseOutlineAspectsPageProps) {
   const intl = useIntl();
   const { filteredBlocks } = useAspectsSidebarContext();
   const { data } = useCourseBlocks(courseId);
@@ -62,3 +70,26 @@ export function CourseOutlineSidebar({ courseId, courseName, sections }: Props)
     />
   );
 }
+
+export function CourseOutlineSidebarWrapper(
+  { component, pluginProps }: { component: React.ReactNode, pluginProps: CourseOutlineAspectsPageProps },
+) {
+  const sidebarPages = useOutlineSidebarPagesContext();
+
+  const AnalyticsPage = React.useCallback(() => <CourseOutlineAspectsPage {...pluginProps} />, [pluginProps]);
+
+  const overridedPages = useMemo(() => ({
+    ...sidebarPages,
+    analytics: {
+      component: AnalyticsPage,
+      icon: AutoGraph,
+      title: messages.analyticsLabel,
+    },
+  }), [sidebarPages, AnalyticsPage]);
+
+  return (
+    <OutlineSidebarPagesContext.Provider value={overridedPages}>
+      {component}
+    </OutlineSidebarPagesContext.Provider>
+  );
+}

src/components/CourseOutlineSidebar.tsx

@@ -47,15 +47,13 @@ const mockSubsections: SubSection[] = [
 const mockUseAspectsSidebarContext = useAspectsSidebarContext as jest.Mock;
 
 describe('SubSectionAnalyticsButton', () => {
-  const mockSetSidebarOpen = jest.fn();
   const mockSetActiveBlock = jest.fn();
   const mockSetFilterUnit = jest.fn();
 
   const defaultContextValue = {
     activeBlock: null,
     sidebarOpen: false,
     setActiveBlock: mockSetActiveBlock,
-    setSidebarOpen: mockSetSidebarOpen,
     setFilterUnit: mockSetFilterUnit,
   };
 
@@ -79,7 +77,6 @@ describe('SubSectionAnalyticsButton', () => {
     const button = screen.getByRole('button', { name: /analytics/i });
     await user.click(button);
 
-    expect(mockSetSidebarOpen).toHaveBeenCalledWith(true);
     expect(mockSetActiveBlock).toHaveBeenCalledWith(expect.objectContaining({
       id: mockSubsection.id,
     }));
@@ -92,14 +89,12 @@ describe('SubSectionAnalyticsButton', () => {
     mockUseAspectsSidebarContext.mockReturnValue({
       ...defaultContextValue,
       activeBlock: { id: mockSubsection.id } as any,
-      sidebarOpen: true,
     });
 
     render(<SubSectionAnalyticsButton subsection={mockSubsection} />);
     const button = screen.getByRole('button', { name: /analytics/i });
     await user.click(button);
 
-    expect(mockSetSidebarOpen).toHaveBeenCalledWith(true);
     expect(mockSetActiveBlock).toHaveBeenCalledWith(null);
     expect(mockSetFilterUnit).not.toHaveBeenCalled();
   });