From 11bf6f2554733666a3cf9cc589bcf1bfd25fe680 Mon Sep 17 00:00:00 2001
From: Deborah Kaplan <deborahgu@users.noreply.github.com>
Date: Thu, 4 Apr 2024 17:22:26 -0400
Subject: [PATCH] feat:  separate no courses and course list into slots

*  this creates a plug-in slot with an ID for each of no courses and course list

FIXES: APER-3304
---
 .../__snapshots__/index.test.jsx.snap         | 24 ++++++++++++-------
 src/containers/CoursesPanel/index.jsx         | 16 +++++++++----
 src/containers/CoursesPanel/index.test.jsx    |  3 +++
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/containers/CoursesPanel/__snapshots__/index.test.jsx.snap b/src/containers/CoursesPanel/__snapshots__/index.test.jsx.snap
index 4ac541b..40f8d91 100644
--- a/src/containers/CoursesPanel/__snapshots__/index.test.jsx.snap
+++ b/src/containers/CoursesPanel/__snapshots__/index.test.jsx.snap
@@ -18,7 +18,11 @@ exports[`CoursesPanel no courses snapshot 1`] = `
       <CourseFilterControls />
     </div>
   </div>
-  <NoCoursesView />
+  <PluginSlot
+    id="no_courses_view"
+  >
+    <NoCoursesView />
+  </PluginSlot>
 </div>
 `;
 
@@ -40,12 +44,16 @@ exports[`CoursesPanel with courses snapshot 1`] = `
       <CourseFilterControls />
     </div>
   </div>
-  <CourseList
-    filterOptions={Object {}}
-    numPages={1}
-    setPageNumber={[MockFunction setPageNumber]}
-    showFilters={false}
-    visibleList={Array []}
-  />
+  <PluginSlot
+    id="course_list"
+  >
+    <CourseList
+      filterOptions={Object {}}
+      numPages={1}
+      setPageNumber={[MockFunction setPageNumber]}
+      showFilters={false}
+      visibleList={Array []}
+    />
+  </PluginSlot>
 </div>
 `;
diff --git a/src/containers/CoursesPanel/index.jsx b/src/containers/CoursesPanel/index.jsx
index 8fd1e56..dacb807 100644
--- a/src/containers/CoursesPanel/index.jsx
+++ b/src/containers/CoursesPanel/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
@@ -33,12 +34,19 @@ export const CoursesPanel = () => {
           <CourseFilterControls {...courseListData.filterOptions} />
         </div>
       </div>
-      {hasCourses
-        ? (
+      {hasCourses ? (
+        <PluginSlot
+          id="course_list"
+        >
           <CourseList {...courseListData} />
-        ) : (
+        </PluginSlot>
+      ) : (
+        <PluginSlot
+          id="no_courses_view"
+        >
           <NoCoursesView />
-        )}
+        </PluginSlot>
+      )}
     </div>
   );
 };
diff --git a/src/containers/CoursesPanel/index.test.jsx b/src/containers/CoursesPanel/index.test.jsx
index 72aedb3..5917f14 100644
--- a/src/containers/CoursesPanel/index.test.jsx
+++ b/src/containers/CoursesPanel/index.test.jsx
@@ -17,6 +17,9 @@ jest.mock('containers/CourseFilterControls', () => ({
   ActiveCourseFilters: 'ActiveCourseFilters',
   CourseFilterControls: 'CourseFilterControls',
 }));
+jest.mock('@openedx/frontend-plugin-framework', () => ({
+  PluginSlot: 'PluginSlot',
+}));
 jest.mock('./CourseList', () => 'CourseList');
 
 reduxHooks.useHasCourses.mockReturnValue(true);