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
+
+
+### Replaced with custom component
+
+
+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