feat: wrap existing sidebars in frontend-plugin-framework `PluginSl…

…ot`s

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';
 
 const Course = ({
   courseId,
@@ -109,8 +108,8 @@ const Course = ({
           </>
         )}
         <div className="w-100 d-flex align-items-center">
-          <CourseOutlineTrigger isMobileView />
-          {isNewDiscussionSidebarViewEnabled ? <NewSidebarTriggers /> : <SidebarTriggers /> }
+          <CourseOutlineMobileSidebarTriggerSlot />
+          <NotificationsDiscussionsSidebarTriggerSlot courseId={courseId} />
         </div>
       </div>
 

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 = (
     <>
       <div className="sequence-container d-inline-flex flex-row w-100">
-        <CourseOutlineTrigger />
-        <CourseOutlineTray />
+        <CourseOutlineSidebarTriggerSlot />
+        <CourseOutlineSidebarSlot />
         <div className="sequence w-100">
           {!isEnabledOutlineSidebar && (
             <div className="sequence-navigation-container">
@@ -209,7 +205,7 @@ const Sequence = ({
             {unitHasLoaded && renderUnitNavigation(false)}
           </div>
         </div>
-        {isNewDiscussionSidebarViewEnabled ? <NewSidebar /> : <Sidebar />}
+        <NotificationsDiscussionsSidebarSlot courseId={courseId} />
       </div>
       <SequenceContainerSlot courseId={courseId} unitId={unitId} />
     </>

src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/README.md

@@ -0,0 +1,39 @@
+# Course Outline 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
+
+![📌 in trigger slot](./screenshot.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: () => (
+              <h1 className="d-xl-none">📌</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/index.jsx

@@ -0,0 +1,16 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+import CourseOutlineTrigger from '../../courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger';
+
+const CourseOutlineMobileSidebarTriggerSlot = () => (
+  <PluginSlot
+    id="course_outline_mobile_sidebar_trigger_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <CourseOutlineTrigger isMobileView />
+  </PluginSlot>
+);
+
+export default CourseOutlineMobileSidebarTriggerSlot;

src/plugin-slots/CourseOutlineSidebarSlot/README.md

@@ -0,0 +1,39 @@
+# Course Outline Sidebar Slot
+
+### Slot ID: `course_outline_sidebar_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the course outline sidebar.
+
+## Example
+
+![📊 in sidebar slot](./screenshot.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: () => (
+              <h1>📊</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseOutlineSidebarSlot/index.jsx

@@ -0,0 +1,16 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+import CourseOutlineTray from '../../courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray';
+
+const CourseOutlineSidebarSlot = () => (
+  <PluginSlot
+    id="course_outline_sidebar_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <CourseOutlineTray />
+  </PluginSlot>
+);
+
+export default CourseOutlineSidebarSlot;

src/plugin-slots/CourseOutlineSidebarTriggerSlot/README.md

@@ -0,0 +1,40 @@
+# 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
+
+![📌 in trigger slot with sidebar closed](./screenshot_1.png)
+![📌 in trigger slot with sidebar open](./screenshot_2.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: () => (
+              <h1 className="d-none d-xl-block">📌</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseOutlineSidebarTriggerSlot/index.jsx

@@ -0,0 +1,16 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+import CourseOutlineTrigger from '../../courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger';
+
+const CourseOutlineSidebarTriggerSlot = () => (
+  <PluginSlot
+    id="course_outline_sidebar_trigger_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <CourseOutlineTrigger />
+  </PluginSlot>
+);
+
+export default CourseOutlineSidebarTriggerSlot;

src/plugin-slots/NotificationsDiscussionsSidebarSlot/README.md

@@ -0,0 +1,39 @@
+# Notifications Discussions Sidebar Slot
+
+### Slot ID: `notifications_discussions_sidebar_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the notifications discussions sidebar.
+
+## Example
+
+![📊 in sidebar slot](./screenshot.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: () => (
+              <h1>📊</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/NotificationsDiscussionsSidebarSlot/index.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+
+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';
+
+const NotificationsDiscussionsSidebarSlot = ({ courseId }) => {
+  const {
+    isNewDiscussionSidebarViewEnabled,
+  } = useModel('courseHomeMeta', courseId);
+
+  return (
+    <PluginSlot
+      id="notifications_discussions_sidebar_slot"
+      slotOptions={{
+        mergeProps: true,
+      }}
+    >
+      {isNewDiscussionSidebarViewEnabled ? <NewSidebar /> : <Sidebar />}
+    </PluginSlot>
+  );
+};
+
+NotificationsDiscussionsSidebarSlot.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default NotificationsDiscussionsSidebarSlot;

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: () => (
+              <h1 className='ml-auto'>📬</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

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<Props> = ({ courseId }) => {
+  const {
+    isNewDiscussionSidebarViewEnabled,
+  } = useModel('courseHomeMeta', courseId);
+
+  return (
+    <PluginSlot
+      id="notifications_discussions_sidebar_trigger_slot"
+      slotOptions={{
+        mergeProps: true,
+      }}
+    >
+      {isNewDiscussionSidebarViewEnabled ? <NewSidebarTriggers /> : <SidebarTriggers /> }
+    </PluginSlot>
+  );
+};