Switch all report views to use Wagtail’s reusable header component (#8839)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -67,6 +67,7 @@ Changelog
  * Change rich text editor placeholder to follow the user’s focus on empty blocks (Thibaud Colas)
  * Add rich text editor empty block highlight by showing their block type (Thibaud Colas)
  * Make ModelAdmin InspectView footer actions consistent with other parts of the UI (Thibaud Colas)
+ * Switch all report views to use Wagtail’s reusable header component (Paarth Agarwal)
  * Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
  * Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
  * Fix: Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)

docs/releases/4.0.md

@@ -79,6 +79,7 @@ As part of the page editor redesign project sponsored by Google, we have made a
  * Update classes and styles for the shared header templates to align with UI guidelines (Paarth Agarwal)
  * Clean up multiple eslint rules usage and configs to align better with the Wagtail coding guidelines (LB (Ben Johnston))
  * Make ModelAdmin InspectView footer actions consistent with other parts of the UI (Thibaud Colas)
+ * Switch all report views to use Wagtail’s reusable header component (Paarth Agarwal)
 
 ### Bug fixes
 

wagtail/admin/templates/wagtailadmin/reports/base_report.html

@@ -4,32 +4,23 @@
 {% block titletag %}{{ title }}{% endblock %}
 
 {% block content %}
-    <header class="w-header" role="banner">
-        <div class="row">
-            <div class="left">
-                <div class="col">
-                    <h1 class="w-header__title">
-                        {% if header_icon %}{% icon class_name="w-header__glyph" name=header_icon %}{% endif %}
-                        {{ title }}{% if subtitle %} <span class="w-header__subtitle">{{ subtitle }}</span>{% endif %}
-                    </h1>
-                </div>
-            </div>
-            <div class="right report__actions">
-                {% block actions %}
-                    {% if view.list_export %}
-                        <div class="dropdown dropdown-button match-width">
-                            <a href="{{ view.xlsx_export_url }}" class="button bicolor button--icon">{% icon name="download" wrapped=1 %}{% trans 'Download XLSX' %}</a>
-                            <div class="dropdown-toggle">{% icon name="arrow-down" %}</div>
-                            <ul>
-                                <li><a  class="button bicolor button--icon" href="{{ view.csv_export_url }}">{% icon name="download" wrapped=1 %}{% trans 'Download CSV' %}</a></li>
-                            </ul>
-                        </div>
-                    {% endif %}
-                {% endblock %}
-            </div>
+    {% fragment as report_actions %}
+        <div class="report__actions">
+            {% block actions %}
+                {% if view.list_export %}
+                    <div class="dropdown dropdown-button match-width">
+                        <a href="{{ view.xlsx_export_url }}" class="button bicolor button--icon">{% icon name="download" wrapped=1 %}{% trans 'Download XLSX' %}</a>
+                        <div class="dropdown-toggle">{% icon name="arrow-down" %}</div>
+                        <ul>
+                            <li><a  class="button bicolor button--icon" href="{{ view.csv_export_url }}">{% icon name="download" wrapped=1 %}{% trans 'Download CSV' %}</a></li>
+                        </ul>
+                    </div>
+                {% endif %}
+            {% endblock %}
         </div>
-    </header>
+    {% endfragment %}
 
+    {% include "wagtailadmin/shared/header.html" with title=title icon=header_icon merged=1 extra_actions=report_actions %}
     <div class="report{% if filters %} report--has-filters{% endif %}">
         <div class="report__results">
             {% block results %}

wagtail/admin/templates/wagtailadmin/shared/header.html

@@ -14,6 +14,7 @@
     - `action_url` - if present, display an 'action' button. This is the URL to be used as the link URL for the button
     - `action_text` - text for the 'action' button
     - `action_icon` - icon for the 'action' button, default is 'icon-plus'
+    - `extra_actions` - extra action buttons for the header. This is the HTML to be used for the extra buttons
 
 {% endcomment %}
 <header class="{% classnames "w-header" classname merged|yesno:"w-header--merged," search_form|yesno:"w-header--hasform," %}">
@@ -53,6 +54,7 @@
                     </div>
                 {% endif %}
             {% endblock %}
+            {{ extra_actions }}
         </div>
     </div>
     {% block extra_rows %}{% endblock %}

wagtail/snippets/tests/test_snippets.py

@@ -1395,7 +1395,7 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
         # Should use the latest draft content for the title
         self.assertContains(
             response,
-            '<h1 class="w-header__title"><svg class="icon icon-snippet w-header__glpyh" aria-hidden="true"><use href="#icon-snippet"></use></svg>Draft-enabled Bar, In Draft</h1>',
+            '<h1 class="w-header__title"><svg class="icon icon-snippet w-header__glyph" aria-hidden="true"><use href="#icon-snippet"></use></svg>Draft-enabled Bar, In Draft</h1>',
             html=True,
         )