Merged processed PRs from dev to master

Merged the following PRs: #1127 #1117 #1113
2025-03-02 09:49:11 +00:00 · 2020-02-05 10:38:55 +02:00 · 2020-02-05 10:38:55 +02:00 · 71de378d25
commit 71de378d25
parent 2ce00a8ce2 cd2316312f
24 changed files with 27774 additions and 6132 deletions
--- a/samples/react-accordion/.yo-rc.json
+++ b/samples/react-accordion/.yo-rc.json
@ -1,11 +1,12 @@
 {
  "@microsoft/generator-sharepoint": {
    "isCreatingSolution": true,
+    "isDomainIsolated": false,
    "environment": "spo",
-    "version": "1.5.1",
+    "version": "1.10.0",
    "libraryName": "react-accordion",
    "libraryId": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
    "packageManager": "npm",
    "componentType": "webpart"
  }
-}
+}
--- a/samples/react-accordion/README.md
+++ b/samples/react-accordion/README.md
@ -7,7 +7,7 @@ This is a sample web Part that illustrates the use of React Accessible Accordion
 ![Sample Web Part built using SPFx with React Framework showing list data in accordion format](./assets/previewAccordion.PNG)

 ## Used SharePoint Framework Version 
-![drop](https://img.shields.io/badge/drop-1.5.1-green.svg)
+![drop](https://img.shields.io/badge/drop-1.10.0-green.svg)

 ## Applies to

@ -25,6 +25,7 @@ react-accordion | Gautam Sheth (SharePoint Consultant, RapidCircle)
 Version|Date|Comments
 -------|----|--------
 1.0|August 17, 2018|Initial release
+2.0|January 19, 2020|Upgrade to SPFx 1.10

 ## 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.**
@ -33,18 +34,29 @@ Version|Date|Comments

 ## Minimal Path to Awesome

- clone this repo
- in the command line run:
-  - `npm i`
-  - `gulp serve --nobrowser`
- in your SharePoint Site create a custom list named FAQ 
- in the FAQ list, create a column Description(internal name) of type Enhanced rich text
- add some list items with Title and Description values
+### Build and Test

- navigate to the hosted version of SharePoint workbench, eg. **https://contoso.sharepoint.com/sites/test/_layouts/15/workbench.aspx**
- add the Web Part to canvas and in its configuration specify:
- name of the list where list items are stored, eg. **FAQ**
+1. Clone this repo
+2. In the command line run
+    - `npm i`
+    - `gulp build`
+    - `gulp serve --nobrowser`
+3. Create a custom list (e.g. FAQ) with Title and Description(internal name) of type Enhanced rich text on your SharePoint site. 
+4. Populate the list with some items
+5. Navigate to the hosted version of SharePoint workbench, eg. **https://\<tenant>.sharepoint.com/sites/\<your site>/_layouts/15/workbench.aspx**
+6. Add the Web Part to the canvas and configure it.

+### Package and deploy
+
+1. In the command line run
+    - `gulp bundle --ship`
+    - `gulp package-solution --ship`
+2. Install into your SharePoint app catalog and add it to a SharePoint site.
+3. Navigate to your site, eg. **https://\<tenant>.sharepoint.com/sites/\<your site>**
+4. Create a custom list with Title and Description(internal name) of type Enhanced rich text. 
+5. Populate the list with some items
+6. Navigate to a page on your site where the custom list is created
+7. Add the Web Part to the page and configure it.

 ## Features

@ -52,13 +64,14 @@ This project contains sample client-side web part built on the SharePoint Framew

 This sample illustrates the following concepts on top of the SharePoint Framework:

- general
-  - performing SharePoint GET operation in React using inbuilt SP Http Client
-  - Using Fabric UI button component for pagination      
-  - optimizing REST responses for performance using nometadata option of JSON light
-  - using PnP Webpart title control of @pnp/spfx-controls-react library
-  - showing SharePoint list data in Accordion format using React Accessible Accordion plugin
-  - searching in the fetched data by making use of Search Box from Office Fabric UI
+### General
+
+- performing SharePoint GET operation in React using inbuilt SP Http Client
+- Using Fabric UI button component for pagination      
+- optimizing REST responses for performance using nometadata option of JSON light
+- using PnP Webpart title control of @pnp/spfx-controls-react library
+- showing SharePoint list data in Accordion format using React Accessible Accordion plugin
+- searching in the fetched data by making use of Search Box from Office Fabric UI


 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-accordion" />
--- a/samples/react-accordion/config/package-solution.json
+++ b/samples/react-accordion/config/package-solution.json
@ -4,7 +4,8 @@
    "name": "react-accordion-client-side-solution",
    "id": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
    "version": "1.0.0.0",
-    "includeClientSideAssets": true
+    "includeClientSideAssets": true,
+    "isDomainIsolated": false
  },
  "paths": {
    "zippedPackage": "solution/react-accordion.sppkg"
--- a/samples/react-accordion/config/tslint.json
+++ b/samples/react-accordion/config/tslint.json
@ -1,45 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/core-build/tslint.schema.json",
-  // Display errors as warnings
-  "displayAsWarning": true,
-  // The TSLint task may have been configured with several custom lint rules
-  // before this config file is read (for example lint rules from the tslint-microsoft-contrib
-  // project). If true, this flag will deactivate any of these rules.
-  "removeExistingRules": true,
-  // When true, the TSLint task is configured with some default TSLint "rules.":
-  "useDefaultConfigAsBase": false,
-  // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
-  // which are active, other than the list of rules below.
-  "lintConfig": {
-    // Opt-in to Lint rules which help to eliminate bugs in JavaScript
-    "rules": {
-      "class-name": false,
-      "export-name": false,
-      "forin": false,
-      "label-position": false,
-      "member-access": true,
-      "no-arg": false,
-      "no-console": false,
-      "no-construct": false,
-      "no-duplicate-case": true,
-      "no-duplicate-variable": true,
-      "no-eval": false,
-      "no-function-expression": true,
-      "no-internal-module": true,
-      "no-shadowed-variable": true,
-      "no-switch-case-fall-through": true,
-      "no-unnecessary-semicolons": true,
-      "no-unused-expression": true,
-      "no-use-before-declare": true,
-      "no-with-statement": true,
-      "semicolon": true,
-      "trailing-comma": false,
-      "typedef": false,
-      "typedef-whitespace": false,
-      "use-named-parameter": true,
-      "valid-typeof": true,
-      "variable-name": false,
-      "whitespace": false
-    }
-  }
-}
--- a/samples/react-accordion/package-lock.json
+++ b/samples/react-accordion/package-lock.json
--- a/samples/react-accordion/package.json
+++ b/samples/react-accordion/package.json
@ -2,6 +2,7 @@
  "name": "react-accordion",
  "version": "0.0.1",
  "private": true,
+  "main": "lib/index.js",
  "engines": {
    "node": ">=0.10.0"
  },
@ -11,26 +12,33 @@
    "test": "gulp test"
  },
  "dependencies": {
-    "@microsoft/sp-core-library": "1.5.1",
-    "@microsoft/sp-lodash-subset": "1.5.1",
-    "@microsoft/sp-office-ui-fabric-core": "1.5.1",
-    "@microsoft/sp-webpart-base": "1.5.1",
+    "@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-property-pane": "1.10.0",
+    "@microsoft/sp-webpart-base": "1.10.0",
    "@pnp/spfx-controls-react": "1.7.0",
    "@types/es6-promise": "0.0.33",
-    "@types/react": "15.6.6",
-    "@types/react-dom": "15.5.6",
+    "@types/react": "16.8.8",
+    "@types/react-dom": "16.8.3",
    "@types/webpack-env": "1.13.1",
-    "react": "15.6.2",
+    "office-ui-fabric-react": "6.189.2",
+    "react": "16.8.5",
    "react-accessible-accordion": "1.0.2",
-    "react-dom": "15.6.2"
+    "react-dom": "16.8.5"
+  },
+  "resolutions": {
+    "@types/react": "16.8.8"
  },
  "devDependencies": {
-    "@microsoft/sp-build-web": "1.5.1",
-    "@microsoft/sp-module-interfaces": "1.5.1",
-    "@microsoft/sp-webpart-workbench": "1.5.1",
-    "gulp": "~3.9.1",
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
+    "@microsoft/sp-build-web": "1.10.0",
+    "@microsoft/sp-module-interfaces": "1.10.0",
+    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-webpart-workbench": "1.10.0",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
-    "ajv": "~5.2.2"
+    "ajv": "~5.2.2",
+    "gulp": "~3.9.1"
  }
 }
--- a/samples/react-accordion/src/index.ts
+++ b/samples/react-accordion/src/index.ts
@ -0,0 +1 @@
+// A file is required to be in the root of the /src directory by the TypeScript compiler
--- a/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.manifest.json
+++ b/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.manifest.json
@ -10,6 +10,9 @@
  // 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
@ -30,4 +33,4 @@
      }
    }
  ]
-}
+}
--- a/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.ts
+++ b/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.ts
@ -1,12 +1,8 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version, DisplayMode } from '@microsoft/sp-core-library';
-import {
-  BaseClientSideWebPart,
-  IPropertyPaneConfiguration,
-  PropertyPaneTextField,
-  PropertyPaneSlider
-} from '@microsoft/sp-webpart-base';
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField } from "@microsoft/sp-property-pane";

 import * as strings from 'ReactAccordionWebPartStrings';
 import ReactAccordion from './components/ReactAccordion';
--- a/samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionProps.ts
+++ b/samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionProps.ts
@ -5,8 +5,8 @@ export interface IReactAccordionProps {
  listName: string;
  spHttpClient: SPHttpClient;
  siteUrl: string;
-  title: string,
-  displayMode: DisplayMode,
-  maxItemsPerPage: number,
+  title: string;
+  displayMode: DisplayMode;
+  maxItemsPerPage: number;
  updateProperty: (value: string) => void;
 }
--- a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.module.scss
+++ b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.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';

 .reactAccordion {
  .container {
@ -70,4 +70,4 @@
      display: inline-block;
    }
  }
-}
+}
--- a/samples/react-accordion/teams/4f36dbe9-f10c-4fcd-a7d9-a98ae61605a4_color.png
+++ b/samples/react-accordion/teams/4f36dbe9-f10c-4fcd-a7d9-a98ae61605a4_color.png
--- a/samples/react-accordion/teams/4f36dbe9-f10c-4fcd-a7d9-a98ae61605a4_outline.png
+++ b/samples/react-accordion/teams/4f36dbe9-f10c-4fcd-a7d9-a98ae61605a4_outline.png
--- a/samples/react-accordion/tsconfig.json
+++ b/samples/react-accordion/tsconfig.json
@ -1,14 +1,19 @@
 {
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
    "module": "esnext",
    "moduleResolution": "node",
+    "noUnusedLocals": false,
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
+    "strictNullChecks": false,
+    "outDir": "lib",
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
@ -22,5 +27,12 @@
      "dom",
      "es2015.collection"
    ]
-  }
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
 }
--- a/samples/react-accordion/tslint.json
+++ b/samples/react-accordion/tslint.json
@ -1,3 +1,30 @@
 {
-    "rulesDirectory": "./config"
-}
+  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "rules": {
+    "class-name": false,
+    "export-name": false,
+    "forin": false,
+    "label-position": false,
+    "member-access": true,
+    "no-arg": false,
+    "no-console": false,
+    "no-construct": false,
+    "no-duplicate-variable": true,
+    "no-eval": false,
+    "no-function-expression": true,
+    "no-internal-module": true,
+    "no-shadowed-variable": true,
+    "no-switch-case-fall-through": true,
+    "no-unnecessary-semicolons": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-with-statement": true,
+    "semicolon": true,
+    "trailing-comma": false,
+    "typedef": false,
+    "typedef-whitespace": false,
+    "use-named-parameter": true,
+    "variable-name": false,
+    "whitespace": false
+  }
+}
--- a/samples/react-accordion/upgrade-1_10-report.md
+++ b/samples/react-accordion/upgrade-1_10-report.md
@ -0,0 +1,844 @@
+# Upgrade project C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion to v1.10.0
+
+Date: 1/18/2020
+
+## Findings
+
+Following is the list of steps required to upgrade your project to SharePoint Framework version 1.10.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.10.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.10.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.10.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.10.0
+```
+
+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.10.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.10.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.10.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.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002009 @microsoft/sp-tslint-rules | Required
+
+Install SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-tslint-rules@1.10.0
+```
+
+File: [./package.json](./package.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)
+
+### 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.10.0"
+  }
+}
+```
+
+File: [./.yo-rc.json](./.yo-rc.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\reactAccordion\ReactAccordionWebPart.ts](src\webparts\reactAccordion\ReactAccordionWebPart.ts) update the code as follows:
+
+```ts
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField } from "@microsoft/sp-property-pane";
+```
+
+File: [src\webparts\reactAccordion\ReactAccordionWebPart.ts:4:1](src\webparts\reactAccordion\ReactAccordionWebPart.ts)
+
+### FN001005 @types/react | Required
+
+Upgrade SharePoint Framework dependency package @types/react
+
+Execute the following command:
+
+```sh
+npm i -SE @types/react@16.8.8
+```
+
+File: [./package.json](./package.json)
+
+### FN001006 @types/react-dom | Required
+
+Upgrade SharePoint Framework dependency package @types/react-dom
+
+Execute the following command:
+
+```sh
+npm i -SE @types/react-dom@16.8.3
+```
+
+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.189.2
+```
+
+File: [./package.json](./package.json)
+
+### 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\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss) update the code as follows:
+
+```scss
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'
+```
+
+File: [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss)
+
+### FN022002 Scss file import | Optional
+
+Add scss file import
+
+In file [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss) update the code as follows:
+
+```scss
+@import '~office-ui-fabric-react/dist/sass/References.scss'
+```
+
+File: [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss)
+
+### FN011011 Web part manifest supportedHosts | Required
+
+Update the supportedHosts property in the manifest
+
+In file [src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json](src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json) update the code as follows:
+
+```json
+{
+  "supportedHosts": ["SharePointWebPart"]
+}
+```
+
+File: [src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json](src\webparts\reactAccordion\ReactAccordionWebPart.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)
+
+### FN006003 package-solution.json isDomainIsolated | Required
+
+Update package-solution.json isDomainIsolated
+
+In file [./config/package-solution.json](./config/package-solution.json) update the code as follows:
+
+```json
+{
+  "solution": {
+    "isDomainIsolated": false
+  }
+}
+```
+
+File: [./config/package-solution.json](./config/package-solution.json)
+
+### FN010007 .yo-rc.json isDomainIsolated | Recommended
+
+Update isDomainIsolated in .yo-rc.json
+
+In file [./.yo-rc.json](./.yo-rc.json) update the code as follows:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "isDomainIsolated": false
+  }
+}
+```
+
+File: [./.yo-rc.json](./.yo-rc.json)
+
+### FN018001 Web part Microsoft Teams tab resources folder | Optional
+
+Create folder for Microsoft Teams tab resources
+
+Execute the following command:
+
+```sh
+mkdir C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion/teams_reactAccordion
+```
+
+File: [teams_reactAccordion](teams_reactAccordion)
+
+### FN018002 Web part Microsoft Teams tab manifest | Optional
+
+Create Microsoft Teams tab manifest for the web part
+
+Execute the following command:
+
+```sh
+cat > C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams_reactAccordion\manifest.json << EOF 
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.2",
+  "packageName": "React Accordion App",
+  "id": "97a28c00-64ee-4ec7-b373-723e39069a96",
+  "version": "0.1",
+  "developer": {
+    "name": "SPFx + Teams Dev",
+    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
+    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
+  },
+  "name": {
+    "short": "React Accordion App"
+  },
+  "description": {
+    "short": "SPFx webpart which shows SharePoint list data in Accordion format",
+    "full": "SPFx webpart which shows SharePoint list data in Accordion format"
+  },
+  "icons": {
+    "outline": "tab20x20.png",
+    "color": "tab96x96.png"
+  },
+  "accentColor": "#004578",
+  "configurableTabs": [
+    {
+      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=97a28c00-64ee-4ec7-b373-723e39069a96",
+      "canUpdateConfiguration": true,
+      "scopes": [
+        "team"
+      ]
+    }
+  ],
+  "validDomains": [
+    "*.login.microsoftonline.com",
+    "*.sharepoint.com",
+    "*.sharepoint-df.com",
+    "spoppe-a.akamaihd.net",
+    "spoprod-a.akamaihd.net",
+    "resourceseng.blob.core.windows.net",
+    "msft.spoppe.com"
+  ],
+  "webApplicationInfo": {
+    "resource": "https://{teamSiteDomain}",
+    "id": "00000003-0000-0ff1-ce00-000000000000"
+  }
+}
+EOF
+```
+
+File: [teams_reactAccordion\manifest.json](teams_reactAccordion\manifest.json)
+
+### 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 C:\Users\Admin\AppData\Roaming\npm\node_modules\@pnp\office365-cli\dist\o365\spfx\commands\project\project-upgrade\assets\tab20x20.png C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams_reactAccordion\tab20x20.png
+```
+
+File: [teams_reactAccordion\tab20x20.png](teams_reactAccordion\tab20x20.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 C:\Users\Admin\AppData\Roaming\npm\node_modules\@pnp\office365-cli\dist\o365\spfx\commands\project\project-upgrade\assets\tab96x96.png C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams_reactAccordion\tab96x96.png
+```
+
+File: [teams_reactAccordion\tab96x96.png](teams_reactAccordion\tab96x96.png)
+
+### FN019001 tslint.json rulesDirectory | Required
+
+Remove rulesDirectory from tslint.json
+
+In file [./tslint.json](./tslint.json) update the code as follows:
+
+```json
+{
+  "rulesDirectory": []
+}
+```
+
+File: [./tslint.json](./tslint.json)
+
+### FN019002 tslint.json extends | Required
+
+Update tslint.json extends property
+
+In file [./tslint.json](./tslint.json) update the code as follows:
+
+```json
+{
+  "extends": "@microsoft/sp-tslint-rules/base-tslint.json"
+}
+```
+
+File: [./tslint.json](./tslint.json)
+
+### FN002008 tslint-microsoft-contrib | Required
+
+Install SharePoint Framework dev dependency package tslint-microsoft-contrib
+
+Execute the following command:
+
+```sh
+npm i -DE tslint-microsoft-contrib@5.0.0
+```
+
+File: [./package.json](./package.json)
+
+### FN012011 tsconfig.json compiler options outDir | Required
+
+Update tsconfig.json outDir value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "outDir": "lib"
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.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/**/*.ts"
+  ]
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN012013 tsconfig.json exclude property | Required
+
+Update tsconfig.json exclude property
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN015004 config\tslint.json | Required
+
+Remove file config\tslint.json
+
+Execute the following command:
+
+```sh
+rm config\tslint.json
+```
+
+File: [config\tslint.json](config\tslint.json)
+
+### FN015005 src\index.ts | Required
+
+Add file src\index.ts
+
+Execute the following command:
+
+```sh
+cat > src\index.ts << EOF 
+// A file is required to be in the root of the /src directory by the TypeScript compiler
+
+EOF
+```
+
+File: [src\index.ts](src\index.ts)
+
+### 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.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 @microsoft/sp-property-pane@1.10.0 @types/react@16.8.8 @types/react-dom@16.8.3 office-ui-fabric-react@6.189.2 react@16.8.5 react-dom@16.8.5
+npm i -DE @microsoft/sp-build-web@1.10.0 @microsoft/sp-module-interfaces@1.10.0 @microsoft/sp-webpart-workbench@1.10.0 @microsoft/sp-tslint-rules@1.10.0 @microsoft/rush-stack-compiler-3.3@0.3.5 tslint-microsoft-contrib@5.0.0
+mkdir C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams
+cat > C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams\manifest.json << EOF 
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.2",
+  "packageName": "React Accordion App",
+  "id": "97a28c00-64ee-4ec7-b373-723e39069a96",
+  "version": "0.1",
+  "developer": {
+    "name": "SPFx + Teams Dev",
+    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
+    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
+  },
+  "name": {
+    "short": "React Accordion App"
+  },
+  "description": {
+    "short": "SPFx webpart which shows SharePoint list data in Accordion format",
+    "full": "SPFx webpart which shows SharePoint list data in Accordion format"
+  },
+  "icons": {
+    "outline": "tab20x20.png",
+    "color": "tab96x96.png"
+  },
+  "accentColor": "#004578",
+  "configurableTabs": [
+    {
+      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=97a28c00-64ee-4ec7-b373-723e39069a96",
+      "canUpdateConfiguration": true,
+      "scopes": [
+        "team"
+      ]
+    }
+  ],
+  "validDomains": [
+    "*.login.microsoftonline.com",
+    "*.sharepoint.com",
+    "*.sharepoint-df.com",
+    "spoppe-a.akamaihd.net",
+    "spoprod-a.akamaihd.net",
+    "resourceseng.blob.core.windows.net",
+    "msft.spoppe.com"
+  ],
+  "webApplicationInfo": {
+    "resource": "https://{teamSiteDomain}",
+    "id": "00000003-0000-0ff1-ce00-000000000000"
+  }
+}
+EOF
+rm config\tslint.json
+cat > src\index.ts << EOF 
+// A file is required to be in the root of the /src directory by the TypeScript compiler
+
+EOF
+```
+
+### Modify files
+
+#### [./.yo-rc.json](./.yo-rc.json)
+
+Update version in .yo-rc.json:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.10.0"
+  }
+}
+```
+
+Update isDomainIsolated in .yo-rc.json:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "isDomainIsolated": false
+  }
+}
+```
+
+#### [./tsconfig.json](./tsconfig.json)
+
+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
+  }
+}
+```
+
+Update tsconfig.json outDir value:
+
+```json
+{
+  "compilerOptions": {
+    "outDir": "lib"
+  }
+}
+```
+
+Update tsconfig.json include property:
+
+```json
+{
+  "include": [
+    "src/**/*.ts"
+  ]
+}
+```
+
+Update tsconfig.json exclude property:
+
+```json
+{
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}
+```
+
+#### [src\webparts\reactAccordion\ReactAccordionWebPart.ts](src\webparts\reactAccordion\ReactAccordionWebPart.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, PropertyPaneSlider, 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\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.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\reactAccordion\ReactAccordionWebPart.manifest.json](src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json)
+
+Update the supportedHosts property in the manifest:
+
+```json
+{
+  "supportedHosts": ["SharePointWebPart"]
+}
+```
+
+#### [./config/package-solution.json](./config/package-solution.json)
+
+Update package-solution.json isDomainIsolated:
+
+```json
+{
+  "solution": {
+    "isDomainIsolated": false
+  }
+}
+```
+
+#### [./tslint.json](./tslint.json)
+
+Remove rulesDirectory from tslint.json:
+
+```json
+{
+  "rulesDirectory": []
+}
+```
+
+Update tslint.json extends property:
+
+```json
+{
+  "extends": "@microsoft/sp-tslint-rules/base-tslint.json"
+}
+```
--- a/samples/react-tree-orgchart/config/package-solution.json
+++ b/samples/react-tree-orgchart/config/package-solution.json
@ -3,7 +3,7 @@
  "solution": {
    "name": "react-tree-orgchart-client-side-solution",
    "id": "d76a0c4f-d669-42eb-9533-68d5cec5e9d3",
-    "version": "1.0.0.0",
+    "version": "1.0.1.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,
    "isDomainIsolated": false
--- a/samples/react-tree-orgchart/package-lock.json
+++ b/samples/react-tree-orgchart/package-lock.json
--- a/samples/react-tree-orgchart/package.json
+++ b/samples/react-tree-orgchart/package.json
@ -11,10 +11,10 @@
    "test": "gulp test"
  },
  "dependencies": {
-    "@microsoft/sp-core-library": "1.7.1-plusbeta",
-    "@microsoft/sp-lodash-subset": "1.7.1-plusbeta",
-    "@microsoft/sp-office-ui-fabric-core": "1.7.1-plusbeta",
-    "@microsoft/sp-webpart-base": "1.7.1-plusbeta",
+    "@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.2.9",
    "@pnp/graph": "^1.2.9",
    "@pnp/logging": "^1.2.9",
@ -34,10 +34,11 @@
    "@types/react": "16.4.2"
  },
  "devDependencies": {
-    "@microsoft/sp-build-web": "1.7.1-plusbeta",
-    "@microsoft/sp-tslint-rules": "1.7.1-plusbeta",
-    "@microsoft/sp-module-interfaces": "1.7.1-plusbeta",
-    "@microsoft/sp-webpart-workbench": "1.7.1-plusbeta",
+    "@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",
--- a/samples/react-tree-orgchart/src/services/SPServices.ts
+++ b/samples/react-tree-orgchart/src/services/SPServices.ts
@ -0,0 +1,27 @@
+import {WebPartContext} from "@microsoft/sp-webpart-base";
+import {sp} from "@pnp/sp";
+
+export default class SPServices {
+  constructor(private context: WebPartContext) {
+    sp.setup({
+      spfxContext: this.context
+    });
+  }
+
+  public async getUserProperties(user: string) {
+    return await sp.profiles.getPropertiesFor(user);
+  }
+
+  /**
+   * async GetUserProfileProperty
+   * user:string
+   */
+  public async getUserProfileProperty(user: string, property: string) {
+    let UserProperty: any = await sp.profiles.getUserProfilePropertyFor(
+      user,
+      property
+    );
+
+    return UserProperty;
+  }
+}
--- a/samples/react-tree-orgchart/src/services/spservices.ts
+++ b/samples/react-tree-orgchart/src/services/spservices.ts
@ -1,39 +0,0 @@
-import { WebPartContext } from "@microsoft/sp-webpart-base";
-import { graph } from "@pnp/graph";
-import { sp } from '@pnp/sp';
-import { ITreeChildren } from "../webparts/treeOrgChart/components/ITreeChildren";
-
-
-
-export default class spservices {
-
-
-
-  constructor(private context:WebPartContext) {
-
-    sp.setup({
-      spfxContext: this.context
-
-    });
-  }
-
-  public async getUserProperties(user:string){
-
-    let currentUserProperties:any = await sp.profiles.getPropertiesFor(user);
-    console.log(currentUserProperties);
-
-    return currentUserProperties;
-  }
-
-  /**
-   * async GetUserProfileProperty
-user:string   */
-  public async getUserProfileProperty(user:string,property:string) {
-    let UserProperty:any = await sp.profiles.getUserProfilePropertyFor(user, property);
-    console.log(UserProperty);
-
-    return UserProperty;
-  }
-
-   
-}
--- a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx
+++ b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx
@ -2,30 +2,38 @@
 // Author: João Mendes
 // Fev 2019
 //
-import * as React from 'react';
-import styles from './TreeOrgChart.module.scss';
-import { ITreeOrgChartProps } from './ITreeOrgChartProps';
-import { ITreeOrgChartState } from './ITreeOrgChartState';
-import { escape } from '@microsoft/sp-lodash-subset';
-import SortableTree from 'react-sortable-tree';
-import 'react-sortable-tree/style.css';
-import { IPersonaSharedProps, Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona';
-import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+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 { ITreeChildren } from './ITreeChildren';
-import { ITreeData } from './ITreeData';
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/components/Spinner';
+import SPService from "../../../services/SPServices";
+import { ITreeChildren } from "./ITreeChildren";
+import { ITreeData } from "./ITreeData";
+import {
+  Spinner,
+  SpinnerSize
+} from "office-ui-fabric-react/lib/components/Spinner";

-export default class TreeOrgChart extends React.Component<ITreeOrgChartProps, ITreeOrgChartState> {
+export default class TreeOrgChart extends React.Component<
+  ITreeOrgChartProps,
+  ITreeOrgChartState
+> {
  private treeData: ITreeData[];
-  private treeChildren: ITreeChildren[];
-  private SPService: spservice;
+  private SPService: SPService;

  constructor(props) {
    super(props);

-    this.SPService = new spservice(this.props.context);
+    this.SPService = new SPService(this.props.context);
    this.state = {
      treeData: [],
      isLoading: true
@ -36,8 +44,14 @@ export default class TreeOrgChart extends React.Component<ITreeOrgChartProps, IT
    this.setState({ treeData });
  }

-  public async componentDidUpdate(prevProps: ITreeOrgChartProps, prevState: ITreeOrgChartState) {
-    if (this.props.currentUserTeam !== prevProps.currentUserTeam || this.props.maxLevels !== prevProps.maxLevels) {
+  public async componentDidUpdate(
+    prevProps: ITreeOrgChartProps,
+    prevState: ITreeOrgChartState
+  ) {
+    if (
+      this.props.currentUserTeam !== prevProps.currentUserTeam ||
+      this.props.maxLevels !== prevProps.maxLevels
+    ) {
      await this.loadOrgchart();
    }
  }
@ -51,25 +65,27 @@ export default class TreeOrgChart extends React.Component<ITreeOrgChartProps, IT
  public async loadOrgchart() {
    this.setState({ treeData: [], isLoading: true });
    const currentUser = `i:0#.f|membership|${this.props.context.pageContext.user.loginName}`;
-    const currentUserProperties = await this.SPService.getUserProperties(currentUser);
+    const currentUserProperties = await this.SPService.getUserProperties(
+      currentUser
+    );
    this.treeData = [];
    // Test if show only my Team or All Organization Chart
    if (!this.props.currentUserTeam) {
-      const treeManagers = await this.buildOrganizationChart(currentUserProperties);
-      treeManagers ?
-        this.treeData.push(treeManagers)
-        : null;
+      const treeManagers = await this.buildOrganizationChart(
+        currentUserProperties
+      );
+      if (treeManagers) this.treeData.push(treeManagers);
    } else {
-      const treeManagers = await this.buildMyTeamOrganizationChart(currentUserProperties);
-      treeManagers ?
+      const treeManagers = await this.buildMyTeamOrganizationChart(
+        currentUserProperties
+      );
+      if (treeManagers)
        this.treeData.push({
-          title: (treeManagers.person),
+          title: treeManagers.person,
          expanded: true,
          children: treeManagers.treeChildren
-        })
-        : null;
+        });
    }
-    console.log(JSON.stringify(this.treeData));
    this.setState({ treeData: this.treeData, isLoading: false });
  }

@ -79,9 +95,14 @@ export default class TreeOrgChart extends React.Component<ITreeOrgChartProps, IT
  */
  public async buildOrganizationChart(currentUserProperties: any) {
    // Get Managers
-    let treeManagers: ITreeData = null;
-    if (currentUserProperties.ExtendedManagers && currentUserProperties.ExtendedManagers.length > 0) {
-      treeManagers = await this.getUsers(currentUserProperties.ExtendedManagers[0]);
+    let treeManagers: ITreeData | null = null;
+    if (
+      currentUserProperties.ExtendedManagers &&
+      currentUserProperties.ExtendedManagers.length > 0
+    ) {
+      treeManagers = await this.getUsers(
+        currentUserProperties.ExtendedManagers[0]
+      );
    }
    return treeManagers;
  }
@ -89,51 +110,73 @@ export default class TreeOrgChart extends React.Component<ITreeOrgChartProps, IT
  // Get user from Top Manager
  */
  private async getUsers(manager: string) {
-
    let person: any;
    let spUser: IPersonaSharedProps = {};
    // Get User Properties
    const managerProperties = await this.SPService.getUserProperties(manager);
-    const imageInitials: string[] = managerProperties.DisplayName.split(' ');
+    const imageInitials: string[] = managerProperties.DisplayName.split(" ");
    // Persona Card Properties
    spUser.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`;
-    spUser.imageInitials = `${imageInitials[0].substring(0, 1).toUpperCase()}${imageInitials[1].substring(0, 1).toUpperCase()}`;
+    spUser.imageInitials = `${imageInitials[0]
+      .substring(0, 1)
+      .toUpperCase()}${imageInitials[1].substring(0, 1).toUpperCase()}`;
    spUser.text = managerProperties.DisplayName;
    spUser.tertiaryText = managerProperties.Email;
    spUser.secondaryText = managerProperties.Title;
    // PersonaCard component
-    person = <Persona {...spUser} hidePersonaDetails={false} size={PersonaSize.size40} />;
+    person = (
+      <Persona
+        {...spUser}
+        hidePersonaDetails={false}
+        size={PersonaSize.size40}
+      />
+    );
    // Has DirectReports
-    if (managerProperties.DirectReports && managerProperties.DirectReports.length > 0) {
-      const usersDirectReports: any[] = await this.getChildren(managerProperties.DirectReports);
+    if (
+      managerProperties.DirectReports &&
+      managerProperties.DirectReports.length > 0
+    ) {
+      const usersDirectReports: any[] = await this.getChildren(
+        managerProperties.DirectReports
+      );
      // return treeData
-      return { title: (person), expanded: true, children: usersDirectReports };
+      return { title: person, expanded: true, children: usersDirectReports };
      // Don't have DirectReports
    } else {
      // return treeData
-      return { title: (person) };
+      return { title: person };
    }
  }
  // Get Children (user DirectReports)
  private async getChildren(userDirectReports: any[]) {
-
    let treeChildren: ITreeChildren[] = [];
    let spUser: IPersonaSharedProps = {};

    for (const user of userDirectReports) {
      const managerProperties = await this.SPService.getUserProperties(user);
-      const imageInitials: string[] = managerProperties.DisplayName.split(' ');
+      const imageInitials: string[] = managerProperties.DisplayName.split(" ");

      spUser.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`;
-      spUser.imageInitials = `${imageInitials[0].substring(0, 1).toUpperCase()}${imageInitials[1].substring(0, 1).toUpperCase()}`;
+      spUser.imageInitials = `${imageInitials[0]
+        .substring(0, 1)
+        .toUpperCase()}${imageInitials[1].substring(0, 1).toUpperCase()}`;
      spUser.text = managerProperties.DisplayName;
      spUser.tertiaryText = managerProperties.Email;
      spUser.secondaryText = managerProperties.Title;
-      const person = <Persona {...spUser} hidePersonaDetails={false} size={PersonaSize.size40} />;
-      const usersDirectReports = await this.getChildren(managerProperties.DirectReports);
+      const person = (
+        <Persona
+          {...spUser}
+          hidePersonaDetails={false}
+          size={PersonaSize.size40}
+        />
+      );
+      const usersDirectReports = await this.getChildren(
+        managerProperties.DirectReports
+      );

-      usersDirectReports ? treeChildren.push({ title: (person), children: usersDirectReports }) :
-        treeChildren.push({ title: (person) });
+      usersDirectReports
+        ? treeChildren.push({ title: person, children: usersDirectReports })
+        : treeChildren.push({ title: person });
    }
    return treeChildren;
  }
@ -143,75 +186,109 @@ export default class TreeOrgChart extends React.Component<ITreeOrgChartProps, IT
      @parm: currentUserProperties
  */
  private async buildMyTeamOrganizationChart(currentUserProperties: any) {
-
    let manager: IPersonaSharedProps = {};
    let me: IPersonaSharedProps = {};
    let treeChildren: ITreeChildren[] = [];
    let peer: IPersonaSharedProps = {};
    let imageInitials: string[];
-    let hasManager:boolean = false;
-    let  managerCard: any;
+    let hasManager: boolean = false;
+    let managerCard: any;
    // Get My Manager
-    const myManager = await this.SPService.getUserProfileProperty(currentUserProperties.AccountName, 'Manager');
+    const myManager = await this.SPService.getUserProfileProperty(
+      currentUserProperties.AccountName,
+      "Manager"
+    );
    // Get My Manager Properties
-    if (myManager){
-      const managerProperties = await this.SPService.getUserProperties(myManager);
-    imageInitials = managerProperties.DisplayName.split(' ');
-    // PersonaCard Props
-    manager.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`;
-    manager.imageInitials = `${imageInitials[0].substring(0, 1).toUpperCase()}${imageInitials[1].substring(0, 1).toUpperCase()}`;
-    manager.text = managerProperties.DisplayName;
-    manager.tertiaryText = managerProperties.Email;
-    manager.secondaryText = managerProperties.Title;
-    // PersonaCard Component
-     managerCard = <Persona {...manager} hidePersonaDetails={false} size={PersonaSize.size40} />;
+    if (myManager) {
+      const managerProperties = await this.SPService.getUserProperties(
+        myManager
+      );
+      imageInitials = managerProperties.DisplayName?.split(" ").map(name => name[0]);
+      // PersonaCard Props
+      manager.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`;
+      if (imageInitials)
+        manager.imageInitials = `${imageInitials[0]}${imageInitials[1]}`.toUpperCase();
+      manager.text = managerProperties.DisplayName;
+      manager.tertiaryText = managerProperties.Email;
+      manager.secondaryText = managerProperties.Title;
+      // PersonaCard Component
+      managerCard = (
+        <Persona
+          {...manager}
+          hidePersonaDetails={false}
+          size={PersonaSize.size40}
+        />
+      );
      hasManager = true;
    }

    // Get my Properties
-    const meImageInitials: string[] = currentUserProperties.DisplayName.split(' ');
+    const meImageInitials: string[] = currentUserProperties.DisplayName.split(
+      " "
+    );
    me.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${currentUserProperties.Email}`;
-    me.imageInitials = `${meImageInitials[0].substring(0, 1).toUpperCase()}${meImageInitials[1].substring(0, 1).toUpperCase()}`;
+    me.imageInitials = `${meImageInitials[0]
+      .substring(0, 1)
+      .toUpperCase()}${meImageInitials[1].substring(0, 1).toUpperCase()}`;
    me.text = currentUserProperties.DisplayName;
    me.tertiaryText = currentUserProperties.Email;
    me.secondaryText = currentUserProperties.Title;
-    const meCard = <Persona {...me} hidePersonaDetails={false} size={PersonaSize.size40} />;
-    const usersDirectReports: any[] = await this.getChildren(currentUserProperties.DirectReports);
+    const meCard = (
+      <Persona {...me} hidePersonaDetails={false} size={PersonaSize.size40} />
+    );
+    const usersDirectReports: any[] = await this.getChildren(
+      currentUserProperties.DirectReports
+    );
    // Current USer Has Manager
    if (hasManager) {
-      treeChildren.push({ title: (meCard), expanded: true, children: usersDirectReports })
-
-    }else{
-        treeChildren = usersDirectReports;
-        managerCard = meCard;
+      treeChildren.push({
+        title: meCard,
+        expanded: true,
+        children: usersDirectReports
+      });
+    } else {
+      treeChildren = usersDirectReports;
+      managerCard = meCard;
    }

    // Get MyPeers
    for (const userPeer of currentUserProperties.Peers) {
      const peerProperties = await this.SPService.getUserProperties(userPeer);
-      imageInitials = peerProperties.DisplayName.split(' ');
+      imageInitials = peerProperties.DisplayName.split(" ");
      peer.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${peerProperties.Email}`;
-      peer.imageInitials = `${imageInitials[0].substring(0, 1).toUpperCase()}${imageInitials[1].substring(0, 1).toUpperCase()}`;
+      peer.imageInitials = `${imageInitials[0]
+        .substring(0, 1)
+        .toUpperCase()}${imageInitials[1].substring(0, 1).toUpperCase()}`;
      peer.text = peerProperties.DisplayName;
      peer.tertiaryText = peerProperties.Email;
      peer.secondaryText = peerProperties.Title;
-      const peerCard = <Persona {...peer} hidePersonaDetails={false} size={PersonaSize.size40} />;
-      treeChildren.push({ title: (peerCard) });
+      const peerCard = (
+        <Persona
+          {...peer}
+          hidePersonaDetails={false}
+          size={PersonaSize.size40}
+        />
+      );
+      treeChildren.push({ title: peerCard });
    }
    // Return
-    return { 'person': managerCard, 'treeChildren': treeChildren };
-
+    return { person: managerCard, treeChildren: treeChildren };
  }
  // Render
  public render(): React.ReactElement<ITreeOrgChartProps> {
    return (
      <div className={styles.treeOrgChart}>
-        <WebPartTitle displayMode={this.props.displayMode}
+        <WebPartTitle
+          displayMode={this.props.displayMode}
          title={this.props.title}
-          updateProperty={this.props.updateProperty} />
-        {
-          this.state.isLoading ? <Spinner size={SpinnerSize.large} label="Loading Organization Chart ..."></Spinner> : null
-        }
+          updateProperty={this.props.updateProperty}
+        />
+        {this.state.isLoading ? (
+          <Spinner
+            size={SpinnerSize.large}
+            label="Loading Organization Chart ..."
+          ></Spinner>
+        ) : null}
        <div className={styles.treeContainer}>
          <SortableTree
            treeData={this.state.treeData}
@ -225,20 +302,20 @@ export default class TreeOrgChart extends React.Component<ITreeOrgChartProps, IT
                <IconButton
                  disabled={false}
                  checked={false}
-                  iconProps={{ iconName: 'ContactInfo' }}
+                  iconProps={{ iconName: "ContactInfo" }}
                  title="Contact Info"
                  ariaLabel="Contact"
-                  onClick={(ev) => {
-                    window.open(`https://eur.delve.office.com/?p=${rowInfo.node.title.props.tertiaryText}&v=work`);
+                  onClick={() => {
+                    window.open(
+                      `https://eur.delve.office.com/?p=${rowInfo.node.title.props.tertiaryText}&v=work`
+                    );
                  }}
                />
-              ],
+              ]
            })}
          />
        </div>
      </div>
    );
  }
-
-
 }
--- a/samples/react-tree-orgchart/tsconfig.json
+++ b/samples/react-tree-orgchart/tsconfig.json
@ -1,4 +1,5 @@
 {
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
--- a/samples/react-youtube/src/webparts/youtube/components/Youtube.tsx
+++ b/samples/react-youtube/src/webparts/youtube/components/Youtube.tsx
@ -59,19 +59,29 @@ export default class Youtube extends React.Component<IYoutubeProps, IYoutubeStat
      q: term,
      maxResults: maxResults,
      type: 'video',
-      channelId: channelId || null
+      channelId: channelId || null,
+      order: "date" //Reverse sorts by publish date so it returns most recent.
    };

    axios.get(ROOT_URL, { params: params })
      .then((response) => {
        // if (callback) { callback(response.data.items); }
        // return response.data.items;
+      
+        let decodedItems = [];
+        for (let item of response.data.items ) {
+          item.snippet.title = item.snippet.title.replace(/&amp;/g, '&');
+          item.snippet.description = item.snippet.title.replace(/&amp;/g, '&');
+          decodedItems.push(item);
+        }
+      
        this.setState({
-          videos: response.data.items,
-          selectedVideo: response.data.items[0]
+          videos: decodedItems,
+          selectedVideo: decodedItems[0]
        });
      })
      .catch((error) => {
+        console.error('YouTube Search Error:' );
        console.error(error);
      });
  }
				`@ -0,0 +1 @@`
				`// A file is required to be in the root of the /src directory by the TypeScript compiler`