Implement events (codesandbox#2336)

CompuIves · web-flow · commit 1279479b6aa4 · 2019-08-29T15:19:45.000+02:00
* Implement events

* Add workbench event whitelist

* Add move pane event
diff --git a/packages/app/src/app/components/Preview/DevTools/index.tsx b/packages/app/src/app/components/Preview/DevTools/index.tsx
@@ -5,6 +5,7 @@ import store from 'store/dist/store.modern';
 
 import { TemplateType } from '@codesandbox/common/lib/templates';
 import { ViewConfig } from '@codesandbox/common/lib/templates/template';
+import track from '@codesandbox/common/lib/utils/analytics';
 
 import console from './Console';
 import Tabs, { ITabPosition } from './Tabs';
@@ -112,7 +113,7 @@ type State = {
   currentTabIndex: number;
 };
 
-export default class DevTools extends React.PureComponent<Props, State> {
+export class DevTools extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 
@@ -383,6 +384,11 @@ export default class DevTools extends React.PureComponent<Props, State> {
     if (this.state.hidden && !this.props.primary) {
       this.openDevTools();
     }
+    const pane = this.props.viewConfig.views[index];
+    if (pane) {
+      track('DevTools - Open Pane', { pane: pane.id });
+    }
+
     this.props.setPane({
       devToolIndex: this.props.devToolIndex,
       tabPosition: index,
@@ -473,6 +479,10 @@ export default class DevTools extends React.PureComponent<Props, State> {
               moveTab={
                 this.props.moveTab
                   ? (prevPos, nextPos) => {
+                      track('DevTools - Move Pane', {
+                        pane: this.props.viewConfig.views[prevPos.tabPosition]
+                          .id,
+                      });
                       this.props.moveTab(prevPos, nextPos);
                     }
                   : undefined
diff --git a/packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/NewSandboxModal/Imports/GitHubImport.tsx b/packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/NewSandboxModal/Imports/GitHubImport.tsx
@@ -5,6 +5,7 @@ import {
   gitHubRepoPattern,
 } from '@codesandbox/common/lib/utils/url-generator';
 import { Button } from '@codesandbox/common/lib/components/Button';
+import track from '@codesandbox/common/lib/utils/analytics';
 
 import {
   ImportHeader,
@@ -102,7 +103,14 @@ export const GitHubImport = () => {
         >
           Copy Link
         </Button>
-        <Button disabled={!transformedUrl} to={gitHubToSandboxUrl(url)} small>
+        <Button
+          onClick={() => {
+            track('GitHub Import Wizard - Open Sandbox Clicked');
+          }}
+          disabled={!transformedUrl}
+          to={gitHubToSandboxUrl(url)}
+          small
+        >
           Open Sandbox
         </Button>
       </Buttons>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/index.js b/packages/app/src/app/pages/Sandbox/Editor/Content/index.js
@@ -12,7 +12,7 @@ import SplitPane from 'react-split-pane';
 
 import CodeEditor from 'app/components/CodeEditor';
 import type { Editor, Settings } from 'app/components/CodeEditor/types';
-import DevTools from 'app/components/Preview/DevTools';
+import { DevTools } from 'app/components/Preview/DevTools';
 
 import Preview from './Preview';
 import preventGestureScroll, { removeListener } from './prevent-gesture-scroll';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import track from '@codesandbox/common/lib/utils/analytics';
 import { inject, hooksObserver } from 'app/componentConnectors';
 import { DeploymentIntegration } from 'app/components/DeploymentIntegration';
 import { NetlifyLogo } from 'app/components/NetlifyLogo';
@@ -27,7 +28,10 @@ export const DeployButton = inject('store', 'signals')(
         <DeploymentIntegration
           beta
           bgColor="#FFFFFF"
-          onDeploy={deployWithNetlify}
+          onDeploy={() => {
+            track('Deploy Clicked', { provider: 'netlify' });
+            deployWithNetlify({});
+          }}
           Icon={NetlifyLogo}
           light
           loading={deploying || building}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/CreateRepo/CreateRepo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/CreateRepo/CreateRepo.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@codesandbox/common/lib/components/Button';
 import Input from '@codesandbox/common/lib/components/Input';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import track from '@codesandbox/common/lib/utils/analytics';
 import { inject, hooksObserver } from 'app/componentConnectors';
 import React from 'react';
 
@@ -31,7 +32,10 @@ export const CreateRepo = inject('store', 'signals')(
       const updateRepoTitle = ({
         target: { value: title },
       }: React.ChangeEvent<HTMLInputElement>) => repoTitleChanged({ title });
-      const createRepo = () => createRepoClicked();
+      const createRepo = () => {
+        track('Export to GitHub Clicked');
+        createRepoClicked();
+      };
 
       return (
         <div style={style}>
diff --git a/packages/app/src/app/pages/common/Modals/DeploymentModal/index.js b/packages/app/src/app/pages/common/Modals/DeploymentModal/index.js
@@ -5,6 +5,7 @@ import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import { inject, observer } from 'app/componentConnectors';
 import ZeitIntegration from 'app/pages/common/ZeitIntegration';
 import { IntegrationModal } from 'app/components/IntegrationModal';
+import track from '@codesandbox/common/lib/utils/analytics';
 import {
   ButtonContainer,
   DeployAnimationContainer,
@@ -84,7 +85,10 @@ function DeploymentModal({ store, signals }) {
         ) : (
           <ButtonContainer deploying={store.deployment.deploying}>
             <Button
-              onClick={() => signals.deployment.deployClicked()}
+              onClick={() => {
+                track('Deploy Clicked', { provider: 'zeit' });
+                signals.deployment.deployClicked();
+              }}
               disabled={!zeitSignedIn || store.deployment.deploying}
             >
               Deploy Now
diff --git a/packages/app/src/app/store/providers/Api.js b/packages/app/src/app/store/providers/Api.js
@@ -69,6 +69,27 @@ function showNotification(controller, errorMessage: string) {
   } else if (errorMessage.startsWith('You reached the maximum of')) {
     track('Non-Patron Sandbox Limit Reached', { errorMessage });
 
+    notificationState.addNotification({
+      title: errorMessage,
+      status: NotificationStatus.ERROR,
+      actions: {
+        primary: [
+          {
+            label: 'Open Patron Page',
+            run: () => {
+              window.open(patronUrl(), '_blank');
+            },
+          },
+        ],
+      },
+    });
+  } else if (
+    errorMessage.startsWith(
+      'You reached the limit of server sandboxes, you can create more server sandboxes as a patron.'
+    )
+  ) {
+    track('Non-Patron Server Sandbox Limit Reached', { errorMessage });
+
     notificationState.addNotification({
       title: errorMessage,
       status: NotificationStatus.ERROR,
@@ -84,6 +105,14 @@ function showNotification(controller, errorMessage: string) {
       },
     });
   } else {
+    if (
+      errorMessage.startsWith(
+        'You reached the limit of server sandboxes, we will increase the limit in the future. Please contact hello@codesandbox.io for more server sandboxes.'
+      )
+    ) {
+      track('Patron Server Sandbox Limit Reached', { errorMessage });
+    }
+
     controller.runSignal(
       'notificationAdded',
       addNotification(errorMessage, 'error')
diff --git a/packages/app/src/embed/components/Content/index.tsx b/packages/app/src/embed/components/Content/index.tsx
@@ -26,7 +26,8 @@ import {
   StyledCloseIcon,
 } from 'app/pages/Sandbox/Editor/Content/Tabs/Tab/elements';
 
-import DevTools, {
+import {
+  DevTools,
   IViewType,
   DevToolProps,
 } from 'app/components/Preview/DevTools';
diff --git a/packages/app/src/embed/index.js b/packages/app/src/embed/index.js
@@ -9,9 +9,14 @@ import theme from '@codesandbox/common/lib/theme';
 import '@codesandbox/common/lib/global.css';
 
 import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
+import track from '@codesandbox/common/lib/utils/analytics';
 
 import App from './components/App';
 
+document.addEventListener('click', () => {
+  track('Embed Interaction');
+});
+
 requirePolyfills().then(() => {
   function renderApp(Component) {
     render(
diff --git a/packages/common/src/components/Navigation/index.tsx b/packages/common/src/components/Navigation/index.tsx
@@ -5,6 +5,7 @@ import Logo from '../Logo';
 import MaxWidth from '../flex/MaxWidth';
 
 import media from '../../utils/media';
+import track from '../../utils/analytics';
 
 const Container = styled.div`
   display: flex;
@@ -167,7 +168,15 @@ export default class Navigation extends React.PureComponent {
               </Item>
             )}
 
-            <Item hidePhone href="/s" rel="noopener noreferrer" button={!user}>
+            <Item
+              onClick={() => {
+                track('Navigation - Create Sandbox Clicked');
+              }}
+              hidePhone
+              href="/s"
+              rel="noopener noreferrer"
+              button={!user}
+            >
               Create Sandbox
             </Item>
 
diff --git a/packages/common/src/utils/analytics.ts b/packages/common/src/utils/analytics.ts
@@ -7,6 +7,62 @@ const debug = _debug('cs:analytics');
 
 const global = (typeof window !== 'undefined' ? window : {}) as any;
 
+const WHITELISTED_VSCODE_EVENTS = [
+  'codesandbox.preview.toggle',
+  'workbench.action.splitEditor',
+  'workbench.action.toggleSidebarVisibility',
+  'codesandbox.sandbox.new',
+  'workbench.action.files.saveAs',
+  'editor.action.addCommentLine',
+  'codesandbox.sandbox.exportZip',
+  'codesandbox.preferences',
+  'codesandbox.sandbox.fork',
+  'codesandbox.help.documentation',
+  'codesandbox.help.github',
+  'view.preview.flip',
+  'codesandbox.search',
+  'workbench.action.splitEditorLeft',
+  'codesandbox.dashboard',
+  'workbench.action.toggleCenteredLayout',
+  'workbench.action.toggleMenuBar',
+  'codesandbox.explore',
+  'editor.action.toggleTabFocusMode',
+  'workbench.action.splitEditorUp',
+  'workbench.action.toggleSidebarPosition',
+  'workbench.action.toggleActivityBarVisibility',
+  'workbench.action.toggleStatusbarVisibility',
+  'codesandbox.dependencies.add',
+  'codesandbox.help.open-issue',
+  'codesandbox.action.search',
+  'workbench.action.editorLayoutThreeColumns',
+  'breadcrumbs.toggleToOn',
+  'workbench.action.openSettings2',
+  'workbench.action.globalSettings',
+  'workbench.action.editorLayoutTwoRows',
+  'workbench.action.editorLayoutTwoByTwoGrid',
+  'editor.action.showContextMenu',
+  'toggleVim',
+  'codesandbox.help.spectrum',
+  'codesandbox.help.feedback',
+  'workbench.action.webview.openDeveloperTools',
+  'workbench.action.editorLayoutThreeRows',
+  'codesandbox.help.twitter',
+  'workbench.action.editorLayoutTwo',
+  'codesandbox.preview.external',
+  'notifications.showList',
+  'workbench.action.editor.changeEncoding',
+  'editor.action.indentationToTabs',
+  'workbench.action.maximizeEditor',
+  'editor.action.indentationToSpaces',
+  'revealFilesInOS',
+  'keybindings.editor.searchKeyBindings',
+  'notifications.hideList',
+  'workbench.action.terminal.focus',
+  'workbench.action.console.focus',
+  'workbench.action.openRecent',
+  'code-runner.run',
+];
+
 export const DNT =
   typeof window !== 'undefined' &&
   Boolean(
@@ -152,12 +208,7 @@ export async function resetUserId() {
 const isAllowedEvent = (eventName, secondArg) => {
   try {
     if (eventName === 'VSCode - workbenchActionExecuted') {
-      if (secondArg.id.startsWith('cursor')) {
-        return false;
-      }
-      if (secondArg.id === 'deleteLeft') {
-        return false;
-      }
+      return WHITELISTED_VSCODE_EVENTS.indexOf(secondArg.id) > -1;
     }
     return true;
   } catch (e) {
diff --git a/packages/homepage/src/screens/home/Animation/Title.js b/packages/homepage/src/screens/home/Animation/Title.js
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { Link } from 'gatsby';
 
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import track from '@codesandbox/common/lib/utils/analytics';
 
 import media from '../../../utils/media';
 import { fadeIn } from '../../../utils/animation';
@@ -130,6 +131,9 @@ export default ({ template }) => (
     <ResponsiveRollingText updateCheck={template.name}>
       <Buttons>
         <Button
+          onClick={() => {
+            track('Homepage - Open X Clicked', { template: template.niceName });
+          }}
           href={sandboxUrl({ id: template.shortid })}
           color={template.color}
           style={{ width: 220 }}
