feat: standardize slot ids

package.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",

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

@@ -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.test.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/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.tsx

@@ -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.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/sequence/Unit/ContentIFrame.jsx

@@ -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.test.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/UnitSuspense.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.test.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);
         });

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

@@ -57,7 +57,7 @@ describe('<Unit />', () => {
   describe('unit title', () => {
     it('has two children', () => {
       renderComponent(defaultProps);
-      const unitTitleWrapper = screen.getByTestId('unit_title_slot').children[0];
+      const unitTitleWrapper = screen.getByTestId('org.openedx.frontend.learning.unit_title.v1').children[0];
 
       expect(unitTitleWrapper.children).toHaveLength(3);
     });

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

@@ -2,9 +2,9 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 import { useContext, useEffect, useMemo } from 'react';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useModel } from '@src/generic/model-store';
+import { NotificationTraySlot } from '../../../../../plugin-slots/NotificationTraySlot';
 
 import messages from '../../../messages';
 import SidebarBase from '../../common/SidebarBase';
@@ -76,14 +76,10 @@ const NotificationTray = () => {
     >
       <div>{verifiedMode
         ? (
-          <PluginSlot
-            id="notification_tray_slot"
-            pluginProps={{
-              courseId,
-              model: 'coursewareMeta',
-              notificationCurrentState: upgradeNotificationCurrentState,
-              setNotificationCurrentState: setUpgradeNotificationCurrentState,
-            }}
+          <NotificationTraySlot
+            courseId={courseId}
+            notificationCurrentState={upgradeNotificationCurrentState}
+            setNotificationCurrentState={setUpgradeNotificationCurrentState}
           />
         ) : (
           <p className="p-3 small">{intl.formatMessage(messages.noNotificationsMessage)}</p>

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

@@ -91,7 +91,7 @@ describe('NotificationTray', () => {
         <NotificationTray />
       </SidebarContext.Provider>,
     );
-    expect(screen.getByTestId('notification_tray_slot')).toBeInTheDocument();
+    expect(screen.getByTestId('org.openedx.frontend.learning.notification_tray.v1')).toBeInTheDocument();
   });
 
   it('renders no notifications message if no verified mode', async () => {

src/plugin-slots/ContentIFrameLoaderSlot/README.md

@@ -0,0 +1,10 @@
+# Content iframe Loader Slot
+
+### Slot ID: `org.openedx.frontend.learning.content_iframe_loader.v1`
+
+### Slot ID Aliases
+* `content_iframe_loader_slot`
+
+### Props:
+* `courseId`
+* `defaultLoaderComponent`

src/plugin-slots/ContentIFrameLoaderSlot/index.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import PageLoading from '../../generic/PageLoading';
+
+export const ContentIFrameLoaderSlot = ({
+  courseId,
+  loadingMessage,
+} : ContentIFrameLoaderSlotProps) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.content_iframe_loader.v1"
+    idAliases={['content_iframe_loader_slot']}
+    pluginProps={{
+      defaultLoaderComponent: <PageLoading srMessage={loadingMessage} />,
+      courseId,
+    }}
+  >
+    <PageLoading srMessage={loadingMessage} />
+  </PluginSlot>
+);
+
+interface ContentIFrameLoaderSlotProps {
+  courseId: string;
+  loadingMessage: ReactNode;
+}

src/plugin-slots/CourseBreadcrumbsSlot/README.md

@@ -1,6 +1,9 @@
 # Course Breadcrumbs Slot
 
-### Slot ID: `course_breadcrumbs_slot`
+### Slot ID: `org.openedx.frontend.learning.course_breadcrumbs.v1`
+
+### Slot ID Aliases
+* `course_breadcrumbs_slot`
 
 ## Description
 
@@ -21,7 +24,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    course_breadcrumbs_slot: {
+    'org.openedx.frontend.learning.course_breadcrumbs.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/CourseBreadcrumbsSlot/index.tsx

@@ -16,7 +16,8 @@ export const CourseBreadcrumbsSlot : React.FC<Props> = ({
   courseId, sectionId, sequenceId, unitId, isStaff,
 }) => (
   <PluginSlot
-    id="course_breadcrumbs_slot"
+    id="org.openedx.frontend.learning.course_breadcrumbs.v1"
+    idAliases={['course_breadcrumbs_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/CourseHomeSectionOutlineSlot/README.md

@@ -1,6 +1,9 @@
 # Course Home Section Outline Slot
 
-### Slot ID: `course_home_section_outline_slot`
+### Slot ID: `org.openedx.frontend.learning.course_home_section_outline.v1`
+
+### Slot ID Aliases
+* `course_home_section_outline_slot`
 
 ## Description
 
@@ -22,7 +25,7 @@ import Section from '@src/course-home/outline-tab/section-outline/Section';
 
 const config = {
   pluginSlots: {
-    course_home_section_outline_slot: {
+    'org.openedx.frontend.learning.course_home_section_outline.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/CourseHomeSectionOutlineSlot/index.tsx

@@ -12,7 +12,8 @@ const CourseHomeSectionOutlineSlot: React.FC<Props> = ({
   expandAll, sections, sectionIds,
 }) => (
   <PluginSlot
-    id="course_home_section_outline_slot"
+    id="org.openedx.frontend.learning.course_home_section_outline.v1"
+    idAliases={['course_home_section_outline_slot']}
     pluginProps={{ expandAll, sectionIds, sections }}
   >
     <ol id="courseHome-outline" className="list-unstyled">

src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/README.md

@@ -1,6 +1,9 @@
 # Course Outline Mobile Sidebar Trigger Slot
 
-### Slot ID: `course_outline_mobile_sidebar_trigger_slot`
+### Slot ID: `org.openedx.frontend.learning.course_outline_mobile_sidebar_trigger.v1`
+
+### Slot ID Aliases
+* `course_outline_mobile_sidebar_trigger_slot`
 
 ## Description
 
@@ -21,7 +24,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    course_outline_mobile_sidebar_trigger_slot: {
+    'org.openedx.frontend.learning.course_outline_mobile_sidebar_trigger.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/CourseOutlineMobileSidebarTriggerSlot/index.tsx

@@ -6,7 +6,8 @@ import CourseOutlineTrigger from '../../courseware/course/sidebar/sidebars/cours
 
 export const CourseOutlineMobileSidebarTriggerSlot : React.FC = () => (
   <PluginSlot
-    id="course_outline_mobile_sidebar_trigger_slot"
+    id="org.openedx.frontend.learning.course_outline_mobile_sidebar_trigger.v1"
+    idAliases={['course_outline_mobile_sidebar_trigger_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/CourseOutlineSidebarSlot/README.md

@@ -1,6 +1,9 @@
 # Course Outline Sidebar Slot
 
-### Slot ID: `course_outline_sidebar_slot`
+### Slot ID: `org.openedx.frontend.learning.course_outline_sidebar.v1`
+
+### Slot ID Aliases
+* `course_outline_sidebar_slot`
 
 ## Description
 
@@ -21,7 +24,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    course_outline_sidebar_slot: {
+    'org.openedx.frontend.learning.course_outline_sidebar.v1': {
       keepDefault: false,
       plugins: [
         {