fix: add axios to dev dependencies

* feat: update react & react-dom to v17

* build: update paragon version

* refactor: updated edx packages

* refactor: updated react-unit-test-utils

* build: update lock file

* build: update lock file

* build: update lock file

* build: update lock file

* refactor: bumped frontend-lib-learning-assistant version

---------

Co-authored-by: mashal-m <mashal.malik@arbisoft.com>

.env.development

@@ -46,3 +46,5 @@ 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'

.env.test

@@ -45,3 +45,4 @@ 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'

.github/workflows/commitlint.yml

@@ -7,4 +7,14 @@ on:
 
 jobs:
   commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: remove tsconfig.json # see issue https://github.com/conventional-changelog/commitlint/issues/3256
+        run: |
+          rm -f tsconfig.json
+      - name: Check commits
+        uses: wagoid/commitlint-github-action@v5

Makefile

@@ -77,5 +77,5 @@ validate:
 
 .PHONY: validate.ci
 validate.ci:
-	npm ci
+	npm ci --legacy-peer-deps
 	make validate

jest.config.js

@@ -9,6 +9,12 @@ 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'
 });

package.json

@@ -30,28 +30,29 @@
   },
   "dependencies": {
     "@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-special-exams": "2.19.1",
-    "@edx/frontend-platform": "4.3.0",
-    "@edx/paragon": "20.28.4",
-    "@edx/react-unit-test-utils": "npm:@edx/react-unit-test-utils@1.5.3",
+    "@edx/frontend-component-footer": "12.1.2",
+    "@edx/frontend-component-header": "4.4.4",
+    "@edx/frontend-lib-learning-assistant": "^1.11.1",
+    "@edx/frontend-lib-special-exams": "2.20.1",
+    "@edx/frontend-platform": "4.6.0",
+    "@edx/paragon": "20.46.0",
+    "@edx/react-unit-test-utils": "npm:@edx/react-unit-test-utils@1.7.0",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.1.18",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "@popperjs/core": "2.11.8",
     "@reduxjs/toolkit": "1.8.1",
     "classnames": "2.3.2",
     "core-js": "3.22.2",
     "history": "5.3.0",
-    "js-cookie": "3.0.1",
+    "js-cookie": "3.0.5",
     "lodash.camelcase": "4.3.0",
     "prop-types": "15.8.1",
     "query-string": "^7.1.3",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "5.2.1",
@@ -59,18 +60,19 @@
     "react-share": "4.4.1",
     "redux": "4.1.2",
     "regenerator-runtime": "0.13.11",
-    "reselect": "4.1.7",
+    "reselect": "4.1.8",
     "truncate-html": "1.0.4",
     "util": "0.12.5"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "1.1.1",
-    "@edx/frontend-build": "^12.8.27",
-    "@edx/reactifex": "2.1.1",
+    "@edx/browserslist-config": "1.2.0",
+    "@edx/frontend-build": "12.9.0-alpha.6",
+    "@edx/reactifex": "2.2.0",
     "@pact-foundation/pact": "^11.0.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",
+    "axios": "^1.5.0",
     "axios-mock-adapter": "1.20.0",
     "copy-webpack-plugin": "^11.0.0",
     "es-check": "6.2.1",

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.end.long"
+          id="learning.outline.alert.start.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.end.calendar"
+        id="learning.outline.alert.start.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. "
       />

src/course-home/data/__snapshots__/redux.test.js.snap

@@ -18,6 +18,9 @@ Object {
     "sequenceMightBeUnit": false,
     "sequenceStatus": "loading",
   },
+  "learningAssistant": ObjectContaining {
+    "conversationId": Any<String>,
+  },
   "models": Object {
     "courseHomeMeta": Object {
       "course-v1:edX+DemoX+Demo_Course": Object {
@@ -336,6 +339,9 @@ Object {
     "sequenceMightBeUnit": false,
     "sequenceStatus": "loading",
   },
+  "learningAssistant": ObjectContaining {
+    "conversationId": Any<String>,
+  },
   "models": Object {
     "courseHomeMeta": Object {
       "course-v1:edX+DemoX+Demo_Course": Object {
@@ -532,6 +538,9 @@ Object {
     "sequenceMightBeUnit": false,
     "sequenceStatus": "loading",
   },
+  "learningAssistant": ObjectContaining {
+    "conversationId": Any<String>,
+  },
   "models": Object {
     "courseHomeMeta": Object {
       "course-v1:edX+DemoX+Demo_Course": Object {

src/course-home/data/redux.test.js

@@ -67,7 +67,14 @@ describe('Data layer integration tests', () => {
 
       const state = store.getState();
       expect(state.courseHome.courseStatus).toEqual('loaded');
-      expect(state).toMatchSnapshot();
+      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),
+        }),
+      });
     });
 
     it.each([401, 403, 404])(
@@ -111,7 +118,14 @@ describe('Data layer integration tests', () => {
 
       const state = store.getState();
       expect(state.courseHome.courseStatus).toEqual('loaded');
-      expect(state).toMatchSnapshot();
+      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),
+        }),
+      });
     });
 
     it.each([401, 403, 404])(
@@ -156,7 +170,14 @@ describe('Data layer integration tests', () => {
 
       const state = store.getState();
       expect(state.courseHome.courseStatus).toEqual('loaded');
-      expect(state).toMatchSnapshot();
+      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),
+        }),
+      });
     });
 
     it('Should handle the url including a targetUserId', async () => {

src/courseware/CoursewareContainer.jsx

@@ -243,7 +243,7 @@ class CoursewareContainer extends Component {
     checkSequenceUnitMarkerToSequenceUnitRedirect(courseId, sequenceStatus, sequence, routeUnitId);
   }
 
-  handleUnitNavigationClick = (nextUnitId) => {
+  handleUnitNavigationClick = () => {
     const {
       courseId, sequenceId,
       match: {
@@ -254,21 +254,17 @@ 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);
@@ -276,12 +272,7 @@ class CoursewareContainer extends Component {
     }
   };
 
-  handlePreviousSequenceClick = () => {
-    const { previousSequence, courseId } = this.props;
-    if (previousSequence !== null) {
-      history.push(`/course/${courseId}/${previousSequence.id}/last`);
-    }
-  };
+  handlePreviousSequenceClick = () => {};
 
   render() {
     const {

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 button');
+      const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, 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 button');
+        const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
         const sequenceNextButton = sequenceNavButtons[4];
         expect(sequenceNextButton).toHaveTextContent('Next');
-        fireEvent.click(sequenceNavButtons[4]);
+        fireEvent.click(sequenceNextButton);
 
         expect(global.location.href).toEqual(`http://localhost/course/${courseId}/${sequenceBlock.id}/${unitBlocks[1].id}`);
       });

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,11 +93,12 @@ const Course = ({
         />
         {shouldDisplayTriggers && (
           <>
-            <ChatTrigger
+            <Chat
+              enabled={course.learningAssistantEnabled}
               enrollmentMode={course.enrollmentMode}
               isStaff={isStaff}
-              launchUrl={course.learningAssistantLaunchUrl}
               courseId={courseId}
+              contentToolsEnabled={course.showCalculator || course.notes.enabled}
             />
             <SidebarTriggers />
           </>

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('button', { name: /previous/i }).forEach(button => fireEvent.click(button));
-    screen.getAllByRole('button', { name: /next/i }).forEach(button => fireEvent.click(button));
+    screen.getAllByRole('link', { name: /previous/i }).forEach(link => fireEvent.click(link));
+    screen.getAllByRole('link', { name: /next/i }).forEach(link => fireEvent.click(link));
 
     // We are in the middle of the sequence, so no
     expect(previousSequenceHandler).not.toHaveBeenCalled();

src/courseware/course/chat/Chat.jsx

@@ -0,0 +1,76 @@
+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';
+
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+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
+  );
+
+  // TODO: Remove this Segment alert. This has been added purely to diagnose whether
+  //       usage issues are as a result of the Xpert toggle button not appearing.
+  if (shouldDisplayChat) {
+    sendTrackEvent('edx.ui.lms.learning_assistant.render', {
+      course_id: courseId,
+    });
+  }
+
+  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);

src/courseware/course/chat/Chat.test.jsx

@@ -0,0 +1,157 @@
+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();
+        }
+      },
+    );
+  });
+});

src/courseware/course/chat/index.js

@@ -0,0 +1 @@
+export { default } from './Chat';

src/courseware/course/content-tools/ContentTools.jsx

@@ -1,23 +1,32 @@
 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,
-}) => (
-  <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>
-);
+}) => {
+  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>
+    )
+  );
+};
 
 ContentTools.propTypes = {
   course: PropTypes.shape({

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,

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();
   });

src/courseware/course/lti-modal/ChatTrigger.jsx

@@ -1,133 +0,0 @@
-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);

src/courseware/course/lti-modal/ChatTrigger.test.jsx

@@ -1,88 +0,0 @@
-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();
-      }
-    });
-  });
-});

src/courseware/course/lti-modal/index.js

@@ -1 +0,0 @@
-export { default } from './ChatTrigger';

src/courseware/course/lti-modal/messages.js

@@ -1,26 +0,0 @@
-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;

src/courseware/course/sequence/Sequence.jsx

@@ -10,7 +10,6 @@ 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';
 
@@ -139,9 +138,6 @@ 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">
@@ -150,7 +146,7 @@ const Sequence = ({
           sequenceId={sequenceId}
           unitId={unitId}
           className="mb-4"
-          nextSequenceHandler={() => {
+          nextHandler={() => {
             logEvent('edx.ui.lms.sequence.next_selected', 'top');
             handleNext();
           }}
@@ -158,11 +154,10 @@ const Sequence = ({
             logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
             handleNavigate(destinationUnitId);
           }}
-          previousSequenceHandler={() => {
+          previousHandler={() => {
             logEvent('edx.ui.lms.sequence.previous_selected', 'top');
             handlePrevious();
           }}
-          goToCourseExitPage={() => goToCourseExitPage()}
         />
         {shouldDisplayNotificationTriggerInSequence && <SidebarTriggers />}
 
@@ -186,7 +181,6 @@ const Sequence = ({
               logEvent('edx.ui.lms.sequence.next_selected', 'bottom');
               handleNext();
             }}
-            goToCourseExitPage={() => goToCourseExitPage()}
           />
           )}
         </div>

src/courseware/course/sequence/Sequence.test.jsx

@@ -46,6 +46,7 @@ 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 () => {
@@ -74,8 +75,10 @@ describe('Sequence', () => {
     );
 
     await waitFor(() => expect(screen.queryByText('Loading locked content messaging...')).toBeInTheDocument());
-    // `Previous`, `Active`, `Next`, `Prerequisite` and `Close Tray` buttons.
-    expect(screen.getAllByRole('button').length).toEqual(5);
+    // `Previous`, `Prerequisite` and `Close Tray` buttons.
+    expect(screen.getAllByRole('button').length).toEqual(3);
+    // `Active` and `Next` buttons.
+    expect(screen.getAllByRole('link').length).toEqual(2);
 
     expect(screen.getByText('Content Locked')).toBeInTheDocument();
     const unitContainer = container.querySelector('.unit-container');
@@ -112,6 +115,7 @@ 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 () => {
@@ -125,13 +129,16 @@ describe('Sequence', () => {
   it('handles loading unit', async () => {
     render(<Sequence {...mockData} />);
     expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();
-    // Renders navigation buttons plus one button for each unit.
-    expect(screen.getAllByRole('button')).toHaveLength(4 + unitBlocks.length);
+    // `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);
 
     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|next/i }).length).toEqual(4);
+    expect(screen.getAllByRole('button', { name: /previous/i }).length).toEqual(2);
+    expect(screen.getAllByRole('link', { name: /next/i }).length).toEqual(2);
   });
 
   describe('sequence and unit navigation buttons', () => {
@@ -163,7 +170,7 @@ describe('Sequence', () => {
       render(<Sequence {...testData} />, { store: testStore });
       expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();
 
-      const sequencePreviousButton = screen.getByRole('button', { name: /previous/i });
+      const sequencePreviousButton = screen.getByRole('link', { name: /previous/i });
       fireEvent.click(sequencePreviousButton);
       expect(testData.previousSequenceHandler).toHaveBeenCalledTimes(1);
       expect(sendTrackEvent).toHaveBeenCalledTimes(1);
@@ -176,7 +183,7 @@ describe('Sequence', () => {
 
       loadUnit();
       await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());
-      const unitPreviousButton = screen.getAllByRole('button', { name: /previous/i })
+      const unitPreviousButton = screen.getAllByRole('link', { name: /previous/i })
         .filter(button => button !== sequencePreviousButton)[0];
       fireEvent.click(unitPreviousButton);
       expect(testData.previousSequenceHandler).toHaveBeenCalledTimes(2);
@@ -199,7 +206,7 @@ describe('Sequence', () => {
       render(<Sequence {...testData} />, { store: testStore });
       expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();
 
-      const sequenceNextButton = screen.getByRole('button', { name: /next/i });
+      const sequenceNextButton = screen.getByRole('link', { name: /next/i });
       fireEvent.click(sequenceNextButton);
       expect(testData.nextSequenceHandler).toHaveBeenCalledTimes(1);
       expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.next_selected', {
@@ -211,7 +218,7 @@ describe('Sequence', () => {
 
       loadUnit();
       await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());
-      const unitNextButton = screen.getAllByRole('button', { name: /next/i })
+      const unitNextButton = screen.getAllByRole('link', { name: /next/i })
         .filter(button => button !== sequenceNextButton)[0];
       fireEvent.click(unitNextButton);
       expect(testData.nextSequenceHandler).toHaveBeenCalledTimes(2);
@@ -237,11 +244,11 @@ describe('Sequence', () => {
       render(<Sequence {...testData} />, { store: testStore });
       await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).toBeInTheDocument());
 
-      fireEvent.click(screen.getByRole('button', { name: /previous/i }));
+      fireEvent.click(screen.getByRole('link', { name: /previous/i }));
       expect(testData.previousSequenceHandler).not.toHaveBeenCalled();
       expect(testData.unitNavigationHandler).toHaveBeenCalledWith(unitBlocks[unitNumber - 1].id);
 
-      fireEvent.click(screen.getByRole('button', { name: /next/i }));
+      fireEvent.click(screen.getByRole('link', { 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`.
@@ -323,11 +330,11 @@ describe('Sequence', () => {
       loadUnit();
       await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());
 
-      screen.getAllByRole('button', { name: /previous/i }).forEach(button => fireEvent.click(button));
+      screen.getAllByRole('link', { name: /previous/i }).forEach(button => fireEvent.click(button));
       expect(testData.previousSequenceHandler).toHaveBeenCalledTimes(2);
       expect(testData.unitNavigationHandler).not.toHaveBeenCalled();
 
-      screen.getAllByRole('button', { name: /next/i }).forEach(button => fireEvent.click(button));
+      screen.getAllByRole('link', { name: /next/i }).forEach(button => fireEvent.click(button));
       expect(testData.nextSequenceHandler).toHaveBeenCalledTimes(2);
       expect(testData.unitNavigationHandler).not.toHaveBeenCalled();
 
@@ -370,7 +377,7 @@ describe('Sequence', () => {
       render(<Sequence {...testData} />, { store: testStore });
       await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).toBeInTheDocument());
 
-      fireEvent.click(screen.getByRole('button', { name: targetUnit.display_name }));
+      fireEvent.click(screen.getByRole('link', { name: targetUnit.display_name }));
       expect(testData.unitNavigationHandler).toHaveBeenCalledWith(targetUnit.id);
       expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.tab_selected', {
         current_tab: currentTabNumber,

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()) {
-      return fetchExamAccess()
+      fetchExamAccess()
         .finally(() => {
           const examAccess = getExamAccess();
           setAccessToken(examAccess);
@@ -26,7 +26,6 @@ const useExamAccess = ({
           logError(error);
         });
     }
-    return undefined;
   }, [id]);
 
   return {

src/courseware/course/sequence/Unit/hooks/useExamAccess.test.js

@@ -4,6 +4,7 @@ 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) => {
@@ -55,18 +56,19 @@ describe('useExamAccess hook', () => {
       state.expectInitializedWith(stateKeys.blockAccess, true);
     });
     describe('effects - on id change', () => {
-      let cb;
+      let useEffectCb;
       beforeEach(() => {
         useExamAccess({ id });
-        cb = getEffect([id], React);
+        useEffectCb = getEffect([id], React);
       });
       it('does not call fetchExamAccess if not an exam', () => {
-        cb();
+        useEffectCb();
         expect(fetchExamAccess).not.toHaveBeenCalled();
       });
       it('fetches and sets exam access if isExam', async () => {
         isExam.mockReturnValueOnce(true);
-        await cb();
+        useEffectCb();
+        await waitFor(() => expect(fetchExamAccess).toHaveBeenCalled());
         state.expectSetStateCalledWith(stateKeys.accessToken, testAccessToken);
         state.expectSetStateCalledWith(stateKeys.blockAccess, false);
       });
@@ -74,7 +76,8 @@ describe('useExamAccess hook', () => {
       it('logs error if fetchExamAccess fails', async () => {
         isExam.mockReturnValueOnce(true);
         fetchExamAccess.mockReturnValueOnce(Promise.reject(testError));
-        await cb();
+        useEffectCb();
+        await waitFor(() => expect(fetchExamAccess).toHaveBeenCalled());
         expect(logError).toHaveBeenCalledWith(testError);
       });
     });

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx

@@ -1,4 +1,5 @@
 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';
@@ -26,12 +27,13 @@ const SequenceNavigation = ({
   sequenceId,
   className,
   onNavigate,
-  nextSequenceHandler,
-  previousSequenceHandler,
-  goToCourseExitPage,
+  nextHandler,
+  previousHandler,
 }) => {
   const sequence = useModel('sequences', sequenceId);
-  const { isFirstUnit, isLastUnit } = useSequenceNavigationMetadata(sequenceId, unitId);
+  const {
+    isFirstUnit, isLastUnit, nextLink, previousLink,
+  } = useSequenceNavigationMetadata(sequenceId, unitId);
   const {
     courseId,
     sequenceStatus,
@@ -63,27 +65,49 @@ 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={buttonOnClick} disabled={disabled} iconAfter={nextArrow}>
+      <Button
+        variant="link"
+        className="next-btn"
+        onClick={nextHandler}
+        disabled={disabled}
+        iconAfter={nextArrow}
+        as={disabled ? undefined : Link}
+        to={disabled ? undefined : nextLink}
+      >
         {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 }}>
-      <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit} iconBefore={prevArrow}>
-        {shouldDisplayNotificationTriggerInSequence ? null : intl.formatMessage(messages.previousButton)}
-      </Button>
+      {renderPreviousButton()}
       {renderUnitButtons()}
       {renderNextButton()}
 
@@ -97,9 +121,8 @@ SequenceNavigation.propTypes = {
   unitId: PropTypes.string,
   className: PropTypes.string,
   onNavigate: PropTypes.func.isRequired,
-  nextSequenceHandler: PropTypes.func.isRequired,
-  previousSequenceHandler: PropTypes.func.isRequired,
-  goToCourseExitPage: PropTypes.func.isRequired,
+  nextHandler: PropTypes.func.isRequired,
+  previousHandler: PropTypes.func.isRequired,
 };
 
 SequenceNavigation.defaultProps = {

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx

@@ -25,10 +25,9 @@ describe('Sequence Navigation', () => {
     mockData = {
       unitId: unitBlocks[1].id,
       sequenceId: courseware.sequenceId,
-      previousSequenceHandler: () => {},
+      previousHandler: () => {},
       onNavigate: () => {},
-      nextSequenceHandler: () => {},
-      goToCourseExitPage: () => {},
+      nextHandler: () => {},
     };
   });
 
@@ -77,7 +76,7 @@ describe('Sequence Navigation', () => {
     const onNavigate = jest.fn();
     render(<SequenceNavigation {...mockData} {...{ onNavigate }} />);
 
-    const unitButtons = screen.getAllByRole('button', { name: /\d+/ });
+    const unitButtons = screen.getAllByRole('link', { name: /\d+/ });
     expect(unitButtons).toHaveLength(unitButtons.length);
     unitButtons.forEach(button => fireEvent.click(button));
     expect(onNavigate).toHaveBeenCalledTimes(unitButtons.length);
@@ -86,7 +85,7 @@ describe('Sequence Navigation', () => {
   it('has both navigation buttons enabled for a non-corner unit of the sequence', () => {
     render(<SequenceNavigation {...mockData} />);
 
-    screen.getAllByRole('button', { name: /previous|next/i }).forEach(button => {
+    screen.getAllByRole('link', { name: /previous|next/i }).forEach(button => {
       expect(button).toBeEnabled();
     });
   });
@@ -95,7 +94,7 @@ describe('Sequence Navigation', () => {
     render(<SequenceNavigation {...mockData} unitId={unitBlocks[0].id} />);
 
     expect(screen.getByRole('button', { name: /previous/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /next/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /next/i })).toBeEnabled();
   });
 
   it('has the "Next" button disabled for the last unit of the sequence if there is no Exit page', async () => {
@@ -110,7 +109,7 @@ describe('Sequence Navigation', () => {
       { store: testStore },
     );
 
-    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
     expect(screen.getByRole('button', { name: /next/i })).toBeDisabled();
   });
 
@@ -126,8 +125,8 @@ describe('Sequence Navigation', () => {
       { store: testStore },
     );
 
-    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
-    expect(screen.getByRole('button', { name: /next \(end of course\)/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /next \(end of course\)/i })).toBeEnabled();
   });
 
   it('displays complete course message instead of the "Next" button as needed', async () => {
@@ -147,19 +146,19 @@ describe('Sequence Navigation', () => {
       { store: testStore },
     );
 
-    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
-    expect(screen.getByRole('button', { name: /Complete the course/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /Complete the course/i })).toBeEnabled();
   });
 
   it('handles "Previous" and "Next" click', () => {
-    const previousSequenceHandler = jest.fn();
-    const nextSequenceHandler = jest.fn();
-    render(<SequenceNavigation {...mockData} {...{ previousSequenceHandler, nextSequenceHandler }} />);
+    const previousHandler = jest.fn();
+    const nextHandler = jest.fn();
+    render(<SequenceNavigation {...mockData} {...{ previousHandler, nextHandler }} />);
 
-    fireEvent.click(screen.getByRole('button', { name: /previous/i }));
-    expect(previousSequenceHandler).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByRole('link', { name: /previous/i }));
+    expect(previousHandler).toHaveBeenCalledTimes(1);
 
-    fireEvent.click(screen.getByRole('button', { name: /next/i }));
-    expect(nextSequenceHandler).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByRole('link', { name: /next/i }));
+    expect(nextHandler).toHaveBeenCalledTimes(1);
   });
 });

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, 'button', { hidden: true }).forEach(button => {
+      getAllByRole(dropdownMenu, 'link', { 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, 'button', { hidden: true }).forEach(button => fireEvent.click(button));
+    getAllByRole(dropdownMenu, 'link', { hidden: true }).forEach(button => fireEvent.click(button));
     expect(onNavigate).toHaveBeenCalledTimes(unitBlocks.length);
     unitBlocks.forEach((unit, index) => {
       expect(onNavigate).toHaveBeenNthCalledWith(index + 1, unit.id);

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('button')).toHaveLength(unitBlocks.length);
+    expect(screen.getAllByRole('link')).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, 'button');
-    expect(dropdownButtons).toHaveLength(unitBlocks.length + 1);
+    const dropdownButtons = getAllByRole(dropdownMenu, 'link');
+    expect(dropdownButtons).toHaveLength(unitBlocks.length);
     expect(screen.getByRole('button', { name: `${activeBlockNumber} of ${unitBlocks.length}` }))
       .toHaveClass('dropdown-toggle');
   });

src/courseware/course/sequence/sequence-navigation/UnitButton.jsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import classNames from 'classnames';
 import { Button } from '@edx/paragon';
 
@@ -20,6 +21,8 @@ const UnitButton = ({
   className,
   showTitle,
 }) => {
+  const { courseId, sequenceId } = useSelector(state => state.courseware);
+
   const handleClick = useCallback(() => {
     onClick(unitId);
   }, [onClick, unitId]);
@@ -33,6 +36,8 @@ 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>}

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('button')).not.toHaveTextContent(unit.display_name);
+    expect(screen.getByRole('link')).not.toHaveTextContent(unit.display_name);
   });
 
   it('shows title', () => {
     render(<UnitButton {...mockData} showTitle />);
-    expect(screen.getByRole('button')).toHaveTextContent(unit.display_name);
+    expect(screen.getByRole('link')).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('button'));
+    fireEvent.click(screen.getByRole('link'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 });

src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx

@@ -1,4 +1,5 @@
 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';
@@ -20,14 +21,32 @@ const UnitNavigation = ({
   unitId,
   onClickPrevious,
   onClickNext,
-  goToCourseExitPage,
 }) => {
-  const { isFirstUnit, isLastUnit } = useSequenceNavigationMetadata(sequenceId, unitId);
+  const {
+    isFirstUnit, isLastUnit, nextLink, previousLink,
+  } = 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;
@@ -35,8 +54,10 @@ const UnitNavigation = ({
       <Button
         variant="outline-primary"
         className="next-button d-flex align-items-center justify-content-center"
-        onClick={buttonOnClick}
+        onClick={onClickNext}
         disabled={disabled}
+        as={disabled ? undefined : Link}
+        to={disabled ? undefined : nextLink}
       >
         <UnitNavigationEffortEstimate sequenceId={sequenceId} unitId={unitId}>
           {buttonText}
@@ -46,18 +67,9 @@ const UnitNavigation = ({
     );
   };
 
-  const prevArrow = isRtl(getLocale()) ? faChevronRight : faChevronLeft;
   return (
     <div className="unit-navigation d-flex">
-      <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>
+      {renderPreviousButton()}
       {renderNextButton()}
     </div>
   );
@@ -69,7 +81,6 @@ UnitNavigation.propTypes = {
   unitId: PropTypes.string,
   onClickPrevious: PropTypes.func.isRequired,
   onClickNext: PropTypes.func.isRequired,
-  goToCourseExitPage: PropTypes.func.isRequired,
 };
 
 UnitNavigation.defaultProps = {

src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx

@@ -22,7 +22,6 @@ describe('Unit Navigation', () => {
       sequenceId: courseware.sequenceId,
       onClickPrevious: () => {},
       onClickNext: () => {},
-      goToCourseExitPage: () => {},
     };
   });
 
@@ -36,7 +35,7 @@ describe('Unit Navigation', () => {
     />);
 
     // Only "Previous" and "Next" buttons should be rendered.
-    expect(screen.getAllByRole('button')).toHaveLength(2);
+    expect(screen.getAllByRole('link')).toHaveLength(2);
   });
 
   it('handles the clicks', () => {
@@ -45,23 +44,21 @@ describe('Unit Navigation', () => {
 
     render(<UnitNavigation
       {...mockData}
-      sequenceId=""
-      unitId=""
       onClickPrevious={onClickPrevious}
       onClickNext={onClickNext}
     />);
 
-    fireEvent.click(screen.getByRole('button', { name: /previous/i }));
+    fireEvent.click(screen.getByRole('link', { name: /previous/i }));
     expect(onClickPrevious).toHaveBeenCalledTimes(1);
 
-    fireEvent.click(screen.getByRole('button', { name: /next/i }));
+    fireEvent.click(screen.getByRole('link', { 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('button').forEach(button => {
+    screen.getAllByRole('link').forEach(button => {
       expect(button).toBeEnabled();
     });
   });
@@ -70,7 +67,7 @@ describe('Unit Navigation', () => {
     render(<UnitNavigation {...mockData} unitId={unitBlocks[0].id} />);
 
     expect(screen.getByRole('button', { name: /previous/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /next/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /next/i })).toBeEnabled();
   });
 
   it('has the "Next" button disabled for the last unit in the sequence if there is no Exit Page', async () => {
@@ -85,7 +82,7 @@ describe('Unit Navigation', () => {
       { store: testStore },
     );
 
-    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
     expect(screen.getByRole('button', { name: /next/i })).toBeDisabled();
   });
 
@@ -101,8 +98,8 @@ describe('Unit Navigation', () => {
       { store: testStore },
     );
 
-    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
-    expect(screen.getByRole('button', { name: /next \(end of course\)/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /next \(end of course\)/i })).toBeEnabled();
   });
 
   it('displays complete course message instead of the "Next" button as needed', async () => {
@@ -122,7 +119,7 @@ describe('Unit Navigation', () => {
       { store: testStore },
     );
 
-    expect(screen.getByRole('button', { name: /previous/i })).toBeEnabled();
-    expect(screen.getByRole('button', { name: /Complete the course/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /previous/i })).toBeEnabled();
+    expect(screen.getByRole('link', { name: /Complete the course/i })).toBeEnabled();
   });
 });

src/courseware/course/sequence/sequence-navigation/hooks.js

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

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 } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useModel } from '../../../../../generic/model-store';
 import { getCourseDiscussionTopics } from '../../../../data/thunks';
@@ -23,12 +23,16 @@ 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(() => {
-    // Only fetch the topic data if the MFE is configured.
-    if (baseUrl) {
+    if (baseUrl && edxProvider) {
       dispatch(getCourseDiscussionTopics(courseId));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

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_launch_url: null,
+    learning_assistant_enabled: null,
   });

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,
-    learningAssistantLaunchUrl: data.learning_assistant_launch_url,
+    learningAssistantEnabled: data.learning_assistant_enabled,
   };
 }
 

src/courseware/data/pact-tests/lmsPact.test.jsx

@@ -228,7 +228,7 @@ describe('Courseware Service', () => {
         linkedinAddToProfileUrl: null,
         relatedPrograms: null,
         userNeedsIntegritySignature: false,
-        learningAssistantLaunchUrl: null,
+        learningAssistantEnabled: false,
       };
       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_launch_url: null,
+              learning_assistant_enabled: boolean(false),
             },
           },
         });

src/index.jsx

@@ -137,6 +137,8 @@ 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');
     },
   },

src/index.scss

@@ -4,6 +4,8 @@
 @import "~@edx/brand/paragon/overrides";
 
 @import "~@edx/frontend-component-footer/dist/footer";
+@import "~@edx/frontend-component-header/dist/index";
+
 
 #root {
   display: flex;
@@ -82,14 +84,9 @@
   flex-direction: column;
   flex-grow: 1;
   margin-bottom: 4rem;
-
-  // On mobile, the unit container will be responsible
-  // for container padding.
-  @media (min-width: map-get($grid-breakpoints, "sm")) {
-    width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-  }
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 .sequence {
@@ -268,11 +265,17 @@
 }
 
 .unit-container {
-  padding: 0 $grid-gutter-width 2rem;
+  padding-top: 0;
+  padding-bottom: 2rem;
   max-width: 1024px;
   margin-left: auto;
   margin-right: auto;
 
+  @media (min-width: map-get($grid-breakpoints, "sm")) {
+    padding-left: $grid-gutter-width;
+    padding-right: $grid-gutter-width;
+  }
+
   @media (min-width: 830px) {
     padding-left: 40px;
     padding-right: 40px;
@@ -280,7 +283,18 @@
 }
 
 .unit-iframe-wrapper {
-  margin: 0 -20px 2rem;
+  margin-top: 0;
+
+  // Some XBlocks (such as xblock-drag-and-drop-v2) rely on the viewport width
+  // to determine their layout on mobile. This is problematic because the
+  // viewport width may not be the same as the width of the iframe. To fix this,
+  // here we compensate for the padding of the parent div with "container-xl"
+  // class to ensure that the viewport width is the same as the width of the
+  // iframe.
+  margin-left: -$grid-gutter-width * .5;
+  margin-right: -$grid-gutter-width * .5;
+
+  margin-bottom: 2rem;
 
   @media (min-width: 830px) {
     margin: 0 -40px 2rem;

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_launch_url": null
+          "learning_assistant_enabled": false
         },
         "matchingRules": {
           "$.body.access_expiration.expiration_date": {
@@ -442,7 +442,7 @@
           "$.body.user_needs_integrity_signature": {
             "match": "type"
           },
-          "$.body.learning_assistant_launch_url": {
+          "$.body.learning_assistant_enabled": {
             "match": "type"
           }
         }

src/product-tours/ProductTours.test.jsx

@@ -293,7 +293,7 @@ describe('Courseware Tour', () => {
         });
 
         const container = await loadContainer();
-        const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
+        const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
         const sequenceNextButton = sequenceNavButtons[4];
         expect(sequenceNextButton).toHaveTextContent('Next');
         fireEvent.click(sequenceNextButton);

src/setupTest.js

@@ -13,6 +13,7 @@ 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';
@@ -116,6 +117,7 @@ export async function initializeTestStore(options = {}, overrideStore = true) {
       models: modelsReducer,
       courseware: coursewareReducer,
       courseHome: courseHomeReducer,
+      learningAssistant: learningAssistantReducer,
     },
   });
   if (overrideStore) {

src/store.js

@@ -1,3 +1,4 @@
+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';
@@ -11,6 +12,7 @@ export default function initializeStore() {
       models: modelsReducer,
       courseware: coursewareReducer,
       courseHome: courseHomeReducer,
+      learningAssistant: learningAssistantReducer,
       recommendations: recommendationsReducer,
       tours: toursReducer,
     },

src/tab-page/TabPage.jsx

@@ -38,18 +38,6 @@ 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) {
@@ -57,41 +45,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 (
     <>
-      <Header />
-      <p className="text-center py-5 mx-auto" style={{ maxWidth: '30em' }}>
-        {intl.formatMessage(messages.failure)}
-      </p>
+      {['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>
+      )}
       <Footer />
     </>
   );