Make the broadcast dashboard update via AJAX

Same technique as we use for other pages that update via AJAX.

I’ve split the page up into separate chunks because the DiffDOM library
we use finds it easier to work out what’s changed when there are fewer
elements/a shallower tree.

app/main/views/broadcast.py

@@ -1,4 +1,4 @@
-from flask import abort, redirect, render_template, request, url_for
+from flask import abort, jsonify, redirect, render_template, request, url_for
 
 from app import current_service
 from app.main import main
@@ -11,11 +11,32 @@ from app.utils import service_has_permission, user_has_permissions
 @user_has_permissions()
 @service_has_permission('broadcast')
 def broadcast_dashboard(service_id):
-    broadcast_messages = BroadcastMessages(service_id)
     return render_template(
         'views/broadcast/dashboard.html',
-        live_broadcasts=broadcast_messages.with_status('broadcasting'),
-        previous_broadcasts=broadcast_messages.with_status('cancelled', 'completed'),
+        partials=get_broadcast_dashboard_partials(current_service.id)
+    )
+
+
+@main.route('/services/<uuid:service_id>/broadcast-dashboard.json')
+@user_has_permissions()
+@service_has_permission('broadcast')
+def broadcast_dashboard_updates(service_id):
+    return jsonify(get_broadcast_dashboard_partials(current_service.id))
+
+
+def get_broadcast_dashboard_partials(service_id):
+    broadcast_messages = BroadcastMessages(service_id)
+    return dict(
+        live_broadcasts=render_template(
+            'views/broadcast/partials/dashboard-table.html',
+            broadcasts=broadcast_messages.with_status('broadcasting'),
+            empty_message='You do not have any live broadcasts at the moment',
+        ),
+        previous_broadcasts=render_template(
+            'views/broadcast/partials/dashboard-table.html',
+            broadcasts=broadcast_messages.with_status('cancelled', 'completed'),
+            empty_message='You do not have any previous broadcasts',
+        ),
     )
 
 

app/navigation.py

@@ -353,6 +353,7 @@ class HeaderNavigation(Navigation):
         'who_can_use_notify',
         'who_its_for',
         'broadcast_dashboard',
+        'broadcast_dashboard_updates',
         'broadcast',
         'preview_broadcast_areas',
         'choose_broadcast_library',
@@ -373,6 +374,7 @@ class MainNavigation(Navigation):
     mapping = {
         'dashboard': {
             'broadcast_dashboard',
+            'broadcast_dashboard_updates',
             'conversation',
             'inbox',
             'monthly',
@@ -697,6 +699,7 @@ class CaseworkNavigation(Navigation):
     mapping = {
         'dashboard': {
             'broadcast_dashboard',
+            'broadcast_dashboard_updates',
         },
         'send-one-off': {
             'choose_from_contact_list',
@@ -1322,6 +1325,7 @@ class OrgNavigation(Navigation):
         'who_can_use_notify',
         'who_its_for',
         'broadcast_dashboard',
+        'broadcast_dashboard_updates',
         'broadcast',
         'preview_broadcast_areas',
         'choose_broadcast_library',

app/templates/views/broadcast/dashboard.html

@@ -1,47 +1,7 @@
-{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
+{% from 'components/ajax-block.html' import ajax_block %}
 
 {% extends "withnav_template.html" %}
 
-{% macro broadcast_table(broadcasts, empty_message) %}
-  <div class='dashboard-table ajax-block-container'>
-    {% call(item, row_number) list_table(
-      broadcasts|sort|reverse|list,
-      caption="Live broadcasts",
-      caption_visible=False,
-      empty_message=empty_message,
-      field_headings=[
-        'Template name',
-        'Status'
-      ],
-      field_headings_visible=False
-    ) %}
-      {% call row_heading() %}
-        <div class="file-list">
-          <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('.view_broadcast_message', service_id=current_service.id, broadcast_message_id=item.id) }}">{{ item.template_name }}</a>
-          <span class="file-list-hint-large">
-            To {{ item.initial_area_names|formatted_list(before_each='', after_each='') }}
-          </span>
-        </div>
-      {% endcall %}
-      {% call field(align='right') %}
-        {% if item.status == 'broadcasting' %}
-          <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0">
-            Live until {{ item.finishes_at|format_datetime_relative }}
-          </p>
-        {% elif item.status == 'cancelled' %}
-          <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
-            Stopped {{ item.cancelled_at|format_datetime_relative }}
-          </p>
-        {% else %}
-          <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
-            Finished {{ item.finishes_at|format_datetime_relative }}
-          </p>
-        {% endif %}
-      {% endcall %}
-    {% endcall %}
-  </div>
-{% endmacro %}
-
 {% block service_page_title %}
   Dashboard
 {% endblock %}
@@ -52,10 +12,18 @@
 
   <h2 class="heading-medium govuk-!-margin-bottom-2">Live broadcasts</h2>
 
-  {{ broadcast_table(live_broadcasts, 'You do not have any live broadcasts at the moment') }}
+  {{ ajax_block(
+    partials,
+    url_for('.broadcast_dashboard_updates', service_id=current_service.id),
+    'live_broadcasts'
+  ) }}
 
   <h2 class="heading-medium govuk-!-margin-bottom-2">Previous broadcasts</h2>
 
-  {{ broadcast_table(previous_broadcasts, 'You do not have any previous broadcasts') }}
+  {{ ajax_block(
+    partials,
+    url_for('.broadcast_dashboard_updates', service_id=current_service.id),
+    'previous_broadcasts'
+  ) }}
 
 {% endblock %}

app/templates/views/broadcast/partials/dashboard-table.html

@@ -0,0 +1,39 @@
+{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
+
+<div class='dashboard-table ajax-block-container'>
+  {% call(item, row_number) list_table(
+    broadcasts|sort|reverse|list,
+    caption="Live broadcasts",
+    caption_visible=False,
+    empty_message=empty_message,
+    field_headings=[
+      'Template name',
+      'Status'
+    ],
+    field_headings_visible=False
+  ) %}
+    {% call row_heading() %}
+      <div class="file-list">
+        <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('.view_broadcast_message', service_id=current_service.id, broadcast_message_id=item.id) }}">{{ item.template_name }}</a>
+        <span class="file-list-hint-large">
+          To {{ item.initial_area_names|formatted_list(before_each='', after_each='') }}
+        </span>
+      </div>
+    {% endcall %}
+    {% call field(align='right') %}
+      {% if item.status == 'broadcasting' %}
+        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0">
+          Live until {{ item.finishes_at|format_datetime_relative }}
+        </p>
+      {% elif item.status == 'cancelled' %}
+        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
+          Stopped {{ item.cancelled_at|format_datetime_relative }}
+        </p>
+      {% else %}
+        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
+          Finished {{ item.finishes_at|format_datetime_relative }}
+        </p>
+      {% endif %}
+    {% endcall %}
+  {% endcall %}
+</div>