updated all packlages

samples/react-tree-orgchart/config/copy-assets.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
-  "deployCdnPath": "temp/deploy"
-}

samples/react-tree-orgchart/config/sass.json

@@ -0,0 +1,3 @@
+{
+"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/react-tree-orgchart/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-tree-orgchart",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "engines": {
-    "node": ">=0.10.0"
+    "node": ">=18.17.1 <19.0.0"
   },
   "scripts": {
     "build": "gulp bundle",
@@ -11,37 +11,37 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.10.0",
-    "@microsoft/sp-lodash-subset": "1.10.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
-    "@microsoft/sp-webpart-base": "1.10.0",
-    "@pnp/common": "1.3.11",
-    "@pnp/graph": "1.3.11",
-    "@pnp/logging": "1.3.11",
-    "@pnp/odata": "1.3.11",
-    "@pnp/sp": "1.3.11",
-    "@pnp/spfx-controls-react": "1.21.1",
-    "@pnp/spfx-property-controls": "1.20.0",
-    "@types/es6-promise": "0.0.33",
-    "@types/react": "16.4.2",
-    "@types/react-dom": "16.0.5",
-    "@types/webpack-env": "1.13.1",
-    "react": "16.3.2",
-    "react-dom": "16.3.2",
-    "react-sortable-tree": "^2.6.0"
-  },
-  "resolutions": {
-    "@types/react": "16.4.2"
+    "@fluentui/react": "8.106.4",
+    "@microsoft/sp-adaptive-card-extension-base": "1.20.0",
+    "@microsoft/sp-core-library": "1.20.0",
+    "@microsoft/sp-lodash-subset": "1.20.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.20.0",
+    "@microsoft/sp-property-pane": "1.20.0",
+    "@microsoft/sp-webpart-base": "1.20.0",
+    "@nosferatu500/react-sortable-tree": "^4.4.0",
+    "@pnp/graph": "^4.5.0",
+    "@pnp/sp": "^4.5.0",
+    "@pnp/spfx-controls-react": "^4.0.0-beta.6059091",
+    "@pnp/spfx-property-controls": "^3.18",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "tslib": "2.3.1"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-3.7": "^0.2.3",
-    "@microsoft/sp-build-web": "1.10.0",
-    "@microsoft/sp-tslint-rules": "1.10.0",
-    "@microsoft/sp-module-interfaces": "1.10.0",
-    "@microsoft/sp-webpart-workbench": "1.10.0",
-    "gulp": "~3.9.1",
-    "@types/chai": "3.4.34",
-    "@types/mocha": "2.2.38",
-    "ajv": "~5.2.2"
+    "@microsoft/eslint-config-spfx": "1.20.2",
+    "@microsoft/eslint-plugin-spfx": "1.20.2",
+    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
+    "@microsoft/sp-build-web": "1.20.2",
+    "@microsoft/sp-module-interfaces": "1.20.2",
+    "@rushstack/eslint-config": "4.0.1",
+    "@types/react": "17.0.45",
+    "@types/react-dom": "17.0.17",
+    "@types/webpack-env": "1.15.2",
+    "@typescript-eslint/eslint-plugin": "^8.8.0",
+    "ajv": "6.12.5",
+    "eslint": "8.57.0",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "gulp": "4.0.2",
+    "typescript": "4.7.4"
   }
 }

samples/react-tree-orgchart/src/services/GraphService.ts

@@ -1,5 +1,10 @@
 import { WebPartContext } from "@microsoft/sp-webpart-base";
-import { graph } from "@pnp/graph";
+
+import { getGraph } from "../webparts/treeOrgChart/components/pnpjsConfig";
+import { ISPFXContext, spfi, SPFI, SPFx as spSPFx } from "@pnp/sp";
+import { graphfi, GraphFI, SPFx as graphSPFx } from "@pnp/graph";
+
+import { Caching } from "@pnp/queryable";
 
 export interface IGraphUser {
     mail?: string;
@@ -12,21 +17,21 @@ const graphUserSelect: string[] = ['displayName', 'mail', 'jobTitle', 'userPrinc
 
 export default class GraphService {
 
+    private graph: GraphFI;
 
     constructor(private context: WebPartContext) {
-        graph.setup({
-            spfxContext: this.context
-        });
+       this.graph=getGraph(this.context);
     }
 
     public async getUser(upn: string): Promise<IGraphUser> {
-
-        return await graph.users.getById(upn).select(...graphUserSelect).get() as IGraphUser;
+        const graphCache = graphSPFx(this.context).using(Caching({ store: "session"}));
+        return await graphCache.get().users.getById(upn).select(...graphUserSelect).get() as IGraphUser;;
     }
 
     public async getUserManger(upn: string): Promise<IGraphUser> {
-
-        return await graph.users.getById(upn).manager.select(...graphUserSelect).get() as IGraphUser;
+        const graphCache = graphSPFx(this.context).using(Caching({ store: "session"}));
+        
+        return await graphCache.get().users.getById(upn).manager.select(...graphUserSelect).get() as IGraphUser;
     }
     public async getUserDirectReports(upn: string, excludefilter?: boolean, filter?: string) {
 
@@ -35,7 +40,9 @@ export default class GraphService {
          "code": "Request_UnsupportedQuery",
         "message": "The specified filter to the reference property query is currently not supported.",
         */
-        const directReports = await graph.users.getById(upn).directReports.select(...graphUserSelect).get() as IGraphUser[];
+        const graphCache = graphSPFx(this.context).using();
+        graphCache.get().users.getById(upn).directReports.select(...graphUserSelect).get() as IGraphUser[];
+        const directReports = await graphCache.get().users.getById(upn).directReports.select(...graphUserSelect).get() as IGraphUser[];
         if (filter && filter.length > 0) {
             if (excludefilter) {
                 return directReports.filter((user) => 
@@ -56,3 +63,4 @@ export default class GraphService {
 
 }
 
+

samples/react-tree-orgchart/src/services/SPServices.ts

@@ -1,15 +1,19 @@
 import {WebPartContext} from "@microsoft/sp-webpart-base";
-import {sp} from "@pnp/sp";
+import { ISPFXContext, spfi, SPFI, SPFx as spSPFx } from "@pnp/sp";
+import { graphfi, GraphFI, SPFx as graphSPFx } from "@pnp/graph";
+import { Caching } from "@pnp/queryable";
+import { getSP } from "../webparts/treeOrgChart/components/pnpjsConfig";
 
 export default class SPServices {
+  private sp: SPFI;
   constructor(private context: WebPartContext) {
-    sp.setup({
-      spfxContext: this.context
-    });
+    this.sp = getSP();
   }
 
   public async getUserProperties(user: string) {
-    return await sp.profiles.getPropertiesFor(user);
+    const spCache = spfi(this.sp).using(Caching({ store: "session" }));
+
+    return await spCache.profiles.getPropertiesFor(user);
   }
 
   /**

samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts

@@ -7,9 +7,10 @@ import * as strings from 'TreeOrgChartWebPartStrings';
 import TreeOrgChart, { TreeOrgChartType } from './components/TreeOrgChart';
 import { ITreeOrgChartProps } from './components/ITreeOrgChartProps';
 import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber';
-import { setup as pnpSetup } from '@pnp/common';
-import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneDropdown, PropertyPaneTextField, PropertyPaneToggle } from '@microsoft/sp-webpart-base';
-import { graph } from "@pnp/graph";
+import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';
+import { IPropertyPaneConfiguration, PropertyPaneDropdown, PropertyPaneTextField, PropertyPaneToggle} from '@microsoft/sp-property-pane';
+
+import { getSP } from './components/pnpjsConfig';
 
 export interface ITreeOrgChartWebPartProps {
   title: string;
@@ -27,10 +28,8 @@ export interface ITreeOrgChartWebPartProps {
 export default class TreeOrgChartWebPart extends BaseClientSideWebPart<ITreeOrgChartWebPartProps> {
   public onInit(): Promise<void> {
 
-    pnpSetup({
-      spfxContext: this.context
-    });
-    graph.setup(this.context as any);
+    getSP(this.context);
+    getgetGraph(this.context);
     //Migration old Config Settings
     if (!this.properties.viewType) {
       const treetype = this.properties.currentUserTeam ? TreeOrgChartType.MyTeam : TreeOrgChartType.CompanyHierarchy;
@@ -137,3 +136,7 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart<ITreeOrgC
     };
   }
 }
+function getgetGraph(context: WebPartContext) {
+  throw new Error('Function not implemented.');
+}
+

samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx

@@ -6,27 +6,24 @@ import * as React from "react";
 import styles from "./TreeOrgChart.module.scss";
 import { ITreeOrgChartProps } from "./ITreeOrgChartProps";
 import { ITreeOrgChartState } from "./ITreeOrgChartState";
-import SortableTree from "react-sortable-tree";
 import "react-sortable-tree/style.css";
-import {
-  IPersonaSharedProps,
-  Persona,
-  PersonaSize
-} from "office-ui-fabric-react/lib/Persona";
-import { IconButton } from "office-ui-fabric-react/lib/Button";
+
+
+
+
 import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
 import SPService from "../../../services/SPServices";
 import { ITreeData } from "./ITreeData";
-import {
-  Spinner,
-  SpinnerSize
-} from "office-ui-fabric-react/lib/components/Spinner";
-import { DisplayMode, Environment, EnvironmentType } from "@microsoft/sp-core-library";
+
+import { DisplayMode } from "@microsoft/sp-core-library";
 import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
 import { SPComponentLoader } from '@microsoft/sp-loader';
 import * as strings from 'TreeOrgChartWebPartStrings';
 import GraphServices, { IGraphUser } from "../../../services/GraphService";
 import GraphService from "../../../services/GraphService";
+import { IconButton, IPersonaSharedProps, Persona, PersonaSize, Spinner, SpinnerSize } from "@fluentui/react";
+import SortableTree from "@nosferatu500/react-sortable-tree";
+
 
 
 export enum TreeOrgChartType {
@@ -44,7 +41,7 @@ export default class TreeOrgChart extends React.Component<
   private SPService: SPService;
   private GraphService: GraphService;
 
-  constructor(props) {
+  constructor(props:ITreeOrgChartProps) {
     super(props);
 
     this.SPService = new SPService(this.props.context);
@@ -55,7 +52,7 @@ export default class TreeOrgChart extends React.Component<
     };
   }
   //
-  private handleTreeOnChange(treeData) {
+  private handleTreeOnChange(treeData:ITreeOrgChartState) {
     this.setState({ treeData });
   }
 
@@ -76,13 +73,12 @@ export default class TreeOrgChart extends React.Component<
   }
 
   public async componentDidMount() {
-    if (Environment.type !== EnvironmentType.Local) {
       const sharedLibrary = await this._loadSPComponentById(
         LIVE_PERSONA_COMPONENT_ID
       );
       const livePersonaCard: any = sharedLibrary.LivePersonaCard;
       this.setState({ livePersonaCard: livePersonaCard });
-    }
+    
 
     await this.loadOrgchart();
   }
@@ -293,7 +289,11 @@ export default class TreeOrgChart extends React.Component<
         selectedTeamleader = this.props.teamLeader;
       }
     }
-
+    const peoplePickerContext: IPeoplePickerContext = {
+      absoluteUrl: this.props.context.pageContext.web.absoluteUrl,
+      msGraphClientFactory: this.props.context.msGraphClientFactory,
+      spHttpClient: this.props.context.spHttpClient
+  };
     return (
       <div className={styles.treeOrgChart}>
         <WebPartTitle
@@ -303,14 +303,13 @@ export default class TreeOrgChart extends React.Component<
         />
         {showEditOther && (<div>
           <PeoplePicker
-            context={this.props.context}
+            context={peoplePickerContext}
             titleText={strings.TeamLeaderHeadline}
             personSelectionLimit={1}
             groupName={""} // Leave this blank in case you want to filter from all users
-            isRequired={true}
             disabled={false}
             defaultSelectedUsers={selectedTeamleader ? [selectedTeamleader] : undefined}
-            selectedItems={(items: any) => {
+            onChange={(items: any) => {
               if (this.props.updateTeamLeader) {
                 if (items.length > 0) {
                   const teamleaderupn: string | undefined = this.claimUserToUPN(items[0].loginName);
@@ -322,7 +321,7 @@ export default class TreeOrgChart extends React.Component<
                 this.props.updateTeamLeader('');
               }
             }}
-            showHiddenInUI={false}
+            
             principalTypes={[PrincipalType.User]}
             resolveDelay={1000} />
         </div>)}
@@ -337,7 +336,6 @@ export default class TreeOrgChart extends React.Component<
           <SortableTree
             treeData={this.state.treeData}
             onChange={this.handleTreeOnChange.bind(this)}
-            canDrag={false}
             rowHeight={70}
             maxDepth={this.props.maxLevels}
             generateNodeProps={rowInfo => {

samples/react-tree-orgchart/src/webparts/treeOrgChart/components/pnpjsConfig.ts

@@ -0,0 +1,30 @@
+
+/* eslint-disable no-var */
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+
+// import pnp and pnp logging system
+import { ISPFXContext, spfi, SPFI, SPFx as spSPFx } from "@pnp/sp";
+import { graphfi, GraphFI, SPFx as graphSPFx } from "@pnp/graph";
+import "@pnp/sp/profiles";
+
+
+var _sp: SPFI;
+var _graph: GraphFI;
+
+export const getSP = (context?: WebPartContext): SPFI => {
+  if (_sp === undefined || _sp === null) {
+    //You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency
+    // The LogLevel set's at what level a message will be written to the console
+    _sp = spfi().using(spSPFx(context as ISPFXContext));
+  }
+  return _sp;
+};
+
+export const getGraph = (context?: WebPartContext): GraphFI => {
+  if (_graph === undefined || _graph === null) {
+    //You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency
+    // The LogLevel set's at what level a message will be written to the console
+    _graph = graphfi().using(graphSPFx(context as ISPFXContext));
+  }
+  return _graph;
+};