fix: allow page grid to take plugin slot id instead (#994)

* fix: allow page grid to take plugin slot id instead

* chore: add config check

* chore: linting

* chore: variable more readable

src/pages-and-resources/PagesAndResources.jsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, Suspense } from 'react';
 import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { PageWrap, AppContext } from '@edx/frontend-platform/react';
 
@@ -64,6 +65,8 @@ const PagesAndResources = ({ courseId, intl }) => {
     );
   }
 
+  const hasAdditionalCoursePlugin = getConfig()?.pluginSlots?.additional_course_plugin != null;
+
   return (
     <PagesAndResourcesProvider courseId={courseId}>
       <main className="container container-mw-md px-3">
@@ -86,16 +89,17 @@ const PagesAndResources = ({ courseId, intl }) => {
           <Route path=":appId/settings" element={<PageWrap><Suspense fallback="..."><SettingsComponent url={redirectUrl} /></Suspense></PageWrap>} />
         </Routes>
 
-        <PageGrid pages={pages} />
+        <PageGrid pages={pages} pluginSlotId="additional_course_plugin" />
         {
-          (contentPermissionsPages.length > 0) && (
-            <>
-              <div className="d-flex justify-content-between my-4 my-md-5 align-items-center">
-                <h3 className="m-0">{intl.formatMessage(messages.contentPermissions)}</h3>
-              </div>
-              <PageGrid pages={contentPermissionsPages} />
-            </>
-          )
+          (contentPermissionsPages.length > 0 || hasAdditionalCoursePlugin)
+            && (
+              <>
+                <div className="d-flex justify-content-between my-4 my-md-5 align-items-center">
+                  <h3 className="m-0">{intl.formatMessage(messages.contentPermissions)}</h3>
+                </div>
+                <PageGrid pages={contentPermissionsPages} pluginSlotId="additional_course_content_plugin" />
+              </>
+            )
         }
       </main>
     </PagesAndResourcesProvider>

src/pages-and-resources/pages/PageGrid.jsx

@@ -5,7 +5,7 @@ import { CardGrid } from '@openedx/paragon';
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import PageCard, { CoursePageShape } from './PageCard';
 
-const PageGrid = ({ pages }) => (
+const PageGrid = ({ pages, pluginSlotId }) => (
   <CardGrid columnSizes={{
     xs: 12,
     sm: 6,
@@ -16,12 +16,17 @@ const PageGrid = ({ pages }) => (
     {pages.map((page) => (
       <PageCard page={page} key={page.id} />
     ))}
-    <PluginSlot id="additional_course_plugin" />
+    {pluginSlotId && <PluginSlot id={pluginSlotId} />}
   </CardGrid>
 );
 
+PageGrid.defaultProps = {
+  pluginSlotId: null,
+};
+
 PageGrid.propTypes = {
   pages: PropTypes.arrayOf(CoursePageShape.isRequired).isRequired,
+  pluginSlotId: PropTypes.string,
 };
 
 export default injectIntl(PageGrid);