feat: Add slots to add tab links and add slots for plugin routes

Adds new slot that allow adding new links to course tabs and a slot that allows
creating new routes for additional additonal pages.

Author: xitij2000

src/course-tabs/CourseTabsNavigation.jsx src/course-tabs/CourseTabsNavigation.tsxsrc/course-tabs/CourseTabsNavigation.jsx renamed to src/course-tabs/CourseTabsNavigation.tsx

@@ -1,16 +1,28 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
-
-import messages from './messages';
-import Tabs from '../generic/tabs/Tabs';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { CourseTabLinksSlot } from '../plugin-slots/CourseTabLinksSlot';
 import { CoursewareSearch, CoursewareSearchToggle } from '../course-home/courseware-search';
 import { useCoursewareSearchState } from '../course-home/courseware-search/hooks';
 
+import Tabs from '../generic/tabs/Tabs';
+import messages from './messages';
+
+interface CourseTabsNavigationProps {
+  activeTabSlug?: string;
+  className?: string | null;
+  tabs: Array<{
+    title: string;
+    slug: string;
+    url: string;
+  }>;
+}
+
 const CourseTabsNavigation = ({
-  activeTabSlug, className, tabs,
-}) => {
+  activeTabSlug = undefined,
+  className = null,
+  tabs,
+}:CourseTabsNavigationProps) => {
   const intl = useIntl();
   const { show } = useCoursewareSearchState();
 
@@ -23,15 +35,7 @@ const CourseTabsNavigation = ({
               className="nav-underline-tabs"
               aria-label={intl.formatMessage(messages.courseMaterial)}
             >
-              {tabs.map(({ url, title, slug }) => (
-                <a
-                  key={slug}
-                  className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTabSlug })}
-                  href={url}
-                >
-                  {title}
-                </a>
-              ))}
+              <CourseTabLinksSlot tabs={tabs} activeTabSlug={activeTabSlug} />
             </Tabs>
           </div>
           <div className="search-toggle">
@@ -44,19 +48,4 @@ const CourseTabsNavigation = ({
   );
 };
 
-CourseTabsNavigation.propTypes = {
-  activeTabSlug: PropTypes.string,
-  className: PropTypes.string,
-  tabs: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    slug: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-  })).isRequired,
-};
-
-CourseTabsNavigation.defaultProps = {
-  activeTabSlug: undefined,
-  className: null,
-};
-
 export default CourseTabsNavigation;

src/index.jsx

@@ -23,6 +23,8 @@ import CoursewareRedirectLandingPage from './courseware/CoursewareRedirectLandin
 import DatesTab from './course-home/dates-tab';
 import GoalUnsubscribe from './course-home/goal-unsubscribe';
 import ProgressTab from './course-home/progress-tab/ProgressTab';
+import { getPluginRoutes } from './plugin-routes';
+import { CoursePageSlot } from './plugin-slots/CoursePageSlot';
 import { TabContainer } from './tab-page';
 
 import { fetchDatesTab, fetchOutlineTab, fetchProgressTab } from './course-home/data';
@@ -35,7 +37,6 @@ import CourseAccessErrorPage from './generic/CourseAccessErrorPage';
 import DecodePageRoute from './decode-page-route';
 import { DECODE_ROUTES, ROUTES } from './constants';
 import PreferencesUnsubscribe from './preferences-unsubscribe';
-import PageNotFound from './generic/PageNotFound';
 
 subscribe(APP_READY, () => {
   const root = createRoot(document.getElementById('root'));
@@ -51,7 +52,7 @@ subscribe(APP_READY, () => {
             <UserMessagesProvider>
               <div className="app-container">
                 <Routes>
-                  <Route path="*" element={<PageWrap><PageNotFound /></PageWrap>} />
+                  <Route path="*" element={(<CoursePageSlot />)} />
                   <Route path={ROUTES.UNSUBSCRIBE} element={<PageWrap><GoalUnsubscribe /></PageWrap>} />
                   <Route path={ROUTES.REDIRECT} element={<PageWrap><CoursewareRedirectLandingPage /></PageWrap>} />
                   <Route

src/plugin-routes.test.tsx

@@ -0,0 +1,50 @@
+import { getConfig } from '@edx/frontend-platform';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { getPluginRoutes } from './plugin-routes';
+
+// Mock dependencies
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  Route: ({ element }: { element: React.ReactNode }) => element,
+}));
+
+jest.mock('./decode-page-route', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+jest.mock('@openedx/frontend-plugin-framework', () => ({
+  PluginSlot: ({ id, pluginProps }: { id: string; pluginProps: Record<string, any> }) => (
+    <div data-testid="plugin-slot" data-route={pluginProps.route}>
+      id: {id}, route: {pluginProps.route}
+    </div>
+  ),
+}));
+
+describe('getPluginRoutes', () => {
+  it('should return a valid route element for each plugin route', () => {
+    const pluginRoutes = ['/route-1', '/route-2'];
+    (getConfig as jest.Mock).mockImplementation(() => ({
+      PLUGIN_ROUTES: pluginRoutes,
+    }));
+
+    const result = getPluginRoutes();
+    const { container } = render(<>{result}</>);
+
+    pluginRoutes.forEach((route) => {
+      expect(container.querySelector(`[data-route="${route}"]`)).toBeInTheDocument();
+    });
+    expect(container.querySelectorAll('[data-testid="plugin-slot"]').length).toBe(pluginRoutes.length);
+  });
+
+  it('should return null if no plugin routes are configured', () => {
+    (getConfig as jest.Mock).mockImplementation(() => ({}));
+
+    const result = getPluginRoutes();
+    expect(result).toBeNull();
+  });
+});

src/plugin-routes.tsx

@@ -0,0 +1,18 @@
+import { getConfig } from '@edx/frontend-platform';
+import { Route } from 'react-router-dom';
+import { CoursePageSlot } from './plugin-slots/CoursePageSlot';
+import DecodePageRoute from './decode-page-route';
+
+export function getPluginRoutes() {
+  return getConfig()?.PLUGIN_ROUTES?.map((route: string) => (
+    <Route
+      key={route}
+      path={route}
+      element={(
+        <DecodePageRoute>
+          <CoursePageSlot route={route} />
+        </DecodePageRoute>
+      )}
+    />
+  )) ?? null;
+}

src/plugin-slots/CoursePageSlot/README.md

@@ -0,0 +1,51 @@
+# Course Page 
+
+### Slot ID: `org.openedx.frontend.learning.page.v1`
+
+## Description
+
+This slot is used to add new pages to the learning MFE.
+
+## Example
+
+### New static page 
+
+The following `env.config.jsx` will create a new URL at `/coursepage/:courseId/test`.
+
+The plugin should contain a Routes component with a Route component matching the path you want to 
+add. Note that creating sub-routes under and existing route might not work as expected. 
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Route, Routes } from 'react-router-dom';
+
+const CustomPage = () => (
+  <Routes>
+    <Route 
+      path="/coursepage/:courseId/test" 
+      element={<h1>Custom Page</h1>}
+    />
+  </Routes>
+);
+
+const config = {
+  pluginSlots: {
+    "org.openedx.frontend.learning.page.v1": {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_tab',
+            type: DIRECT_PLUGIN,
+            RenderWidget: CustomPage,
+          },
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```
+
+

src/plugin-slots/CoursePageSlot/index.tsx

@@ -0,0 +1,12 @@
+import { PageWrap } from '@edx/frontend-platform/react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import PageNotFound from '@src/generic/PageNotFound';
+import { Route, Routes } from 'react-router-dom';
+
+export const CoursePageSlot = () => (
+  <PluginSlot id="org.openedx.frontend.learning.page.v1">
+    <Routes>
+      <Route path="*" element={<PageWrap><PageNotFound /></PageWrap>} />
+    </Routes>
+  </PluginSlot>
+);

src/plugin-slots/CourseTabLinksSlot/README.md

@@ -0,0 +1,45 @@
+# Course Tab Links Slot
+
+### Slot ID: `org.openedx.frontend.learning.course_tab_links.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the course tabs.
+
+## Example
+
+### Added link to Course Tabs
+![Added "Custom Tab" to course tabs](./course-tabs-custom.png)
+
+The following `env.config.jsx` will add a new course tab call "Custom Tab".
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    "org.openedx.frontend.learning.course_tab_links.v1": {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_tab',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ()=> (
+              <a
+                className={classNames('nav-item flex-shrink-0 nav-link')}
+                href="#"
+              >
+                Custom Tab
+              </a>
+            ),
+          },
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseTabLinksSlot/course-tabs-custom.png

@@ -0,0 +1,23 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import classNames from 'classnames';
+import React from 'react';
+
+type CourseTabList = Array<{
+  title: string;
+  slug: string;
+  url: string;
+}>;
+
+export const CourseTabLinksSlot = ({ tabs, activeTabSlug }: { tabs: CourseTabList, activeTabSlug?: string }) => (
+  <PluginSlot id="org.openedx.frontend.learning.course_tab_links.v1" pluginProps={{ activeTabSlug }}>
+    {tabs.map(({ url, title, slug }) => (
+      <a
+        key={slug}
+        className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTabSlug })}
+        href={url}
+      >
+        {title}
+      </a>
+    ))}
+  </PluginSlot>
+);