From 32bd3190a6f26bc16472853de11a06f462205d82 Mon Sep 17 00:00:00 2001
From: alangsto <46360176+alangsto@users.noreply.github.com>
Date: Thu, 31 Aug 2023 17:09:16 -0400
Subject: [PATCH] fix: prevent content tools from displaying over chat sidebar
 (#1179)

---
 package-lock.json                             |  8 ++---
 package.json                                  |  2 +-
 src/courseware/course/Course.jsx              |  1 +
 src/courseware/course/chat/Chat.jsx           |  4 ++-
 src/courseware/course/chat/Chat.test.jsx      |  3 ++
 .../course/content-tools/ContentTools.jsx     | 33 ++++++++++++-------
 6 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d497d4ca..8917cc37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
         "@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",
@@ -3433,9 +3433,9 @@
       }
     },
     "node_modules/@edx/frontend-lib-learning-assistant": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-learning-assistant/-/frontend-lib-learning-assistant-1.9.3.tgz",
-      "integrity": "sha512-kk8cbdWm94/oph4i/6TidVPTqPStoge/qS8Kr53gx1hH7u9cKU8fLM8KWQAG00KL3sYTWRJ0D3C6SqwgNCpSiA==",
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-learning-assistant/-/frontend-lib-learning-assistant-1.9.4.tgz",
+      "integrity": "sha512-dtupXZJdTxKyat9lWTNxQYzvBmS4ESewBhZd/sDiyBdHvNzGl3VHMeCzLz42Gk7B0oz7mrsd/xZHAu4FVU8qdA==",
       "dependencies": {
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
diff --git a/package.json b/package.json
index a0b709a8..bd8223f3 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@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",
diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index b3cd0ab7..dc263a3c 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -98,6 +98,7 @@ const Course = ({
               enrollmentMode={course.enrollmentMode}
               isStaff={isStaff}
               courseId={courseId}
+              contentToolsEnabled={course.showCalculator || course.notes.enabled}
             />
             <SidebarTriggers />
           </>
diff --git a/src/courseware/course/chat/Chat.jsx b/src/courseware/course/chat/Chat.jsx
index e1858fa7..3899429b 100644
--- a/src/courseware/course/chat/Chat.jsx
+++ b/src/courseware/course/chat/Chat.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 = {
diff --git a/src/courseware/course/chat/Chat.test.jsx b/src/courseware/course/chat/Chat.test.jsx
index 222f660d..2430d8a1 100644
--- a/src/courseware/course/chat/Chat.test.jsx
+++ b/src/courseware/course/chat/Chat.test.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 },
diff --git a/src/courseware/course/content-tools/ContentTools.jsx b/src/courseware/course/content-tools/ContentTools.jsx
index 871bf629..14a73d5f 100644
--- a/src/courseware/course/content-tools/ContentTools.jsx
+++ b/src/courseware/course/content-tools/ContentTools.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({