feat: standardize slot ids (#1685)

Author: brian-smith-tcril

package-lock.json

@@ -46,7 +46,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@openedx/frontend-build": "^14.5.0",
-    "@openedx/frontend-plugin-framework": "^1.6.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
     "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "^22.16.0",
     "@popperjs/core": "2.11.8",

package.json

@@ -5,7 +5,7 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { CourseOutlineTabNotificationsSlot } from '../../plugin-slots/CourseOutlineTabNotificationsSlot';
 import { AlertList } from '../../generic/user-messages';
 
 import CourseDates from './widgets/CourseDates';
@@ -181,13 +181,7 @@ const OutlineTab = () => {
               />
             )}
             <CourseTools />
-            <PluginSlot
-              id="outline_tab_notifications_slot"
-              pluginProps={{
-                courseId,
-                model: 'outline',
-              }}
-            />
+            <CourseOutlineTabNotificationsSlot courseId={courseId} />
             <CourseDates />
             <CourseHandouts />
           </div>

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

@@ -139,7 +139,7 @@ describe('Outline Tab', () => {
       });
       await fetchAndRender();
 
-      expect(screen.getByTestId('outline_tab_notifications_slot')).toBeInTheDocument();
+      expect(screen.getByTestId('org.openedx.frontend.learning.course_outline_tab_notifications.v1')).toBeInTheDocument();
     });
 
     it('handles expand/collapse all button click', async () => {

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

@@ -90,7 +90,7 @@ describe('NotificationsWidget', () => {
         <NotificationsWidget />
       </SidebarContext.Provider>,
     );
-    expect(screen.getByTestId('notification_widget_slot')).toBeInTheDocument();
+    expect(screen.getByTestId('org.openedx.frontend.learning.notification_widget.v1')).toBeInTheDocument();
   });
 
   it('renders no notifications bar if no verified mode', async () => {

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

@@ -1,10 +1,10 @@
 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 { WIDGETS } from '../../../../../../constants';
 import SidebarContext from '../../../SidebarContext';
+import { NotificationWidgetSlot } from '../../../../../../plugin-slots/NotificationWidgetSlot';
 
 const NotificationsWidget = () => {
   const {
@@ -67,15 +67,11 @@ const NotificationsWidget = () => {
 
   return (
     <div className="border border-light-400 rounded-sm" data-testid="notification-widget">
-      <PluginSlot
-        id="notification_widget_slot"
-        pluginProps={{
-          courseId,
-          model: 'coursewareMeta',
-          notificationCurrentState: upgradeNotificationCurrentState,
-          setNotificationCurrentState: setUpgradeNotificationCurrentState,
-          toggleSidebar: onToggleSidebar,
-        }}
+      <NotificationWidgetSlot
+        courseId={courseId}
+        notificationCurrentState={upgradeNotificationCurrentState}
+        setNotificationCurrentState={setUpgradeNotificationCurrentState}
+        toggleSidebar={onToggleSidebar}
       />
     </div>
   );

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

@@ -4,9 +4,8 @@ import React from 'react';
 import { ErrorPage } from '@edx/frontend-platform/react';
 import { StrictDict } from '@edx/react-unit-test-utils';
 import { ModalDialog, Modal } from '@openedx/paragon';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { ContentIFrameLoaderSlot } from '../../../../plugin-slots/ContentIFrameLoaderSlot';
 
-import PageLoading from '@src/generic/PageLoading';
 import * as hooks from './hooks';
 
 /**
@@ -84,17 +83,7 @@ const ContentIFrame = ({
   return (
     <>
       {(shouldShowContent && !hasLoaded) && (
-        showError ? <ErrorPage /> : (
-          <PluginSlot
-            id="content_iframe_loader_slot"
-            pluginProps={{
-              defaultLoaderComponent: <PageLoading srMessage={loadingMessage} />,
-              courseId,
-            }}
-          >
-            <PageLoading srMessage={loadingMessage} />
-          </PluginSlot>
-        )
+        showError ? <ErrorPage /> : <ContentIFrameLoaderSlot courseId={courseId} loadingMessage={loadingMessage} />
       )}
       {shouldShowContent && (
         <div className="unit-iframe-wrapper">

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

@@ -6,6 +6,7 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import PageLoading from '@src/generic/PageLoading';
 
+import { ContentIFrameLoaderSlot } from '@src/plugin-slots/ContentIFrameLoaderSlot';
 import * as hooks from './hooks';
 import ContentIFrame, { IFRAME_FEATURE_POLICY, testIDs } from './ContentIFrame';
 
@@ -99,8 +100,8 @@ describe('ContentIFrame Component', () => {
         });
         it('displays PageLoading component if not showError', () => {
           el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(PageLoading);
-          expect(component.props.srMessage).toEqual(props.loadingMessage);
+          [component] = el.instance.findByType(ContentIFrameLoaderSlot);
+          expect(component.props.loadingMessage).toEqual(props.loadingMessage);
         });
       });
       describe('hasLoaded', () => {

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

@@ -2,14 +2,13 @@ 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';
+import { GatedUnitContentMessageSlot } from '../../../../plugin-slots/GatedUnitContentMessageSlot';
 
 import messages from '../messages';
 import HonorCode from '../honor-code';
-import LockPaywall from '../lock-paywall';
 import * as hooks from './hooks';
 import { modelKeys } from './constants';
 
@@ -29,14 +28,7 @@ const UnitSuspense = ({
     <>
       {shouldDisplayContentGating && (
         <Suspense fallback={<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />}>
-          <PluginSlot
-            id="gated_unit_content_message_slot"
-            pluginProps={{
-              courseId,
-            }}
-          >
-            <LockPaywall courseId={courseId} />
-          </PluginSlot>
+          <GatedUnitContentMessageSlot courseId={courseId} />
         </Suspense>
       )}
       {shouldDisplayHonorCode && (

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

@@ -5,6 +5,7 @@ import { formatMessage, shallow } from '@edx/react-unit-test-utils';
 import { useModel } from '@src/generic/model-store';
 import PageLoading from '@src/generic/PageLoading';
 
+import { GatedUnitContentMessageSlot } from '@src/plugin-slots/GatedUnitContentMessageSlot';
 import messages from '../messages';
 import HonorCode from '../honor-code';
 import LockPaywall from '../lock-paywall';
@@ -78,10 +79,9 @@ describe('UnitSuspense component', () => {
         beforeEach(() => { mockModels(true, true); });
         it('displays LockPaywall in Suspense wrapper with PageLoading fallback', () => {
           el = shallow(<UnitSuspense {...props} />);
-          const [component] = el.instance.findByType(LockPaywall);
-          expect(component.parent.type).toEqual('PluginSlot');
-          expect(component.parent.parent.type).toEqual('Suspense');
-          expect(component.parent.parent.props.fallback)
+          const [component] = el.instance.findByType(GatedUnitContentMessageSlot);
+          expect(component.parent.type).toEqual('Suspense');
+          expect(component.parent.props.fallback)
             .toEqual(<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />);
           expect(component.props.courseId).toEqual(props.courseId);
         });