Show update notification

Author: CompuIves

packages/app/src/app/index.js

@@ -78,7 +78,17 @@ requirePolyfills().then(() => {
       message,
     });
 
-  registerServiceWorker('/service-worker.js', showNotification);
+  registerServiceWorker('/service-worker.js', {
+    onUpdate: () => {
+      controller.getSignal('setUpdateStatus')({ status: 'available' });
+    },
+    onInstalled: () => {
+      showNotification(
+        'CodeSandbox has been installed, it now works offline.',
+        'success'
+      );
+    },
+  });
 
   try {
     render(

packages/app/src/app/pages/Sandbox/Editor/Header/UpdateFound/elements.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+export const UpdateMessage = styled.div`
+  color: white;
+  border-radius: 2px;
+  font-size: 0.75rem;
+  width: 100px;
+  text-align: center;
+  padding: 0.5rem 0.75rem;
+
+  cursor: pointer;
+
+  &::after {
+    content: 'Update Available!';
+  }
+
+  &:hover {
+    &::after {
+      content: 'Click to Refresh';
+    }
+  }
+`;
+
+export const UpdateContainer = styled.div`
+  cursor: pointer;
+
+  &:hover {
+    > #update-message {
+      &::after {
+        content: 'Click to Refresh' !important;
+      }
+    }
+  }
+`;

packages/app/src/app/pages/Sandbox/Editor/Header/UpdateFound/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import Tooltip from 'common/components/Tooltip';
+import RefreshIcon from 'react-icons/lib/md/refresh';
+
+import { UpdateContainer, UpdateMessage } from './elements';
+
+export default class UpdateFound extends React.PureComponent {
+  state = {
+    showTooltipManually: true,
+  };
+
+  componentDidMount() {
+    this.timeout = setTimeout(() => {
+      this.setState({ showTooltipManually: false });
+    }, 10000);
+  }
+
+  componentWillUnmount() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  }
+
+  render() {
+    return (
+      <UpdateContainer {...this.props}>
+        <Tooltip
+          theme="update"
+          html={
+            <UpdateMessage
+              id="update-message"
+              onClick={() => document.location.reload()}
+            />
+          }
+          open={this.state.showTooltipManually}
+          trigger={
+            this.state.showTooltipManually ? 'manual' : 'mouseenter focus'
+          }
+          arrow
+          distance={15}
+        >
+          <RefreshIcon />
+        </Tooltip>
+      </UpdateContainer>
+    );
+  }
+}

packages/app/src/app/pages/Sandbox/Editor/Header/index.js

@@ -17,13 +17,16 @@ import PatronBadge from '-!svg-react-loader!common/utils/badges/svg/patron-4.svg
 import Margin from 'common/components/spacing/Margin';
 import HeaderSearchBar from 'app/components/HeaderSearchBar';
 import UserMenu from 'app/pages/common/UserMenu';
+import theme from 'common/theme';
 
 import Logo from './Logo';
 import Action from './Action';
 
 import { Container, Right, Left } from './elements';
 
-function Header({ store, signals }) {
+import UpdateFound from './UpdateFound';
+
+const Header = ({ store, signals }) => {
   const sandbox = store.editor.currentSandbox;
 
   return (
@@ -93,6 +96,18 @@ function Header({ store, signals }) {
           <HeaderSearchBar />
         </div>
 
+        {store.updateStatus === 'available' && (
+          <Action
+            onClick={() => document.location.reload()}
+            Icon={UpdateFound}
+            style={{
+              color: theme.green(),
+              fontSize: '1rem',
+            }}
+            tooltip="Update Available! Click to Refresh."
+          />
+        )}
+
         {!store.isLoggedIn ||
           (!store.isPatron && (
             <Action
@@ -151,6 +166,6 @@ function Header({ store, signals }) {
       </Right>
     </Container>
   );
-}
+};
 
 export default inject('signals', 'store')(observer(Header));

packages/app/src/app/store/index.js

@@ -54,6 +54,7 @@ export default Module({
     uploadedFiles: null,
     maxStorage: 0,
     usedStorage: 0,
+    updateStatus: null,
   },
   getters: {
     isPatron,
@@ -84,6 +85,7 @@ export default Module({
     signInGithubClicked: sequences.signInGithub,
     signOutClicked: sequences.signOut,
     signOutGithubIntegration: sequences.signOutGithubIntegration,
+    setUpdateStatus: sequences.setUpdateStatus,
   },
   catch: [[errors.AuthenticationError, sequences.showAuthenticationError]],
   modules: {

packages/app/src/app/store/model.js

@@ -75,4 +75,5 @@ export default {
   ),
   maxStorage: types.number,
   usedStorage: types.number,
+  updateStatus: types.maybe(types.string),
 };

packages/app/src/app/store/sequences.js

@@ -319,3 +319,5 @@ export const loadSandbox = factories.withLoadApp([
   },
   set(state`editor.isLoading`, false),
 ]);
+
+export const setUpdateStatus = [set(state`updateStatus`, props`status`)];

packages/app/src/sandbox/index.js

@@ -31,7 +31,7 @@ function getId() {
 }
 
 requirePolyfills().then(() => {
-  registerServiceWorker('/sandbox-service-worker.js');
+  registerServiceWorker('/sandbox-service-worker.js', {});
 
   function sendReady() {
     dispatch({ type: 'initialized' });

packages/common/components/Tooltip.js

@@ -1,6 +1,7 @@
 import { injectGlobal } from 'styled-components';
 import 'react-tippy/dist/tippy.css';
 import { Tooltip, withTooltip } from 'react-tippy';
+import theme from 'common/theme';
 
 // eslint-disable-next-line
 injectGlobal`
@@ -10,6 +11,16 @@ injectGlobal`
   .tippy-tooltip [x-circle] {
     background-color: rgb(21, 24, 25) !important;
   }
+
+  .tippy-tooltip.update-theme {
+    .arrow-regular {
+      border-bottom: 7px solid ${theme.green()} !important;
+    }
+
+    background-color: ${theme.green()};
+    border-radius: 2px;
+    padding: 0 !important;
+  }
 `;
 
 export default Tooltip;

packages/common/registerServiceWorker.js

@@ -20,7 +20,7 @@ const isLocalhost = Boolean(
 
 const isHttp = Boolean(window.location.protocol === 'http:');
 
-export default function register(swUrl, sendNotification) {
+export default function register(swUrl, { onUpdate, onInstalled }) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
@@ -34,7 +34,7 @@ export default function register(swUrl, sendNotification) {
     window.addEventListener('load', () => {
       if (!isLocalhost && !isHttp) {
         // It's neither localhost nor http. Just register service worker
-        registerValidSW(swUrl, sendNotification);
+        registerValidSW(swUrl, { onUpdate, onInstalled });
       } else if (isLocalhost) {
         // This is running on localhost. Lets check if a service worker still exists or not.
         checkValidServiceWorker(swUrl);
@@ -43,7 +43,7 @@ export default function register(swUrl, sendNotification) {
   }
 }
 
-function registerValidSW(swUrl, sendNotification) {
+function registerValidSW(swUrl, { onUpdate, onInstalled }) {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
@@ -56,21 +56,15 @@ function registerValidSW(swUrl, sendNotification) {
               // the fresh content will have been added to the cache.
               // It's the perfect time to display a "New content is
               // available; please refresh." message in your web app.
-              if (sendNotification) {
-                sendNotification(
-                  'CodeSandbox received an update, refresh to see it!',
-                  'notice'
-                );
+              if (onUpdate) {
+                onUpdate();
               }
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              if (sendNotification) {
-                sendNotification(
-                  'CodeSandbox has been cached, it now works offline.',
-                  'success'
-                );
+              if (onInstalled) {
+                onInstalled();
               }
             }
           } else if (installingWorker.state === 'redundant') {