feat: update to header with new FPF pluginProps (#1525)

Co-authored-by: abdullahwaheed <42172960+abdullahwaheed@users.noreply.github.com>

Makefile

@@ -55,6 +55,7 @@ validate:
 	make validate-no-uncommitted-package-lock-changes
 	npm run i18n_extract
 	npm run lint -- --max-warnings 0
+	npm run types
 	npm run test
 	npm run build
 	npm run bundlewatch

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.3.3",
+        "@edx/frontend-component-header": "^5.8.0",
         "@edx/frontend-lib-learning-assistant": "^2.2.4",
         "@edx/frontend-lib-special-exams": "^3.1.3",
         "@edx/frontend-platform": "^8.0.0",
@@ -2323,18 +2323,19 @@
       }
     },
     "node_modules/@edx/frontend-component-header": {
-      "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",
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-5.8.0.tgz",
+      "integrity": "sha512-AgLgt1y5vrqx6cU3IDr7HKngJImTN48gCIaXdCQ4YhR4PpX3p+ZS9R5Ih0dapWtvnX0Oo2hT2ggUKORV0h90rw==",
       "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"
@@ -2344,7 +2345,8 @@
         "@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-dom": "^16.9.0 || ^17.0.0",
+        "react-router-dom": "^6.14.2"
       }
     },
     "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/free-brands-svg-icons": {
@@ -7274,9 +7276,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001664",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001664.tgz",
-      "integrity": "sha512-AmE7k4dXiNKQipgn7a2xg558IRqPN3jMQY/rOsbxDhrd0tyChwbITBfiwtnqz8bi2M5mIWbxAYBvk7W7QBUS2g==",
+      "version": "1.0.30001669",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz",
+      "integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==",
       "funding": [
         {
           "type": "opencollective",

package.json

@@ -13,14 +13,15 @@
     "build": "fedx-scripts webpack",
     "bundlewatch": "bundlewatch",
     "i18n_extract": "fedx-scripts formatjs extract",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "prepare": "husky install",
     "postinstall": "patch-package",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "dev": "PUBLIC_PATH=/learning/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "types": "tsc --noEmit"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -34,7 +35,7 @@
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-component-header": "^5.3.3",
+    "@edx/frontend-component-header": "^5.8.0",
     "@edx/frontend-lib-learning-assistant": "^2.2.4",
     "@edx/frontend-lib-special-exams": "^3.1.3",
     "@edx/frontend-platform": "^8.0.0",

src/constants.ts

@@ -16,7 +16,7 @@ export const DECODE_ROUTES = {
   ],
   REDIRECT_HOME: 'home/:courseId',
   REDIRECT_SURVEY: 'survey/:courseId',
-};
+} as const satisfies Readonly<{ [k: string]: string | readonly string[] }>;
 
 export const ROUTES = {
   UNSUBSCRIBE: '/goal-unsubscribe/:token',
@@ -25,7 +25,7 @@ export const ROUTES = {
   DASHBOARD: 'dashboard',
   ENTERPRISE_LEARNER_DASHBOARD: 'enterprise-learner-dashboard',
   CONSENT: 'consent',
-};
+} as const satisfies Readonly<{ [k: string]: string }>;
 
 export const REDIRECT_MODES = {
   DASHBOARD_REDIRECT: 'dashboard-redirect',
@@ -33,7 +33,7 @@ export const REDIRECT_MODES = {
   CONSENT_REDIRECT: 'consent-redirect',
   HOME_REDIRECT: 'home-redirect',
   SURVEY_REDIRECT: 'survey-redirect',
-};
+} as const satisfies Readonly<{ [k: string]: string }>;
 
 export const VERIFIED_MODES = [
   'professional',
@@ -44,14 +44,15 @@ export const VERIFIED_MODES = [
   'executive-education',
   'paid-executive-education',
   'paid-bootcamp',
-];
+] as const satisfies readonly string[];
 
 export const WIDGETS = {
   DISCUSSIONS: 'DISCUSSIONS',
   NOTIFICATIONS: 'NOTIFICATIONS',
-};
+} as const satisfies Readonly<{ [k: string]: string }>;
 
 export const LOADING = 'loading';
 export const LOADED = 'loaded';
 export const FAILED = 'failed';
 export const DENIED = 'denied';
+export type StatusValue = typeof LOADING | typeof LOADED | typeof FAILED | typeof DENIED;

src/course-home/data/slice.js

@@ -1,10 +1,12 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
-export const LOADING = 'loading';
-export const LOADED = 'loaded';
-export const FAILED = 'failed';
-export const DENIED = 'denied';
+import {
+  LOADING,
+  LOADED,
+  FAILED,
+  DENIED,
+} from '@src/constants';
 
 const slice = createSlice({
   name: 'course-home',

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 { LearningHeader as Header } from '@edx/frontend-component-header';
+import HeaderSlot from '../../plugin-slots/HeaderSlot';
 import PageLoading from '../../generic/PageLoading';
 import { unsubscribeFromCourseGoal } from '../data/api';
 
@@ -38,7 +38,7 @@ const GoalUnsubscribe = ({ intl }) => {
 
   return (
     <>
-      <Header showUserDropdown={false} />
+      <HeaderSlot showUserDropdown={false} />
       <main id="main-content" className="container my-5 text-center">
         {isLoading && (
           <PageLoading srMessage={`${intl.formatMessage(messages.loading)}`} />

src/course-home/outline-tab/OutlineTab.jsx

@@ -197,7 +197,10 @@ const OutlineTab = ({ intl }) => {
             <CourseTools />
             <PluginSlot
               id="outline_tab_notifications_slot"
-              pluginProps={{ courseId }}
+              pluginProps={{
+                courseId,
+                model: 'outline',
+              }}
             >
               <UpgradeNotification
                 offer={offer}

src/courseware/course/course-exit/CourseRecommendations.jsx

@@ -12,9 +12,9 @@ import {
 } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import truncate from 'truncate-html';
+import { FAILED, LOADED, LOADING } from '@src/constants';
 import { useModel } from '../../../generic/model-store';
 import fetchCourseRecommendations from './data/thunks';
-import { FAILED, LOADED, LOADING } from './data/slice';
 import CatalogSuggestion from './CatalogSuggestion';
 import PageLoading from '../../../generic/PageLoading';
 import { logClick } from './utils';

src/courseware/course/course-exit/data/slice.js

@@ -1,9 +1,10 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
-
-export const LOADING = 'loading';
-export const LOADED = 'loaded';
-export const FAILED = 'failed';
+import {
+  LOADING,
+  LOADED,
+  FAILED,
+} from '@src/constants';
 
 const slice = createSlice({
   courseId: null,

src/courseware/course/new-sidebar/SidebarContext.js

@@ -1,5 +0,0 @@
-import React from 'react';
-
-const SidebarContext = React.createContext({});
-
-export default SidebarContext;

src/courseware/course/new-sidebar/SidebarContext.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { WIDGETS } from '@src/constants';
+import type { SIDEBARS } from './sidebars';
+
+export type SidebarId = keyof typeof SIDEBARS;
+export type WidgetId = keyof typeof WIDGETS;
+export type UpgradeNotificationState = (
+  | 'accessLastHour'
+  | 'accessHoursLeft'
+  | 'accessDaysLeft'
+  | 'FPDdaysLeft'
+  | 'FPDLastHour'
+  | 'accessDateView'
+  | 'PastExpirationDate'
+);
+
+export interface SidebarContextData {
+  toggleSidebar: (sidebarId?: SidebarId | null, widgetId?: WidgetId | null) => void;
+  onNotificationSeen: () => void;
+  setNotificationStatus: React.Dispatch<'active' | 'inactive'>;
+  currentSidebar: SidebarId | null;
+  notificationStatus: 'active' | 'inactive';
+  upgradeNotificationCurrentState: UpgradeNotificationState;
+  setUpgradeNotificationCurrentState: React.Dispatch<UpgradeNotificationState>;
+  shouldDisplaySidebarOpen: boolean;
+  shouldDisplayFullScreen: boolean;
+  courseId: string;
+  unitId: string;
+  hideDiscussionbar: boolean;
+  hideNotificationbar: boolean;
+  isNotificationbarAvailable: boolean;
+  isDiscussionbarAvailable: boolean;
+}
+
+const SidebarContext = React.createContext<SidebarContextData>({} as SidebarContextData);
+
+export default SidebarContext;

src/courseware/course/new-sidebar/SidebarContextProvider.tsx

@@ -1,7 +1,6 @@
 import React, {
   useCallback, useEffect, useMemo, useState,
 } from 'react';
-import PropTypes from 'prop-types';
 
 import isEmpty from 'lodash/isEmpty';
 
@@ -13,7 +12,13 @@ import { WIDGETS } from '../../../constants';
 import SidebarContext from './SidebarContext';
 import { SIDEBARS } from './sidebars';
 
-const SidebarProvider = ({
+interface Props {
+  courseId: string;
+  unitId: string;
+  children?: React.ReactNode;
+}
+
+const SidebarProvider: React.FC<Props> = ({
   courseId,
   unitId,
   children,
@@ -122,14 +127,4 @@ const SidebarProvider = ({
   );
 };
 
-SidebarProvider.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  unitId: PropTypes.string.isRequired,
-  children: PropTypes.node,
-};
-
-SidebarProvider.defaultProps = {
-  children: null,
-};
-
 export default SidebarProvider;

src/courseware/course/new-sidebar/common/SidebarBase.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useContext } from 'react';
-import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 
@@ -10,18 +9,30 @@ import { ArrowBackIos, Close } from '@openedx/paragon/icons';
 import { useEventListener } from '../../../../generic/hooks';
 import { WIDGETS } from '../../../../constants';
 import messages from '../messages';
-import SidebarContext from '../SidebarContext';
+import SidebarContext, { type SidebarId } from '../SidebarContext';
 
-const SidebarBase = ({
-  title,
+interface Props {
+  title?: string;
+  ariaLabel: string;
+  sidebarId: SidebarId;
+  className?: string;
+  children: React.ReactNode;
+  showTitleBar?: boolean;
+  width?: string;
+  allowFullHeight?: boolean;
+  showBorder?: boolean;
+}
+
+const SidebarBase: React.FC<Props> = ({
+  title = '',
   ariaLabel,
   sidebarId,
   className,
   children,
-  showTitleBar,
-  width,
-  allowFullHeight,
-  showBorder,
+  showTitleBar = true,
+  width = '45rem',
+  allowFullHeight = false,
+  showBorder = true,
 }) => {
   const intl = useIntl();
   const {
@@ -58,8 +69,7 @@ const SidebarBase = ({
           onClick={() => toggleSidebar(null)}
           onKeyDown={() => toggleSidebar(null)}
           role="button"
-          tabIndex="0"
-          alt={intl.formatMessage(messages.responsiveCloseSidebarTray)}
+          tabIndex={0}
         >
           <Icon src={ArrowBackIos} />
           <span className="font-weight-bold m-2 d-inline-block">
@@ -90,25 +100,4 @@ const SidebarBase = ({
   );
 };
 
-SidebarBase.propTypes = {
-  title: PropTypes.string,
-  ariaLabel: PropTypes.string.isRequired,
-  sidebarId: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  children: PropTypes.element.isRequired,
-  showTitleBar: PropTypes.bool,
-  width: PropTypes.string,
-  allowFullHeight: PropTypes.bool,
-  showBorder: PropTypes.bool,
-};
-
-SidebarBase.defaultProps = {
-  title: '',
-  width: '45rem',
-  allowFullHeight: false,
-  showTitleBar: true,
-  className: '',
-  showBorder: true,
-};
-
 export default SidebarBase;

src/courseware/course/new-sidebar/icons/RightSidebarFilled.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 const RightSidebarFilled = (props) => (
   <svg
     width={24}

src/courseware/course/new-sidebar/icons/RightSidebarOutlined.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 const RightSidebarOutlined = (props) => (
   <svg
     width={24}

src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.test.tsx

@@ -31,7 +31,7 @@ describe('DiscussionsWidget', () => {
       excludeFetchSequence: false,
     });
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    const state = store.getState();
+    const state = store.getState() as any; // TODO: remove 'any' once redux state gets types
     courseId = state.courseware.courseId;
     [unitId] = Object.keys(state.models.units);
 

src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.tsx

@@ -14,7 +14,7 @@ import {
 import initializeStore from '../../../../../../store';
 import { appendBrowserTimezoneToUrl, executeThunk } from '../../../../../../utils';
 import { fetchCourse } from '../../../../../data';
-import SidebarContext from '../../../SidebarContext';
+import SidebarContext, { SidebarContextData } from '../../../SidebarContext';
 import NotificationsWidget from './NotificationsWidget';
 import setupDiscussionSidebar from '../../../../test-utils';
 
@@ -24,7 +24,7 @@ jest.mock('@edx/frontend-platform/analytics');
 describe('NotificationsWidget', () => {
   let axiosMock;
   let store;
-  const ID = 'NEWSIDEBAR';
+  const ID = 'DISCUSSIONS_NOTIFICATIONS';
   const defaultMetadata = Factory.build('courseMetadata');
   const courseId = defaultMetadata.id;
   let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/courseware/course/${defaultMetadata.id}`;
@@ -33,7 +33,7 @@ describe('NotificationsWidget', () => {
   const courseHomeMetadata = Factory.build('courseHomeMetadata');
   const courseHomeMetadataUrl = appendBrowserTimezoneToUrl(`${getConfig().LMS_BASE_URL}/api/course_home/course_metadata/${courseId}`);
 
-  function setMetadata(attributes, options) {
+  function setMetadata(attributes, options = undefined) {
     const updatedCourseHomeMetadata = Factory.build('courseHomeMetadata', attributes, options);
     axiosMock.onGet(courseHomeMetadataUrl).reply(200, updatedCourseHomeMetadata);
   }
@@ -85,7 +85,7 @@ describe('NotificationsWidget', () => {
         courseId,
         hideNotificationbar: false,
         isNotificationbarAvailable: true,
-      }}
+      } as SidebarContextData}
       >
         <NotificationsWidget />
       </SidebarContext.Provider>,
@@ -94,14 +94,14 @@ describe('NotificationsWidget', () => {
   });
 
   it('renders upgrade card', async () => {
+    const contextData: Partial<SidebarContextData> = {
+      currentSidebar: ID,
+      courseId,
+      hideNotificationbar: false,
+      isNotificationbarAvailable: true,
+    };
     await fetchAndRender(
-      <SidebarContext.Provider value={{
-        currentSidebar: ID,
-        courseId,
-        hideNotificationbar: false,
-        isNotificationbarAvailable: true,
-      }}
-      >
+      <SidebarContext.Provider value={contextData as SidebarContextData}>
         <NotificationsWidget />
       </SidebarContext.Provider>,
     );
@@ -116,14 +116,14 @@ describe('NotificationsWidget', () => {
 
   it('renders no notifications bar if no verified mode', async () => {
     setMetadata({ verified_mode: null });
+    const contextData: Partial<SidebarContextData> = {
+      currentSidebar: ID,
+      courseId,
+      hideNotificationbar: true,
+      isNotificationbarAvailable: false,
+    };
     await fetchAndRender(
-      <SidebarContext.Provider value={{
-        currentSidebar: ID,
-        courseId,
-        hideNotificationbar: true,
-        isNotificationbarAvailable: false,
-      }}
-      >
+      <SidebarContext.Provider value={contextData as SidebarContextData}>
         <NotificationsWidget />
       </SidebarContext.Provider>,
     );
@@ -170,15 +170,15 @@ describe('NotificationsWidget', () => {
 
   it('marks notification as seen 3 seconds later', async () => {
     const onNotificationSeen = jest.fn();
+    const contextData: Partial<SidebarContextData> = {
+      currentSidebar: ID,
+      courseId,
+      onNotificationSeen,
+      hideNotificationbar: false,
+      isNotificationbarAvailable: true,
+    };
     await fetchAndRender(
-      <SidebarContext.Provider value={{
-        currentSidebar: ID,
-        courseId,
-        onNotificationSeen,
-        hideNotificationbar: false,
-        isNotificationbarAvailable: true,
-      }}
-      >
+      <SidebarContext.Provider value={contextData as SidebarContextData}>
         <NotificationsWidget />
       </SidebarContext.Provider>,
     );

src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.tsx

@@ -65,6 +65,7 @@ const NotificationsWidget = () => {
 
   // After three seconds, update notificationSeen (to hide red dot)
   useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
     setTimeout(onNotificationSeen, 3000);
     sendTrackEvent('edx.ui.course.upgrade.new_sidebar.notifications', notificationTrayEventProperties);
   }, []);
@@ -77,6 +78,7 @@ const NotificationsWidget = () => {
         id="notification_widget_slot"
         pluginProps={{
           courseId,
+          model: 'coursewareMeta',
           notificationCurrentState: upgradeNotificationCurrentState,
           setNotificationCurrentState: setUpgradeNotificationCurrentState,
           toggleSidebar: onToggleSidebar,
@@ -94,7 +96,6 @@ const NotificationsWidget = () => {
           timeOffsetMillis={timeOffsetMillis}
           courseId={courseId}
           org={org}
-          upgradeNotificationCurrentState={upgradeNotificationCurrentState}
           setupgradeNotificationCurrentState={setUpgradeNotificationCurrentState}
           toggleSidebar={onToggleSidebar}
         />

src/courseware/course/new-sidebar/sidebars/index.ts

@@ -6,8 +6,8 @@ export const SIDEBARS = {
     Sidebar: discussionsNotifications.Sidebar,
     Trigger: discussionsNotifications.Trigger,
   },
-};
+} as const;
 
 export const SIDEBAR_ORDER = [
   discussionsNotifications.ID,
-];
+] as const;

src/courseware/course/sequence/Sequence.jsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 

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

@@ -13,12 +13,12 @@ import {
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useSelector } from 'react-redux';
 
+import { LOADED } from '@src/constants';
 import { GetCourseExitNavigation } from '../../course-exit';
 import UnitButton from './UnitButton';
 import SequenceNavigationTabs from './SequenceNavigationTabs';
 import { useSequenceNavigationMetadata } from './hooks';
 import { useModel } from '../../../../generic/model-store';
-import { LOADED } from '../../../data/slice';
 
 import messages from './messages';
 

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx

@@ -9,7 +9,7 @@ import {
 } from '@openedx/paragon/icons';
 
 import { useModel } from '@src/generic/model-store';
-import { LOADING, LOADED } from '@src/course-home/data/slice';
+import { LOADING, LOADED } from '@src/constants';
 import PageLoading from '@src/generic/PageLoading';
 import {
   getSequenceId,

src/courseware/course/sidebar/sidebars/notifications/NotificationTray.jsx

@@ -64,6 +64,7 @@ const NotificationTray = ({ intl }) => {
   };
   // After three seconds, update notificationSeen (to hide red dot)
   useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
     setTimeout(onNotificationSeen, 3000);
     sendTrackEvent('edx.ui.course.upgrade.old_sidebar.notifications', notificationTrayEventProperties);
   }, []);
@@ -85,6 +86,7 @@ const NotificationTray = ({ intl }) => {
             id="notification_tray_slot"
             pluginProps={{
               courseId,
+              model: 'coursewareMeta',
               notificationCurrentState: upgradeNotificationCurrentState,
               setNotificationCurrentState: setUpgradeNotificationCurrentState,
             }}

src/courseware/data/redux.test.js

@@ -4,8 +4,8 @@ import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform';
 
+import { FAILED, LOADING } from '@src/constants';
 import * as thunks from './thunks';
-import { FAILED, LOADING } from './slice';
 
 import { appendBrowserTimezoneToUrl, executeThunk } from '../../utils';
 

src/courseware/data/selectors.js

@@ -1,4 +1,4 @@
-import { LOADED } from './slice';
+import { LOADED } from '@src/constants';
 
 export function sequenceIdsSelector(state) {
   if (state.courseware.courseStatus !== LOADED) {

src/courseware/data/slice.js

@@ -1,10 +1,12 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
-export const LOADING = 'loading';
-export const LOADED = 'loaded';
-export const FAILED = 'failed';
-export const DENIED = 'denied';
+import {
+  LOADING,
+  LOADED,
+  FAILED,
+  DENIED,
+} from '@src/constants';
 
 const slice = createSlice({
   name: 'courseware',

src/frontend-platform.d.ts

@@ -0,0 +1,41 @@
+// frontend-platform currently doesn't provide types... do it ourselves for i18n module at least.
+// We can remove this in the future when we migrate to frontend-shell, or when frontend-platform gets types
+// (whichever comes first).
+
+declare module '@edx/frontend-platform/i18n' {
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  import { injectIntl as _injectIntl } from 'react-intl';
+  /** @deprecated Use useIntl() hook instead. */
+  export const injectIntl: typeof _injectIntl;
+  /** @deprecated Use useIntl() hook instead. */
+  export const intlShape: any;
+
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  export {
+    createIntl,
+    FormattedDate,
+    FormattedTime,
+    FormattedRelativeTime,
+    FormattedNumber,
+    FormattedPlural,
+    FormattedMessage,
+    defineMessages,
+    IntlProvider,
+    useIntl,
+  } from 'react-intl';
+
+  // Other exports from the i18n module:
+  export const configure: any;
+  export const getPrimaryLanguageSubtag: (code: string) => string;
+  export const getLocale: (locale?: string) => string;
+  export const getMessages: any;
+  export const isRtl: (locale?: string) => boolean;
+  export const handleRtl: any;
+  export const mergeMessages: any;
+  export const LOCALE_CHANGED: any;
+  export const LOCALE_TOPIC: any;
+  export const getCountryList: any;
+  export const getCountryMessages: any;
+  export const getLanguageList: any;
+  export const getLanguageMessages: any;
+}

src/generic/CourseAccessErrorPage.jsx

@@ -1,13 +1,13 @@
 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';
-import { LOADED, LOADING } from '../course-home/data/slice';
 import PageLoading from './PageLoading';
 import messages from '../tab-page/messages';
 
@@ -28,7 +28,7 @@ const CourseAccessErrorPage = ({ intl }) => {
   if (courseStatus === LOADING) {
     return (
       <>
-        <Header />
+        <HeaderSlot />
         <PageLoading
           srMessage={intl.formatMessage(messages.loading)}
         />
@@ -41,7 +41,7 @@ const CourseAccessErrorPage = ({ intl }) => {
   }
   return (
     <>
-      <Header />
+      <HeaderSlot />
       <main id="main-content" className="container my-5 text-center" data-testid="access-denied-main">
         <AlertList
           topic="outline"

src/generic/upgrade-notification/UpgradeNotification.jsx

@@ -1,9 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {
-  useIntl, FormattedDate, FormattedMessage, injectIntl,
-} from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { Button, Icon, IconButton } from '@openedx/paragon';
 import { Close } from '@openedx/paragon/icons';
@@ -561,4 +559,4 @@ UpgradeNotification.defaultProps = {
   toggleSidebar: null,
 };
 
-export default injectIntl(UpgradeNotification);
+export default UpgradeNotification;

src/plugin-slots/HeaderSlot/README.md

@@ -0,0 +1,51 @@
+# 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

@@ -0,0 +1,44 @@
+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,5 +1,6 @@
 # `frontend-app-learning` Plugin Slots
 
+* [`header_slot`](./HeaderSlot/)
 * [`footer_slot`](./FooterSlot/)
 * [`sequence_container_slot`](./SequenceContainerSlot/)
 * [`unit_title_slot`](./UnitTitleSlot/)

src/preferences-unsubscribe/index.jsx

@@ -10,7 +10,7 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { logError } from '@edx/frontend-platform/logging';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
-import { LOADED, LOADING, FAILED } from '../constants';
+import { LOADED, LOADING, FAILED } from '@src/constants';
 import PageLoading from '../generic/PageLoading';
 import { unsubscribeNotificationPreferences } from './data/api';
 import messages from './messages';

src/setupTest.js

@@ -193,10 +193,10 @@ export async function initializeTestStore(options = {}, overrideStore = true) {
 
   logUnhandledRequests(axiosMock);
 
-  // eslint-disable-next-line no-unused-expressions
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   !options.excludeFetchCourse && await executeThunk(fetchCourse(courseMetadata.id), store.dispatch);
 
-  // eslint-disable-next-line no-unused-expressions
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   !options.excludeFetchOutlineSidebar && await executeThunk(
     getCourseOutlineStructure(courseMetadata.id),
     store.dispatch,

src/shared/streak-celebration/StreakCelebrationModal.jsx

@@ -64,7 +64,7 @@ const StreakModal = ({
 }) => {
   const { org, celebrations, username } = useModel('courseHomeMeta', courseId);
   const factoid = getRandomFactoid(intl, streakLengthToCelebrate);
-  // eslint-disable-next-line no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [randomFactoid, setRandomFactoid] = useState(factoid); // Don't change factoid on re-render
 
   // Open edX Folks: if you create a voucher with this code, the MFE will notice and show the discount

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 }) => {
         </>
       )}
 
-      <Header courseOrg={org} courseNumber={number} courseTitle={title} />
+      <HeaderSlot courseOrg={org} courseNumber={number} courseTitle={title} />
 
       {courseStatus === 'loading' && (
         <PageLoading srMessage={intl.formatMessage(messages.loading)} />

src/utils.js

@@ -1,17 +0,0 @@
-// Helper, that is used to forcibly finalize all promises
-// in thunk before running matcher against state.
-export const executeThunk = async (thunk, dispatch, getState) => {
-  await thunk(dispatch, getState);
-  await new Promise(setImmediate);
-};
-
-// Utility function for appending the browser timezone to the url
-// Can be used on the backend when the user timezone is not set in the user account
-export const appendBrowserTimezoneToUrl = (url) => {
-  const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const urlObject = new URL(url);
-  if (browserTimezone) {
-    urlObject.searchParams.append('browser_timezone', browserTimezone);
-  }
-  return urlObject.href;
-};

src/utils.ts

@@ -0,0 +1,23 @@
+/**
+ * Helper, that is used to forcibly finalize all promises
+ * in thunk before running matcher against state.
+ *
+ * TODO: move this to setupTest or testUtils - it's only used in tests.
+ */
+export const executeThunk = async (thunk, dispatch, getState = undefined) => {
+  await thunk(dispatch, getState);
+  await new Promise(setImmediate);
+};
+
+/**
+ * Utility function for appending the browser timezone to the url
+ * Can be used on the backend when the user timezone is not set in the user account
+ */
+export const appendBrowserTimezoneToUrl = (url: string) => {
+  const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const urlObject = new URL(url);
+  if (browserTimezone) {
+    urlObject.searchParams.append('browser_timezone', browserTimezone);
+  }
+  return urlObject.href;
+};

tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "@edx/typescript-config",
+    "compilerOptions": {
+      "outDir": "dist",
+      "baseUrl": "./src",
+      "paths": {
+        "*": ["*"],
+        "@src/*": ["*"]
+      }
+    },
+    "include": ["*.js", ".eslintrc.js", "src/**/*", "plugins/**/*"],
+    "exclude": ["dist", "node_modules"]
+}