feat: adds slots for in-context metrics in studio outline and unit views (#1725)

Author: tecoholic

src/course-outline/CourseOutline.jsx

@@ -35,7 +35,6 @@ import AlertMessage from '../generic/alert-message';
 import getPageHeadTitle from '../generic/utils';
 import { getCurrentItem, getProctoredExamsFlag } from './data/selectors';
 import { COURSE_BLOCK_NAMES } from './constants';
-import HeaderNavigations from './header-navigations/HeaderNavigations';
 import OutlineSideBar from './outline-sidebar/OutlineSidebar';
 import StatusBar from './status-bar/StatusBar';
 import EnableHighlightsModal from './enable-highlights-modal/EnableHighlightsModal';
@@ -55,6 +54,7 @@ import {
 import { useCourseOutline } from './hooks';
 import messages from './messages';
 import { getTagsExportFile } from './data/api';
+import CourseOutlineHeaderActionsSlot from '../plugin-slots/CourseOutlineHeaderActionsSlot';
 
 const CourseOutline = ({ courseId }) => {
   const intl = useIntl();
@@ -294,14 +294,15 @@ const CourseOutline = ({ courseId }) => {
             title={intl.formatMessage(messages.headingTitle)}
             subtitle={intl.formatMessage(messages.headingSubtitle)}
             headerActions={(
-              <HeaderNavigations
+              <CourseOutlineHeaderActionsSlot
                 isReIndexShow={isReIndexShow}
                 isSectionsExpanded={isSectionsExpanded}
                 headerNavigationsActions={headerNavigationsActions}
                 isDisabledReindexButton={isDisabledReindexButton}
                 hasSections={Boolean(sectionsList.length)}
                 courseActions={courseActions}
                 errors={errors}
+                sections={sections}
               />
             )}
           />

src/course-outline/CourseOutline.scss

@@ -1,4 +1,3 @@
-@import "./header-navigations/HeaderNavigations";
 @import "./status-bar/StatusBar";
 @import "./section-card/SectionCard";
 @import "./subsection-card/SubsectionCard";

src/course-outline/card-header/CardHeader.jsx

@@ -54,6 +54,7 @@ const CardHeader = ({
   discussionEnabled,
   discussionsSettings,
   parentInfo,
+  extraActionsComponent,
 }) => {
   const intl = useIntl();
   const [searchParams] = useSearchParams();
@@ -145,6 +146,7 @@ const CardHeader = ({
           { getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && !!contentTagCount && (
             <TagCount count={contentTagCount} onClick={openManageTagsDrawer} />
           )}
+          {extraActionsComponent}
           <Dropdown data-testid={`${namePrefix}-card-header__menu`} onClick={onClickMenuButton}>
             <Dropdown.Toggle
               className="item-card-header__menu"
@@ -252,6 +254,7 @@ CardHeader.defaultProps = {
   discussionsSettings: {},
   parentInfo: {},
   cardId: '',
+  extraActionsComponent: null,
 };
 
 CardHeader.propTypes = {
@@ -295,6 +298,9 @@ CardHeader.propTypes = {
     isTimeLimited: PropTypes.bool,
     graded: PropTypes.bool,
   }),
+  // An optional component that is rendered before the dropdown. This is used by the Subsection
+  // and Unit card components to render their plugin slots.
+  extraActionsComponent: PropTypes.node,
 };
 
 export default CardHeader;

src/course-outline/header-navigations/HeaderNavigations.jsx

@@ -25,7 +25,7 @@ const HeaderNavigations = ({
   } = headerNavigationsActions;
 
   return (
-    <nav className="header-navigations ml-auto">
+    <>
       {courseActions.childAddable && (
         <OverlayTrigger
           placement="bottom"
@@ -90,7 +90,7 @@ const HeaderNavigations = ({
           {intl.formatMessage(messages.viewLiveButton)}
         </Button>
       </OverlayTrigger>
-    </nav>
+    </>
   );
 };
 

src/course-outline/header-navigations/HeaderNavigations.scss

@@ -11,6 +11,7 @@ import { Add as IconAdd } from '@openedx/paragon/icons';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 
+import CourseOutlineSubsectionCardExtraActionsSlot from '../../plugin-slots/CourseOutlineSubsectionCardExtraActionsSlot';
 import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data/slice';
 import { RequestStatus } from '../../data/constants';
 import CardHeader from '../card-header/CardHeader';
@@ -127,6 +128,13 @@ const SubsectionCard = ({
     />
   );
 
+  const extraActionsComponent = (
+    <CourseOutlineSubsectionCardExtraActionsSlot
+      subsection={subsection}
+      section={section}
+    />
+  );
+
   useEffect(() => {
     if (activeId === id && isExpanded) {
       setIsExpanded(false);
@@ -205,6 +213,7 @@ const SubsectionCard = ({
               actions={actions}
               proctoringExamConfigurationLink={proctoringExamConfigurationLink}
               isSequential
+              extraActionsComponent={extraActionsComponent}
             />
             <div className="subsection-card__content item-children" data-testid="subsection-card__content">
               <XBlockStatus

src/course-outline/subsection-card/SubsectionCard.jsx

@@ -6,6 +6,7 @@ import { useToggle } from '@openedx/paragon';
 import { isEmpty } from 'lodash';
 import { useSearchParams } from 'react-router-dom';
 
+import CourseOutlineUnitCardExtraActionsSlot from '../../plugin-slots/CourseOutlineUnitCardExtraActionsSlot';
 import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data/slice';
 import { RequestStatus } from '../../data/constants';
 import CardHeader from '../card-header/CardHeader';
@@ -111,6 +112,14 @@ const UnitCard = ({
     />
   );
 
+  const extraActionsComponent = (
+    <CourseOutlineUnitCardExtraActionsSlot
+      unit={unit}
+      subsection={subsection}
+      section={section}
+    />
+  );
+
   useEffect(() => {
     // if this items has been newly added, scroll to it.
     // we need to check section.shouldScroll as whole section is fetched when a
@@ -177,6 +186,7 @@ const UnitCard = ({
           discussionEnabled={discussionEnabled}
           discussionsSettings={discussionsSettings}
           parentInfo={parentInfo}
+          extraActionsComponent={extraActionsComponent}
         />
         <div className="unit-card__content item-children" data-testid="unit-card__content">
           <XBlockStatus

src/course-outline/unit-card/UnitCard.jsx

@@ -25,7 +25,6 @@ import Loading from '../generic/Loading';
 import AddComponent from './add-component/AddComponent';
 import HeaderTitle from './header-title/HeaderTitle';
 import Breadcrumbs from './breadcrumbs/Breadcrumbs';
-import HeaderNavigations from './header-navigations/HeaderNavigations';
 import Sequence from './course-sequence';
 import Sidebar from './sidebar';
 import SplitTestSidebarInfo from './sidebar/SplitTestSidebarInfo';
@@ -38,6 +37,7 @@ import { PasteNotificationAlert } from './clipboard';
 import XBlockContainerIframe from './xblock-container-iframe';
 import MoveModal from './move-modal';
 import IframePreviewLibraryXBlockChanges from './preview-changes';
+import CourseUnitHeaderActionsSlot from '../plugin-slots/CourseUnitHeaderActionsSlot';
 
 const CourseUnit = ({ courseId }) => {
   const { blockId } = useParams();
@@ -157,9 +157,11 @@ const CourseUnit = ({ courseId }) => {
               />
             )}
             headerActions={(
-              <HeaderNavigations
+              <CourseUnitHeaderActionsSlot
                 category={unitCategory}
                 headerNavigationsActions={headerNavigationsActions}
+                unitTitle={unitTitle}
+                verticalBlocks={courseVerticalChildren.children}
               />
             )}
           />

src/course-unit/CourseUnit.jsx

@@ -0,0 +1,55 @@
+# CourseOutlineHeaderActionsSlot
+
+### Slot ID: `course_outline_header_actions_slot`
+### Plugin Props:
+
+* `isReIndexShow` - Boolean.
+* `isSectionsExpanded` - Boolean.
+* `headerNavigationsActions` - Object. See Proptypes definition in the component for details.
+* `hasSections` - Boolean. Indicates if the course outline has sections.
+* `courseActions` - Object. See Proptypes definition in the component for details.
+* `errors` - Object. See Proptypes definition in the component for details.
+* `sections` - Array of objects. Sections of the course outline.
+
+## Description
+
+The slot is positioned in the `SubHeader` section of the Course Outline page, suitable for adding action buttons.
+
+The slot by default contains the action buttons such as `+ New Section`, `Reindex`, `View Live`.
+
+## Example
+
+![Screenshot of a custom button in slot](./images/mybutton_added_to_the_slot.png)
+
+The following example configuration inserts an extra button to the header as shown above.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Button } from '@openedx/paragon';
+
+const MyButton = () => (
+  <Button>🐣</Button>
+);
+
+const config = {
+  pluginSlots: {
+    course_outline_header_actions_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'my-extra-button',
+            priority: 60,
+            type: DIRECT_PLUGIN,
+            RenderWidget: MyButton,
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
+

src/plugin-slots/CourseOutlineHeaderActionsSlot/README.md

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseOutlineHeaderActionsSlot pluginProps are set correctly 1`] = `
+<PluginSlot
+  id="course_outline_header_actions_slot"
+  pluginProps={
+    {
+      "courseActions": {
+        "childAddable": true,
+        "deletable": true,
+        "draggable": true,
+        "duplicable": true,
+      },
+      "errors": {},
+      "hasSections": false,
+      "headerNavigationsActions": {
+        "handleExpandAll": [MockFunction],
+        "handleNewSection": [MockFunction],
+        "handleReIndex": [MockFunction],
+        "lmsLink": "",
+      },
+      "isDisabledReindexButton": false,
+      "isReIndexShow": false,
+      "isSectionsExpanded": false,
+      "sections": [],
+    }
+  }
+>
+  <HeaderNavigations
+    courseActions={
+      {
+        "childAddable": true,
+        "deletable": true,
+        "draggable": true,
+        "duplicable": true,
+      }
+    }
+    errors={{}}
+    hasSections={false}
+    headerNavigationsActions={
+      {
+        "handleExpandAll": [MockFunction],
+        "handleNewSection": [MockFunction],
+        "handleReIndex": [MockFunction],
+        "lmsLink": "",
+      }
+    }
+    isDisabledReindexButton={false}
+    isReIndexShow={false}
+    isSectionsExpanded={false}
+  />
+</PluginSlot>
+`;