feat!: update to new course outline structure and design

README.rst

@@ -68,12 +68,9 @@ Development Setup
 
        import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from "@openedx/frontend-plugin-framework";
        import {
-         SidebarToggleWrapper,
-         CourseHeaderButton,
          UnitActionsButton,
-         AspectsSidebarProvider,
-         CourseOutlineSidebar,
-         UnitPageSidebar,
+         CourseOutlineSidebarWrapper,
+         UnitOutlineSidebarWrapper,
          SubSectionAnalyticsButton,
        } from "@openedx/frontend-plugin-aspects";
 
@@ -83,66 +80,20 @@ Development Setup
            "org.openedx.frontend.authoring.course_outline_sidebar.v1": {
              keepDefault: true,
              plugins: [
-               {
-                 op: PLUGIN_OPERATIONS.Insert,
-                 widget: {
-                   id: "outline-sidebar",
-                   priority: 1,
-                   type: DIRECT_PLUGIN,
-                   RenderWidget: CourseOutlineSidebar,
-                 },
-               },
                {
                  op: PLUGIN_OPERATIONS.Wrap,
                  widgetId: "default_contents",
-                 wrapper: SidebarToggleWrapper,
+                 wrapper: CourseOutlineSidebarWrapper,
                },
              ],
            },
            "org.openedx.frontend.authoring.course_unit_sidebar.v2": {
              keepDefault: true,
              plugins: [
-               {
-                 op: PLUGIN_OPERATIONS.Insert,
-                 widget: {
-                   id: "course-unit-sidebar",
-                   priority: 1,
-                   type: DIRECT_PLUGIN,
-                   RenderWidget: UnitPageSidebar,
-                 },
-               },
                {
                  op: PLUGIN_OPERATIONS.Wrap,
                  widgetId: "default_contents",
-                 wrapper: SidebarToggleWrapper,
-               },
-             ],
-           },
-           "org.openedx.frontend.authoring.course_outline_header_actions.v1": {
-             keepDefault: true,
-             plugins: [
-               {
-                 op: PLUGIN_OPERATIONS.Insert,
-                 widget: {
-                   id: "outline-analytics",
-                   type: DIRECT_PLUGIN,
-                   priority: 51,
-                   RenderWidget: CourseHeaderButton,
-                 },
-               },
-             ],
-           },
-           "org.openedx.frontend.authoring.course_unit_header_actions.v1": {
-             keepDefault: true,
-             plugins: [
-               {
-                 op: PLUGIN_OPERATIONS.Insert,
-                 widget: {
-                   id: "unit-analytics",
-                   type: DIRECT_PLUGIN,
-                   priority: 51,
-                   RenderWidget: CourseHeaderButton,
-                 },
+                 wrapper: UnitOutlineSidebarWrapper,
                },
              ],
            },

module.config.js.example

@@ -27,5 +27,6 @@ module.exports = {
     // { moduleName: '@openedx/paragon/icons', dir: '../paragon', dist: 'icons' },
     // { moduleName: '@openedx/paragon', dir: '../paragon', dist: 'dist' },
     // { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
+    // { moduleName: 'CourseAuthoring', dir: '../src', dist: 'dist' },
   ],
 };

src/components/AspectsSidebar/CourseContentList.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Icon } from '@openedx/paragon';
 import { ArrowDropDown, ArrowDropUp, ChevronRight } from '@openedx/paragon/icons';
@@ -7,25 +7,24 @@ import { ICON_MAP } from '../../constants';
 import { Block } from '../../types';
 
 interface CourseContentListProps {
-  title: string,
   blocks: Block[],
   activateDashboard: (block: Block) => void,
 }
 
 export function CourseContentList({
-  title, blocks, activateDashboard,
+  blocks, activateDashboard,
 }: CourseContentListProps) {
   const intl = useIntl();
   // using undefined is useful for slicing the list
   const [showCount, setShowCount] = React.useState<number | undefined>(5);
 
+  // istanbul ignore next: this should never happen, as the component is only rendered when there are blocks
   if (!blocks.length) {
     return null;
   }
 
   return (
-    <div className="d-flex flex-column rounded-bottom py-4 px-3 bg-white border-top border-light">
-      {!!title && <h4 className="h4 mb-4">{title}</h4>}
+    <div className="d-flex flex-column rounded-bottom py-4 px-3 bg-white">
       {blocks?.slice(0, showCount).map(block => (
         <Button
           key={block.id}

src/components/AspectsSidebar/Dashboard.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { useParams } from 'react-router-dom';
 import { embedDashboard, EmbeddedDashboard, Size } from '@superset-ui/embedded-sdk';
 import {
@@ -12,7 +12,7 @@ import '../../styles.css';
 import messages from '../../messages';
 
 function Embed({ usageKey }: { usageKey: string }) {
-  const { loading, error: configError, config: dashboardConfig } = useDashboardConfig(usageKey);
+  const { isPending, error: configError, data: dashboardConfig } = useDashboardConfig(usageKey);
   const containerDiv = React.useRef(null);
   const { courseId } = useParams();
   const [containerHeight, setContainerHeight] = React.useState<number>(0);
@@ -81,14 +81,14 @@ function Embed({ usageKey }: { usageKey: string }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dashboardConfig, courseId]);
 
-  if (loading) {
+  if (isPending) {
     return <Skeleton />;
   }
 
   if (configError) {
     return (
       <Alert variant="danger">
-        {configError}
+        {configError.toString()}
       </Alert>
     );
   }

src/components/AspectsSidebar/index.test.tsx

@@ -1,10 +1,9 @@
-import * as React from 'react';
+import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { BlockTypes } from '../../constants';
-import { AspectsSidebar, ContentList } from '.';
+import { AspectsSidebar, type ContentList } from '.';
 import { useAspectsSidebarContext } from '../../hooks';
 import messages from '../../messages';
-import '@testing-library/jest-dom';
 import { Block } from '../../types';
 
 // Mock dependencies
@@ -15,6 +14,22 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   }),
 }));
 
+/* eslint-disable react/prop-types */
+jest.mock(
+  'CourseAuthoring/generic/sidebar',
+  () => ({
+    SidebarContent: ({ children }) => <div>{children}</div>,
+    SidebarSection: ({ title, children }) => <div><div>{title}</div>{children}</div>,
+    SidebarTitle: ({ title, onBackBtnClick }) => (
+      <div>
+        {onBackBtnClick && <button type="button" onClick={onBackBtnClick}>Back</button>}
+        {title}
+      </div>
+    ),
+  }),
+  { virtual: true },
+);
+
 const mockDashboard = jest.fn();
 jest.mock('./Dashboard', () => ({
   Dashboard: () => mockDashboard,
@@ -71,25 +86,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 +118,7 @@ function TestContextHelper({
 
 describe('AspectsSidebar', () => {
   const renderComponent = (
-    initialState: InitialState = { sidebarOpen: true },
+    initialState: InitialState = {},
     props?: Partial<React.ComponentProps<typeof AspectsSidebar>>,
   ) => render(
 
@@ -126,19 +135,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 +164,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 +173,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 +189,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 +214,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),