Telemetry updates for #79

CHANGELOG.json

@@ -1,5 +1,16 @@
 {
   "versions": [
+    {
+      "version": "1.8.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "New telemetry approach which allows you to use Application Insights instance [#79](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/79)"
+        ],
+        "fixes": []
+      },
+      "contributions": []
+    },
     {
       "version": "1.7.0",
       "changes": {
@@ -10,7 +21,7 @@
           "Added a font field type for the `PropertyFieldCollectionData` control [#66](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/66)",
           "Added a URL field type for the `PropertyFieldCollectionData` control [#72](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/72)",
           "Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control. Related to previous enhancement.",
-          "Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#69](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/69)"
+          "Added properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#69](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/69)"
         ],
         "fixes": [
           "`PropertyFieldPeoplePicker` validation error does not clear as expected [#68](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/68)"

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Releases
 
+## 1.8.0
+
+**Enhancements**
+
+- New telemetry approach which allows you to use Application Insights instance [#79](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/79)
+
 ## 1.7.0
 
 **Enhancements**
@@ -9,7 +15,7 @@
 - Added a font field type for the `PropertyFieldCollectionData` control [#66](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/66)
 - Added a URL field type for the `PropertyFieldCollectionData` control [#72](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/72)
 - Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control. Related to previous enhancement.
-- Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#69](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/69)
+- Added properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#69](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/69)
 
 **Fixes**
 

docs/documentation/docs/about/release-notes.md

@@ -1,5 +1,11 @@
 # Releases
 
+## 1.8.0
+
+**Enhancements**
+
+- New telemetry approach which allows you to use Application Insights instance [#79](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/79)
+
 ## 1.7.0
 
 **Enhancements**
@@ -9,7 +15,7 @@
 - Added a font field type for the `PropertyFieldCollectionData` control [#66](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/66)
 - Added a URL field type for the `PropertyFieldCollectionData` control [#72](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/72)
 - Field validation implemented to enable/disable save buttons in `PropertyFieldCollectionData` control. Related to previous enhancement.
-- Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#69](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/69)
+- Added properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#69](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/69)
 
 **Fixes**
 

gulpfile.js

@@ -7,7 +7,7 @@ const fs = require('fs');
 // Update the version number in the version.ts file
 gulp.task('versionUpdater', (done) => {
   const pkgContents = require('./package.json');
-  const filePath = './src/common/appInsights/version.ts';
+  const filePath = './src/common/telemetry/version.ts';
   const fileContents = `export const version: string = "{versionPlaceholder}";`;
   const newContents = fileContents.replace("{versionPlaceholder}", pkgContents.version);
   console.log(`Updating version number to: ${pkgContents.version}`);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-property-controls",
   "description": "Reusable property pane controls for SharePoint Framework solutions",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -11,12 +11,11 @@
     "test": "gulp test",
     "versionUpdater": "gulp versionUpdater",
     "prepublishOnly": "gulp",
-    "changelog": "node scripts/create-changelog.js && node scripts/sync-changelogs.js",
+    "changelog": "node scripts/create-changelog.js && node scripts/sync-changelogs.js && gulp versionUpdater",
     "postinstall": "node postinstall/install.js"
   },
   "dependencies": {
-    "@types/applicationinsights-js": "1.0.5",
-    "applicationinsights-js": "^1.0.14",
+    "@pnp/telemetry-js": "1.0.0",
     "react-ace": "5.8.0"
   },
   "devDependencies": {
@@ -52,7 +51,7 @@
   "bugs": {
     "url": "https://github.com/SharePoint/sp-dev-fx-property-controls/issues"
   },
-  "homepage": "https://github.com/SharePoint/sp-dev-fx-property-controls",
+  "homepage": "https://sharepoint.github.io/sp-dev-fx-property-controls/",
   "main": "lib/index.js",
   "maintainers": [
     {

src/common/telemetry/index.ts

@@ -0,0 +1,16 @@
+import PnPTelemetry from "@pnp/telemetry-js";
+import { version } from './version';
+import { Environment, EnvironmentType } from "@microsoft/sp-core-library";
+
+const CONTROL_TYPE = "property";
+
+export function track(componentName: string, properties: any = {}): void {
+  const telemetry = PnPTelemetry.getInstance();
+  telemetry.trackEvent(componentName, {
+    version,
+    controlType: CONTROL_TYPE,
+    debug: DEBUG ? "true" : "false",
+    environment: EnvironmentType[Environment.type],
+    ...properties
+  });
+}

src/common/telemetry/version.ts

@@ -0,0 +1 @@
+export const version: string = "1.8.0";

src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCalloutHost.tsx

@@ -5,7 +5,7 @@ import * as _ from 'lodash';
 import PlaceholderWithCallout from '../../common/placeholderWithCallout/PlaceholderWithCallout';
 
 import { IPropertyFieldButtonWithCalloutHostProps } from './IPropertyFieldButtonWithCalloutHost';
-import * as appInsights from '../../common/appInsights';
+import * as telemetry from '../../common/telemetry';
 
 
 /**
@@ -15,7 +15,7 @@ export default class PropertyFieldButtonHost extends React.Component<IPropertyFi
     constructor(props: IPropertyFieldButtonWithCalloutHostProps) {
       super(props);
 
-      appInsights.track('PropertyFieldButton', {
+      telemetry.track('PropertyFieldButton', {
         disabled: props.disabled
       });
     }

src/propertyFields/checkboxWithCallout/PropertyFieldCheckboxWithCalloutHost.tsx

@@ -5,7 +5,7 @@ import * as _ from 'lodash';
 import PlaceholderWithCallout from '../../common/placeholderWithCallout/PlaceholderWithCallout';
 
 import { IPropertyFieldCheckboxWithCalloutHostProps } from './IPropertyFieldCheckboxWithCalloutHost';
-import * as appInsights from '../../common/appInsights';
+import * as telemetry from '../../common/telemetry';
 
 /**
  * Renders the control for PropertyFieldCheckboxWithCallout component
@@ -14,7 +14,7 @@ export default class PropertyFieldCheckboxHost extends React.Component<IProperty
     constructor(props: IPropertyFieldCheckboxWithCalloutHostProps) {
         super(props);
 
-        appInsights.track('PropertyFieldCheckbox', {
+        telemetry.track('PropertyFieldCheckbox', {
           disabled: props.disabled
         });
     }

src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCalloutHost.tsx

@@ -5,13 +5,13 @@ import { ChoiceGroup } from 'office-ui-fabric-react';
 import PropertyFieldHeader from '../../common/propertyFieldHeader/PropertyFieldHeader';
 
 import { IPropertyFieldChoiceGroupWithCalloutHostProps } from './IPropertyFieldChoiceGroupWithCalloutHost';
-import * as appInsights from '../../common/appInsights';
+import * as telemetry from '../../common/telemetry';
 
 export default class PropertyFieldToggleWithCalloutHost extends React.Component<IPropertyFieldChoiceGroupWithCalloutHostProps, null> {
     constructor(props: IPropertyFieldChoiceGroupWithCalloutHostProps) {
         super(props);
 
-        appInsights.track('PropertyFieldToggleWithCallout', {
+        telemetry.track('PropertyFieldToggleWithCallout', {
           disabled: props.disabled
         });
     }

src/propertyFields/codeEditor/PropertyFieldCodeEditorHost.tsx

@@ -8,7 +8,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { IPropertyFieldCodeEditorHostProps, IPropertyFieldCodeEditorHostState } from './IPropertyFieldCodeEditorHost';
 import styles from './PropertyFieldCodeEditorHost.module.scss';
 import FieldErrorMessage from '../errorMessage/FieldErrorMessage';
-import * as appInsights from '../../common/appInsights';
+import * as telemetry from '../../common/telemetry';
 import * as strings from 'PropertyControlStrings';
 import * as brace from 'brace';
 import AceEditor from 'react-ace';
@@ -35,7 +35,7 @@ export default class PropertyFieldCodeEditorHost extends React.Component<IProper
   constructor(props: IPropertyFieldCodeEditorHostProps) {
     super(props);
 
-    appInsights.track('PropertyFieldCodeEditor', {
+    telemetry.track('PropertyFieldCodeEditor', {
       language: props.language,
       disabled: props.disabled
     });

src/propertyFields/collectionData/PropertyFieldCollectionDataHost.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as appInsights from '../../common/appInsights';
+import * as telemetry from '../../common/telemetry';
 import { IPropertyFieldCollectionDataHostProps, IPropertyFieldCollectionDataHostState } from '.';
 import { DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
 import { Panel, PanelType } from 'office-ui-fabric-react/lib/components/Panel';
@@ -16,7 +16,7 @@ export class PropertyFieldCollectionDataHost extends React.Component<IPropertyFi
       panelOpen: false
     };
 
-    appInsights.track('PropertyFieldCollectionData', {});
+    telemetry.track('PropertyFieldCollectionData', {});
   }
 
   /**

src/propertyFields/colorPicker/PropertyFieldColorPickerHost.tsx

@@ -9,14 +9,14 @@ import {
 import styles from './PropertyFieldColorPickerHost.module.scss';
 import * as strings from 'PropertyControlStrings';
 import { PropertyFieldColorPickerStyle } from './IPropertyFieldColorPicker';
-import * as appInsights from '../../common/appInsights';
+import * as telemetry from '../../common/telemetry';
 
 export default class PropertyFieldColorPickerHost extends React.Component<IPropertyFieldColorPickerHostProps, IPropertyFieldColorPickerHostState> {
 
 	constructor(props: IPropertyFieldColorPickerHostProps, state: IPropertyFieldColorPickerHostState) {
     super(props);
 
-    appInsights.track('PropertyFieldColorPicker', {
+    telemetry.track('PropertyFieldColorPicker', {
       disabled: props.disabled
     });
 

src/propertyFields/dateTimePicker/PropertyFieldDateTimePickerHost.tsx

@@ -11,7 +11,7 @@ import styles from './PropertyFieldDateTimePickerHost.module.scss';
 import HoursComponent from './HoursComponent';
 import MinutesComponent from './MinutesComponent';
 import SecondsComponent from './SecondsComponent';
-import * as appInsights from '../../common/appInsights';
+import * as telemetry from '../../common/telemetry';
 
 /**
  * Defines the labels of the DatePicker control (as months, days, etc.)
@@ -90,7 +90,7 @@ export default class PropertyFieldDateTimePickerHost extends React.Component<IPr
   constructor(props: IPropertyFieldDateTimePickerHostProps) {
     super(props);
 
-    appInsights.track('PropertyFieldDateTimePicker', {
+    telemetry.track('PropertyFieldDateTimePicker', {
       dateConvention: props.dateConvention ? DateConvention[props.dateConvention] : '',
       formatDate: !!props.formatDate,
       timeConvention: props.timeConvention ? TimeConvention[props.timeConvention] : '',
@@ -132,7 +132,7 @@ export default class PropertyFieldDateTimePickerHost extends React.Component<IPr
   private _getDateValue() {
     if (typeof this.props.initialDate !== 'undefined' && this.props.initialDate !== null) {
       if (typeof this.props.initialDate.value !== 'undefined' && this.props.initialDate.value !== null) {
-        return new Date(this.props.initialDate.value);
+        return new Date(this.props.initialDate.value.toString());
       }
     }
     return null;

src/propertyFields/dropdownWithCallout/PropertyFieldDropdownWithCalloutHost.tsx

@@ -5,13 +5,13 @@ import * as _ from 'lodash';
 import PropertyFieldHeader from '../../common/propertyFieldHeader/PropertyFieldHeader';
 
 import { IPropertyFieldDropdownWithCalloutHostProps } from './IPropertyFieldDropdownWithCalloutHost';
-import * as appInsights from '../../common/appInsights';
+import * as telemetry from '../../common/telemetry';
 
 export default class PropertyFieldDropdownHost extends React.Component<IPropertyFieldDropdownWithCalloutHostProps, null> {
     constructor(props: IPropertyFieldDropdownWithCalloutHostProps) {
       super(props);
 
-      appInsights.track('PropertyFieldDropdown', {
+      telemetry.track('PropertyFieldDropdown', {
         disabled: props.disabled
       });
     }

src/propertyFields/labelWithCallout/PropertyFieldLabelWithCalloutHost.tsx

@@ -5,7 +5,7 @@ import * as _ from 'lodash';
 import PlaceholderWithCallout from '../../common/placeholderWithCallout/PlaceholderWithCallout';
 
 import { IPropertyFieldLabelWithCalloutHostProps } from './IPropertyFieldLabelWithCalloutHost';
-import * as appInsights from '../../common/appInsights';
+import * as telemetry from '../../common/telemetry';
 
 /**
 * Renders the control for PropertyFieldLabelWithCallout component
@@ -14,7 +14,7 @@ export default class PropertyFieldLabelHost extends React.Component<IPropertyFie
   constructor(props: IPropertyFieldLabelWithCalloutHostProps) {
     super(props);
 
-    appInsights.track('PropertyFieldLabel', {
+    telemetry.track('PropertyFieldLabel', {
       disabled: props.disabled
     });
   }

src/propertyFields/linkWithCallout/PropertyFieldLinkWithCalloutHost.tsx

@@ -5,7 +5,7 @@ import * as _ from 'lodash';
 import PlaceholderWithCallout from '../../common/placeholderWithCallout/PlaceholderWithCallout';
 
 import { IPropertyFieldLinkWithCalloutHostProps } from './IPropertyFieldLinkWithCalloutHost';
-import * as appInsights from '../../common/appInsights';
+import * as telemetry from '../../common/telemetry';
 
 /**
 * Renders the control for PropertyFieldLinkWithCallout component
@@ -14,7 +14,7 @@ export default class PropertyFieldLinkHost extends React.Component<IPropertyFiel
   constructor(props: IPropertyFieldLinkWithCalloutHostProps) {
     super(props);
 
-    appInsights.track('PropertyFieldLink', {
+    telemetry.track('PropertyFieldLink', {
       disabled: props.disabled
     });
   }