course-number and override course-number added in Certificate Editor View

cms/static/sass/views/_certificates.scss

@@ -50,6 +50,10 @@
   .content-supplementary {
     width: flex-grid(3, 12);
   }
+
+  .certificate-info-section{
+    overflow: auto;
+  }
 }
 
 // * +Main - Collection

cms/templates/base.html

@@ -84,6 +84,7 @@ import json
                       url_name: "${context_course.location.name | h}",
                       org: "${context_course.location.org | h}",
                       num: "${context_course.location.course | h}",
+                      display_course_number: "${_(context_course.display_coursenumber)}",
                       revision: "${context_course.location.revision | h}"
                   });
               });

cms/templates/js/certificate-details.underscore

@@ -16,16 +16,35 @@
          <header>
            <span class="title"><%= gettext("Certificate Details") %></span>
          </header>
-        <div class="actual-course-title">
-                <span class="certificate-label"><b><%= gettext('Course Title') %>: </b> </span>
-                <span class="certificate-value"><%= course.get('name') %></span>
-        </div>
-        <% if (course_title) { %>
-            <div class="course-title-override">
-                <span class="certificate-label"><b><%= gettext('Course Title Override') %>: </b></span>
-                <span class="certificate-value"><%= course_title %></span>
+         <div class='certificate-info-section'>
+             <div class='course-title-section pull-left'>
+                <div class="actual-course-title">
+                        <span class="certificate-label"><b><%= gettext('Course Title') %>: </b> </span>
+                        <span class="certificate-value"><%= course.get('name') %></span>
+                </div>
+                <% if (course_title) { %>
+                    <div class="course-title-override">
+                        <span class="certificate-label"><b><%= gettext('Course Title Override') %>: </b></span>
+                        <span class="certificate-value"><%= course_title %></span>
+                    </div>
+                <% } %>
+             </div>
+
+            <div class='course-number-section pull-right'>
+                <div class="actual-course-number">
+                        <span class="certificate-label"><b><%= gettext('Course Number') %>: </b> </span>
+                        <span class="certificate-value"><%= course.get('num') %></span>
+                </div>
+
+                <% if (course.get('display_course_number')) { %>
+                    <div class="course-number-override">
+                        <span class="certificate-label"><b><%= gettext('Course Number Override') %>: </b></span>
+                        <span class="certificate-value"><%= course.get('display_course_number') %></span>
+                    </div>
+                <% } %>
             </div>
-        <% } %>
+        </div>
+
          <header style='margin-top: 30px;'>
            <span class="title"><%= gettext("Certificate Signatories") %></span>
          </header>

common/test/acceptance/pages/studio/settings_certificates.py

@@ -11,7 +11,6 @@ The methods in these classes are organized into several conceptual buckets:
 import os
 
 from bok_choy.promise import EmptyPromise
-from ...tests.helpers import disable_animations
 from .course_page import CoursePage
 from common.test.acceptance.tests.helpers import disable_animations
 
@@ -57,6 +56,18 @@ class CertificatesPage(CoursePage):
         """
         return self.q(css='.signatory-title-value').first.html[0]
 
+    def get_course_number(self):
+        """
+        Return Course Number
+        """
+        return self.q(css='.actual-course-number .certificate-value').first.text[0]
+
+    def get_course_number_override(self):
+        """
+        Return Course Number Override
+        """
+        return self.q(css='.course-number-override .certificate-value').first.text[0]
+
     ################
     # Properties
     ################

common/test/acceptance/tests/studio/test_studio_settings_certificates.py

@@ -4,6 +4,7 @@ Acceptance tests for Studio's Setting pages
 import re
 from .base_studio_test import StudioCourseTest
 from ...pages.studio.settings_certificates import CertificatesPage
+from ...pages.studio.settings_advanced import AdvancedSettingsPage
 
 
 class CertificatesTest(StudioCourseTest):
@@ -18,6 +19,13 @@ class CertificatesTest(StudioCourseTest):
             self.course_info['number'],
             self.course_info['run']
         )
+        self.advanced_settings_page = AdvancedSettingsPage(
+            self.browser,
+            self.course_info['org'],
+            self.course_info['number'],
+            self.course_info['run']
+        )
+        self.course_advanced_settings = dict()
 
     def make_signatory_data(self, prefix='First'):
         """
@@ -229,3 +237,59 @@ class CertificatesTest(StudioCourseTest):
 
         signatory_title = self.certificates_page.get_first_signatory_title()
         self.assertNotEqual([], re.findall(r'<br\s*/?>', signatory_title))
+
+    def test_course_number_in_certificate_details_view(self):
+        """
+        Scenario: Ensure that Course Number is displayed in certificate details view
+
+        Given I have a certificate
+        When I visit certificate details page on studio
+        Then I see Course Number next to Course Name
+        """
+        self.certificates_page.visit()
+        certificate = self.create_and_verify_certificate(
+            "Course Title Override",
+            0,
+            [self.make_signatory_data('first')]
+        )
+
+        certificate.wait_for_certificate_delete_button()
+
+        # Make sure certificate is created
+        self.assertEqual(len(self.certificates_page.certificates), 1)
+        course_number = self.certificates_page.get_course_number()
+        self.assertEqual(self.course_info['number'], course_number)
+
+    def test_course_number_override_in_certificate_details_view(self):
+        """
+        Scenario: Ensure that Course Number Override is displayed in certificate details view
+
+        Given I have a certificate
+        When I visit certificate details page on studio
+        Then I see Course Number Override next to Course Name
+        """
+
+        self.course_advanced_settings.update(
+            {'Course Number Display String': 'Course Number Override String'}
+        )
+
+        self.certificates_page.visit()
+        certificate = self.create_and_verify_certificate(
+            "Course Title Override",
+            0,
+            [self.make_signatory_data('first')]
+        )
+
+        certificate.wait_for_certificate_delete_button()
+
+        # Make sure certificate is created
+        self.assertEqual(len(self.certificates_page.certificates), 1)
+
+        # set up course number override in Advanced Settings Page
+        self.advanced_settings_page.visit()
+        self.advanced_settings_page.set_values(self.course_advanced_settings)
+        self.advanced_settings_page.wait_for_ajax()
+
+        self.certificates_page.visit()
+        course_number_override = self.certificates_page.get_course_number_override()
+        self.assertEqual(self.course_advanced_settings['Course Number Display String'], course_number_override)