From 65132eead2aa66861497863485043ca3d75c7293 Mon Sep 17 00:00:00 2001
From: Leangseu Kim <83240113+leangseu-edx@users.noreply.github.com>
Date: Mon, 13 May 2024 10:39:11 -0400
Subject: [PATCH] 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 | 22 +++++++++++--------
 src/pages-and-resources/pages/PageGrid.jsx    |  9 ++++++--
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/pages-and-resources/PagesAndResources.jsx b/src/pages-and-resources/PagesAndResources.jsx
index 313f8043f..9da88030d 100644
--- a/src/pages-and-resources/PagesAndResources.jsx
+++ b/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>
diff --git a/src/pages-and-resources/pages/PageGrid.jsx b/src/pages-and-resources/pages/PageGrid.jsx
index 33c5772ef..504ebb905 100644
--- a/src/pages-and-resources/pages/PageGrid.jsx
+++ b/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);