Merge pull request #1611 from nanddeepn/react-display-hierarchy-upgrade

Upgraded solution to SPFx v1.11.0 and use pnp/sp

samples/react-display-hierarchy/.yo-rc.json

@@ -2,7 +2,8 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.6.0",
+    "version": "1.11.0",
+    "isDomainIsolated": false,
     "libraryName": "spfx-react-hierarchy-view",
     "libraryId": "2fd9a018-0cd9-4cca-9e84-4fac64b83333",
     "packageManager": "npm",

samples/react-display-hierarchy/README.md

@@ -1,6 +1,7 @@
 # Displaying hierarchical information from SharePoint list
 
-### Summary 
+## Summary 
+
 At the time of developing this sample, the Office 365 UI fabric does not have any control for displaying hierarchical information. This web part helps to display the hierarchical information from SharePoint list.
 
 ![Web part preview][figure1]
@@ -13,6 +14,7 @@ The sample also provisions the list called “Hierarchy” which can be used as
 ![SharePoint Run][figure3]
 
 ### SharePoint Asset
+
 A SharePoint list (named Hierarchy) is provisioned to store the hierarchical data. The schema of the list is as below.
 ![List Schema][figure4]
 The Parent column is a lookup on same list’s Title column.
@@ -21,13 +23,15 @@ The solution also provisions sample data to the Hierarchy list.
 ![List Sample Data][figure5]
 
 ### NPM Packages Used
+
 Below NPM packages are used to develop this sample.
 1.	sp-pnp-js (https://www.npmjs.com/package/sp-pnp-js) 
 2.	react-orgchart (https://www.npmjs.com/package/react-orgchart)
 3.	array-to-tree (https://www.npmjs.com/package/array-to-tree) 
 
 ## Used SharePoint Framework Version 
-![drop](https://img.shields.io/badge/drop-1.6-green.svg)
+
+![SPFx 1.11](https://img.shields.io/badge/version-1.11.0-green.svg)
 
 ## Applies to
 
@@ -45,9 +49,11 @@ react-display-hierarchy|[Nanddeep Nachan](https://www.linkedin.com/in/nanddeepna
 
 Version|Date|Comments
 -------|----|--------
+2.0.0|November 21, 2020|Upgraded to SPFx v1.11.0 (Nanddeep Nachan)
 1.0.0|October 15, 2018|Initial release
 
 ## Disclaimer
+
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
 
 ---
@@ -61,17 +67,21 @@ Version|Date|Comments
 
 - Clone this repo
 - `npm i`
-- `gulp serve --nobrowser`
-- Open workbench on your tenant, ie. https://contoso.sharepoint.com/sites/salestesm/_layouts/15/workbench.aspx
-- Search and add web part "Display Hierarchy"
+- `gulp bundle --ship`
+- `gulp package-solution --ship`
+- The package can be found at `\react-display-hierarchy\sharepoint\solution\spfx-react-hierarchy-view.sppkg`
+- [Deploy the package](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#deploy-the-helloworld-package-to-app-catalog) to the app catalog.
+- [Install the client-side solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#install-the-client-side-solution-on-your-site) to your SharePoint site.
+- [Add web part to your SharePoint page](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#add-the-helloworld-web-part-to-modern-page) named "Display Hierarchy".
 
 ## Features
+
 This sample web part shows how data stored in SharePoint list can be transformed to show hierarchical information
 - Rendering hierarchical information
 - SharePoint assets provisioning
 - Creating extensible services
 - Using mock data to test the web part locally
-- Using @sp-pnp-js
+- Using @pnp/sp
 - Using @react-orgchart
 - Using @array-to-tree
 

samples/react-display-hierarchy/config/package-solution.json

@@ -6,6 +6,7 @@
     "version": "1.0.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
     "features": [
       {
         "title": "react-display-hierarchy-deployment",
@@ -21,7 +22,14 @@
           ]
         }
       }
-    ]
+    ],
+    "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/spfx-react-hierarchy-view.sppkg"

samples/react-display-hierarchy/package.json

@@ -11,32 +11,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",
-    "@pnp/common": "^1.2.3",
-    "@pnp/graph": "^1.2.3",
-    "@pnp/logging": "^1.2.3",
-    "@pnp/odata": "^1.2.3",
-    "@pnp/sp": "^1.2.3",
-    "@types/es6-promise": "0.0.33",
-    "@types/react": "15.6.6",
-    "@types/react-dom": "15.5.6",
-    "@types/webpack-env": "1.13.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/sp": "^2.0.6",
     "array-to-tree": "^3.3.0",
-    "react": "15.6.2",
-    "react-dom": "15.6.2",
+    "office-ui-fabric-react": "6.214.0",
+    "react": "16.8.5",
+    "react-dom": "16.8.5",
     "react-orgchart": "^1.0.5"
   },
+  "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",
-    "tslint-microsoft-contrib": "~5.0.0",
-    "gulp": "~3.9.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",
-    "ajv": "~5.2.2"
-  }
+    "ajv": "~5.2.2",
+    "gulp": "~3.9.1"
+  },
+  "main": "lib/index.js"
 }

samples/react-display-hierarchy/src/webparts/reactHierarchyView/ReactHierarchyViewWebPart.manifest.json

@@ -10,6 +10,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
@@ -24,7 +25,7 @@
       },
       "officeFabricIconFontName": "GitGraph",
       "properties": {
-        "description": "ReactHierarchyView"
+        "listName": "Hierarchy"
       }
     }
   ]

samples/react-display-hierarchy/src/webparts/reactHierarchyView/ReactHierarchyViewWebPart.ts

@@ -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 'ReactHierarchyViewWebPartStrings';
 import ReactHierarchyView from './components/ReactHierarchyView';
@@ -15,9 +12,7 @@ import {
   EnvironmentType,
   ServiceScope
 } from '@microsoft/sp-core-library';
-
-// sp-pnp-js for SPFx context configuration
-import * as pnp from "@pnp/sp";
+import { sp } from "@pnp/sp/presets/all";
 
 export interface IReactHierarchyViewWebPartProps {
   listName: string;
@@ -27,7 +22,7 @@ export default class ReactHierarchyViewWebPart extends BaseClientSideWebPart<IRe
 
   public async onInit(): Promise<void> {
     return super.onInit().then(_ => {
-      pnp.sp.setup({
+      sp.setup({
         spfxContext: this.context
       });
     });

samples/react-display-hierarchy/src/webparts/reactHierarchyView/components/ReactHierarchyView.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';
 @import '~react-orgchart/index.css';
 
 :global(#workbenchPageContent) {

samples/react-display-hierarchy/src/webparts/reactHierarchyView/services/HierarchyService.ts

@@ -3,7 +3,7 @@ import { ServiceKey, ServiceScope } from '@microsoft/sp-core-library';
 import { PageContext } from '@microsoft/sp-page-context';
 import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
 import { IHierarchyItem } from '../interfaces/IHierarchyItem';
-import * as pnp from "@pnp/sp";
+import { sp } from "@pnp/sp/presets/all";
 
 export class HierarchyService implements IHierarchyService {
   public static readonly serviceKey: ServiceKey<IHierarchyService> = ServiceKey.create<IHierarchyService>('datacenter:hierarchyService', HierarchyService);
@@ -22,8 +22,13 @@ export class HierarchyService implements IHierarchyService {
   }
 
   public getHierarchyInfo(listName: string): Promise<IHierarchyItem[]> {
-    return pnp.sp.web.lists.getByTitle(listName).items.select('Title,Id,URL,Parent/Id,Parent/Title&$expand=Parent/Id').get().then((items: IHierarchyItem[]) => {
-      return Promise.resolve(items);
-    }).catch((error) => Promise.reject(error));
+    return sp.web.lists.getByTitle(listName)
+      .items
+      .select('Title,Id,URL,Parent/Id,Parent/Title')
+      .expand('Parent')
+      .get()
+      .then((items: IHierarchyItem[]) => {
+        return Promise.resolve(items);
+      }).catch((error) => Promise.reject(error));
   }
 }

samples/react-display-hierarchy/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,8 @@
     ]
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "src/**/*.tsx"
   ],
   "exclude": [
     "node_modules",

samples/react-display-hierarchy/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,