feat: replace LearnerTools with LearnerToolsSlot and update tests

Author: mraman-2U

src/courseware/course/Course.jsx

@@ -8,7 +8,8 @@ import { breakpoints, useWindowSize } from '@openedx/paragon';
 
 import { AlertList } from '@src/generic/user-messages';
 import { useModel } from '@src/generic/model-store';
-import LearnerTools from './learner-tools/LearnerTools';
+import { getCoursewareOutlineSidebarSettings } from '../data/selectors';
+import { LearnerToolsSlot } from '../../plugin-slots/LearnerToolsSlot';
 import SidebarProvider from './sidebar/SidebarContextProvider';
 import NewSidebarProvider from './new-sidebar/SidebarContextProvider';
 import { NotificationsDiscussionsSidebarTriggerSlot } from '../../plugin-slots/NotificationsDiscussionsSidebarTriggerSlot';
@@ -89,7 +90,7 @@ const Course = ({
           unitId={unitId}
         />
         {shouldDisplayLearnerTools && (
-          <LearnerTools
+          <LearnerToolsSlot
             enrollmentMode={course.enrollmentMode}
             isStaff={isStaff}
             courseId={courseId}

src/courseware/course/Course.test.jsx

@@ -25,11 +25,13 @@ jest.mock('@edx/frontend-lib-special-exams', () => {
 });
 const mockLearnerToolsTestId = 'fake-learner-tools';
 jest.mock(
-  './learner-tools/LearnerTools',
-  // eslint-disable-next-line react/prop-types
-  () => function ({ courseId }) {
-    return <div className="fake-learner-tools" data-testid={mockLearnerToolsTestId}>LearnerTools contents {courseId} </div>;
-  },
+  '../../plugin-slots/LearnerToolsSlot',
+  () => ({
+    // eslint-disable-next-line react/prop-types
+    LearnerToolsSlot({ courseId }) {
+      return <div className="fake-learner-tools" data-testid={mockLearnerToolsTestId}>LearnerTools contents {courseId} </div>;
+    },
+  }),
 );
 
 const recordFirstSectionCelebration = jest.fn();
@@ -368,7 +370,6 @@ describe('Course', () => {
 
   it('displays learner tools when screen is wide enough (browser)', async () => {
     const courseMetadata = Factory.build('courseMetadata', {
-      learning_assistant_enabled: true,
       enrollment: { mode: 'verified' },
     });
     const testStore = await initializeTestStore({ courseMetadata }, false);
@@ -388,7 +389,6 @@ describe('Course', () => {
   it('does not display learner tools when screen is too narrow (mobile)', async () => {
     global.innerWidth = breakpoints.extraSmall.minWidth;
     const courseMetadata = Factory.build('courseMetadata', {
-      learning_assistant_enabled: true,
       enrollment: { mode: 'verified' },
     });
     const testStore = await initializeTestStore({ courseMetadata }, false);

src/courseware/course/learner-tools/LearnerTools.test.jsx

@@ -0,0 +1,28 @@
+# Learner Tools Slot
+
+### Slot ID: `org.openedx.frontend.learning.learner_tools.v1`
+
+### Slot ID Aliases
+* `learner_tools_slot`
+
+### Description
+This plugin slot provides a location for learner-facing tools and features to be displayed during course content navigation. The slot is rendered via a React portal to `document.body` to ensure proper positioning and stacking context.
+
+### Props:
+* `courseId` - The unique identifier for the current course
+* `unitId` - The unique identifier for the current unit/vertical being viewed
+* `userId` - The authenticated user's ID (automatically retrieved from auth context)
+* `isStaff` - Boolean indicating whether the user has staff/instructor privileges
+* `enrollmentMode` - The user's enrollment mode (e.g., 'audit', 'verified', 'honor', etc.)
+
+### Usage
+Plugins registered to this slot can use the provided context to:
+- Display course-specific tools based on courseId and unitId
+- Show different features based on user's enrollment mode
+- Provide staff-only functionality when isStaff is true
+- Query additional data from Redux store or backend APIs as needed
+
+### Notes
+- Returns `null` if user is not authenticated
+- Plugins should manage their own feature flag checks and requirements
+- The slot uses a portal to render to `document.body` for flexible positioning

src/courseware/course/learner-tools/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
-const LearnerTools = ({
+export const LearnerToolsSlot = ({
   enrollmentMode = null,
   isStaff,
   courseId,
@@ -31,18 +31,17 @@ const LearnerTools = ({
   // Plugins will query their own requirements from Redux/config
   return createPortal(
     <PluginSlot
-      id="learner_tools_slot"
+      id="org.openedx.frontend.learning.learner_tools.v1"
+      idAliases={['learner_tools_slot']}
       pluginProps={pluginContext}
     />,
     document.body,
   );
 };
 
-LearnerTools.propTypes = {
+LearnerToolsSlot.propTypes = {
   isStaff: PropTypes.bool.isRequired,
   enrollmentMode: PropTypes.string,
   courseId: PropTypes.string.isRequired,
   unitId: PropTypes.string.isRequired,
 };
-
-export default LearnerTools;

src/plugin-slots/LearnerToolsSlot/README.md

@@ -11,6 +11,7 @@
 * [`org.openedx.frontend.learning.course_outline_tab_notifications.v1`](./CourseOutlineTabNotificationsSlot/)
 * [`org.openedx.frontend.learning.course_recommendations.v1`](./CourseRecommendationsSlot/)
 * [`org.openedx.frontend.learning.gated_unit_content_message.v1`](./GatedUnitContentMessageSlot/)
+* [`org.openedx.frontend.learning.learner_tools.v1`](./LearnerToolsSlot/)
 * [`org.openedx.frontend.learning.next_unit_top_nav_trigger.v1`](./NextUnitTopNavTriggerSlot/)
 * [`org.openedx.frontend.learning.notification_tray.v1`](./NotificationTraySlot/)
 * [`org.openedx.frontend.learning.notification_widget.v1`](./NotificationWidgetSlot/)