Merge pull request #512 from alphagov/ajax-patching

Patch update sections of the page on AJAX

app/assets/javascripts/updateContent.js

@@ -4,6 +4,8 @@
   GOVUK.timeCache = {};
   GOVUK.resultCache = {};
 
+  var dd = new diffDOM();
+
   let getter = function(resource, interval, render) {
 
     if (
@@ -21,8 +23,11 @@
 
   };
 
-  let poller = (resource, key, component, interval) => () => getter(
+  let poller = (resource, key, $component, interval) => () => getter(
-    resource, interval, response => component.html(response[key])
+    resource, interval, response => dd.apply(
+      $component.get(0),
+      dd.diff($component.get(0), $(response[key]).get(0))
+    )
   );
 
   Modules.UpdateContent = function() {

app/templates/partials/jobs/count.html

@@ -1,4 +1,14 @@
 {% from "components/big-number.html" import big_number %}
+
+<div
+  {% if not finished_at %}
+    data-module="update-content"
+    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
+    data-key="counts"
+    aria-live="polite"
+  {% endif %}
+>
+
   <ul class="grid-row job-totals">
     <li class="column-one-quarter">
       {{ big_number(
@@ -11,3 +21,5 @@
       )}}
     </li>
   </ul>
+
+</div>

app/templates/partials/jobs/notifications.html

@@ -1,5 +1,15 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading %}
 
+<div
+  {% if not finished_at %}
+    data-module="update-content"
+    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
+    data-key="notifications"
+    aria-live="polite"
+  {% endif %}
+>
+
+  <div>
     {% call(item, row_number) list_table(
       notifications,
       caption=uploaded_file_name,
@@ -20,3 +30,6 @@
         {{ item.status|title }} at {{ item.sent_at|format_time }}
       {% endcall %}
     {% endcall %}
+  </div>
+
+</div>

app/templates/partials/jobs/status.html

@@ -1,3 +1,12 @@
+<div
+  {% if not finished_at %}
+    data-module="update-content"
+    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
+    data-key="status"
+    aria-live="polite"
+  {% endif %}
+>
+
   {% if finished_at %}
     <p class='heading-small'>
       Finished {{ finished_at|format_datetime }}
@@ -7,3 +16,5 @@
       Started {{ uploaded_at|format_datetime }}
     </p>
   {% endif %}
+
+</div>

app/templates/views/dashboard/dashboard.html

@@ -18,13 +18,6 @@
       {% include 'views/dashboard/no-permissions-banner.html' %}
     {% endif %}
 
-      <div
-        data-module="update-content"
-        data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
-        data-key="today"
-        data-interval-seconds="10"
-      >
     {% include 'views/dashboard/today.html' %}
-      </div>
 
 {% endblock %}

app/templates/views/dashboard/today.html

@@ -1,5 +1,12 @@
 {% from "components/big-number.html" import big_number_with_status %}
 
+<div
+  data-module="update-content"
+  data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
+  data-key="today"
+  data-interval-seconds="2"
+  aria-live="polite"
+>
   <h2 class="heading-medium">
     In the last 7 days
   </h2>
@@ -31,3 +38,4 @@
   <p class='table-show-more-link'>
     <a href="{{ url_for('.template_history', service_id=current_service.id) }}">See all templates used this year</a>
   </p>
+</div>

app/templates/views/jobs/job.html

@@ -30,40 +30,10 @@
       )}}
     {% endif %}
 
-    {% if not finished_at %}
-      <div
-        data-module="update-content"
-        data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
-        data-key="status"
-      >
-    {% endif %}
     {% include 'partials/jobs/status.html' %}
-    {% if not finished_at %}
-      </div>
-    {% endif %}
 
-    {% if not finished_at %}
-      <div
-        data-module="update-content"
-        data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
-        data-key="counts"
-      >
-    {% endif %}
     {% include 'partials/jobs/count.html' %}
-    {% if not finished_at %}
-      </div>
-    {% endif %}
 
-    {% if not finished_at %}
-      <div
-        data-module="update-content"
-        data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
-        data-key="notifications"
-      >
-    {% endif %}
     {% include 'partials/jobs/notifications.html' %}
-    {% if not finished_at %}
-      </div>
-    {% endif %}
 
 {% endblock %}

gulpfile.babel.js

@@ -68,7 +68,8 @@ gulp.task('javascripts', () => gulp
   .pipe(plugins.uglify())
   .pipe(plugins.addSrc.prepend([
     paths.npm + 'jquery/dist/jquery.min.js',
-    paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js'
+    paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
+    paths.npm + 'diff-dom/diffDOM.js'
   ]))
   .pipe(plugins.concat('all.js'))
   .pipe(gulp.dest(paths.dist + 'javascripts/'))

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "babel-core": "6.3.26",
     "babel-preset-es2015": "6.3.13",
+    "diff-dom": "2.0.3",
     "govuk-elements-sass": "1.1.1",
     "govuk_frontend_toolkit": "4.6.0",
     "govuk_template_jinja": "https://github.com/alphagov/govuk_template/releases/download/v0.17.1/jinja_govuk_template-0.17.1.tgz",