feat(AU-2375): Update breadcrumbs and outline navigation bar UI (#1582)

* feat: extend CourseOutlineSidebarTriggerSlot props

* feat: Remove courseId from CourseOutlineSidebarTriggerPlugin props

* feat: update useContextId to use courseware data along with coursehome

* feat: extend useCourseOutlineSidebar values with sequenceStatus

src/courseware/course/sequence/Sequence.jsx

@@ -43,6 +43,7 @@ const Sequence = ({
     originalUserIsStaff,
   } = useModel('courseHomeMeta', courseId);
   const sequence = useModel('sequences', sequenceId);
+  const section = useModel('sections', sequence ? sequence.sectionId : null);
   const unit = useModel('units', unitId);
   const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
   const sequenceMightBeUnit = useSelector(state => state.courseware.sequenceMightBeUnit);
@@ -161,7 +162,12 @@ const Sequence = ({
   const defaultContent = (
     <>
       <div className="sequence-container d-inline-flex flex-row w-100">
-        <CourseOutlineSidebarTriggerSlot />
+        <CourseOutlineSidebarTriggerSlot
+          sectionId={section ? section.id : null}
+          sequenceId={sequenceId}
+          isStaff={isStaff}
+          unitId={unitId}
+        />
         <CourseOutlineSidebarSlot />
         <div className="sequence w-100">
           {!isEnabledOutlineSidebar && (

src/courseware/course/sidebar/sidebars/course-outline/hooks.jsx

@@ -14,6 +14,7 @@ import {
   getCourseOutlineStatus,
   getSequenceId,
   getCourseOutline,
+  getSequenceStatus,
 } from '@src/courseware/data/selectors';
 import { ID } from './constants';
 
@@ -24,6 +25,7 @@ export const useCourseOutlineSidebar = () => {
   const { enableNavigationSidebar: isEnabledSidebar } = useSelector(getCoursewareOutlineSidebarSettings);
   const courseOutlineShouldUpdate = useSelector(getCourseOutlineShouldUpdate);
   const courseOutlineStatus = useSelector(getCourseOutlineStatus);
+  const sequenceStatus = useSelector(getSequenceStatus);
   const activeSequenceId = useSelector(getSequenceId);
   const { sections = {}, sequences = {}, units = {} } = useSelector(getCourseOutline);
 
@@ -113,5 +115,6 @@ export const useCourseOutlineSidebar = () => {
     sequences,
     units,
     handleUnitClick,
+    sequenceStatus,
   };
 };

src/courseware/data/selectors.js

@@ -16,6 +16,8 @@ export const getCourseOutline = state => state.courseware.courseOutline;
 
 export const getCourseOutlineStatus = state => state.courseware.courseOutlineStatus;
 
+export const getSequenceStatus = state => state.courseware.sequenceStatus;
+
 export const getCoursewareOutlineSidebarSettings = state => state.courseware.coursewareOutlineSidebarSettings;
 
 export const getCourseOutlineShouldUpdate = state => state.courseware.courseOutlineShouldUpdate;

src/data/hooks.ts

@@ -2,4 +2,6 @@ import { useSelector } from 'react-redux';
 import { RootState } from '../store';
 
 // eslint-disable-next-line import/prefer-default-export
-export const useContextId = () => useSelector<RootState>(state => state.courseHome.courseId);
+export const useContextId = () => useSelector<RootState>(
+  state => state.courseware.courseId ?? state.courseHome.courseId,
+);

src/plugin-slots/CourseOutlineSidebarTriggerSlot/README.md

@@ -1,6 +1,11 @@
 # Course Outline Sidebar Trigger Slot
 
 ### Slot ID: `course_outline_sidebar_trigger_slot`
+### Props:
+* `sectionId`
+* `sequenceId`
+* `unitId`
+* `isStaff`
 
 ## Description
 

src/plugin-slots/CourseOutlineSidebarTriggerSlot/index.tsx

@@ -4,12 +4,27 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
 import CourseOutlineTrigger from '../../courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger';
 
-export const CourseOutlineSidebarTriggerSlot : React.FC = () => (
+interface Props {
+  sectionId?: string;
+  sequenceId?: string;
+  unitId?: string;
+  isStaff?: boolean;
+}
+
+export const CourseOutlineSidebarTriggerSlot : React.FC<Props> = ({
+  sectionId, sequenceId, unitId, isStaff,
+}) => (
   <PluginSlot
     id="course_outline_sidebar_trigger_slot"
     slotOptions={{
       mergeProps: true,
     }}
+    pluginProps={{
+      sectionId,
+      sequenceId,
+      unitId,
+      isStaff,
+    }}
   >
     <CourseOutlineTrigger isMobileView={false} />
   </PluginSlot>