Add event tracking to autocomplete toggle & trackEvent helper function (#3114)

* Add non Angular version of Events.

* Add event tracking for autocomplete toggle

* Fix lint error in QueryEditor

client/app/components/AutocompleteToggle.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Tooltip from 'antd/lib/tooltip';
 import PropTypes from 'prop-types';
 import '@/redash-font/style.less';
+import recordEvent from '@/lib/recordEvent';
 
 export default function AutocompleteToggle({ state, disabled, onToggle }) {
   let tooltipMessage = 'Live Autocomplete Enabled';
@@ -16,12 +17,17 @@ export default function AutocompleteToggle({ state, disabled, onToggle }) {
     icon = 'icon-flash-off';
   }
 
+  const toggle = (newState) => {
+    recordEvent('toggle_autocomplete', 'screen', 'query_editor', { state: newState });
+    onToggle(newState);
+  };
+
   return (
     <Tooltip placement="top" title={tooltipMessage}>
       <button
         type="button"
         className={'btn btn-default m-r-5' + (disabled ? ' disabled' : '')}
-        onClick={() => onToggle(!state)}
+        onClick={() => toggle(!state)}
         disabled={disabled}
       >
         <i className={'icon ' + icon} />

client/app/components/QueryEditor.jsx

@@ -148,11 +148,6 @@ class QueryEditor extends React.Component {
     };
   }
 
-  updateQuery = (queryText) => {
-    this.props.updateQuery(queryText);
-    this.setState({ queryText });
-  };
-
   static getDerivedStateFromProps(nextProps, prevState) {
     if (!nextProps.schema) {
       return { keywords: [], liveAutocompleteDisabled: false };
@@ -167,6 +162,11 @@ class QueryEditor extends React.Component {
     return null;
   }
 
+  updateQuery = (queryText) => {
+    this.props.updateQuery(queryText);
+    this.setState({ queryText });
+  };
+
   toggleAutocomplete = (state) => {
     this.setState({ autocompleteQuery: state });
     localOptions.set('liveAutocomplete', state);

client/app/lib/recordEvent.js

@@ -0,0 +1,25 @@
+import { debounce } from 'lodash';
+import { $http } from '@/services/http';
+
+let events = [];
+
+const post = debounce(() => {
+  const eventsToSend = events;
+  events = [];
+
+  $http.post('api/events', eventsToSend);
+}, 1000);
+
+export default function recordEvent(action, objectType, objectId, additionalProperties) {
+  const event = {
+    action,
+    object_type: objectType,
+    object_id: objectId,
+    timestamp: Date.now() / 1000.0,
+    screen_resolution: `${window.screen.width}x${window.screen.height}`,
+  };
+  Object.assign(event, additionalProperties);
+  events.push(event);
+
+  post();
+}

client/app/services/events.js

@@ -1,27 +1,8 @@
-import { debounce } from 'lodash';
+import recordEvent from '@/lib/recordEvent';
 
-function Events($http) {
-  this.events = [];
-
-  this.post = debounce(() => {
-    const events = this.events;
-    this.events = [];
-
-    $http.post('api/events', events);
-  }, 1000);
-
-  this.record = function record(action, objectType, objectId, additionalProperties) {
-    const event = {
-      action,
-      object_type: objectType,
-      object_id: objectId,
-      timestamp: Date.now() / 1000.0,
-      screen_resolution: `${window.screen.width}x${window.screen.height}`,
-    };
-    Object.assign(event, additionalProperties);
-    this.events.push(event);
-
-    this.post();
+function Events() {
+  this.record = (action, objectType, objectId, additionalProperties) => {
+    recordEvent(action, objectType, objectId, additionalProperties);
   };
 }
 
@@ -30,4 +11,3 @@ export default function init(ngModule) {
 }
 
 init.init = true;
-