Add dialog to notify user of new version

frontend/src/components/header/index.js

@@ -11,6 +11,7 @@ import { ExternalLinkIcon } from '../svgIcons';
 import { Dropdown } from '../dropdown';
 import { LocaleSelector } from '../localeSelect';
 import { Button } from '../button';
+import { UpdateTM } from '../updateTM';
 import { BurgerMenu } from './burgerMenu';
 import { TopNavLink } from './NavLink';
 import { SignUp } from './signUp';
@@ -222,6 +223,7 @@ class Header extends React.Component {
     return (
       // Validate that user has set is email.
       <header className="w-100 bb b--grey-light">
+        <UpdateTM />
         {this.checkUserEmail()}
         {this.props.showOrgBar && (
           <div className="cf ph2 red pt3 pb2 bb b--grey-light">

frontend/src/components/messages.js

@@ -74,4 +74,16 @@ export default defineMessages({
     id: 'project.typesOfMapping.pointsOfInterest',
     defaultMessage: 'Points of interest',
   },
+  newVersionAvailable: {
+    id: 'serviceWorker.dialog.newVersion',
+    defaultMessage: 'There is a new Tasking Manager version available!',
+  },
+  update: {
+    id: 'serviceWorker.dialog.update',
+    defaultMessage: 'Update',
+  },
+  remindMeLater: {
+    id: 'serviceWorker.dialog.remindMeLater',
+    defaultMessage: 'Remind me later',
+  },
 });

frontend/src/components/taskSelection/index.js

@@ -389,7 +389,7 @@ export function TaskSelection({ project, type, loading }: Object) {
           </ReactPlaceholder>
         </div>
       </div>
-      <div className="cf w-100 bt b--grey-light fixed bottom-0 left-0 z-5">
+      <div className="cf w-100 bt b--grey-light fixed bottom-0 left-0 z-4">
         <ReactPlaceholder
           showLoadingAnimation={true}
           rows={3}

frontend/src/components/updateTM.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation } from '@reach/router';
+import { FormattedMessage } from 'react-intl';
+
+import messages from './messages';
+import { Button } from './button';
+
+const updateServiceWorker = (registration) => {
+  if (registration && registration.waiting) {
+    let preventReloadLoop;
+    navigator.serviceWorker.addEventListener('controllerchange', (event) => {
+      if (preventReloadLoop) {
+        return;
+      }
+      preventReloadLoop = true;
+      window.location.reload();
+    });
+
+    registration.waiting.postMessage({ type: 'SKIP_WAITING' });
+  }
+};
+
+export const UpdateTM = () => {
+  const location = useLocation();
+  const [registration, setRegistration] = useState(null);
+  const [close, setClose] = useState(false);
+
+  const isMapOrValidationPage =
+    location.pathname.startsWith('/projects/') &&
+    (location.pathname.endsWith('/map/') || location.pathname.endsWith('/validate/'));
+
+  useEffect(() => {
+    const handleServiceWorkerEvent = (e) => setRegistration(e.detail.registration);
+    document.addEventListener('onNewServiceWorker', handleServiceWorkerEvent);
+    return () => document.removeEventListener('onNewServiceWorker', handleServiceWorkerEvent);
+  }, []);
+  return (
+    <>
+      {!isMapOrValidationPage && !close && registration !== null && (
+        <div className="fixed left-1 bottom-1 shadow-2 ph3 pt2 pb3 br1 bg-white z-5 blue-dark fw6 ba b--grey-light">
+          <p className="mb3 mt2">
+            <FormattedMessage {...messages.newVersionAvailable} />
+          </p>
+          <Button className="bg-red white" onClick={() => updateServiceWorker(registration)}>
+            <FormattedMessage {...messages.update} />
+          </Button>
+          <Button className="bg-white blue-dark" onClick={() => setClose(true)}>
+            <FormattedMessage {...messages.remindMeLater} />
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};

frontend/src/index.js

@@ -47,7 +47,7 @@ if (
   ENABLE_SERVICEWORKER === 'true' ||
   ENABLE_SERVICEWORKER === true
 ) {
-  serviceWorkerRegistration.register();
+  serviceWorkerRegistration.register({ onUpdate: serviceWorkerRegistration.onServiceWorkerUpdate });
 } else {
   serviceWorkerRegistration.unregister();
 }

frontend/src/locales/en.json

@@ -142,6 +142,9 @@
   "project.typesOfMapping.waterways": "Waterways",
   "project.typesOfMapping.other": "Other",
   "project.typesOfMapping.pointsOfInterest": "Points of interest",
+  "serviceWorker.dialog.newVersion": "There is a new Tasking Manager version available!",
+  "serviceWorker.dialog.update": "Update",
+  "serviceWorker.dialog.remindMeLater": "Remind me later",
   "notifications.mainSection.title": "Notifications",
   "notifications.filter.all": "All",
   "notifications.filter.messages": "Messages",

frontend/src/serviceWorkerRegistration.js

@@ -135,3 +135,8 @@ export function unregister() {
       });
   }
 }
+
+export function onServiceWorkerUpdate(registration) {
+  const event = new CustomEvent('onNewServiceWorker', { detail: { registration } });
+  document.dispatchEvent(event);
+}