Support VSCode actions in new notification system

CompuIves · CompuIves · commit bd288adea539 · 2019-05-01T15:21:35.000+02:00
diff --git a/packages/app/config/webpack.common.js b/packages/app/config/webpack.common.js
@@ -479,7 +479,7 @@ module.exports = {
       [
         {
           from: '../../standalone-packages/vscode-editor/release/min/vs',
-          to: 'public/vscode20/vs',
+          to: 'public/vscode21/vs',
           force: true,
         },
         {
diff --git a/packages/app/config/webpack.prod.js b/packages/app/config/webpack.prod.js
@@ -150,7 +150,7 @@ module.exports = merge(commonConfig, {
           },
         },
         {
-          urlPattern: /\/vscode20/,
+          urlPattern: /\/vscode21/,
           handler: 'cacheFirst',
           options: {
             cache: {
diff --git a/packages/app/src/app/index.html b/packages/app/src/app/index.html
@@ -68,12 +68,12 @@
       }
     </script>
 
-    <link data-name="/public/vscode20/vs/editor/editor.main"
+    <link data-name="/public/vscode21/vs/editor/editor.main"
       rel="preload"
       as="style"
-      href="/public/vscode20/vs/editor/codesandbox.editor.main.css">
+      href="/public/vscode21/vs/editor/codesandbox.editor.main.css">
     </link>
-    <link rel="preload" as="script" href="/public/vscode20/vs/editor/codesandbox.editor.main.js"></link>
+    <link rel="preload" as="script" href="/public/vscode21/vs/editor/codesandbox.editor.main.js"></link>
   </head>
   <body style="margin: 0; padding: 0;">
     <!-- Google Tag Manager (noscript) -->
diff --git a/packages/app/src/app/index.js b/packages/app/src/app/index.js
@@ -98,14 +98,14 @@ function boot() {
             'We just installed a new version of CodeSandbox, refresh to update!',
           status: NotificationStatus.SUCCESS,
           sticky: true,
-          actions: [
-            {
-              primary: {
+          actions: {
+            primary: [
+              {
                 run: () => document.location.reload(),
-                title: 'Reload Page',
+                label: 'Reload Page',
               },
-            },
-          ],
+            ],
+          },
         });
       },
       onInstalled: () => {
diff --git a/packages/app/src/app/store/sequences.js b/packages/app/src/app/store/sequences.js
@@ -3,6 +3,10 @@ import { when, push, unset, set, equals } from 'cerebral/operators';
 import { state, props } from 'cerebral/tags';
 
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import {
+  notificationState,
+  convertTypeToStatus,
+} from '@codesandbox/common/lib/utils/notifications';
 
 import * as actions from './actions';
 import * as factories from './factories';
diff --git a/packages/app/src/app/vscode/index.ts b/packages/app/src/app/vscode/index.ts
@@ -1,6 +1,11 @@
 import { KeyCode, KeyMod } from './keyCodes';
 import bootstrap from './dev-bootstrap';
 import { MenuId } from './menus';
+import {
+  notificationState,
+  convertTypeToStatus,
+} from '@codesandbox/common/lib/utils/notifications';
+import { NotificationMessage } from '@codesandbox/notifications/lib/state';
 
 interface IServiceCache {
   [serviceName: string]: any;
@@ -303,6 +308,18 @@ class VSCodeManager {
     });
   }
 
+  addNotification(
+    message: string,
+    type: 'warning' | 'notice' | 'error' | 'success',
+    notification: NotificationMessage
+  ) {
+    notificationState.addNotification({
+      message,
+      status: convertTypeToStatus(type),
+      ...notification,
+    });
+  }
+
   /**
    * Initialize the base VSCode editor, this includes registering all the services in VSCode.
    */
@@ -364,7 +381,7 @@ class VSCodeManager {
       container,
       {
         codesandboxService: i =>
-          new SyncDescriptor(CodeSandboxService, [this.controller]),
+          new SyncDescriptor(CodeSandboxService, [this.controller, this]),
         codesandboxConfigurationUIService: i =>
           new SyncDescriptor(CodeSandboxConfigurationUIService, [
             customEditorAPI,
diff --git a/packages/app/src/app/vscode/metadata.ts b/packages/app/src/app/vscode/metadata.ts
@@ -1,7 +1,7 @@
 const VSCODE_METADATA = {
   CORE: {
     paths: {
-      src: process.env.VSCODE ? '/vscode/out/vs' : '/public/vscode20/vs',
+      src: process.env.VSCODE ? '/vscode/out/vs' : '/public/vscode21/vs',
       'npm/dev': 'node_modules/monaco-editor-core/dev/vs',
       'npm/min': 'node_modules/monaco-editor-core/min/vs',
       built: '/vscode/out-monaco-editor-core/min/vs',
diff --git a/packages/notifications/src/component/Toast.tsx b/packages/notifications/src/component/Toast.tsx
@@ -137,33 +137,32 @@ export function Toast({ toast, removeToast, getRef }: Props) {
                 <Button
                   small
                   onClick={() => {
-                    toast.notification.actions[0].primary.run();
                     removeToast(toast.id);
+                    toast.notification.actions.primary[0].run();
                   }}
                   style={{
                     marginTop: '1rem',
                     marginRight: '0.75rem',
                     lineHeight: 1,
                   }}
                 >
-                  {toast.notification.actions[0].primary.title}
+                  {toast.notification.actions.primary[0].label}
                 </Button>
 
-                {toast.notification.actions[0].secondary && (
+                {toast.notification.actions.secondary[0] && (
                   <Button
                     secondary
                     small
                     onClick={() => {
-                      toast.notification.actions[0].secondary.run();
-                      removeToast(toast.id);
+                      toast.notification.actions.secondary[0].run();
                     }}
                     style={{
                       marginTop: '1rem',
                       marginLeft: '0.5rem',
                       lineHeight: 1,
                     }}
                   >
-                    {toast.notification.actions[0].secondary.title}
+                    {toast.notification.actions.secondary[0].label}
                   </Button>
                 )}
               </div>
diff --git a/packages/notifications/src/state.ts b/packages/notifications/src/state.ts
@@ -2,8 +2,8 @@ import * as uuid from 'uuid';
 import { Emitter } from './utils/events';
 
 export interface NotificationAction {
-  title: string;
-  run: () => void;
+  label: string;
+  run: (event?: any) => void;
 }
 
 export enum NotificationStatus {
@@ -19,9 +19,18 @@ export interface NotificationMessage {
   sticky?: boolean;
   message: string;
   actions?: {
-    primary: NotificationAction;
-    secondary?: NotificationAction;
-  }[];
+    /**
+     * Primary actions show up as buttons as part of the message and will close
+     * the notification once clicked.
+     */
+    primary: NotificationAction[];
+    /**
+     * Secondary actions are meant to provide additional configuration or context
+     * for the notification and will show up less prominent. A notification does not
+     * close automatically when invoking a secondary action.
+     */
+    secondary?: NotificationAction[];
+  };
   timeAlive?: number;
   status: NotificationStatus;
 }
diff --git a/standalone-packages/vscode b/standalone-packages/vscode
@@ -1 +1 @@
-Subproject commit 67ef4def0da69156281b6356a476d472e0f597d9
+Subproject commit 1d81933e2cb4db4cea549aadcfa8919aeabb46df
diff --git a/standalone-packages/vscode-editor/release/min/vs/editor/codesandbox.editor.main.css b/standalone-packages/vscode-editor/release/min/vs/editor/codesandbox.editor.main.css
diff --git a/standalone-packages/vscode-editor/release/min/vs/editor/codesandbox.editor.main.js b/standalone-packages/vscode-editor/release/min/vs/editor/codesandbox.editor.main.js

Original file line number	Diff line number	Diff line change
`@@ -479,7 +479,7 @@ module.exports = {`
`479`	`479`	`[`
`480`	`480`	`{`
`481`	`481`	`from: '../../standalone-packages/vscode-editor/release/min/vs',`
`482`		`- to: 'public/vscode20/vs',`
	`482`	`+ to: 'public/vscode21/vs',`
`483`	`483`	`force: true,`
`484`	`484`	`},`
`485`	`485`	`{`
Original file line number	Diff line number	Diff line change
`@@ -150,7 +150,7 @@ module.exports = merge(commonConfig, {`
`150`	`150`	`},`
`151`	`151`	`},`
`152`	`152`	`{`
`153`		`- urlPattern: /\/vscode20/,`
	`153`	`+ urlPattern: /\/vscode21/,`
`154`	`154`	`handler: 'cacheFirst',`
`155`	`155`	`options: {`
`156`	`156`	`cache: {`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-Subproject commit 67ef4def0da69156281b6356a476d472e0f597d9`
	`1`	`+Subproject commit 1d81933e2cb4db4cea549aadcfa8919aeabb46df`