build: bump frontend-build to alpha

2023-08-01 16:23:36 +05:00
47 changed files with 6891 additions and 4283 deletions
--- a/.env.development
+++ b/.env.development
@@ -46,5 +46,3 @@ TWITTER_HASHTAG='myedxjourney'
 TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SESSION_COOKIE_DOMAIN='localhost'
-CHAT_RESPONSE_URL='http://localhost:18000/api/learning_assistant/v1/course_id'
-PRIVACY_POLICY_URL='http://localhost:18000/privacy'
--- a/.env.test
+++ b/.env.test
@@ -45,4 +45,3 @@ TERMS_OF_SERVICE_URL='https://www.edx.org/edx-terms-service'
 TWITTER_HASHTAG='myedxjourney'
 TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
-PRIVACY_POLICY_URL='http://localhost:18000/privacy'
--- a/2
+++ b/2
@@ -77,5 +77,5 @@ validate:

 .PHONY: validate.ci
 validate.ci:
-	npm ci
+	npm ci --legacy-peer-deps
 	make validate
--- a/jest.config.js
+++ b/jest.config.js
@@ -9,12 +9,6 @@ module.exports = createConfig('jest', {
    'src/i18n',
    'src/.*\\.exp\\..*',
  ],
-  // see https://github.com/axios/axios/issues/5026
-  moduleNameMapper: {
-    "^axios$": "axios/dist/axios.js",
-    // See https://stackoverflow.com/questions/72382316/jest-encountered-an-unexpected-token-react-markdown
-    'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
-  },
  testTimeout: 30000,
  testEnvironment: 'jsdom'
 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -32,10 +32,9 @@
    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
    "@edx/frontend-component-footer": "12.0.0",
    "@edx/frontend-component-header": "4.0.0",
-    "@edx/frontend-lib-learning-assistant": "^1.11.0",
-    "@edx/frontend-lib-special-exams": "2.20.1",
-    "@edx/frontend-platform": "4.3.0",
-    "@edx/paragon": "20.46.0",
+    "@edx/frontend-lib-special-exams": "2.19.1",
+    "@edx/frontend-platform": "4.6.1",
+    "@edx/paragon": "20.28.4",
    "@edx/react-unit-test-utils": "npm:@edx/react-unit-test-utils@1.5.3",
    "@fortawesome/fontawesome-svg-core": "1.3.0",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -47,7 +46,7 @@
    "classnames": "2.3.2",
    "core-js": "3.22.2",
    "history": "5.3.0",
-    "js-cookie": "3.0.5",
+    "js-cookie": "3.0.1",
    "lodash.camelcase": "4.3.0",
    "prop-types": "15.8.1",
    "query-string": "^7.1.3",
@@ -60,14 +59,14 @@
    "react-share": "4.4.1",
    "redux": "4.1.2",
    "regenerator-runtime": "0.13.11",
-    "reselect": "4.1.8",
+    "reselect": "4.1.7",
    "truncate-html": "1.0.4",
    "util": "0.12.5"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "^12.8.27",
-    "@edx/reactifex": "2.2.0",
+    "@edx/browserslist-config": "1.1.1",
+    "@edx/frontend-build": "12.9.0-alpha.1",
+    "@edx/reactifex": "2.1.1",
    "@pact-foundation/pact": "^11.0.2",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "12.1.5",
--- a/src/alerts/course-start-alert/CourseStartAlert.jsx
+++ b/src/alerts/course-start-alert/CourseStartAlert.jsx
@@ -68,7 +68,7 @@ const CourseStartAlert = ({ payload }) => {
    <Alert variant="info" icon={Info}>
      <strong>
        <FormattedMessage
-          id="learning.outline.alert.start.long"
+          id="learning.outline.alert.end.long"
          defaultMessage="Course starts {timeRemaining} on {courseStartDate}."
          description="Used when the time remaining is more than a day away."
          values={{
@@ -88,7 +88,7 @@ const CourseStartAlert = ({ payload }) => {
      </strong>
      <br />
      <FormattedMessage
-        id="learning.outline.alert.start.calendar"
+        id="learning.outline.alert.end.calendar"
        defaultMessage="Don’t forget to add a calendar reminder!"
        description="It's just a recommendation for learners to set a reminder for the course starting date and is shown when the course starting date is more than a day. "
      />
--- a/src/course-home/data/snapshots/redux.test.js.snap
+++ b/src/course-home/data/snapshots/redux.test.js.snap
@@ -18,9 +18,6 @@ Object {
    "sequenceMightBeUnit": false,
    "sequenceStatus": "loading",
  },
-  "learningAssistant": ObjectContaining {
-    "conversationId": Any<String>,
-  },
  "models": Object {
    "courseHomeMeta": Object {
      "course-v1:edX+DemoX+Demo_Course": Object {
@@ -339,9 +336,6 @@ Object {
    "sequenceMightBeUnit": false,
    "sequenceStatus": "loading",
  },
-  "learningAssistant": ObjectContaining {
-    "conversationId": Any<String>,
-  },
  "models": Object {
    "courseHomeMeta": Object {
      "course-v1:edX+DemoX+Demo_Course": Object {
@@ -538,9 +532,6 @@ Object {
    "sequenceMightBeUnit": false,
    "sequenceStatus": "loading",
  },
-  "learningAssistant": ObjectContaining {
-    "conversationId": Any<String>,
-  },
  "models": Object {
    "courseHomeMeta": Object {
      "course-v1:edX+DemoX+Demo_Course": Object {
--- a/src/course-home/data/redux.test.js
+++ b/src/course-home/data/redux.test.js
@@ -67,14 +67,7 @@ describe('Data layer integration tests', () => {

      const state = store.getState();
      expect(state.courseHome.courseStatus).toEqual('loaded');
-      expect(state).toMatchSnapshot({
-        // The Xpert chatbot (frontend-lib-learning-assistant) generates a unique UUID
-        // to keep track of conversations. This causes snapshots to fail, because this UUID
-        // is generated on each run of the snapshot. Instead, we use an asymmetric matcher here.
-        learningAssistant: expect.objectContaining({
-          conversationId: expect.any(String),
-        }),
-      });
+      expect(state).toMatchSnapshot();
    });

    it.each([401, 403, 404])(
@@ -118,14 +111,7 @@ describe('Data layer integration tests', () => {

      const state = store.getState();
      expect(state.courseHome.courseStatus).toEqual('loaded');
-      expect(state).toMatchSnapshot({
-        // The Xpert chatbot (frontend-lib-learning-assistant) generates a unique UUID
-        // to keep track of conversations. This causes snapshots to fail, because this UUID
-        // is generated on each run of the snapshot. Instead, we use an asymmetric matcher here.
-        learningAssistant: expect.objectContaining({
-          conversationId: expect.any(String),
-        }),
-      });
+      expect(state).toMatchSnapshot();
    });

    it.each([401, 403, 404])(
@@ -170,14 +156,7 @@ describe('Data layer integration tests', () => {

      const state = store.getState();
      expect(state.courseHome.courseStatus).toEqual('loaded');
-      expect(state).toMatchSnapshot({
-        // The Xpert chatbot (frontend-lib-learning-assistant) generates a unique UUID
-        // to keep track of conversations. This causes snapshots to fail, because this UUID
-        // is generated on each run of the snapshot. Instead, we use an asymmetric matcher here.
-        learningAssistant: expect.objectContaining({
-          conversationId: expect.any(String),
-        }),
-      });
+      expect(state).toMatchSnapshot();
    });

    it('Should handle the url including a targetUserId', async () => {
--- a/src/courseware/CoursewareContainer.jsx
+++ b/src/courseware/CoursewareContainer.jsx
@@ -243,7 +243,7 @@ class CoursewareContainer extends Component {
    checkSequenceUnitMarkerToSequenceUnitRedirect(courseId, sequenceStatus, sequence, routeUnitId);
  }

-  handleUnitNavigationClick = () => {
+  handleUnitNavigationClick = (nextUnitId) => {
    const {
      courseId, sequenceId,
      match: {
@@ -254,17 +254,21 @@ class CoursewareContainer extends Component {
    } = this.props;

    this.props.checkBlockCompletion(courseId, sequenceId, routeUnitId);
+    history.push(`/course/${courseId}/${sequenceId}/${nextUnitId}`);
  };

  handleNextSequenceClick = () => {
    const {
      course,
+      courseId,
      nextSequence,
      sequence,
      sequenceId,
    } = this.props;

    if (nextSequence !== null) {
+      history.push(`/course/${courseId}/${nextSequence.id}/first`);
+
      const celebrateFirstSection = course && course.celebrations && course.celebrations.firstSection;
      if (celebrateFirstSection && sequence.sectionId !== nextSequence.sectionId) {
        handleNextSectionCelebration(sequenceId, nextSequence.id);
@@ -272,7 +276,12 @@ class CoursewareContainer extends Component {
    }
  };

-  handlePreviousSequenceClick = () => {};
+  handlePreviousSequenceClick = () => {
+    const { previousSequence, courseId } = this.props;
+    if (previousSequence !== null) {
+      history.push(`/course/${courseId}/${previousSequence.id}/last`);
+    }
+  };

  render() {
    const {
--- a/src/courseware/CoursewareContainer.test.jsx
+++ b/src/courseware/CoursewareContainer.test.jsx
@@ -185,7 +185,7 @@ describe('CoursewareContainer', () => {

    function assertSequenceNavigation(container, expectedUnitCount = 3) {
      // Ensure we had appropriate sequence navigation buttons.  We should only have one unit.
-      const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
+      const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
      expect(sequenceNavButtons).toHaveLength(expectedUnitCount + 2);

      expect(sequenceNavButtons[0]).toHaveTextContent('Previous');
@@ -413,10 +413,10 @@ describe('CoursewareContainer', () => {
        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
        const container = await waitFor(() => loadContainer());

-        const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
+        const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
        const sequenceNextButton = sequenceNavButtons[4];
        expect(sequenceNextButton).toHaveTextContent('Next');
-        fireEvent.click(sequenceNextButton);
+        fireEvent.click(sequenceNavButtons[4]);

        expect(global.location.href).toEqual(`http://localhost/course/${courseId}/${sequenceBlock.id}/${unitBlocks[1].id}`);
      });
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -10,11 +10,11 @@ import { AlertList } from '../../generic/user-messages';
 import Sequence from './sequence';

 import { CelebrationModal, shouldCelebrateOnSectionLoad, WeeklyGoalCelebrationModal } from './celebration';
-import Chat from './chat/Chat';
 import ContentTools from './content-tools';
 import CourseBreadcrumbs from './CourseBreadcrumbs';
 import SidebarProvider from './sidebar/SidebarContextProvider';
 import SidebarTriggers from './sidebar/SidebarTriggers';
+import ChatTrigger from './lti-modal/ChatTrigger';

 import { useModel } from '../../generic/model-store';
 import { getSessionStorage, setSessionStorage } from '../../data/sessionStorage';
@@ -93,12 +93,11 @@ const Course = ({
        />
        {shouldDisplayTriggers && (
          <>
-            <Chat
-              enabled={course.learningAssistantEnabled}
+            <ChatTrigger
              enrollmentMode={course.enrollmentMode}
              isStaff={isStaff}
+              launchUrl={course.learningAssistantLaunchUrl}
              courseId={courseId}
-              contentToolsEnabled={course.showCalculator || course.notes.enabled}
            />
            <SidebarTriggers />
          </>
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -280,8 +280,8 @@ describe('Course', () => {

    loadUnit();
    await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());
-    screen.getAllByRole('link', { name: /previous/i }).forEach(link => fireEvent.click(link));
-    screen.getAllByRole('link', { name: /next/i }).forEach(link => fireEvent.click(link));
+    screen.getAllByRole('button', { name: /previous/i }).forEach(button => fireEvent.click(button));
+    screen.getAllByRole('button', { name: /next/i }).forEach(button => fireEvent.click(button));

    // We are in the middle of the sequence, so no
    expect(previousSequenceHandler).not.toHaveBeenCalled();
--- a/src/courseware/course/chat/Chat.jsx
+++ b/src/courseware/course/chat/Chat.jsx
@@ -1,66 +0,0 @@
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-
-import { Xpert } from '@edx/frontend-lib-learning-assistant';
-import { injectIntl } from '@edx/frontend-platform/i18n';
-
-const Chat = ({
-  enabled,
-  enrollmentMode,
-  isStaff,
-  courseId,
-  contentToolsEnabled,
-}) => {
-  const VERIFIED_MODES = [
-    'professional',
-    'verified',
-    'no-id-professional',
-    'credit',
-    'masters',
-    'executive-education',
-    'paid-executive-education',
-    'paid-bootcamp',
-  ];
-
-  const AUDIT_MODES = [
-    'audit',
-    'honor',
-    'unpaid-executive-education',
-    'unpaid-bootcamp',
-  ];
-
-  const isEnrolled = (
-    enrollmentMode !== null
-    && enrollmentMode !== undefined
-    && [...VERIFIED_MODES, ...AUDIT_MODES].some(mode => mode === enrollmentMode)
-  );
-
-  const shouldDisplayChat = (
-    enabled
-    && (isEnrolled || isStaff) // display only to enrolled or staff
-  );
-
-  return (
-    <>
-      {/* Use a portal to ensure that component overlay does not compete with learning MFE styles. */}
-      {shouldDisplayChat && (createPortal(
-        <Xpert courseId={courseId} contentToolsEnabled={contentToolsEnabled} />,
-        document.body,
-      ))}
-    </>
-  );
-};
-
-Chat.propTypes = {
-  isStaff: PropTypes.bool.isRequired,
-  enabled: PropTypes.bool.isRequired,
-  enrollmentMode: PropTypes.string,
-  courseId: PropTypes.string.isRequired,
-  contentToolsEnabled: PropTypes.bool.isRequired,
-};
-
-Chat.defaultProps = {
-  enrollmentMode: null,
-};
-
-export default injectIntl(Chat);
--- a/src/courseware/course/chat/Chat.test.jsx
+++ b/src/courseware/course/chat/Chat.test.jsx
@@ -1,157 +0,0 @@
-import { BrowserRouter } from 'react-router-dom';
-import { configureStore } from '@reduxjs/toolkit';
-import React from 'react';
-
-import { reducer as learningAssistantReducer } from '@edx/frontend-lib-learning-assistant';
-
-import { initializeMockApp, render, screen } from '../../../setupTest';
-
-import Chat from './Chat';
-
-jest.mock('@edx/frontend-platform/analytics');
-
-initializeMockApp();
-
-const courseId = 'course-v1:edX+DemoX+Demo_Course';
-let testCases = [];
-let enabledTestCases = [];
-let disabledTestCases = [];
-const enabledModes = [
-  'professional', 'verified', 'no-id-professional', 'credit', 'masters', 'executive-education',
-  'paid-executive-education', 'paid-bootcamp', 'audit', 'honor', 'unpaid-executive-education', 'unpaid-bootcamp',
-];
-const disabledModes = [null, undefined, 'xyz'];
-
-describe('Chat', () => {
-  // Generate test cases.
-  enabledTestCases = enabledModes.map((mode) => ({ enrollmentMode: mode, isVisible: true }));
-  disabledTestCases = disabledModes.map((mode) => ({ enrollmentMode: mode, isVisible: false }));
-  testCases = enabledTestCases.concat(disabledTestCases);
-
-  testCases.forEach(test => {
-    it(
-      `visibility determined by ${test.enrollmentMode} enrollment mode when enabled and not isStaff`,
-      async () => {
-        const store = configureStore({
-          reducer: {
-            learningAssistant: learningAssistantReducer,
-          },
-        });
-
-        render(
-          <BrowserRouter>
-            <Chat
-              enrollmentMode={test.enrollmentMode}
-              isStaff={false}
-              enabled
-              courseId={courseId}
-              contentToolsEnabled={false}
-            />
-          </BrowserRouter>,
-          { store },
-        );
-
-        const chat = screen.queryByTestId('toggle-button');
-        if (test.isVisible) {
-          expect(chat).toBeInTheDocument();
-        } else {
-          expect(chat).not.toBeInTheDocument();
-        }
-      },
-    );
-  });
-
-  // Generate test cases.
-  testCases = enabledModes.concat(disabledModes).map((mode) => ({ enrollmentMode: mode, isVisible: true }));
-  testCases.forEach(test => {
-    it('visibility determined by isStaff when enabled and any enrollment mode', async () => {
-      const store = configureStore({
-        reducer: {
-          learningAssistant: learningAssistantReducer,
-        },
-      });
-
-      render(
-        <BrowserRouter>
-          <Chat
-            enrollmentMode={test.enrollmentMode}
-            isStaff
-            enabled
-            courseId={courseId}
-            contentToolsEnabled={false}
-          />
-        </BrowserRouter>,
-        { store },
-      );
-
-      const chat = screen.queryByTestId('toggle-button');
-      if (test.isVisible) {
-        expect(chat).toBeInTheDocument();
-      } else {
-        expect(chat).not.toBeInTheDocument();
-      }
-    });
-  });
-
-  // Generate the map function used for generating test cases by currying the map function.
-  // In this test suite, visibility depends on whether the enrollment mode is a valid or invalid
-  // enrollment mode for enabling the Chat when the user is not a staff member and the Chat is enabled. Instead of
-  // defining two separate map functions that differ in only one case, curry the function.
-  const generateMapFunction = (areEnabledModes) => (
-    (mode) => (
-      [
-        {
-          enrollmentMode: mode, isStaff: true, enabled: true, isVisible: true,
-        },
-        {
-          enrollmentMode: mode, isStaff: true, enabled: false, isVisible: false,
-        },
-        {
-          enrollmentMode: mode, isStaff: false, enabled: true, isVisible: areEnabledModes,
-        },
-        {
-          enrollmentMode: mode, isStaff: false, enabled: false, isVisible: false,
-        },
-      ]
-    )
-  );
-
-  // Generate test cases.
-  enabledTestCases = enabledModes.map(generateMapFunction(true));
-  disabledTestCases = disabledModes.map(generateMapFunction(false));
-  testCases = enabledTestCases.concat(disabledTestCases);
-  testCases = testCases.flat();
-  testCases.forEach(test => {
-    it(
-      `visibility determined by ${test.enabled} enabled when ${test.isStaff} isStaff
-      and ${test.enrollmentMode} enrollment mode`,
-      async () => {
-        const store = configureStore({
-          reducer: {
-            learningAssistant: learningAssistantReducer,
-          },
-        });
-
-        render(
-          <BrowserRouter>
-            <Chat
-              enrollmentMode={test.enrollmentMode}
-              isStaff={test.isStaff}
-              enabled={test.enabled}
-              courseId={courseId}
-              contentToolsEnabled={false}
-            />
-          </BrowserRouter>,
-          { store },
-        );
-
-        const chat = screen.queryByTestId('toggle-button');
-        if (test.isVisible) {
-          expect(chat).toBeInTheDocument();
-        } else {
-          expect(chat).not.toBeInTheDocument();
-        }
-      },
-    );
-  });
-});
--- a/src/courseware/course/chat/index.js
+++ b/src/courseware/course/chat/index.js
@@ -1 +0,0 @@
-export { default } from './Chat';
--- a/src/courseware/course/content-tools/ContentTools.jsx
+++ b/src/courseware/course/content-tools/ContentTools.jsx
@@ -1,32 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';

 import Calculator from './calculator';
 import NotesVisibility from './notes-visibility';

 const ContentTools = ({
  course,
-}) => {
-  const {
-    sidebarIsOpen,
-  } = useSelector(state => state.learningAssistant);
-
-  return (
-    !sidebarIsOpen && (
-      <div className="content-tools">
-        <div className="d-flex justify-content-end align-items-end m-0">
-          {course.showCalculator && (
-            <Calculator />
-          )}
-          {course.notes.enabled && (
-            <NotesVisibility course={course} />
-          )}
-        </div>
-      </div>
-    )
-  );
-};
+}) => (
+  <div className="content-tools">
+    <div className="d-flex justify-content-end align-items-end m-0">
+      {course.showCalculator && (
+      <Calculator />
+      )}
+      {course.notes.enabled && (
+      <NotesVisibility course={course} />
+      )}
+    </div>
+  </div>
+);

 ContentTools.propTypes = {
  course: PropTypes.shape({
--- a/src/courseware/course/content-tools/notes-visibility/NotesVisibility.jsx
+++ b/src/courseware/course/content-tools/notes-visibility/NotesVisibility.jsx
@@ -25,7 +25,7 @@ class NotesVisibility extends Component {
  }

  handleClick = () => {
-    const data = { visibility: !this.state.visible };
+    const data = { visibility: this.state.visible };
    getAuthenticatedHttpClient().put(
      this.visibilityUrl,
      data,
--- a/src/courseware/course/content-tools/notes-visibility/NotesVisibility.test.jsx
+++ b/src/courseware/course/content-tools/notes-visibility/NotesVisibility.test.jsx
@@ -85,7 +85,7 @@ describe('Notes Visibility', () => {

    expect(axiosMock.history.put).toHaveLength(1);
    expect(axiosMock.history.put[0].url).toEqual(visibilityUrl);
-    expect(axiosMock.history.put[0].data).toEqual(`{"visibility":${!mockData.course.notes.visible}}`);
+    expect(axiosMock.history.put[0].data).toEqual(`{"visibility":${mockData.course.notes.visible}}`);

    expect(screen.getByRole('switch', { name: 'Hide Notes' })).toBeInTheDocument();
  });
--- a/src/courseware/course/lti-modal/ChatTrigger.jsx
+++ b/src/courseware/course/lti-modal/ChatTrigger.jsx
@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  ModalDialog,
+  Icon,
+  useToggle,
+  OverlayTrigger,
+  Popover,
+} from '@edx/paragon';
+import { ChatBubbleOutline } from '@edx/paragon/icons';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import messages from './messages';
+
+const ChatTrigger = ({
+  intl,
+  enrollmentMode,
+  isStaff,
+  launchUrl,
+  courseId,
+}) => {
+  const [isOpen, open, close] = useToggle(false);
+  const [hasOpenedChat, setHasOpenedChat] = useState(false);
+  const { userId } = getAuthenticatedUser();
+
+  const VERIFIED_MODES = [
+    'professional',
+    'verified',
+    'no-id-professional',
+    'credit',
+    'masters',
+    'executive-education',
+  ];
+
+  const isVerifiedEnrollmentMode = (
+    enrollmentMode !== null
+    && enrollmentMode !== undefined
+    && VERIFIED_MODES.some(mode => mode === enrollmentMode)
+  );
+
+  const shouldDisplayChat = (
+    launchUrl
+    && (isVerifiedEnrollmentMode || isStaff) // display only to non-audit or staff
+  );
+
+  const handleOpen = () => {
+    if (!hasOpenedChat) {
+      setHasOpenedChat(true);
+    }
+    open();
+    sendTrackEvent('edx.ui.lms.lti_modal.opened', {
+      course_id: courseId,
+      user_id: userId,
+      is_staff: isStaff,
+    });
+  };
+
+  return (
+    <>
+      {shouldDisplayChat && (
+        <div
+          className={classNames('mt-3', 'd-flex', 'ml-auto')}
+        >
+          <OverlayTrigger
+            trigger="click"
+            key="top"
+            show={!hasOpenedChat}
+            overlay={(
+              <Popover id="popover-chat-information">
+                <Popover.Title as="h3">{intl.formatMessage(messages.popoverTitle)}</Popover.Title>
+                <Popover.Content>
+                  {intl.formatMessage(messages.popoverContent)}
+                </Popover.Content>
+              </Popover>
+            )}
+          >
+            <button
+              className="border border-light-400 bg-transparent align-items-center align-content-center d-flex"
+              type="button"
+              onClick={handleOpen}
+              aria-label={intl.formatMessage(messages.openChatModalTrigger)}
+            >
+              <div className="icon-container d-flex position-relative align-items-center">
+                <Icon src={ChatBubbleOutline} className="m-0 m-auto" />
+              </div>
+            </button>
+          </OverlayTrigger>
+          <ModalDialog
+            onClose={close}
+            isOpen={isOpen}
+            title={intl.formatMessage(messages.modalTitle)}
+            size="xl"
+            hasCloseButton
+          >
+            <ModalDialog.Header>
+              <ModalDialog.Title>
+                {intl.formatMessage(messages.modalTitle)}
+              </ModalDialog.Title>
+            </ModalDialog.Header>
+            <ModalDialog.Body>
+              <iframe
+                src={launchUrl}
+                allowFullScreen
+                style={{
+                  width: '100%',
+                  height: '60vh',
+                }}
+                title={intl.formatMessage(messages.modalTitle)}
+              />
+            </ModalDialog.Body>
+          </ModalDialog>
+        </div>
+      )}
+    </>
+  );
+};
+
+ChatTrigger.propTypes = {
+  intl: intlShape.isRequired,
+  isStaff: PropTypes.bool.isRequired,
+  enrollmentMode: PropTypes.string,
+  launchUrl: PropTypes.string,
+  courseId: PropTypes.string.isRequired,
+};
+
+ChatTrigger.defaultProps = {
+  launchUrl: null,
+  enrollmentMode: null,
+};
+
+export default injectIntl(ChatTrigger);
--- a/src/courseware/course/lti-modal/ChatTrigger.test.jsx
+++ b/src/courseware/course/lti-modal/ChatTrigger.test.jsx
@@ -0,0 +1,88 @@
+import { render } from '@testing-library/react';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { BrowserRouter } from 'react-router-dom';
+import React from 'react';
+import ChatTrigger from './ChatTrigger';
+import { act, fireEvent, screen } from '../../../setupTest';
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedUser: jest.fn(() => ({ userId: 1 })),
+}));
+jest.mock('@edx/frontend-platform/analytics');
+
+describe('ChatTrigger', () => {
+  it('handles click to open/close chat modal', async () => {
+    sendTrackEvent.mockClear();
+    render(
+      <IntlProvider>
+        <BrowserRouter>
+          <ChatTrigger
+            enrollmentMode={null}
+            isStaff
+            launchUrl="https://testurl.org"
+            courseId="course-edX"
+          />
+        </BrowserRouter>,
+      </IntlProvider>,
+    );
+
+    const chatTrigger = screen.getByRole('button', { name: /Show chat modal/i });
+    expect(chatTrigger).toBeInTheDocument();
+    expect(screen.queryByText('Need help understanding course content?')).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(chatTrigger);
+    });
+    const modalCloseButton = screen.getByRole('button', { name: /Close/i });
+    await expect(modalCloseButton).toBeInTheDocument();
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.lti_modal.opened', {
+      course_id: 'course-edX',
+      user_id: 1,
+      is_staff: true,
+    });
+
+    await act(async () => {
+      fireEvent.click(modalCloseButton);
+    });
+    await expect(modalCloseButton).not.toBeInTheDocument();
+    expect(screen.queryByText('Need help understanding course content?')).not.toBeInTheDocument();
+  });
+
+  const testCases = [
+    { enrollmentMode: null, isVisible: false },
+    { enrollmentMode: undefined, isVisible: false },
+    { enrollmentMode: 'audit', isVisible: false },
+    { enrollmentMode: 'xyz', isVisible: false },
+    { enrollmentMode: 'professional', isVisible: true },
+    { enrollmentMode: 'verified', isVisible: true },
+    { enrollmentMode: 'no-id-professional', isVisible: true },
+    { enrollmentMode: 'credit', isVisible: true },
+    { enrollmentMode: 'masters', isVisible: true },
+    { enrollmentMode: 'executive-education', isVisible: true },
+  ];
+
+  testCases.forEach(test => {
+    it(`does chat to be visible based on enrollment mode of ${test.enrollmentMode}`, async () => {
+      render(
+        <IntlProvider>
+          <BrowserRouter>
+            <ChatTrigger
+              enrollmentMode={test.enrollmentMode}
+              isStaff={false}
+              launchUrl="https://testurl.org"
+            />
+          </BrowserRouter>,
+        </IntlProvider>,
+      );
+
+      const chatTrigger = screen.queryByRole('button', { name: /Show chat modal/i });
+      if (test.isVisible) {
+        expect(chatTrigger).toBeInTheDocument();
+      } else {
+        expect(chatTrigger).not.toBeInTheDocument();
+      }
+    });
+  });
+});
--- a/src/courseware/course/lti-modal/index.js
+++ b/src/courseware/course/lti-modal/index.js
@@ -0,0 +1 @@
+export { default } from './ChatTrigger';
--- a/src/courseware/course/lti-modal/messages.js
+++ b/src/courseware/course/lti-modal/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  popoverTitle: {
+    id: 'popover.title',
+    defaultMessage: 'Need help understanding course content?',
+    description: 'Title for popover alerting user of chat modal',
+  },
+  popoverContent: {
+    id: 'popover.content',
+    defaultMessage: 'Click here for your Xpert Learning Assistant.',
+    description: 'Content of the popover message',
+  },
+  openChatModalTrigger: {
+    id: 'chat.model.trigger',
+    defaultMessage: 'Show chat modal',
+    description: 'Alt text for button that opens the chat modal',
+  },
+  modalTitle: {
+    id: 'chat.model.title',
+    defaultMessage: 'Xpert Learning Assistant',
+    description: 'Title for chat modal header',
+  },
+});
+
+export default messages;
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -10,6 +10,7 @@ import {
 } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
+import { history } from '@edx/frontend-platform';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import { breakpoints, useWindowSize } from '@edx/paragon';

@@ -138,6 +139,9 @@ const Sequence = ({
  }

  const gated = sequence && sequence.gatedContent !== undefined && sequence.gatedContent.gated;
+  const goToCourseExitPage = () => {
+    history.push(`/course/${courseId}/course-end`);
+  };

  const defaultContent = (
    <div className="sequence-container d-inline-flex flex-row">
@@ -146,7 +150,7 @@ const Sequence = ({
          sequenceId={sequenceId}
          unitId={unitId}
          className="mb-4"
-          nextHandler={() => {
+          nextSequenceHandler={() => {
            logEvent('edx.ui.lms.sequence.next_selected', 'top');
            handleNext();
          }}
@@ -154,10 +158,11 @@ const Sequence = ({
            logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
            handleNavigate(destinationUnitId);
          }}
-          previousHandler={() => {
+          previousSequenceHandler={() => {
            logEvent('edx.ui.lms.sequence.previous_selected', 'top');
            handlePrevious();
          }}
+          goToCourseExitPage={() => goToCourseExitPage()}
        />
        {shouldDisplayNotificationTriggerInSequence && <SidebarTriggers />}

@@ -181,6 +186,7 @@ const Sequence = ({
              logEvent('edx.ui.lms.sequence.next_selected', 'bottom');
              handleNext();
            }}
+            goToCourseExitPage={() => goToCourseExitPage()}
          />
          )}
        </div>
--- a/src/courseware/course/sequence/Sequence.test.jsx
+++ b/src/courseware/course/sequence/Sequence.test.jsx
@@ -46,7 +46,6 @@ describe('Sequence', () => {

    expect(screen.getByText('There is no content here.')).toBeInTheDocument();
    expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    expect(screen.queryByRole('link')).not.toBeInTheDocument();
  });

  it('renders correctly for gated content', async () => {
@@ -75,10 +74,8 @@ describe('Sequence', () => {
    );

    await waitFor(() => expect(screen.queryByText('Loading locked content messaging...')).toBeInTheDocument());
-    // `Previous`, `Prerequisite` and `Close Tray` buttons.
-    expect(screen.getAllByRole('button').length).toEqual(3);
-    // `Active` and `Next` buttons.
-    expect(screen.getAllByRole('link').length).toEqual(2);
+    // `Previous`, `Active`, `Next`, `Prerequisite` and `Close Tray` buttons.
+    expect(screen.getAllByRole('button').length).toEqual(5);

    expect(screen.getByText('Content Locked')).toBeInTheDocument();
    const unitContainer = container.querySelector('.unit-container');
@@ -115,7 +112,6 @@ describe('Sequence', () => {

    // No normal content or navigation should be rendered. Just the above alert.
    expect(screen.queryAllByRole('button').length).toEqual(0);
-    expect(screen.queryAllByRole('link').length).toEqual(1);
  });

  it('displays error message on sequence load failure', async () => {
@@ -129,16 +125,13 @@ describe('Sequence', () => {
  it('handles loading unit', async () => {
    render(<Sequence {...mockData} />);
    expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();
-    // `Previous`, `Bookmark` and `Close Tray` buttons
-    expect(screen.getAllByRole('button')).toHaveLength(3);
-    // Renders `Next` button plus one button for each unit.
-    expect(screen.getAllByRole('link')).toHaveLength(1 + unitBlocks.length);
+    // Renders navigation buttons plus one button for each unit.
+    expect(screen.getAllByRole('button')).toHaveLength(4 + unitBlocks.length);

    loadUnit();
    await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());
    // At this point there will be 2 `Previous` and 2 `Next` buttons.
-    expect(screen.getAllByRole('button', { name: /previous/i }).length).toEqual(2);
-    expect(screen.getAllByRole('link', { name: /next/i }).length).toEqual(2);
+    expect(screen.getAllByRole('button', { name: /previous|next/i }).length).toEqual(4);
  });

  describe('sequence and unit navigation buttons', () => {
@@ -170,7 +163,7 @@ describe('Sequence', () => {
      render(<Sequence {...testData} />, { store: testStore });
      expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();

-      const sequencePreviousButton = screen.getByRole('link', { name: /previous/i });
+      const sequencePreviousButton = screen.getByRole('button', { name: /previous/i });
      fireEvent.click(sequencePreviousButton);
      expect(testData.previousSequenceHandler).toHaveBeenCalledTimes(1);
      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
@@ -183,7 +176,7 @@ describe('Sequence', () => {

      loadUnit();
      await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());
-      const unitPreviousButton = screen.getAllByRole('link', { name: /previous/i })
+      const unitPreviousButton = screen.getAllByRole('button', { name: /previous/i })
        .filter(button => button !== sequencePreviousButton)[0];
      fireEvent.click(unitPreviousButton);
      expect(testData.previousSequenceHandler).toHaveBeenCalledTimes(2);
@@ -206,7 +199,7 @@ describe('Sequence', () => {
      render(<Sequence {...testData} />, { store: testStore });
      expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();

-      const sequenceNextButton = screen.getByRole('link', { name: /next/i });
+      const sequenceNextButton = screen.getByRole('button', { name: /next/i });
      fireEvent.click(sequenceNextButton);
      expect(testData.nextSequenceHandler).toHaveBeenCalledTimes(1);
      expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.next_selected', {
@@ -218,7 +211,7 @@ describe('Sequence', () => {

      loadUnit();
      await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());
-      const unitNextButton = screen.getAllByRole('link', { name: /next/i })
+      const unitNextButton = screen.getAllByRole('button', { name: /next/i })
        .filter(button => button !== sequenceNextButton)[0];
      fireEvent.click(unitNextButton);
      expect(testData.nextSequenceHandler).toHaveBeenCalledTimes(2);
@@ -244,11 +237,11 @@ describe('Sequence', () => {
      render(<Sequence {...testData} />, { store: testStore });
      await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).toBeInTheDocument());

-      fireEvent.click(screen.getByRole('link', { name: /previous/i }));
+      fireEvent.click(screen.getByRole('button', { name: /previous/i }));
      expect(testData.previousSequenceHandler).not.toHaveBeenCalled();
      expect(testData.unitNavigationHandler).toHaveBeenCalledWith(unitBlocks[unitNumber - 1].id);

-      fireEvent.click(screen.getByRole('link', { name: /next/i }));
+      fireEvent.click(screen.getByRole('button', { name: /next/i }));
      expect(testData.nextSequenceHandler).not.toHaveBeenCalled();
      // As `previousSequenceHandler` and `nextSequenceHandler` are mocked, we aren't really changing the position here.
      // Therefore the next unit will still be `the initial one + 1`.
@@ -330,11 +323,11 @@ describe('Sequence', () => {
      loadUnit();
      await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());

-      screen.getAllByRole('link', { name: /previous/i }).forEach(button => fireEvent.click(button));
+      screen.getAllByRole('button', { name: /previous/i }).forEach(button => fireEvent.click(button));
      expect(testData.previousSequenceHandler).toHaveBeenCalledTimes(2);
      expect(testData.unitNavigationHandler).not.toHaveBeenCalled();

-      screen.getAllByRole('link', { name: /next/i }).forEach(button => fireEvent.click(button));
+      screen.getAllByRole('button', { name: /next/i }).forEach(button => fireEvent.click(button));
      expect(testData.nextSequenceHandler).toHaveBeenCalledTimes(2);
      expect(testData.unitNavigationHandler).not.toHaveBeenCalled();

@@ -377,7 +370,7 @@ describe('Sequence', () => {
      render(<Sequence {...testData} />, { store: testStore });
      await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).toBeInTheDocument());

-      fireEvent.click(screen.getByRole('link', { name: targetUnit.display_name }));
+      fireEvent.click(screen.getByRole('button', { name: targetUnit.display_name }));
      expect(testData.unitNavigationHandler).toHaveBeenCalledWith(targetUnit.id);
      expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.tab_selected', {
        current_tab: currentTabNumber,
--- a/src/courseware/course/sequence/Unit/hooks/useExamAccess.js
+++ b/src/courseware/course/sequence/Unit/hooks/useExamAccess.js
@@ -16,7 +16,7 @@ const useExamAccess = ({
  const [blockAccess, setBlockAccess] = useKeyedState(stateKeys.blockAccess, isExam());
  React.useEffect(() => {
    if (isExam()) {
-      fetchExamAccess()
+      return fetchExamAccess()
        .finally(() => {
          const examAccess = getExamAccess();
          setAccessToken(examAccess);
@@ -26,6 +26,7 @@ const useExamAccess = ({
          logError(error);
        });
    }
+    return undefined;
  }, [id]);

  return {
--- a/src/courseware/course/sequence/Unit/hooks/useExamAccess.test.js
+++ b/src/courseware/course/sequence/Unit/hooks/useExamAccess.test.js
@@ -4,7 +4,6 @@ import { mockUseKeyedState } from '@edx/react-unit-test-utils';
 import { getExamAccess, fetchExamAccess, isExam } from '@edx/frontend-lib-special-exams';
 import { isEqual } from 'lodash';

-import { waitFor } from '../../../../../setupTest';
 import useExamAccess, { stateKeys } from './useExamAccess';

 const getEffect = (prereqs) => {
@@ -56,19 +55,18 @@ describe('useExamAccess hook', () => {
      state.expectInitializedWith(stateKeys.blockAccess, true);
    });
    describe('effects - on id change', () => {
-      let useEffectCb;
+      let cb;
      beforeEach(() => {
        useExamAccess({ id });
-        useEffectCb = getEffect([id], React);
+        cb = getEffect([id], React);
      });
      it('does not call fetchExamAccess if not an exam', () => {
-        useEffectCb();
+        cb();
        expect(fetchExamAccess).not.toHaveBeenCalled();
      });
      it('fetches and sets exam access if isExam', async () => {
        isExam.mockReturnValueOnce(true);
-        useEffectCb();
-        await waitFor(() => expect(fetchExamAccess).toHaveBeenCalled());
+        await cb();
        state.expectSetStateCalledWith(stateKeys.accessToken, testAccessToken);
        state.expectSetStateCalledWith(stateKeys.blockAccess, false);
      });
@@ -76,8 +74,7 @@ describe('useExamAccess hook', () => {
      it('logs error if fetchExamAccess fails', async () => {
        isExam.mockReturnValueOnce(true);
        fetchExamAccess.mockReturnValueOnce(Promise.reject(testError));
-        useEffectCb();
-        await waitFor(() => expect(fetchExamAccess).toHaveBeenCalled());
+        await cb();
        expect(logError).toHaveBeenCalledWith(testError);
      });
    });
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { breakpoints, Button, useWindowSize } from '@edx/paragon';
 import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
@@ -27,13 +26,12 @@ const SequenceNavigation = ({
  sequenceId,
  className,
  onNavigate,
-  nextHandler,
-  previousHandler,
+  nextSequenceHandler,
+  previousSequenceHandler,
+  goToCourseExitPage,
 }) => {
  const sequence = useModel('sequences', sequenceId);
-  const {
-    isFirstUnit, isLastUnit, nextLink, previousLink,
-  } = useSequenceNavigationMetadata(sequenceId, unitId);
+  const { isFirstUnit, isLastUnit } = useSequenceNavigationMetadata(sequenceId, unitId);
  const {
    courseId,
    sequenceStatus,
@@ -65,49 +63,27 @@ const SequenceNavigation = ({
    );
  };

-  const renderPreviousButton = () => {
-    const disabled = isFirstUnit;
-    const prevArrow = isRtl(getLocale()) ? ChevronRight : ChevronLeft;
-
-    return (
-      <Button
-        variant="link"
-        className="previous-btn"
-        onClick={previousHandler}
-        disabled={disabled}
-        iconBefore={prevArrow}
-        as={disabled ? undefined : Link}
-        to={disabled ? undefined : previousLink}
-      >
-        {shouldDisplayNotificationTriggerInSequence ? null : intl.formatMessage(messages.previousButton)}
-      </Button>
-    );
-  };
-
  const renderNextButton = () => {
    const { exitActive, exitText } = GetCourseExitNavigation(courseId, intl);
+    const buttonOnClick = isLastUnit ? goToCourseExitPage : nextSequenceHandler;
    const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton);
    const disabled = isLastUnit && !exitActive;
    const nextArrow = isRtl(getLocale()) ? ChevronLeft : ChevronRight;

    return (
-      <Button
-        variant="link"
-        className="next-btn"
-        onClick={nextHandler}
-        disabled={disabled}
-        iconAfter={nextArrow}
-        as={disabled ? undefined : Link}
-        to={disabled ? undefined : nextLink}
-      >
+      <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled} iconAfter={nextArrow}>
        {shouldDisplayNotificationTriggerInSequence ? null : buttonText}
      </Button>
    );
  };

+  const prevArrow = isRtl(getLocale()) ? ChevronRight : ChevronLeft;
+
  return sequenceStatus === LOADED && (
    <nav id="courseware-sequenceNavigation" className={classNames('sequence-navigation', className)} style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}>
-      {renderPreviousButton()}
+      <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit} iconBefore={prevArrow}>
+        {shouldDisplayNotificationTriggerInSequence ? null : intl.formatMessage(messages.previousButton)}
+      </Button>
      {renderUnitButtons()}
      {renderNextButton()}

@@ -121,8 +97,9 @@ SequenceNavigation.propTypes = {
  unitId: PropTypes.string,
  className: PropTypes.string,
  onNavigate: PropTypes.func.isRequired,
-  nextHandler: PropTypes.func.isRequired,
-  previousHandler: PropTypes.func.isRequired,
+  nextSequenceHandler: PropTypes.func.isRequired,
+  previousSequenceHandler: PropTypes.func.isRequired,
+  goToCourseExitPage: PropTypes.func.isRequired,
 };

 SequenceNavigation.defaultProps = {
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx
@@ -25,9 +25,10 @@ describe('Sequence Navigation', () => {
    mockData = {
      unitId: unitBlocks[1].id,
      sequenceId: courseware.sequenceId,
-      previousHandler: () => {},
+      previousSequenceHandler: () => {},
      onNavigate: () => {},
-      nextHandler: () => {},
+      nextSequenceHandler: () => {},
+      goToCourseExitPage: () => {},
    };
  });

@@ -76,7 +77,7 @@ describe('Sequence Navigation', () => {
    const onNavigate = jest.fn();
    render(<SequenceNavigation {...mockData} {...{ onNavigate }} />);

-    const unitButtons = screen.getAllByRole('link', { name: /\d+/ });
+    const unitButtons = screen.getAllByRole('button', { name: /\d+/ });
    expect(unitButtons).toHaveLength(unitButtons.length);
    unitButtons.forEach(button => fireEvent.click(button));
    expect(onNavigate).toHaveBeenCalledTimes(unitButtons.length);
@@ -85,7 +86,7 @@ describe('Sequence Navigation', () => {
  it('has both navigation buttons enabled for a non-corner unit of the sequence', () => {
    render(<SequenceNavigation {...mockData} />);

-    screen.getAllByRole('link', { name: /previous|next/i }).forEach(button => {
+    screen.getAllByRole('button', { name: /previous|next/i }).forEach(button => {
      expect(button).toBeEnabled();
    });
  });
@@ -94,7 +95,7 @@ describe('Sequence Navigation', () => {
    render(<SequenceNavigation {...mockData} unitId={unitBlocks[0].id} />);

    expect(screen.getByRole('button', { name: /previous/i })).toBeDisabled();
-    expect(screen.getByRole('link', { name: /next/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /next/i })).toBeEnabled();
  });

  it('has the "Next" button disabled for the last unit of the sequence if there is no Exit page', async () => {
@@ -109,7 +110,7 @@ describe('Sequence Navigation', () => {
      { store: testStore },
    );

-    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
    expect(screen.getByRole('button', { name: /next/i })).toBeDisabled();
  });

@@ -125,8 +126,8 @@ describe('Sequence Navigation', () => {
      { store: testStore },
    );

-    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
-    expect(screen.getByRole('link', { name: /next \(end of course\)/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /next \(end of course\)/i })).toBeEnabled();
  });

  it('displays complete course message instead of the "Next" button as needed', async () => {
@@ -146,19 +147,19 @@ describe('Sequence Navigation', () => {
      { store: testStore },
    );

-    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
-    expect(screen.getByRole('link', { name: /Complete the course/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /Complete the course/i })).toBeEnabled();
  });

  it('handles "Previous" and "Next" click', () => {
-    const previousHandler = jest.fn();
-    const nextHandler = jest.fn();
-    render(<SequenceNavigation {...mockData} {...{ previousHandler, nextHandler }} />);
+    const previousSequenceHandler = jest.fn();
+    const nextSequenceHandler = jest.fn();
+    render(<SequenceNavigation {...mockData} {...{ previousSequenceHandler, nextSequenceHandler }} />);

-    fireEvent.click(screen.getByRole('link', { name: /previous/i }));
-    expect(previousHandler).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByRole('button', { name: /previous/i }));
+    expect(previousSequenceHandler).toHaveBeenCalledTimes(1);

-    fireEvent.click(screen.getByRole('link', { name: /next/i }));
-    expect(nextHandler).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByRole('button', { name: /next/i }));
+    expect(nextSequenceHandler).toHaveBeenCalledTimes(1);
  });
 });
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.test.jsx
@@ -47,7 +47,7 @@ describe('Sequence Navigation Dropdown', () => {
      });
      const dropdownMenu = container.querySelector('.dropdown-menu');
      // Only the current unit should be marked as active.
-      getAllByRole(dropdownMenu, 'link', { hidden: true }).forEach(button => {
+      getAllByRole(dropdownMenu, 'button', { hidden: true }).forEach(button => {
        if (button.textContent === unit.display_name) {
          expect(button).toHaveClass('active');
        } else {
@@ -66,7 +66,7 @@ describe('Sequence Navigation Dropdown', () => {
      fireEvent.click(dropdownToggle);
    });
    const dropdownMenu = container.querySelector('.dropdown-menu');
-    getAllByRole(dropdownMenu, 'link', { hidden: true }).forEach(button => fireEvent.click(button));
+    getAllByRole(dropdownMenu, 'button', { hidden: true }).forEach(button => fireEvent.click(button));
    expect(onNavigate).toHaveBeenCalledTimes(unitBlocks.length);
    unitBlocks.forEach((unit, index) => {
      expect(onNavigate).toHaveBeenNthCalledWith(index + 1, unit.id);
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx
@@ -43,7 +43,7 @@ describe('Sequence Navigation Tabs', () => {
    useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
    render(<SequenceNavigationTabs {...mockData} />);

-    expect(screen.getAllByRole('link')).toHaveLength(unitBlocks.length);
+    expect(screen.getAllByRole('button')).toHaveLength(unitBlocks.length);
  });

  it('renders unit buttons and dropdown button', async () => {
@@ -60,8 +60,8 @@ describe('Sequence Navigation Tabs', () => {
      await fireEvent.click(dropdownToggle);
    });
    const dropdownMenu = container.querySelector('.dropdown');
-    const dropdownButtons = getAllByRole(dropdownMenu, 'link');
-    expect(dropdownButtons).toHaveLength(unitBlocks.length);
+    const dropdownButtons = getAllByRole(dropdownMenu, 'button');
+    expect(dropdownButtons).toHaveLength(unitBlocks.length + 1);
    expect(screen.getByRole('button', { name: `${activeBlockNumber} of ${unitBlocks.length}` }))
      .toHaveClass('dropdown-toggle');
  });
--- a/src/courseware/course/sequence/sequence-navigation/UnitButton.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/UnitButton.jsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
-import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { connect, useSelector } from 'react-redux';
+import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { Button } from '@edx/paragon';

@@ -21,8 +20,6 @@ const UnitButton = ({
  className,
  showTitle,
 }) => {
-  const { courseId, sequenceId } = useSelector(state => state.courseware);
-
  const handleClick = useCallback(() => {
    onClick(unitId);
  }, [onClick, unitId]);
@@ -36,8 +33,6 @@ const UnitButton = ({
      variant="link"
      onClick={handleClick}
      title={title}
-      as={Link}
-      to={`/course/${courseId}/${sequenceId}/${unitId}`}
    >
      <UnitIcon type={contentType} />
      {showTitle && <span className="unit-title">{title}</span>}
--- a/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx
@@ -33,12 +33,12 @@ describe('Unit Button', () => {

  it('hides title by default', () => {
    render(<UnitButton {...mockData} />);
-    expect(screen.getByRole('link')).not.toHaveTextContent(unit.display_name);
+    expect(screen.getByRole('button')).not.toHaveTextContent(unit.display_name);
  });

  it('shows title', () => {
    render(<UnitButton {...mockData} showTitle />);
-    expect(screen.getByRole('link')).toHaveTextContent(unit.display_name);
+    expect(screen.getByRole('button')).toHaveTextContent(unit.display_name);
  });

  it('does not show completion for non-completed unit', () => {
@@ -79,7 +79,7 @@ describe('Unit Button', () => {
  it('handles the click', () => {
    const onClick = jest.fn();
    render(<UnitButton {...mockData} onClick={onClick} />);
-    fireEvent.click(screen.getByRole('link'));
+    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
 });
--- a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Button } from '@edx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -21,32 +20,14 @@ const UnitNavigation = ({
  unitId,
  onClickPrevious,
  onClickNext,
+  goToCourseExitPage,
 }) => {
-  const {
-    isFirstUnit, isLastUnit, nextLink, previousLink,
-  } = useSequenceNavigationMetadata(sequenceId, unitId);
+  const { isFirstUnit, isLastUnit } = useSequenceNavigationMetadata(sequenceId, unitId);
  const { courseId } = useSelector(state => state.courseware);

-  const renderPreviousButton = () => {
-    const disabled = isFirstUnit;
-    const prevArrow = isRtl(getLocale()) ? faChevronRight : faChevronLeft;
-    return (
-      <Button
-        variant="outline-secondary"
-        className="previous-button mr-2 d-flex align-items-center justify-content-center"
-        disabled={disabled}
-        onClick={onClickPrevious}
-        as={disabled ? undefined : Link}
-        to={disabled ? undefined : previousLink}
-      >
-        <FontAwesomeIcon icon={prevArrow} className="mr-2" size="sm" />
-        {intl.formatMessage(messages.previousButton)}
-      </Button>
-    );
-  };
-
  const renderNextButton = () => {
    const { exitActive, exitText } = GetCourseExitNavigation(courseId, intl);
+    const buttonOnClick = isLastUnit ? goToCourseExitPage : onClickNext;
    const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton);
    const disabled = isLastUnit && !exitActive;
    const nextArrow = isRtl(getLocale()) ? faChevronLeft : faChevronRight;
@@ -54,10 +35,8 @@ const UnitNavigation = ({
      <Button
        variant="outline-primary"
        className="next-button d-flex align-items-center justify-content-center"
-        onClick={onClickNext}
+        onClick={buttonOnClick}
        disabled={disabled}
-        as={disabled ? undefined : Link}
-        to={disabled ? undefined : nextLink}
      >
        <UnitNavigationEffortEstimate sequenceId={sequenceId} unitId={unitId}>
          {buttonText}
@@ -67,9 +46,18 @@ const UnitNavigation = ({
    );
  };

+  const prevArrow = isRtl(getLocale()) ? faChevronRight : faChevronLeft;
  return (
    <div className="unit-navigation d-flex">
-      {renderPreviousButton()}
+      <Button
+        variant="outline-secondary"
+        className="previous-button mr-2 d-flex align-items-center justify-content-center"
+        disabled={isFirstUnit}
+        onClick={onClickPrevious}
+      >
+        <FontAwesomeIcon icon={prevArrow} className="mr-2" size="sm" />
+        {intl.formatMessage(messages.previousButton)}
+      </Button>
      {renderNextButton()}
    </div>
  );
@@ -81,6 +69,7 @@ UnitNavigation.propTypes = {
  unitId: PropTypes.string,
  onClickPrevious: PropTypes.func.isRequired,
  onClickNext: PropTypes.func.isRequired,
+  goToCourseExitPage: PropTypes.func.isRequired,
 };

 UnitNavigation.defaultProps = {
--- a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx
@@ -22,6 +22,7 @@ describe('Unit Navigation', () => {
      sequenceId: courseware.sequenceId,
      onClickPrevious: () => {},
      onClickNext: () => {},
+      goToCourseExitPage: () => {},
    };
  });

@@ -35,7 +36,7 @@ describe('Unit Navigation', () => {
    />);

    // Only "Previous" and "Next" buttons should be rendered.
-    expect(screen.getAllByRole('link')).toHaveLength(2);
+    expect(screen.getAllByRole('button')).toHaveLength(2);
  });

  it('handles the clicks', () => {
@@ -44,21 +45,23 @@ describe('Unit Navigation', () => {

    render(<UnitNavigation
      {...mockData}
+      sequenceId=""
+      unitId=""
      onClickPrevious={onClickPrevious}
      onClickNext={onClickNext}
    />);

-    fireEvent.click(screen.getByRole('link', { name: /previous/i }));
+    fireEvent.click(screen.getByRole('button', { name: /previous/i }));
    expect(onClickPrevious).toHaveBeenCalledTimes(1);

-    fireEvent.click(screen.getByRole('link', { name: /next/i }));
+    fireEvent.click(screen.getByRole('button', { name: /next/i }));
    expect(onClickNext).toHaveBeenCalledTimes(1);
  });

  it('has the navigation buttons enabled for the non-corner unit in the sequence', () => {
    render(<UnitNavigation {...mockData} />);

-    screen.getAllByRole('link').forEach(button => {
+    screen.getAllByRole('button').forEach(button => {
      expect(button).toBeEnabled();
    });
  });
@@ -67,7 +70,7 @@ describe('Unit Navigation', () => {
    render(<UnitNavigation {...mockData} unitId={unitBlocks[0].id} />);

    expect(screen.getByRole('button', { name: /previous/i })).toBeDisabled();
-    expect(screen.getByRole('link', { name: /next/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /next/i })).toBeEnabled();
  });

  it('has the "Next" button disabled for the last unit in the sequence if there is no Exit Page', async () => {
@@ -82,7 +85,7 @@ describe('Unit Navigation', () => {
      { store: testStore },
    );

-    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
    expect(screen.getByRole('button', { name: /next/i })).toBeDisabled();
  });

@@ -98,8 +101,8 @@ describe('Unit Navigation', () => {
      { store: testStore },
    );

-    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
-    expect(screen.getByRole('link', { name: /next \(end of course\)/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /next \(end of course\)/i })).toBeEnabled();
  });

  it('displays complete course message instead of the "Next" button as needed', async () => {
@@ -119,7 +122,7 @@ describe('Unit Navigation', () => {
      { store: testStore },
    );

-    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
-    expect(screen.getByRole('link', { name: /Complete the course/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /Complete the course/i })).toBeEnabled();
  });
 });
--- a/src/courseware/course/sequence/sequence-navigation/hooks.js
+++ b/src/courseware/course/sequence/sequence-navigation/hooks.js
@@ -7,7 +7,6 @@ import { sequenceIdsSelector } from '../../../data';
 export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId) {
  const sequenceIds = useSelector(sequenceIdsSelector);
  const sequence = useModel('sequences', currentSequenceId);
-  const courseId = useSelector(state => state.courseware.courseId);
  const courseStatus = useSelector(state => state.courseware.courseStatus);
  const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);

@@ -15,43 +14,12 @@ export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId)
  if (courseStatus !== 'loaded' || sequenceStatus !== 'loaded' || !currentSequenceId || !currentUnitId) {
    return { isFirstUnit: false, isLastUnit: false };
  }
-
-  const sequenceIndex = sequenceIds.indexOf(currentSequenceId);
-  const unitIndex = sequence.unitIds.indexOf(currentUnitId);
-
-  const isFirstSequence = sequenceIndex === 0;
-  const isFirstUnitInSequence = unitIndex === 0;
+  const isFirstSequence = sequenceIds.indexOf(currentSequenceId) === 0;
+  const isFirstUnitInSequence = sequence.unitIds.indexOf(currentUnitId) === 0;
  const isFirstUnit = isFirstSequence && isFirstUnitInSequence;
-  const isLastSequence = sequenceIndex === sequenceIds.length - 1;
-  const isLastUnitInSequence = unitIndex === sequence.unitIds.length - 1;
+  const isLastSequence = sequenceIds.indexOf(currentSequenceId) === sequenceIds.length - 1;
+  const isLastUnitInSequence = sequence.unitIds.indexOf(currentUnitId) === sequence.unitIds.length - 1;
  const isLastUnit = isLastSequence && isLastUnitInSequence;

-  const nextSequenceId = sequenceIndex < sequenceIds.length - 1 ? sequenceIds[sequenceIndex + 1] : null;
-  const previousSequenceId = sequenceIndex > 0 ? sequenceIds[sequenceIndex - 1] : null;
-
-  let nextLink;
-  if (isLastUnit) {
-    nextLink = `/course/${courseId}/course-end`;
-  } else {
-    const nextIndex = unitIndex + 1;
-    if (nextIndex < sequence.unitIds.length) {
-      const nextUnitId = sequence.unitIds[nextIndex];
-      nextLink = `/course/${courseId}/${currentSequenceId}/${nextUnitId}`;
-    } else if (nextSequenceId) {
-      nextLink = `/course/${courseId}/${nextSequenceId}/first`;
-    }
-  }
-
-  let previousLink;
-  const previousIndex = unitIndex - 1;
-  if (previousIndex >= 0) {
-    const previousUnitId = sequence.unitIds[previousIndex];
-    previousLink = `/course/${courseId}/${currentSequenceId}/${previousUnitId}`;
-  } else if (previousSequenceId) {
-    previousLink = `/course/${courseId}/${previousSequenceId}/last`;
-  }
-
-  return {
-    isFirstUnit, isLastUnit, nextLink, previousLink,
-  };
+  return { isFirstUnit, isLastUnit };
 }
--- a/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx
+++ b/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx
@@ -3,7 +3,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Icon } from '@edx/paragon';
 import { QuestionAnswer } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useModel } from '../../../../../generic/model-store';
 import { getCourseDiscussionTopics } from '../../../../data/thunks';
@@ -23,16 +23,12 @@ const DiscussionsTrigger = ({
    courseId,
  } = useContext(SidebarContext);
  const dispatch = useDispatch();
-  const { tabs } = useModel('courseHomeMeta', courseId);
  const topic = useModel('discussionTopics', unitId);
  const baseUrl = getConfig().DISCUSSIONS_MFE_BASE_URL;
-  const edxProvider = useMemo(
-    () => tabs?.find(tab => tab.slug === 'discussion'),
-    [tabs],
-  );

  useEffect(() => {
-    if (baseUrl && edxProvider) {
+    // Only fetch the topic data if the MFE is configured.
+    if (baseUrl) {
      dispatch(getCourseDiscussionTopics(courseId));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
--- a/src/courseware/data/factories/courseMetadata.factory.js
+++ b/src/courseware/data/factories/courseMetadata.factory.js
@@ -57,5 +57,5 @@ Factory.define('courseMetadata')
    related_programs: null,
    user_needs_integrity_signature: false,
    recommendations: null,
-    learning_assistant_enabled: null,
+    learning_assistant_launch_url: null,
  });
--- a/src/courseware/data/api.js
+++ b/src/courseware/data/api.js
@@ -122,7 +122,7 @@ function normalizeMetadata(metadata) {
    relatedPrograms: camelCaseObject(data.related_programs),
    userNeedsIntegritySignature: data.user_needs_integrity_signature,
    canAccessProctoredExams: data.can_access_proctored_exams,
-    learningAssistantEnabled: data.learning_assistant_enabled,
+    learningAssistantLaunchUrl: data.learning_assistant_launch_url,
  };
 }

--- a/src/courseware/data/pact-tests/lmsPact.test.jsx
+++ b/src/courseware/data/pact-tests/lmsPact.test.jsx
@@ -228,7 +228,7 @@ describe('Courseware Service', () => {
        linkedinAddToProfileUrl: null,
        relatedPrograms: null,
        userNeedsIntegritySignature: false,
-        learningAssistantEnabled: false,
+        learningAssistantLaunchUrl: null,
      };
      setTimeout(() => {
        provider.addInteraction({
@@ -334,7 +334,7 @@ describe('Courseware Service', () => {
              verification_status: string('none'),
              linkedin_add_to_profile_url: null,
              user_needs_integrity_signature: boolean(false),
-              learning_assistant_enabled: boolean(false),
+              learning_assistant_launch_url: null,
            },
          },
        });
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -137,8 +137,6 @@ initialize({
        EXAMS_BASE_URL: process.env.EXAMS_BASE_URL || null,
        PROCTORED_EXAM_FAQ_URL: process.env.PROCTORED_EXAM_FAQ_URL || null,
        PROCTORED_EXAM_RULES_URL: process.env.PROCTORED_EXAM_RULES_URL || null,
-        CHAT_RESPONSE_URL: process.env.CHAT_RESPONSE_URL || null,
-        PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL || null,
      }, 'LearnerAppConfig');
    },
  },
--- a/src/index.scss
+++ b/src/index.scss
@@ -4,8 +4,6 @@
@import "~@edx/brand/paragon/overrides";

@import "~@edx/frontend-component-footer/dist/footer";
-@import "~@edx/frontend-component-header/dist/index";
-

 #root {
  display: flex;
--- a/src/pacts/frontend-app-learning-lms.json
+++ b/src/pacts/frontend-app-learning-lms.json
@@ -306,7 +306,7 @@
          "verification_status": "none",
          "linkedin_add_to_profile_url": null,
          "user_needs_integrity_signature": false,
-          "learning_assistant_enabled": false
+          "learning_assistant_launch_url": null
        },
        "matchingRules": {
          "$.body.access_expiration.expiration_date": {
@@ -442,7 +442,7 @@
          "$.body.user_needs_integrity_signature": {
            "match": "type"
          },
-          "$.body.learning_assistant_enabled": {
+          "$.body.learning_assistant_launch_url": {
            "match": "type"
          }
        }
--- a/src/product-tours/ProductTours.test.jsx
+++ b/src/product-tours/ProductTours.test.jsx
@@ -293,7 +293,7 @@ describe('Courseware Tour', () => {
        });

        const container = await loadContainer();
-        const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
+        const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
        const sequenceNextButton = sequenceNavButtons[4];
        expect(sequenceNextButton).toHaveTextContent('Next');
        fireEvent.click(sequenceNextButton);
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -13,7 +13,6 @@ import PropTypes from 'prop-types';
 import { render as rtlRender } from '@testing-library/react';
 import { configureStore } from '@reduxjs/toolkit';
 import MockAdapter from 'axios-mock-adapter';
-import { reducer as learningAssistantReducer } from '@edx/frontend-lib-learning-assistant';
 import AppProvider from '@edx/frontend-platform/react/AppProvider';
 import { reducer as courseHomeReducer } from './course-home/data';
 import { reducer as coursewareReducer } from './courseware/data/slice';
@@ -117,7 +116,6 @@ export async function initializeTestStore(options = {}, overrideStore = true) {
      models: modelsReducer,
      courseware: coursewareReducer,
      courseHome: courseHomeReducer,
-      learningAssistant: learningAssistantReducer,
    },
  });
  if (overrideStore) {
--- a/src/store.js
+++ b/src/store.js
@@ -1,4 +1,3 @@
-import { reducer as learningAssistantReducer } from '@edx/frontend-lib-learning-assistant';
 import { configureStore } from '@reduxjs/toolkit';
 import { reducer as courseHomeReducer } from './course-home/data';
 import { reducer as coursewareReducer } from './courseware/data/slice';
@@ -12,7 +11,6 @@ export default function initializeStore() {
      models: modelsReducer,
      courseware: coursewareReducer,
      courseHome: courseHomeReducer,
-      learningAssistant: learningAssistantReducer,
      recommendations: recommendationsReducer,
      tours: toursReducer,
    },
--- a/src/tab-page/TabPage.jsx
+++ b/src/tab-page/TabPage.jsx
@@ -38,6 +38,18 @@ const TabPage = ({ intl, ...props }) => {
    title,
  } = useModel('courseHomeMeta', courseId);

+  if (courseStatus === 'loading') {
+    return (
+      <>
+        <Header />
+        <PageLoading
+          srMessage={intl.formatMessage(messages.loading)}
+        />
+        <Footer />
+      </>
+    );
+  }
+
  if (courseStatus === 'denied') {
    const redirectUrl = getAccessDeniedRedirectUrl(courseId, activeTabSlug, courseAccess, start);
    if (redirectUrl) {
@@ -45,41 +57,41 @@ const TabPage = ({ intl, ...props }) => {
    }
  }

+  // Either a success state or a denied state that wasn't redirected above (some tabs handle denied states themselves,
+  // like the outline tab handling unenrolled learners)
+  if (courseStatus === 'loaded' || courseStatus === 'denied') {
+    return (
+      <>
+        <Toast
+          action={toastBodyText ? {
+            label: toastBodyText,
+            href: toastBodyLink,
+          } : null}
+          closeLabel={intl.formatMessage(genericMessages.close)}
+          onClose={() => dispatch(setCallToActionToast({ header: '', link: null, link_text: null }))}
+          show={!!(toastHeader)}
+        >
+          {toastHeader}
+        </Toast>
+        {metadataModel === 'courseHomeMeta' && (<LaunchCourseHomeTourButton srOnly />)}
+        <Header
+          courseOrg={org}
+          courseNumber={number}
+          courseTitle={title}
+        />
+        <LoadedTabPage {...props} />
+        <Footer />
+      </>
+    );
+  }
+
+  // courseStatus 'failed' and any other unexpected course status.
  return (
    <>
-      {['loaded', 'denied'].includes(courseStatus) && (
-        <>
-          <Toast
-            action={toastBodyText ? {
-              label: toastBodyText,
-              href: toastBodyLink,
-            } : null}
-            closeLabel={intl.formatMessage(genericMessages.close)}
-            onClose={() => dispatch(setCallToActionToast({ header: '', link: null, link_text: null }))}
-            show={!!(toastHeader)}
-          >
-            {toastHeader}
-          </Toast>
-          {metadataModel === 'courseHomeMeta' && (<LaunchCourseHomeTourButton srOnly />)}
-        </>
-      )}
-
-      <Header courseOrg={org} courseNumber={number} courseTitle={title} />
-
-      {courseStatus === 'loading' && (
-        <PageLoading srMessage={intl.formatMessage(messages.loading)} />
-      )}
-
-      {['loaded', 'denied'].includes(courseStatus) && (
-        <LoadedTabPage {...props} />
-      )}
-
-      {/* courseStatus 'failed' and any other unexpected course status. */}
-      {(!['loading', 'loaded', 'denied'].includes(courseStatus)) && (
-        <p className="text-center py-5 mx-auto" style={{ maxWidth: '30em' }}>
-          {intl.formatMessage(messages.failure)}
-        </p>
-      )}
+      <Header />
+      <p className="text-center py-5 mx-auto" style={{ maxWidth: '30em' }}>
+        {intl.formatMessage(messages.failure)}
+      </p>
      <Footer />
    </>
  );