Make inbox page update using AJAX

Fairly self-explanatory. Uses the same pattern of breaking things up
into functions as the jobs page.

app/main/views/dashboard.py

@@ -143,6 +143,23 @@ def monthly(service_id):
 @user_has_permissions('view_activity', admin_override=True)
 def inbox(service_id):
 
+    return render_template(
+        'views/dashboard/inbox.html',
+        partials=get_inbox_partials(service_id),
+        updates_url=url_for('.inbox_updates', service_id=service_id),
+    )
+
+
+@main.route("/services/<service_id>/inbox.json")
+@login_required
+@user_has_permissions('view_activity', admin_override=True)
+def inbox_updates(service_id):
+
+    return jsonify(get_inbox_partials(service_id))
+
+
+def get_inbox_partials(service_id):
+
     if 'inbound_sms' not in current_service['permissions']:
         abort(403)
 
@@ -156,12 +173,12 @@ def inbox(service_id):
         }:
             messages_to_show.append(message)
 
-    return render_template(
+    return {'messages': render_template(
-        'views/dashboard/inbox.html',
+        'views/dashboard/_inbox_messages.html',
         messages=messages_to_show,
         count_of_messages=len(inbound_messages),
         count_of_users=len(messages_to_show),
-    )
+    )}
 
 
 def aggregate_usage(template_statistics, sort_key='count'):

app/templates/views/dashboard/_inbox_messages.html

@@ -0,0 +1,37 @@
+{% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading, row_heading %}
+{% from "components/message-count-label.html" import message_count_label %}
+
+<div class="ajax-block-container">
+  {% call(item, row_number) list_table(
+    messages,
+    caption="Inbox",
+    caption_visible=False,
+    empty_message='When users text your service’s phone number ({}) you’ll see the messages here'.format(current_service.sms_sender),
+    field_headings=[
+      'From',
+      'First two lines of message'
+    ],
+    field_headings_visible=False
+  ) %}
+    {% call field() %}
+      <a
+        class="file-list-filename"
+        href="{{ url_for('.conversation', service_id=current_service.id, notification_id=item.id) }}#n{{ item.id }}"
+      >
+        {{ item.user_number | format_phone_number_human_readable }}
+      </a>
+      <span class="file-list-hint">{{ item.content }}</span>
+    {% endcall %}
+    {% call field(align='right') %}
+      <span class="align-with-message-body">
+        {{ item.created_at | format_delta }}
+      </span>
+    {% endcall %}
+  {% endcall %}
+  {% if messages %}
+    <p class="table-show-more-link">
+      {{ count_of_messages }} message{{ '' if 1 == count_of_messages else 's' }}
+      from {{ count_of_users }} user{{ '' if 1 == count_of_users else 's' }}
+    </p>
+  {% endif %}
+</div>

app/templates/views/dashboard/inbox.html

@@ -1,5 +1,4 @@
-{% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading, row_heading %}
+{% from "components/ajax-block.html" import ajax_block %}
-{% from "components/message-count-label.html" import message_count_label %}
 
 {% extends "withnav_template.html" %}
 
@@ -12,38 +11,11 @@
   <h1 class="heading-large">
     Received text messages
   </h1>
-  <div>
+
-    {% call(item, row_number) list_table(
+  {{ ajax_block(
-      messages,
+    partials,
-      caption="Inbox",
+    updates_url,
-      caption_visible=False,
+    'messages',
-      empty_message='When users text your service’s phone number ({}) you’ll see the messages here'.format(current_service.sms_sender),
+  ) }}
-      field_headings=[
+
-        'From',
-        'First two lines of message'
-      ],
-      field_headings_visible=False
-    ) %}
-      {% call field() %}
-        <a
-          class="file-list-filename"
-          href="{{ url_for('.conversation', service_id=current_service.id, notification_id=item.id) }}#n{{ item.id }}"
-        >
-          {{ item.user_number | format_phone_number_human_readable }}
-        </a>
-        <span class="file-list-hint">{{ item.content }}</span>
-      {% endcall %}
-      {% call field(align='right') %}
-        <span class="align-with-message-body">
-          {{ item.created_at | format_delta }}
-        </span>
-      {% endcall %}
-    {% endcall %}
-    {% if messages %}
-      <p class="table-show-more-link">
-        {{ count_of_messages }} message{{ '' if 1 == count_of_messages else 's' }}
-        from {{ count_of_users }} user{{ '' if 1 == count_of_users else 's' }}
-      </p>
-    {% endif %}
-  </div>
 {% endblock %}

tests/app/main/views/test_dashboard.py

@@ -1,3 +1,4 @@
+import json
 from functools import partial
 import copy
 from unittest.mock import call, ANY
@@ -220,6 +221,30 @@ def test_anyone_can_see_inbox(
     )
 
 
+def test_view_inbox_updates(
+    logged_in_client,
+    service_one,
+    mocker,
+    mock_get_inbound_sms_with_no_messages,
+):
+
+    service_one['permissions'] = ['inbound_sms']
+
+    mock_get_partials = mocker.patch(
+        'app.main.views.dashboard.get_inbox_partials',
+        return_value={'messages': 'foo'},
+    )
+
+    response = logged_in_client.get(url_for(
+        'main.inbox_updates', service_id=SERVICE_ONE_ID,
+    ))
+
+    assert response.status_code == 200
+    assert json.loads(response.get_data(as_text=True)) == {'messages': 'foo'}
+
+    mock_get_partials.assert_called_once_with(SERVICE_ONE_ID)
+
+
 def test_should_show_recent_templates_on_dashboard(
     logged_in_client,
     mocker,