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

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>
 `;

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>
   );
 };

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);