feat: update chat component to use PluginSlot and simplify logic (#1810)

Author: mraman-2U

.env

@@ -53,4 +53,3 @@ OPTIMIZELY_FULL_STACK_SDK_KEY=''
 SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
 # Fallback in local style files
 PARAGON_THEME_URLS={}
-FEATURE_ENABLE_CHAT_V2_ENDPOINT=''

.env.development

@@ -55,4 +55,3 @@ OPTIMIZELY_FULL_STACK_SDK_KEY=''
 SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
 # Fallback in local style files
 PARAGON_THEME_URLS={}
-FEATURE_ENABLE_CHAT_V2_ENDPOINT='false'

package-lock.json

@@ -36,7 +36,7 @@
     "@edx/browserslist-config": "1.5.0",
     "@edx/frontend-component-footer": "^14.6.0",
     "@edx/frontend-component-header": "^8.0.0",
-    "@edx/frontend-lib-learning-assistant": "^2.23.1",
+    "@edx/frontend-lib-learning-assistant": "^2.24.0",
     "@edx/frontend-lib-special-exams": "^4.0.0",
     "@edx/frontend-platform": "^8.4.0",
     "@edx/openedx-atlas": "^0.7.0",

package.json

@@ -8,7 +8,7 @@ import { breakpoints, useWindowSize } from '@openedx/paragon';
 
 import { AlertList } from '@src/generic/user-messages';
 import { useModel } from '@src/generic/model-store';
-import Chat from './chat/Chat';
+import { LearnerToolsSlot } from '../../plugin-slots/LearnerToolsSlot';
 import SidebarProvider from './sidebar/SidebarContextProvider';
 import NewSidebarProvider from './new-sidebar/SidebarContextProvider';
 import { NotificationsDiscussionsSidebarTriggerSlot } from '../../plugin-slots/NotificationsDiscussionsSidebarTriggerSlot';
@@ -59,7 +59,7 @@ const Course = ({
   const [weeklyGoalCelebrationOpen, setWeeklyGoalCelebrationOpen] = useState(
     celebrations && !celebrations.streakLengthToCelebrate && celebrations.weeklyGoal,
   );
-  const shouldDisplayChat = windowWidth >= breakpoints.medium.minWidth;
+  const shouldDisplayLearnerTools = windowWidth >= breakpoints.medium.minWidth;
   const daysPerWeek = course?.courseGoals?.selectedGoal?.daysPerWeek;
 
   useEffect(() => {
@@ -88,17 +88,13 @@ const Course = ({
           isStaff={isStaff}
           unitId={unitId}
         />
-        {shouldDisplayChat && (
-          <>
-            <Chat
-              enabled={course.learningAssistantEnabled}
-              enrollmentMode={course.enrollmentMode}
-              isStaff={isStaff}
-              courseId={courseId}
-              contentToolsEnabled={course.showCalculator || course.notes.enabled}
-              unitId={unitId}
-            />
-          </>
+        {shouldDisplayLearnerTools && (
+          <LearnerToolsSlot
+            enrollmentMode={course.enrollmentMode}
+            isStaff={isStaff}
+            courseId={courseId}
+            unitId={unitId}
+          />
         )}
         <div className="w-100 d-flex align-items-center">
           <CourseOutlineMobileSidebarTriggerSlot />

src/courseware/course/Course.jsx

@@ -13,17 +13,25 @@ import Course from './Course';
 import setupDiscussionSidebar from './test-utils';
 
 jest.mock('@edx/frontend-platform/analytics');
-jest.mock('@edx/frontend-lib-special-exams/dist/data/thunks.js', () => ({
-  ...jest.requireActual('@edx/frontend-lib-special-exams/dist/data/thunks.js'),
-  checkExamEntry: () => jest.fn(),
-}));
-const mockChatTestId = 'fake-chat';
+jest.mock('@edx/frontend-lib-special-exams', () => {
+  const actual = jest.requireActual('@edx/frontend-lib-special-exams');
+  return {
+    ...actual,
+    __esModule: true,
+    // Mock the default export (SequenceExamWrapper) to just render children
+    // eslint-disable-next-line react/prop-types
+    default: ({ children }) => <div data-testid="sequence-exam-wrapper">{children}</div>,
+  };
+});
+const mockLearnerToolsTestId = 'fake-learner-tools';
 jest.mock(
-  './chat/Chat',
-  // eslint-disable-next-line react/prop-types
-  () => function ({ courseId }) {
-    return <div className="fake-chat" data-testid={mockChatTestId}>Chat 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();
@@ -360,28 +368,27 @@ describe('Course', () => {
     });
   });
 
-  it('displays chat when screen is wide enough (browser)', async () => {
+  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);
-    const { courseware } = testStore.getState();
+    const { courseware, models } = testStore.getState();
     const { courseId, sequenceId } = courseware;
     const testData = {
       ...mockData,
       courseId,
       sequenceId,
+      unitId: Object.values(models.units)[0].id,
     };
     render(<Course {...testData} />, { store: testStore, wrapWithRouter: true });
-    const chat = screen.queryByTestId(mockChatTestId);
-    waitFor(() => expect(chat).toBeInTheDocument());
+    const learnerTools = screen.queryByTestId(mockLearnerToolsTestId);
+    await waitFor(() => expect(learnerTools).toBeInTheDocument());
   });
 
-  it('does not display chat when screen is too narrow (mobile)', async () => {
+  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);
@@ -393,7 +400,7 @@ describe('Course', () => {
       sequenceId,
     };
     render(<Course {...testData} />, { store: testStore, wrapWithRouter: true });
-    const chat = screen.queryByTestId(mockChatTestId);
-    await expect(chat).not.toBeInTheDocument();
+    const learnerTools = screen.queryByTestId(mockLearnerToolsTestId);
+    await expect(learnerTools).not.toBeInTheDocument();
   });
 });