feat: adding new plugin slot for an enterprise modal

Author: kiram15

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 EnterpriseDashboardModalSlot from 'plugin-slots/EnterpriseDashboardModalSlot';
 
 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 && <EnterpriseDashboardModalSlot />}
           {(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 EnterpriseDashboardModalSlot from 'plugin-slots/EnterpriseDashboardModalSlot';
 
 import DashboardLayout from './DashboardLayout';
 import LoadingView from './LoadingView';
@@ -20,7 +20,7 @@ jest.mock('hooks', () => ({
   },
 }));
 
-jest.mock('containers/EnterpriseDashboardModal', () => 'EnterpriseDashboardModal');
+jest.mock('plugin-slots/EnterpriseDashboardModalSlot', () => 'EnterpriseDashboardModalSlot');
 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(EnterpriseDashboardModalSlot).length)
           .toEqual(showEnterpriseModal ? 1 : 0);
       });
       it(`${renderString(showSelectSessionModal)} select session modal`, () => {

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

@@ -0,0 +1,33 @@
+# Course Card Action Slot
+
+### Slot ID: `enterprise_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 { EnterpriseDashboardModal } from '@edx/frontend-plugin-learner-dashboard';
+
+const config = {
+  pluginSlots: {
+    enterprise_dashboard_modal_slot: {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'dashboard_modal',
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: EnterpriseDashboardModal,
+          },
+        },
+      ],
+    }
+  },
+}
+
+export default config;
+```

src/containers/EnterpriseDashboardModal/index.jsx

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

src/containers/EnterpriseDashboardModal/index.test.jsx

@@ -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/)
+* [`enterprise_dashboard_modal_slot](./EnterpriseDashboardModalSlot)