Implement kill-switch for non-staff users

to redirect to the current unit’s lmsWebUrl if the MFE is disabled

If we receive an error_code of 'microfrontend_disabled',
go to the equivalent unit in the LMS experience.

Fixes: TNL-7362
Co-authored-by: stvn <stvn@mit.edu>

src/courseware/CoursewareContainer.jsx

@@ -171,7 +171,15 @@ class CoursewareContainer extends Component {
   }
 
   renderDenied() {
-    const { courseId, course } = this.props;
+    const {
+      course,
+      courseId,
+      match: {
+        params: {
+          unitId: routeUnitId,
+        },
+      },
+    } = this.props;
     let url = `/redirect/course-home/${courseId}`;
     switch (course.canLoadCourseware.errorCode) {
       case 'audit_expired':
@@ -186,6 +194,9 @@ class CoursewareContainer extends Component {
       case 'unfulfilled_milestones':
         url = '/redirect/dashboard';
         break;
+      case 'microfrontend_disabled':
+        url = `/redirect/courseware/${courseId}/unit/${routeUnitId}`;
+        break;
       case 'authentication_required':
       case 'enrollment_required':
       default:

src/courseware/CoursewareRedirect.jsx

@@ -0,0 +1,14 @@
+import { getConfig } from '@edx/frontend-platform';
+
+import { useModel } from '../generic/model-store';
+
+export default function CourseRedirect({ match }) {
+  const {
+    courseId,
+    unitId,
+  } = match.params;
+  const unit = useModel('units', unitId) || {};
+  const coursewareUrl = unit.lmsWebUrl || `${getConfig().LMS_BASE_URL}/courses/${courseId}/courseware/`;
+  global.location.assign(coursewareUrl);
+  return null;
+}

src/courseware/CoursewareRedirectLandingPage.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { Switch, Route, useRouteMatch } from 'react-router';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import PageLoading from './generic/PageLoading';
+
+import PageLoading from '../generic/PageLoading';
+import CoursewareRedirect from './CoursewareRedirect';
 
 export default () => {
   const { path } = useRouteMatch();
@@ -18,6 +20,10 @@ export default () => {
       />
 
       <Switch>
+        <Route
+          path={`${path}/courseware/:courseId/unit/:unitId`}
+          component={CoursewareRedirect}
+        />
         <Route
           path={`${path}/course-home/:courseId`}
           render={({ match }) => {

src/index.jsx

@@ -20,7 +20,7 @@ import './index.scss';
 import './assets/favicon.ico';
 import OutlineTab from './course-home/outline-tab';
 import CoursewareContainer from './courseware';
-import CoursewareRedirect from './CoursewareRedirect';
+import CoursewareRedirectLandingPage from './courseware/CoursewareRedirectLandingPage';
 import DatesTab from './course-home/dates-tab';
 import ProgressTab from './course-home/progress-tab/ProgressTab';
 import { TabContainer } from './tab-page';
@@ -33,7 +33,7 @@ subscribe(APP_READY, () => {
     <AppProvider store={initializeStore()}>
       <UserMessagesProvider>
         <Switch>
-          <Route path="/redirect" component={CoursewareRedirect} />
+          <Route path="/redirect" component={CoursewareRedirectLandingPage} />
           <Route path="/course/:courseId/home">
             <TabContainer tab="outline" fetch={fetchOutlineTab}>
               <OutlineTab />