Fix overlapping text on tables of notifications

This commit changes the tables of notifications from 3 columns to two
columns. This is so the text has more room, so it doesn’t start
overlapping.

It also makes sure that if the recipient gets really long that it will
be cut off with an ellipsis, rather than overlapping…

I hypothesize that if a notification fails you probably don’t care when
it failed, just that it failed.

app/__init__.py

@@ -116,6 +116,7 @@ def create_app():
     application.add_template_filter(format_date_normal)
     application.add_template_filter(format_date_short)
     application.add_template_filter(format_notification_status)
+    application.add_template_filter(format_notification_status_with_time)
     application.add_template_filter(format_notification_status_as_field_status)
     application.add_template_filter(format_notification_status_as_url)
 
@@ -281,6 +282,14 @@ def format_notification_status(status, template_type):
     }.get(template_type).get(status, status)
 
 
+def format_notification_status_with_time(status, template_type, when):
+    return {
+        'delivered': 'Delivered {}'.format(when),
+        'sending': 'Sending since {}'.format(when),
+        'created': 'Sending since {}'.format(when)
+    }.get(status, format_notification_status(status, template_type))
+
+
 def format_notification_status_as_field_status(status):
     return {
         'failed': 'error',

app/assets/stylesheets/components/table.scss

@@ -40,7 +40,8 @@
       width: 52.5%;
       font-weight: normal;
 
-      .hint {
+      .hint,
+      p {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

app/templates/partials/jobs/notifications.html

@@ -43,17 +43,13 @@
         empty_message="No messages to show",
         field_headings=[
           'Recipient',
-          'Time',
           'Status'
         ],
         field_headings_visible=False
       ) %}
         {% call row_heading() %}
-          {{ item.to }}
+          <p>{{ item.to }}</p>
         {% endcall %}
-        {{ date_field(
-          (item.updated_at or item.created_at)|format_datetime_short
-        ) }}
         {% call field(
           align='right',
           status=item.status|format_notification_status_as_field_status
@@ -61,7 +57,10 @@
           {% if item.status|format_notification_status_as_url %}
             <a href="{{ item.status|format_notification_status_as_url }}">
           {% endif %}
-          {{ item.status|format_notification_status(item.template.template_type) }}
+          {{ item.status|format_notification_status_with_time(
+            item.template.template_type,
+            (item.updated_at or item.created_at)|format_datetime_short
+          ) }}
           {% if item.status|format_notification_status_as_url %}
             </a>
           {% endif %}

app/templates/views/notifications.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, date_field %}
+{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_field %}
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/pill.html" import pill %}
@@ -50,7 +50,7 @@
       caption="Recent activity",
       caption_visible=False,
       empty_message='No messages found',
-      field_headings=['Recipient', 'Started', 'Status'],
+      field_headings=['Recipient', 'Status'],
       field_headings_visible=False
     ) %}
 
@@ -68,15 +68,17 @@
         </p>
       {% endcall %}
 
-      {{ date_field(
-        (item.updated_at or item.created_at)|format_datetime_short
-      ) }}
-
-      {% call field(status=item.status|format_notification_status_as_field_status, align='right') %}
+      {% call field(
+        align='right',
+        status=item.status|format_notification_status_as_field_status
+      ) %}
         {% if item.status|format_notification_status_as_url %}
           <a href="{{ item.status|format_notification_status_as_url }}">
         {% endif %}
-        {{ item.status|format_notification_status(item.template.template_type) }}
+        {{ item.status|format_notification_status_with_time(
+          item.template.template_type,
+          (item.updated_at or item.created_at)|format_datetime_short
+        ) }}
         {% if item.status|format_notification_status_as_url %}
           </a>
         {% endif %}

tests/app/main/views/test_jobs.py

@@ -78,7 +78,7 @@ def test_should_show_page_for_one_job(
             '{}: Your vehicle tax is about to expire'.format(service_one['name'])
         )
         assert ' '.join(page.find('tbody').find('tr').text.split()) == (
-            '07123456789 1 January at 11:10am Delivered'
+            '07123456789 Delivered 1 January at 11:10am'
         )
         assert page.find('div', {'data-key': 'notifications'})['data-resource'] == url_for(
             'main.view_job_updates',