diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx index df52bd736..59b4511b3 100644 --- a/src/course-outline/CourseOutline.jsx +++ b/src/course-outline/CourseOutline.jsx @@ -453,7 +453,11 @@ const CourseOutline = ({ courseId }) => { - + { courseId={courseId} blockId={blockId} unitTitle={unitTitle} + xBlocks={courseVerticalChildren.children} /> )} {isSplitTestType && ( diff --git a/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/README.md b/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/README.md index 0e2c63b6c..97f0d3225 100644 --- a/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/README.md +++ b/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 diff --git a/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx b/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx index 56f734be7..5485e69fb 100644 --- a/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx +++ b/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) => ( ); +type Section = { + id: string, + displayName: string, + graded: boolean, + category: string, +}; + interface CourseAuthoringOutlineSidebarSlotProps { courseId: string; + courseName: string; + sections: Section[]; } diff --git a/src/plugin-slots/CourseAuthoringUnitSidebarSlot/README.md b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/README.md index c3c6c0eb5..5fb3dcec5 100644 --- a/src/plugin-slots/CourseAuthoringUnitSidebarSlot/README.md +++ b/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}) => ( + <> +

{unitTitle}: Problem Blocks

+ + +); + +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; +``` diff --git a/src/plugin-slots/CourseAuthoringUnitSidebarSlot/images/unit_sidebar_with_problem_blocks_list.png b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/images/unit_sidebar_with_problem_blocks_list.png new file mode 100644 index 000000000..c892bbb3f Binary files /dev/null and b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/images/unit_sidebar_with_problem_blocks_list.png differ diff --git a/src/plugin-slots/CourseAuthoringUnitSidebarSlot/index.tsx b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/index.tsx index d92785676..846309505 100644 --- a/src/plugin-slots/CourseAuthoringUnitSidebarSlot/index.tsx +++ b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/index.tsx @@ -10,11 +10,14 @@ export const CourseAuthoringUnitSidebarSlot = ( blockId, courseId, unitTitle, + xBlocks, }: CourseAuthoringUnitSidebarSlotProps, ) => ( @@ -30,8 +33,15 @@ export const CourseAuthoringUnitSidebarSlot = ( ); +type XBlock = { + id: string, + name: string, + blockType: string, +}; + interface CourseAuthoringUnitSidebarSlotProps { blockId: string; courseId: string; unitTitle: string; + xBlocks: XBlock[]; }