feat: Notification Plugin Slots

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

@@ -5,6 +5,7 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { AlertList } from '../../generic/user-messages';
 
 import CourseDates from './widgets/CourseDates';
@@ -123,6 +124,20 @@ const OutlineTab = ({ intl }) => {
     }
   }, [location.search]);
 
+  const upgradeNotificationProps = {
+    offer,
+    verifiedMode,
+    accessExpiration,
+    contentTypeGatingEnabled: datesBannerInfo.contentTypeGatingEnabled,
+    marketingUrl,
+    upsellPageName: 'course_home',
+    userTimezone,
+    timeOffsetMillis,
+    courseId,
+    org,
+    shouldDisplayBorder: true,
+  };
+
   return (
     <>
       <div data-learner-type={learnerType} className="row w-100 mx-0 my-3 justify-content-between">
@@ -194,19 +209,13 @@ const OutlineTab = ({ intl }) => {
               />
             )}
             <CourseTools />
-            <UpgradeNotification
-              offer={offer}
-              verifiedMode={verifiedMode}
-              accessExpiration={accessExpiration}
-              contentTypeGatingEnabled={datesBannerInfo.contentTypeGatingEnabled}
-              marketingUrl={marketingUrl}
-              upsellPageName="course_home"
-              userTimezone={userTimezone}
-              shouldDisplayBorder
-              timeOffsetMillis={timeOffsetMillis}
-              courseId={courseId}
-              org={org}
-            />
+            <PluginSlot
+              id="outline_tab"
+              pluginProps={upgradeNotificationProps}
+              testId="outline-tab-slot"
+            >
+              <UpgradeNotification {...upgradeNotificationProps} />
+            </PluginSlot>
             <CourseDates />
             <CourseHandouts />
           </div>

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

@@ -132,6 +132,21 @@ describe('Outline Tab', () => {
       expect(expandedSectionNode).toHaveAttribute('aria-expanded', 'true');
     });
 
+    it('renders the Notification wrapper', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      setTabData({
+        course_blocks: { blocks: courseBlocks.blocks },
+      });
+      await fetchAndRender();
+
+      const pluginSlot = screen.getByTestId('outline-tab-slot');
+      expect(pluginSlot).toBeInTheDocument();
+
+      // The Upgrade Notification should be inside the PluginSlot.
+      const UpgradeNotification = pluginSlot.querySelector('.upgrade-notification');
+      expect(UpgradeNotification).toBeInTheDocument();
+    });
+
     it('handles expand/collapse all button click', async () => {
       await fetchAndRender();
       // Button renders as "Expand All"

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

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useMemo } from 'react';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useModel } from '../../../../../../generic/model-store';
 import UpgradeNotification from '../../../../../../generic/upgrade-notification/UpgradeNotification';
 import { WIDGETS } from '../../../../../../constants';
@@ -66,24 +67,32 @@ const NotificationsWidget = () => {
 
   if (hideNotificationbar || !isNotificationbarAvailable) { return null; }
 
+  const upgradeNotificationProps = {
+    offer,
+    verifiedMode,
+    accessExpiration,
+    contentTypeGatingEnabled,
+    marketingUrl,
+    upsellPageName: 'in_course',
+    userTimezone,
+    timeOffsetMillis,
+    courseId,
+    org,
+    upgradeNotificationCurrentState,
+    setupgradeNotificationCurrentState: setUpgradeNotificationCurrentState, // TODO: Check typo in component?
+    shouldDisplayBorder: false,
+    toggleSidebar: () => toggleSidebar(currentSidebar, WIDGETS.NOTIFICATIONS),
+  };
+
   return (
     <div className="border border-light-400 rounded-sm" data-testid="notification-widget">
-      <UpgradeNotification
-        offer={offer}
-        verifiedMode={verifiedMode}
-        accessExpiration={accessExpiration}
-        contentTypeGatingEnabled={contentTypeGatingEnabled}
-        marketingUrl={marketingUrl}
-        upsellPageName="in_course"
-        userTimezone={userTimezone}
-        shouldDisplayBorder={false}
-        timeOffsetMillis={timeOffsetMillis}
-        courseId={courseId}
-        org={org}
-        upgradeNotificationCurrentState={upgradeNotificationCurrentState}
-        setupgradeNotificationCurrentState={setUpgradeNotificationCurrentState}
-        toggleSidebar={() => toggleSidebar(currentSidebar, WIDGETS.NOTIFICATIONS)}
-      />
+      <PluginSlot
+        id="notification_widget"
+        pluginProps={upgradeNotificationProps}
+        testId="notification-widget-slot"
+      >
+        <UpgradeNotification {...upgradeNotificationProps} />
+      </PluginSlot>
     </div>
   );
 };

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

@@ -92,9 +92,14 @@ describe('NotificationsWidget', () => {
         <NotificationsWidget />
       </SidebarContext.Provider>,
     );
-    const UpgradeNotification = document.querySelector('.upgrade-notification');
 
+    const pluginSlot = screen.getByTestId('notification-widget-slot');
+    expect(pluginSlot).toBeInTheDocument();
+
+    // The Upgrade Notification should be inside the PluginSlot.
+    const UpgradeNotification = pluginSlot.querySelector('.upgrade-notification');
     expect(UpgradeNotification).toBeInTheDocument();
+
     expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
     expect(screen.queryByText('You have no new notifications at this time.')).not.toBeInTheDocument();
   });

src/courseware/course/sequence/Unit/UnitSuspense.jsx

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
 import { useModel } from '@src/generic/model-store';
 import PageLoading from '@src/generic/PageLoading';
@@ -24,19 +25,24 @@ const UnitSuspense = ({
     meta.contentTypeGatingEnabled && unit.containsContentTypeGatedContent
   );
 
-  const suspenseComponent = (message, Component) => (
-    <Suspense fallback={<PageLoading srMessage={formatMessage(message)} />}>
-      <Component courseId={courseId} />
-    </Suspense>
-  );
-
   return (
     <>
       {shouldDisplayContentGating && (
-        suspenseComponent(messages.loadingLockedContent, LockPaywall)
+        <Suspense fallback={<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />}>
+          <PluginSlot
+            id="fbe_message_plugin"
+            pluginProps={{
+              courseId,
+            }}
+          >
+            <LockPaywall courseId={courseId} />
+          </PluginSlot>
+        </Suspense>
       )}
       {shouldDisplayHonorCode && (
-        suspenseComponent(messages.loadingHonorCode, HonorCode)
+        <Suspense fallback={<PageLoading srMessage={formatMessage(messages.loadingHonorCode)} />}>
+          <HonorCode courseId={courseId} />
+        </Suspense>
       )}
     </>
   );

src/courseware/course/sequence/Unit/UnitSuspense.test.jsx

@@ -64,7 +64,7 @@ describe('UnitSuspense component', () => {
   describe('output', () => {
     describe('LockPaywall', () => {
       const testNoPaywall = () => {
-        it('does not display LockPaywal', () => {
+        it('does not display LockPaywall', () => {
           el = shallow(<UnitSuspense {...props} />);
           expect(el.instance.findByType(LockPaywall).length).toEqual(0);
         });
@@ -79,8 +79,9 @@ describe('UnitSuspense component', () => {
         it('displays LockPaywall in Suspense wrapper with PageLoading fallback', () => {
           el = shallow(<UnitSuspense {...props} />);
           const [component] = el.instance.findByType(LockPaywall);
-          expect(component.parent.type).toEqual('Suspense');
-          expect(component.parent.props.fallback)
+          expect(component.parent.type).toEqual('PluginSlot');
+          expect(component.parent.parent.type).toEqual('Suspense');
+          expect(component.parent.parent.props.fallback)
             .toEqual(<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />);
           expect(component.props.courseId).toEqual(props.courseId);
         });

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

@@ -2,6 +2,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 import React, { useContext, useEffect, useMemo } from 'react';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useModel } from '../../../../../generic/model-store';
 import UpgradeNotification from '../../../../../generic/upgrade-notification/UpgradeNotification';
 
@@ -65,6 +66,22 @@ const NotificationTray = ({ intl }) => {
     sendTrackEvent('edx.ui.course.upgrade.old_sidebar.notifications', notificationTrayEventProperties);
   }, []);
 
+  const upgradeNotificationProps = {
+    offer,
+    verifiedMode,
+    accessExpiration,
+    contentTypeGatingEnabled,
+    marketingUrl,
+    upsellPageName: 'in_course',
+    userTimezone,
+    shouldDisplayBorder: false,
+    timeOffsetMillis,
+    courseId,
+    org,
+    upgradeNotificationCurrentState,
+    setupgradeNotificationCurrentState: setUpgradeNotificationCurrentState, // TODO: Check typo in component?
+  };
+
   return (
     <SidebarBase
       title={intl.formatMessage(messages.notificationTitle)}
@@ -75,21 +92,13 @@ const NotificationTray = ({ intl }) => {
     >
       <div>{verifiedMode
         ? (
-          <UpgradeNotification
-            offer={offer}
-            verifiedMode={verifiedMode}
-            accessExpiration={accessExpiration}
-            contentTypeGatingEnabled={contentTypeGatingEnabled}
-            marketingUrl={marketingUrl}
-            upsellPageName="in_course"
-            userTimezone={userTimezone}
-            shouldDisplayBorder={false}
-            timeOffsetMillis={timeOffsetMillis}
-            courseId={courseId}
-            org={org}
-            upgradeNotificationCurrentState={upgradeNotificationCurrentState}
-            setupgradeNotificationCurrentState={setUpgradeNotificationCurrentState}
-          />
+          <PluginSlot
+            id="notification_tray"
+            pluginProps={upgradeNotificationProps}
+            testId="notification-tray-slot"
+          >
+            <UpgradeNotification {...upgradeNotificationProps} />
+          </PluginSlot>
         ) : (
           <p className="p-3 small">{intl.formatMessage(messages.noNotificationsMessage)}</p>
         )}

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

@@ -91,10 +91,14 @@ describe('NotificationTray', () => {
         <NotificationTray />
       </SidebarContext.Provider>,
     );
-    const UpgradeNotification = document.querySelector('.upgrade-notification');
 
-    expect(UpgradeNotification)
-      .toBeInTheDocument();
+    const pluginSlot = screen.getByTestId('notification-tray-slot');
+    expect(pluginSlot).toBeInTheDocument();
+
+    // The Upgrade Notification should be inside the PluginSlot.
+    const UpgradeNotification = pluginSlot.querySelector('.upgrade-notification');
+    expect(UpgradeNotification).toBeInTheDocument();
+
     expect(screen.getByRole('link', { name: 'Upgrade for $149' }))
       .toBeInTheDocument();
     expect(screen.queryByText('You have no new notifications at this time.'))

src/setupTest.js

@@ -28,11 +28,12 @@ import { fetchCourse, fetchSequence } from './courseware/data';
 import { appendBrowserTimezoneToUrl, executeThunk } from './utils';
 import buildSimpleCourseAndSequenceMetadata from './courseware/data/__factories__/sequenceMetadata.factory';
 import { buildOutlineFromBlocks } from './courseware/data/__factories__/learningSequencesOutline.factory';
+import MockedPluginSlot from './tests/MockedPluginSlot';
 
 jest.mock('@openedx/frontend-plugin-framework', () => ({
   ...jest.requireActual('@openedx/frontend-plugin-framework'),
   Plugin: () => 'Plugin',
-  PluginSlot: () => 'PluginSlot',
+  PluginSlot: MockedPluginSlot,
 }));
 
 jest.mock('@src/generic/plugin-store', () => ({

src/tests/MockedPluginSlot.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const MockedPluginSlot = ({ children, testId }) => {
+  if (!testId) { return children ?? 'PluginSlot'; } // Return its content if PluginSlot slot is wrapping any.
+
+  return <div data-testid={testId}>{children}</div>;
+};
+
+MockedPluginSlot.displayName = 'PluginSlot';
+
+MockedPluginSlot.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+  testId: PropTypes.string,
+};
+
+MockedPluginSlot.defaultProps = {
+  children: undefined,
+  testId: undefined,
+};
+
+export default MockedPluginSlot;

src/tests/MockedPluginSlot.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MockedPluginSlot from './MockedPluginSlot';
+
+describe('MockedPluginSlot', () => {
+  it('renders as plain "PluginSlot" text node if no clildren nor testId is', () => {
+    render(<MockedPluginSlot />);
+
+    const component = screen.getByText('PluginSlot');
+    expect(component).toBeInTheDocument();
+  });
+
+  it('renders as the slot children directly if there is content within and no testId', () => {
+    render(
+      <div role="article">
+        <MockedPluginSlot>
+          <q role="note">How much wood could a woodchuck chuck if a woodchuck could chuck wood?</q>
+        </MockedPluginSlot>
+      </div>,
+    );
+
+    const component = screen.getByRole('article');
+    expect(component).toBeInTheDocument();
+
+    // Direct children
+    const quote = component.querySelector(':scope > q');
+    expect(quote.getAttribute('role')).toBe('note');
+  });
+
+  it('renders a div when a testId is provided ', () => {
+    render(
+      <MockedPluginSlot testId="guybrush">
+        <q role="note">I am selling these fine leather jackets.</q>
+      </MockedPluginSlot>,
+    );
+
+    const component = screen.getByTestId('guybrush');
+    expect(component).toBeInTheDocument();
+
+    const quote = component.querySelector('[role=note]');
+    expect(quote).toBeInTheDocument();
+  });
+});