diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx index 919ccfc22..b5f3f3b0a 100644 --- a/src/course-outline/CourseOutline.jsx +++ b/src/course-outline/CourseOutline.jsx @@ -22,6 +22,7 @@ import { verticalListSortingStrategy, } from '@dnd-kit/sortable'; import { useLocation } from 'react-router-dom'; +import { CourseAuthoringOutlineSidebarSlot } from '../plugin-slots/CourseAuthoringOutlineSidebarSlot'; import { LoadingSpinner } from '../generic/Loading'; import { getProcessingNotification } from '../generic/processing-notification/data/selectors'; @@ -35,7 +36,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 OutlineSideBar from './outline-sidebar/OutlineSidebar'; import StatusBar from './status-bar/StatusBar'; import EnableHighlightsModal from './enable-highlights-modal/EnableHighlightsModal'; import SectionCard from './section-card/SectionCard'; @@ -453,7 +453,7 @@ const CourseOutline = ({ courseId }) => { - + { return ( { {isUnitVerticalType && ( - <> - - - - {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && ( - - - - )} - - - - + )} {isSplitTestType && ( @@ -267,4 +256,4 @@ CourseUnit.propTypes = { courseId: PropTypes.string.isRequired, }; -export default injectIntl(CourseUnit); +export default CourseUnit; diff --git a/src/course-unit/sidebar/index.jsx b/src/course-unit/sidebar/index.jsx deleted file mode 100644 index a7697c8ab..000000000 --- a/src/course-unit/sidebar/index.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { Card } from '@openedx/paragon'; - -const Sidebar = ({ className, children, ...props }) => ( - - {children} - -); - -Sidebar.propTypes = { - className: PropTypes.string, - children: PropTypes.node, -}; - -Sidebar.defaultProps = { - className: null, - children: null, -}; - -export default Sidebar; diff --git a/src/course-unit/sidebar/index.tsx b/src/course-unit/sidebar/index.tsx new file mode 100644 index 000000000..98f3f28c6 --- /dev/null +++ b/src/course-unit/sidebar/index.tsx @@ -0,0 +1,18 @@ +import classNames from 'classnames'; +import { Card } from '@openedx/paragon'; + +const Sidebar = ({ className = null, children = null, ...props }:SidebarProps) => ( + + {children} + +); + +interface SidebarProps { + className?: string | null; + children?: React.ReactNode | null; +} + +export default Sidebar; diff --git a/src/generic/help-sidebar/HelpSidebar.jsx b/src/generic/help-sidebar/HelpSidebar.jsx index caa58e000..a3ca03dc8 100644 --- a/src/generic/help-sidebar/HelpSidebar.jsx +++ b/src/generic/help-sidebar/HelpSidebar.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import classNames from 'classnames'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; import { getWaffleFlags } from '../../data/selectors'; @@ -11,13 +11,13 @@ import messages from './messages'; import HelpSidebarLink from './HelpSidebarLink'; const HelpSidebar = ({ - intl, courseId, showOtherSettings, proctoredExamSettingsUrl, children, className, }) => { + const intl = useIntl(); const { pathname } = useLocation(); const { grading, @@ -124,7 +124,6 @@ HelpSidebar.defaultProps = { }; HelpSidebar.propTypes = { - intl: intlShape.isRequired, courseId: PropTypes.string, showOtherSettings: PropTypes.bool, proctoredExamSettingsUrl: PropTypes.string, @@ -132,4 +131,4 @@ HelpSidebar.propTypes = { className: PropTypes.string, }; -export default injectIntl(HelpSidebar); +export default HelpSidebar; diff --git a/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/README.md b/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/README.md new file mode 100644 index 000000000..0e2c63b6c --- /dev/null +++ b/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/README.md @@ -0,0 +1,40 @@ +# CourseAuthoringOutlineSidebarSlot + +### Slot ID: `course_authoring_outline_sidebar_slot` + +### Plugin Props: + +* `courseId` - String. + +## Description + +The slot wraps the sidebar that is displayed on the course outline page. It can +be used to add additional sidebar components or modify the existing sidebar. + +## Example + +![Screenshot of the outline sidebar surrounded by border](./images/outline_sidebar_with_border.png) + +The following example configuration surrounds the sidebar in a border as shown above. + +```js +import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + course_authoring_outline_sidebar_slot: { + keepDefault: true, + plugins: [ + { + op: PLUGIN_OPERATIONS.Wrap, + widgetId: 'default_contents', + wrapper: ({ component }) => ( +
{component}
+ ), + }, + ], + }, + } +}; +export default config; +``` diff --git a/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/images/outline_sidebar_with_border.png b/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/images/outline_sidebar_with_border.png new file mode 100644 index 000000000..e839bc7c4 Binary files /dev/null and b/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/images/outline_sidebar_with_border.png differ diff --git a/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx b/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx new file mode 100644 index 000000000..56f734be7 --- /dev/null +++ b/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx @@ -0,0 +1,18 @@ +import { PluginSlot } from '@openedx/frontend-plugin-framework/dist'; +import React from 'react'; +import OutlineSideBar from '../../course-outline/outline-sidebar/OutlineSidebar'; + +export const CourseAuthoringOutlineSidebarSlot = ({ courseId }: CourseAuthoringOutlineSidebarSlotProps) => ( + + + +); + +interface CourseAuthoringOutlineSidebarSlotProps { + courseId: string; +} diff --git a/src/plugin-slots/CourseAuthoringUnitSidebarSlot/README.md b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/README.md new file mode 100644 index 000000000..c3c6c0eb5 --- /dev/null +++ b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/README.md @@ -0,0 +1,42 @@ +# CourseAuthoringUnitSidebarSlot + +### Slot ID: `course_authoring_unit_sidebar_slot` + +### Plugin Props: + +* `courseId` - String. +* `blockId` - String. The usage id of the current unit being viewed / edited. +* `unitTitle` - String. The name of the current unit being viewed / edited. + +## Description + +The slot wraps the sidebar that is displayed on the unit editor page. It can +be used to add additional sidebar components or modify the existing sidebar. + +## Example + +![Screenshot of the unit sidebar surrounded by border](./images/unit_sidebar_with_border.png) + +The following example configuration surrounds the sidebar in a border as shown above. + +```js +import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + course_authoring_unit_sidebar_slot: { + keepDefault: true, + plugins: [ + { + op: PLUGIN_OPERATIONS.Wrap, + widgetId: 'default_contents', + wrapper: ({ component }) => ( +
{component}
+ ), + }, + ], + }, + } +}; +export default config; +``` diff --git a/src/plugin-slots/CourseAuthoringUnitSidebarSlot/images/unit_sidebar_with_border.png b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/images/unit_sidebar_with_border.png new file mode 100644 index 000000000..bc07d9957 Binary files /dev/null and b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/images/unit_sidebar_with_border.png differ diff --git a/src/plugin-slots/CourseAuthoringUnitSidebarSlot/index.tsx b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/index.tsx new file mode 100644 index 000000000..d92785676 --- /dev/null +++ b/src/plugin-slots/CourseAuthoringUnitSidebarSlot/index.tsx @@ -0,0 +1,37 @@ +import { getConfig } from '@edx/frontend-platform'; +import { PluginSlot } from '@openedx/frontend-plugin-framework/dist'; +import TagsSidebarControls from '../../content-tags-drawer/tags-sidebar-controls'; +import Sidebar from '../../course-unit/sidebar'; +import LocationInfo from '../../course-unit/sidebar/LocationInfo'; +import PublishControls from '../../course-unit/sidebar/PublishControls'; + +export const CourseAuthoringUnitSidebarSlot = ( + { + blockId, + courseId, + unitTitle, + }: CourseAuthoringUnitSidebarSlotProps, +) => ( + + + + + {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && ( + + + + )} + + + + +); + +interface CourseAuthoringUnitSidebarSlotProps { + blockId: string; + courseId: string; + unitTitle: string; +}