diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx index db33f55fc5..d7cbc38e95 100644 --- a/src/course-home/outline-tab/OutlineTab.jsx +++ b/src/course-home/outline-tab/OutlineTab.jsx @@ -24,7 +24,7 @@ import usePrivateCourseAlert from './alerts/private-course-alert'; import useScheduledContentAlert from './alerts/scheduled-content-alert'; import { useModel } from '../../generic/model-store'; import WelcomeMessage from './widgets/WelcomeMessage'; -import ProctoringInfoPanel from './widgets/ProctoringInfoPanel'; +import { ProctoringInfoPanelSlot } from '../../plugin-slots/ProctoringInfoPanelSlot'; import AccountActivationAlert from '../../alerts/logistration-alert/AccountActivationAlert'; import CourseHomeSectionOutlineSlot from '../../plugin-slots/CourseHomeSectionOutlineSlot'; @@ -171,7 +171,7 @@ const OutlineTab = () => { {rootCourseId && (
- + { /** Defer showing the goal widget until the ProctoringInfoPanel has resolved or has been determined as disabled to avoid components bouncing around too much as screen is rendered */ } {(!enableProctoredExams || proctoringPanelStatus === 'loaded') && weeklyLearningGoalEnabled && ( diff --git a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx b/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx index 29167e5a6f..b53c483b07 100644 --- a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx +++ b/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import camelCase from 'lodash.camelcase'; +import PropTypes from 'prop-types'; import { useIntl } from '@edx/frontend-platform/i18n'; import { Button } from '@openedx/paragon'; @@ -10,7 +11,7 @@ import { getProctoringInfoData } from '../../data/api'; import { fetchProctoringInfoResolved } from '../../data/slice'; import { useModel } from '../../../generic/model-store'; -const ProctoringInfoPanel = () => { +const ProctoringInfoPanel = ({ proctoringReviewRequirementsButtonLink }) => { const intl = useIntl(); const { courseId, @@ -207,7 +208,7 @@ const ProctoringInfoPanel = () => { {isSubmissionRequired(readableStatus) && ( onboardingExamButton )} -
@@ -217,4 +218,8 @@ const ProctoringInfoPanel = () => { ); }; +ProctoringInfoPanel.propTypes = { + proctoringReviewRequirementsButtonLink: PropTypes.string.isRequired, +}; + export default ProctoringInfoPanel; diff --git a/src/plugin-slots/ProctoringInfoPanelSlot/README.md b/src/plugin-slots/ProctoringInfoPanelSlot/README.md new file mode 100644 index 0000000000..b963fc5c11 --- /dev/null +++ b/src/plugin-slots/ProctoringInfoPanelSlot/README.md @@ -0,0 +1,47 @@ +# Procotoring Info Panel Slot + +### Slot ID: `org.openedx.frontend.learning.proctoring_info_panel.v1` + +### Slot ID Aliases +* `proctoring_info_panel_slot` + +### Props: +* `proctoringReviewRequirementsButtonLink` + +## Description + +This slot is used to replace/modify/hide the proctoring info panel. + +## Example + +### Default content +![Proctoring info panel slot with default content](./screenshot_default.png) + +### Replaced with custom component +![Proctoring info panel slot with default content](./screenshot_custom.png) + +The following `env.config.jsx` will replace the notifications discussions sidebar. + +```js +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + 'org.openedx.frontend.learning.proctoring_info_panel.v1': { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'proctoring_info_panel', + type: DIRECT_PLUGIN, + RenderWidget: () =>

Proctoring Info Panel

, + }, + }, + ], + } + }, +} + +export default config; +``` diff --git a/src/plugin-slots/ProctoringInfoPanelSlot/index.tsx b/src/plugin-slots/ProctoringInfoPanelSlot/index.tsx new file mode 100644 index 0000000000..73543a34d9 --- /dev/null +++ b/src/plugin-slots/ProctoringInfoPanelSlot/index.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import { PluginSlot } from '@openedx/frontend-plugin-framework'; +import ProctoringInfoPanel from '../../course-home/outline-tab/widgets/ProctoringInfoPanel'; + +export const ProctoringInfoPanelSlot = ( + { proctoringReviewRequirementsButtonLink }:ProctoringInfoPanelSlotProps, +) => ( + + + +); + +interface ProctoringInfoPanelSlotProps { + proctoringReviewRequirementsButtonLink?: string; +} diff --git a/src/plugin-slots/ProctoringInfoPanelSlot/screenshot_custom.png b/src/plugin-slots/ProctoringInfoPanelSlot/screenshot_custom.png new file mode 100644 index 0000000000..d6bfb13b68 Binary files /dev/null and b/src/plugin-slots/ProctoringInfoPanelSlot/screenshot_custom.png differ diff --git a/src/plugin-slots/ProctoringInfoPanelSlot/screenshot_default.png b/src/plugin-slots/ProctoringInfoPanelSlot/screenshot_default.png new file mode 100644 index 0000000000..6202c84ab6 Binary files /dev/null and b/src/plugin-slots/ProctoringInfoPanelSlot/screenshot_default.png differ