feat: Enhance Sidebar Slot properties (#1845)

The commit add some extra properties to the CourseAuthoringSidebarSlot
and CourseAuthoringUnitSidebarSlot components to enable
the widgets in the sidebar to have more context to work with.

src/course-outline/CourseOutline.jsx

@@ -453,7 +453,11 @@ const CourseOutline = ({ courseId }) => {
               </article>
             </Layout.Element>
             <Layout.Element>
-              <CourseAuthoringOutlineSidebarSlot courseId={courseId} />
+              <CourseAuthoringOutlineSidebarSlot
+                courseId={courseId}
+                courseName={courseName}
+                sections={sections}
+              />
             </Layout.Element>
           </Layout>
           <EnableHighlightsModal

src/course-unit/CourseUnit.jsx

@@ -226,6 +226,7 @@ const CourseUnit = ({ courseId }) => {
                   courseId={courseId}
                   blockId={blockId}
                   unitTitle={unitTitle}
+                  xBlocks={courseVerticalChildren.children}
                 />
                 )}
                 {isSplitTestType && (

src/plugin-slots/CourseAuthoringOutlineSidebarSlot/README.md

@@ -4,7 +4,9 @@
 
 ### Plugin Props:
 
-* `courseId` - String. 
+* `courseId` - String.
+* `courseName` - String.
+* `sections` - Array of Objects. Object structure defined in `index.tsx`.
 
 ## Description
 

src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx

@@ -2,17 +2,32 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework/dist';
 import React from 'react';
 import OutlineSideBar from '../../course-outline/outline-sidebar/OutlineSidebar';
 
-export const CourseAuthoringOutlineSidebarSlot = ({ courseId }: CourseAuthoringOutlineSidebarSlotProps) => (
+export const CourseAuthoringOutlineSidebarSlot = ({
+  courseId,
+  courseName,
+  sections,
+}: CourseAuthoringOutlineSidebarSlotProps) => (
   <PluginSlot
     id="course_authoring_outline_sidebar_slot"
     pluginProps={{
       courseId,
+      courseName,
+      sections,
     }}
   >
     <OutlineSideBar courseId={courseId} />
   </PluginSlot>
 );
 
+type Section = {
+  id: string,
+  displayName: string,
+  graded: boolean,
+  category: string,
+};
+
 interface CourseAuthoringOutlineSidebarSlotProps {
   courseId: string;
+  courseName: string;
+  sections: Section[];
 }

src/plugin-slots/CourseAuthoringUnitSidebarSlot/README.md

@@ -7,13 +7,14 @@
 * `courseId` - String.
 * `blockId` - String. The usage id of the current unit being viewed / edited.
 * `unitTitle` - String. The name of the current unit being viewed / edited.
+* `xBlocks` - Array of Objects. List of XBlocks in the Unit. Object structure defined in `index.tsx`.
 
 ## Description
 
 The slot wraps the sidebar that is displayed on the unit editor page. It can
 be used to add additional sidebar components or modify the existing sidebar.
 
-## Example
+## Example 1
 
 ![Screenshot of the unit sidebar surrounded by border](./images/unit_sidebar_with_border.png)
 
@@ -40,3 +41,43 @@ const config = {
 };
 export default config;
 ```
+
+## Example 2
+
+![Screenshot of the unit sidebar with an extra component listing all the problem blocks](./images/unit_sidebar_with_problem_blocks_list.png)
+
+```js
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN  } from '@openedx/frontend-plugin-framework';
+
+const ProblemBlocks = ({unitTitle, xBlocks}) => (
+  <>
+    <h4 className="h4">{unitTitle}: Problem Blocks</h4>
+    <ul>
+      {xBlocks
+        .filter(block => block.blockType === "problem")
+        .map(block => <li key={block.id}>{block.displayName}</li>)
+      }
+    </ul>
+  </>
+); 
+
+const config = {
+  pluginSlots: {
+    course_authoring_unit_sidebar_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget:{
+            id: 'problem-blocks-list',
+            priority: 1,
+            type: DIRECT_PLUGIN,
+            RenderWidget: ProblemBlocks,
+          }
+        },
+      ],
+    },
+  }
+};
+export default config;
+```

src/plugin-slots/CourseAuthoringUnitSidebarSlot/index.tsx

@@ -10,11 +10,14 @@ export const CourseAuthoringUnitSidebarSlot = (
     blockId,
     courseId,
     unitTitle,
+    xBlocks,
   }: CourseAuthoringUnitSidebarSlotProps,
 ) => (
   <PluginSlot
     id="course_authoring_unit_sidebar_slot"
-    pluginProps={{ blockId, courseId, unitTitle }}
+    pluginProps={{
+      blockId, courseId, unitTitle, xBlocks,
+    }}
   >
     <Sidebar data-testid="course-unit-sidebar">
       <PublishControls blockId={blockId} />
@@ -30,8 +33,15 @@ export const CourseAuthoringUnitSidebarSlot = (
   </PluginSlot>
 );
 
+type XBlock = {
+  id: string,
+  name: string,
+  blockType: string,
+};
+
 interface CourseAuthoringUnitSidebarSlotProps {
   blockId: string;
   courseId: string;
   unitTitle: string;
+  xBlocks: XBlock[];
 }