Merge pull request #1559 from joelfmrodrigues/update-react-tenant-properties

samples/react-tenant-properties/.yo-rc.json

@@ -16,7 +16,7 @@
     "environment": "spo",
     "framework": "react",
     "isCreatingSolution": true,
-    "version": "1.7.1",
+    "version": "1.11.0",
     "libraryName": "react-tenant-properties",
     "libraryId": "d5bc38a6-0b5c-4644-9087-efa6de87ece1",
     "packageManager": "npm",

samples/react-tenant-properties/README.md

@@ -1,28 +1,35 @@
 # React Tenant Properties Web Part
 
 ## Summary
+
 This web part allows tenant administrators to manage tenant properties through a graphical interface.  
 We can create, edit or delete tenant properties.
 
 Only users with Tenant Admin Role are allowed to managed tenant properties.
-#### User without Tenant Admin Role got this message
+
+### User without Tenant Admin Role got this message
+
 ![tenant properties](./assets/TenantProperties5.jpg)
-#### List tenant properties
+
+### List tenant properties
+
 ![tenant properties](./assets/TenantProperties1.jpg)
 
-#### Add Tenant property
+### Add Tenant property
+
 ![tenant properties](./assets/TenantProperties2.jpg)
 
-#### Edit tenant property
+### Edit tenant property
+
 ![tenant properties](./assets/TenantProperties3.jpg)
 
-#### Delete tenant property
+### Delete tenant property
-![tenant properties](./assets/TenantProperties4.jpg)
 
+![tenant properties](./assets/TenantProperties4.jpg)
 
 ## Used SharePoint Framework Version
 
-![drop](https://img.shields.io/badge/version-1.7.1-green.svg)
+![SPFx 1.11](https://img.shields.io/badge/version-1.11.0-green.svg)
 
 ## Applies to
 
@@ -38,6 +45,7 @@ WebPart Title| Text| no|
  
 
 ## Solution
+
 The Web Part Use MSGraph API and need to SharePoint Administrator approve de scope "Directory.ReadWrite.All" in SharePoint Admin Center.
 
 Solution|Author(s)
@@ -49,8 +57,10 @@ Tenant Properties WebPart|João Mendes
 Version|Date|Comments
 -------|----|--------
 1.0.0|Mar 08, 2019|Initial release
+1.0.1|October 20, 2020|Update to SPFx 1.11.0
 
 ## 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.**
 
 ---
@@ -63,7 +73,7 @@ Version|Date|Comments
   - `gulp build`
   - `gulp bundle --ship`
   - `gulp package-solution --ship`
-  - `Add to AppCatalog and deploy`
+- Add to AppCatalog and deploy
-  - `Approve API permission on SharePoint Admin Center`
+- Approve API permission on SharePoint Admin Center
 
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-tenant-properties" />

samples/react-tenant-properties/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "react-tenant-properties-client-side-solution",
     "id": "d5bc38a6-0b5c-4644-9087-efa6de87ece1",
-    "version": "1.0.0.0",
+    "version": "1.0.1.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "webApiPermissionRequests": [
@@ -11,7 +11,14 @@
         "resource": "Microsoft Graph",
         "scope": "Directory.ReadWrite.All"
       }
-    ]
+    ],
+    "developer": {
+      "name": "Contoso",
+      "privacyUrl": "https://contoso.com/privacy",
+      "termsOfUseUrl": "https://contoso.com/terms-of-use",
+      "websiteUrl": "https://contoso.com/my-app",
+      "mpnId": "000000"
+    }
   },
   "paths": {
     "zippedPackage": "solution/react-tenant-properties.sppkg"

samples/react-tenant-properties/package.json

@@ -2,6 +2,7 @@
   "name": "react-tenant-properties",
   "version": "0.0.1",
   "private": true,
+  "main": "lib/index.js",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -15,30 +16,29 @@
   },
   "dependencies": {
     "@microsoft/office-ui-fabric-react-bundle": "^1.7.1",
-    "@microsoft/sp-core-library": "1.7.1",
+    "@microsoft/sp-core-library": "1.11.0",
-    "@microsoft/sp-lodash-subset": "1.7.1",
+    "@microsoft/sp-lodash-subset": "1.11.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.7.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
-    "@microsoft/sp-webpart-base": "1.7.1",
+    "@microsoft/sp-property-pane": "1.11.0",
+    "@microsoft/sp-webpart-base": "1.11.0",
     "@pnp/pnpjs": "^1.3.0",
     "@pnp/spfx-controls-react": "1.12.0",
     "@pnp/spfx-property-controls": "1.14.1",
-    "@types/es6-promise": "0.0.33",
     "@types/jquery": "^3.3.29",
-    "@types/react": "16.4.2",
-    "@types/react-dom": "16.0.5",
-    "@types/webpack-env": "1.13.1",
     "jquery": "^3.3.1",
-    "react": "16.3.2",
+    "office-ui-fabric-react": "6.214.0",
-    "react-dom": "16.3.2"
+    "react": "16.8.5",
+    "react-dom": "16.8.5"
   },
   "resolutions": {
-    "@types/react": "16.4.2"
+    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.7.1",
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-    "@microsoft/sp-module-interfaces": "1.7.1",
+    "@microsoft/sp-build-web": "1.11.0",
-    "@microsoft/sp-tslint-rules": "1.7.1",
+    "@microsoft/sp-module-interfaces": "1.11.0",
-    "@microsoft/sp-webpart-workbench": "1.7.1",
+    "@microsoft/sp-tslint-rules": "1.11.0",
+    "@microsoft/sp-webpart-workbench": "1.11.0",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
     "@voitanos/jest-preset-spfx-react16": "^1.1.0",

samples/react-tenant-properties/src/webparts/tenantProperties/TenantPropertiesWebPart.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

samples/react-tenant-properties/src/webparts/tenantProperties/TenantPropertiesWebPart.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version } from '@microsoft/sp-core-library';
-import {
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
-  BaseClientSideWebPart,
+import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
-  IPropertyPaneConfiguration,
-  PropertyPaneTextField
-} from '@microsoft/sp-webpart-base';
 
 import * as strings from 'TenantPropertiesWebPartStrings';
 import TenantProperties from './components/TenantProperties';

samples/react-tenant-properties/src/webparts/tenantProperties/components/ITenantPropertyPanelProps.ts

@@ -1,5 +1,6 @@
 import {IListViewItems } from "./IListViewItems";
 import { WebPartContext } from '@microsoft/sp-webpart-base';
+import { SyntheticEvent } from "react";
 export enum panelMode {
  "New",
  "edit",
@@ -10,6 +11,6 @@ export interface ITenantPropertyPanelProps {
   mode:panelMode;
   showPanel: boolean;
   TenantProperty: IListViewItems ;
-  onDismiss(refresh?:boolean) : void;
+  onDismiss(ev?: SyntheticEvent<HTMLElement, Event>, refresh?: boolean) : void;
   context: WebPartContext;
 }

samples/react-tenant-properties/src/webparts/tenantProperties/components/TenantProperties.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';
 
 .tenantProperties {
   .container {

samples/react-tenant-properties/src/webparts/tenantProperties/components/TenantProperties.tsx

@@ -19,6 +19,7 @@ import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBa
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
 import * as strings from 'TenantPropertiesWebPartStrings';
+import { SyntheticEvent } from 'react';
 
 // ListView Columns
 const viewFields: IViewField[] = [
@@ -97,7 +98,7 @@ export default class TenantProperties extends React.Component<ITenantPropertiesP
   }
   // Panel Dismiss CallBack
   // @param refresh refresh list?
-  public async onDismissPanel(refresh?: boolean) {
+  public async onDismissPanel(ev?: SyntheticEvent<HTMLElement, Event>, refresh?: boolean) {
     this.setState({
       showPanel: false
     });

samples/react-tenant-properties/src/webparts/tenantProperties/components/TenantPropertyPanel.tsx

@@ -58,7 +58,9 @@ export default class TenantPropertyPanel extends React.Component<ITenantProperty
             Description: this.state.tenantProperty.tenantPropertyDescription,
             Comment: this.state.tenantProperty.tenantPropertyComment
           });
-          result ? this.props.onDismiss(true) : null;
+          if (result) {
+            this.props.onDismiss(null, true);
+          }
         }catch(error){
           this.setState({errorMessage:error});
         }
@@ -72,7 +74,9 @@ export default class TenantPropertyPanel extends React.Component<ITenantProperty
             Description: this.state.tenantProperty.tenantPropertyDescription,
             Comment: this.state.tenantProperty.tenantPropertyComment
           });
-          result ? this.props.onDismiss(true) : null;
+          if (result) {
+            this.props.onDismiss(null, true);
+          }
         }catch(error){
           this.setState({errorMessage:error});
         }
@@ -86,7 +90,9 @@ export default class TenantPropertyPanel extends React.Component<ITenantProperty
             Description: this.state.tenantProperty.tenantPropertyDescription,
             Comment: this.state.tenantProperty.tenantPropertyComment
           });
-          result ? this.props.onDismiss(true) : null;
+          if (result) {
+            this.props.onDismiss(null, true);
+          }
         }catch(error){
           this.setState({errorMessage:error});
         }

samples/react-tenant-properties/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -10,6 +11,9 @@
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "outDir": "lib",
+    "inlineSources": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
     "typeRoots": [
       "./node_modules/@types",
       "./node_modules/@microsoft"
@@ -25,7 +29,7 @@
     ]
   },
   "include": [
-    "src/**/*.ts", "src/webparts/tenantProperties/components/TenantPropertyPanel.tsx"
+    "src/**/*.ts"
   ],
   "exclude": [
     "node_modules",

samples/react-tenant-properties/upgrade-report.md

@@ -0,0 +1,653 @@
+# Upgrade project react-tenant-properties to v1.11.0
+
+Date: 10/20/2020
+
+## Findings
+
+Following is the list of steps required to upgrade your project to SharePoint Framework version 1.11.0. [Summary](#Summary) of the modifications is included at the end of the report.
+
+### FN001001 @microsoft/sp-core-library | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-core-library
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-core-library@1.11.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001002 @microsoft/sp-lodash-subset | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-lodash-subset@1.11.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001003 @microsoft/sp-office-ui-fabric-core | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-office-ui-fabric-core@1.11.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001004 @microsoft/sp-webpart-base | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-webpart-base@1.11.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001005 @types/react | Required
+
+Remove SharePoint Framework dependency package @types/react
+
+Execute the following command:
+
+```sh
+npm un -S @types/react
+```
+
+File: [./package.json](./package.json)
+
+### FN001006 @types/react-dom | Required
+
+Remove SharePoint Framework dependency package @types/react-dom
+
+Execute the following command:
+
+```sh
+npm un -S @types/react-dom
+```
+
+File: [./package.json](./package.json)
+
+### FN001007 @types/webpack-env | Required
+
+Remove SharePoint Framework dependency package @types/webpack-env
+
+Execute the following command:
+
+```sh
+npm un -S @types/webpack-env
+```
+
+File: [./package.json](./package.json)
+
+### FN001010 @types/es6-promise | Required
+
+Remove SharePoint Framework dependency package @types/es6-promise
+
+Execute the following command:
+
+```sh
+npm un -S @types/es6-promise
+```
+
+File: [./package.json](./package.json)
+
+### FN001021 @microsoft/sp-property-pane | Required
+
+Install SharePoint Framework dependency package @microsoft/sp-property-pane
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-property-pane@1.11.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001022 office-ui-fabric-react | Required
+
+Install SharePoint Framework dependency package office-ui-fabric-react
+
+Execute the following command:
+
+```sh
+npm i -SE office-ui-fabric-react@6.214.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002001 @microsoft/sp-build-web | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-build-web@1.11.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002002 @microsoft/sp-module-interfaces | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-module-interfaces@1.11.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002003 @microsoft/sp-webpart-workbench | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-webpart-workbench@1.11.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002009 @microsoft/sp-tslint-rules | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-tslint-rules@1.11.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002013 @types/webpack-env | Required
+
+Install SharePoint Framework dev dependency package @types/webpack-env
+
+Execute the following command:
+
+```sh
+npm i -DE @types/webpack-env@1.13.1
+```
+
+File: [./package.json](./package.json)
+
+### FN002014 @types/es6-promise | Required
+
+Install SharePoint Framework dev dependency package @types/es6-promise
+
+Execute the following command:
+
+```sh
+npm i -DE @types/es6-promise@0.0.33
+```
+
+File: [./package.json](./package.json)
+
+### FN002015 @types/react | Required
+
+Install SharePoint Framework dev dependency package @types/react
+
+Execute the following command:
+
+```sh
+npm i -DE @types/react@16.8.8
+```
+
+File: [./package.json](./package.json)
+
+### FN002016 @types/react-dom | Required
+
+Install SharePoint Framework dev dependency package @types/react-dom
+
+Execute the following command:
+
+```sh
+npm i -DE @types/react-dom@16.8.3
+```
+
+File: [./package.json](./package.json)
+
+### FN006004 package-solution.json developer | Optional
+
+In package-solution.json add developer section
+
+In file [./config/package-solution.json](./config/package-solution.json) update the code as follows:
+
+```json
+{
+  "solution": {
+    "developer": {
+      "name": "Contoso",
+      "privacyUrl": "https://contoso.com/privacy",
+      "termsOfUseUrl": "https://contoso.com/terms-of-use",
+      "websiteUrl": "https://contoso.com/my-app",
+      "mpnId": "000000"
+    }
+  }
+}
+```
+
+File: [./config/package-solution.json](./config/package-solution.json)
+
+### FN010001 .yo-rc.json version | Recommended
+
+Update version in .yo-rc.json
+
+In file [./.yo-rc.json](./.yo-rc.json) update the code as follows:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.11.0"
+  }
+}
+```
+
+File: [./.yo-rc.json](./.yo-rc.json)
+
+### FN012012 tsconfig.json include property | Required
+
+Update tsconfig.json include property
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "include": [
+    "src/**/*.tsx"
+  ]
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN002012 @microsoft/rush-stack-compiler-3.3 | Required
+
+Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-3.3
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/rush-stack-compiler-3.3@0.3.5
+```
+
+File: [./package.json](./package.json)
+
+### FN012017 tsconfig.json extends property | Required
+
+Update tsconfig.json extends property
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json"
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN016004 Property pane property import change to @microsoft/sp-property-pane | Required
+
+Refactor the code to import property pane property from the @microsoft/sp-property-pane npm package instead of the @microsoft/sp-webpart-base package
+
+In file [src/webparts/tenantProperties/TenantPropertiesWebPart.ts](src/webparts/tenantProperties/TenantPropertiesWebPart.ts) update the code as follows:
+
+```ts
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
+```
+
+File: [src/webparts/tenantProperties/TenantPropertiesWebPart.ts:4:1](src/webparts/tenantProperties/TenantPropertiesWebPart.ts)
+
+### FN020001 @types/react | Required
+
+Add resolution for package @types/react
+
+In file [./package.json](./package.json) update the code as follows:
+
+```json
+{
+  "resolutions": {
+    "@types/react": "16.8.8"
+  }
+}
+```
+
+File: [./package.json](./package.json)
+
+### FN021001 main | Required
+
+Add package.json property
+
+In file [./package.json](./package.json) update the code as follows:
+
+```json
+{
+  "main": "lib/index.js"
+}
+```
+
+File: [./package.json](./package.json)
+
+### FN001008 react | Required
+
+Upgrade SharePoint Framework dependency package react
+
+Execute the following command:
+
+```sh
+npm i -SE react@16.8.5
+```
+
+File: [./package.json](./package.json)
+
+### FN001009 react-dom | Required
+
+Upgrade SharePoint Framework dependency package react-dom
+
+Execute the following command:
+
+```sh
+npm i -SE react-dom@16.8.5
+```
+
+File: [./package.json](./package.json)
+
+### FN022001 Scss file import | Required
+
+Remove scss file import
+
+In file [src/webparts/tenantProperties/components/TenantProperties.module.scss](src/webparts/tenantProperties/components/TenantProperties.module.scss) update the code as follows:
+
+```scss
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'
+```
+
+File: [src/webparts/tenantProperties/components/TenantProperties.module.scss](src/webparts/tenantProperties/components/TenantProperties.module.scss)
+
+### FN022002 Scss file import | Optional
+
+Add scss file import
+
+In file [src/webparts/tenantProperties/components/TenantProperties.module.scss](src/webparts/tenantProperties/components/TenantProperties.module.scss) update the code as follows:
+
+```scss
+@import '~office-ui-fabric-react/dist/sass/References.scss'
+```
+
+File: [src/webparts/tenantProperties/components/TenantProperties.module.scss](src/webparts/tenantProperties/components/TenantProperties.module.scss)
+
+### FN011011 Web part manifest supportedHosts | Required
+
+Update the supportedHosts property in the manifest
+
+In file [src/webparts/tenantProperties/TenantPropertiesWebPart.manifest.json](src/webparts/tenantProperties/TenantPropertiesWebPart.manifest.json) update the code as follows:
+
+```json
+{
+  "supportedHosts": ["SharePointWebPart"]
+}
+```
+
+File: [src/webparts/tenantProperties/TenantPropertiesWebPart.manifest.json](src/webparts/tenantProperties/TenantPropertiesWebPart.manifest.json)
+
+### FN012014 tsconfig.json compiler options inlineSources | Required
+
+Update tsconfig.json inlineSources value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "inlineSources": false
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN012015 tsconfig.json compiler options strictNullChecks | Required
+
+Update tsconfig.json strictNullChecks value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "strictNullChecks": false
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN012016 tsconfig.json compiler options noUnusedLocals | Required
+
+Update tsconfig.json noUnusedLocals value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "noUnusedLocals": false
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN018001 Web part Microsoft Teams tab resources folder | Optional
+
+Create folder for Microsoft Teams tab resources
+
+Execute the following command:
+
+```sh
+mkdir /home/jfmr/dev/github/sp-dev-fx-webparts/samples/react-tenant-properties/teams
+```
+
+File: [teams](teams)
+
+### FN018003 Web part Microsoft Teams tab small icon | Optional
+
+Create Microsoft Teams tab small icon for the web part
+
+Execute the following command:
+
+```sh
+cp /home/jfmr/.nvm/versions/node/v10.20.1/lib/node_modules/@pnp/cli-microsoft365/dist/m365/spfx/commands/project/project-upgrade/assets/tab20x20.png /home/jfmr/dev/github/sp-dev-fx-webparts/samples/react-tenant-properties/teams/fe85bc01-3650-4533-9c42-5c078fdd579c_outline.png
+```
+
+File: [teams/fe85bc01-3650-4533-9c42-5c078fdd579c_outline.png](teams/fe85bc01-3650-4533-9c42-5c078fdd579c_outline.png)
+
+### FN018004 Web part Microsoft Teams tab large icon | Optional
+
+Create Microsoft Teams tab large icon for the web part
+
+Execute the following command:
+
+```sh
+cp /home/jfmr/.nvm/versions/node/v10.20.1/lib/node_modules/@pnp/cli-microsoft365/dist/m365/spfx/commands/project/project-upgrade/assets/tab96x96.png /home/jfmr/dev/github/sp-dev-fx-webparts/samples/react-tenant-properties/teams/fe85bc01-3650-4533-9c42-5c078fdd579c_color.png
+```
+
+File: [teams/fe85bc01-3650-4533-9c42-5c078fdd579c_color.png](teams/fe85bc01-3650-4533-9c42-5c078fdd579c_color.png)
+
+### FN017001 Run npm dedupe | Optional
+
+If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages.
+
+Execute the following command:
+
+```sh
+npm dedupe
+```
+
+File: [./package.json](./package.json)
+
+## Summary
+
+### Execute script
+
+```sh
+npm i -SE @microsoft/sp-core-library@1.11.0 @microsoft/sp-lodash-subset@1.11.0 @microsoft/sp-office-ui-fabric-core@1.11.0 @microsoft/sp-webpart-base@1.11.0 @microsoft/sp-property-pane@1.11.0 office-ui-fabric-react@6.214.0 react@16.8.5 react-dom@16.8.5
+npm i -DE @microsoft/sp-build-web@1.11.0 @microsoft/sp-module-interfaces@1.11.0 @microsoft/sp-webpart-workbench@1.11.0 @microsoft/sp-tslint-rules@1.11.0 @types/webpack-env@1.13.1 @types/es6-promise@0.0.33 @types/react@16.8.8 @types/react-dom@16.8.3 @microsoft/rush-stack-compiler-3.3@0.3.5
+npm un -S @types/react @types/react-dom @types/webpack-env @types/es6-promise
+npm dedupe
+mkdir /home/jfmr/dev/github/sp-dev-fx-webparts/samples/react-tenant-properties/teams
+cp /home/jfmr/.nvm/versions/node/v10.20.1/lib/node_modules/@pnp/cli-microsoft365/dist/m365/spfx/commands/project/project-upgrade/assets/tab20x20.png /home/jfmr/dev/github/sp-dev-fx-webparts/samples/react-tenant-properties/teams/fe85bc01-3650-4533-9c42-5c078fdd579c_outline.png
+cp /home/jfmr/.nvm/versions/node/v10.20.1/lib/node_modules/@pnp/cli-microsoft365/dist/m365/spfx/commands/project/project-upgrade/assets/tab96x96.png /home/jfmr/dev/github/sp-dev-fx-webparts/samples/react-tenant-properties/teams/fe85bc01-3650-4533-9c42-5c078fdd579c_color.png
+```
+
+### Modify files
+
+#### [./config/package-solution.json](./config/package-solution.json)
+
+In package-solution.json add developer section:
+
+```json
+{
+  "solution": {
+    "developer": {
+      "name": "Contoso",
+      "privacyUrl": "https://contoso.com/privacy",
+      "termsOfUseUrl": "https://contoso.com/terms-of-use",
+      "websiteUrl": "https://contoso.com/my-app",
+      "mpnId": "000000"
+    }
+  }
+}
+```
+
+#### [./.yo-rc.json](./.yo-rc.json)
+
+Update version in .yo-rc.json:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.11.0"
+  }
+}
+```
+
+#### [./tsconfig.json](./tsconfig.json)
+
+Update tsconfig.json include property:
+
+```json
+{
+  "include": [
+    "src/**/*.tsx"
+  ]
+}
+```
+
+Update tsconfig.json extends property:
+
+```json
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json"
+}
+```
+
+Update tsconfig.json inlineSources value:
+
+```json
+{
+  "compilerOptions": {
+    "inlineSources": false
+  }
+}
+```
+
+Update tsconfig.json strictNullChecks value:
+
+```json
+{
+  "compilerOptions": {
+    "strictNullChecks": false
+  }
+}
+```
+
+Update tsconfig.json noUnusedLocals value:
+
+```json
+{
+  "compilerOptions": {
+    "noUnusedLocals": false
+  }
+}
+```
+
+#### [src/webparts/tenantProperties/TenantPropertiesWebPart.ts](src/webparts/tenantProperties/TenantPropertiesWebPart.ts)
+
+Refactor the code to import property pane property from the @microsoft/sp-property-pane npm package instead of the @microsoft/sp-webpart-base package:
+
+```ts
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
+```
+
+#### [./package.json](./package.json)
+
+Add resolution for package @types/react:
+
+```json
+{
+  "resolutions": {
+    "@types/react": "16.8.8"
+  }
+}
+```
+
+Add package.json property:
+
+```json
+{
+  "main": "lib/index.js"
+}
+```
+
+#### [src/webparts/tenantProperties/components/TenantProperties.module.scss](src/webparts/tenantProperties/components/TenantProperties.module.scss)
+
+Remove scss file import:
+
+```scss
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'
+```
+
+Add scss file import:
+
+```scss
+@import '~office-ui-fabric-react/dist/sass/References.scss'
+```
+
+#### [src/webparts/tenantProperties/TenantPropertiesWebPart.manifest.json](src/webparts/tenantProperties/TenantPropertiesWebPart.manifest.json)
+
+Update the supportedHosts property in the manifest:
+
+```json
+{
+  "supportedHosts": ["SharePointWebPart"]
+}
+```