Move and refactor upgrade notification JS

CHANGELOG.txt

@@ -6,6 +6,7 @@ Changelog
 
  * Added `construct_page_listing_buttons` hook (Michael van Tellingen)
  * Added more detailed documentation and troubleshooting for installing OpenCV for feature detection (Daniele Procida)
+ * Move and refactor upgrade notification JS (Jonny Scholes)
  * Fix: Added line breaks to long filenames on multiple image / document uploader (Kevin Howbrook)
  * Fix: Added https support for Scribd oEmbed provider (Rodrigo)
  * Fix: Changed StreamField group labels color so labels are visible (Catherine Farman)

client/src/components/UpgradeNotification/index.js

@@ -0,0 +1,40 @@
+import { versionOutOfDate } from '../../utils/version';
+
+const initUpgradeNotification = () => {
+  const container = document.querySelector('[data-upgrade]');
+
+  if (!container) {
+    return;
+  }
+
+  /*
+  *   Expected JSON payload:
+  *   {
+  *       "version" : "1.2.3",    // Version number. Can only contain numbers and decimal point.
+  *       "url" : "https://wagtail.io"  // Absolute URL to page/file containing release notes or actual package. It's up to you.
+  *   }
+  */
+  const releasesUrl = 'https://releases.wagtail.io/latest.txt';
+  const currentVersion = container.dataset.wagtailVersion;
+
+  fetch(releasesUrl).then(response => {
+    if (response.status !== 200) {
+      // eslint-disable-next-line no-console
+      console.log(`Unexpected response from ${releasesUrl}. Status: ${response.status}`);
+      return false;
+    }
+    return response.json();
+  }).then(data => {
+    if (data && data.version && versionOutOfDate(data.version, currentVersion)) {
+      container.querySelector('[data-upgrade-version]').innerText = data.version;
+      container.querySelector('[data-upgrade-link]').setAttribute('href', data.url);
+      container.style.display = '';
+    }
+  })
+  .catch(err => {
+    // eslint-disable-next-line no-console
+    console.log(`Error fetching ${releasesUrl}. Error: ${err}`);
+  });
+};
+
+export { initUpgradeNotification };

client/src/index.js

@@ -4,25 +4,27 @@
  */
 
 import Button from './components/Button/Button';
+import Explorer, { ExplorerToggle, initExplorer } from './components/Explorer';
 import Icon from './components/Icon/Icon';
-import PublicationStatus from './components/PublicationStatus/PublicationStatus';
 import LoadingSpinner from './components/LoadingSpinner/LoadingSpinner';
 import Portal from './components/Portal/Portal';
+import PublicationStatus from './components/PublicationStatus/PublicationStatus';
 import Transition from './components/Transition/Transition';
-import Explorer, { ExplorerToggle, initExplorer } from './components/Explorer';
 import { initFocusOutline } from './utils/focus';
 import { initSubmenus } from './includes/initSubmenus';
+import { initUpgradeNotification } from './components/UpgradeNotification';
 
 export {
   Button,
-  Icon,
-  PublicationStatus,
-  LoadingSpinner,
-  Portal,
-  Transition,
   Explorer,
   ExplorerToggle,
+  Icon,
+  LoadingSpinner,
+  Portal,
+  PublicationStatus,
+  Transition,
   initExplorer,
   initFocusOutline,
   initSubmenus,
+  initUpgradeNotification,
 };

client/src/utils/utils.test.js

@@ -0,0 +1,18 @@
+import { versionOutOfDate } from './version';
+
+describe('wagtail package utils', () => {
+  describe('version.versionOutOfDate', () => {
+    it('compares 1.5 and 2.4 correctly', () => {
+      expect(versionOutOfDate('1.5', '2.4')).toBeFalsy();
+    });
+    it('compares 1.5.4 and 1.5.5 correctly', () => {
+      expect(versionOutOfDate('1.5.4', '1.5.5')).toBeFalsy();
+    });
+    it('compares 1.5 and 1.5 correctly', () => {
+      expect(versionOutOfDate('1.5', '1.5')).toBeFalsy();
+    });
+    it('compares 2.6a0 and 2.4 correctly', () => {
+      expect(versionOutOfDate('2.6a0', '2.4')).toBeTruthy();
+    });
+  });
+});

client/src/utils/version.js

@@ -0,0 +1,23 @@
+function compareVersion(versionA, versionB) {
+  const re = /(\.0)+[^\.]*$/;
+  const va = (versionA + '').replace(re, '').split('.');
+  const vb = (versionB + '').replace(re, '').split('.');
+  const len = Math.min(va.length, vb.length);
+  for (let i = 0; i < len; i++) {
+    const cmp = parseInt(va[i], 10) - parseInt(vb[i], 10);
+    if (cmp !== 0) {
+      return cmp;
+    }
+  }
+
+  return va.length - vb.length;
+}
+
+function versionOutOfDate(latestVersion, currentVersion) {
+  return compareVersion(latestVersion, currentVersion) > 0;
+}
+
+export {
+  compareVersion,
+  versionOutOfDate,
+};

docs/releases/2.7.rst

@@ -19,6 +19,7 @@ Other features
 
  * Added ``construct_page_listing_buttons`` hook (Michael van Tellingen)
  * Added more detailed documentation and troubleshooting for installing OpenCV for feature detection (Daniele Procida)
+ * Move and refactor upgrade notification JS (Jonny Scholes)
 
 
 Bug fixes

wagtail/admin/static_src/wagtailadmin/app/wagtailadmin.entry.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {
-  initExplorer,
   Icon,
   Portal,
+  initExplorer,
   initFocusOutline,
-  initSubmenus
+  initSubmenus,
+  initUpgradeNotification,
 } from 'wagtail-client';
 
 if (process.env.NODE_ENV === 'development') {
@@ -35,4 +36,5 @@ document.addEventListener('DOMContentLoaded', () => {
 
   initFocusOutline();
   initSubmenus();
+  initUpgradeNotification();
 });

wagtail/admin/static_src/wagtailadmin/js/upgrade_notify.js

@@ -1,48 +0,0 @@
-$(function() {
-    'use strict';
-
-    /*
-    *   Expected JSON payload:
-    *   {
-    *       "version" : "1.2.3",    // Version number. Can only contain numbers and decimal point.
-    *       "url" : "https://wagtail.io"  // Absolute URL to page/file containing release notes or actual package. It's up to you.
-    *   }
-    */
-
-    function cmpVersion(a, b) {
-        var i;
-        var cmp;
-        var len;
-        var re = /(\.0)+[^\.]*$/;
-
-        a = (a + '').replace(re, '').split('.');
-        b = (b + '').replace(re, '').split('.');
-        len = Math.min(a.length, b.length);
-        for (i = 0; i < len; i++) {
-            cmp = parseInt(a[i], 10) - parseInt(b[i], 10);
-            if (cmp !== 0) {
-                return cmp;
-            }
-        }
-
-        return a.length - b.length;
-    }
-
-    function gtVersion(a, b) {
-        return cmpVersion(a, b) > 0;
-    }
-
-    var releasesUrl = 'https://releases.wagtail.io/latest.txt';
-    var currentVersion = window.wagtailVersion;
-
-    $.getJSON(releasesUrl, function(data) {
-        try {
-            if (data.version && gtVersion(data.version, currentVersion)) {
-                var $container = $('.panel-upgrade-notification')
-                $('.newversion', $container).text(data.version);
-                $('.releasenotes-link', $container).attr('href', data.url);
-                $container.show();
-            }
-        } catch (e) {}
-    });
-});

wagtail/admin/templates/wagtailadmin/home/upgrade_notification.html

@@ -1,8 +1,5 @@
 {% load wagtailcore_tags static %}
 
-<div class="panel nice-padding panel-upgrade-notification" style="display:none">
-    <div class="help-block help-warning">Wagtail upgrade available. Your version: <strong>{% wagtail_version %}</strong>. New version: <strong class="newversion"></strong>. <a class="releasenotes-link" href="">Read the release notes.</a></div>
-
-    <script>window.wagtailVersion = "{% wagtail_version %}";</script>
-    <script src="{% static 'wagtailadmin/js/upgrade_notify.js' %}" async="true"></script>
+<div data-upgrade data-wagtail-version="{% wagtail_version %}" class="panel nice-padding panel-upgrade-notification" style="display:none">
+    <div class="help-block help-warning">Wagtail upgrade available. Your version: <strong>{% wagtail_version %}</strong>. New version: <strong data-upgrade-version></strong>. <a data-upgrade-link href="">Read the release notes.</a></div>
 </div>