feat: create context for sidebarPages (#2827)

Creates the `OutlineSidebarPagesContext` so we can add new pages using plugins, as in openedx/frontend-plugin-aspects#115

Author: rpenido

package-lock.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",

package.json

@@ -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

src/course-outline/outline-sidebar/OutlineSidebar.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(() => <CourseOutlineAspectsPage {...pluginProps} />, [pluginProps]);
+ *
+ *  const overridedPages = useMemo(() => ({
+ *    ...sidebarPages,
+ *    analytics: {
+ *      component: AnalyticsPage,
+ *      icon: AutoGraph,
+ *      title: messages.analyticsLabel,
+ *    },
+ *  }), [sidebarPages, AnalyticsPage]);
+ *
+ *  return (
+ *    <OutlineSidebarPagesContext.Provider value={overridedPages}>
+ *      {component}
+ *    </OutlineSidebarPagesContext.Provider>
+ *  );
+ *}
+ */
+export const OutlineSidebarPagesContext = createContext<OutlineSidebarPages>(OUTLINE_SIDEBAR_PAGES);
+
+export const useOutlineSidebarPagesContext = (): OutlineSidebarPages => useContext(OutlineSidebarPagesContext);