♿️ DP193 Create consistent page titles (#281)

mitchdawson1982 · tom-webber · web-flow · commit daacfdb16018 · 2024-04-29T11:27:10.000+01:00
* Implement consistent page titles

* update tests

* make h1 and h2 sizings smaller

* move description to a h3 tag and add back in item name test

---------

Co-authored-by: Tom Webber &lt;80110358+tom-webber@users.noreply.github.com&gt;
diff --git a/core/settings.py b/core/settings.py
@@ -134,3 +134,6 @@
         "NAME": ":memory:",
     }
 }
+# Define a service name setting for page titles
+SERVICE_NAME = "Find MOJ Data"
+GOV_UK_SUFFIX = "GOV.UK"
diff --git a/home/service/details.py b/home/service/details.py
@@ -47,7 +47,7 @@ def _get_context(self):
             "result": self.result,
             "result_type": "Data product",
             "tables": self.assets_in_data_product,
-            "page_title": f"{self.result.name} - Data catalogue",
+            "h1_value": "Details",
         }
 
         return context
@@ -95,7 +95,7 @@ def _get_context(self):
             "result": self.result,
             "result_type": "Database",
             "tables": self.entities_in_database,
-            "page_title": f"{self.result.name} - Data catalogue",
+            "h1_value": "Details",
         }
 
         return context
@@ -138,6 +138,7 @@ def _get_context(self):
             "table": self.table_metadata,
             "parent_entity": self.parent_entity,
             "dataset_parent_type": self.dataset_parent_type,
+            "h1_value": "Details",
         }
 
 
@@ -148,4 +149,7 @@ def __init__(self, urn: str):
         self.context = self._get_context()
 
     def _get_context(self):
-        return {"chart": self.chart_metadata}
+        return {
+            "chart": self.chart_metadata,
+            "h1_value": "Details",
+        }
diff --git a/home/service/glossary.py b/home/service/glossary.py
@@ -56,6 +56,6 @@ def grouper(result):
             else:
                 parent_term["description"] = ""
 
-        context = {"results": sorted_total_results}
+        context = {"results": sorted_total_results, "h1_value": "Glossary"}
 
         return context
diff --git a/home/service/search.py b/home/service/search.py
@@ -156,16 +156,12 @@ def _generate_domain_clear_href(
         }
 
     def _get_context(self) -> dict[str, Any]:
-        if self.form["query"].value():
-            page_title = f'Search for "{self.form["query"].value()}" - Data catalogue'
-        else:
-            page_title = "Search - Data catalogue"
 
         context = {
             "form": self.form,
             "results": self.results.page_results,
             "highlighted_results": self.highlighted_results.page_results,
-            "page_title": page_title,
+            "h1_value": "Search",
             "page_obj": self.paginator.get_page(self.page),
             "page_range": self.paginator.get_elided_page_range(
                 self.page, on_each_side=2, on_ends=1
diff --git a/home/templatetags/page_title.py b/home/templatetags/page_title.py
@@ -0,0 +1,11 @@
+from django import template
+from django.conf import settings
+
+register = template.Library()
+
+
+@register.filter
+def render_title(h1_value: str) -> str:
+    """Renders a compliant page title for  based on the h1 value,
+    service name and gov uk suffix."""
+    return f"{h1_value} - {settings.SERVICE_NAME} - {settings.GOV_UK_SUFFIX}"
diff --git a/home/views.py b/home/views.py
@@ -4,17 +4,18 @@
 
 from home.forms.search import SearchForm
 from home.service.details import (
+    ChartDetailsService,
+    DatabaseDetailsService,
     DataProductDetailsService,
     DatasetDetailsService,
-    DatabaseDetailsService,
-    ChartDetailsService,
 )
 from home.service.glossary import GlossaryService
 from home.service.search import SearchService
 
 
 def home_view(request):
     context = {}
+    context["h1_value"] = "Home"
     return render(request, "home.html", context)
 
 
@@ -26,7 +27,7 @@ def details_view(request, result_type, id):
         context = dataset_details(id)
         return render(request, "details_table.html", context)
     if result_type == "database":
-        context = database_details(request, id)
+        context = database_details(id)
         return render(request, "details_database.html", context)
     if result_type == "chart":
         context = chart_details(id)
@@ -44,7 +45,7 @@ def data_product_details(id):
     return context
 
 
-def database_details(request, id):
+def database_details(id):
     try:
         service = DatabaseDetailsService(id)
     except ObjectDoesNotExist:
diff --git a/templates/base/head.html b/templates/base/head.html
@@ -1,7 +1,8 @@
 {% load static %}
+{% load page_title %}
 <head>
   <meta charset="utf-8">
-  <title>{{page_title|default:"Data catalogue"}}</title>
+  <title>{{h1_value|render_title}}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="blue">
   <link rel="icon" sizes="48x48" href="{% static 'assets/images/favicon.ico' %}">
diff --git a/templates/details_chart.html b/templates/details_chart.html
@@ -20,16 +20,17 @@
 
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-full">
+            <h1 class="govuk-heading-l">{{h1_value}}</h1>
             <span class="govuk-caption-m">Chart</span>
-            <h2 class="govuk-heading-l">{{chart.name}}</h2>
+            <h2 class="govuk-heading-m">{{chart.name}}</h2>
         </div>
     </div>
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <div class="summary-card">
-                <h2 class="govuk-heading-s govuk-!-margin-top-3">
+                <h3 class="govuk-heading-s govuk-!-margin-top-3">
                     Description
-                </h2>
+                </h3>
                 <div class="govuk-body">
                     {{chart.description|markdown:3}}
                 </div>
diff --git a/templates/details_data_product.html b/templates/details_data_product.html
@@ -19,15 +19,16 @@
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
+      <h1 class="govuk-heading-l">{{h1_value}}</h1>
       <span class="govuk-caption-m">Data product</span>
-      <h1 class="govuk-heading-l">{{result.name}}</h1>
+      <h2 class="govuk-heading-m">{{result.name}}</h2>
     </div>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <div class="summary-card">
-          <h2 class="govuk-heading-s govuk-!-margin-top-3">
+          <h3 class="govuk-heading-s govuk-!-margin-top-3">
             Description
-          </h2>
+          </h3>
           <div class="govuk-body">
             {{result.description|markdown:3}}
           </div>
@@ -71,36 +72,36 @@ <h2 class="govuk-heading-s govuk-!-margin-top-3">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
         {% if tables %}
-        <table class="govuk-table">
-          <caption class="govuk-table__caption govuk-table__caption--m">Data product content</caption>
-          <thead class="govuk-table__head">
-            <tr class="govuk-table__row">
-              <th scope="col" class="govuk-table__header app-custom-class">Table name</th>
-              <th scope="col" class="govuk-table__header app-custom-class">Description</th>
-              <th scope="col" class="govuk-table__header app-custom-class">Schema details</th>
-            </tr>
-          </thead>
-          <tbody class="govuk-table__body">
-            {% for table in tables %}
-              {% with table_type=table.type|lower %}
-                <tr class="govuk-table__row">
-                  <td class="govuk-table__cell">{{table.name}}</td>
-                  <td class="govuk-table__cell">
-                    {% if table.description|length > 200 %}
-                      {{ table.description|slice:":200"|add:"..."|markdown:3 }}
-                    {% else %}
-                      {{ table.description|markdown:3 }}
-                    {% endif %}
-                  </td>
-                  <td class="govuk-table__cell">  <a href="{% url 'home:details' result_type=table_type id=table.urn %}" class="govuk-link">Table details</a></td>
-                </tr>
-              {% endwith %}
-            {% endfor %}
-          </tbody>
-        </table>
+          <table class="govuk-table">
+            <caption class="govuk-table__caption govuk-table__caption--m">Data product content</caption>
+            <thead class="govuk-table__head">
+              <tr class="govuk-table__row">
+                <th scope="col" class="govuk-table__header app-custom-class">Table name</th>
+                <th scope="col" class="govuk-table__header app-custom-class">Description</th>
+                <th scope="col" class="govuk-table__header app-custom-class">Schema details</th>
+              </tr>
+            </thead>
+            <tbody class="govuk-table__body">
+              {% for table in tables %}
+                {% with table_type=table.type|lower %}
+                  <tr class="govuk-table__row">
+                    <td class="govuk-table__cell">{{table.name}}</td>
+                    <td class="govuk-table__cell">
+                      {% if table.description|length > 200 %}
+                        {{ table.description|slice:":200"|add:"..."|markdown:3 }}
+                      {% else %}
+                        {{ table.description|markdown:3 }}
+                      {% endif %}
+                    </td>
+                    <td class="govuk-table__cell">  <a href="{% url 'home:details' result_type=table_type id=table.urn %}" class="govuk-link">Table details</a></td>
+                  </tr>
+                {% endwith %}
+              {% endfor %}
+            </tbody>
+          </table>
         {% else %}
-        <h2 class="govuk-heading-m">Data product content</h2>
-        <p class="govuk-body">This data product is missing table information.</p>
+          <h2 class="govuk-heading-m">Data product content</h2>
+          <p class="govuk-body">This data product is missing table information.</p>
         {% endif %}
       </div>
     </div>
diff --git a/templates/details_database.html b/templates/details_database.html
@@ -19,15 +19,16 @@
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
+      <h1 class="govuk-heading-l">{{h1_value}}</h1>
       <span class="govuk-caption-m">Database</span>
-      <h1 class="govuk-heading-l">{{result.name}}</h1>
+      <h2 class="govuk-heading-m">{{result.name}}</h2>
     </div>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <div class="summary-card">
-          <h2 class="govuk-heading-s govuk-!-margin-top-3">
+          <h3 class="govuk-heading-s govuk-!-margin-top-3">
             Description
-          </h2>
+          </h3>
           <div class="govuk-body">
             {{result.description|markdown:3}}
           </div>
@@ -71,36 +72,36 @@ <h2 class="govuk-heading-s govuk-!-margin-top-3">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
         {% if tables %}
-        <table class="govuk-table">
-          <caption class="govuk-table__caption govuk-table__caption--m">Database content</caption>
-          <thead class="govuk-table__head">
-            <tr class="govuk-table__row">
-              <th scope="col" class="govuk-table__header app-custom-class">Table name</th>
-              <th scope="col" class="govuk-table__header app-custom-class">Description</th>
-              <th scope="col" class="govuk-table__header app-custom-class">Schema details</th>
-            </tr>
-          </thead>
-          <tbody class="govuk-table__body">
-            {% for table in tables %}
-              {% with table_type=table.type|lower %}
-                <tr class="govuk-table__row">
-                  <td class="govuk-table__cell">{{table.name}}</td>
-                  <td class="govuk-table__cell">
-                    {% if table.description|length > 200 %}
-                      {{ table.description|slice:":200"|add:"..."|markdown:3 }}
-                    {% else %}
-                      {{ table.description|markdown:3 }}
-                    {% endif %}
-                  </td>
-                  <td class="govuk-table__cell">  <a href="{% url 'home:details' result_type=table_type id=table.urn %}" class="govuk-link">Table details</a></td>
-                </tr>
-              {% endwith %}
-            {% endfor %}
-          </tbody>
-        </table>
+          <table class="govuk-table">
+            <caption class="govuk-table__caption govuk-table__caption--m">Database content</caption>
+            <thead class="govuk-table__head">
+              <tr class="govuk-table__row">
+                <th scope="col" class="govuk-table__header app-custom-class">Table name</th>
+                <th scope="col" class="govuk-table__header app-custom-class">Description</th>
+                <th scope="col" class="govuk-table__header app-custom-class">Schema details</th>
+              </tr>
+            </thead>
+            <tbody class="govuk-table__body">
+              {% for table in tables %}
+                {% with table_type=table.type|lower %}
+                  <tr class="govuk-table__row">
+                    <td class="govuk-table__cell">{{table.name}}</td>
+                    <td class="govuk-table__cell">
+                      {% if table.description|length > 200 %}
+                        {{ table.description|slice:":200"|add:"..."|markdown:3 }}
+                      {% else %}
+                        {{ table.description|markdown:3 }}
+                      {% endif %}
+                    </td>
+                    <td class="govuk-table__cell">  <a href="{% url 'home:details' result_type=table_type id=table.urn %}" class="govuk-link">Table details</a></td>
+                  </tr>
+                {% endwith %}
+              {% endfor %}
+            </tbody>
+          </table>
         {% else %}
-        <h2 class="govuk-heading-m">Database content</h2>
-        <p class="govuk-body">This database is missing table information.</p>
+          <h2 class="govuk-heading-m">Database content</h2>
+          <p class="govuk-body">This database is missing table information.</p>
         {% endif %}
       </div>
     </div>
diff --git a/templates/details_table.html b/templates/details_table.html
@@ -25,16 +25,17 @@
 
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
+      <h1 class="govuk-heading-l">{{h1_value}}</h1>
       <span class="govuk-caption-m">Table</span>
-      <h1 class="govuk-heading-l">{{table.name}}</h1>
+      <h2 class="govuk-heading-m">{{table.name}}</h2>
     </div>
   </div>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
       <div class="summary-card">
-        <h2 class="govuk-heading-s govuk-!-margin-top-3">
+        <h3 class="govuk-heading-s govuk-!-margin-top-3">
           Description
-        </h2>
+        </h3>
         <div class="govuk-body">
           {{table.description|markdown:3}}
         </div>
diff --git a/templates/glossary.html b/templates/glossary.html
@@ -5,7 +5,7 @@
 {% block content %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-one-quarter">
-            <h1 class="govuk-heading-l">Glossary</h1>
+            <h1 class="govuk-heading-l">{{h1_value}}</h1>
         </div>
         <div class="govuk-grid-column-three-quarters">
             <div class="govuk-form-group govuk-!-margin-bottom-8 js-required">
@@ -58,4 +58,4 @@ <h3 class="govuk-heading-m" id="{{ member.name }}">{{ member.name }}</h3>
         import {init} from "{% static 'assets/js/enhanced-glossary.js' %}"
         init();
     </script>
-{% endblock scripts %}
+{% endblock scripts %}
diff --git a/templates/home.html b/templates/home.html
@@ -4,7 +4,7 @@
 {% block content %}
 
   <a onclick="history.back()" class="govuk-back-link">Back</a>
-  <h1 class="govuk-heading-xl">Customised page template</h1>
+  <h1 class="govuk-heading-l">{{h1_value}}</h1>
 
   <p class="govuk-body">
     <a href="{% url 'home:glossary' %}" class="govuk-link">Glossary</a>.
diff --git a/templates/search.html b/templates/search.html
@@ -8,7 +8,7 @@
     <div class="govuk-grid-column-two-thirds">
       <form action="{% url 'home:search' %}" method="get" role="search" class="search__form govuk-!-margin-bottom-4" id="searchform">
         <div class="govuk-form-group">
-          <h1 class="govuk-heading-xl">Find MOJ Data</h1>
+          <h1 class="govuk-heading-l">{{h1_value}}</h1>
           <div class="search-container">
             <label for="{{ form.query.id_for_label }}" class="govuk-label govuk-visually-hidden-focusable">Search MOJ Data</label>
             {{ form.query }}
@@ -38,4 +38,4 @@ <h2 class="govuk-heading-l govuk-!-display-inline-block" id="result-count">{{tot
     import {initDomainFilter} from "{% static 'assets/js/enhanced-search.js' %}"
     initDomainFilter();
   </script>
-{% endblock scripts %}
+{% endblock scripts %}
diff --git a/tests/home/service/test_details.py b/tests/home/service/test_details.py
diff --git a/tests/home/service/test_glossary.py b/tests/home/service/test_glossary.py
diff --git a/tests/home/service/test_search.py b/tests/home/service/test_search.py
diff --git a/tests/selenium/conftest.py b/tests/selenium/conftest.py
diff --git a/tests/selenium/test_search_scenarios.py b/tests/selenium/test_search_scenarios.py

Original file line number	Diff line number	Diff line change
`@@ -134,3 +134,6 @@`
`134`	`134`	`"NAME": ":memory:",`
`135`	`135`	`}`
`136`	`136`	`}`
	`137`	`+# Define a service name setting for page titles`
	`138`	`+SERVICE_NAME = "Find MOJ Data"`
	`139`	`+GOV_UK_SUFFIX = "GOV.UK"`