feat: adding a new plugin for the enterprise modal on dashboard

src/containers/Dashboard/__snapshots__/index.test.jsx.snap

@@ -54,7 +54,7 @@ exports[`Dashboard snapshots there are no courses, there ARE available dashboard
     test-page-title
   </h1>
   <Fragment>
-    <EnterpriseDashboardModal />
+    <DashboardModal />
   </Fragment>
   <div
     data-testid="dashboard-content"

src/containers/Dashboard/index.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { reduxHooks } from 'hooks';
 import { RequestKeys } from 'data/constants/requests';
-import EnterpriseDashboardModal from 'containers/EnterpriseDashboardModal';
 import SelectSessionModal from 'containers/SelectSessionModal';
 import CoursesPanel from 'containers/CoursesPanel';
+import DashboardModalSlot from 'plugin-slots/DashboardModalSlot';
 
 import LoadingView from './LoadingView';
 import DashboardLayout from './DashboardLayout';
@@ -24,7 +24,7 @@ export const Dashboard = () => {
       <h1 className="sr-only">{pageTitle}</h1>
       {!initIsPending && (
         <>
-          {hasAvailableDashboards && <EnterpriseDashboardModal />}
+          {hasAvailableDashboards && <DashboardModalSlot />}
           {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}
         </>
       )}

src/containers/Dashboard/index.test.jsx

@@ -2,9 +2,9 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 
-import EnterpriseDashboardModal from 'containers/EnterpriseDashboardModal';
 import SelectSessionModal from 'containers/SelectSessionModal';
 import CoursesPanel from 'containers/CoursesPanel';
+import DashboardModalSlot from 'plugin-slots/DashboardModalSlot';
 
 import DashboardLayout from './DashboardLayout';
 import LoadingView from './LoadingView';
@@ -20,7 +20,7 @@ jest.mock('hooks', () => ({
   },
 }));
 
-jest.mock('containers/EnterpriseDashboardModal', () => 'EnterpriseDashboardModal');
+jest.mock('plugin-slots/DashboardModalSlot', () => 'DashboardModalSlot');
 jest.mock('containers/CoursesPanel', () => 'CoursesPanel');
 jest.mock('./LoadingView', () => 'LoadingView');
 jest.mock('./DashboardLayout', () => 'DashboardLayout');
@@ -81,7 +81,7 @@ describe('Dashboard', () => {
         testContent(contentEl);
       });
       it(`${renderString(showEnterpriseModal)} dashbaord modal`, () => {
-        expect(wrapper.instance.findByType(EnterpriseDashboardModal).length)
+        expect(wrapper.instance.findByType(DashboardModalSlot).length)
           .toEqual(showEnterpriseModal ? 1 : 0);
       });
       it(`${renderString(showSelectSessionModal)} select session modal`, () => {

src/plugin-slots/DashboardModalSlot/README.md

@@ -0,0 +1,33 @@
+# Course Card Action Slot
+
+### Slot ID: `dashboard_modal_slot`
+
+## Description
+
+This slot is used for the modal on a dashboard that directs you to the enterprise dashboard if applicable. 
+The following `env.config.jsx` will render the modal.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { DashboardModal } from '@edx/frontend-plugin-learner-dashboard';
+
+const config = {
+  pluginSlots: {
+    dashboard_modal_slot: {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'dashboard_modal',
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: DashboardModal,
+          },
+        },
+      ],
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/DashboardModalSlot/index.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+const DashboardModal = () => (
+  <PluginSlot id="dashboard_modal_slot" />
+);
+
+export default DashboardModal;

src/plugin-slots/README.md

@@ -4,4 +4,5 @@
 * [`footer_slot`](./FooterSlot/)
 * [`widget_sidebar_slot`](./WidgetSidebarSlot/)
 * [`course_list_slot`](./CourseListSlot/)
-* [`no_courses_view_slot`](./NoCoursesViewSlot/)
+* [`no_courses_view_slot`](./NoCoursesViewSlot/)
+* [`dashboard_modal_slot](./DashboardModalSlot)

src/tracking/constants.js

@@ -20,9 +20,9 @@ export const events = StrictDict({
   leaveSession: 'leaveSession',
   unenrollReason: 'unenrollReason',
   entitlementUnenrollReason: 'entitlementUnenrollReason',
-  enterpriseDashboardModalOpened: 'enterpriseDashboardModalOpened',
-  enterpriseDashboardModalCTAClicked: 'enterpriseDashboardModalCTAClicked',
-  enterpriseDashboardModalClosed: 'enterpriseDashboardModalClosed',
+  dashboardModalOpened: 'dashboardModalOpened',
+  dashboardModalCTAClicked: 'dashboardModalCTAClicked',
+  dashboardModalClosed: 'dashboardModalClosed',
 });
 
 const learnerPortal = 'edx.ui.enterprise.lms.dashboard.learner_portal_modal';
@@ -39,9 +39,9 @@ export const eventNames = StrictDict({
   leaveSession: 'course-dashboard.leave-session',
   unenrollReason: 'unenrollment_reason.selected',
   entitlementUnenrollReason: 'entitlement_unenrollment_reason.selected',
-  enterpriseDashboardModalOpened: `${learnerPortal}.opened`,
-  enterpriseDashboardModalCTAClicked: `${learnerPortal}.dashboard_cta.clicked`,
-  enterpriseDashboardModalClosed: `${learnerPortal}.closed`,
+  dashboardModalOpened: `${learnerPortal}.opened`,
+  dashboardModalCTAClicked: `${learnerPortal}.dashboard_cta.clicked`,
+  dashboardModalClosed: `${learnerPortal}.closed`,
   findCoursesClicked: 'edx.bi.dashboard.find_courses_button.clicked',
   purchaseCredit: 'edx.bi.credit.clicked_purchase_credit',
   filterClicked: 'course-dashboard.filter.clicked',

src/tracking/trackers/enterpriseDashboard.js

@@ -8,7 +8,7 @@ import { eventNames } from '../constants';
  * @return {func} - Callback that tracks the event when fired.
  */
 export const modalOpened = (enterpriseUUID) => () => createEventTracker(
-  eventNames.enterpriseDashboardModalOpened,
+  eventNames.dashboardModalOpened,
   { enterpriseUUID },
 );
 
@@ -20,7 +20,7 @@ export const modalOpened = (enterpriseUUID) => () => createEventTracker(
  */
 export const modalCTAClicked = (enterpriseUUID, href) => createLinkTracker(
   createEventTracker(
-    eventNames.enterpriseDashboardModalCTAClicked,
+    eventNames.dashboardModalCTAClicked,
     { enterpriseUUID },
   ),
   href,
@@ -33,7 +33,7 @@ export const modalCTAClicked = (enterpriseUUID, href) => createLinkTracker(
  * @return {func} - Callback that tracks the event when fired.
  */
 export const modalClosed = (enterpriseUUID, source) => createEventTracker(
-  eventNames.enterpriseDashboardModalClosed,
+  eventNames.dashboardModalClosed,
   { enterpriseUUID, source },
 );
 

src/tracking/trackers/enterpriseDashboard.test.js

@@ -15,7 +15,7 @@ describe('enterpriseDashboard trackers', () => {
     it('creates event tracker for dashboard modal opened event', () => {
       expect(trackers.modalOpened(enterpriseUUID, source)()).toEqual(
         createEventTracker(
-          eventNames.enterpriseDashboardModalOpened,
+          eventNames.dashboardModalOpened,
           { enterpriseUUID, source },
         ),
       );
@@ -28,7 +28,7 @@ describe('enterpriseDashboard trackers', () => {
       expect(href).toEqual(testHref);
       expect(cb).toEqual(
         createEventTracker(
-          eventNames.enterpriseDashboardModalCTAClicked,
+          eventNames.dashboardModalCTAClicked,
           { enterpriseUUID, source },
         ),
       );
@@ -38,7 +38,7 @@ describe('enterpriseDashboard trackers', () => {
     it('creates event tracker for dashboard modal closed event with close source', () => {
       expect(trackers.modalClosed(enterpriseUUID, source)).toEqual(
         createEventTracker(
-          eventNames.enterpriseDashboardModalClosed,
+          eventNames.dashboardModalClosed,
           { enterpriseUUID, source },
         ),
       );