AA-389: Updating Routing for CourseExit Page (#234)

The CourseExit page uses the TabContainer because it seems to be a better solution
than adding it into the paths for the CoursewareContainer, despite the CoursewareContainer
already doing the correct fetch. The reason for this is because within the
CoursewareContainer, it would still be necessary to check for the /course-exit path (due
to the CoursewareContainer trying to greedily match sequenceId (read: it will try and
look up 'course-exit' as a sequence)). That effectively defeats the purpose of using the
routing in the first place so instead, we place it in a TabContainer.

The InstructorToolbar didMount logic became necessary once we had a page (CourseExit) that does a redirect on a quick exit.
As a result, it unmouunts the InstructorToolbar (which will be remounted by the new component),
but the InstructorToolbar's MasqueradeWidget has an outgoing request. Since it is unmounted
during that time, it raises an error about a potential memory leak. By stopping the render
when the InstructorToolbar is unmounted, we avoid the memory leak.

src/tab-page/TabContainer.jsx

@@ -9,8 +9,8 @@ export default function TabContainer(props) {
   const {
     children,
     fetch,
+    slice,
     tab,
-    isExitPage,
   } = props;
 
   const { courseId: courseIdFromUrl } = useParams();
@@ -22,7 +22,6 @@ export default function TabContainer(props) {
 
   // The courseId from the store is the course we HAVE loaded.  If the URL changes,
   // we don't want the application to adjust to it until it has actually loaded the new data.
-  const slice = isExitPage ? 'courseware' : 'courseHome';
   const {
     courseId,
     courseStatus,
@@ -42,10 +41,6 @@ export default function TabContainer(props) {
 TabContainer.propTypes = {
   children: PropTypes.node.isRequired,
   fetch: PropTypes.func.isRequired,
-  isExitPage: PropTypes.bool,
+  slice: PropTypes.string.isRequired,
   tab: PropTypes.string.isRequired,
 };
-
-TabContainer.defaultProps = {
-  isExitPage: false,
-};

src/tab-page/TabContainer.test.jsx

@@ -17,6 +17,7 @@ describe('Tab Container', () => {
     children: [],
     fetch: mockFetch,
     tab: 'dummy',
+    slice: 'courseware',
   };
   let courseId;