Merge pull request #314 from pnp/dev

Merge for 2.2.0

CHANGELOG.json

@@ -1,5 +1,18 @@
 {
   "versions": [
+    {
+      "version": "2.2.0",
+      "changes": {
+        "new": [
+          "`PropertyFieldTeamPicker`: new Teams picker control [#303](https://github.com/pnp/sp-dev-fx-property-controls/pull/303)"
+        ],
+        "enhancements": [],
+        "fixes": []
+      },
+      "contributions": [
+        "[João Mendes](https://github.com/joaojmendes)"
+      ]
+    },
     {
       "version": "2.1.1",
       "changes": {

config/package-solution.json

@@ -6,7 +6,15 @@
     "version": "1.0.0.0",
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
-    "includeClientSideAssets": true
+    "includeClientSideAssets": true,
+    "webApiPermissionRequests": [
+      {
+      "resource": "Microsoft Graph",
+      "scope": "Team.ReadBasic.All"
+    }, {
+      "resource": "Microsoft Graph",
+      "scope": "Files.Read"
+    }]
   },
   "paths": {
     "zippedPackage": "solution/sp-dev-fx-property-controls.sppkg"

docs/documentation/docs/controls/PropertyFieldSitePicker.md

@@ -53,9 +53,9 @@ The `PropertyFieldSitePicker` control can be configured with the following prope
 | label | string | yes | Property field label displayed on top. |
 | disabled | boolean | no | Specify if the control needs to be disabled. |
 | context | WebPartContext | yes | Context of the current web part. |
-| initialSites | IPropertyFieldGroupOrPerson[] | no | Intial sites to load in the site picker (optional). |
-| multiSelect | boolean | no | Define if you want to allow multi sites selection. (optional, false by default). |
-| onPropertyChange | function | yes | Defines a onPropertyChange function to raise when the sites get changed. |
+| initialSites | IPropertyFieldSite[] | no | Intial sites to load in the site picker (optional). |
+| multiSelect | boolean | no | Define if you want to allow multiple sites selection. (optional, false by default). |
+| onPropertyChange | function | yes | Defines a `onPropertyChange` function to raise when the sites get changed. |
 | properties | any | yes | Parent web part properties, this object is use to update the property value. |
 | key | string | yes | An unique key that indicates the identity of this control. |
 | onGetErrorMessage | function | no | The method is used to get the validation error message and determine whether the input value is valid or not. See [this documentation](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/validate-web-part-property-values) to learn how to use it. |

docs/documentation/docs/controls/PropertyFieldTeamPicker.md

@@ -0,0 +1,88 @@
+# PropertyFieldTeamPicker control
+This control generates a team picker that can be used in the property pane of your SharePoint Framework web parts.
+
+**Searching for teams**
+
+![Site picker](../assets/teampicker.png)
+
+**Selected teams**
+
+![Site picker](../assets/teampicker-selected.png)
+
+## How to use this control in your solutions
+
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../../#getting-started) page for more information about installing the dependency.
+2. Request Microsoft Graph permissions in `config/package-solution.json`:
+```json
+{
+  "solution": {
+    "webApiPermissionRequests": [
+      {
+      "resource": "Microsoft Graph",
+      "scope": "Team.ReadBasic.All"
+    }, {
+      "resource": "Microsoft Graph",
+      "scope": "Files.Read"
+    }]
+  }
+}
+```
+!!! Note
+    `Team.ReadBasic.All` and `Files.Read` is a minimum set of permissions needed for the component. For other options please see [List Joined Teams](https://docs.microsoft.com/en-us/graph/api/user-list-joinedteams?view=graph-rest-1.0&tabs=http) and [Get Drive](https://docs.microsoft.com/en-us/graph/api/drive-get?view=graph-rest-1.0&tabs=http) documentation.
+
+3. Import the following modules to your component:
+
+```TypeScript
+import { PropertyFieldSitePicker } from '@pnp/spfx-property-controls/lib/PropertyFieldSitePicker';
+```
+
+4. Create a new property for your web part, for example:
+
+```TypeScript
+import { IPropertyFieldTeam } from '../../PropertyFieldTeamPicker';
+
+export interface IPropertyControlsTestWebPartProps {
+  teams: IPropertyFieldTeam[];
+}
+```
+
+5. Add the custom property control to the `groupFields` of the web part property pane configuration:
+
+```TypeScript
+PropertyFieldTeamPicker('teams', {
+  key: 'teamsPicker',
+  context: this.context,
+  label: 'Select teams',
+  onPropertyChange: this.onPropertyPaneFieldChanged,
+  properties: this.properties,
+  initialTeams: this.properties.teams,
+  multiSelect: true
+})
+```
+
+## Implementation
+
+The `PropertyFieldTeamPicker` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| label | string | yes | Property field label displayed on top. |
+| disabled | boolean | no | Specify if the control needs to be disabled. |
+| context | WebPartContext | yes | Context of the current web part. |
+| initialTeams | IPropertyFieldTeam[] | no | Initial teams to load in the site picker (optional). |
+| multiSelect | boolean | no | Define if you want to allow multiple teams selection. (optional, false by default). |
+| onPropertyChange | function | yes | Defines a `onPropertyChange` function to raise when the teams get changed. |
+| properties | any | yes | Parent web part properties, this object is used to update the property value. |
+| key | string | yes | An unique key that indicates the identity of this control. |
+| onGetErrorMessage | function | no | The method is used to get the validation error message and determine whether the input value is valid or not. See [this documentation](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/validate-web-part-property-values) to learn how to use it. |
+| deferredValidationTime | number | no | Control will start to validate after users stop typing for `deferredValidationTime` milliseconds. Default value is 200. |
+
+Interface `IPropertyFieldTeam`
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| id | string | no | The ID of the team (group) |
+| title | string | no | Teams's display name |
+| url | string | no | URL to the underlying site |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/PropertyFieldTeamPicker)

docs/documentation/docs/index.md

@@ -70,6 +70,7 @@ The following controls are currently available:
 - [PropertyFieldSpinButton](./controls/PropertyFieldSpinButton) (Property pane spin button)
 - [PropertyFieldSpinner](./controls/PropertyFieldSpinButton) (Property pane spinner)
 - [PropertyFieldSwatchColorPicker](./controls/PropertyFieldSwatchColorPicker) (Property pane color selector)
+- [PropertyFieldTeamPicker](./controls/PropertyFieldTeamPicker) (Property pane team selector)
 - [PropertyFieldTermPicker](./controls/PropertyFieldTermPicker) (Property pane managed metadata term selector)
 - [PropertyFieldEnterpriseTermPicker](./controls/PropertyFieldEnterpriseTermPicker) (Property pane managed metadata term selector for enterprise scenarios)
 - [PropertyFieldViewPicker](./controls/PropertyFIeldViewPicker) (Property pane view selector)

docs/documentation/mkdocs.yml

@@ -23,6 +23,7 @@ nav:
     - PropertyFieldSpinButton: 'controls/PropertyFieldSpinButton.md'
     - PropertyFieldSpinner: 'controls/PropertyFieldSpinner.md'
     - PropertyFieldSwatchColorPicker: 'controls/PropertyFieldSwatchColorPicker.md'
+    - PropertyFieldTeamPicker: 'controls/PropertyFieldTeamPicker.md'
     - PropertyFieldTermPicker: 'controls/PropertyFieldTermPicker.md'
     - PropertyFieldViewPicker: 'controls/PropertyFieldViewPicker.md'
     - PropertyPaneMarkdownContent: 'controls/PropertyPaneMarkdownContent.md'

package.json

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

src/PropertyFieldTeamPicker.ts

@@ -0,0 +1 @@
+export * from './propertyFields/teamPicker/index';

src/helpers/GraphHelper.ts

@@ -0,0 +1,51 @@
+import { MSGraphClient } from '@microsoft/sp-http';
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+
+export interface IGraphBatchRequestItem {
+  id: string;
+  method: 'GET' | 'POST';
+  url: string;
+  dependsOn?: string[];
+  body?: {[key: string]: string};
+}
+
+export interface IGraphBatchResponseItem {
+  id: string;
+  status: number;
+  body: any;
+}
+
+const RequestsPerBatch = 10;
+
+export async function batch(batchRequestItems: IGraphBatchRequestItem[], version: string, context: WebPartContext): Promise<IGraphBatchResponseItem[]> {
+  const requestsCount = batchRequestItems.length;
+  const batchesCount = Math.ceil(requestsCount / RequestsPerBatch);
+  let batchIndex = 0;
+
+  const result: IGraphBatchResponseItem[] = [];
+
+  const client = await getGraphClient(context);
+
+  while (batchIndex < batchesCount) {
+    let start = batchIndex * RequestsPerBatch;
+    let end = start + RequestsPerBatch;
+    if (end > requestsCount) {
+      end = requestsCount;
+    }
+
+    const response = await client.api('/$batch').version(version).post({
+      requests: batchRequestItems.slice(start, end)
+    });
+
+    result.push(...response.responses);
+    batchIndex++;
+  }
+
+  return result;
+}
+
+export async function getGraphClient(context: WebPartContext): Promise<MSGraphClient> {
+  const client = await context.msGraphClientFactory.getClient();
+
+  return client;
+}

src/loc/bg-bg.js

@@ -79,6 +79,9 @@ define([], () => {
   "SitePickerSearchBoxPlaceholder": "Търсене...",
   "SitePickerNoResults": "Няма резултати от търсенето",
   "SitePickerSitesChosen": "Избран(и) уебсайт(и)",
+  "TeamPickerSearchBoxPlaceholder": "Търсене...",
+  "TeamPickerNoResults": "Няма резултати от търсенето",
+  "TeamPickerSitesChosen": "Избрани екипи",
   "AddFileButtonLabel": "Добавяне на файл",
   "AddImageButtonLabel": "Добавяне на изображение",
   "AriaCellValue": "{0} колона {1}",
@@ -190,6 +193,8 @@ define([], () => {
   "UploadLinkLabel": "Качите",
   "WebSearchLinkLabel": "Търсене в уеб",
   "Yes": "Да",
+  "StockImagesLinkLabel": "Изображения на склад",
+  "StockImagesHeader": "Изображения на склад",
   "DateTime": {
     "L_RelativeDateTime_AFewSecondsFuture": "След няколко секунди",
     "L_RelativeDateTime_AFewSeconds": "Преди няколко секунди",
@@ -219,6 +224,7 @@ define([], () => {
   "NewFolderNamePlaceholder": "Въведете името на вашата папка",
   "FolderFilterBoxPlaceholder": "Филтриране на папки по име",
   "FolderExplorerLoading": "Зареждане на папки...",
-  "FolderExplorerNoItems": "Тази папка няма никакви подпапки."
+  "FolderExplorerNoItems": "Тази папка няма никакви подпапки.",
+  "IncorrectGuidValidationMessage": "Въведете валиден GUID"
 };
-});
+});

src/loc/ca-es.js

@@ -79,6 +79,9 @@ define([], () => {
   "SitePickerSearchBoxPlaceholder": "Cerca...",
   "SitePickerNoResults": "Sense resultats de cerca",
   "SitePickerSitesChosen": "Llocs web seleccionats",
+  "TeamPickerSearchBoxPlaceholder": "Cerca...",
+  "TeamPickerNoResults": "Sense resultats de cerca",
+  "TeamPickerSitesChosen": "Equips seleccionats",
   "AddFileButtonLabel": "Afegeix un fitxer",
   "AddImageButtonLabel": "Afegeix una imatge",
   "AriaCellValue": "{0} columna, {1}",
@@ -190,6 +193,8 @@ define([], () => {
   "UploadLinkLabel": "Carregar",
   "WebSearchLinkLabel": "Cerca web",
   "Yes": "Sí",
+  "StockImagesLinkLabel": "Imatges d'estoc",
+  "StockImagesHeader": "Imatges d'estoc",
   "DateTime": {
     "L_RelativeDateTime_AFewSecondsFuture": "En pocs segons",
     "L_RelativeDateTime_AFewSeconds": "Fa uns segons",
@@ -219,6 +224,7 @@ define([], () => {
   "NewFolderNamePlaceholder": "Introduïu el nom de la carpeta",
   "FolderFilterBoxPlaceholder": "Filtra les carpetes pel seu nom",
   "FolderExplorerLoading": "S'estan carregant les carpetes...",
-  "FolderExplorerNoItems": "Aquesta carpeta no té subcarpetes."
+  "FolderExplorerNoItems": "Aquesta carpeta no té subcarpetes.",
+  "IncorrectGuidValidationMessage": "Introduïu un GUID vàlid"
 };
-});
+});

src/loc/da-dk.js

@@ -79,6 +79,9 @@ define([], () => {
   "SitePickerSearchBoxPlaceholder": "Søg...",
   "SitePickerNoResults": "Ingen søgeresultater",
   "SitePickerSitesChosen": "Hjemmeside(er) valgt",
+  "TeamPickerSearchBoxPlaceholder": "Søg...",
+  "TeamPickerNoResults": "Ingen søgeresultater",
+  "TeamPickerSitesChosen": "Hold valgt",
   "AddFileButtonLabel": "Tilføj fil",
   "AddImageButtonLabel": "Tilføj billede",
   "AriaCellValue": "{0} kolonne, {1}",
@@ -190,6 +193,8 @@ define([], () => {
   "UploadLinkLabel": "Uploade",
   "WebSearchLinkLabel": "Søgning på internettet",
   "Yes": "Ja",
+  "StockImagesLinkLabel": "Stock billeder",
+  "StockImagesHeader": "Stock billeder",
   "DateTime": {
     "L_RelativeDateTime_AFewSecondsFuture": "På få sekunder",
     "L_RelativeDateTime_AFewSeconds": "For et par sekunder siden",
@@ -219,6 +224,7 @@ define([], () => {
   "NewFolderNamePlaceholder": "Angiv navnet på din mappe",
   "FolderFilterBoxPlaceholder": "Filtrere mapper efter navn",
   "FolderExplorerLoading": "Indlæser mapper...",
-  "FolderExplorerNoItems": "Denne mappe har ingen undermapper."
+  "FolderExplorerNoItems": "Denne mappe har ingen undermapper.",
+  "IncorrectGuidValidationMessage": "Angiv et gyldigt GUID"
 };
-});
+});

src/loc/de-de.js

@@ -79,6 +79,9 @@ define([], () => {
   "SitePickerSearchBoxPlaceholder": "Suche...",
   "SitePickerNoResults": "Keine Suchergebnisse",
   "SitePickerSitesChosen": "Website(n) ausgewählt",
+  "TeamPickerSearchBoxPlaceholder": "Suche...",
+  "TeamPickerNoResults": "Keine Suchergebnisse",
+  "TeamPickerSitesChosen": "Teams(e) ausgewählt",
   "AddFileButtonLabel": "Datei hinzufügen",
   "AddImageButtonLabel": "Hinzufügen von Bildern",
   "AriaCellValue": "{0} Spalte, {1}",
@@ -190,6 +193,8 @@ define([], () => {
   "UploadLinkLabel": "Hochladen",
   "WebSearchLinkLabel": "Websuche",
   "Yes": "Ja",
+  "StockImagesLinkLabel": "Stockbilder",
+  "StockImagesHeader": "Stock Bilder",
   "DateTime": {
     "L_RelativeDateTime_AFewSecondsFuture": "In wenigen Sekunden",
     "L_RelativeDateTime_AFewSeconds": "vor ein paar Sekunden",
@@ -219,6 +224,7 @@ define([], () => {
   "NewFolderNamePlaceholder": "Geben Sie Ihren Ordnernamen ein",
   "FolderFilterBoxPlaceholder": "Filtern von Ordnern nach Namen",
   "FolderExplorerLoading": "Ordner werden geladen...",
-  "FolderExplorerNoItems": "Dieser Ordner hat keine Unterordner."
+  "FolderExplorerNoItems": "Dieser Ordner hat keine Unterordner.",
+  "IncorrectGuidValidationMessage": "Bitte geben Sie eine gültige GUID ein"
 };
-});
+});

src/loc/el-gr.js

@@ -79,6 +79,9 @@ define([], () => {
   "SitePickerSearchBoxPlaceholder": "Αναζήτηση...",
   "SitePickerNoResults": "Δεν υπάρχουν αποτελέσματα αναζήτησης",
   "SitePickerSitesChosen": "Επιλεγμένοι ιστότοποι",
+  "TeamPickerSearchBoxPlaceholder": "Αναζήτηση...",
+  "TeamPickerNoResults": "Δεν υπάρχουν αποτελέσματα αναζήτησης",
+  "TeamPickerSitesChosen": "Επιλεγμένες ομάδες",
   "AddFileButtonLabel": "Προσθήκη αρχείου",
   "AddImageButtonLabel": "Προσθήκη εικόνας",
   "AriaCellValue": "{0} στήλη, {1}",
@@ -190,6 +193,8 @@ define([], () => {
   "UploadLinkLabel": "Φορτώσετε",
   "WebSearchLinkLabel": "Αναζήτηση στο Web",
   "Yes": "Ναι",
+  "StockImagesLinkLabel": "Στοκ εικόνες",
+  "StockImagesHeader": "Στοκ Εικόνες",
   "DateTime": {
     "L_RelativeDateTime_AFewSecondsFuture": "Σε λίγα δευτερόλεπτα.",
     "L_RelativeDateTime_AFewSeconds": "Πριν από λίγα δευτερόλεπτα.",
@@ -219,6 +224,7 @@ define([], () => {
   "NewFolderNamePlaceholder": "Πληκτρολογήστε το όνομα του φακέλου σας",
   "FolderFilterBoxPlaceholder": "Φιλτράρισμα φακέλων με βάση το όνομα",
   "FolderExplorerLoading": "Φόρτωση φακέλων...",
-  "FolderExplorerNoItems": "Αυτός ο φάκελος δεν έχει υποφακέλους."
+  "FolderExplorerNoItems": "Αυτός ο φάκελος δεν έχει υποφακέλους.",
+  "IncorrectGuidValidationMessage": "Πληκτρολογήστε ένα έγκυρο GUID"
 };
-});
+});

src/loc/en-us.js

@@ -79,6 +79,9 @@ define([], function () {
     SitePickerSearchBoxPlaceholder: "Search...",
     SitePickerNoResults: "No search results",
     SitePickerSitesChosen: "Website(s) selected",
+    TeamPickerSearchBoxPlaceholder: "Search...",
+    TeamPickerNoResults: "No search results",
+    TeamPickerSitesChosen: "Teams(s) selected",
 
     AddFileButtonLabel: "Add file",
     AddImageButtonLabel: "Add image",
@@ -224,8 +227,8 @@ define([], function () {
     NewFolderNamePlaceholder: "Enter your folder name",
     FolderFilterBoxPlaceholder: "Filter folders by name",
     FolderExplorerLoading: "Loading folders...",
-    FolderExplorerNoItems: "This folder doesn't have any subfolders.",    
-    
+    FolderExplorerNoItems: "This folder doesn't have any subfolders.",
+
     IncorrectGuidValidationMessage: "Please enter a valid GUID"
   }
 });