Merge pull request #1360 from alphagov/ajax-conversation-page

Make conversation and inbox pages update using AJAX

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/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/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>

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 %}

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')

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
@@ -188,12 +189,17 @@ def test_empty_inbox(
     )
 
 
+@pytest.mark.parametrize('endpoint', [
+    'main.inbox',
+    'main.inbox_updates',
+])
 def test_inbox_not_accessible_to_service_without_permissions(
     logged_in_client,
     service_one,
+    endpoint,
 ):
     service_one['permissions'] = []
-    response = logged_in_client.get(url_for('main.inbox', service_id=SERVICE_ONE_ID))
+    response = logged_in_client.get(url_for(endpoint, service_id=SERVICE_ONE_ID))
 
     assert response.status_code == 403
 
@@ -220,6 +226,28 @@ def test_anyone_can_see_inbox(
     )
 
 
+def test_view_inbox_updates(
+    logged_in_client,
+    service_one,
+    mocker,
+    mock_get_inbound_sms_with_no_messages,
+):
+
+    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,