Added Unit Pages to Course Outline

src/course-home/data/__snapshots__/redux.test.js.snap

@@ -415,40 +415,58 @@ Object {
         },
         "courseBlocks": Object {
           "courses": Object {
-            "block-v1:edX+DemoX+Demo_Course+type@course+block@bcdabcdabcdabcdabcdabcdabcdabcd3": Object {
+            "block-v1:edX+DemoX+Demo_Course+type@course+block@bcdabcdabcdabcdabcdabcdabcdabcd4": Object {
               "hasScheduledContent": false,
               "id": "course-v1:edX+DemoX+Demo_Course",
               "sectionIds": Array [
-                "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
+                "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd3",
               ],
-              "title": "bcdabcdabcdabcdabcdabcdabcdabcd3",
+              "title": "bcdabcdabcdabcdabcdabcdabcdabcd4",
             },
           },
           "sections": Object {
-            "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2": Object {
+            "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd3": Object {
               "complete": false,
               "courseId": "course-v1:edX+DemoX+Demo_Course",
-              "id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
+              "id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd3",
               "resumeBlock": false,
               "sequenceIds": Array [
-                "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+                "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
               ],
               "title": "Title of Section",
             },
           },
           "sequences": Object {
-            "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1": Object {
+            "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd2": Object {
               "complete": false,
               "description": null,
               "due": null,
               "effortActivities": 2,
               "effortTime": 15,
               "icon": null,
-              "id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
-              "legacyWebUrl": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1?experience=legacy",
-              "sectionId": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
+              "id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
+              "legacyWebUrl": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd2?experience=legacy",
+              "sectionId": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd3",
               "showLink": true,
               "title": "Title of Sequence",
+              "unitIds": Array [
+                "block-v1:edX+DemoX+Demo_Course+type@vertical+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+              ],
+            },
+          },
+          "units": Object {
+            "block-v1:edX+DemoX+Demo_Course+type@vertical+block@bcdabcdabcdabcdabcdabcdabcdabcd1": Object {
+              "complete": false,
+              "description": null,
+              "due": null,
+              "effortActivities": 2,
+              "effortTime": 15,
+              "icon": null,
+              "id": "block-v1:edX+DemoX+Demo_Course+type@vertical+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+              "legacyWebUrl": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@vertical+block@bcdabcdabcdabcdabcdabcdabcdabcd1?experience=legacy",
+              "sequenceId": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
+              "showLink": true,
+              "title": "Title of Unit",
             },
           },
         },

src/course-home/data/api.js

@@ -117,6 +117,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
     courses: {},
     sections: {},
     sequences: {},
+    units: {},
   };
   Object.values(blocks).forEach(block => {
     switch (block.type) {
@@ -155,6 +156,25 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           // link to the MFE ourselves).
           showLink: !!block.legacy_web_url,
           title: block.display_name,
+          unitIds: block.children || [],
+        };
+        break;
+      case 'vertical':
+        models.units[block.id] = {
+          complete: block.complete,
+          description: block.description,
+          due: block.due,
+          effortActivities: block.effort_activities,
+          effortTime: block.effort_time,
+          icon: block.icon,
+          id: block.id,
+          legacyWebUrl: block.legacy_web_url,
+          // The presence of an legacy URL for the sequence indicates that we want this
+          // sequence to be a clickable link in the outline (even though, if the new
+          // courseware experience is active, we will ignore `legacyWebUrl` and build a
+          // link to the MFE ourselves).
+          showLink: !!block.legacy_web_url,
+          title: block.display_name,
         };
         break;
 
@@ -185,6 +205,17 @@ export function normalizeOutlineBlocks(courseId, blocks) {
       });
     }
   });
+  Object.values(models.sequences).forEach(sequence => {
+    if (Array.isArray(sequence.unitIds)) {
+      sequence.unitIds.forEach(unitId => {
+        if (unitId in models.units) {
+          models.units[unitId].sequenceId = sequence.id;
+        } else {
+          logInfo(`Section ${sequence.id} has child block ${unitId}, but that block is not in the list of sequences.`);
+        }
+      });
+    }
+  });
 
   return models;
 }

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

@@ -147,8 +147,9 @@ describe('Outline Tab', () => {
         course_blocks: { blocks: courseBlocks.blocks },
       });
       await fetchAndRender();
-
-      const sequenceLink = screen.getByText('Title of Sequence');
+      const expandButton = screen.getByRole('button', { name: 'Expand all' });
+      userEvent.click(expandButton);
+      const sequenceLink = screen.getByText('Title of Unit');
       expect(sequenceLink.getAttribute('href')).toContain(`/courses/${courseId}`);
     });
 
@@ -161,8 +162,10 @@ describe('Outline Tab', () => {
         course_blocks: { blocks: courseBlocks.blocks },
       });
       await fetchAndRender();
+      const expandButton = screen.getByRole('button', { name: 'Expand all' });
+      userEvent.click(expandButton);
 
-      const sequenceLink = screen.getByText('Title of Sequence');
+      const sequenceLink = screen.getByText('Title of Unit');
       expect(sequenceLink.getAttribute('href')).toContain(`/course/${courseId}`);
     });
   });

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

@@ -96,13 +96,14 @@ function Section({
         )}
       >
         <ol className="list-unstyled">
-          {sequenceIds.map((sequenceId, index) => (
+          {sequenceIds.map((sequenceId) => (
             <SequenceLink
               key={sequenceId}
               id={sequenceId}
               courseId={courseId}
+              defaultOpen={sequences[sequenceId].resumeBlock}
+              expand={expand}
               sequence={sequences[sequenceId]}
-              first={index === 0}
             />
           ))}
         </ol>