Merge pull request #264 from riccardo-forina/new-version-notification

app/ui-react/packages/ui/src/Layout/ButtonLink.tsx

@@ -46,6 +46,7 @@ export const ButtonLink: React.FunctionComponent<IButtonLinkProps> = ({
       onClick={onClick}
       className={className}
       disabled={disabled || (!onClick && !href)}
+      {...props}
     >
       {children}
     </button>

app/ui-react/packages/ui/src/Shared/DndFileChooser.tsx

@@ -213,6 +213,7 @@ export class DndFileChooser extends React.Component<
     const notifications = rejectedFiles.map(file => ({
       key: file.name,
       message: this.props.onUploadRejected(file.name),
+      persistent: false,
       type: 'error' as INotificationType,
     }));
 

app/ui-react/packages/ui/src/Shared/Notifications.tsx

@@ -9,7 +9,8 @@ export type INotificationType = 'success' | 'info' | 'warning' | 'error';
 
 export interface INotification {
   key: string;
-  message: string;
+  message: React.ReactNode;
+  persistent: boolean;
   type: INotificationType;
 }
 
@@ -27,18 +28,22 @@ export class Notifications extends React.Component<INotificationsProps> {
           <TimedToastNotification
             key={notification.key}
             type={notification.type}
-            persistent={false}
+            persistent={notification.persistent}
             onDismiss={this.props.removeNotificationAction.bind(
               this,
               notification
             )}
             timerdelay={this.props.notificationTimerDelay}
           >
-            <Container
-              dangerouslySetInnerHTML={{
-                __html: notification.message,
-              }}
-            />
+            {typeof notification.message === 'string' ? (
+              <Container
+                dangerouslySetInnerHTML={{
+                  __html: notification.message,
+                }}
+              />
+            ) : (
+              <Container>{notification.message}</Container>
+            )}
           </TimedToastNotification>
         ))}
       </ToastNotificationList>

app/ui-react/syndesis/package.json

@@ -30,7 +30,8 @@
     "react-i18next": "^10.2.0",
     "react-loadable": "^5.5.0",
     "react-router": "^5.0.0",
-    "react-router-dom": "^5.0.0"
+    "react-router-dom": "^5.0.0",
+    "workbox-window": "^4.3.1"
   },
   "scripts": {
     "lint": "tslint -c ../tslint.json --project .",

app/ui-react/syndesis/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Syndesis",
+  "name": "Syndesis",
   "icons": [
     {
       "src": "favicon.ico",

app/ui-react/syndesis/src/app/UI.tsx

@@ -2,6 +2,7 @@ import { WithApiVersion } from '@syndesis/api';
 import {
   AppLayout,
   AppTopMenu,
+  ButtonLink,
   INotification,
   INotificationType,
   Notifications,
@@ -14,6 +15,7 @@ import { useState } from 'react';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
 import { Link, Route, Switch } from 'react-router-dom';
+import { Workbox } from 'workbox-window';
 import resolvers from '../modules/resolvers';
 import { PageNotFound, WithErrorBoundary } from '../shared';
 import { IAppRoute, IAppRoutes, IAppRouteWithChildrens } from './App';
@@ -39,12 +41,17 @@ export const UI: React.FunctionComponent<IAppUIProps> = ({ routes }) => {
   };
 
   const [notifications, setNotifications] = useState<INotification[]>([]);
-  const pushNotification = (msg: string, type: INotificationType) => {
+  const pushNotification = (
+    msg: React.ReactNode,
+    type: INotificationType,
+    persistent: boolean = false
+  ) => {
     setNotifications([
       ...notifications,
       {
         key: Date.now().toString(),
         message: msg,
+        persistent,
         type,
       },
     ]);
@@ -55,6 +62,47 @@ export const UI: React.FunctionComponent<IAppUIProps> = ({ routes }) => {
     );
   };
 
+  React.useEffect(() => {
+    let refreshNotificationDisplayed = false;
+    // tslint:disable
+    if ('serviceWorker' in navigator) {
+      const wb = new Workbox('/service-worker.js');
+
+      const refreshApp = () => {
+        wb.addEventListener('controlling', event => {
+          window.location.reload();
+        });
+        // Send a message telling the service worker to skip waiting.
+        // This will trigger the `controlling` event handler above.
+        wb.messageSW({ type: 'SKIP_WAITING' });
+      };
+
+      wb.addEventListener('waiting', event => {
+        if (!refreshNotificationDisplayed) {
+          refreshNotificationDisplayed = true;
+          pushNotification(
+            <>
+              <div className="pull-right toast-pf-action">
+                <ButtonLink
+                  onClick={refreshApp}
+                  as={'link'}
+                  style={{ padding: 0, border: 0 }}
+                >
+                  Reload
+                </ButtonLink>
+              </div>
+              A new version is available.
+            </>,
+            'warning',
+            true
+          );
+        }
+      });
+
+      wb.register();
+    }
+  }, []); // eslint-disable-line
+
   return (
     <UIContext.Provider
       value={{

app/ui-react/typings/workbox-window/index.d.ts

@@ -0,0 +1,46 @@
+declare module 'workbox-window' {
+  class Workbox {
+    constructor(scriptURL: string, registerOptions?: object);
+
+    register(immediate?: boolean): Promise<any>;
+    active(): Promise<ServiceWorker>;
+    controlling(): Promise<ServiceWorker>;
+    getSW(): Promise<ServiceWorker>;
+    messageSW(data: object): Promise<object>;
+
+    addEventListener(event: 'message', callback: (data: IWorkboxEventMessage) => void): void;
+    addEventListener(event: 'installed', callback: (data: IWorkboxEvent) => void): void;
+    addEventListener(event: 'waiting', callback: (data: IWorkboxEventWaiting) => void): void;
+    addEventListener(event: 'controlling', callback: (data: IWorkboxEvent) => void): void;
+    addEventListener(event: 'activated', callback: (data: IWorkboxEvent) => void): void;
+    addEventListener(event: 'redundant', callback: (data: IWorkboxEvent) => void): void;
+    addEventListener(event: 'externalinstalled', callback: (data: IWorkboxEventExternal) => void): void;
+    addEventListener(event: 'externalwaiting', callback: (data: IWorkboxEventExternal) => void): void;
+    addEventListener(event: 'externalactivated', callback: (data: IWorkboxEventExternal) => void): void;
+  }
+
+  type WorkboxEvent = 'message' | 'installed' | 'waiting' | 'controlling' | 'activated' | 'redundant' | 'externalinstalled' | 'externalwaiting' | 'externalactivated';
+
+  interface IWorkboxEventBase {
+    originalEvent: Event;
+    type: WorkboxEvent;
+    target: Workbox;
+  }
+
+  interface IWorkboxEventMessage extends IWorkboxEventBase {
+    data: any;
+  }
+
+  interface IWorkboxEvent extends IWorkboxEventBase {
+    sw: ServiceWorker;
+    isUpdate: boolean|undefined;
+  }
+
+  interface IWorkboxEventWaiting extends IWorkboxEvent {
+    wasWaitingBeforeRegister: boolean|undefined;
+  }
+
+  interface IWorkboxEventExternal extends IWorkboxEventBase {
+    sw: ServiceWorker;
+  }
+}

app/ui-react/typings/workbox-window/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@types/workbox-window",
+  "version": "1.0.0",
+  "license": "MIT"
+}