add sis id to courses pop out menu

This adds the sis id to the courses pop out menu if its present. If the
term is present it will display "term - sisid" under the course. if only
one of the elements is present it will only display that element.

closes OUT-6387
flag=courses_popout_sisid

test plan:
 - Have a course with a sis_id
 - ensure the feature flag is on
 - load canvas and click on the courses icon on the right
 - ensure the sis id is present under the course

Change-Id: I0872519aacca44bec0a0a9d790d3ec98b4d50b39
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/347670
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Angela Gomba <angela.gomba@instructure.com>
QA-Review: Angela Gomba <angela.gomba@instructure.com>
Product-Review: Sam Garza <sam.garza@instructure.com>

app/controllers/application_controller.rb

@@ -362,6 +362,7 @@ class ApplicationController < ActionController::Base
     platform_service_speedgrader
     instui_header
     rce_find_replace
+    courses_popout_sisid
   ].freeze
   JS_ENV_ROOT_ACCOUNT_FEATURES = %i[
     product_tours

config/feature_flags/tiger_team_release_flags.yml

@@ -0,0 +1,10 @@
+courses_popout_sisid:
+  state: hidden
+  applies_to: SiteAdmin
+  display_name: Courses Popout SIS ID
+  description: Adds the course sis id (if present) to the additional information in the courses popout
+  environments:
+    ci:
+      state: allowed_on
+    development:
+      state: allowed_on

ui/api.d.ts

@@ -602,6 +602,7 @@ export type Course = Readonly<{
     name: string
   }
   homeroom_course: boolean
+  sis_course_id: string | null
 }>
 
 // '/api/v1/users/self/tabs',

ui/features/navigation_header/react/lists/SplitCoursesList.tsx

@@ -29,14 +29,22 @@ const I18n = useI18nScope('CoursesTray')
 const UNPUBLISHED = 'unpublished'
 
 export function CourseListItemContent({course}: {course: Course}) {
+  const subtexts = []
+  if (course.enrollment_term_id > 1) {
+    subtexts.push(course.term.name)
+  }
+  if (ENV.FEATURES?.courses_popout_sisid && course.sis_course_id) {
+    subtexts.push(course.sis_course_id)
+  }
+
   return (
     <>
       <Link isWithinText={false} href={`/courses/${course.id}`}>
         {course.name}
       </Link>
-      {course.enrollment_term_id > 1 && (
+      {subtexts.length > 0 && (
         <Text as="div" size="x-small" weight="light">
-          {course.term.name}
+          {subtexts.join(' - ')}
         </Text>
       )}
     </>

ui/features/navigation_header/react/trays/__tests__/CoursesTray.test.tsx

@@ -35,17 +35,35 @@ describe('CoursesTray', () => {
       id: '2',
       name: 'Course2',
       workflow_state: 'published',
+      enrollment_term_id: '2',
+      term: {
+        id: '2',
+        name: 'Term2',
+      },
     },
     {
       id: '3',
       name: 'Course3',
       workflow_state: 'unpublished',
+      sis_course_id: 'sis1',
+    },
+    {
+      id: '4',
+      name: 'Course4',
+      workflow_state: 'published',
+      enrollment_term_id: '2',
+      term: {
+        id: '2',
+        name: 'Term2',
+      },
+      sis_course_id: 'sis1',
     },
   ]
 
   beforeEach(() => {
     queryClient.setQueryData(['courses'], courses)
     window.ENV.K5_USER = false
+    window.ENV.FEATURES.courses_popout_sisid = true
     ENV.current_user_roles = []
   })
 
@@ -89,4 +107,19 @@ describe('CoursesTray', () => {
     expect(getByText('All Subjects')).toBeInTheDocument()
     expect(queryByText('Courses')).not.toBeInTheDocument()
   })
+
+  it('renders the term name if present', () => {
+    const {getByText} = render(<CoursesTray />)
+    expect(getByText('Term2')).toBeInTheDocument()
+  })
+
+  it('renders the sis id if present', () => {
+    const {getByText} = render(<CoursesTray />)
+    expect(getByText('sis1')).toBeInTheDocument()
+  })
+
+  it('rendrs both the term name and the sis id if both are present', () => {
+    const {getByText} = render(<CoursesTray />)
+    expect(getByText('Term2 - sis1')).toBeInTheDocument()
+  })
 })

ui/shared/global/env/EnvCommon.d.ts

@@ -234,6 +234,7 @@ export type SiteAdminFeatureId =
   | 'render_both_to_do_lists'
   | 'instui_header'
   | 'lti_registrations_discover_page'
+  | 'courses_popout_sisid'
 
 /**
  * From ApplicationController#JS_ENV_ROOT_ACCOUNT_FEATURES