fix: prevent content tools from displaying over chat sidebar (openedx#1179)

Author: alangsto

package-lock.json

@@ -32,7 +32,7 @@
     "@edx/brand": "npm:@edx/[email protected]",
     "@edx/frontend-component-footer": "12.0.0",
     "@edx/frontend-component-header": "4.0.0",
-    "@edx/frontend-lib-learning-assistant": "^1.9.3",
+    "@edx/frontend-lib-learning-assistant": "^1.9.4",
     "@edx/frontend-lib-special-exams": "2.20.1",
     "@edx/frontend-platform": "4.3.0",
     "@edx/paragon": "20.46.0",

package.json

@@ -98,6 +98,7 @@ const Course = ({
               enrollmentMode={course.enrollmentMode}
               isStaff={isStaff}
               courseId={courseId}
+              contentToolsEnabled={course.showCalculator || course.notes.enabled}
             />
             <SidebarTriggers />
           </>

src/courseware/course/Course.jsx

@@ -9,6 +9,7 @@ const Chat = ({
   enrollmentMode,
   isStaff,
   courseId,
+  contentToolsEnabled,
 }) => {
   const VERIFIED_MODES = [
     'professional',
@@ -34,7 +35,7 @@ const Chat = ({
     <>
       {/* Use a portal to ensure that component overlay does not compete with learning MFE styles. */}
       {shouldDisplayChat && (createPortal(
-        <Xpert courseId={courseId} />,
+        <Xpert courseId={courseId} contentToolsEnabled={contentToolsEnabled} />,
         document.body,
       ))}
     </>
@@ -46,6 +47,7 @@ Chat.propTypes = {
   enabled: PropTypes.bool.isRequired,
   enrollmentMode: PropTypes.string,
   courseId: PropTypes.string.isRequired,
+  contentToolsEnabled: PropTypes.bool.isRequired,
 };
 
 Chat.defaultProps = {

src/courseware/course/chat/Chat.jsx

@@ -42,6 +42,7 @@ describe('Chat', () => {
               isStaff={false}
               enabled
               courseId={courseId}
+              contentToolsEnabled={false}
             />
           </BrowserRouter>,
           { store },
@@ -74,6 +75,7 @@ describe('Chat', () => {
             isStaff
             enabled
             courseId={courseId}
+            contentToolsEnabled={false}
           />
         </BrowserRouter>,
         { store },
@@ -134,6 +136,7 @@ describe('Chat', () => {
               isStaff={test.isStaff}
               enabled={test.enabled}
               courseId={courseId}
+              contentToolsEnabled={false}
             />
           </BrowserRouter>,
           { store },

src/courseware/course/chat/Chat.test.jsx

@@ -1,23 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 
 import Calculator from './calculator';
 import NotesVisibility from './notes-visibility';
 
 const ContentTools = ({
   course,
-}) => (
-  <div className="content-tools">
-    <div className="d-flex justify-content-end align-items-end m-0">
-      {course.showCalculator && (
-      <Calculator />
-      )}
-      {course.notes.enabled && (
-      <NotesVisibility course={course} />
-      )}
-    </div>
-  </div>
-);
+}) => {
+  const {
+    sidebarIsOpen,
+  } = useSelector(state => state.learningAssistant);
+
+  return (
+    !sidebarIsOpen && (
+      <div className="content-tools">
+        <div className="d-flex justify-content-end align-items-end m-0">
+          {course.showCalculator && (
+            <Calculator />
+          )}
+          {course.notes.enabled && (
+            <NotesVisibility course={course} />
+          )}
+        </div>
+      </div>
+    )
+  );
+};
 
 ContentTools.propTypes = {
   course: PropTypes.shape({