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(
-        'views/dashboard/inbox.html',
+    return {'messages': render_template(
+        '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/message-count-label.html" import message_count_label %}
+{% from "components/ajax-block.html" import ajax_block %}
 
 {% extends "withnav_template.html" %}
 
@@ -12,38 +11,11 @@
   <h1 class="heading-large">
     Received text messages
   </h1>
-  <div>
-    {% 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>
+
+  {{ ajax_block(
+    partials,
+    updates_url,
+    'messages',
+  ) }}
+
 {% endblock %}