Revert "feat: standardize slot ids (openedx#1685)"

This reverts commit 045e108.

Author: nsprenkle

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.7.0",
+    "@openedx/frontend-plugin-framework": "^1.6.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 { CourseOutlineTabNotificationsSlot } from '../../plugin-slots/CourseOutlineTabNotificationsSlot';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { AlertList } from '../../generic/user-messages';
 
 import CourseDates from './widgets/CourseDates';
@@ -181,7 +181,13 @@ const OutlineTab = () => {
               />
             )}
             <CourseTools />
-            <CourseOutlineTabNotificationsSlot courseId={courseId} />
+            <PluginSlot
+              id="outline_tab_notifications_slot"
+              pluginProps={{
+                courseId,
+                model: 'outline',
+              }}
+            />
             <CourseDates />
             <CourseHandouts />
           </div>

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

@@ -139,7 +139,7 @@ describe('Outline Tab', () => {
       });
       await fetchAndRender();
 
-      expect(screen.getByTestId('org.openedx.frontend.learning.course_outline_tab_notifications.v1')).toBeInTheDocument();
+      expect(screen.getByTestId('outline_tab_notifications_slot')).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('org.openedx.frontend.learning.notification_widget.v1')).toBeInTheDocument();
+    expect(screen.getByTestId('notification_widget_slot')).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,11 +67,15 @@ const NotificationsWidget = () => {
 
   return (
     <div className="border border-light-400 rounded-sm" data-testid="notification-widget">
-      <NotificationWidgetSlot
-        courseId={courseId}
-        notificationCurrentState={upgradeNotificationCurrentState}
-        setNotificationCurrentState={setUpgradeNotificationCurrentState}
-        toggleSidebar={onToggleSidebar}
+      <PluginSlot
+        id="notification_widget_slot"
+        pluginProps={{
+          courseId,
+          model: 'coursewareMeta',
+          notificationCurrentState: upgradeNotificationCurrentState,
+          setNotificationCurrentState: setUpgradeNotificationCurrentState,
+          toggleSidebar: onToggleSidebar,
+        }}
       />
     </div>
   );

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

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

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

@@ -6,7 +6,6 @@ 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';
 
@@ -100,8 +99,8 @@ describe('ContentIFrame Component', () => {
         });
         it('displays PageLoading component if not showError', () => {
           el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(ContentIFrameLoaderSlot);
-          expect(component.props.loadingMessage).toEqual(props.loadingMessage);
+          [component] = el.instance.findByType(PageLoading);
+          expect(component.props.srMessage).toEqual(props.loadingMessage);
         });
       });
       describe('hasLoaded', () => {

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

@@ -2,13 +2,14 @@ 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';
 
@@ -28,7 +29,14 @@ const UnitSuspense = ({
     <>
       {shouldDisplayContentGating && (
         <Suspense fallback={<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />}>
-          <GatedUnitContentMessageSlot courseId={courseId} />
+          <PluginSlot
+            id="gated_unit_content_message_slot"
+            pluginProps={{
+              courseId,
+            }}
+          >
+            <LockPaywall courseId={courseId} />
+          </PluginSlot>
         </Suspense>
       )}
       {shouldDisplayHonorCode && (

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

@@ -5,7 +5,6 @@ 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';
@@ -79,9 +78,10 @@ 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(GatedUnitContentMessageSlot);
-          expect(component.parent.type).toEqual('Suspense');
-          expect(component.parent.props.fallback)
+          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)
             .toEqual(<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />);
           expect(component.props.courseId).toEqual(props.courseId);
         });