Merge pull request #31 from CUCWD/feature.nutmeg/jrsteel/sidebar-navi…

…gation-integration

Sidebar Navigation Integration

.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=''

.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://apps.local.edly.io:9090'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''

.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=''

.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: {

.github/workflows/validate.yml

@@ -1,11 +1,11 @@
 name: validate
 on:
   push:
-    branches:
-    - master
+    branches: 
+      - master
   pull_request:
-    branches:
-    - '**'
+    branches: 
+      - master
 jobs:
   tests:
     runs-on: ubuntu-latest

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.

jest.config.js

@@ -1,6 +1,7 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
+  modulePaths: ['src'],
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],

src/constants.js

@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+
+export const SIDEBAREVENT = 'outline_event';

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

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 './sidebar/sidebars/outline/OutlineSidebar';
+import SidebarOutlineTrigger from './sidebar/SidebarOutlineTrigger';
 import { AlertList } from '../../generic/user-messages';
 
 import Sequence from './sequence';
@@ -28,6 +30,7 @@ function Course({
   nextSequenceHandler,
   previousSequenceHandler,
   unitNavigationHandler,
+  sidebarNavigationClickHandler,
   windowWidth,
 }) {
   const course = useModel('coursewareMeta', courseId);
@@ -88,7 +91,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,19 +104,30 @@ function Course({
         {shouldDisplayTriggers && (
           <SidebarTriggers />
         )}
-      </div>
+      </section>
+      <section className="d-flex mr-auto p-2">
+        {shouldDisplayTriggers && (
+          <SidebarOutlineTrigger />
+        )}
+      </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}
@@ -139,13 +153,15 @@ Course.propTypes = {
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
   unitNavigationHandler: PropTypes.func.isRequired,
+  sidebarNavigationClickHandler: PropTypes.func,
   windowWidth: PropTypes.number.isRequired,
 };
 
 Course.defaultProps = {
   courseId: null,
   sequenceId: null,
   unitId: null,
+  sidebarNavigationClickHandler: null,
 };
 
 function CourseWrapper(props) {

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', () => {

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 '../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';
@@ -37,6 +39,7 @@ function Sequence({
   unitNavigationHandler,
   nextSequenceHandler,
   previousSequenceHandler,
+  sidebarNavigationClickHandler,
   intl,
   mmp2p,
 }) {
@@ -75,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
@@ -148,6 +165,11 @@ 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">
       <div className={classNames('sequence w-100', { 'position-relative': shouldDisplayNotificationTriggerInSequence })}>
@@ -202,7 +224,7 @@ function Sequence({
           )}
         </div>
       </div>
-      <Sidebar />
+      {isOutlineActive ? null : <Sidebar />}
 
       {/** [MM-P2P] Experiment */}
       {(mmp2p.state.isEnabled && mmp2p.flyover.isVisible) && (
@@ -245,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 */