diff --git a/src/courseware/InstructorToolbar.jsx b/src/courseware/InstructorToolbar.jsx new file mode 100644 index 00000000..01124fec --- /dev/null +++ b/src/courseware/InstructorToolbar.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; + +function InstructorToolbar(props) { + // TODO: Only render this toolbar if the user is course staff + if (!props.activeUnitLmsWebUrl) { + return null; + } + + return ( +
+
+ View unit in the existing experience +
+
+ ); +} + +InstructorToolbar.propTypes = { + activeUnitLmsWebUrl: PropTypes.string, +}; + +InstructorToolbar.defaultProps = { + activeUnitLmsWebUrl: undefined, +}; + +const mapStateToProps = (state, props) => { + if (!props.unitId) { + return {}; + } + + const activeUnit = state.courseBlocks.blocks[props.unitId]; + return { + activeUnitLmsWebUrl: activeUnit.lmsWebUrl, + }; +}; + +export default connect(mapStateToProps)(InstructorToolbar); diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx index 57fc0dbf..5fd4f8b6 100644 --- a/src/courseware/course/Course.jsx +++ b/src/courseware/course/Course.jsx @@ -8,6 +8,7 @@ import { createSequenceIdList } from '../utils'; import AlertList from '../../user-messages/AlertList'; import CourseHeader from './CourseHeader'; import CourseTabsNavigation from './CourseTabsNavigation'; +import InstructorToolbar from '../InstructorToolbar'; export default function Course({ courseOrg, courseNumber, courseName, courseUsageKey, courseId, sequenceId, unitId, models, tabs, @@ -41,6 +42,12 @@ export default function Course({ courseNumber={courseNumber} courseName={courseName} /> +
diff --git a/src/courseware/course/CourseHeader.jsx b/src/courseware/course/CourseHeader.jsx index aca21bbd..9009395e 100644 --- a/src/courseware/course/CourseHeader.jsx +++ b/src/courseware/course/CourseHeader.jsx @@ -31,30 +31,32 @@ export default function CourseHeader({ const { authenticatedUser } = useContext(AppContext); return ( -
- -
- {courseOrg} {courseNumber} - {courseName} -
+
+
+ +
+ {courseOrg} {courseNumber} + {courseName} +
- - - {authenticatedUser.username} - - - Dashboard - Profile - Account - Order History - Sign Out - - + + + {authenticatedUser.username} + + + Dashboard + Profile + Account + Order History + Sign Out + + +
); }