Merge pull request #19 from adamwatters/telemetry

Telemetry
adamwatters · Jun 5, 2019 · 89e6b4b · 89e6b4b
2 parents ab3f893 + e2725e3
commit 89e6b4b
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 26 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -1,18 +1,19 @@
 // A launch configuration that compiles the extension and then opens it inside a new window
 {
-    "version": "0.1.0",
-    "configurations": [
-        {
-            "name": "Launch Extension",
-            "type": "extensionHost",
-            "request": "launch",
-            "runtimeExecutable": "${execPath}",
-            "args": [
-                "--extensionDevelopmentPath=${workspaceRoot}"
-            ],
-            "stopOnEntry": false,
-            "sourceMaps": true,
-            "outDir": "${workspaceRoot}/ext-src"
-        }
-    ]
-}
+  "version": "0.1.0",
+  "configurations": [
+    {
+      "name": "Launch Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
+      "env": {
+        "VSCODE_DEBUG_MODE": "true"
+      },
+      "stopOnEntry": false,
+      "sourceMaps": true,
+      "outFiles": "${workspaceRoot}/ext-src"
+    }
+  ]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.6.0]
+
+- added settings
+- added telemetry
+
 ## [0.5.0]
 
 - added github link

diff --git a/ext-src/extension.ts b/ext-src/extension.ts
@@ -1,14 +1,44 @@
 import * as path from "path";
 import * as vscode from "vscode";
+import TelemetryReporter from "vscode-extension-telemetry";
+const environment =
+  process.env.VSCODE_DEBUG_MODE === "true" ? "development" : "production";
+let reporter: TelemetryReporter;
 
 export function activate(context: vscode.ExtensionContext) {
+  const extensionId = "adam-watters.vscode-color-pick";
+  const key = "4a812e02-fb45-447f-a2bc-42bf98535773";
+  const extension = vscode.extensions.getExtension(extensionId) || {
+    packageJSON: "undefined"
+  };
+  reporter = new TelemetryReporter(
+    extensionId,
+    extension.packageJSON.version,
+    key
+  );
   context.subscriptions.push(
     vscode.commands.registerCommand("pick-color", () => {
-      ReactPanel.createOrShow(context.extensionPath, context.globalState);
+      ReactPanel.createOrShow(
+        context.extensionPath,
+        context.globalState,
+        reporter
+      );
     })
   );
 }
 
+export function deactivate() {
+  reporter.dispose();
+}
+
+const shouldUseTelemetry = (): boolean => {
+  return (
+    process.env.VSCODE_DEBUG_MODE === "true" ||
+    vscode.workspace.getConfiguration().get("color-pick.analytics") ||
+    false
+  );
+};
+
 const defaultState = {
   color: {
     hex: "#194D33",
@@ -40,7 +70,8 @@ class ReactPanel {
 
   public static async createOrShow(
     extensionPath: string,
-    globalState: vscode.Memento
+    globalState: vscode.Memento,
+    reporter: TelemetryReporter
   ) {
     const column = vscode.window.activeTextEditor
       ? vscode.window.activeTextEditor.viewColumn
@@ -55,7 +86,8 @@ class ReactPanel {
         extensionPath,
         globalState,
         initialState || defaultState,
-        column || vscode.ViewColumn.One
+        column || vscode.ViewColumn.One,
+        reporter
       );
     }
   }
@@ -64,7 +96,8 @@ class ReactPanel {
     extensionPath: string,
     globalState: vscode.Memento,
     initialState: object,
-    column: vscode.ViewColumn
+    column: vscode.ViewColumn,
+    reporter: TelemetryReporter
   ) {
     this._extensionPath = extensionPath;
     this._globalState = globalState;
@@ -95,6 +128,13 @@ class ReactPanel {
     this._panel.webview.onDidReceiveMessage(
       message => {
         switch (message.command) {
+          case "search":
+            const { searchString } = message;
+            shouldUseTelemetry() &&
+              reporter.sendTelemetryEvent("search", {
+                searchString,
+                environment
+              });
           case "colorChanged":
             const {
               mode,
@@ -103,6 +143,13 @@ class ReactPanel {
                 hex
               }
             } = message;
+            shouldUseTelemetry() &&
+              reporter.sendTelemetryEvent("colorChanged", {
+                environment,
+                mode,
+                hex,
+                rgb: `${r},${g},${b},${a}`
+              });
             this._globalState.update("app", {
               color: message.color,
               mode: message.mode
@@ -155,6 +202,9 @@ class ReactPanel {
     // Use a nonce to whitelist which scripts can be run
     const nonce = getNonce();
 
+    shouldUseTelemetry() &&
+      reporter.sendTelemetryEvent("extensionStarted", { environment });
+
     return `<!DOCTYPE html>
 			<html lang="en">
 			<head>

diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "vscode-color-pick",
   "displayName": "Color Pick",
-  "description": "Open a color picker from any file. Works in JSX. Supports HEX or rgba(). No dependencies.",
+  "description": "Open a color picker from any file. Works in JSX. Supports hex or rgba. No dependencies.",
   "icon": "pick.png",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "engines": {
     "vscode": "^1.23.0"
   },
@@ -42,14 +42,17 @@
   "license": "MIT",
   "dependencies": {
     "@types/color-convert": "^1.9.0",
+    "@types/lodash": "^4.14.133",
     "@types/react-color": "^3.0.0",
     "color-convert": "^2.0.0",
     "color-name-list": "^4.7.1",
     "fuse.js": "^3.4.4",
+    "lodash": "^4.17.11",
     "react": "^16.8.6",
     "react-color": "^2.17.3",
     "react-dom": "^16.8.6",
-    "react-scripts-ts": "^3.1.0"
+    "react-scripts-ts": "^3.1.0",
+    "vscode-extension-telemetry": "^0.1.1"
   },
   "scripts": {
     "vscode:prepublish": "react-scripts-ts build && tsc -p tsconfig.extension.json",

diff --git a/src/App.tsx b/src/App.tsx
@@ -44,6 +44,7 @@ class App extends React.Component {
           }}
         >
           <Search
+            vscode={vscode}
             setSearch={this.setSearch}
             search={this.state.search}
             searchSelect={this.handleColorChange}
@@ -101,10 +102,10 @@ class App extends React.Component {
                 />
                 {` copy as #hex`}
               </div>
-          </Card>
+            </Card>
+          </div>
         </div>
       </div>
-      </div>
     );
   }
 

diff --git a/src/Search.tsx b/src/Search.tsx
@@ -1,6 +1,8 @@
+// tslint:disable:no-console
 import convert from "color-convert";
 import namedColors from "color-name-list";
 import Fuse from "fuse.js";
+import { debounce } from "lodash";
 import React, { useState } from "react";
 import { ColorResult } from "react-color";
 
@@ -61,16 +63,34 @@ const Color = (props: IProps) => {
   );
 };
 
+interface IVscode {
+  postMessage: (message: object) => void;
+}
+
 interface ISearchProps {
   search: string;
   setSearch: (s: string) => void;
   searchSelect: (color: ColorResult) => void;
+  vscode: IVscode;
 }
 
+const dispatchSearchEvent = (vscode: IVscode, searchString: string) => {
+  if (searchString !== "") {
+    vscode.postMessage({
+      searchString,
+      command: "search"
+    });
+  }
+};
+
+const debouncedSearchEvent = debounce(dispatchSearchEvent, 500);
+
 const Search = (props: ISearchProps) => {
-  const { search, setSearch, searchSelect } = props;
+  const { search, setSearch, searchSelect, vscode } = props;
+
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
+    debouncedSearchEvent(vscode, value);
     setSearch(value);
   };
 

diff --git a/yarn.lock b/yarn.lock
@@ -124,6 +124,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.14.133":
+  version "4.14.133"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.133.tgz#430721c96da22dd1694443e68e6cec7ba1c1003d"
+  integrity sha512-/3JqnvPnY58GLzG3Y7fpphOhATV1DDZ/Ak3DQufjlRK5E4u+s0CfClfNFtAGBabw+jDGtRFbOZe+Z02ZMWCBNQ==
+
 "@types/node@^10.1.2":
   version "10.14.7"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.14.7.tgz#1854f0a9aa8d2cd6818d607b3d091346c6730362"
@@ -543,6 +548,15 @@ append-transform@^0.4.0:
   dependencies:
     default-require-extensions "^1.0.0"
 
+applicationinsights@1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/applicationinsights/-/applicationinsights-1.0.8.tgz#db6e3d983cf9f9405fe1ee5ba30ac6e1914537b5"
+  integrity sha512-KzOOGdphOS/lXWMFZe5440LUdFbrLpMvh2SaRxn7BmiI550KAoSb2gIhiq6kJZ9Ir3AxRRztjhzif+e5P5IXIg==
+  dependencies:
+    diagnostic-channel "0.2.0"
+    diagnostic-channel-publishers "0.2.1"
+    zone.js "0.7.6"
+
 aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -2845,6 +2859,18 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
+diagnostic-channel-publishers@0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/diagnostic-channel-publishers/-/diagnostic-channel-publishers-0.2.1.tgz#8e2d607a8b6d79fe880b548bc58cc6beb288c4f3"
+  integrity sha1-ji1geottef6IC1SLxYzGvrKIxPM=
+
+diagnostic-channel@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/diagnostic-channel/-/diagnostic-channel-0.2.0.tgz#cc99af9612c23fb1fff13612c72f2cbfaa8d5a17"
+  integrity sha1-zJmvlhLCP7H/8TYSxy8sv6qNWhc=
+  dependencies:
+    semver "^5.3.0"
+
 didyoumean@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff"
@@ -9435,6 +9461,13 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vscode-extension-telemetry@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/vscode-extension-telemetry/-/vscode-extension-telemetry-0.1.1.tgz#91387e06b33400c57abd48979b0e790415ae110b"
+  integrity sha512-TkKKG/B/J94DP5qf6xWB4YaqlhWDg6zbbqVx7Bz//stLQNnfE9XS1xm3f6fl24c5+bnEK0/wHgMgZYKIKxPeUA==
+  dependencies:
+    applicationinsights "1.0.8"
+
 vscode-test@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/vscode-test/-/vscode-test-0.4.1.tgz#5e2387dbc303544c932092469e6bbf42204bfab3"
@@ -9953,3 +9986,8 @@ yargs@~3.10.0:
     cliui "^2.1.0"
     decamelize "^1.0.0"
     window-size "0.1.0"
+
+zone.js@0.7.6:
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.7.6.tgz#fbbc39d3e0261d0986f1ba06306eb3aeb0d22009"
+  integrity sha1-+7w50+AmHQmG8boGMG6zrrDSIAk=