feat: Updated Xpert component to be lazy loaded

package-lock.json

@@ -12,7 +12,7 @@
       "dependencies": {
         "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
         "@edx/browserslist-config": "1.2.0",
-        "@edx/frontend-component-header": "^5.8.0",
+        "@edx/frontend-component-header": "^5.3.3",
         "@edx/frontend-lib-learning-assistant": "^2.2.4",
         "@edx/frontend-lib-special-exams": "^3.1.3",
         "@edx/frontend-platform": "^8.0.0",
@@ -2323,19 +2323,18 @@
       }
     },
     "node_modules/@edx/frontend-component-header": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-5.8.0.tgz",
-      "integrity": "sha512-AgLgt1y5vrqx6cU3IDr7HKngJImTN48gCIaXdCQ4YhR4PpX3p+ZS9R5Ih0dapWtvnX0Oo2hT2ggUKORV0h90rw==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-5.3.4.tgz",
+      "integrity": "sha512-niuaXu0+qWPHud9Bs1pqmNXvZc9jpf8WS270/2YEH5owokd+BiDwQ6MWkvS9qbuQIVGPGTSZFFTttUKmQO5O0A==",
+      "license": "AGPL-3.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "6.6.0",
         "@fortawesome/free-brands-svg-icons": "6.6.0",
         "@fortawesome/free-regular-svg-icons": "6.6.0",
         "@fortawesome/free-solid-svg-icons": "6.6.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@openedx/frontend-plugin-framework": "^1.3.0",
         "axios-mock-adapter": "1.22.0",
         "babel-polyfill": "6.26.0",
-        "classnames": "^2.5.1",
         "jest-environment-jsdom": "^29.7.0",
         "react-responsive": "8.2.0",
         "react-transition-group": "4.4.5"
@@ -2345,8 +2344,7 @@
         "@openedx/paragon": ">= 21.5.7 < 23.0.0",
         "prop-types": "^15.5.10",
         "react": "^16.9.0 || ^17.0.0",
-        "react-dom": "^16.9.0 || ^17.0.0",
-        "react-router-dom": "^6.14.2"
+        "react-dom": "^16.9.0 || ^17.0.0"
       }
     },
     "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/free-brands-svg-icons": {
@@ -7276,9 +7274,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001669",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz",
-      "integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==",
+      "version": "1.0.30001668",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz",
+      "integrity": "sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==",
       "funding": [
         {
           "type": "opencollective",

package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-component-header": "^5.8.0",
+    "@edx/frontend-component-header": "^5.3.3",
     "@edx/frontend-lib-learning-assistant": "^2.2.4",
     "@edx/frontend-lib-special-exams": "^3.1.3",
     "@edx/frontend-platform": "^8.0.0",

src/course-home/goal-unsubscribe/GoalUnsubscribe.jsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import HeaderSlot from '../../plugin-slots/HeaderSlot';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
 import PageLoading from '../../generic/PageLoading';
 import { unsubscribeFromCourseGoal } from '../data/api';
 
@@ -38,7 +38,7 @@ const GoalUnsubscribe = ({ intl }) => {
 
   return (
     <>
-      <HeaderSlot showUserDropdown={false} />
+      <Header showUserDropdown={false} />
       <main id="main-content" className="container my-5 text-center">
         {isLoading && (
           <PageLoading srMessage={`${intl.formatMessage(messages.loading)}`} />

src/courseware/course/chat/Chat.jsx

@@ -1,13 +1,15 @@
+import { Suspense, lazy } from 'react';
 import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { Xpert } from '@edx/frontend-lib-learning-assistant';
 import { injectIntl } from '@edx/frontend-platform/i18n';
 
 import { VERIFIED_MODES } from '@src/constants';
 import { useModel } from '../../../generic/model-store';
 
+const Xpert = lazy(async () => ({ default: (await import('@edx/frontend-lib-learning-assistant')).Xpert }));
+
 const Chat = ({
   enabled,
   enrollmentMode,
@@ -54,7 +56,11 @@ const Chat = ({
     <>
       {/* Use a portal to ensure that component overlay does not compete with learning MFE styles. */}
       {shouldDisplayChat && (createPortal(
-        <Xpert courseId={courseId} contentToolsEnabled={contentToolsEnabled} unitId={unitId} />,
+        <div data-testid="xpert-portal">
+          <Suspense fallback={null}>
+            <Xpert courseId={courseId} contentToolsEnabled={contentToolsEnabled} unitId={unitId} />
+          </Suspense>
+        </div>,
         document.body,
       ))}
     </>

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

@@ -78,11 +78,13 @@ describe('Chat', () => {
           { store },
         );
 
-        const chat = screen.queryByTestId(mockXpertTestId);
+        const portal = screen.queryByTestId('xpert-portal');
+
         if (test.isVisible) {
-          expect(chat).toBeInTheDocument();
+          expect(portal).toBeInTheDocument();
+          expect(await screen.findByTestId(mockXpertTestId)).toBeInTheDocument();
         } else {
-          expect(chat).not.toBeInTheDocument();
+          expect(portal).not.toBeInTheDocument();
         }
       },
     );

src/generic/CourseAccessErrorPage.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
 import { useParams, Navigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import FooterSlot from '@openedx/frontend-slot-footer';
 import { LOADED, LOADING } from '@src/constants';
-import HeaderSlot from '../plugin-slots/HeaderSlot';
 import useActiveEnterpriseAlert from '../alerts/active-enteprise-alert';
 import { AlertList } from './user-messages';
 import { fetchDiscussionTab } from '../course-home/data/thunks';
@@ -28,7 +28,7 @@ const CourseAccessErrorPage = ({ intl }) => {
   if (courseStatus === LOADING) {
     return (
       <>
-        <HeaderSlot />
+        <Header />
         <PageLoading
           srMessage={intl.formatMessage(messages.loading)}
         />
@@ -41,7 +41,7 @@ const CourseAccessErrorPage = ({ intl }) => {
   }
   return (
     <>
-      <HeaderSlot />
+      <Header />
       <main id="main-content" className="container my-5 text-center" data-testid="access-denied-main">
         <AlertList
           topic="outline"

src/plugin-slots/HeaderSlot/README.md

@@ -1,51 +0,0 @@
-# Header Slot
-
-### Slot ID: `header_slot`
-### Props:
-* `courseOrg`
-* `courseNumber`
-* `courseTitle`
-* `showUserDropdown`
-
-## Description
-
-This slot is used to replace/modify/hide the entire learning header.
-
-## Example
-
-The following `env.config.jsx` will replace the learning header entirely.
-
-![Screenshot of custom component](./images/header_custom_component.png)
-
-```js
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    header_slot: {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_header_component',
-            type: DIRECT_PLUGIN,
-            RenderWidget: ({courseOrg, courseNumber, courseTitle, showUserDropdown}) => (
-              <>
-                <h1 style={{textAlign: 'center'}}>🌞</h1>
-                <p style={{textAlign: 'center'}}>courseOrg: {courseOrg}</p>
-                <p style={{textAlign: 'center'}}>courseNumber: {courseNumber}</p>
-                <p style={{textAlign: 'center'}}>courseTitle: {courseTitle}</p>
-                <p style={{textAlign: 'center'}}>showUserDropdown: {showUserDropdown ? '👍' : '👎'}</p>
-                <h1 style={{textAlign: 'center'}}>🌚</h1>
-              </>
-            ),
-          },
-        },
-      ]
-    }
-  },
-}
-
-export default config;
-```

src/plugin-slots/HeaderSlot/index.jsx

@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-
-import { LearningHeader as Header } from '@edx/frontend-component-header';
-
-const HeaderSlot = ({
-  courseOrg, courseNumber, courseTitle, showUserDropdown,
-}) => (
-  <PluginSlot
-    id="header_slot"
-    slotOptions={{
-      mergeProps: true,
-    }}
-    pluginProps={{
-      courseOrg,
-      courseNumber,
-      courseTitle,
-      showUserDropdown,
-    }}
-  >
-    <Header
-      courseOrg={courseOrg}
-      courseNumber={courseNumber}
-      courseTitle={courseTitle}
-      showUserDropdown={showUserDropdown}
-    />
-  </PluginSlot>
-);
-
-HeaderSlot.propTypes = {
-  courseOrg: PropTypes.string,
-  courseNumber: PropTypes.string,
-  courseTitle: PropTypes.string,
-  showUserDropdown: PropTypes.bool,
-};
-
-HeaderSlot.defaultProps = {
-  courseOrg: null,
-  courseNumber: null,
-  courseTitle: null,
-  showUserDropdown: true,
-};
-
-export default HeaderSlot;

src/plugin-slots/README.md

@@ -1,6 +1,5 @@
 # `frontend-app-learning` Plugin Slots
 
-* [`header_slot`](./HeaderSlot/)
 * [`footer_slot`](./FooterSlot/)
 * [`sequence_container_slot`](./SequenceContainerSlot/)
 * [`unit_title_slot`](./UnitTitleSlot/)

src/tab-page/TabPage.jsx

@@ -5,8 +5,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Navigate } from 'react-router-dom';
 
 import { Toast } from '@openedx/paragon';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
 import FooterSlot from '@openedx/frontend-slot-footer';
-import HeaderSlot from '../plugin-slots/HeaderSlot';
 import PageLoading from '../generic/PageLoading';
 import { getAccessDeniedRedirectUrl } from '../shared/access';
 import { useModel } from '../generic/model-store';
@@ -64,7 +64,7 @@ const TabPage = ({ intl, ...props }) => {
         </>
       )}
 
-      <HeaderSlot courseOrg={org} courseNumber={number} courseTitle={title} />
+      <Header courseOrg={org} courseNumber={number} courseTitle={title} />
 
       {courseStatus === 'loading' && (
         <PageLoading srMessage={intl.formatMessage(messages.loading)} />