New notifications (codesandbox#1823)

* Add support for new notifications

* Add event system

* Working version with buttons

* IImprovements

* Move app to new notifications

* Cleanup

* Tweak update notification

* Handle the timeAlive from s to ms

* Add build script for notifications

* Remove old component

* v1.0.5

* Publish and tweak icon location

* Update

* Fix build script

* Add dependency back

* Ignore missing common from the start

* Update snapshots

Author: CompuIves

package.json

@@ -8,8 +8,8 @@
     "build:prod": "NODE_OPTIONS=\"--max-old-space-size=4096\" lerna run build  --scope homepage --stream && lerna run build --scope app --stream && gulp",
     "build:embed": "lerna run build:embed --scope app --stream && gulp",
     "build:clean": "lerna run build:clean --scope app --scope homepage && rimraf www",
-    "build:deps": "lerna run build:dev --scope codesandbox-api && lerna run build:dev --scope @codesandbox/common && lerna run build:dev --scope vscode-textmate --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks",
-    "build:common": "lerna run build:dev --scope  @codesandbox/common --stream",
+    "build:deps": "lerna run build:dev --scope codesandbox-api --scope @codesandbox/notifications && lerna run build:dev --scope @codesandbox/common && lerna run build:dev --scope vscode-textmate --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks",
+    "build:common": "lerna run build:dev --scope @codesandbox/common --stream",
     "build:dynamic": "lerna run build --scope dynamic-pages --stream",
     "start": "yarn build:deps && lerna run start --scope app --stream",
     "start:fast": "lerna run start --scope app --stream",
@@ -46,7 +46,8 @@
       "packages/sandbox-hooks",
       "packages/sse-hooks",
       "packages/react-embed",
-      "packages/dynamic-pages"
+      "packages/dynamic-pages",
+      "packages/notifications"
     ],
     "nohoist": [
       "**/react-codemirror2",

packages/app/package.json

@@ -246,7 +246,7 @@
     "react-router-dom": "^4.3.1",
     "react-show": "^3.0.4",
     "react-split-pane": "^0.1.85",
-    "react-spring": "^8.0.4",
+    "react-spring": "^8.0.19",
     "react-stripe-elements": "^1.2.0",
     "react-tagsinput": "^3.19.0",
     "react-virtualized": "^9.19.1",

packages/app/src/app/components/CodeEditor/Monaco/define-theme.js

@@ -1,4 +1,6 @@
 import Color from 'color';
+import { notificationState } from '@codesandbox/common/lib/utils/notifications';
+import { NotificationStatus } from '@codesandbox/notifications';
 
 const sanitizeColor = color => {
   if (!color) {
@@ -93,12 +95,11 @@ const defineTheme = (monaco, theme) => {
       monaco.editor.setTheme('CodeSandbox');
     } catch (e) {
       console.error(e);
-      if (window.showNotification) {
-        window.showNotification(
-          `Problem initializing template in editor: ${e.message}`,
-          'error'
-        );
-      }
+
+      notificationState.addNotification({
+        message: `Problem initializing template in editor: ${e.message}`,
+        status: NotificationStatus.ERROR,
+      });
     }
   }
 };

packages/app/src/app/graphql/client.js

@@ -4,6 +4,8 @@ import { BatchHttpLink } from 'apollo-link-batch-http';
 import { setContext } from 'apollo-link-context';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 import { onError } from 'apollo-link-error';
+import { notificationState } from '@codesandbox/common/lib/utils/notifications';
+import { NotificationStatus } from '@codesandbox/notifications';
 
 const httpLink = new BatchHttpLink({
   uri: '/api/graphql',
@@ -34,15 +36,19 @@ const absintheAfterware = new ApolloLink((operation, forward) =>
 
 const errorHandler = onError(({ graphQLErrors, networkError }) => {
   if (graphQLErrors) {
-    if (window.showNotification) {
-      graphQLErrors.forEach(({ message }) => {
-        window.showNotification(message, 'error');
+    graphQLErrors.forEach(({ message }) => {
+      notificationState.addNotification({
+        message,
+        status: NotificationStatus.ERROR,
       });
-    }
+    });
   }
 
   if (networkError) {
-    window.showNotification(`Network Error: ${networkError}`, 'error');
+    notificationState.addNotification({
+      message: `Network Error: ${networkError}`,
+      status: NotificationStatus.ERROR,
+    });
   }
 });
 

packages/app/src/app/index.html

@@ -26,7 +26,7 @@
     <script>
       WebFont.load({
         google: {
-          families: ['Source Code Pro:500', 'Roboto:300,400,500,700', 'Poppins:300,400,600,700']
+          families: ['Source Code Pro:500', 'Roboto:300,400,500,700', 'Poppins:300,400,500,600,700']
         }
       });
     </script>

packages/app/src/app/index.js

@@ -15,6 +15,11 @@ import history from 'app/utils/history';
 import { client } from 'app/graphql/client';
 import registerServiceWorker from '@codesandbox/common/lib/registerServiceWorker';
 import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
+import {
+  notificationState,
+  convertTypeToStatus,
+} from '@codesandbox/common/lib/utils/notifications';
+import { NotificationStatus } from '@codesandbox/notifications';
 import 'normalize.css';
 import theme from '@codesandbox/common/lib/theme';
 import { isSafari } from '@codesandbox/common/lib/utils/platform';
@@ -73,21 +78,39 @@ function boot() {
 
     const rootEl = document.getElementById('root');
 
-    const showNotification = (message, type) =>
-      controller.getSignal('notificationAdded')({
-        type,
+    const showNotification = (message, type) => {
+      notificationState.addNotification({
         message,
+        status: convertTypeToStatus(type),
       });
+    };
 
     window.showNotification = showNotification;
 
     registerServiceWorker('/service-worker.js', {
       onUpdated: () => {
         debug('Updated SW');
         controller.getSignal('setUpdateStatus')({ status: 'available' });
+
+        notificationState.addNotification({
+          title: 'CodeSandbox Update Available',
+          message:
+            'We just installed a new version of CodeSandbox, refresh to update!',
+          status: NotificationStatus.SUCCESS,
+          sticky: true,
+          actions: [
+            {
+              primary: {
+                run: () => document.location.reload(),
+                title: 'Reload Page',
+              },
+            },
+          ],
+        });
       },
       onInstalled: () => {
         debug('Installed SW');
+
         showNotification(
           'CodeSandbox has been installed, it now works offline!',
           'success'

packages/app/src/app/pages/Dashboard/Content/routes/CreateTeam/index.js

@@ -6,6 +6,8 @@ import { Button } from '@codesandbox/common/lib/components/Button';
 import track from '@codesandbox/common/lib/utils/analytics';
 import history from 'app/utils/history';
 import { teamOverviewUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { notificationState } from '@codesandbox/common/lib/utils/notifications';
+import { NotificationStatus } from '@codesandbox/notifications';
 
 import { Container, Description, HeaderContainer } from '../../elements';
 import {
@@ -86,12 +88,10 @@ export default class CreateTeam extends React.PureComponent {
                   });
                 },
               }).then(({ data }) => {
-                if (window.showNotification) {
-                  window.showNotification(
-                    `Succesfully created team '${data.createTeam.name}'`,
-                    'success'
-                  );
-                }
+                notificationState.addNotification({
+                  message: `Succesfully created team '${data.createTeam.name}'`,
+                  status: NotificationStatus.SUCCESS,
+                });
 
                 history.push(teamOverviewUrl(data.createTeam.id));
               });

packages/app/src/app/pages/Dashboard/Content/routes/TeamView/RemoveTeamMember/index.js

@@ -4,6 +4,8 @@ import { Mutation } from 'react-apollo';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import history from 'app/utils/history';
 import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { NotificationStatus } from '@codesandbox/notifications';
+import { notificationState } from '@codesandbox/common/lib/utils/notifications';
 
 import { REMOVE_FROM_TEAM, LEAVE_TEAM } from '../../../../queries';
 
@@ -50,14 +52,13 @@ export default ({
           mutation={isOwnUser ? LEAVE_TEAM : REMOVE_FROM_TEAM}
           refetchQueries={isOwnUser ? ['TeamsSidebar'] : []}
           onCompleted={() => {
-            if (window.showNotification) {
-              window.showNotification(
-                isOwnUser
-                  ? 'Succesfully left the team'
-                  : 'Succesfully removed from team',
-                'success'
-              );
-            }
+            notificationState.addNotification({
+              message: isOwnUser
+                ? 'Succesfully left the team'
+                : 'Succesfully removed from team',
+              status: NotificationStatus.SUCCESS,
+            });
+
             history.push(dashboardUrl());
           }}
         >

packages/app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme.js

@@ -3,6 +3,8 @@ import JSON from 'json5';
 import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
 
 import themes from '@codesandbox/common/lib/themes';
+import { notificationState } from '@codesandbox/common/lib/utils/notifications';
+import { NotificationStatus } from '@codesandbox/notifications';
 
 const editorBackground = 'editor.background';
 const editorForeground = 'editor.foreground';
@@ -59,12 +61,10 @@ function fetchTheme(foundTheme) {
       } catch (e) {
         console.error(e);
 
-        if (window.showNotification) {
-          window.showNotification(
-            'We had trouble loading the theme, error: \n' + e.message,
-            'error'
-          );
-        }
+        notificationState.addNotification({
+          message: 'We had trouble loading the theme, error: \n' + e.message,
+          status: NotificationStatus.ERROR,
+        });
       }
       return theme;
     });
@@ -77,13 +77,12 @@ const findTheme = async (themeName, customTheme) => {
     } catch (e) {
       console.error(e);
 
-      if (window.showNotification) {
-        window.showNotification(
+      notificationState.addNotification({
+        message:
           'We had trouble parsing your custom VSCode Theme, error: \n' +
-            e.message,
-          'error'
-        );
-      }
+          e.message,
+        status: NotificationStatus.ERROR,
+      });
     }
   }