feat: move sequence navigation to plugin slot

Author: ihor-romaniuk

src/courseware/course/sequence/Sequence.jsx

@@ -13,17 +13,18 @@ import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import PageLoading from '@src/generic/PageLoading';
 import { useModel } from '@src/generic/model-store';
 import { useSequenceBannerTextAlert, useSequenceEntranceExamAlert } from '@src/alerts/sequence-alerts/hooks';
-import SequenceContainerSlot from '../../../plugin-slots/SequenceContainerSlot';
+import SequenceContainerSlot from '@src/plugin-slots/SequenceContainerSlot';
+import { CourseOutlineSidebarSlot } from '@src/plugin-slots/CourseOutlineSidebarSlot';
+import { CourseOutlineSidebarTriggerSlot } from '@src/plugin-slots/CourseOutlineSidebarTriggerSlot';
+import { NotificationsDiscussionsSidebarSlot } from '@src/plugin-slots/NotificationsDiscussionsSidebarSlot';
+import SequenceNavigationSlot from '@src/plugin-slots/SequenceNavigationSlot';
 
 import { getCoursewareOutlineSidebarSettings } from '../../data/selectors';
 import CourseLicense from '../course-license';
-import { NotificationsDiscussionsSidebarSlot } from '../../../plugin-slots/NotificationsDiscussionsSidebarSlot';
 import messages from './messages';
 import HiddenAfterDue from './hidden-after-due';
-import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
+import { UnitNavigation } from './sequence-navigation';
 import SequenceContent from './SequenceContent';
-import { CourseOutlineSidebarSlot } from '../../../plugin-slots/CourseOutlineSidebarSlot';
-import { CourseOutlineSidebarTriggerSlot } from '../../../plugin-slots/CourseOutlineSidebarTriggerSlot';
 
 const Sequence = ({
   unitId,
@@ -172,7 +173,7 @@ const Sequence = ({
         <div className="sequence w-100">
           {!isEnabledOutlineSidebar && (
             <div className="sequence-navigation-container">
-              <SequenceNavigation
+              <SequenceNavigationSlot
                 sequenceId={sequenceId}
                 unitId={unitId}
                 nextHandler={() => {

src/plugin-slots/README.md

@@ -23,4 +23,5 @@
 * [`org.openedx.frontend.learning.progress_tab_grade_breakdown.v1`](./ProgressTabGradeBreakdownSlot/)
 * [`org.openedx.frontend.learning.progress_tab_related_links.v1`](./ProgressTabRelatedLinksSlot/)
 * [`org.openedx.frontend.learning.sequence_container.v1`](./SequenceContainerSlot/)
+* [`org.openedx.frontend.learning.sequence_navigation.v1`](./SequenceNavigationSlot/)
 * [`org.openedx.frontend.learning.unit_title.v1`](./UnitTitleSlot/)

src/plugin-slots/SequenceNavigationSlot/README.md

@@ -0,0 +1,53 @@
+# Sequence Navigation Slot
+
+### Slot ID: `org.openedx.frontend.learning.sequence_navigation.v1`
+
+### Slot ID Aliases
+* `sequence_navigation_slot`
+
+### Props:
+* `sequenceId`
+* `unitId`
+* `nextHandler`
+* `onNavigate`
+* `previousHandler`
+
+## Description
+
+This slot is used to replace/modify/hide the sequence navigation.
+
+## Example
+
+### Default content
+![Sequence navigation slot with default content](./screenshot_default.png)
+
+### Replaced with custom component
+![📖 in sequence navigation slot](./screenshot_custom.png)
+
+The following `env.config.jsx` will replace the sequence navigation entirely.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.sequence_navigation.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_sequence_navigation',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 className="bg-gray-100 text-center">📖</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/SequenceNavigationSlot/index.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+import { SequenceNavigation } from '../../courseware/course/sequence/sequence-navigation';
+
+const SequenceNavigationSlot = ({
+  sequenceId,
+  unitId,
+  nextHandler,
+  onNavigate,
+  previousHandler,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.sequence_navigation.v1"
+    idAliases={['sequence_navigation_slot']}
+    slotOptions={{
+      mergeProps: true,
+      keepDefault: false,
+    }}
+    pluginProps={{
+      sequenceId,
+      unitId,
+      nextHandler,
+      onNavigate,
+      previousHandler,
+    }}
+  >
+    <SequenceNavigation
+      sequenceId={sequenceId}
+      unitId={unitId}
+      nextHandler={nextHandler}
+      onNavigate={onNavigate}
+      previousHandler={previousHandler}
+    />
+  </PluginSlot>
+);
+
+SequenceNavigationSlot.propTypes = {
+  sequenceId: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
+  nextHandler: PropTypes.func.isRequired,
+  onNavigate: PropTypes.func.isRequired,
+  previousHandler: PropTypes.func.isRequired,
+};
+
+export default SequenceNavigationSlot;