AA-684: sequence link to legacy or MFE (#371)

src/course-home/data/__factories__/courseBlocks.factory.js

@@ -56,7 +56,7 @@ Factory.define('courseBlocks')
 export default function buildSimpleCourseBlocks(courseId, title, options = {}) {
   const sequenceBlock = options.sequenceBlock || [Factory.build(
     'block',
-    { type: 'sequential' },
+    { display_name: 'Title of Sequence', type: 'sequential' },
     { courseId },
   )];
   const sectionBlock = options.sectionBlock || Factory.build(

src/course-home/data/__factories__/courseHomeMetadata.factory.js

@@ -13,6 +13,7 @@ Factory.define('courseHomeMetadata')
     title: 'Demonstration Course',
     is_self_paced: false,
     is_enrolled: false,
+    can_load_courseware: false,
   })
   .attr(
     'tabs', ['courseId', 'host'], (courseId, host) => {

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

@@ -18,6 +18,7 @@ Object {
   "models": Object {
     "courseHomeMeta": Object {
       "course-v1:edX+DemoX+Demo_Course_1": Object {
+        "canLoadCourseware": false,
         "courseId": "course-v1:edX+DemoX+Demo_Course_1",
         "id": "course-v1:edX+DemoX+Demo_Course_1",
         "isEnrolled": false,
@@ -303,6 +304,7 @@ Object {
   "models": Object {
     "courseHomeMeta": Object {
       "course-v1:edX+DemoX+Demo_Course_1": Object {
+        "canLoadCourseware": false,
         "courseId": "course-v1:edX+DemoX+Demo_Course_1",
         "id": "course-v1:edX+DemoX+Demo_Course_1",
         "isEnrolled": false,
@@ -385,9 +387,10 @@ Object {
               "effortTime": undefined,
               "icon": null,
               "id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+              "lmsWebUrl": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
               "sectionId": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
               "showLink": true,
-              "title": "bcdabcdabcdabcdabcdabcdabcdabcd1",
+              "title": "Title of Sequence",
             },
           },
         },

src/course-home/data/api.js

@@ -56,6 +56,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           effortTime: block.effort_time,
           icon: block.icon,
           id: block.id,
+          lmsWebUrl: block.lms_web_url,
           showLink: !!block.lms_web_url, // we reconstruct the url ourselves as an MFE-internal <Link>
           title: block.display_name,
         };

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

@@ -123,6 +123,34 @@ describe('Outline Tab', () => {
       await fetchAndRender();
       expect(screen.getByTitle('Incomplete section')).toBeInTheDocument();
     });
+
+    it('SequenceLink displays points to legacy courseware', async () => {
+      const { courseBlocks } = await buildSimpleCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      setMetadata({
+        can_load_courseware: false,
+      });
+      setTabData({
+        course_blocks: { blocks: courseBlocks.blocks },
+      });
+      await fetchAndRender();
+
+      const sequenceLink = screen.getByText('Title of Sequence');
+      expect(sequenceLink.getAttribute('href')).toContain(`/courses/${courseId}`);
+    });
+
+    it('SequenceLink displays points to courseware MFE', async () => {
+      const { courseBlocks } = await buildSimpleCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      setMetadata({
+        can_load_courseware: true,
+      });
+      setTabData({
+        course_blocks: { blocks: courseBlocks.blocks },
+      });
+      await fetchAndRender();
+
+      const sequenceLink = screen.getByText('Title of Sequence');
+      expect(sequenceLink.getAttribute('href')).toContain(`/course/${courseId}`);
+    });
   });
 
   describe('Welcome Message', () => {

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
+import { Hyperlink } from '@edx/paragon';
 import {
   FormattedMessage,
   FormattedTime,
@@ -27,6 +28,7 @@ function SequenceLink({
     complete,
     description,
     due,
+    lmsWebUrl,
     showLink,
     title,
   } = sequence;
@@ -35,10 +37,15 @@ function SequenceLink({
       userTimezone,
     },
   } = useModel('outline', courseId);
+  const {
+    canLoadCourseware,
+  } = useModel('courseHomeMeta', courseId);
 
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
-  const displayTitle = showLink ? <Link to={`/course/${courseId}/${id}`}>{title}</Link> : title;
+  // canLoadCourseware is true if the Courseware MFE is enabled, false otherwise
+  const coursewareUrl = canLoadCourseware ? <Link to={`/course/${courseId}/${id}`}>{title}</Link> : <Hyperlink destination={lmsWebUrl}>{title}</Hyperlink>;
+  const displayTitle = showLink ? coursewareUrl : title;
 
   return (
     <li>