Allow to include an HTML header and footer in reports.

problem_builder/dashboard.py

@@ -238,10 +238,24 @@ class DashboardBlock(StudioEditableXBlockMixin, XBlock):
         help=_("Toggles if numeric values are displayed"),
         scope=Scope.content
     )
+    header_html = String(
+        display_name=_("Header HTML"),
+        default="",
+        help=_("Additional HTML to include after the heading."),
+        multiline_editor=True,
+        scope=Scope.content,
+    )
+    footer_html = String(
+        display_name=_("Footer HTML"),
+        default="",
+        help=_("Additional HTML to include after the bottom of the page."),
+        multiline_editor=True,
+        scope=Scope.content,
+    )
 
     editable_fields = (
         'display_name', 'mentoring_ids', 'exclude_questions', 'average_labels', 'show_numbers',
-        'color_rules', 'visual_rules', 'visual_title', 'visual_desc'
+        'color_rules', 'visual_rules', 'visual_title', 'visual_desc', 'header_html', 'footer_html',
     )
     css_path = 'public/css/dashboard.css'
     js_path = 'public/js/dashboard.js'
@@ -446,6 +460,8 @@ class DashboardBlock(StudioEditableXBlockMixin, XBlock):
             'display_name': self.display_name,
             'visual_repr': visual_repr,
             'show_numbers': self.show_numbers,
+            'header_html': self.header_html,
+            'footer_html': self.footer_html,
         })
 
         fragment = Fragment(html)

problem_builder/templates/html/dashboard.html

@@ -3,6 +3,12 @@
   <div class="dashboard-report">
     <h2>{{display_name}}</h2>
 
+    {% if header_html %}
+    <div class="report-header">
+      {{ header_html|safe }}
+    </div>
+    {% endif %}
+
     {% if visual_repr %}
     <div class="pb-dashboard-visual">
       <svg width="{{visual_repr.width}}" height="{{visual_repr.height}}" role="img" aria-labelledby="pb-dashboard-vr-title-{{visual_repr.unique_id}} pb-dashboard-vr-desc-{{visual_repr.unique_id}}">
@@ -64,6 +70,11 @@
         </tbody>
       </table>
     {% endfor %}
+    {% if footer_html %}
+    <div class="report-footer">
+      {{ footer_html|safe }}
+    </div>
+  {% endif %}
   </div>
 
   {% if blocks %}

problem_builder/tests/integration/test_dashboard.py

@@ -62,6 +62,8 @@ class TestDashboardBlock(SeleniumXBlockTest):
     ALTERNATIVE_DASHBOARD = dedent("""
     <pb-dashboard mentoring_ids='["dummy-value"]' show_numbers="false"
         average_labels='{"Step 1": "Avg.", "Step 2":"Mean", "Step 3":"Second Quartile"}'
+        header_html='&lt;p id="header-paragraph"&gt;Header&lt;/p&gt;'
+        footer_html='&lt;p id="footer-paragraph"&gt;Footer&lt;/p&gt;'
     />
     """)
     HIDE_QUESTIONS_DASHBOARD = dedent("""
@@ -171,6 +173,10 @@ class TestDashboardBlock(SeleniumXBlockTest):
         # Reload the page:
         self.go_to_view("student_view")
         dashboard = self.browser.find_element_by_css_selector('.pb-dashboard')
+        headers = dashboard.find_elements_by_class_name('report-header')
+        self.assertEqual(len(headers), 0)
+        footers = dashboard.find_elements_by_class_name('report-footer')
+        self.assertEqual(len(footers), 0)
         steps = dashboard.find_elements_by_css_selector('tbody')
         self.assertEqual(len(steps), 3)
         expected_values = ('1', '2', '3', '4', 'B')
@@ -198,6 +204,7 @@ class TestDashboardBlock(SeleniumXBlockTest):
 
         * Average label is "Avg." instead of default "Average"
         * Numerical values are not shown
+        * Include HTML header and footer snippets
         """
         self._install_fixture(self.ALTERNATIVE_DASHBOARD)
         self._set_mentoring_values()
@@ -205,6 +212,10 @@ class TestDashboardBlock(SeleniumXBlockTest):
         # Reload the page:
         self.go_to_view("student_view")
         dashboard = self.browser.find_element_by_css_selector('.pb-dashboard')
+        header_p = dashboard.find_element_by_id('header-paragraph')
+        self.assertEquals(header_p.text, 'Header')
+        footer_p = dashboard.find_element_by_id('footer-paragraph')
+        self.assertEquals(footer_p.text, 'Footer')
         steps = dashboard.find_elements_by_css_selector('tbody')
         self.assertEqual(len(steps), 3)