Fixed course info modal to include H1/Y1 suffix in course title (#1619)

Author: Japleen-Kaur2409

CHANGELOG.md

@@ -21,6 +21,7 @@
 - Fixed a bug on the generate page where an extraneous info popup would appear when hovering over the top left corner of the graph viewing window
 - Fixed a bug that led code to crash when parsing all pre-generated graphs from svg (i.e., program graphs)
 - Fixed a bug where redundant boolean nodes were being generated
+- Fixed a bug where the course info modal title did not display the H1/Y1 suffix
 
 ### 🔧 Internal changes
 

js/components/common/__tests__/CourseModalButtons.test.js

@@ -88,7 +88,7 @@ describe("CourseModal", () => {
     // click on the back button, and AAA100H1's modal appears
     const backButton = screen.getByText("<")
     await user.click(backButton)
-    modalHeader = screen.getByText("AAA100 Introduction to AAA Thinking")
+    modalHeader = screen.getByText("AAA100H1 Introduction to AAA Thinking")
     expect(modalHeader).toBeDefined()
 
     // click on the forward button, and BBB100's modal appears
@@ -114,7 +114,7 @@ describe("CourseModal", () => {
     // on AAA100
     const backButton = screen.getByText("<")
     await user.click(backButton)
-    modalHeader = screen.getByText("AAA100 Introduction to AAA Thinking")
+    modalHeader = screen.getByText("AAA100H1 Introduction to AAA Thinking")
     expect(modalHeader).toBeDefined()
 
     // click on the course link CCC100H1, and CCC100H1's modal opens. The user's
@@ -129,7 +129,7 @@ describe("CourseModal", () => {
     // history of courses looks like: [AAA100, CCC100], with the user currently
     // on AAA100
     await user.click(backButton)
-    modalHeader = screen.getByText("AAA100 Introduction to AAA Thinking")
+    modalHeader = screen.getByText("AAA100H1 Introduction to AAA Thinking")
     expect(modalHeader).toBeDefined()
 
     // click on the forward button, and CCC100's modal should open. The user's

js/components/common/react_modal.js.jsx

@@ -118,7 +118,7 @@ class CourseModal extends React.Component {
         this.setState({
           course: newCourse,
           sessions: sessions,
-          courseTitle: `${this.state.courseId.toUpperCase()} ${course.title}`,
+          courseTitle: `${course.name} ${course.title}`,
         })
       })
     }