From f110a0ade81df363fef27eac9d6ce3c0920ebf83 Mon Sep 17 00:00:00 2001 From: Kira Miller Date: Wed, 12 Feb 2025 06:57:46 +0000 Subject: [PATCH] feat: adding new plugin slot for an enterprise modal --- src/containers/Dashboard/index.jsx | 4 +- src/containers/Dashboard/index.test.jsx | 6 +- .../__snapshots__/index.test.jsx.snap | 42 ------------- .../EnterpriseDashboardModal/index.jsx | 60 ------------------- .../EnterpriseDashboardModal/index.test.jsx | 29 --------- .../EnterpriseDashboardModal/messages.js | 26 -------- .../EnterpriseDashboardModalSlot/README.md | 33 ++++++++++ .../EnterpriseDashboardModalSlot/index.jsx | 8 +++ src/plugin-slots/README.md | 3 +- 9 files changed, 48 insertions(+), 163 deletions(-) delete mode 100644 src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap delete mode 100644 src/containers/EnterpriseDashboardModal/index.jsx delete mode 100644 src/containers/EnterpriseDashboardModal/index.test.jsx delete mode 100644 src/containers/EnterpriseDashboardModal/messages.js create mode 100644 src/plugin-slots/EnterpriseDashboardModalSlot/README.md create mode 100644 src/plugin-slots/EnterpriseDashboardModalSlot/index.jsx diff --git a/src/containers/Dashboard/index.jsx b/src/containers/Dashboard/index.jsx index d260773..9123088 100644 --- a/src/containers/Dashboard/index.jsx +++ b/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 = () => {

{pageTitle}

{!initIsPending && ( <> - {hasAvailableDashboards && } + {hasAvailableDashboards && } {(hasCourses && showSelectSessionModal) && } )} diff --git a/src/containers/Dashboard/index.test.jsx b/src/containers/Dashboard/index.test.jsx index 4690ddd..86886ba 100644 --- a/src/containers/Dashboard/index.test.jsx +++ b/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`, () => { diff --git a/src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap b/src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap deleted file mode 100644 index b754d05..0000000 --- a/src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,42 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EnterpriseDashboard empty snapshot 1`] = `null`; - -exports[`EnterpriseDashboard snapshot 1`] = ` - -
-

- You have access to the edX, Inc. dashboard -

-

- To access the courses available to you through edX, Inc., visit the edX, Inc. dashboard now. -

- - - - -
- -`; diff --git a/src/containers/EnterpriseDashboardModal/index.jsx b/src/containers/EnterpriseDashboardModal/index.jsx deleted file mode 100644 index 7955574..0000000 --- a/src/containers/EnterpriseDashboardModal/index.jsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -// import PropTypes from 'prop-types'; - -import { useIntl } from '@edx/frontend-platform/i18n'; -import { - ModalDialog, ActionRow, Button, -} from '@openedx/paragon'; - -import messages from './messages'; -import useEnterpriseDashboardHook from './hooks'; - -export const EnterpriseDashboardModal = () => { - const { formatMessage } = useIntl(); - const { - showModal, - handleClose, - handleCTAClick, - handleEscape, - dashboard, - } = useEnterpriseDashboardHook(); - if (!dashboard || !dashboard.label) { - return null; - } - return ( - -
-

- {formatMessage(messages.enterpriseDialogHeader, { - label: dashboard.label, - })} -

-

- {formatMessage(messages.enterpriseDialogBody, { - label: dashboard.label, - })} -

- - - - -
- - ); -}; - -EnterpriseDashboardModal.propTypes = {}; - -export default EnterpriseDashboardModal; diff --git a/src/containers/EnterpriseDashboardModal/index.test.jsx b/src/containers/EnterpriseDashboardModal/index.test.jsx deleted file mode 100644 index a807468..0000000 --- a/src/containers/EnterpriseDashboardModal/index.test.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import { shallow } from '@edx/react-unit-test-utils'; -import EnterpriseDashboard from '.'; - -import useEnterpriseDashboardHook from './hooks'; - -jest.mock('./hooks', () => ({ - __esModule: true, - default: jest.fn(), -})); - -describe('EnterpriseDashboard', () => { - test('snapshot', () => { - const hookData = { - dashboard: { label: 'edX, Inc.', url: '/edx-dashboard' }, - showDialog: false, - handleClose: jest.fn().mockName('useEnterpriseDashboardHook.handleClose'), - handleCTAClick: jest.fn().mockName('useEnterpriseDashboardHook.handleCTAClick'), - handleEscape: jest.fn().mockName('useEnterpriseDashboardHook.handleEscape'), - }; - useEnterpriseDashboardHook.mockReturnValueOnce({ ...hookData }); - const el = shallow(); - expect(el.snapshot).toMatchSnapshot(); - }); - test('empty snapshot', () => { - useEnterpriseDashboardHook.mockReturnValueOnce({}); - const el = shallow(); - expect(el.snapshot).toMatchSnapshot(); - }); -}); diff --git a/src/containers/EnterpriseDashboardModal/messages.js b/src/containers/EnterpriseDashboardModal/messages.js deleted file mode 100644 index ff76b0b..0000000 --- a/src/containers/EnterpriseDashboardModal/messages.js +++ /dev/null @@ -1,26 +0,0 @@ -import { defineMessages } from '@edx/frontend-platform/i18n'; - -const messages = defineMessages({ - enterpriseDialogHeader: { - id: 'leanerDashboard.enterpriseDialogHeader', - defaultMessage: 'You have access to the {label} dashboard', - description: 'title for enterpise dashboard dialog', - }, - enterpriseDialogBody: { - id: 'leanerDashboard.enterpriseDialogBody', - defaultMessage: 'To access the courses available to you through {label}, visit the {label} dashboard now.', - description: 'Body text for enterpise dashboard dialog', - }, - enterpriseDialogDismissButton: { - id: 'leanerDashboard.enterpriseDialogDismissButton', - defaultMessage: 'Dismiss', - description: 'Dismiss button to cancel visiting dashboard', - }, - enterpriseDialogConfirmButton: { - id: 'leanerDashboard.enterpriseDialogConfirmButton', - defaultMessage: 'Go to dashboard', - description: 'Confirm button to go to the dashboard url', - }, -}); - -export default messages; diff --git a/src/plugin-slots/EnterpriseDashboardModalSlot/README.md b/src/plugin-slots/EnterpriseDashboardModalSlot/README.md new file mode 100644 index 0000000..f2a7e70 --- /dev/null +++ b/src/plugin-slots/EnterpriseDashboardModalSlot/README.md @@ -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; +``` diff --git a/src/plugin-slots/EnterpriseDashboardModalSlot/index.jsx b/src/plugin-slots/EnterpriseDashboardModalSlot/index.jsx new file mode 100644 index 0000000..288939a --- /dev/null +++ b/src/plugin-slots/EnterpriseDashboardModalSlot/index.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { PluginSlot } from '@openedx/frontend-plugin-framework'; + +const EnterpriseDashboardModal = () => ( + +); + +export default EnterpriseDashboardModal; diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md index d1f6cca..7a44f7e 100644 --- a/src/plugin-slots/README.md +++ b/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 newline at end of file +* [`no_courses_view_slot`](./NoCoursesViewSlot/) +* [`enterprise_dashboard_modal_slot](./EnterpriseDashboardModalSlot) \ No newline at end of file