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

@@ -27,7 +27,7 @@ Below NPM packages are used to develop this sample.
 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)
+![1.11](https://img.shields.io/badge/version-1.11.0-green.svg)
 
 ## Applies to
 
@@ -45,6 +45,7 @@ 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
@@ -61,9 +62,12 @@ 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
@@ -71,7 +75,7 @@ This sample web part shows how data stored in SharePoint list can be transformed
 - 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,