feat: add Proctoring Info Panel plugin slot

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 = () => {
         </div>
         {rootCourseId && (
           <div className="col col-12 col-md-4">
-            <ProctoringInfoPanel />
+            <ProctoringInfoPanelSlot proctoringReviewRequirementsButtonLink="https://support.edx.org/hc/en-us/sections/115004169247-Taking-Timed-and-Proctored-Exams" />
             { /** 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 && (

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
             )}
-            <Button variant="outline-primary" block href="https://support.edx.org/hc/en-us/sections/115004169247-Taking-Timed-and-Proctored-Exams">
+            <Button variant="outline-primary" block href={proctoringReviewRequirementsButtonLink}>
               {intl.formatMessage(messages.proctoringReviewRequirementsButton)}
             </Button>
           </div>
@@ -217,4 +218,8 @@ const ProctoringInfoPanel = () => {
   );
 };
 
+ProctoringInfoPanel.propTypes = {
+  proctoringReviewRequirementsButtonLink: PropTypes.string.isRequired,
+};
+
 export default ProctoringInfoPanel;

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: () => <h3>Proctoring Info Panel</h3>,
+                },
+            },
+        ],
+    }
+  },
+}
+
+export default config;
+```

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,
+) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.proctoring_info_panel.v1"
+    idAliases={['proctoring_info_panel_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <ProctoringInfoPanel
+      proctoringReviewRequirementsButtonLink={proctoringReviewRequirementsButtonLink ?? ''}
+    />
+  </PluginSlot>
+);
+
+interface ProctoringInfoPanelSlotProps {
+  proctoringReviewRequirementsButtonLink?: string;
+}