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

This commit is contained in:
Hugo Bernier 2020-10-20 22:27:49 -04:00 committed by GitHub
commit a4af65c584
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 6974 additions and 5322 deletions

View File

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

View File

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

View File

@ -3,7 +3,7 @@
"solution": { "solution": {
"name": "react-tenant-properties-client-side-solution", "name": "react-tenant-properties-client-side-solution",
"id": "d5bc38a6-0b5c-4644-9087-efa6de87ece1", "id": "d5bc38a6-0b5c-4644-9087-efa6de87ece1",
"version": "1.0.0.0", "version": "1.0.1.0",
"includeClientSideAssets": true, "includeClientSideAssets": true,
"skipFeatureDeployment": true, "skipFeatureDeployment": true,
"webApiPermissionRequests": [ "webApiPermissionRequests": [
@ -11,7 +11,14 @@
"resource": "Microsoft Graph", "resource": "Microsoft Graph",
"scope": "Directory.ReadWrite.All" "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": { "paths": {
"zippedPackage": "solution/react-tenant-properties.sppkg" "zippedPackage": "solution/react-tenant-properties.sppkg"

File diff suppressed because it is too large Load Diff

View File

@ -2,6 +2,7 @@
"name": "react-tenant-properties", "name": "react-tenant-properties",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"main": "lib/index.js",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
}, },
@ -15,30 +16,29 @@
}, },
"dependencies": { "dependencies": {
"@microsoft/office-ui-fabric-react-bundle": "^1.7.1", "@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/pnpjs": "^1.3.0",
"@pnp/spfx-controls-react": "1.12.0", "@pnp/spfx-controls-react": "1.12.0",
"@pnp/spfx-property-controls": "1.14.1", "@pnp/spfx-property-controls": "1.14.1",
"@types/es6-promise": "0.0.33",
"@types/jquery": "^3.3.29", "@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", "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": { "resolutions": {
"@types/react": "16.4.2" "@types/react": "16.8.8"
}, },
"devDependencies": { "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/chai": "3.4.34",
"@types/mocha": "2.2.38", "@types/mocha": "2.2.38",
"@voitanos/jest-preset-spfx-react16": "^1.1.0", "@voitanos/jest-preset-spfx-react16": "^1.1.0",

View File

@ -12,6 +12,7 @@
// Components that allow authors to embed arbitrary script code should set this to true. // 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 // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false, "requiresCustomScript": false,
"supportedHosts": ["SharePointWebPart"],
"preconfiguredEntries": [{ "preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other

View File

@ -1,11 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDom from 'react-dom'; import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library'; 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 * as strings from 'TenantPropertiesWebPartStrings';
import TenantProperties from './components/TenantProperties'; import TenantProperties from './components/TenantProperties';

View File

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

View File

@ -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 { .tenantProperties {
.container { .container {

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 933 B

View File

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

View File

@ -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"]
}
```