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

Author: xitij2000

src/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 { PluginSlot } from '@openedx/frontend-plugin-framework';
 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,17 @@ 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>
-              ))}
+              <PluginSlot id="course_tab_links_slot">
+                {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>
             </Tabs>
           </div>
           <div className="search-toggle">
@@ -44,19 +58,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

@@ -4,6 +4,7 @@ import {
   getConfig,
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage, PageWrap } from '@edx/frontend-platform/react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Routes, Route } from 'react-router-dom';
@@ -58,7 +59,7 @@ subscribe(APP_READY, () => {
                     path={ROUTES.PREFERENCES_UNSUBSCRIBE}
                     element={
                       <PageWrap><PreferencesUnsubscribe /></PageWrap>
-                    }
+                }
                   />
                   <Route
                     path={DECODE_ROUTES.ACCESS_DENIED}
@@ -72,7 +73,7 @@ subscribe(APP_READY, () => {
                           <OutlineTab />
                         </TabContainer>
                       </DecodePageRoute>
-                    )}
+                )}
                   />
                   <Route
                     path={DECODE_ROUTES.LIVE}
@@ -82,7 +83,7 @@ subscribe(APP_READY, () => {
                           <LiveTab />
                         </TabContainer>
                       </DecodePageRoute>
-                    )}
+                )}
                   />
                   <Route
                     path={DECODE_ROUTES.DATES}
@@ -92,7 +93,7 @@ subscribe(APP_READY, () => {
                           <DatesTab />
                         </TabContainer>
                       </DecodePageRoute>
-                    )}
+                )}
                   />
                   <Route
                     path={DECODE_ROUTES.DISCUSSION}
@@ -102,7 +103,7 @@ subscribe(APP_READY, () => {
                           <DiscussionTab />
                         </TabContainer>
                       </DecodePageRoute>
-                    )}
+                )}
                   />
                   {DECODE_ROUTES.PROGRESS.map((route) => (
                     <Route
@@ -119,7 +120,7 @@ subscribe(APP_READY, () => {
                             <ProgressTab />
                           </TabContainer>
                         </DecodePageRoute>
-                      )}
+                  )}
                     />
                   ))}
                   <Route
@@ -130,7 +131,7 @@ subscribe(APP_READY, () => {
                           <CourseExit />
                         </TabContainer>
                       </DecodePageRoute>
-                    )}
+                )}
                   />
                   {DECODE_ROUTES.COURSEWARE.map((route) => (
                     <Route
@@ -140,7 +141,18 @@ subscribe(APP_READY, () => {
                         <DecodePageRoute>
                           <CoursewareContainer />
                         </DecodePageRoute>
-                      )}
+                  )}
+                    />
+                  ))}
+                  {getConfig()?.PLUGIN_ROUTES?.map((route) => (
+                    <Route
+                      key={route}
+                      path={route}
+                      element={(
+                        <DecodePageRoute>
+                          <PluginSlot id="course_page_route_slot" pluginProps={{ route }} />
+                        </DecodePageRoute>
+                  )}
                     />
                   ))}
                 </Routes>