fix: fixes from review

Author: rpenido

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

@@ -1,21 +1,30 @@
-import { initializeMocks, render, waitFor } from '../../testUtils';
-import { helpUrls } from '../../help-urls/__mocks__';
-import { getHelpUrlsApiUrl } from '../../help-urls/data/api';
+import { initializeMocks, render, waitFor } from '@src/testUtils';
+import { helpUrls } from '@src/help-urls/__mocks__';
+import { getHelpUrlsApiUrl } from '@src/help-urls/data/api';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+
 import OutlineHelpSidebar from './OutlineHelpSidebar';
 import messages from './messages';
 
+const courseId = '123';
+
 jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
   useIntl: () => ({
     formatMessage: (message) => message.defaultMessage,
   }),
 }));
 
+const extraWrapper = ({ children }) => (
+  <CourseAuthoringProvider courseId={courseId}>
+    {children}
+  </CourseAuthoringProvider>
+);
+
 let axiosMock;
 const mockPathname = '/foo-bar';
-const courseId = '123';
 
-const renderComponent = () => render(<OutlineHelpSidebar courseId={courseId} />, { path: mockPathname });
+const renderComponent = () => render(<OutlineHelpSidebar />, { path: mockPathname, extraWrapper });
 
 describe('<OutlineSidebar />', () => {
   beforeEach(() => {

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

@@ -3,20 +3,18 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { HelpSidebar } from '@src/generic/help-sidebar';
 import { useHelpUrls } from '@src/help-urls/hooks';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 import { getFormattedSidebarMessages } from './utils';
 
-interface OutlineHelpSidebarProps {
-  courseId: string;
-}
-
-const OutlineHelpSideBar = ({ courseId }: OutlineHelpSidebarProps) => {
+const OutlineHelpSideBar = () => {
   const intl = useIntl();
   const {
     visibility: learnMoreVisibilityUrl,
     grading: learnMoreGradingUrl,
     outline: learnMoreOutlineUrl,
   } = useHelpUrls(['visibility', 'grading', 'outline']);
+  const { courseId } = useCourseAuthoringContext();
 
   const sidebarMessages = getFormattedSidebarMessages(
     {

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

@@ -5,14 +5,16 @@ import { SchoolOutline, Tag } from '@openedx/paragon/icons';
 import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
 import { ComponentCountSnippet } from '@src/generic/block-type-utils';
 import { useGetBlockTypes } from '@src/search-manager';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
 import { useCourseDetails } from '../data/apiHooks';
 
 import messages from './messages';
 
-export const OutlineInfoSidebar = ({ courseId }: { courseId: string }) => {
+export const OutlineInfoSidebar = () => {
   const intl = useIntl();
+  const { courseId } = useCourseAuthoringContext();
   const { data: courseDetails } = useCourseDetails(courseId);
 
   const { data: componentData } = useGetBlockTypes(

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

@@ -4,20 +4,29 @@ import { userEvent } from '@testing-library/user-event';
 import {
   initializeMocks, render, screen, waitFor, within,
 } from '@src/testUtils';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 
 import { OutlineSidebarProvider } from './OutlineSidebarContext';
 import OutlineSidebar from './OutlineSidebar';
 
-const courseId = 'course-v1:TestOrg+TestCourse+2023_1';
-
 // Mock the useCourseDetails hook
 jest.mock('@src/course-outline/data/apiHooks', () => ({
   useCourseDetails: jest.fn().mockReturnValue({ isPending: false, data: { title: 'Test Course' } }),
 }));
 
+const courseId = '123';
+
+const extraWrapper = ({ children }) => (
+  <CourseAuthoringProvider courseId={courseId}>
+    <OutlineSidebarProvider>
+      {children}
+    </OutlineSidebarProvider>
+  </CourseAuthoringProvider>
+);
+
 const renderComponent = () => render(
-  <OutlineSidebar courseId={courseId} />,
-  { extraWrapper: OutlineSidebarProvider },
+  <OutlineSidebar />,
+  { extraWrapper },
 );
 
 describe('<OutlineSidebar>', () => {

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

@@ -7,11 +7,7 @@ import { Sidebar } from '@src/generic/sidebar';
 import OutlineHelpSidebar from './OutlineHelpSidebar';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 
-interface OutlineSideBarProps {
-  courseId: string;
-}
-
-const OutlineSideBar = ({ courseId }: OutlineSideBarProps) => {
+const OutlineSideBar = () => {
   const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth });
   const showNewSidebar = getConfig().ENABLE_COURSE_OUTLINE_NEW_DESIGN?.toString().toLowerCase() === 'true';
 
@@ -29,7 +25,7 @@ const OutlineSideBar = ({ courseId }: OutlineSideBarProps) => {
     const colSpan = isMedium ? 'col-12' : 'col-3';
     return (
       <div className={colSpan}>
-        <OutlineHelpSidebar courseId={courseId} />
+        <OutlineHelpSidebar />
       </div>
     );
   }
@@ -41,7 +37,6 @@ const OutlineSideBar = ({ courseId }: OutlineSideBarProps) => {
       setCurrentPageKey={setCurrentPageKey}
       isOpen={isOpen}
       toggle={toggle}
-      contentProps={{ courseId }}
     />
   );
 };

src/course-outline/outline-sidebar/messages.ts

@@ -68,10 +68,12 @@ const messages = defineMessages({
   sidebarButtonHelp: {
     id: 'course-authoring.course-outline.sidebar.sidebar-button-help',
     defaultMessage: 'Help',
+    description: 'Button label for the help sidebar',
   },
   sidebarButtonInfo: {
     id: 'course-authoring.course-outline.sidebar.sidebar-button-info',
     defaultMessage: 'Info',
+    description: 'Button label for the info sidebar',
   },
   sidebarSectionSummary: {
     id: 'course-authoring.course-outline.sidebar.sidebar-section-summary',

src/generic/sidebar/Sidebar.test.tsx

@@ -8,8 +8,8 @@ import { useToggle } from '@openedx/paragon';
 
 import { Sidebar } from '.';
 
-const Component1 = ({ text }: { text: string }) => <div>Component 1 ({text})</div>;
-const Component2 = ({ text }: { text: string }) => <div>Component 2 ({text})</div>;
+const Component1 = () => <div>Component 1</div>;
+const Component2 = () => <div>Component 2</div>;
 const Icon1 = () => <div>Icon 1</div>;
 const Icon2 = () => <div>Icon 2</div>;
 const pages = {
@@ -36,7 +36,6 @@ const TestSidebar = () => {
       setCurrentPageKey={setPageKey}
       isOpen={isOpen}
       toggle={toggle}
-      contentProps={{ text: 'content props' }}
     />
   );
 };
@@ -50,7 +49,7 @@ describe('<Sidebar>', () => {
     render(<TestSidebar />);
 
     // Check the Page 1 content
-    expect(screen.getByText('Component 1 (content props)')).toBeInTheDocument();
+    expect(screen.getByText('Component 1')).toBeInTheDocument();
 
     // Check the IconButtonToggle
     const sidebarToggle = screen.getByTestId('sidebar-toggle');
@@ -69,22 +68,22 @@ describe('<Sidebar>', () => {
     render(<TestSidebar />);
 
     // Check the Page 1 content
-    expect(screen.getByText('Component 1 (content props)')).toBeInTheDocument();
+    expect(screen.getByText('Component 1')).toBeInTheDocument();
 
     const page2Button = screen.getByRole('button', { name: 'Page 2' });
     await userEvent.click(page2Button);
 
     expect(page2Button).toHaveAttribute('aria-selected', 'true');
 
     // Check the Page 2 content
-    expect(screen.getByText('Component 2 (content props)')).toBeInTheDocument();
+    expect(screen.getByText('Component 2')).toBeInTheDocument();
 
     const page1Button = screen.getByRole('button', { name: 'Page 1' });
     expect(page1Button).toHaveAttribute('aria-selected', 'false');
     await userEvent.click(page1Button);
 
     // Check the Page 1 content
-    expect(screen.getByText('Component 1 (content props)')).toBeInTheDocument();
+    expect(screen.getByText('Component 1')).toBeInTheDocument();
   });
 
   it('should change pages using the dropdown button', async () => {
@@ -94,7 +93,7 @@ describe('<Sidebar>', () => {
     expect(sidebarDropdown).toBeInTheDocument();
 
     // Check the Page 1 content
-    expect(screen.getByText('Component 1 (content props)')).toBeInTheDocument();
+    expect(screen.getByText('Component 1')).toBeInTheDocument();
 
     // Click on the dropdown button
     await userEvent.click(within(sidebarDropdown).getByRole('button', { name: 'Page 1 Icon 1' }));
@@ -104,7 +103,7 @@ describe('<Sidebar>', () => {
     await userEvent.click(page2Button);
 
     // Check the Page 2 content
-    expect(screen.getByText('Component 2 (content props)')).toBeInTheDocument();
+    expect(screen.getByText('Component 2')).toBeInTheDocument();
 
     // Click on the dropdown button again
     await userEvent.click(within(sidebarDropdown).getByRole('button', { name: 'Page 2 Icon 2' }));
@@ -114,7 +113,7 @@ describe('<Sidebar>', () => {
     await userEvent.click(page1Button);
 
     // Check the Page 1 content
-    expect(screen.getByText('Component 1 (content props)')).toBeInTheDocument();
+    expect(screen.getByText('Component 1')).toBeInTheDocument();
   });
 
   it('should toggle the sidebar', async () => {
@@ -124,20 +123,20 @@ describe('<Sidebar>', () => {
     expect(sidebarToggle).toBeInTheDocument();
 
     // Check the Page 1 content
-    expect(screen.getByText('Component 1 (content props)')).toBeInTheDocument();
+    expect(screen.getByText('Component 1')).toBeInTheDocument();
 
     // Hide the sidebar
     const toggleButton = within(sidebarToggle).getByRole('button', { name: 'Toggle' });
     expect(toggleButton).toBeInTheDocument();
     await userEvent.click(toggleButton);
 
     // Check the Page 1 content is hidden
-    expect(screen.queryByText('Component 1 (content props)')).not.toBeInTheDocument();
+    expect(screen.queryByText('Component 1')).not.toBeInTheDocument();
 
     // Show the sidebar
     await userEvent.click(toggleButton);
 
     // Check the Page 1 content
-    expect(screen.getByText('Component 1 (content props)')).toBeInTheDocument();
+    expect(screen.getByText('Component 1')).toBeInTheDocument();
   });
 });

src/generic/sidebar/Sidebar.tsx

@@ -39,9 +39,6 @@ interface SidebarProps<T extends SidebarPages> {
   isOpen: boolean;
   /** Function that toggles the sidebar */
   toggle: () => void;
-  /** Props that are passed to the component that is rendered in the sidebar.
-   * This component is defined in the pages object */
-  contentProps: React.ComponentProps<T[keyof T]['component']>;
 }
 
 /**
@@ -74,7 +71,6 @@ interface SidebarProps<T extends SidebarPages> {
  *     currentPageKey="help"
  *     isOpen={isOpen}
  *     toggle={toggle}
- *     contentProps={{ courseId }}
  *   />
  *);
  * ```
@@ -86,7 +82,6 @@ export function Sidebar<T extends SidebarPages>({
   setCurrentPageKey,
   isOpen,
   toggle,
-  contentProps,
 }: SidebarProps<T>) {
   const intl = useIntl();
 
@@ -120,7 +115,7 @@ export function Sidebar<T extends SidebarPages>({
               ))}
             </Dropdown.Menu>
           </Dropdown>
-          <SidebarComponent {...contentProps} />
+          <SidebarComponent />
         </div>
       )}
       <div className="sidebar-toggle" data-testid="sidebar-toggle">

src/generic/sidebar/SidebarContent.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Stack } from '@openedx/paragon';
 
 interface SidebarContentProps {
-  children: React.ReactNode[];
+  children: React.ReactNode | React.ReactNode[],
 }
 
 /**
@@ -29,12 +29,12 @@ interface SidebarContentProps {
  */
 export const SidebarContent = ({ children } : SidebarContentProps) => (
   <Stack gap={1}>
-    {children.map((child, index) => (
+    {Array.isArray(children) ? children.map((child, index) => (
       // eslint-disable-next-line react/no-array-index-key
       <React.Fragment key={index}>
         {child}
         {index !== children.length - 1 && <hr className="w-100" />}
       </React.Fragment>
-    ))}
+    )) : children}
   </Stack>
 );

src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx

@@ -16,7 +16,7 @@ export const CourseAuthoringOutlineSidebarSlot = ({
       sections,
     }}
   >
-    <OutlineSideBar courseId={courseId} />
+    <OutlineSideBar />
   </PluginSlot>
 );