From 0e38c454c4e5d36164d6d965fe368dd789b76e3e Mon Sep 17 00:00:00 2001
From: duidae <duidae@gmail.com>
Date: Tue, 27 Jan 2026 11:42:56 +0800
Subject: [PATCH] fix: append course name with code to avoid ambiguity in inbox
 drop down

---
 ui/features/inbox/graphql/Course.js                   |  4 ++++
 .../react/components/CourseSelect/CourseSelect.jsx    | 11 +++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/features/inbox/graphql/Course.js b/ui/features/inbox/graphql/Course.js
index 3aac9b6c4495d..d73a584630beb 100644
--- a/ui/features/inbox/graphql/Course.js
+++ b/ui/features/inbox/graphql/Course.js
@@ -24,6 +24,7 @@ export const Course = {
     fragment Course on Course {
       _id
       courseNickname
+      courseCode
       contextName: name
       assetString
     }
@@ -32,6 +33,7 @@ export const Course = {
   shape: shape({
     _id: string,
     courseNickname: string,
+    courseCode: string,
     contextName: string,
     assetString: string,
   }),
@@ -39,11 +41,13 @@ export const Course = {
   mock: ({
     _id = '195',
     courseNickname = 'Ipsum',
+    courseCode = 'CS101',
     contextName = 'XavierSchool',
     assetString = 'course_195',
   } = {}) => ({
     _id,
     courseNickname,
+    courseCode,
     contextName,
     assetString,
     __typename: 'Course',
diff --git a/ui/features/inbox/react/components/CourseSelect/CourseSelect.jsx b/ui/features/inbox/react/components/CourseSelect/CourseSelect.jsx
index 42eee41afb0fa..990720f250aef 100644
--- a/ui/features/inbox/react/components/CourseSelect/CourseSelect.jsx
+++ b/ui/features/inbox/react/components/CourseSelect/CourseSelect.jsx
@@ -28,6 +28,10 @@ const I18n = createI18nScope('conversations_2')
 
 export const ALL_COURSES_ID = 'all_courses'
 
+const appendCourseNameWithCode = (courseName, courseCode) => {
+  return `${courseName ?? ''}${courseCode ? `(${courseCode})` : ''}`
+}
+
 const filterOptions = (value, options) => {
   const filteredOptions = {}
   Object.keys(options).forEach(key => {
@@ -37,8 +41,7 @@ const filterOptions = (value, options) => {
     } else {
       filteredOptions[key] = options[key]?.filter(
         option =>
-          option.contextName.toLowerCase().includes(value.toLowerCase()) ||
-          option.courseNickname?.toLowerCase().includes(value.toLowerCase()),
+          appendCourseNameWithCode(option.contextName || option.courseNickname, option.courseCode).toLowerCase().includes(value.toLowerCase())
       )
     }
   })
@@ -54,7 +57,7 @@ const getOptionById = (id, options) => {
 const getCourseName = (courseAssetString, options) => {
   if (courseAssetString) {
     const courseInfo = getOptionById(courseAssetString, options)
-    return courseInfo ? courseInfo.contextName : ''
+    return courseInfo ? appendCourseNameWithCode(courseInfo.contextName, courseInfo.courseCode) : ''
   } else {
     return ''
   }
@@ -215,7 +218,7 @@ const CourseSelect = props => {
               isHighlighted={option.assetString === highlightedOptionId}
               isSelected={option.assetString === selectedOptionId}
             >
-              {option.courseNickname || option.contextName}
+              {appendCourseNameWithCode(option.courseNickname || option.contextName, option.courseCode)}
               <ScreenReaderContent>
                 {I18n.t(` in %{listHeading}`, {listHeading: getGroupLabel(key)})}
               </ScreenReaderContent>