Merge pull request #35 from SharePoint/dev

Dev v1.4.1 PR

Author: estruyf

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Releases
 
+## 1.4.1
+
+**Enhancements**
+
+- Optimized telemetry so that it only pushes control data
+
+**Fixes**
+- Fixes for issue [#30 - Check if Label is null and if so don't render it.](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/30)
+- Fix for issue [#33 - `PropertyFieldPeoplePicker` Validation does not work as expected.](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/33)
+
 ## 1.4.0
 
 **New controls**

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

@@ -1,5 +1,15 @@
 # Releases
 
+## 1.4.1
+
+**Enhancements**
+
+- Optimized telemetry so that it only pushes control data
+
+**Fixes**
+- Fixes for issue [#30 - Check if Label is null and if so don't render it.](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/30)
+- Fix for issue [#33 - `PropertyFieldPeoplePicker` Validation does not work as expected.](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/33)
+
 ## 1.4.0
 
 **New controls**

docs/documentation/docs/index.md

@@ -2,6 +2,8 @@
 
 This repository provides developers with a set of reusable property pane controls that can be used in their SharePoint Framework (SPFx) solutions.
 
+> **Important**: The controls project has a minimal dependency on SharePoint Framework version `1.3.0`. Be aware that the controls might not work in solutions your building for on-premises. As for on-premises solutions version `1.1.0` will get used.
+
 ## Getting started
 
 ### Installation

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-property-controls",
   "description": "Reusable property pane controls for SharePoint Framework solutions",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "engines": {
     "node": ">=0.10.0"
   },

src/common/appInsights/index.ts

@@ -2,16 +2,35 @@ import { AppInsights } from "applicationinsights-js";
 import { version } from './version';
 import {Environment,EnvironmentType} from "@microsoft/sp-core-library";
 
+const controlType = "property";
+
 AppInsights.downloadAndSetup({ instrumentationKey: "9f59b81e-d2ed-411e-a961-8bcf3f7f04d0" });
 
-// Remove operation name from the telemetry
-if (AppInsights.context && AppInsights.context.operation && AppInsights.context.operation.name) {
-  AppInsights.context.operation.name = null;
-}
+appInsights.queue.push(() => {
+  // Remove operation name from the telemetry
+  if (AppInsights.context && AppInsights.context.operation && AppInsights.context.operation.name) {
+    AppInsights.context.operation.name = null;
+  }
+
+  // Filter out telemetry data
+  appInsights.context.addTelemetryInitializer((envelope: Microsoft.ApplicationInsights.IEnvelope) => {
+    const telemetryItem = envelope.data.baseData;
+    // Only send telemetry data if it contains data of this library
+    if (!telemetryItem.properties || !telemetryItem.properties.controlType) {
+      return false;
+    }
+
+    // Only send telemetry if it is coming from the right control type
+    if (telemetryItem.properties && telemetryItem.properties.controlType && telemetryItem.properties.controlType !== controlType) {
+      return false;
+    }
+  });
+});
 
 export function track(componentName: string, properties: any = {}): void {
   AppInsights.trackEvent(componentName, {
     version,
+    controlType,
     debug: DEBUG ? "true" : "false",
     environment: EnvironmentType[Environment.type],
     ...properties

src/propertyFields/codeEditor/PropertyFieldCodeEditorHost.tsx

@@ -129,7 +129,7 @@ export default class PropertyFieldCodeEditorHost extends React.Component<IProper
   public render(): JSX.Element {
     return (
       <div>
-        <Label>{this.props.label}</Label>
+        {this.props.label && <Label>{this.props.label}</Label>}
         <table className={styles.codeFieldTable}>
           <tbody>
             <tr>

src/propertyFields/colorPicker/PropertyFieldColorPickerHost.tsx

@@ -31,7 +31,7 @@ export default class PropertyFieldColorPickerHost extends React.Component<IPrope
 	public render(): JSX.Element {
 		return (
 			<div>
-				<Label>{this.props.label}</Label>
+				{this.props.label && <Label>{this.props.label}</Label>}
 				{this.props.style === PropertyFieldColorPickerStyle.Inline &&
 					<table className={styles.cpInlineTable}>
 						<tbody>

src/propertyFields/dateTimePicker/PropertyFieldDateTimePickerHost.tsx

@@ -324,7 +324,7 @@ export default class PropertyFieldDateTimePickerHost extends React.Component<IPr
     // Renders content
     return (
       <div className={styles.propertyFieldDateTimePicker}>
-        <Label>{this.props.label}</Label>
+        {this.props.label && <Label>{this.props.label}</Label>}
         <table cellPadding='0' cellSpacing='0'>
           <tbody>
             <tr>

src/propertyFields/errorMessage/FieldErrorMessage.module.scss

@@ -0,0 +1,14 @@
+.errorMessage {
+  font-size: 12px;
+  font-weight: 400;
+  color: #a80000;
+  margin: 0;
+  padding-top: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.errorIcon {
+  font-size: 14px;
+  margin-right: 5px;
+}

src/propertyFields/errorMessage/FieldErrorMessage.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-
+import styles from './FieldErrorMessage.module.scss';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
 
 export interface IFieldErrorMessageProps {
-
   errorMessage: string;
 }
 
@@ -13,14 +13,15 @@ export default class FieldErrorMessage extends React.Component<IFieldErrorMessag
   public render(): JSX.Element {
     if (this.props.errorMessage !== 'undefined' && this.props.errorMessage !== null && this.props.errorMessage !== '') {
       return (
-        <div style={{ paddingBottom: '8px' }}><div aria-live='assertive' className='ms-u-screenReaderOnly' data-automation-id='error-message'>{this.props.errorMessage}</div>
-          <span>
-            <p className='ms-TextField-errorMessage ms-u-slideDownIn20'>{this.props.errorMessage}</p>
-          </span>
+        <div aria-live="assertive">
+          <p className={`ms-TextField-errorMessage ${styles.errorMessage}`}>
+            <Icon iconName='Error' className={styles.errorIcon} />
+            <span data-automation-id="error-message">{this.props.errorMessage}</span>
+          </p>
         </div>
       );
     } else {
-      return <div />;
+      return null;
     }
   }
 }