Merge pull request #78 from open-craft/kshitij/tab-slots.redwood

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

Author: xitij2000

src/course-tabs/CourseTabsNavigation.jsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import classNames from 'classnames';
-
-import messages from './messages';
-import Tabs from '../generic/tabs/Tabs';
+import PropTypes from 'prop-types';
+import React from 'react';
 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';
 
-const CourseTabsNavigation = ({
-  activeTabSlug, className, tabs, intl,
-}) => {
+const CourseTabsNavigation = ({ activeTabSlug, className, tabs }) => {
   const { show } = useCoursewareSearchState();
+  const intl = useIntl();
 
   return (
     <div id="courseTabsNavigation" className={classNames('course-tabs-navigation', className)}>
@@ -20,15 +20,21 @@ 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="course-tabs-navigation__search-toggle">
@@ -47,12 +53,11 @@ CourseTabsNavigation.propTypes = {
     slug: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
   })).isRequired,
-  intl: intlShape.isRequired,
 };
 
 CourseTabsNavigation.defaultProps = {
   activeTabSlug: undefined,
   className: null,
 };
 
-export default injectIntl(CourseTabsNavigation);
+export default CourseTabsNavigation;

src/index.jsx

@@ -7,6 +7,7 @@ import {
   getConfig,
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage, PageWrap } from '@edx/frontend-platform/react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Routes, Route } from 'react-router-dom';
@@ -62,7 +63,7 @@ subscribe(APP_READY, () => {
                       <OutlineTab />
                     </TabContainer>
                   </DecodePageRoute>
-              )}
+                )}
               />
               <Route
                 path={DECODE_ROUTES.LIVE}
@@ -133,6 +134,17 @@ subscribe(APP_READY, () => {
                   )}
                 />
               ))}
+              {getConfig()?.PLUGIN_ROUTES?.map((route) => (
+                <Route
+                  key={route}
+                  path={route}
+                  element={(
+                    <DecodePageRoute>
+                      <PluginSlot id="course_page_route_slot" pluginProps={{ route }} />
+                    </DecodePageRoute>
+                  )}
+                />
+              ))}
             </Routes>
           </UserMessagesProvider>
         </NoticesProvider>

src/setupTest.js

@@ -30,12 +30,6 @@ import { appendBrowserTimezoneToUrl, executeThunk } from './utils';
 import buildSimpleCourseAndSequenceMetadata from './courseware/data/__factories__/sequenceMetadata.factory';
 import { buildOutlineFromBlocks } from './courseware/data/__factories__/learningSequencesOutline.factory';
 
-jest.mock('@openedx/frontend-plugin-framework', () => ({
-  ...jest.requireActual('@openedx/frontend-plugin-framework'),
-  Plugin: () => 'Plugin',
-  PluginSlot: () => 'PluginSlot',
-}));
-
 jest.mock('@src/generic/plugin-store', () => ({
   ...jest.requireActual('@src/generic/plugin-store'),
   usePluginsCallback: jest.fn((_, cb) => cb),

src/tab-page/TabPage.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { useDispatch, useSelector } from 'react-redux';
 import { Navigate } from 'react-router-dom';
 
@@ -17,7 +17,8 @@ import LoadedTabPage from './LoadedTabPage';
 import { setCallToActionToast } from '../course-home/data/slice';
 import LaunchCourseHomeTourButton from '../product-tours/newUserCourseHomeTour/LaunchCourseHomeTourButton';
 
-const TabPage = ({ intl, ...props }) => {
+const TabPage = ({ ...props }) => {
+  const intl = useIntl();
   const {
     activeTabSlug,
     courseId,
@@ -92,11 +93,10 @@ TabPage.defaultProps = {
 
 TabPage.propTypes = {
   activeTabSlug: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
   courseId: PropTypes.string,
   courseStatus: PropTypes.string.isRequired,
   metadataModel: PropTypes.string.isRequired,
   unitId: PropTypes.string,
 };
 
-export default injectIntl(TabPage);
+export default TabPage;