Add some feedback from edX Support to the Program Enrollment Inspector

lms/djangoapps/support/serializers.py

 """
 Serializers for use in the support app.
 """
-
+from django.urls import reverse
 
 from rest_framework import serializers
 
@@ -10,6 +10,8 @@ from lms.djangoapps.program_enrollments.models import (
     ProgramEnrollment,
     ProgramCourseEnrollment,
 )
+from openedx.core.djangoapps.catalog.utils import get_programs_by_uuids
+from openedx.features.course_experience import default_course_url_name
 
 DATETIME_FORMAT = '%Y-%m-%dT%H:%M:%S'
 # pylint: disable=abstract-method
@@ -41,10 +43,15 @@ class ProgramCourseEnrollmentSerializer(serializers.Serializer):
     status = serializers.CharField()
     course_key = serializers.CharField()
     course_enrollment = CourseEnrollmentSerializer()
+    course_url = serializers.SerializerMethodField()
 
     class Meta(object):
         model = ProgramCourseEnrollment
 
+    def get_course_url(self, obj):
+        course_url_name = default_course_url_name(obj.course_key)
+        return reverse(course_url_name, kwargs={'course_id': obj.course_key})
+
 
 class ProgramEnrollmentSerializer(serializers.Serializer):
     """ Serializes a Program Enrollment Model object """
@@ -54,10 +61,15 @@ class ProgramEnrollmentSerializer(serializers.Serializer):
     status = serializers.CharField()
     program_uuid = serializers.UUIDField()
     program_course_enrollments = ProgramCourseEnrollmentSerializer(many=True)
+    program_name = serializers.SerializerMethodField()
 
     class Meta(object):
         model = ProgramEnrollment
 
+    def get_program_name(self, obj):
+        program_list = get_programs_by_uuids([obj.program_uuid])
+        return next(iter(program_list), {}).get('title', '')
+
 
 def serialize_user_info(user, user_social_auths=None):
     """

lms/djangoapps/support/static/support/jsx/program_enrollments/inspector.jsx

@@ -62,7 +62,13 @@ const renderEnrollmentsSection = enrollments => (
     <h3>Program Enrollments</h3>
     {enrollments.map(enrollment => (
       <div key={enrollment.program_uuid} className="ml-5">
-        <h4>Program {enrollment.program_uuid} Enrollment</h4>
+        <h4>
+          <span className="font-weight-bold">
+            {enrollment.program_name}
+          </span> Program ( <span className="font-weight-bold">
+            {enrollment.program_uuid}
+          </span>)
+        </h4>
         <div> <span className="font-weight-bold">Status</span>: {enrollment.status} </div>
         <div> <span className="font-weight-bold">Created</span>: {enrollment.created} </div>
         <div> <span className="font-weight-bold">Last updated</span>: {enrollment.modified} </div>
@@ -73,7 +79,11 @@ const renderEnrollmentsSection = enrollments => (
         {enrollment.program_course_enrollments && enrollment.program_course_enrollments.map(
           programCourseEnrollment => (
             <div key={programCourseEnrollment.course_key} className="ml-5">
-              <h4>Course {programCourseEnrollment.course_key}</h4>
+              <h4>
+                <a href={programCourseEnrollment.course_url}>
+                  {programCourseEnrollment.course_key}
+                </a>
+              </h4>
               <div>
                 <span className="font-weight-bold">Status</span>
                 : {programCourseEnrollment.status}
@@ -201,11 +211,13 @@ ProgramEnrollmentsInspectorPage.propTypes = {
         created: PropTypes.string,
         modified: PropTypes.string,
         program_uuid: PropTypes.string,
+        program_name: PropTypes.string,
         status: PropTypes.string,
         external_user_key: PropTypes.string,
         program_course_enrollments: PropTypes.arrayOf(
           PropTypes.shape({
             course_key: PropTypes.string,
+            course_url: PropTypes.string,
             created: PropTypes.string,
             modified: PropTypes.string,
             status: PropTypes.string,