add ui events

src/commandPaletteService.js

@@ -1,3 +1,5 @@
+import { trackEvent } from './analytics';
+
 export const commandPaletteService = {
 	subscriptions: {},
 	subscribe(eventName, callback) {
@@ -11,6 +13,7 @@ export const commandPaletteService = {
 		};
 	},
 	publish(eventName, ...args) {
+		trackEvent('ui', 'commandPaletteCommandSelected', eventName);
 		const callbacks = this.subscriptions[eventName] || [];
 		callbacks.forEach(callback => {
 			callback(...args);

src/components/CodeEditor.jsx

@@ -35,6 +35,7 @@ import emmet from '@emmetio/codemirror-plugin';
 import { prettify, loadCss } from '../utils';
 import { modes } from '../codeModes';
 import { deferred } from '../deferred';
+import { trackEvent } from '../analytics';
 
 emmet(CodeMirror);
 let monacoDepsDeferred;
@@ -281,6 +282,7 @@ export default class CodeEditor extends Component {
 							content: this.instance.getValue(),
 							type: options.prettierParser
 						}).then(formattedCode => this.instance.setValue(formattedCode));
+						trackEvent('ui', 'prettifyKeyboardShortcut');
 					}
 				}
 			);
@@ -332,6 +334,7 @@ export default class CodeEditor extends Component {
 								type: options.prettierParser
 							}).then(formattedCode => editor.setValue(formattedCode));
 						}
+						trackEvent('ui', 'prettifyKeyboardShortcut');
 					},
 					Tab: function(editor) {
 						if (options.emmet) {

src/components/ContentWrap.jsx

@@ -625,7 +625,7 @@ export default class ContentWrap extends Component {
 	}
 
 	render() {
-		log('contentwrap update');
+		// log('contentwrap update');
 
 		return (
 			<SplitPane

src/components/ContentWrapFiles.jsx

@@ -638,6 +638,7 @@ export default class ContentWrapFiles extends Component {
 
 	prettifyBtnClickHandler() {
 		this.props.onPrettifyBtnClick(this.state.selectedFile);
+		trackEvent('ui', 'prettifyBtnClick');
 	}
 	render() {
 		return (

src/components/CreateNewModal.jsx

@@ -4,6 +4,7 @@ import { ItemTile } from './ItemTile';
 import templates from '../templateList';
 import { Divider } from './common';
 import Switch from './Switch';
+import { trackEvent } from '../analytics';
 
 export class CreateNewModal extends Component {
 	constructor(props) {
@@ -14,6 +15,11 @@ export class CreateNewModal extends Component {
 		this.setState({
 			isFileModeSelected: e.target.checked
 		});
+		trackEvent(
+			'ui',
+			'newCreationModeChange',
+			e.target.checked ? 'files' : '3panes'
+		);
 	}
 	render() {
 		const {
@@ -181,6 +187,7 @@ export class CreateNewModal extends Component {
 						type="button"
 						class="btn btn--primary"
 						onClick={() => {
+							trackEvent('ui', 'startBlankBtnClick');
 							this.state.isFileModeSelected
 								? onBlankFileTemplateSelect()
 								: onBlankTemplateSelect();

src/components/SidePane.jsx

@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import { FileIcon } from './FileIcon';
 import { getParentPath, getFileFromPath } from '../fileUtils';
+import { trackEvent } from '../analytics';
 
 const ENTER_KEY = 13;
 const ESCAPE_KEY = 27;
@@ -119,9 +120,11 @@ function Folder(props) {
 export class SidePane extends Component {
 	addFileButtonClickHandler() {
 		this.setState({ isAddingFile: true });
+		trackEvent('ui', 'fileAddBtnClick');
 	}
 	addFolderButtonClickHandler() {
 		this.setState({ isAddingFolder: true });
+		trackEvent('ui', 'folderAddBtnClick');
 	}
 	/**
 	 * Checks if the passed filename already exists and if so, warns the user.
@@ -173,6 +176,7 @@ export class SidePane extends Component {
 		if (answer) {
 			this.props.onRemoveFile(file.path);
 		}
+		trackEvent('ui', 'fileRemoveBtnClick');
 	}
 	renameFile(e) {
 		// This gets called twice when enter is pressed, because blur also fires.
@@ -200,6 +204,7 @@ export class SidePane extends Component {
 		this.setState({
 			fileBeingRenamed: file
 		});
+		trackEvent('ui', 'fileRenameBtnClick');
 	}
 
 	dragOverHandler(e) {

src/components/app.jsx

@@ -565,6 +565,11 @@ export default class App extends Component {
 					isCommandPaletteOpen: true,
 					isCommandPaletteInCommandMode: !!event.shiftKey
 				});
+				trackEvent(
+					'ui',
+					'openCommandPaletteKeyboardShortcut',
+					!!event.shiftKey ? 'command' : 'files'
+				);
 				event.preventDefault();
 			}
 		});
@@ -1355,6 +1360,7 @@ export default class App extends Component {
 				this.createNewItem(true);
 				this.setState({ isCreateNewModalOpen: false });
 			} else {
+				trackEvent('ui', 'FileModeCreationLimitMessageSeen');
 				return alert(
 					'"Files mode" is currently in beta and is limited to only 2 creations per user. You have already made 2 creations in Files mode.\n\nNote: You can choose to delete old ones to create new.'
 				);