diff --git a/package-lock.json b/package-lock.json index 8a92bc24d..ccb88dbc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,7 @@ "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki", "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary", "@openedx/frontend-build": "^14.6.2", - "@openedx/frontend-plugin-framework": "^1.7.0", + "@openedx/frontend-plugin-framework": "^1.8.0", "@openedx/paragon": "^23.5.0", "@redux-devtools/extension": "^3.3.0", "@reduxjs/toolkit": "2.11.2", @@ -7263,9 +7263,9 @@ } }, "node_modules/@openedx/frontend-plugin-framework": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.7.0.tgz", - "integrity": "sha512-8tGkuHvtzhbqb9dU4sXUtR0K44+Hjh1uGR6DvhZAt9wSKQC1v4RBk34ef8DFzQhoNQa/Jtn6BJuta4Un6MmHmw==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.8.0.tgz", + "integrity": "sha512-QLH4KTkk+dT8SwrBpEaWS0T0htYhaIS8i36ngXraUEe+Iabh6NVN0I84bQa5vaAhz5v101GNmdUXBanf5waPgQ==", "license": "AGPL-3.0", "dependencies": { "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2", diff --git a/package.json b/package.json index 17bc108cb..744bb68a5 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki", "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary", "@openedx/frontend-build": "^14.6.2", - "@openedx/frontend-plugin-framework": "^1.7.0", + "@openedx/frontend-plugin-framework": "^1.8.0", "@openedx/paragon": "^23.5.0", "@redux-devtools/extension": "^3.3.0", "@reduxjs/toolkit": "2.11.2", diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.tsx b/src/course-outline/outline-sidebar/OutlineSidebar.tsx index a3afc2a15..cf88a3c46 100644 --- a/src/course-outline/outline-sidebar/OutlineSidebar.tsx +++ b/src/course-outline/outline-sidebar/OutlineSidebar.tsx @@ -3,14 +3,13 @@ import { useMediaQuery } from 'react-responsive'; import { Sidebar } from '@src/generic/sidebar'; +import { isOutlineNewDesignEnabled } from '../utils'; import OutlineHelpSidebar from './OutlineHelpSidebar'; import { useOutlineSidebarContext } from './OutlineSidebarContext'; -import { isOutlineNewDesignEnabled } from '../utils'; -import { getOutlineSidebarPages } from './sidebarPages'; +import { useOutlineSidebarPagesContext } from './OutlineSidebarPagesContext'; const OutlineSideBar = () => { const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth }); - const sidebarPages = getOutlineSidebarPages(); const { currentPageKey, @@ -19,6 +18,8 @@ const OutlineSideBar = () => { toggle, } = useOutlineSidebarContext(); + const sidebarPages = useOutlineSidebarPagesContext(); + // Returns the previous help sidebar component if the waffle flag is disabled if (!isOutlineNewDesignEnabled()) { // On screens smaller than medium, the help sidebar is shown below the course outline diff --git a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx new file mode 100644 index 000000000..93acf1fbb --- /dev/null +++ b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx @@ -0,0 +1,82 @@ +import { createContext, useContext } from 'react'; +import { getConfig } from '@edx/frontend-platform'; +import { + HelpOutline, Info, Plus, Tag, +} from '@openedx/paragon/icons'; + +import type { SidebarPage } from '@src/generic/sidebar'; + +import { AddSidebar } from './AddSidebar'; +import { OutlineAlignSidebar } from './OutlineAlignSidebar'; +import OutlineHelpSidebar from './OutlineHelpSidebar'; +import { OutlineInfoSidebar } from './OutlineInfoSidebar'; +import messages from './messages'; + +export type OutlineSidebarPages = { + info: SidebarPage; + help: SidebarPage; + add: SidebarPage; + align?: SidebarPage; +}; + +const showAlignSidebar = getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true'; + +const OUTLINE_SIDEBAR_PAGES: OutlineSidebarPages = { + info: { + component: OutlineInfoSidebar, + icon: Info, + title: messages.sidebarButtonInfo, + }, + ...(showAlignSidebar && { + align: { + component: OutlineAlignSidebar, + icon: Tag, + title: messages.sidebarButtonAlign, + }, + }), + help: { + component: OutlineHelpSidebar, + icon: HelpOutline, + title: messages.sidebarButtonHelp, + }, + add: { + component: AddSidebar, + icon: Plus, + title: messages.sidebarButtonAdd, + }, +}; + +/** + * Context for the Outline Sidebar Pages. + * + * This could be used in plugins to add new pages to the sidebar. + * + * @example + * + * ```tsx + * export function CourseOutlineSidebarWrapper( + * { component, pluginProps }: { component: React.ReactNode, pluginProps: CourseOutlineAspectsPageProps }, + * ) { + * const sidebarPages = useOutlineSidebarPagesContext(); + * + * const AnalyticsPage = React.useCallback(() => , [pluginProps]); + * + * const overridedPages = useMemo(() => ({ + * ...sidebarPages, + * analytics: { + * component: AnalyticsPage, + * icon: AutoGraph, + * title: messages.analyticsLabel, + * }, + * }), [sidebarPages, AnalyticsPage]); + * + * return ( + * + * {component} + * + * ); + *} + */ +export const OutlineSidebarPagesContext = createContext(OUTLINE_SIDEBAR_PAGES); + +export const useOutlineSidebarPagesContext = (): OutlineSidebarPages => useContext(OutlineSidebarPagesContext);