From e0249722102040006feecc60a9eaa7a5da7564a8 Mon Sep 17 00:00:00 2001
From: Felipe B <andres.bermudez@edunext.co>
Date: Thu, 22 Dec 2022 12:45:48 +0100
Subject: [PATCH 1/8] feat: add Outline Navigation Sidebar.

---
 .env                                          |  1 +
 .env.development                              |  1 +
 .env.test                                     |  1 +
 .eslintrc.js                                  | 10 +++++
 .github/workflows/validate.yml                |  8 +---
 docs/decisions/0010-outline-sidebar.md        | 13 ++++++
 jest.config.js                                |  1 +
 src/courseware/course/Course.jsx              | 10 ++++-
 src/courseware/course/sequence/Sequence.jsx   | 12 ++++-
 .../course/sidebar/SidebarOutlineTrigger.jsx  | 15 +++++++
 .../course/sidebar/SidebarTriggers.jsx        | 31 ++++---------
 .../course/sidebar/TriggerButton.jsx          | 31 +++++++++++++
 .../course/sidebar/sidebars/index.js          | 10 ++++-
 .../sidebars/outline/OutlineSidebar.jsx       | 43 ++++++++++++++++++
 .../sidebars/outline/OutlineSidebar.test.jsx  | 43 ++++++++++++++++++
 .../sidebars/outline/OutlineTrigger.jsx       | 29 ++++++++++++
 .../sidebars/outline/OutlineTrigger.test.jsx  | 45 +++++++++++++++++++
 .../course/sidebar/sidebars/outline/index.js  |  2 +
 .../sidebar/sidebars/outline/messages.js      | 16 +++++++
 src/index.jsx                                 |  1 +
 src/setupTest.js                              |  1 +
 webpack.dev.config.js                         | 11 +++++
 webpack.prod.config.js                        | 11 +++++
 23 files changed, 311 insertions(+), 35 deletions(-)
 create mode 100644 docs/decisions/0010-outline-sidebar.md
 create mode 100644 src/courseware/course/sidebar/SidebarOutlineTrigger.jsx
 create mode 100644 src/courseware/course/sidebar/TriggerButton.jsx
 create mode 100644 src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
 create mode 100644 src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.test.jsx
 create mode 100644 src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.jsx
 create mode 100644 src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.test.jsx
 create mode 100644 src/courseware/course/sidebar/sidebars/outline/index.js
 create mode 100644 src/courseware/course/sidebar/sidebars/outline/messages.js
 create mode 100644 webpack.dev.config.js
 create mode 100644 webpack.prod.config.js

diff --git a/.env b/.env
index c882fde382..0208b01f5b 100644
--- a/.env
+++ b/.env
@@ -11,6 +11,7 @@ CREDIT_HELP_LINK_URL=''
 CSRF_TOKEN_API_PATH=''
 DISCOVERY_API_BASE_URL=''
 DISCUSSIONS_MFE_BASE_URL=''
+SIDEBAR_MFE_BASE_URL=''
 ECOMMERCE_BASE_URL=''
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
diff --git a/.env.development b/.env.development
index f19135140b..499b947c78 100644
--- a/.env.development
+++ b/.env.development
@@ -11,6 +11,7 @@ CREDIT_HELP_LINK_URL='https://edx.readthedocs.io/projects/edx-guide-for-students
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
+SIDEBAR_MFE_BASE_URL='http://localhost:9090'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
diff --git a/.env.test b/.env.test
index 147c12c182..390ba92704 100644
--- a/.env.test
+++ b/.env.test
@@ -11,6 +11,7 @@ CREDIT_HELP_LINK_URL='https://edx.readthedocs.io/projects/edx-guide-for-students
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
+SIDEBAR_MFE_BASE_URL='http://localhost:9090'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
diff --git a/.eslintrc.js b/.eslintrc.js
index 9ed6c9fe81..b47abab542 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,16 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('eslint', {
+  rules: {
+    'import/no-unresolved': 'off',
+  },
+  'settings': {
+    'import/resolver': {
+      'node': {
+        'paths': ['src'],
+      },
+    },
+  },
   overrides: [{
     files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)", "setupTest.js"],
     rules: {
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
index d38a3991c9..622999c209 100644
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -1,11 +1,9 @@
 name: validate
 on:
   push:
-    branches:
-    - master
+    branches: [pearson-release/olive.master]
   pull_request:
-    branches:
-    - '**'
+    branches: [pearson-release/olive.master]
 jobs:
   tests:
     runs-on: ubuntu-latest
@@ -20,5 +18,3 @@ jobs:
     - run: make validate.ci
     - name: Upload coverage
       uses: codecov/codecov-action@v3
-      with:
-        fail_ci_if_error: true
diff --git a/docs/decisions/0010-outline-sidebar.md b/docs/decisions/0010-outline-sidebar.md
new file mode 100644
index 0000000000..0468f3fc98
--- /dev/null
+++ b/docs/decisions/0010-outline-sidebar.md
@@ -0,0 +1,13 @@
+# Add Outline Sidebar
+
+Following the [DISCOVERY](https://agile-jira.pearson.com/browse/PADV-213) made and the proposed [DESIGN](https://lucid.app/lucidchart/d52cc785-409f-4964-af29-ff277baa5bc5/edit?invitationId=inv_e569412e-e9f0-44aa-a9fa-54123d272f1a&referringApp=slack&page=l2M~LaFs47mo#), the MFE sidebar navigation is added in Frontend-App-Learning.
+
+Using currently logic in Frontend-App-Learning, **Outline Sidebar** is integrated following Discussion Sidebar. Using the already created **SidebarBase** function, the integration of the Outline sidebar is done through an iframe, which allows the integration of a Microfrontend located in a certain path, in this case using the port :9090, called **SIDEBAR_MFE_BASE_URL**.
+
+Then, using **SidebarTriggerBase**, the respective integration of the trigger is done, where to locate it in a different div from the one that already exists in src/courseware/course/Course.jsx module, the **SidebarOutlineTrigger** module is created.
+
+To show the Outline Sidebar it is necessary to take the context through the **SidebarContext** function to src/courseware/course/sequence/Sequence.jsx where if the Outline Sidebar is active it will be shown on the left, otherwise another sidebar will be shown in the default from the platform.
+
+## Next Step: Add Navigation Functionality
+
+The next step for the Outline Sidebar integration is to make the navigation more user friendly where it goes to the subsection the user needs without the need to open another tab.
diff --git a/jest.config.js b/jest.config.js
index 7020176f69..066b235bf6 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,6 +1,7 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
+  modulePaths: ['src'],
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index e6bf5b7072..b599a6bdb6 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -14,6 +14,7 @@ import ContentTools from './content-tools';
 import CourseBreadcrumbs from './CourseBreadcrumbs';
 import SidebarProvider from './sidebar/SidebarContextProvider';
 import SidebarTriggers from './sidebar/SidebarTriggers';
+import SidebarOutlineTrigger from './sidebar/SidebarOutlineTrigger';
 
 import { useModel } from '../../generic/model-store';
 import { getSessionStorage, setSessionStorage } from '../../data/sessionStorage';
@@ -88,7 +89,7 @@ function Course({
       <Helmet>
         <title>{`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`}</title>
       </Helmet>
-      <div className="position-relative d-flex align-items-start">
+      <section className="position-relative d-flex align-items-start">
         <CourseBreadcrumbs
           courseId={courseId}
           sectionId={section ? section.id : null}
@@ -101,7 +102,12 @@ function Course({
         {shouldDisplayTriggers && (
           <SidebarTriggers />
         )}
-      </div>
+      </section>
+      <section className="d-flex mr-auto p-2">
+        {shouldDisplayTriggers && (
+          <SidebarOutlineTrigger />
+        )}
+      </section>
 
       <AlertList topic="sequence" />
       <Sequence
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index f0b5c57f28..d1418fcdfa 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 import React, {
-  useEffect, useState,
+  useEffect, useState, useContext,
 } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -14,6 +14,8 @@ import { history } from '@edx/frontend-platform';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import { breakpoints, useWindowSize } from '@edx/paragon';
 
+import SidebarContext from 'courseware/course/sidebar/SidebarContext';
+import { ID } from 'courseware/course/sidebar/sidebars/outline/OutlineTrigger';
 import PageLoading from '../../../generic/PageLoading';
 import { useModel } from '../../../generic/model-store';
 import { useSequenceBannerTextAlert, useSequenceEntranceExamAlert } from '../../../alerts/sequence-alerts/hooks';
@@ -148,8 +150,14 @@ function Sequence({
     history.push(`/course/${courseId}/course-end`);
   };
 
+  const {
+    currentSidebar,
+  } = useContext(SidebarContext);
+  const isOutlineActive = currentSidebar === ID;
+
   const defaultContent = (
     <div className="sequence-container d-inline-flex flex-row">
+      {isOutlineActive ? <Sidebar /> : null}
       <div className={classNames('sequence w-100', { 'position-relative': shouldDisplayNotificationTriggerInSequence })}>
         <SequenceNavigation
           sequenceId={sequenceId}
@@ -202,7 +210,7 @@ function Sequence({
           )}
         </div>
       </div>
-      <Sidebar />
+      {isOutlineActive ? null : <Sidebar />}
 
       {/** [MM-P2P] Experiment */}
       {(mmp2p.state.isEnabled && mmp2p.flyover.isVisible) && (
diff --git a/src/courseware/course/sidebar/SidebarOutlineTrigger.jsx b/src/courseware/course/sidebar/SidebarOutlineTrigger.jsx
new file mode 100644
index 0000000000..cf82a3b8b6
--- /dev/null
+++ b/src/courseware/course/sidebar/SidebarOutlineTrigger.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import TriggerButton from 'courseware/course/sidebar/TriggerButton';
+import { ID } from 'courseware/course/sidebar/sidebars/outline/OutlineTrigger';
+
+function SidebarOutlineTrigger() {
+  return (
+    <section className="d-flex mb-auto">
+      <TriggerButton sidebarId={ID} />
+    </section>
+  );
+}
+
+SidebarOutlineTrigger.propTypes = {};
+
+export default SidebarOutlineTrigger;
diff --git a/src/courseware/course/sidebar/SidebarTriggers.jsx b/src/courseware/course/sidebar/SidebarTriggers.jsx
index b578f41bb4..45e42230b4 100644
--- a/src/courseware/course/sidebar/SidebarTriggers.jsx
+++ b/src/courseware/course/sidebar/SidebarTriggers.jsx
@@ -1,29 +1,14 @@
-import classNames from 'classnames';
-import React, { useContext } from 'react';
-import SidebarContext from './SidebarContext';
-import { SIDEBAR_ORDER, SIDEBARS } from './sidebars';
+import React from 'react';
+import { SIDEBAR_ORDER } from 'courseware/course/sidebar/sidebars';
+import TriggerButton from 'courseware/course/sidebar/TriggerButton';
 
 function SidebarTriggers() {
-  const {
-    toggleSidebar,
-    currentSidebar,
-  } = useContext(SidebarContext);
   return (
-    <div className="d-flex ml-auto">
-      {SIDEBAR_ORDER.map((sidebarId) => {
-        const { Trigger } = SIDEBARS[sidebarId];
-        const isActive = sidebarId === currentSidebar;
-        return (
-          <div
-            className={classNames('mt-3', { 'border-primary-700': isActive })}
-            style={{ borderBottom: isActive ? '2px solid' : null }}
-            key={sidebarId}
-          >
-            <Trigger onClick={() => toggleSidebar(sidebarId)} key={sidebarId} />
-          </div>
-        );
-      })}
-    </div>
+    <section className="d-flex ml-auto">
+      {SIDEBAR_ORDER.map((sidebarId) => (
+        <TriggerButton sidebarId={sidebarId} />
+      ))}
+    </section>
   );
 }
 
diff --git a/src/courseware/course/sidebar/TriggerButton.jsx b/src/courseware/course/sidebar/TriggerButton.jsx
new file mode 100644
index 0000000000..4d5b91bc1c
--- /dev/null
+++ b/src/courseware/course/sidebar/TriggerButton.jsx
@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import SidebarContext from './SidebarContext';
+import { SIDEBARS } from './sidebars';
+
+function TriggerButton({
+  sidebarId,
+}) {
+  const {
+    toggleSidebar,
+    currentSidebar,
+  } = useContext(SidebarContext);
+  const { Trigger } = SIDEBARS[sidebarId];
+  const isActive = sidebarId === currentSidebar;
+  return (
+    <section
+      className={classNames('mt-3', { 'border-primary-700': isActive })}
+      style={{ borderBottom: isActive ? '2px solid' : null }}
+      key={sidebarId}
+    >
+      <Trigger onClick={() => toggleSidebar(sidebarId)} key={sidebarId} />
+    </section>
+  );
+}
+
+TriggerButton.propTypes = {
+  sidebarId: PropTypes.string.isRequired,
+};
+
+export default TriggerButton;
diff --git a/src/courseware/course/sidebar/sidebars/index.js b/src/courseware/course/sidebar/sidebars/index.js
index 9128fd0e48..79d58edde1 100644
--- a/src/courseware/course/sidebar/sidebars/index.js
+++ b/src/courseware/course/sidebar/sidebars/index.js
@@ -1,7 +1,13 @@
-import * as notifications from './notifications';
-import * as discusssions from './discussions';
+import * as outline from 'courseware/course/sidebar/sidebars/outline';
+import * as notifications from 'courseware/course/sidebar/sidebars/notifications';
+import * as discusssions from 'courseware/course/sidebar/sidebars/discussions';
 
 export const SIDEBARS = {
+  [outline.ID]: {
+    ID: outline.ID,
+    Sidebar: outline.Sidebar,
+    Trigger: outline.Trigger,
+  },
   [notifications.ID]: {
     ID: notifications.ID,
     Sidebar: notifications.Sidebar,
diff --git a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
new file mode 100644
index 0000000000..b06f9a1dcb
--- /dev/null
+++ b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
@@ -0,0 +1,43 @@
+import { ensureConfig, getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import React, { useContext } from 'react';
+import SidebarBase from 'courseware/course/sidebar/common/SidebarBase';
+import SidebarContext from 'courseware/course/sidebar/SidebarContext';
+import { ID } from 'courseware/course/sidebar/sidebars/outline/OutlineTrigger';
+
+import messages from './messages';
+
+ensureConfig(['SIDEBAR_MFE_BASE_URL']);
+
+function OutlineSidebar({ intl }) {
+  const {
+    courseId,
+  } = useContext(SidebarContext);
+
+  const outlineUrl = `${getConfig().SIDEBAR_MFE_BASE_URL}/${courseId}`;
+  return (
+    <SidebarBase
+      title={intl.formatMessage(messages.outlineTitle)}
+      ariaLabel={intl.formatMessage(messages.outlineTitle)}
+      sidebarId={ID}
+      width="40rem"
+      showTitleBar={false}
+    >
+      <iframe
+        src={`${outlineUrl}?inContext`}
+        className="d-flex w-100 border-0"
+        style={{ minHeight: '60rem' }}
+        title={intl.formatMessage(messages.outlineTitle)}
+      />
+    </SidebarBase>
+  );
+}
+
+OutlineSidebar.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+OutlineSidebar.Trigger = OutlineSidebar;
+OutlineSidebar.ID = ID;
+
+export default injectIntl(OutlineSidebar);
diff --git a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.test.jsx b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.test.jsx
new file mode 100644
index 0000000000..fb4edafd35
--- /dev/null
+++ b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.test.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  initializeMockApp, initializeTestStore, render, screen,
+} from 'setupTest';
+import SidebarContext from 'courseware/course/sidebar/SidebarContext';
+import OutlineSidebar from 'courseware/course/sidebar/sidebars/outline/OutlineSidebar';
+
+initializeMockApp();
+
+describe('Outline Sidebar', () => {
+  let mockData;
+  let courseId;
+
+  beforeEach(async () => {
+    const store = await initializeTestStore({
+      excludeFetchCourse: false,
+      excludeFetchSequence: false,
+    });
+    const state = store.getState();
+    courseId = state.courseware.courseId;
+
+    mockData = {
+      courseId,
+      currentSidebar: 'OUTLINE',
+    };
+  });
+
+  function renderWithProvider(testData = {}) {
+    const { container } = render(
+      <SidebarContext.Provider value={{ ...mockData, ...testData }}>
+        <OutlineSidebar />
+      </SidebarContext.Provider>,
+    );
+    return container;
+  }
+
+  it('should show up if courseId associated with it', async () => {
+    renderWithProvider();
+    expect(screen.queryByTitle('Outline')).toBeInTheDocument();
+    expect(screen.queryByTitle('Outline'))
+      .toHaveAttribute('src', `http://localhost:9090/${courseId}?inContext`);
+  });
+});
diff --git a/src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.jsx b/src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.jsx
new file mode 100644
index 0000000000..19d08bc72b
--- /dev/null
+++ b/src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.jsx
@@ -0,0 +1,29 @@
+import { ensureConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { ExpandMore } from '@edx/paragon/icons';
+import PropTypes from 'prop-types';
+import React from 'react';
+import SidebarTriggerBase from 'courseware/course/sidebar/common/TriggerBase';
+import messages from 'courseware/course/sidebar/sidebars/outline/messages';
+
+ensureConfig(['SIDEBAR_MFE_BASE_URL']);
+export const ID = 'OUTLINE';
+
+function OutlineTrigger({
+  intl,
+  onClick,
+}) {
+  return (
+    <SidebarTriggerBase onClick={onClick} ariaLabel={intl.formatMessage(messages.openOutlineTrigger)}>
+      <Icon src={ExpandMore} className="m-0 m-auto" />
+    </SidebarTriggerBase>
+  );
+}
+
+OutlineTrigger.propTypes = {
+  intl: intlShape.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default injectIntl(OutlineTrigger);
diff --git a/src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.test.jsx b/src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.test.jsx
new file mode 100644
index 0000000000..b0999e2521
--- /dev/null
+++ b/src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.test.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  fireEvent, initializeMockApp, initializeTestStore, render, screen,
+} from 'setupTest';
+import SidebarContext from 'courseware/course/sidebar/SidebarContext';
+import OutlineTrigger from 'courseware/course/sidebar/sidebars/outline/OutlineTrigger';
+
+initializeMockApp();
+
+describe('Outline Trigger', () => {
+  let mockData;
+  let courseId;
+
+  beforeEach(async () => {
+    const store = await initializeTestStore({
+      excludeFetchCourse: false,
+      excludeFetchSequence: false,
+    });
+    const state = store.getState();
+    courseId = state.courseware.courseId;
+
+    mockData = {
+      courseId,
+    };
+  });
+
+  function renderWithProvider(testData = {}, onClick = () => null) {
+    const { container } = render(
+      <SidebarContext.Provider value={{ ...mockData, ...testData }}>
+        <OutlineTrigger onClick={onClick} />
+      </SidebarContext.Provider>,
+    );
+    return container;
+  }
+
+  it('shows up and handles onClick', async () => {
+    const clickTrigger = jest.fn();
+    renderWithProvider({}, clickTrigger);
+
+    const notificationTrigger = await screen.findByRole('button', { name: /Show outline sidebar/i });
+    expect(notificationTrigger).toBeInTheDocument();
+    fireEvent.click(notificationTrigger);
+    expect(clickTrigger).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/courseware/course/sidebar/sidebars/outline/index.js b/src/courseware/course/sidebar/sidebars/outline/index.js
new file mode 100644
index 0000000000..d4245976ca
--- /dev/null
+++ b/src/courseware/course/sidebar/sidebars/outline/index.js
@@ -0,0 +1,2 @@
+export { default as Sidebar } from 'courseware/course/sidebar/sidebars/outline/OutlineSidebar';
+export { default as Trigger, ID } from 'courseware/course/sidebar/sidebars/outline/OutlineTrigger';
diff --git a/src/courseware/course/sidebar/sidebars/outline/messages.js b/src/courseware/course/sidebar/sidebars/outline/messages.js
new file mode 100644
index 0000000000..7fe92e7d6a
--- /dev/null
+++ b/src/courseware/course/sidebar/sidebars/outline/messages.js
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  outlineTitle: {
+    id: 'outline.sidebar.title',
+    defaultMessage: 'Outline',
+    description: 'Title text for a outline sidebar where users are able to navigate the course',
+  },
+  openOutlineTrigger: {
+    id: 'outline.sidebar.open.button',
+    defaultMessage: 'Show outline sidebar',
+    description: 'Alt text for a button that opens the outline sidebar feature',
+  },
+});
+
+export default messages;
diff --git a/src/index.jsx b/src/index.jsx
index 8209356540..95f9362c98 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -108,6 +108,7 @@ initialize({
         CREDENTIALS_BASE_URL: process.env.CREDENTIALS_BASE_URL || null,
         CREDIT_HELP_LINK_URL: process.env.CREDIT_HELP_LINK_URL || null,
         DISCUSSIONS_MFE_BASE_URL: process.env.DISCUSSIONS_MFE_BASE_URL || null,
+        SIDEBAR_MFE_BASE_URL: process.env.SIDEBAR_MFE_BASE_URL || null,
         ENTERPRISE_LEARNER_PORTAL_HOSTNAME: process.env.ENTERPRISE_LEARNER_PORTAL_HOSTNAME || null,
         ENABLE_JUMPNAV: process.env.ENABLE_JUMPNAV || null,
         ENABLE_NOTICES: process.env.ENABLE_NOTICES || null,
diff --git a/src/setupTest.js b/src/setupTest.js
index c706e943fe..052769dc91 100755
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -54,6 +54,7 @@ export function initializeMockApp() {
   mergeConfig({
     CONTACT_URL: process.env.CONTACT_URL || null,
     DISCUSSIONS_MFE_BASE_URL: process.env.DISCUSSIONS_MFE_BASE_URL || null,
+    SIDEBAR_MFE_BASE_URL: process.env.SIDEBAR_MFE_BASE_URL || null,
     INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
     STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
     TWITTER_URL: process.env.TWITTER_URL || null,
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
new file mode 100644
index 0000000000..30f52449fc
--- /dev/null
+++ b/webpack.dev.config.js
@@ -0,0 +1,11 @@
+const path = require('path');
+const { createConfig } = require('@edx/frontend-build');
+
+const config = createConfig('webpack-dev');
+
+config.resolve.modules = [
+  path.resolve(__dirname, './src'),
+  'node_modules',
+];
+
+module.exports = config;
diff --git a/webpack.prod.config.js b/webpack.prod.config.js
new file mode 100644
index 0000000000..f346f2371d
--- /dev/null
+++ b/webpack.prod.config.js
@@ -0,0 +1,11 @@
+const path = require('path');
+const { createConfig } = require('@edx/frontend-build');
+
+const config = createConfig('webpack-prod');
+
+config.resolve.modules = [
+  path.resolve(__dirname, './src'),
+  'node_modules',
+];
+
+module.exports = config;

From 4dbd167ec13a3c58fb214d8bc9014ce00d974b44 Mon Sep 17 00:00:00 2001
From: JackSteele24 <jackrsteele04@gmail.com>
Date: Mon, 26 Feb 2024 14:33:31 -0500
Subject: [PATCH 2/8] feat: Getting rid of the olive specific items

---
 .github/workflows/validate.yml | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
index 622999c209..4e80103170 100644
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -1,9 +1,11 @@
 name: validate
 on:
   push:
-    branches: [pearson-release/olive.master]
+    branches: 
+      - master
   pull_request:
-    branches: [pearson-release/olive.master]
+    branches: 
+      - master
 jobs:
   tests:
     runs-on: ubuntu-latest
@@ -18,3 +20,5 @@ jobs:
     - run: make validate.ci
     - name: Upload coverage
       uses: codecov/codecov-action@v3
+      with:
+        fail_ci_if_error: true

From 8fad6dfd723b5ac0539ff2b6987feddd42eb1b19 Mon Sep 17 00:00:00 2001
From: JackSteele24 <jackrsteele04@gmail.com>
Date: Mon, 26 Feb 2024 14:35:35 -0500
Subject: [PATCH 3/8] feat: Adding interaction with sidebar MFE

---
 src/constants.js                              |  3 ++
 src/courseware/CoursewareContainer.jsx        | 31 ++++++++++++++-
 src/courseware/course/Course.jsx              | 32 +++++++++------
 src/courseware/course/Course.test.jsx         |  3 ++
 src/courseware/course/sequence/Sequence.jsx   | 17 +++++++-
 .../course/sequence/Sequence.test.jsx         | 39 +++++++++++++++++++
 .../sidebars/outline/OutlineSidebar.jsx       |  1 +
 src/eventsHandler.js                          | 18 +++++++++
 src/eventsHandler.test.js                     | 31 +++++++++++++++
 9 files changed, 162 insertions(+), 13 deletions(-)
 create mode 100644 src/constants.js
 create mode 100644 src/eventsHandler.js
 create mode 100644 src/eventsHandler.test.js

diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 0000000000..07c94be656
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+
+export const SIDEBAREVENT = 'outline_event';
diff --git a/src/courseware/CoursewareContainer.jsx b/src/courseware/CoursewareContainer.jsx
index f22d840e67..70e00bd3c4 100644
--- a/src/courseware/CoursewareContainer.jsx
+++ b/src/courseware/CoursewareContainer.jsx
@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { history } from '@edx/frontend-platform';
+import { history, getConfig } from '@edx/frontend-platform';
 import { createSelector } from '@reduxjs/toolkit';
 import { defaultMemoize as memoize } from 'reselect';
+import { postEventToIframe } from 'eventsHandler';
+import { SIDEBAREVENT } from 'constants';
 
 import {
   checkBlockCompletion,
@@ -269,6 +271,13 @@ class CoursewareContainer extends Component {
     if (nextSequence !== null) {
       history.push(`/course/${courseId}/${nextSequence.id}/first`);
 
+      // Function to send the event to Outline Navigation SIdebar.
+      postEventToIframe(
+        document.getElementById('OutlineSidebar'),
+        SIDEBAREVENT,
+        [getConfig().SIDEBAR_MFE_BASE_URL],
+      );
+
       const celebrateFirstSection = course && course.celebrations && course.celebrations.firstSection;
       if (celebrateFirstSection && sequence.sectionId !== nextSequence.sectionId) {
         handleNextSectionCelebration(sequenceId, nextSequence.id);
@@ -278,11 +287,30 @@ class CoursewareContainer extends Component {
 
   handlePreviousSequenceClick = () => {
     const { previousSequence, courseId } = this.props;
+
     if (previousSequence !== null) {
       history.push(`/course/${courseId}/${previousSequence.id}/last`);
+
+      // Function to send the event to Outline Navigation SIdebar.
+      postEventToIframe(
+        document.getElementById('OutlineSidebar'),
+        SIDEBAREVENT,
+        [getConfig().SIDEBAR_MFE_BASE_URL],
+      );
     }
   }
 
+  handleOutlineSidebarNavigationClick = (id) => {
+    const {
+      courseId,
+      sequenceId,
+    } = this.props;
+
+    if (id !== null && id !== sequenceId) {
+      history.push(`/course/${courseId}/${id}/first`);
+    }
+  };
+
   render() {
     const {
       courseStatus,
@@ -310,6 +338,7 @@ class CoursewareContainer extends Component {
           nextSequenceHandler={this.handleNextSequenceClick}
           previousSequenceHandler={this.handlePreviousSequenceClick}
           unitNavigationHandler={this.handleUnitNavigationClick}
+          sidebarNavigationClickHandler={this.handleOutlineSidebarNavigationClick}
         />
       </TabPage>
     );
diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index b599a6bdb6..312a36f1cf 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -5,6 +5,8 @@ import { useDispatch } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import { breakpoints, useWindowSize } from '@edx/paragon';
 
+import OutlineSidebar from 'courseware/course/sidebar/sidebars/outline/OutlineSidebar';
+import SidebarOutlineTrigger from 'courseware/course/sidebar/SidebarOutlineTrigger';
 import { AlertList } from '../../generic/user-messages';
 
 import Sequence from './sequence';
@@ -14,7 +16,6 @@ import ContentTools from './content-tools';
 import CourseBreadcrumbs from './CourseBreadcrumbs';
 import SidebarProvider from './sidebar/SidebarContextProvider';
 import SidebarTriggers from './sidebar/SidebarTriggers';
-import SidebarOutlineTrigger from './sidebar/SidebarOutlineTrigger';
 
 import { useModel } from '../../generic/model-store';
 import { getSessionStorage, setSessionStorage } from '../../data/sessionStorage';
@@ -29,6 +30,7 @@ function Course({
   nextSequenceHandler,
   previousSequenceHandler,
   unitNavigationHandler,
+  sidebarNavigationClickHandler,
   windowWidth,
 }) {
   const course = useModel('coursewareMeta', courseId);
@@ -110,16 +112,22 @@ function Course({
       </section>
 
       <AlertList topic="sequence" />
-      <Sequence
-        unitId={unitId}
-        sequenceId={sequenceId}
-        courseId={courseId}
-        unitNavigationHandler={unitNavigationHandler}
-        nextSequenceHandler={nextSequenceHandler}
-        previousSequenceHandler={previousSequenceHandler}
-        //* * [MM-P2P] Experiment */
-        mmp2p={MMP2P}
-      />
+      <section className="sequence-container d-inline-flex flex-row">
+        <OutlineSidebar />
+        <section className="sequence w-100">
+          <Sequence
+            unitId={unitId}
+            sequenceId={sequenceId}
+            courseId={courseId}
+            unitNavigationHandler={unitNavigationHandler}
+            nextSequenceHandler={nextSequenceHandler}
+            previousSequenceHandler={previousSequenceHandler}
+            sidebarNavigationClickHandler={sidebarNavigationClickHandler}
+            //* * [MM-P2P] Experiment */
+            mmp2p={MMP2P}
+          />
+        </section>
+      </section>
       <CelebrationModal
         courseId={courseId}
         isOpen={firstSectionCelebrationOpen}
@@ -145,6 +153,7 @@ Course.propTypes = {
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
   unitNavigationHandler: PropTypes.func.isRequired,
+  sidebarNavigationClickHandler: PropTypes.func,
   windowWidth: PropTypes.number.isRequired,
 };
 
@@ -152,6 +161,7 @@ Course.defaultProps = {
   courseId: null,
   sequenceId: null,
   unitId: null,
+  sidebarNavigationClickHandler: null,
 };
 
 function CourseWrapper(props) {
diff --git a/src/courseware/course/Course.test.jsx b/src/courseware/course/Course.test.jsx
index cd6b0a5a74..25a1c67e43 100644
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -189,6 +189,7 @@ describe('Course', () => {
     const nextSequenceHandler = jest.fn();
     const previousSequenceHandler = jest.fn();
     const unitNavigationHandler = jest.fn();
+    const sidebarNavigationClickHandler = jest.fn();
 
     const courseMetadata = Factory.build('courseMetadata');
     const unitBlocks = Array.from({ length: 3 }).map(() => Factory.build(
@@ -207,6 +208,7 @@ describe('Course', () => {
       nextSequenceHandler,
       previousSequenceHandler,
       unitNavigationHandler,
+      sidebarNavigationClickHandler,
     };
     render(<Course {...testData} />, { store: testStore });
 
@@ -219,6 +221,7 @@ describe('Course', () => {
     expect(previousSequenceHandler).not.toHaveBeenCalled();
     expect(nextSequenceHandler).not.toHaveBeenCalled();
     expect(unitNavigationHandler).toHaveBeenCalledTimes(4);
+    expect(sidebarNavigationClickHandler).not.toHaveBeenCalled();
   });
 
   describe('Sequence alerts display', () => {
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index d1418fcdfa..4739231620 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -39,6 +39,7 @@ function Sequence({
   unitNavigationHandler,
   nextSequenceHandler,
   previousSequenceHandler,
+  sidebarNavigationClickHandler,
   intl,
   mmp2p,
 }) {
@@ -77,6 +78,20 @@ function Sequence({
     unitNavigationHandler(destinationUnitId);
   };
 
+  function handleSidebarNavigation(event) {
+    if (event.data.message === 'outline_sidebar_navigation_started') {
+      sidebarNavigationClickHandler(event.data.subsection_id);
+    }
+  }
+  // Event Listener for frontend-app-sidebar-navigation
+  useEffect(() => {
+    window.addEventListener('message', handleSidebarNavigation);
+    // Cleanup eventListener
+    return () => {
+      window.removeEventListener('message', handleSidebarNavigation);
+    };
+  });
+
   const logEvent = (eventName, widgetPlacement, targetUnitId) => {
     // Note: tabs are tracked with a 1-indexed position
     // as opposed to a 0-index used throughout this MFE
@@ -157,7 +172,6 @@ function Sequence({
 
   const defaultContent = (
     <div className="sequence-container d-inline-flex flex-row">
-      {isOutlineActive ? <Sidebar /> : null}
       <div className={classNames('sequence w-100', { 'position-relative': shouldDisplayNotificationTriggerInSequence })}>
         <SequenceNavigation
           sequenceId={sequenceId}
@@ -253,6 +267,7 @@ Sequence.propTypes = {
   unitNavigationHandler: PropTypes.func.isRequired,
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
+  sidebarNavigationClickHandler: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
 
   /** [MM-P2P] Experiment */
diff --git a/src/courseware/course/sequence/Sequence.test.jsx b/src/courseware/course/sequence/Sequence.test.jsx
index 0836c2c9f3..cd1d0aa60e 100644
--- a/src/courseware/course/sequence/Sequence.test.jsx
+++ b/src/courseware/course/sequence/Sequence.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Factory } from 'rosie';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { breakpoints } from '@edx/paragon';
+import { act } from 'react-dom/test-utils';
 import {
   loadUnit, render, screen, fireEvent, waitFor, initializeTestStore,
 } from '../../../setupTest';
@@ -32,6 +33,7 @@ describe('Sequence', () => {
       previousSequenceHandler: () => {},
       toggleNotificationTray: () => {},
       setNotificationStatus: () => {},
+      sidebarNavigationClickHandler: () => {},
     };
   });
 
@@ -236,6 +238,7 @@ describe('Sequence', () => {
         unitNavigationHandler: jest.fn(),
         previousSequenceHandler: jest.fn(),
         nextSequenceHandler: jest.fn(),
+        sidebarNavigationClickHandler: jest.fn(),
       };
       render(<Sequence {...testData} />, { store: testStore });
       await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).toBeInTheDocument());
@@ -246,6 +249,7 @@ describe('Sequence', () => {
 
       fireEvent.click(screen.getByRole('button', { name: /next/i }));
       expect(testData.nextSequenceHandler).not.toHaveBeenCalled();
+      expect(testData.sidebarNavigationClickHandler).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`.
       expect(testData.unitNavigationHandler).toHaveBeenNthCalledWith(2, unitBlocks[unitNumber + 1].id);
@@ -260,6 +264,7 @@ describe('Sequence', () => {
         sequenceId: sequenceBlocks[0].id,
         unitNavigationHandler: jest.fn(),
         previousSequenceHandler: jest.fn(),
+        sidebarNavigationClickHandler: jest.fn(),
       };
       render(<Sequence {...testData} />, { store: testStore });
       loadUnit();
@@ -269,6 +274,7 @@ describe('Sequence', () => {
 
       expect(testData.previousSequenceHandler).not.toHaveBeenCalled();
       expect(testData.unitNavigationHandler).not.toHaveBeenCalled();
+      expect(testData.sidebarNavigationClickHandler).not.toHaveBeenCalled();
       expect(sendTrackEvent).not.toHaveBeenCalled();
     });
 
@@ -279,6 +285,7 @@ describe('Sequence', () => {
         sequenceId: sequenceBlocks[sequenceBlocks.length - 1].id,
         unitNavigationHandler: jest.fn(),
         nextSequenceHandler: jest.fn(),
+        sidebarNavigationClickHandler: jest.fn(),
       };
       render(<Sequence {...testData} />, { store: testStore });
       loadUnit();
@@ -288,6 +295,7 @@ describe('Sequence', () => {
 
       expect(testData.nextSequenceHandler).not.toHaveBeenCalled();
       expect(testData.unitNavigationHandler).not.toHaveBeenCalled();
+      expect(testData.sidebarNavigationClickHandler).not.toHaveBeenCalled();
       expect(sendTrackEvent).not.toHaveBeenCalled();
     });
 
@@ -320,6 +328,7 @@ describe('Sequence', () => {
         unitNavigationHandler: jest.fn(),
         previousSequenceHandler: jest.fn(),
         nextSequenceHandler: jest.fn(),
+        sidebarNavigationClickHandler: jest.fn(),
       };
 
       render(<Sequence {...testData} />, { store: innerTestStore });
@@ -329,10 +338,12 @@ describe('Sequence', () => {
       screen.getAllByRole('button', { name: /previous/i }).forEach(button => fireEvent.click(button));
       expect(testData.previousSequenceHandler).toHaveBeenCalledTimes(2);
       expect(testData.unitNavigationHandler).not.toHaveBeenCalled();
+      expect(testData.sidebarNavigationClickHandler).not.toHaveBeenCalled();
 
       screen.getAllByRole('button', { name: /next/i }).forEach(button => fireEvent.click(button));
       expect(testData.nextSequenceHandler).toHaveBeenCalledTimes(2);
       expect(testData.unitNavigationHandler).not.toHaveBeenCalled();
+      expect(testData.sidebarNavigationClickHandler).not.toHaveBeenCalled();
 
       expect(sendTrackEvent).toHaveBeenNthCalledWith(1, 'edx.ui.lms.sequence.previous_selected', {
         current_tab: 1,
@@ -419,3 +430,31 @@ describe('Sequence', () => {
     });
   });
 });
+
+describe('window.addEventListener', () => {
+  it('calls sidebarNavigationClickHandler with the correct argument', () => {
+    global.window = Object.create(window);
+    const sidebarNavigationClickHandler = jest.fn();
+
+    // Add Event listener.
+    window.addEventListener('message', event => {
+      if (event.data.message === 'outline_sidebar_navigation_started') {
+        sidebarNavigationClickHandler(event.data.subsection_id);
+      }
+    });
+
+    const event = {
+      data: {
+        message: 'outline_sidebar_navigation_started',
+        subsection_id: 'xBlockSubsectionId',
+      },
+    };
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', event));
+    });
+
+    // Assert that the sidebarNavigationClickHandler function was called with the correct argument
+    expect(sidebarNavigationClickHandler).toHaveBeenCalledWith('xBlockSubsectionId');
+  });
+});
diff --git a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
index b06f9a1dcb..27ceaa37bc 100644
--- a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
+++ b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
@@ -24,6 +24,7 @@ function OutlineSidebar({ intl }) {
       showTitleBar={false}
     >
       <iframe
+        id="OutlineSidebar"
         src={`${outlineUrl}?inContext`}
         className="d-flex w-100 border-0"
         style={{ minHeight: '60rem' }}
diff --git a/src/eventsHandler.js b/src/eventsHandler.js
new file mode 100644
index 0000000000..195a988c91
--- /dev/null
+++ b/src/eventsHandler.js
@@ -0,0 +1,18 @@
+/* eslint-disable import/prefer-default-export */
+
+/**
+ * Helper function to make a postEvent call to Iframe.
+ * @param {object} iframe document.getElementById('iframeId');
+ * @param {string} message with the name of the event
+ * @param {object} messageTargets targets to send event
+ */
+export function postEventToIframe(iframe, message, messageTargets) {
+  if (iframe !== null) {
+    messageTargets.forEach(target => {
+      iframe.contentWindow.postMessage(
+        { message },
+        target,
+      );
+    });
+  }
+}
diff --git a/src/eventsHandler.test.js b/src/eventsHandler.test.js
new file mode 100644
index 0000000000..091ed5e537
--- /dev/null
+++ b/src/eventsHandler.test.js
@@ -0,0 +1,31 @@
+import { postEventToIframe } from './eventsHandler';
+
+describe('postEventToIframe', () => {
+  test('sends a message to the iframe', () => {
+    const iframe = {
+      contentWindow: {
+        postMessage: jest.fn(),
+      },
+    };
+    const message = 'event_sucess';
+    const messageTargets = ['http://localhost:2000'];
+
+    postEventToIframe(iframe, message, messageTargets);
+
+    expect(iframe.contentWindow.postMessage).toHaveBeenCalledWith(
+      { message },
+      messageTargets[0],
+    );
+  });
+
+  test('if iframe is null, does not call postMessage', () => {
+    const iframe = null;
+    const message = 'event_success';
+    const messageTargets = ['http://localhost:2000'];
+    const postMessageMock = jest.fn();
+
+    postEventToIframe(iframe, message, messageTargets);
+
+    expect(postMessageMock).not.toHaveBeenCalled();
+  });
+});

From 5f87323875c47364fd3bca6a6240638e6d59dd40 Mon Sep 17 00:00:00 2001
From: JackSteele24 <jackrsteele04@gmail.com>
Date: Mon, 4 Mar 2024 15:49:43 -0500
Subject: [PATCH 4/8] fix: Correcting filepaths to match the current structure

---
 src/courseware/CoursewareContainer.jsx                      | 4 ++--
 src/courseware/course/Course.jsx                            | 4 ++--
 src/courseware/course/sequence/Sequence.jsx                 | 4 ++--
 src/courseware/course/sidebar/SidebarOutlineTrigger.jsx     | 4 ++--
 src/courseware/course/sidebar/SidebarTriggers.jsx           | 4 ++--
 src/courseware/course/sidebar/sidebars/index.js             | 6 +++---
 .../course/sidebar/sidebars/outline/OutlineSidebar.jsx      | 6 +++---
 .../course/sidebar/sidebars/outline/OutlineTrigger.jsx      | 4 ++--
 src/courseware/course/sidebar/sidebars/outline/index.js     | 4 ++--
 9 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/courseware/CoursewareContainer.jsx b/src/courseware/CoursewareContainer.jsx
index 70e00bd3c4..96515d6e1f 100644
--- a/src/courseware/CoursewareContainer.jsx
+++ b/src/courseware/CoursewareContainer.jsx
@@ -4,8 +4,8 @@ import { connect } from 'react-redux';
 import { history, getConfig } from '@edx/frontend-platform';
 import { createSelector } from '@reduxjs/toolkit';
 import { defaultMemoize as memoize } from 'reselect';
-import { postEventToIframe } from 'eventsHandler';
-import { SIDEBAREVENT } from 'constants';
+import { postEventToIframe } from '../eventsHandler';
+import { SIDEBAREVENT } from '../constants';
 
 import {
   checkBlockCompletion,
diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index 312a36f1cf..ff0b48f47f 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -5,8 +5,8 @@ import { useDispatch } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import { breakpoints, useWindowSize } from '@edx/paragon';
 
-import OutlineSidebar from 'courseware/course/sidebar/sidebars/outline/OutlineSidebar';
-import SidebarOutlineTrigger from 'courseware/course/sidebar/SidebarOutlineTrigger';
+import OutlineSidebar from './sidebar/sidebars/outline/OutlineSidebar';
+import SidebarOutlineTrigger from './sidebar/SidebarOutlineTrigger';
 import { AlertList } from '../../generic/user-messages';
 
 import Sequence from './sequence';
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 4739231620..43b77fa238 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -14,8 +14,8 @@ import { history } from '@edx/frontend-platform';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import { breakpoints, useWindowSize } from '@edx/paragon';
 
-import SidebarContext from 'courseware/course/sidebar/SidebarContext';
-import { ID } from 'courseware/course/sidebar/sidebars/outline/OutlineTrigger';
+import SidebarContext from '../sidebar/SidebarContext';
+import { ID } from '../sidebar/sidebars/outline/OutlineTrigger';
 import PageLoading from '../../../generic/PageLoading';
 import { useModel } from '../../../generic/model-store';
 import { useSequenceBannerTextAlert, useSequenceEntranceExamAlert } from '../../../alerts/sequence-alerts/hooks';
diff --git a/src/courseware/course/sidebar/SidebarOutlineTrigger.jsx b/src/courseware/course/sidebar/SidebarOutlineTrigger.jsx
index cf82a3b8b6..bc4978651f 100644
--- a/src/courseware/course/sidebar/SidebarOutlineTrigger.jsx
+++ b/src/courseware/course/sidebar/SidebarOutlineTrigger.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import TriggerButton from 'courseware/course/sidebar/TriggerButton';
-import { ID } from 'courseware/course/sidebar/sidebars/outline/OutlineTrigger';
+import TriggerButton from './TriggerButton';
+import { ID } from './sidebars/outline/OutlineTrigger';
 
 function SidebarOutlineTrigger() {
   return (
diff --git a/src/courseware/course/sidebar/SidebarTriggers.jsx b/src/courseware/course/sidebar/SidebarTriggers.jsx
index 45e42230b4..67c3aa67f2 100644
--- a/src/courseware/course/sidebar/SidebarTriggers.jsx
+++ b/src/courseware/course/sidebar/SidebarTriggers.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { SIDEBAR_ORDER } from 'courseware/course/sidebar/sidebars';
-import TriggerButton from 'courseware/course/sidebar/TriggerButton';
+import { SIDEBAR_ORDER } from './sidebars';
+import TriggerButton from './TriggerButton';
 
 function SidebarTriggers() {
   return (
diff --git a/src/courseware/course/sidebar/sidebars/index.js b/src/courseware/course/sidebar/sidebars/index.js
index 79d58edde1..9b3494faf6 100644
--- a/src/courseware/course/sidebar/sidebars/index.js
+++ b/src/courseware/course/sidebar/sidebars/index.js
@@ -1,6 +1,6 @@
-import * as outline from 'courseware/course/sidebar/sidebars/outline';
-import * as notifications from 'courseware/course/sidebar/sidebars/notifications';
-import * as discusssions from 'courseware/course/sidebar/sidebars/discussions';
+import * as outline from './outline';
+import * as notifications from './notifications';
+import * as discusssions from './discussions';
 
 export const SIDEBARS = {
   [outline.ID]: {
diff --git a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
index 27ceaa37bc..dbf7d3cea8 100644
--- a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
+++ b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
@@ -1,9 +1,9 @@
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import React, { useContext } from 'react';
-import SidebarBase from 'courseware/course/sidebar/common/SidebarBase';
-import SidebarContext from 'courseware/course/sidebar/SidebarContext';
-import { ID } from 'courseware/course/sidebar/sidebars/outline/OutlineTrigger';
+import SidebarBase from '../../common/SidebarBase';
+import SidebarContext from '../../SidebarContext';
+import { ID } from './OutlineTrigger';
 
 import messages from './messages';
 
diff --git a/src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.jsx b/src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.jsx
index 19d08bc72b..25ba92a3a3 100644
--- a/src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.jsx
+++ b/src/courseware/course/sidebar/sidebars/outline/OutlineTrigger.jsx
@@ -4,8 +4,8 @@ import { Icon } from '@edx/paragon';
 import { ExpandMore } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 import React from 'react';
-import SidebarTriggerBase from 'courseware/course/sidebar/common/TriggerBase';
-import messages from 'courseware/course/sidebar/sidebars/outline/messages';
+import SidebarTriggerBase from '../../common/TriggerBase';
+import messages from './messages';
 
 ensureConfig(['SIDEBAR_MFE_BASE_URL']);
 export const ID = 'OUTLINE';
diff --git a/src/courseware/course/sidebar/sidebars/outline/index.js b/src/courseware/course/sidebar/sidebars/outline/index.js
index d4245976ca..6b2c303550 100644
--- a/src/courseware/course/sidebar/sidebars/outline/index.js
+++ b/src/courseware/course/sidebar/sidebars/outline/index.js
@@ -1,2 +1,2 @@
-export { default as Sidebar } from 'courseware/course/sidebar/sidebars/outline/OutlineSidebar';
-export { default as Trigger, ID } from 'courseware/course/sidebar/sidebars/outline/OutlineTrigger';
+export { default as Sidebar } from './OutlineSidebar';
+export { default as Trigger, ID } from './OutlineTrigger';

From 01a102e6351a9783c7327a2898634c2e31b9e450 Mon Sep 17 00:00:00 2001
From: JackSteele24 <jackrsteele04@gmail.com>
Date: Mon, 4 Mar 2024 15:53:05 -0500
Subject: [PATCH 5/8] fix: Changing the Sidebar MFE Base URL to
 apps.local.edly.io

This is in order to match the site origin that is expected by the XFrame-options.
---
 .env.development | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.development b/.env.development
index 499b947c78..0c68567558 100644
--- a/.env.development
+++ b/.env.development
@@ -11,7 +11,7 @@ CREDIT_HELP_LINK_URL='https://edx.readthedocs.io/projects/edx-guide-for-students
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
-SIDEBAR_MFE_BASE_URL='http://localhost:9090'
+SIDEBAR_MFE_BASE_URL='http://apps.local.edly.io:9090'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''

From ca487f19550cce15eb50c772b978495b09201943 Mon Sep 17 00:00:00 2001
From: JackSteele24 <jackrsteele04@gmail.com>
Date: Fri, 29 Mar 2024 15:17:17 -0400
Subject: [PATCH 6/8] feat(unit-links): Adding unitId into the url for the
 iframe

---
 .../course/sidebar/sidebars/outline/OutlineSidebar.jsx    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
index dbf7d3cea8..ee0660c514 100644
--- a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
+++ b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
@@ -9,12 +9,14 @@ import messages from './messages';
 
 ensureConfig(['SIDEBAR_MFE_BASE_URL']);
 
-function OutlineSidebar({ intl }) {
+function OutlineSidebar({
+  intl,
+}) {
   const {
     courseId,
+    unitId,
   } = useContext(SidebarContext);
-
-  const outlineUrl = `${getConfig().SIDEBAR_MFE_BASE_URL}/${courseId}`;
+  const outlineUrl = `${getConfig().SIDEBAR_MFE_BASE_URL}/${courseId}/${unitId}`;
   return (
     <SidebarBase
       title={intl.formatMessage(messages.outlineTitle)}

From f8a30892b25ea6219d98f823b4ddb1b4f9db09c6 Mon Sep 17 00:00:00 2001
From: JackSteele24 <jackrsteele04@gmail.com>
Date: Fri, 29 Mar 2024 15:47:48 -0400
Subject: [PATCH 7/8] feat(unit-links): Fixing test cases with unitId in URL

---
 .../course/sidebar/sidebars/outline/OutlineSidebar.test.jsx  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.test.jsx b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.test.jsx
index fb4edafd35..5fb1fb3656 100644
--- a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.test.jsx
@@ -10,6 +10,7 @@ initializeMockApp();
 describe('Outline Sidebar', () => {
   let mockData;
   let courseId;
+  let unitId;
 
   beforeEach(async () => {
     const store = await initializeTestStore({
@@ -18,9 +19,11 @@ describe('Outline Sidebar', () => {
     });
     const state = store.getState();
     courseId = state.courseware.courseId;
+    unitId = '';
 
     mockData = {
       courseId,
+      unitId,
       currentSidebar: 'OUTLINE',
     };
   });
@@ -38,6 +41,6 @@ describe('Outline Sidebar', () => {
     renderWithProvider();
     expect(screen.queryByTitle('Outline')).toBeInTheDocument();
     expect(screen.queryByTitle('Outline'))
-      .toHaveAttribute('src', `http://localhost:9090/${courseId}?inContext`);
+      .toHaveAttribute('src', `http://localhost:9090/${courseId}/${unitId}?inContext`);
   });
 });

From 08033bcc83d17456d9f7395b498df5fcbf9ca2a7 Mon Sep 17 00:00:00 2001
From: JackSteele24 <jackrsteele04@gmail.com>
Date: Wed, 24 Apr 2024 15:17:18 -0400
Subject: [PATCH 8/8] feat: Preventing the entire page from scrolling when
 sidebar auto-scrolls

---
 .../course/sidebar/sidebars/outline/OutlineSidebar.jsx   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
index ee0660c514..304fef863f 100644
--- a/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
+++ b/src/courseware/course/sidebar/sidebars/outline/OutlineSidebar.jsx
@@ -17,6 +17,15 @@ function OutlineSidebar({
     unitId,
   } = useContext(SidebarContext);
   const outlineUrl = `${getConfig().SIDEBAR_MFE_BASE_URL}/${courseId}/${unitId}`;
+  const savedScrollPosition = window.scrollY;
+  let allowScroll = true;
+  window.addEventListener('scroll', () => {
+    if (allowScroll) {
+      window.scrollTo(0, savedScrollPosition);
+    }
+    allowScroll = false;
+  });
+
   return (
     <SidebarBase
       title={intl.formatMessage(messages.outlineTitle)}