Add the course code to the direct share search

This makes it easier to tell which course is which
and recognize when a course has been added to
the list because the search text matches the
course code.

Test Plan:
Make sure you have the Direct Share flag on
Create a page or something
Click the kebab on the page listing
Choose "Copy To..."
Click the 'Select a Course' dropdown. Some
options should appear. Underneath the course
name, the course code should be listed in smaller
text.

Fixes LS-1272

flag=direct_share

Change-Id: I2792046cae4f33fb9cbab27fcee45df4b002189f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/245721
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Peyton Craighill <pcraighill@instructure.com>

app/jsx/shared/components/SearchItemSelector.js

@@ -29,7 +29,8 @@ SearchItemSelector.propTypes = {
   onItemSelected: func, // expects each item to have the 'name' property
   itemSearchFunction: func,
   renderLabel: string,
-  contextId: string
+  contextId: string,
+  renderOption: func
 }
 
 SearchItemSelector.defaultProps = {
@@ -46,7 +47,8 @@ export default function SearchItemSelector({
   onItemSelected,
   renderLabel,
   itemSearchFunction,
-  contextId = ''
+  contextId = '',
+  renderOption
 }) {
   const [items, setItems] = useState(null)
   const [error, setError] = useState(null)
@@ -100,7 +102,7 @@ export default function SearchItemSelector({
       ? null
       : items.map(item => (
           <CanvasAsyncSelect.Option key={item.id} id={item.id}>
-            {item.name}
+            {renderOption ? renderOption(item) : item.name}
           </CanvasAsyncSelect.Option>
         ))
 

app/jsx/shared/direct_share/CourseAndModulePicker.js

@@ -21,6 +21,7 @@ import I18n from 'i18n!course_and_module_picker'
 import React from 'react'
 import {func, string, bool} from 'prop-types'
 import {View} from '@instructure/ui-view'
+import {Text} from '@instructure/ui-text'
 
 import useManagedCourseSearchApi from '../effects/useManagedCourseSearchApi'
 import useModuleCourseSearchApi from '../effects/useModuleCourseSearchApi'
@@ -51,6 +52,16 @@ export default function CourseAndModulePicker({
           onItemSelected={setSelectedCourse}
           renderLabel={I18n.t('Select a Course')}
           itemSearchFunction={useManagedCourseSearchApi}
+          renderOption={item => {
+            return (
+              <View>
+                {item.name}
+                <View as="p" margin="none" padding="none">
+                  <Text size="small">{item.course_code}</Text>
+                </View>
+              </View>
+            )
+          }}
         />
       </View>
       <View as="div" padding="0 0 small 0">
@@ -60,6 +71,16 @@ export default function CourseAndModulePicker({
             renderLabel={I18n.t('Select a Module (optional)')}
             itemSearchFunction={useModuleCourseSearchApi}
             contextId={selectedCourseId || null}
+            renderOption={item => {
+              return (
+                <View>
+                  {item.name}
+                  <View as="p" margin="none" padding="none">
+                    <Text size="small">{item.course_code}</Text>
+                  </View>
+                </View>
+              )
+            }}
           />
         )}
       </View>