diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx index a5468fb3f4..919f063b9f 100644 --- a/src/courseware/course/Course.jsx +++ b/src/courseware/course/Course.jsx @@ -9,16 +9,15 @@ import { breakpoints, useWindowSize } from '@openedx/paragon'; import { AlertList } from '@src/generic/user-messages'; import { useModel } from '@src/generic/model-store'; import { getCoursewareOutlineSidebarSettings } from '../data/selectors'; -import { Trigger as CourseOutlineTrigger } from './sidebar/sidebars/course-outline'; import Chat from './chat/Chat'; import SidebarProvider from './sidebar/SidebarContextProvider'; -import SidebarTriggers from './sidebar/SidebarTriggers'; import NewSidebarProvider from './new-sidebar/SidebarContextProvider'; -import NewSidebarTriggers from './new-sidebar/SidebarTriggers'; +import { NotificationsDiscussionsSidebarTriggerSlot } from '../../plugin-slots/NotificationsDiscussionsSidebarTriggerSlot'; import { CelebrationModal, shouldCelebrateOnSectionLoad, WeeklyGoalCelebrationModal } from './celebration'; -import CourseBreadcrumbs from './CourseBreadcrumbs'; import ContentTools from './content-tools'; import Sequence from './sequence'; +import { CourseOutlineMobileSidebarTriggerSlot } from '../../plugin-slots/CourseOutlineMobileSidebarTriggerSlot'; +import { CourseBreadcrumbsSlot } from '../../plugin-slots/CourseBreadcrumbsSlot'; const Course = ({ courseId, @@ -87,7 +86,7 @@ const Course = ({
{navigationDisabled || ( <> - )}
- - {isNewDiscussionSidebarViewEnabled ? : } + +
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx index 69444eeb53..9579b4df5c 100644 --- a/src/courseware/course/sequence/Sequence.jsx +++ b/src/courseware/course/sequence/Sequence.jsx @@ -18,16 +18,13 @@ import SequenceContainerSlot from '../../../plugin-slots/SequenceContainerSlot'; import { getCoursewareOutlineSidebarSettings } from '../../data/selectors'; import CourseLicense from '../course-license'; -import Sidebar from '../sidebar/Sidebar'; -import NewSidebar from '../new-sidebar/Sidebar'; -import { - Trigger as CourseOutlineTrigger, - Sidebar as CourseOutlineTray, -} from '../sidebar/sidebars/course-outline'; +import { NotificationsDiscussionsSidebarSlot } from '../../../plugin-slots/NotificationsDiscussionsSidebarSlot'; import messages from './messages'; import HiddenAfterDue from './hidden-after-due'; import { SequenceNavigation, UnitNavigation } from './sequence-navigation'; import SequenceContent from './SequenceContent'; +import { CourseOutlineSidebarSlot } from '../../../plugin-slots/CourseOutlineSidebarSlot'; +import { CourseOutlineSidebarTriggerSlot } from '../../../plugin-slots/CourseOutlineSidebarTriggerSlot'; const Sequence = ({ unitId, @@ -46,7 +43,6 @@ const Sequence = ({ const { isStaff, originalUserIsStaff, - isNewDiscussionSidebarViewEnabled, } = useModel('courseHomeMeta', courseId); const sequence = useModel('sequences', sequenceId); const unit = useModel('units', unitId); @@ -166,8 +162,8 @@ const Sequence = ({ const defaultContent = ( <>
- - + +
{!isEnabledOutlineSidebar && (
@@ -209,7 +205,7 @@ const Sequence = ({ {unitHasLoaded && renderUnitNavigation(false)}
- {isNewDiscussionSidebarViewEnabled ? : } +
diff --git a/src/plugin-slots/CourseBreadcrumbsSlot/README.md b/src/plugin-slots/CourseBreadcrumbsSlot/README.md new file mode 100644 index 0000000000..38de9a0550 --- /dev/null +++ b/src/plugin-slots/CourseBreadcrumbsSlot/README.md @@ -0,0 +1,43 @@ +# Course Breadcrumbs Slot + +### Slot ID: `course_breadcrumbs_slot` + +## Description + +This slot is used to replace/modify/hide the course breadcrumbs. + +## Example + +### Default content +![Breadcrumbs slot with default content](./screenshot_default.png) + +### Replaced with custom component +![🍞 in breadcrumbs slot](./screenshot_custom.png) + +The following `env.config.jsx` will replace the course breadcrumbs entirely. + +```js +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + course_breadcrumbs_slot: { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_breadcrumbs_component', + type: DIRECT_PLUGIN, + RenderWidget: () => ( +

🍞

+ ), + }, + }, + ] + } + }, +} + +export default config; +``` diff --git a/src/plugin-slots/CourseBreadcrumbsSlot/index.tsx b/src/plugin-slots/CourseBreadcrumbsSlot/index.tsx new file mode 100644 index 0000000000..928974e400 --- /dev/null +++ b/src/plugin-slots/CourseBreadcrumbsSlot/index.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import { PluginSlot } from '@openedx/frontend-plugin-framework'; + +import CourseBreadcrumbs from '../../courseware/course/CourseBreadcrumbs'; + +interface Props { + courseId: string; + sectionId?: string; + sequenceId?: string; + unitId?: string; + isStaff?: boolean; +} + +export const CourseBreadcrumbsSlot : React.FC = ({ + courseId, sectionId, sequenceId, unitId, isStaff, +}) => ( + + + +); diff --git a/src/plugin-slots/CourseBreadcrumbsSlot/screenshot_custom.png b/src/plugin-slots/CourseBreadcrumbsSlot/screenshot_custom.png new file mode 100644 index 0000000000..506101d506 Binary files /dev/null and b/src/plugin-slots/CourseBreadcrumbsSlot/screenshot_custom.png differ diff --git a/src/plugin-slots/CourseBreadcrumbsSlot/screenshot_default.png b/src/plugin-slots/CourseBreadcrumbsSlot/screenshot_default.png new file mode 100644 index 0000000000..c10ca827d5 Binary files /dev/null and b/src/plugin-slots/CourseBreadcrumbsSlot/screenshot_default.png differ diff --git a/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/README.md b/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/README.md new file mode 100644 index 0000000000..317dee73b6 --- /dev/null +++ b/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/README.md @@ -0,0 +1,43 @@ +# Course Outline Mobile Sidebar Trigger Slot + +### Slot ID: `course_outline_mobile_sidebar_trigger_slot` + +## Description + +This slot is used to replace/modify/hide the course outline sidebar mobile trigger. + +## Example + +### Default content +![Trigger slot with default content](./screenshot_default.png) + +### Replaced with custom component +![📌 in trigger slot](./screenshot_custom.png) + +The following `env.config.jsx` will replace the course outline sidebar mobile trigger entirely. + +```js +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + course_outline_mobile_sidebar_trigger_slot: { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_sidebar_trigger_component', + type: DIRECT_PLUGIN, + RenderWidget: () => ( +

📌

+ ), + }, + }, + ] + } + }, +} + +export default config; +``` diff --git a/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/index.tsx b/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/index.tsx new file mode 100644 index 0000000000..f192003b01 --- /dev/null +++ b/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { PluginSlot } from '@openedx/frontend-plugin-framework'; + +import CourseOutlineTrigger from '../../courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger'; + +export const CourseOutlineMobileSidebarTriggerSlot : React.FC = () => ( + + + +); diff --git a/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/screenshot_custom.png b/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/screenshot_custom.png new file mode 100644 index 0000000000..4a98f56378 Binary files /dev/null and b/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/screenshot_custom.png differ diff --git a/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/screenshot_default.png b/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/screenshot_default.png new file mode 100644 index 0000000000..c1e0f961de Binary files /dev/null and b/src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/screenshot_default.png differ diff --git a/src/plugin-slots/CourseOutlineSidebarSlot/README.md b/src/plugin-slots/CourseOutlineSidebarSlot/README.md new file mode 100644 index 0000000000..8ef985cfee --- /dev/null +++ b/src/plugin-slots/CourseOutlineSidebarSlot/README.md @@ -0,0 +1,43 @@ +# Course Outline Sidebar Slot + +### Slot ID: `course_outline_sidebar_slot` + +## Description + +This slot is used to replace/modify/hide the course outline sidebar. + +## Example + +### Default content +![Sidebar slot with default content](./screenshot_default.png) + +### Replaced with custom component +![📊 in sidebar slot](./screenshot_custom.png) + +The following `env.config.jsx` will replace the course outline sidebar entirely. + +```js +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + course_outline_sidebar_slot: { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_sidebar_component', + type: DIRECT_PLUGIN, + RenderWidget: () => ( +

📊

+ ), + }, + }, + ] + } + }, +} + +export default config; +``` diff --git a/src/plugin-slots/CourseOutlineSidebarSlot/index.tsx b/src/plugin-slots/CourseOutlineSidebarSlot/index.tsx new file mode 100644 index 0000000000..26f0eb24a7 --- /dev/null +++ b/src/plugin-slots/CourseOutlineSidebarSlot/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { PluginSlot } from '@openedx/frontend-plugin-framework'; + +import CourseOutlineTray from '../../courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray'; + +export const CourseOutlineSidebarSlot : React.FC = () => ( + + + +); diff --git a/src/plugin-slots/CourseOutlineSidebarSlot/screenshot_custom.png b/src/plugin-slots/CourseOutlineSidebarSlot/screenshot_custom.png new file mode 100644 index 0000000000..62a324d156 Binary files /dev/null and b/src/plugin-slots/CourseOutlineSidebarSlot/screenshot_custom.png differ diff --git a/src/plugin-slots/CourseOutlineSidebarSlot/screenshot_default.png b/src/plugin-slots/CourseOutlineSidebarSlot/screenshot_default.png new file mode 100644 index 0000000000..2d3e3549b1 Binary files /dev/null and b/src/plugin-slots/CourseOutlineSidebarSlot/screenshot_default.png differ diff --git a/src/plugin-slots/CourseOutlineSidebarTriggerSlot/README.md b/src/plugin-slots/CourseOutlineSidebarTriggerSlot/README.md new file mode 100644 index 0000000000..0055863372 --- /dev/null +++ b/src/plugin-slots/CourseOutlineSidebarTriggerSlot/README.md @@ -0,0 +1,43 @@ +# Course Outline Sidebar Trigger Slot + +### Slot ID: `course_outline_sidebar_trigger_slot` + +## Description + +This slot is used to replace/modify/hide the course outline sidebar trigger. + +## Example + +### Default content +![Trigger slot with default content](./screenshot_default.png) + +### Replaced with custom component +![📌 in trigger slot](./screenshot_custom.png) + +The following `env.config.jsx` will replace the course outline sidebar trigger entirely. + +```js +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + course_outline_sidebar_trigger_slot: { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_sidebar_trigger_component', + type: DIRECT_PLUGIN, + RenderWidget: () => ( +

📌

+ ), + }, + }, + ] + } + }, +} + +export default config; +``` diff --git a/src/plugin-slots/CourseOutlineSidebarTriggerSlot/index.tsx b/src/plugin-slots/CourseOutlineSidebarTriggerSlot/index.tsx new file mode 100644 index 0000000000..239c3ab76e --- /dev/null +++ b/src/plugin-slots/CourseOutlineSidebarTriggerSlot/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { PluginSlot } from '@openedx/frontend-plugin-framework'; + +import CourseOutlineTrigger from '../../courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger'; + +export const CourseOutlineSidebarTriggerSlot : React.FC = () => ( + + + +); diff --git a/src/plugin-slots/CourseOutlineSidebarTriggerSlot/screenshot_custom.png b/src/plugin-slots/CourseOutlineSidebarTriggerSlot/screenshot_custom.png new file mode 100644 index 0000000000..724ad44c09 Binary files /dev/null and b/src/plugin-slots/CourseOutlineSidebarTriggerSlot/screenshot_custom.png differ diff --git a/src/plugin-slots/CourseOutlineSidebarTriggerSlot/screenshot_default.png b/src/plugin-slots/CourseOutlineSidebarTriggerSlot/screenshot_default.png new file mode 100644 index 0000000000..99b269a7b6 Binary files /dev/null and b/src/plugin-slots/CourseOutlineSidebarTriggerSlot/screenshot_default.png differ diff --git a/src/plugin-slots/NotificationsDiscussionsSidebarSlot/README.md b/src/plugin-slots/NotificationsDiscussionsSidebarSlot/README.md new file mode 100644 index 0000000000..418d041426 --- /dev/null +++ b/src/plugin-slots/NotificationsDiscussionsSidebarSlot/README.md @@ -0,0 +1,43 @@ +# Notifications Discussions Sidebar Slot + +### Slot ID: `notifications_discussions_sidebar_slot` + +## Description + +This slot is used to replace/modify/hide the notifications discussions sidebar. + +## Example + +### Default content +![Sidebar slot with default content](./screenshot_default.png) + +### Replaced with custom component +![📊 in sidebar slot](./screenshot_custom.png) + +The following `env.config.jsx` will replace the notifications discussions sidebar. + +```js +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + notifications_discussions_sidebar_slot: { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_sidebar_component', + type: DIRECT_PLUGIN, + RenderWidget: () => ( +

📊

+ ), + }, + }, + ] + } + }, +} + +export default config; +``` diff --git a/src/plugin-slots/NotificationsDiscussionsSidebarSlot/index.tsx b/src/plugin-slots/NotificationsDiscussionsSidebarSlot/index.tsx new file mode 100644 index 0000000000..3f7454d8c5 --- /dev/null +++ b/src/plugin-slots/NotificationsDiscussionsSidebarSlot/index.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { PluginSlot } from '@openedx/frontend-plugin-framework'; +import { useModel } from '@src/generic/model-store'; + +import Sidebar from '../../courseware/course/sidebar/Sidebar'; +import NewSidebar from '../../courseware/course/new-sidebar/Sidebar'; + +interface Props { + courseId: string; +} + +export const NotificationsDiscussionsSidebarSlot : React.FC = ({ courseId }) => { + const { + isNewDiscussionSidebarViewEnabled, + } = useModel('courseHomeMeta', courseId); + + return ( + + {isNewDiscussionSidebarViewEnabled ? : } + + ); +}; diff --git a/src/plugin-slots/NotificationsDiscussionsSidebarSlot/screenshot_custom.png b/src/plugin-slots/NotificationsDiscussionsSidebarSlot/screenshot_custom.png new file mode 100644 index 0000000000..6304563dd6 Binary files /dev/null and b/src/plugin-slots/NotificationsDiscussionsSidebarSlot/screenshot_custom.png differ diff --git a/src/plugin-slots/NotificationsDiscussionsSidebarSlot/screenshot_default.png b/src/plugin-slots/NotificationsDiscussionsSidebarSlot/screenshot_default.png new file mode 100644 index 0000000000..67b795fe02 Binary files /dev/null and b/src/plugin-slots/NotificationsDiscussionsSidebarSlot/screenshot_default.png differ diff --git a/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/README.md b/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/README.md new file mode 100644 index 0000000000..3dc610572e --- /dev/null +++ b/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/README.md @@ -0,0 +1,43 @@ +# Notifications Discussions Sidebar Trigger Slot + +### Slot ID: `notifications_discussions_sidebar_trigger_slot` + +## Description + +This slot is used to replace/modify/hide the notifications discussions sidebar trigger. + +## Example + +### Default content +![Trigger slot with default content](./screenshot_default.png) + +### Replaced with custom component +![📬 in trigger slot](./screenshot_custom.png) + +The following `env.config.jsx` will replace the notifications discussions sidebar trigger. + +```js +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + notifications_discussions_sidebar_trigger_slot: { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_sidebar_trigger_component', + type: DIRECT_PLUGIN, + RenderWidget: () => ( +

📬

+ ), + }, + }, + ] + } + }, +} + +export default config; +``` diff --git a/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/index.tsx b/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/index.tsx new file mode 100644 index 0000000000..8027ea2105 --- /dev/null +++ b/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/index.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { PluginSlot } from '@openedx/frontend-plugin-framework'; +import { useModel } from '@src/generic/model-store'; + +import SidebarTriggers from '../../courseware/course/sidebar/SidebarTriggers'; +import NewSidebarTriggers from '../../courseware/course/new-sidebar/SidebarTriggers'; + +interface Props { + courseId: string; +} + +export const NotificationsDiscussionsSidebarTriggerSlot : React.FC = ({ courseId }) => { + const { + isNewDiscussionSidebarViewEnabled, + } = useModel('courseHomeMeta', courseId); + + return ( + + {isNewDiscussionSidebarViewEnabled ? : } + + ); +}; diff --git a/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/screenshot_custom.png b/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/screenshot_custom.png new file mode 100644 index 0000000000..d355ffdd8e Binary files /dev/null and b/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/screenshot_custom.png differ diff --git a/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/screenshot_default.png b/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/screenshot_default.png new file mode 100644 index 0000000000..359105bfcb Binary files /dev/null and b/src/plugin-slots/NotificationsDiscussionsSidebarTriggerSlot/screenshot_default.png differ diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md index 5c20d87f39..2b404e6a9b 100644 --- a/src/plugin-slots/README.md +++ b/src/plugin-slots/README.md @@ -4,3 +4,8 @@ * [`footer_slot`](./FooterSlot/) * [`sequence_container_slot`](./SequenceContainerSlot/) * [`unit_title_slot`](./UnitTitleSlot/) +* [`course_outline_sidebar_slot`](./CourseOutlineSidebarSlot/) +* [`course_outline_sidebar_trigger_slot`](./CourseOutlineSidebarTriggerSlot) +* [`course_outline_mobile_sidebar_trigger_slot`](./CourseOutlineMobileSidebarTriggerSlot/) +* [`notifications_discussions_sidebar_slot`](./NotificationsDiscussionsSidebarSlot/) +* [`notifications_discussions_sidebar_trigger_slot`](./NotificationsDiscussionsSidebarTriggerSlot/)