React teams tab suggested members (#687)

* webpart added

* added readme notes

samples/react-teams-tab-suggested-members/.editorconfig

@@ -0,0 +1,25 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 2

samples/react-teams-tab-suggested-members/.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+solution
+temp
+*.sppkg
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

samples/react-teams-tab-suggested-members/.yo-rc.json

@@ -0,0 +1,13 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": true,
+    "isCreatingSolution": true,
+    "environment": "spo",
+    "version": "1.7.0",
+    "libraryName": "react-teams-tab-suggested-members",
+    "libraryId": "92512f5a-276b-437b-ad19-85446530008f",
+    "packageManager": "npm",
+    "isDomainIsolated": false,
+    "componentType": "webpart"
+  }
+}

samples/react-teams-tab-suggested-members/README.md

@@ -0,0 +1,48 @@
+# Spfx Webpart / Teams tab Group members suggestion
+
+## Summary
+This webpart uses Graph API to suggest you members to add to a group (based on People endpoint), so you can easily add those members to the Group / Teams. It can be used as a SharePoint webpart or Teams tab
+
+![Suggested Group Members Teams Tab](./assets/SuggestedMembersTeamsTab.jpg)
+
+## Used SharePoint Framework Version
+
+![SPFx v1.7.0](https://img.shields.io/badge/SPFx-1.7.0-green.svg)
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+react-teams-tab-suggested-members|Luis Mañez (MVP, [ClearPeople](http://www.clearpeople.com), @luismanez)
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0.0|Nov 18, 2018|Initial release
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+---
+
+## Minimal Path to Awesome
+
+* clone repo
+* gulp bundle --ship
+* gulp package-solution --ship
+* deploy package to SharePoint App Catalog (check tenant deploy)
+* gulp package-teams (custom gulp task to zip the Teams folder)
+* follow Teams deployment instructions from here: [https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab#packaging-and-deploying-your-web-part-as-a-microsoft-teams-tab](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab#packaging-and-deploying-your-web-part-as-a-microsoft-teams-tab)
+
+## Features
+
+This sample illustrates the following concepts on top of the SharePoint Framework:
+
+* __Teams__ tab webpart using ReactJS
+* Using __GraphClient__ to call _/me/people_
+* Graph API __Batch request__ to add members to a Group
+* Gulp custom task to zip Teams folder
+* Using _async / await_ for the async calls
+* Office UI fabric PeoplePicker

samples/react-teams-tab-suggested-members/config/config.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "suggested-team-members-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/suggestedTeamMembers/SuggestedTeamMembersWebPart.js",
+          "manifest": "./src/webparts/suggestedTeamMembers/SuggestedTeamMembersWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "SuggestedTeamMembersWebPartStrings": "lib/webparts/suggestedTeamMembers/loc/{locale}.js"
+  }
+}

samples/react-teams-tab-suggested-members/config/copy-assets.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
+  "deployCdnPath": "temp/deploy"
+}

samples/react-teams-tab-suggested-members/config/deploy-azure-storage.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./temp/deploy/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "react-teams-tab-suggested-members",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/react-teams-tab-suggested-members/config/package-solution.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "react-teams-tab-suggested-members-client-side-solution",
+    "id": "92512f5a-276b-437b-ad19-85446530008f",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false
+  },
+  "paths": {
+    "zippedPackage": "solution/react-teams-tab-suggested-members.sppkg"
+  }
+}

samples/react-teams-tab-suggested-members/config/serve.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "initialPage": "https://localhost:5432/workbench",
+  "api": {
+    "port": 5432,
+    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
+  }
+}

samples/react-teams-tab-suggested-members/config/write-manifests.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

samples/react-teams-tab-suggested-members/gulpfile.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const gulp = require('gulp');
+const zip = require('gulp-zip');
+const del = require('del');
+
+const build = require('@microsoft/sp-build-web');
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+const deleteTeamsPkg = build.subTask('delete-teams-package', function (gulp, buildConfig, done) {
+  return del([
+    './teams/*.zip',
+  ]);
+});
+
+const zipTeamsPkg = build.subTask('package-teams-subtask', function (gulp, buildConfig, done) {
+  const zipFileName = `${build.packageSolution.taskConfig.solution.name}.zip`;
+
+  gulp.src('./teams/*')
+        .pipe(zip(zipFileName))
+        .pipe(gulp.dest('./teams'))
+
+  done();
+});
+
+var tasksSerie = build.serial([deleteTeamsPkg, zipTeamsPkg]);
+build.task("package-teams", tasksSerie);
+
+build.initialize(gulp);

samples/react-teams-tab-suggested-members/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "react-teams-tab-suggested-members",
+  "version": "0.0.1",
+  "private": true,
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test"
+  },
+  "dependencies": {
+    "react": "16.3.2",
+    "react-dom": "16.3.2",
+    "@types/react": "16.4.2",
+    "@types/react-dom": "16.0.5",
+    "@microsoft/sp-core-library": "1.7.0-plusbeta",
+    "@microsoft/sp-webpart-base": "1.7.0-plusbeta",
+    "@microsoft/sp-lodash-subset": "1.7.0-plusbeta",
+    "@microsoft/sp-office-ui-fabric-core": "1.7.0-plusbeta",
+    "@types/webpack-env": "1.13.1",
+    "@types/es6-promise": "0.0.33"
+  },
+  "devDependencies": {
+    "@microsoft/sp-build-web": "1.7.0-plusbeta",
+    "@microsoft/sp-tslint-rules": "1.7.0-plusbeta",
+    "@microsoft/sp-module-interfaces": "1.7.0-plusbeta",
+    "@microsoft/sp-webpart-workbench": "1.7.0-plusbeta",
+    "gulp": "~3.9.1",
+    "@types/chai": "3.4.34",
+    "@types/mocha": "2.2.38",
+    "ajv": "~5.2.2",
+    "del": "^3.0.0",
+    "gulp-zip": "^4.2.0"
+  }
+}

samples/react-teams-tab-suggested-members/src/index.ts

@@ -0,0 +1 @@
+// A file is required to be in the root of the /src directory by the TypeScript compiler

samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/SuggestedTeamMembersWebPart.manifest.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "1a1beec1-a231-48d3-bc99-41329b0c83cb",
+  "alias": "SuggestedTeamMembersWebPart",
+  "componentType": "WebPart",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "SuggestedTeamMembers" },
+    "description": { "default": "Webpart or Teams tab that shows you some suggested members for the Group using Graph API" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "description": "SuggestedTeamMembers"
+    }
+  }]
+}

samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/SuggestedTeamMembersWebPart.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { Version } from '@microsoft/sp-core-library';
+import {
+  BaseClientSideWebPart,
+  IPropertyPaneConfiguration,
+  PropertyPaneTextField
+} from '@microsoft/sp-webpart-base';
+
+import * as strings from 'SuggestedTeamMembersWebPartStrings';
+import SuggestedTeamMembers from './components/SuggestedTeamMembers';
+import { ISuggestedTeamMembersProps } from './components/ISuggestedTeamMembersProps';
+
+export interface ISuggestedTeamMembersWebPartProps {
+  description: string;
+}
+
+export default class SuggestedTeamMembersWebPart extends BaseClientSideWebPart<ISuggestedTeamMembersWebPartProps> {
+
+  private _teamsContext: microsoftTeams.Context;
+
+  protected onInit(): Promise<any> {
+    let retVal: Promise<any> = Promise.resolve();
+    if (this.context.microsoftTeams) {
+      retVal = new Promise((resolve, reject) => {
+        this.context.microsoftTeams.getContext(context => {
+          this._teamsContext = context;
+          resolve();
+        });
+      });
+    }
+    return retVal;
+  }
+
+  public render(): void {
+    const element: React.ReactElement<ISuggestedTeamMembersProps > = React.createElement(
+      SuggestedTeamMembers,
+      {
+        teamsContext: this._teamsContext,
+        graphHttpClient: this.context.graphHttpClient,
+        groupId: this.context.pageContext.site.group.id
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneTextField('description', {
+                  label: strings.DescriptionFieldLabel
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}

samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/ISuggestedTeamMembersProps.ts

@@ -0,0 +1,21 @@
+import { GraphHttpClient } from "@microsoft/sp-http";
+import { Guid } from "@microsoft/sp-core-library";
+
+export interface ISuggestedTeamMembersProps {
+  teamsContext: microsoftTeams.Context;
+  graphHttpClient: GraphHttpClient;
+  groupId: string;
+}
+
+export interface ISuggestedTeamMembersState {
+  people: IPerson[];
+}
+
+export interface IPerson {
+  displayName: string;
+  id: Guid;
+  jobTitle: string;
+  officeLocation: string;
+  userPrincipalName: string;
+}
+

samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/MembersPicker.tsx

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import { IPerson } from './ISuggestedTeamMembersProps';
+import styles from './SuggestedTeamMembers.module.scss';
+
+import { IPersonaProps, Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';
+import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types';
+import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+
+import {
+  CompactPeoplePicker,
+  IBasePickerSuggestionsProps,
+  IBasePicker,
+  ListPeoplePicker,
+  NormalPeoplePicker,
+  ValidationState
+} from 'office-ui-fabric-react/lib/Pickers';
+import { GraphHttpClient, GraphHttpClientResponse, IGraphHttpClientOptions } from '@microsoft/sp-http';
+import { Label } from 'office-ui-fabric-react/lib/Label';
+
+export interface IMembersPickerProps {
+  people: IPerson[];
+  groupId: string;
+  graphHttpClient: GraphHttpClient;
+}
+
+export interface IMembersPickerState {
+  peopleList: IPersonaProps[];
+  currentSelectedItems?: IPersonaProps[];
+  resultAddMembers: string;
+}
+
+const suggestionProps: IBasePickerSuggestionsProps = {
+  suggestionsHeaderText: 'Suggested People',
+  mostRecentlyUsedHeaderText: 'Suggested Contacts',
+  noResultsFoundText: 'No results found',
+  loadingText: 'Loading',
+  showRemoveButtons: true,
+  suggestionsAvailableAlertText: 'People Picker Suggestions available',
+  suggestionsContainerAriaLabel: 'Suggested contacts'
+};
+
+export default class MembersPicker extends React.Component<IMembersPickerProps, IMembersPickerState> {
+
+  constructor(props: IMembersPickerProps) {
+    super(props);
+
+    const peopleList: IPersonaWithMenu[] = [];
+
+    this.props.people.forEach((persona: IPerson) => {
+      const target: IPersonaWithMenu = {};
+
+      target.size = PersonaSize.small;
+      target.text = persona.displayName;
+      target.optionalText = persona.id.toString();
+      target.secondaryText = persona.jobTitle;
+
+      peopleList.push(target);
+    });
+
+    this.state = {
+      peopleList: peopleList,
+      currentSelectedItems: [],
+      resultAddMembers: null
+    };
+  }
+
+  private _onItemsChange = (items: any[]): void => {
+    this.setState({
+      currentSelectedItems: items
+    });
+  }
+
+  private _filterPromise(personasToReturn: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> {
+      return personasToReturn;
+  }
+
+  private _doesTextStartWith(text: string, filterText: string): boolean {
+    return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
+  }
+
+  private _listContainsPersona(persona: IPersonaProps, personas: IPersonaProps[]) {
+    if (!personas || !personas.length || personas.length === 0) {
+      return false;
+    }
+    return personas.filter(item => item.text === persona.text).length > 0;
+  }
+
+  private _removeDuplicates(personas: IPersonaProps[], possibleDupes: IPersonaProps[]) {
+    return personas.filter(persona => !this._listContainsPersona(persona, possibleDupes));
+  }
+
+  private _filterPersonasByText(filterText: string): IPersonaProps[] {
+    return this.state.peopleList.filter(item => this._doesTextStartWith(item.text as string, filterText));
+  }
+
+  private _onFilterChanged = (
+    filterText: string,
+    currentPersonas: IPersonaProps[],
+    limitResults?: number
+  ): IPersonaProps[] | Promise<IPersonaProps[]> => {
+    if (filterText) {
+      let filteredPersonas: IPersonaProps[] = this._filterPersonasByText(filterText);
+
+      filteredPersonas = this._removeDuplicates(filteredPersonas, currentPersonas);
+      filteredPersonas = limitResults ? filteredPersonas.splice(0, limitResults) : filteredPersonas;
+      return this._filterPromise(filteredPersonas);
+    } else {
+      return [];
+    }
+  }
+
+  private _getTextFromItem(persona: IPersonaProps): string {
+    return persona.text as string;
+  }
+
+  public render(): React.ReactElement<IMembersPickerProps> {
+
+    const controlledItems = [];
+
+    const peopleLength = this.state.peopleList.length;
+    for (let i = 0; i < peopleLength; i++) {
+      const item = this.state.peopleList[i];
+      if (this.state.currentSelectedItems!.indexOf(item) === -1) {
+        controlledItems.push(this.state.peopleList[i]);
+      }
+    }
+    return (
+      <div>
+        <NormalPeoplePicker
+          onResolveSuggestions={this._onFilterChanged}
+          getTextFromItem={this._getTextFromItem}
+          pickerSuggestionsProps={suggestionProps}
+          className={'ms-PeoplePicker'}
+          key={'controlled'}
+          selectedItems={this.state.currentSelectedItems}
+          onChange={this._onItemsChange}
+          resolveDelay={300}
+        />
+
+        <p><label> Click to Add a person </label></p>
+
+        {controlledItems.map((item, index) => (
+          <div key={index}>
+            <DefaultButton
+              className={styles.controlledPickerButton}
+              // tslint:disable-next-line:jsx-no-lambda
+              onClick={() => {
+                this.setState({
+                  currentSelectedItems: this.state.currentSelectedItems!.concat([item])
+                });
+              }}
+            >
+              <Persona {...item} />
+            </DefaultButton>
+          </div>
+        ))}
+
+        <PrimaryButton
+          text="Add selected members"
+          onClick={() => { this._addGroupMembers(); }}
+         />
+
+        <Label>{this.state.resultAddMembers}</Label>
+      </div>
+    );
+  }
+
+  private async _addGroupMembers() : Promise<void> {
+    const requests = [];
+    this.state.currentSelectedItems.map(p => {
+      requests.push({
+        id: p.optionalText,
+        url: `groups/${this.props.groupId}/members/$ref`,
+        method: "POST",
+        body: {
+          "@odata.id": `https://graph.microsoft.com/beta/directoryObjects/${p.optionalText}`
+        },
+        headers: {
+          "Content-Type": "application/json"
+        }
+      });
+    });
+
+    const body: any = {
+      requests: requests
+    };
+
+    var options: IGraphHttpClientOptions = {
+      body: JSON.stringify(body)
+    };
+
+    var response: GraphHttpClientResponse = await this.props.graphHttpClient.post('v1.0/$batch', GraphHttpClient.configurations.v1, options);
+    var responseJson: string = await response.json();
+
+    console.log(responseJson);
+
+    this.setState({
+      resultAddMembers: "Members added to the group successfully"
+    });
+  }
+
+}

samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/SuggestedTeamMembers.module.scss

@@ -0,0 +1,20 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.suggestedTeamMembers {
+
+  .controlledPickerButton {
+    height: auto;
+    padding: 5px;
+    background-color: white;
+  }
+}
+
+:global {
+  .dropdown-div {
+    width: 200px;
+  }
+
+  .ms-PeoplePicker {
+    width: 100%;
+  }
+}

samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/SuggestedTeamMembers.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import styles from './SuggestedTeamMembers.module.scss';
+import { ISuggestedTeamMembersProps, ISuggestedTeamMembersState, IPerson } from './ISuggestedTeamMembersProps';
+import { escape } from '@microsoft/sp-lodash-subset';
+import { GraphHttpClientResponse, GraphHttpClient } from '@microsoft/sp-http';
+import { IPersonaSharedProps, Persona, PersonaSize, IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
+import { DefaultButton, PrimaryButton, IButtonProps, ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { Label } from 'office-ui-fabric-react/lib/Label';
+import { Guid } from '@microsoft/sp-core-library';
+import MembersPicker from './MembersPicker';
+
+export default class SuggestedTeamMembers extends React.Component<ISuggestedTeamMembersProps, ISuggestedTeamMembersState> {
+
+  constructor(props: ISuggestedTeamMembersProps) {
+    super(props);
+
+    this.state = {
+      people: []
+    };
+  }
+
+  public componentDidMount(): void {
+    this._getMyPeople().then(people => {
+      this.setState({
+        people: people
+      });
+    });
+  }
+
+  private async _getMyPeople(): Promise<IPerson[]> {
+    const query: string = "v1.0/me/people?$filter=personType/class eq 'Person'";
+
+    const response: GraphHttpClientResponse = await this.props.graphHttpClient.get(
+      query,
+      GraphHttpClient.configurations.v1);
+    const responseJson: any = await response.json();
+
+    const people: IPerson[] = responseJson.value.map(item => {
+      const person: IPerson = {
+        id: item.id,
+        displayName: item.displayName,
+        jobTitle: item.jobTitle,
+        officeLocation: item.officeLocation,
+        userPrincipalName: item.userPrincipalName
+      };
+      return person;
+    });
+
+    return people;
+  }
+
+  public render(): React.ReactElement<ISuggestedTeamMembersProps> {
+
+    if (this.state.people == null || this.state.people.length === 0) {
+      return <div>Loading data...</div>;
+    }
+
+    return <div className={styles.suggestedTeamMembers}>
+      <p>These are suggested members to add to the group...</p>
+      <MembersPicker
+        people = {this.state.people}
+        groupId = {this.props.groupId}
+        graphHttpClient={this.props.graphHttpClient}
+      />
+    </div>;
+  }
+}

samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/loc/en-us.js

@@ -0,0 +1,7 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "Description",
+    "BasicGroupName": "Group Name",
+    "DescriptionFieldLabel": "Description Field"
+  }
+});

samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/loc/mystrings.d.ts

@@ -0,0 +1,10 @@
+declare interface ISuggestedTeamMembersWebPartStrings {
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  DescriptionFieldLabel: string;
+}
+
+declare module 'SuggestedTeamMembersWebPartStrings' {
+  const strings: ISuggestedTeamMembersWebPartStrings;
+  export = strings;
+}

samples/react-teams-tab-suggested-members/teams/manifest.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.2",
+  "packageName": "SuggestedTeamMembers",
+  "id": "1a1beec1-a231-48d3-bc99-41329b0c83cb",
+  "version": "0.1",
+  "developer": {
+    "name": "SPFx + Teams Dev",
+    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
+    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
+  },
+  "name": {
+    "short": "SuggestedTeamMembers"
+  },
+  "description": {
+    "short": "Shows you some suggested members for the Group using Graph API",
+    "full": "Webpart or Teams tab that shows you some suggested members for the Group using Graph API"
+  },
+  "icons": {
+    "outline": "tab20x20.png",
+    "color": "tab96x96.png"
+  },
+  "accentColor": "#004578",
+  "configurableTabs": [
+    {
+      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=1a1beec1-a231-48d3-bc99-41329b0c83cb",
+      "canUpdateConfiguration": false,
+      "scopes": [
+        "team"
+      ]
+    }
+  ],
+  "validDomains": [
+    "*.login.microsoftonline.com",
+    "*.sharepoint.com",
+    "*.sharepoint-df.com",
+    "spoppe-a.akamaihd.net",
+    "spoprod-a.akamaihd.net",
+    "resourceseng.blob.core.windows.net",
+    "msft.spoppe.com"
+  ],
+  "webApplicationInfo": {
+    "resource": "https://{teamSiteDomain}",
+    "id": "00000003-0000-0ff1-ce00-000000000000"
+  }
+}

samples/react-teams-tab-suggested-members/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "declaration": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "outDir": "lib",
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@microsoft"
+    ],
+    "types": [
+      "es6-promise",
+      "webpack-env"
+    ],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}

samples/react-teams-tab-suggested-members/tslint.json

@@ -0,0 +1,30 @@
+{
+  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "rules": {
+    "class-name": false,
+    "export-name": false,
+    "forin": false,
+    "label-position": false,
+    "member-access": true,
+    "no-arg": false,
+    "no-console": false,
+    "no-construct": false,
+    "no-duplicate-variable": true,
+    "no-eval": false,
+    "no-function-expression": true,
+    "no-internal-module": true,
+    "no-shadowed-variable": true,
+    "no-switch-case-fall-through": true,
+    "no-unnecessary-semicolons": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-with-statement": true,
+    "semicolon": true,
+    "trailing-comma": false,
+    "typedef": false,
+    "typedef-whitespace": false,
+    "use-named-parameter": true,
+    "variable-name": false,
+    "whitespace": false
+  }
+}