feat: add section outline plugin (#1632)

This PR adds a plugin slot for the section list in the outline tab. This plugin can be used to add custom content before the list or add extra content to the titles for sections and subsections. To accomplish this, some of the smaller components inside Section and SequenceLink have been extrapolated into their own components so that they can be easily imported for use in plugins.

Author: KristinAoki

src/course-home/outline-tab/OutlineTab.jsx

@@ -15,7 +15,6 @@ import WeeklyLearningGoalCard from './widgets/WeeklyLearningGoalCard';
 import CourseTools from './widgets/CourseTools';
 import { fetchOutlineTab } from '../data';
 import messages from './messages';
-import Section from './Section';
 import ShiftDatesAlert from '../suggested-schedule-messaging/ShiftDatesAlert';
 import UpgradeNotification from '../../generic/upgrade-notification/UpgradeNotification';
 import UpgradeToShiftDatesAlert from '../suggested-schedule-messaging/UpgradeToShiftDatesAlert';
@@ -28,6 +27,7 @@ import { useModel } from '../../generic/model-store';
 import WelcomeMessage from './widgets/WelcomeMessage';
 import ProctoringInfoPanel from './widgets/ProctoringInfoPanel';
 import AccountActivationAlert from '../../alerts/logistration-alert/AccountActivationAlert';
+import CourseHomeSectionOutlineSlot from '../../plugin-slots/CourseHomeSectionOutlineSlot';
 
 const OutlineTab = () => {
   const intl = useIntl();
@@ -165,24 +165,18 @@ const OutlineTab = () => {
           <WelcomeMessage courseId={courseId} nextElementRef={expandButtonRef} />
           {rootCourseId && (
             <>
-              <div className="row w-100 m-0 mb-3 justify-content-end">
+              <div id="expand-button-row" className="row w-100 m-0 mb-3 justify-content-end">
                 <div className="col-12 col-md-auto p-0">
                   <Button ref={expandButtonRef} variant="outline-primary" block onClick={() => { setExpandAll(!expandAll); }}>
                     {expandAll ? intl.formatMessage(messages.collapseAll) : intl.formatMessage(messages.expandAll)}
                   </Button>
                 </div>
               </div>
-              <ol id="courseHome-outline" className="list-unstyled">
-                {courses[rootCourseId].sectionIds.map((sectionId) => (
-                  <Section
-                    key={sectionId}
-                    courseId={courseId}
-                    defaultOpen={sections[sectionId].resumeBlock}
-                    expand={expandAll}
-                    section={sections[sectionId]}
-                  />
-                ))}
-              </ol>
+              <CourseHomeSectionOutlineSlot
+                expandAll={expandAll}
+                sectionIds={courses[rootCourseId].sectionIds}
+                sections={sections}
+              />
             </>
           )}
         </div>

src/course-home/outline-tab/OutlineTab.test.jsx

@@ -168,7 +168,7 @@ describe('Outline Tab', () => {
         course_blocks: { blocks: courseBlocks.blocks },
       });
       await fetchAndRender();
-      expect(screen.getByTitle('Completed section')).toBeInTheDocument();
+      expect(screen.getByLabelText('Completed section')).toBeInTheDocument();
     });
 
     it('displays correct icon for incomplete assignment', async () => {
@@ -177,7 +177,7 @@ describe('Outline Tab', () => {
         course_blocks: { blocks: courseBlocks.blocks },
       });
       await fetchAndRender();
-      expect(screen.getByTitle('Incomplete section')).toBeInTheDocument();
+      expect(screen.getByLabelText('Incomplete section')).toBeInTheDocument();
     });
 
     it('SequenceLink displays link', async () => {
@@ -293,7 +293,7 @@ describe('Outline Tab', () => {
         expect(showMoreButton).toBeInTheDocument();
       });
 
-      fit('dismisses message', async () => {
+      it('dismisses message', async () => {
         expect(screen.getByTestId('alert-container-welcome')).toBeInTheDocument();
         const dismissButton = screen.queryByRole('button', { name: 'Dismiss' });
         const expandButton = screen.queryByRole('button', { name: 'Expand all' });

src/course-home/outline-tab/Section.jsx

@@ -341,6 +341,16 @@ const messages = defineMessages({
     defaultMessage: 'Onboarding Past Due',
     description: 'Text that show when the deadline of proctortrack onboarding exam has passed, it appears on button that start the onboarding exam however for this case the button is disabled for obvious reason',
   },
+  sequenceDueDate: {
+    id: 'learning.outline.sequence-due-date-set',
+    defaultMessage: '{description} due {assignmentDue}',
+    description: 'Used below an assignment title',
+  },
+  sequenceNoDueDate: {
+    id: 'learning.outline.sequence-due-date-not-set',
+    defaultMessage: '{description}',
+    description: 'Used below an assignment title',
+  },
 });
 
 export default messages;