feat!: organize plugin slots as components, add footer slot (#1381)

BREAKING CHANGE: slot ids have been changed for consistency
* `sequence_container_plugin` -> `sequence_container_slot`
* `unit_title_plugin` -> `unit_title_slot`

src/courseware/course/sequence/Sequence.jsx

@@ -9,11 +9,11 @@ import {
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
 import PageLoading from '@src/generic/PageLoading';
 import { useModel } from '@src/generic/model-store';
 import { useSequenceBannerTextAlert, useSequenceEntranceExamAlert } from '@src/alerts/sequence-alerts/hooks';
+import SequenceContainerSlot from '../../../plugin-slots/SequenceContainerSlot';
 
 import CourseLicense from '../course-license';
 import Sidebar from '../sidebar/Sidebar';
@@ -196,13 +196,7 @@ const Sequence = ({
         </div>
         {isNewDiscussionSidebarViewEnabled ? <NewSidebar /> : <Sidebar />}
       </div>
-      <PluginSlot
-        id="sequence_container_plugin"
-        pluginProps={{
-          courseId,
-          unitId,
-        }}
-      />
+      <SequenceContainerSlot courseId={courseId} unitId={unitId} />
     </>
   );
 

src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap

@@ -28,14 +28,9 @@ exports[`Unit component output snapshot: not bookmarked, do not show content 1`]
     >
       unit-title
     </h3>
-    <PluginSlot
-      id="unit_title_plugin"
-      pluginProps={
-        Object {
-          "courseId": "test-course-id",
-          "unitId": "test-props-id",
-        }
-      }
+    <UnitTitleSlot
+      courseId="test-course-id"
+      unitId="test-props-id"
     />
   </div>
   <h2

src/courseware/course/sequence/Unit/index.jsx

@@ -7,7 +7,6 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useModel } from '@src/generic/model-store';
 import { usePluginsCallback } from '@src/generic/plugin-store';
 
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import BookmarkButton from '../../bookmark/BookmarkButton';
 import messages from '../messages';
 import ContentIFrame from './ContentIFrame';
@@ -15,6 +14,7 @@ import UnitSuspense from './UnitSuspense';
 import { modelKeys, views } from './constants';
 import { useExamAccess, useShouldDisplayHonorCode } from './hooks';
 import { getIFrameUrl } from './urls';
+import UnitTitleSlot from '../../../../plugin-slots/UnitTitleSlot';
 
 const Unit = ({
   courseId,
@@ -43,13 +43,7 @@ const Unit = ({
     <div className="unit">
       <div className="mb-0">
         <h3 className="h3">{unit.title}</h3>
-        <PluginSlot
-          id="unit_title_plugin"
-          pluginProps={{
-            courseId,
-            unitId: id,
-          }}
-        />
+        <UnitTitleSlot courseId={courseId} unitId={id} />
       </div>
       <h2 className="sr-only">{formatMessage(messages.headerPlaceholder)}</h2>
       <BookmarkButton