Make conversation page update using AJAX

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

app/main/views/conversation.py

@@ -1,4 +1,5 @@
 from flask import (
+    jsonify,
     render_template,
     url_for,
 )
@@ -20,11 +21,33 @@ def conversation(service_id, notification_id):
 
     return render_template(
         'views/conversations/conversation.html',
-        conversation=get_sms_thread(service_id, user_number=user_number),
         user_number=user_number,
+        partials=get_conversation_partials(service_id, user_number),
+        updates_url=url_for('.conversation_updates', service_id=service_id, notification_id=notification_id),
     )
 
 
+@main.route("/services/<service_id>/conversation/<notification_id>.json")
+@login_required
+@user_has_permissions('view_activity', admin_override=True)
+def conversation_updates(service_id, notification_id):
+
+    return jsonify(get_conversation_partials(
+        service_id,
+        get_user_number(service_id, notification_id)
+    ))
+
+
+def get_conversation_partials(service_id, user_number):
+
+    return {
+        'messages': render_template(
+            'views/conversations/messages.html',
+            conversation=get_sms_thread(service_id, user_number),
+        )
+    }
+
+
 def get_user_number(service_id, notification_id):
     try:
         user_number = service_api_client.get_inbound_sms_by_id(service_id, notification_id)['user_number']

app/templates/views/conversations/conversation.html

@@ -1,7 +1,9 @@
+{% from "components/ajax-block.html" import ajax_block %}
+
 {% extends "withnav_template.html" %}
 
 {% block service_page_title %}
-  Conversation
+  {{ user_number }}
 {% endblock %}
 
 {% block maincolumn_content %}
@@ -13,38 +15,13 @@
         {{ user_number }}
       </h1>
     </div>
-    {% for message in conversation %}
-      <div class="grid-row sms-message-row" id="n{{ message.id }}" tabindex="0">
-        {% if message.inbound %}
-          <div class="column-two-thirds sms-message-inbound">
-            {{ message.content | string }}
-            <div class="sms-message-status">
-              {{ message.created_at | format_datetime_relative }}
-            </div>
-          </div>
-        {% else %}
-          <div class="column-one-third">
-            &nbsp;
-          </div>
-          <div class="column-two-thirds">
-            {{ message.content | string }}
-            {% if message.status == 'delivered' %}
-              <div class="sms-message-status sms-message-status-outbound">
-                {{ message.created_at | format_datetime_relative }}
-              </div>
-            {% elif message.status in ['pending', 'sending', 'created'] %}
-              <div class="sms-message-status sms-message-status-outbound hint">
-                sending
-              </div>
-            {% else %}
-              <div class="sms-message-status sms-message-status-outbound table-field-error-label">
-                Failed (sent {{ message.created_at | format_datetime_relative }})
-              </div>
-            {% endif %}
-          </div>
-        {% endif %}
-      </div>
-    {% endfor %}
+
+    {{ ajax_block(
+      partials,
+      updates_url,
+      'messages',
+    ) }}
+
   </div>
 
 {% endblock %}

app/templates/views/conversations/messages.html

@@ -0,0 +1,34 @@
+<div class="ajax-block-container">
+  {% for message in conversation %}
+    <div class="grid-row sms-message-row" id="n{{ message.id }}" tabindex="0">
+      {% if message.inbound %}
+        <div class="column-two-thirds sms-message-inbound">
+          {{ message.content | string }}
+          <div class="sms-message-status">
+            {{ message.created_at | format_datetime_relative }}
+          </div>
+        </div>
+      {% else %}
+        <div class="column-one-third">
+          &nbsp;
+        </div>
+        <div class="column-two-thirds">
+          {{ message.content | string }}
+          {% if message.status == 'delivered' %}
+            <div class="sms-message-status sms-message-status-outbound">
+              {{ message.created_at | format_datetime_relative }}
+            </div>
+          {% elif message.status in ['pending', 'sending', 'created'] %}
+            <div class="sms-message-status sms-message-status-outbound hint">
+              sending
+            </div>
+          {% else %}
+            <div class="sms-message-status sms-message-status-outbound table-field-error-label">
+              Failed (sent {{ message.created_at | format_datetime_relative }})
+            </div>
+          {% endif %}
+        </div>
+      {% endif %}
+    </div>
+  {% endfor %}
+</div>

tests/app/main/views/test_conversation.py

@@ -1,3 +1,4 @@
+import json
 import pytest
 from bs4 import BeautifulSoup
 
@@ -95,7 +96,6 @@ def test_view_conversation(
         'main.conversation',
         service_id=SERVICE_ONE_ID,
         notification_id=fake_uuid,
-        _test_page_title=False,
     )
 
     messages = page.select('.sms-message-wrapper')
@@ -162,3 +162,27 @@ def test_view_conversation(
             normalize_spaces(messages[index].text),
             normalize_spaces(statuses[index].text),
         ) == expected
+
+
+def test_view_conversation_updates(
+    logged_in_client,
+    mocker,
+    fake_uuid,
+    mock_get_notification,
+):
+
+    mock_get_partials = mocker.patch(
+        'app.main.views.conversation.get_conversation_partials',
+        return_value={'messages': 'foo'}
+    )
+
+    response = logged_in_client.get(url_for(
+        'main.conversation_updates',
+        service_id=SERVICE_ONE_ID,
+        notification_id=fake_uuid,
+    ))
+
+    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, '07123 456789')