Merge pull request #1264 from plamber/master

tutorials/api-scopes/.yo-rc.json

@@ -1,11 +1,12 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.6.0",
+    "version": "1.10.0",
     "libraryName": "spfx-api-scopes-tutorial",
     "libraryId": "6b58cc7d-badc-4721-bfe2-9e4d91efd07c",
     "environment": "spo",
-    "isCreatingSolution": true,
     "packageManager": "npm",
+    "isCreatingSolution": true,
+    "isDomainIsolated": true,
     "componentType": "webpart"
   }
 }

tutorials/api-scopes/README.md

@@ -2,7 +2,7 @@
 
 ## Summary
 
-This sub folders contains a client-side project that is related to the tutorial available at the following URL: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aad-tutorial
+This sub-folder contains a client-side project that is related to the tutorial available at the following URL: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aad-tutorial
 
 ![The UI of the sample application](./images/api-scopes.gif)
 
@@ -16,8 +16,9 @@ This sub folders contains a client-side project that is related to the tutorial
 
 | Version  | Date | Comments |
 | ------------- | ------------- | ------------- |
-| 1.0.0  | August 28th 2018     | Updated sample to SPFx v1.6.0 |
-| 1.0.0  | February 18th 2018   | Initial release |
+| 1.0.0  | April 29th, 2020      | Updated sample to SPFx v1.10.0 |
+| 1.0.0  | August 28th, 2018     | Updated sample to SPFx v1.6.0 |
+| 1.0.0  | February 18th, 2018   | Initial release |
 
 ## Disclaimer
 

tutorials/api-scopes/config/package-solution.json

@@ -6,6 +6,7 @@
     "version": "1.0.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
     "webApiPermissionRequests": [
       {
         "resource": "Microsoft Graph",

tutorials/api-scopes/gulpfile.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const gulp = require('gulp');
 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.`);
 
-build.initialize(gulp);
+build.initialize(require('gulp'));

tutorials/api-scopes/package.json

@@ -2,6 +2,7 @@
   "name": "spfx-api-scopes-tutorial",
   "version": "0.0.1",
   "private": true,
+  "main": "lib/index.js",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -11,25 +12,31 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.6.0",
-    "@microsoft/sp-lodash-subset": "1.6.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.6.0",
-    "@microsoft/sp-webpart-base": "1.6.0",
-    "@types/es6-promise": "0.0.33",
-    "@types/react": "15.6.6",
-    "@types/react-dom": "15.5.6",
+    "react": "16.8.5",
+    "react-dom": "16.8.5",
+    "@types/react": "16.8.8",
+    "@types/react-dom": "16.8.3",
+    "office-ui-fabric-react": "6.189.2",
+    "@microsoft/sp-core-library": "1.10.0",
+    "@microsoft/sp-property-pane": "1.10.0",
+    "@microsoft/sp-webpart-base": "1.10.0",
+    "@microsoft/sp-lodash-subset": "1.10.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
     "@types/webpack-env": "1.13.1",
-    "react": "15.6.2",
-    "react-dom": "15.6.2"
+    "@types/es6-promise": "0.0.33"
+  },
+  "resolutions": {
+    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.6.0",
-    "@microsoft/sp-module-interfaces": "1.6.0",
-    "@microsoft/sp-webpart-workbench": "1.6.0",
+    "@microsoft/sp-build-web": "1.10.0",
+    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-module-interfaces": "1.10.0",
+    "@microsoft/sp-webpart-workbench": "1.10.0",
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
+    "gulp": "~3.9.1",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
-    "ajv": "~5.2.2",
-    "gulp": "~3.9.1",
-    "tslint-microsoft-contrib": "5.0.0"
+    "ajv": "~5.2.2"
   }
 }

tutorials/api-scopes/src/webparts/graphConsumer/GraphConsumerWebPart.manifest.json

@@ -12,6 +12,7 @@
   // 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,
+  "supportedHosts": ["SharePointWebPart"],
 
   "preconfiguredEntries": [{
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other

tutorials/api-scopes/src/webparts/graphConsumer/GraphConsumerWebPart.ts

@@ -19,7 +19,7 @@ export interface IGraphConsumerWebPartProps {
 export default class GraphConsumerWebPart extends BaseClientSideWebPart<IGraphConsumerWebPartProps> {
 
   public render(): void {
-    const element: React.ReactElement<IGraphConsumerProps > = React.createElement(
+    const element: React.ReactElement<IGraphConsumerProps> = React.createElement(
       GraphConsumer,
       {
         clientMode: this.properties.clientMode,

tutorials/api-scopes/src/webparts/graphConsumer/components/GraphConsumer.module.scss

@@ -1,4 +1,4 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import '~office-ui-fabric-react/dist/sass/_References.scss';
 
 .graphConsumer {
   .container {

tutorials/api-scopes/src/webparts/graphConsumer/components/GraphConsumer.tsx

@@ -6,18 +6,16 @@ import { IGraphConsumerState } from './IGraphConsumerState';
 import { ClientMode } from './ClientMode';
 import { IUserItem } from './IUserItem';
 import { escape } from '@microsoft/sp-lodash-subset';
-
 import {
-  autobind,
   PrimaryButton,
   TextField,
-  Label,
   DetailsList,
   DetailsListLayoutMode,
   CheckboxVisibility,
-  SelectionMode
+  SelectionMode,
+  BaseButton,
+  Button
 } from 'office-ui-fabric-react';
-
 import { AadHttpClient, MSGraphClient } from "@microsoft/sp-http";
 
 // Configure the columns for the DetailsList component
@@ -79,9 +77,9 @@ export default class GraphConsumer extends React.Component<IGraphConsumerProps,
                 <TextField 
                     label={ strings.SearchFor } 
                     required={ true } 
-                    value={ this.state.searchFor }
-                    onChanged={ this._onSearchForChanged }
+                    onChange={ this._onSearchForChanged }
                     onGetErrorMessage={ this._getSearchForErrorMessage }
+                    value={ this.state.searchFor }
                   />
               </p>
               <p className={ styles.form }>
@@ -113,8 +111,7 @@ export default class GraphConsumer extends React.Component<IGraphConsumerProps,
     );
   }
 
-  @autobind
-  private _onSearchForChanged(newValue: string): void {
+  private _onSearchForChanged = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {
  
     // Update the component state accordingly to the current user's input
     this.setState({
@@ -129,9 +126,7 @@ export default class GraphConsumer extends React.Component<IGraphConsumerProps,
       : `${strings.SearchForValidationErrorMessage}`;
   }
 
-  @autobind
-  private _search(): void {
-
+  private _search = (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button, MouseEvent>) : void => {
     console.log(this.props.clientMode);
 
     // Based on the clientMode value search users

tutorials/api-scopes/tsconfig.json

@@ -1,15 +1,19 @@
 {
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
+    "moduleResolution": "node",
     "jsx": "react",
     "declaration": true,
     "sourceMap": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
     "skipLibCheck": true,
     "outDir": "lib",
+    "inlineSources": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
     "typeRoots": [
       "./node_modules/@types",
       "./node_modules/@microsoft"

tutorials/api-scopes/tslint.json

@@ -1,7 +1,5 @@
 {
-  "rulesDirectory": [
-    "tslint-microsoft-contrib"
-  ],
+  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
   "rules": {
     "class-name": false,
     "export-name": false,