fix: xblock error mfe unit preview (#1508)

* feat: add functionality to see unit draft preview

* fix: course redirect unit to sequnce unit redirect

* fix: not showing preview when masquerading

* feat: in preview fetch draft branch of sequence metadata

src/courseware/CoursewareContainer.jsx

@@ -168,7 +168,7 @@ class CoursewareContainer extends Component {
 
   checkFetchSequence = memoize((sequenceId) => {
     if (sequenceId) {
-      this.props.fetchSequence(sequenceId);
+      this.props.fetchSequence(sequenceId, this.props.isPreview);
     }
   });
 

src/courseware/course/Course.jsx

@@ -34,6 +34,7 @@ const Course = ({
     celebrations,
     isStaff,
     isNewDiscussionSidebarViewEnabled,
+    originalUserIsStaff,
   } = useModel('courseHomeMeta', courseId);
   const sequence = useModel('sequences', sequenceId);
   const section = useModel('sections', sequence ? sequence.sectionId : null);
@@ -42,7 +43,7 @@ const Course = ({
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
-  if (!isStaff && pathname.startsWith('/preview')) {
+  if (!originalUserIsStaff && pathname.startsWith('/preview')) {
     const courseUrl = pathname.replace('/preview', '');
     navigate(courseUrl, { replace: true });
   }

src/courseware/course/sequence/Sequence.jsx

@@ -204,7 +204,7 @@ const Sequence = ({
               sequenceId={sequenceId}
               unitId={unitId}
               unitLoadedHandler={handleUnitLoaded}
-              isStaff={isStaff}
+              isOriginalUserStaff={originalUserIsStaff}
             />
             {unitHasLoaded && renderUnitNavigation(false)}
           </div>

src/courseware/course/sequence/SequenceContent.jsx

@@ -15,7 +15,7 @@ const SequenceContent = ({
   sequenceId,
   unitId,
   unitLoadedHandler,
-  isStaff,
+  isOriginalUserStaff,
 }) => {
   const intl = useIntl();
   const sequence = useModel('sequences', sequenceId);
@@ -60,7 +60,7 @@ const SequenceContent = ({
       key={unitId}
       id={unitId}
       onLoaded={unitLoadedHandler}
-      isStaff={isStaff}
+      isOriginalUserStaff={isOriginalUserStaff}
     />
   );
 };
@@ -71,7 +71,7 @@ SequenceContent.propTypes = {
   sequenceId: PropTypes.string.isRequired,
   unitId: PropTypes.string,
   unitLoadedHandler: PropTypes.func.isRequired,
-  isStaff: PropTypes.bool.isRequired,
+  isOriginalUserStaff: PropTypes.bool.isRequired,
 };
 
 SequenceContent.defaultProps = {

src/courseware/course/sequence/Unit/index.jsx

@@ -22,7 +22,7 @@ const Unit = ({
   format,
   onLoaded,
   id,
-  isStaff,
+  isOriginalUserStaff,
 }) => {
   const { formatMessage } = useIntl();
   const [searchParams] = useSearchParams();
@@ -33,7 +33,7 @@ const Unit = ({
   const unit = useModel(modelKeys.units, id);
   const isProcessing = unit.bookmarkedUpdateState === 'loading';
   const view = authenticatedUser ? views.student : views.public;
-  const shouldDisplayUnitPreview = pathname.startsWith('/preview') && isStaff;
+  const shouldDisplayUnitPreview = pathname.startsWith('/preview') && isOriginalUserStaff;
 
   const getUrl = usePluginsCallback('getIFrameUrl', () => getIFrameUrl({
     id,
@@ -78,7 +78,7 @@ Unit.propTypes = {
   format: PropTypes.string,
   id: PropTypes.string.isRequired,
   onLoaded: PropTypes.func,
-  isStaff: PropTypes.bool.isRequired,
+  isOriginalUserStaff: PropTypes.bool.isRequired,
 };
 
 Unit.defaultProps = {

src/courseware/data/api.js

@@ -36,9 +36,9 @@ export async function getCourseMetadata(courseId) {
   return normalizeMetadata(metadata);
 }
 
-export async function getSequenceMetadata(sequenceId) {
+export async function getSequenceMetadata(sequenceId, params) {
   const { data } = await getAuthenticatedHttpClient()
-    .get(`${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceId}`, {});
+    .get(`${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceId}`, { params });
 
   return normalizeSequenceMetadata(data);
 }

src/courseware/data/thunks.js

@@ -133,11 +133,11 @@ export function fetchCourse(courseId) {
   };
 }
 
-export function fetchSequence(sequenceId) {
+export function fetchSequence(sequenceId, isPreview) {
   return async (dispatch) => {
     dispatch(fetchSequenceRequest({ sequenceId }));
     try {
-      const { sequence, units } = await getSequenceMetadata(sequenceId);
+      const { sequence, units } = await getSequenceMetadata(sequenceId, { preview: isPreview ? '1' : '0' });
       if (sequence.blockType !== 'sequential') {
         // Some other block types (particularly 'chapter') can be returned
         // by this API. We want to error in that case, since downstream