Make template statistics on the dashboard a table

It was a `<dl>` before which is kinda weird. Especially when the jobs
table was a real `<table>`.

It also means we can give it column headings so that new and invited
users have a better idea of what it is.

app/assets/stylesheets/views/dashboard.scss

@@ -49,7 +49,6 @@
     color: $govuk-blue;
     max-width: 100%;
     background: $white;
-    margin-bottom: $gutter-two-thirds;
   }
 
 }

app/templates/views/dashboard/template-statistics.html

@@ -1,41 +1,46 @@
 {% from "components/big-number.html" import big_number %}
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/big-number.html" import big_number %}
+{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
 
-<dl>
+<div class='dashboard-table'>
-  {% for item in template_statistics %}
+  {% call(item, row_number) list_table(
-    <div class="grid-row">
+    template_statistics,
-
+    caption="Templates used",
-      <dt class="column-half">
+    caption_visible=False,
-        <span class="spark-bar-label">
+    empty_message='',
-          <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template.id) }}">{{ item.template.name }}</a>
+    field_headings=[
-          <span class="file-list-hint">
+      'Template',
-            {{ message_count_label(1, item.template.template_type, suffix='template')|capitalize }}
+      'Messages sent'
+    ],
+    field_headings_visible=True
+  ) %}
+    {% call row_heading() %}
+      <span class="spark-bar-label">
+        <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template.id) }}">{{ item.template.name }}</a>
+        <span class="file-list-hint">
+          {{ message_count_label(1, item.template.template_type, suffix='template')|capitalize }}
+        </span>
+      </span>
+    {% endcall %}
+    {% call field() %}
+      {% if template_statistics|length > 1 %}
+        <span class="spark-bar">
+          <span style="width: {{ item.usage_count / most_used_template_count * 100 }}%">
+            {{ big_number(
+              item.usage_count,
+              smallest=True
+            ) }}
           </span>
         </span>
-      </dt>
+      {% else %}
-
+        <span class="heading-small">
-      <dd class="column-half">
+          {{ big_number(
-        {% if template_statistics|length > 1 %}
+            item.usage_count,
-          <span class="spark-bar">
+            smallest=True
-            <span style="width: {{ item.usage_count / most_used_template_count * 100 }}%">
+          ) }}
-              {{ big_number(
+        </span>
-                item.usage_count,
+      {% endif %}
-                smallest=True
+    {% endcall %}
-              ) }}
+  {% endcall %}
-              <span class="visually-hidden">
+</div>
-                {{ message_count_label(item.usage_count, item.template.template_type) }}
-              </span>
-            </span>
-          </span>
-        {% else %}
-          <span class="heading-small">
-            {{ item.usage_count }}
-            {{ message_count_label(item.usage_count, item.template.template_type) }}
-          </span>
-        {% endif %}
-      </dd>
-
-    </div>
-  {% endfor %}
-</dl>

tests/app/main/views/test_dashboard.py

@@ -87,19 +87,17 @@ def test_should_show_recent_templates_on_dashboard(app_,
         assert 'Test Service' in headers
         assert 'In the last 7 days' in headers
 
-        table_rows = page.find_all('dt')
+        table_rows = page.find_all('tbody')[0].find_all('tr')
 
         assert len(table_rows) == 2
 
-        assert 'Pickle feet' in page.find_all('dt')[0].text
+        assert 'Pickle feet' in table_rows[0].find_all('th')[0].text
-        assert 'Text message template' in page.find_all('dt')[0].text
+        assert 'Text message template' in table_rows[0].find_all('th')[0].text
-        assert '206' in page.find_all('dd')[0].text
+        assert '206' in table_rows[0].find_all('td')[0].text
-        assert 'text messages sent' in page.find_all('dd')[0].text
 
-        assert 'Brine Shrimp' in page.find_all('dt')[1].text
+        assert 'Brine Shrimp' in table_rows[1].find_all('th')[0].text
-        assert 'Text message template' in page.find_all('dt')[1].text
+        assert 'Text message template' in table_rows[1].find_all('th')[0].text
-        assert '13' in page.find_all('dd')[1].text
+        assert '13' in table_rows[1].find_all('td')[0].text
-        assert 'text messages sent' in page.find_all('dd')[1].text
 
 
 def test_should_show_all_templates_on_template_statistics_page(
@@ -129,19 +127,17 @@ def test_should_show_all_templates_on_template_statistics_page(
         mock_template_stats.assert_called_once_with(SERVICE_ONE_ID)
 
         page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
-        table_rows = page.find_all('dt')
+        table_rows = page.find_all('tbody')[0].find_all('tr')
 
         assert len(table_rows) == 2
 
-        assert 'Pickle feet' in page.find_all('dt')[0].text
+        assert 'Pickle feet' in table_rows[0].find_all('th')[0].text
-        assert 'Text message template' in page.find_all('dt')[0].text
+        assert 'Text message template' in table_rows[0].find_all('th')[0].text
-        assert '206' in page.find_all('dd')[0].text
+        assert '206' in table_rows[0].find_all('td')[0].text
-        assert 'text messages sent' in page.find_all('dd')[0].text
 
-        assert 'Brine Shrimp' in page.find_all('dt')[1].text
+        assert 'Brine Shrimp' in table_rows[1].find_all('th')[0].text
-        assert 'Text message template' in page.find_all('dt')[1].text
+        assert 'Text message template' in table_rows[1].find_all('th')[0].text
-        assert '13' in page.find_all('dd')[1].text
+        assert '13' in table_rows[1].find_all('td')[0].text
-        assert 'text messages sent' in page.find_all('dd')[1].text
 
 
 def _test_dashboard_menu(mocker, app_, usr, service, permissions):