Merge pull request #1559 from joelfmrodrigues/update-react-tenant-properties
This commit is contained in:
Hugo Bernier
GitHub
commit
a4af65c584
|
|
@ -16,10 +16,10 @@
|
|||
"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",
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Only users with Tenant Admin Role are allowed to managed tenant properties.
|
||||
|
||||
### User without Tenant Admin Role got this message
|
||||
|
||||
|
||||
#### List tenant properties
|
||||
|
||||
### List tenant properties
|
||||
|
||||
|
||||
|
||||
#### Add Tenant property
|
||||
### Add Tenant property
|
||||
|
||||
|
||||
|
||||
#### Edit tenant property
|
||||
### Edit tenant property
|
||||
|
||||
|
||||
|
||||
#### Delete tenant property
|
||||
### Delete tenant property
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
|
||||
## 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`
|
||||
- `Approve API permission on SharePoint Admin Center`
|
||||
- Add to AppCatalog and deploy
|
||||
- Approve API permission on SharePoint Admin Center
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-tenant-properties" />
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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-lodash-subset": "1.7.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.7.1",
|
||||
"@microsoft/sp-webpart-base": "1.7.1",
|
||||
"@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-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",
|
||||
"react-dom": "16.3.2"
|
||||
"office-ui-fabric-react": "6.214.0",
|
||||
"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/sp-module-interfaces": "1.7.1",
|
||||
"@microsoft/sp-tslint-rules": "1.7.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.7.1",
|
||||
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||
"@microsoft/sp-build-web": "1.11.0",
|
||||
"@microsoft/sp-module-interfaces": "1.11.0",
|
||||
"@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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
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 { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
|
||||
import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
|
||||
|
||||
import * as strings from 'TenantPropertiesWebPartStrings';
|
||||
import TenantProperties from './components/TenantProperties';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 933 B |
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
}
|
||||
```
|
||||
Loading…
Reference in New Issue