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 (
+
+ );
+};
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 (
+
+ );
+};
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/)