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);