diff --git a/src/course-home/data/__factories__/courseBlocks.factory.js b/src/course-home/data/__factories__/courseBlocks.factory.js index 56041725..a6708899 100644 --- a/src/course-home/data/__factories__/courseBlocks.factory.js +++ b/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( diff --git a/src/course-home/data/__factories__/courseHomeMetadata.factory.js b/src/course-home/data/__factories__/courseHomeMetadata.factory.js index 4db203d9..9d7bc728 100644 --- a/src/course-home/data/__factories__/courseHomeMetadata.factory.js +++ b/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) => { diff --git a/src/course-home/data/__snapshots__/redux.test.js.snap b/src/course-home/data/__snapshots__/redux.test.js.snap index e837efef..7eeb2583 100644 --- a/src/course-home/data/__snapshots__/redux.test.js.snap +++ b/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", }, }, }, diff --git a/src/course-home/data/api.js b/src/course-home/data/api.js index 3f92e6bb..130a6e66 100644 --- a/src/course-home/data/api.js +++ b/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 title: block.display_name, }; diff --git a/src/course-home/outline-tab/OutlineTab.test.jsx b/src/course-home/outline-tab/OutlineTab.test.jsx index 77ebd162..b8849a20 100644 --- a/src/course-home/outline-tab/OutlineTab.test.jsx +++ b/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', () => { diff --git a/src/course-home/outline-tab/SequenceLink.jsx b/src/course-home/outline-tab/SequenceLink.jsx index 530d278a..b79d75f0 100644 --- a/src/course-home/outline-tab/SequenceLink.jsx +++ b/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 ? {title} : title; + // canLoadCourseware is true if the Courseware MFE is enabled, false otherwise + const coursewareUrl = canLoadCourseware ? {title} : {title}; + const displayTitle = showLink ? coursewareUrl : title; return (