Merge pull request #2447 from techienickb/main

Updated react-page-hierarchy & react-teams-membership-updater to spfx 1.14

samples/react-pages-hierarchy/.editorconfig

@@ -1,25 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# we recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[{package,bower}.json]
-indent_style = space
-indent_size = 2

samples/react-pages-hierarchy/.gitignore

@@ -30,3 +30,5 @@ obj
 
 # Styles Generated Code
 *.scss.ts
+
+release

samples/react-pages-hierarchy/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

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

@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.10.0",
+    "version": "1.14.0",
     "libraryName": "react-pages-hierarchy",
     "libraryId": "89758fb6-85e2-4e2b-ac88-4f4e7e5f60cb",
     "packageManager": "npm",

samples/react-pages-hierarchy/README.md

@@ -24,8 +24,8 @@ This web part allows users to create a faux page hierarchy in their pages librar
 
 ## Compatibility
 
-![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) 
+![SPFx 1.14](https://img.shields.io/badge/SPFx-1.14.0-green.svg) 
-![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) 
+![Node.js v14](https://img.shields.io/badge/Node.js-v14-green.svg) 
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg)
 ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@@ -54,6 +54,7 @@ react-pages-hierarchy|[Bo George](https://github.com/bogeorge) ([@bo_george](htt
 Version|Date|Comments
 -------|----|--------
 1.0|April 30, 2020|Initial release
+1.2|March 24, 2022|Updated to SPFX v1.14 and PnP packages to v3
 
 
 ## Minimal Path to Awesome

samples/react-pages-hierarchy/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-pages-hierarchy/config/deploy-azure-storage.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
-  "workingDir": "./temp/deploy/",
+  "workingDir": "./release/assets/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "react-pages-hierarchy",
   "accessKey": "<!-- ACCESS KEY -->"

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

@@ -3,9 +3,44 @@
   "solution": {
     "name": "react-pages-hierarchy",
     "id": "89758fb6-85e2-4e2b-ac88-4f4e7e5f60cb",
-    "version": "1.0.1.0",
+    "title": "Pages Hierarchy",
+    "version": "1.0.2.0",
     "includeClientSideAssets": true,
-    "isDomainIsolated": false
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "Bo George",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "websiteUrl": "https://github.com/bogeorge",
+      "mpnId": "Undefined-1.14.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "This web part allows users to create a faux page hierarchy in their pages library and use it for page-to-page navigation"
+      },
+      "longDescription": {
+        "default": "This web part allows users to create a faux page hierarchy in their pages library and use it for page-to-page navigation.  It will ask you to create a page parent property on first use which is then used by the web part to either show a breadcrumb of the current pages ancestors or buttons for the pages children."
+      },
+      "screenshotPaths": [
+        "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-pages-hierarchy/assets/PagesHierarchy.gif"
+      ],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "Breadcrumbs",
+        "description": "Displays breadcrumbs to the current page",
+        "id": "ce42762f-a823-4f12-80b2-b708cdebfaa4",
+        "version": "1.0.2.0"
+      },
+      {
+        "title": "Child Pages",
+        "description": "Displays a list of child pages",
+        "id": "ce42762f-a823-4f12-80b2-b708cdebfaa5",
+        "version": "1.0.2.0"
+      }
+    ]
   },
   "paths": {
     "zippedPackage": "solution/react-pages-hierarchy.sppkg"

samples/react-pages-hierarchy/config/serve.json

@@ -2,7 +2,7 @@
   "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://localhost:5432/workbench",
+  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
   "api": {
     "port": 5432,
     "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"

samples/react-pages-hierarchy/gulpfile.js

@@ -19,6 +19,18 @@ build.configureWebpack.mergeConfig({
     }
 });
 
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
+// disable tslint
+build.tslintCmd.enabled = false;
+
 build.initialize(require('gulp'));
 
 var runSequence = require('run-sequence');

samples/react-pages-hierarchy/package.json

@@ -1,50 +1,42 @@
 {
   "name": "react-pages-hierarchy",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "lib/index.js",
-  "engines": {
-    "node": ">=0.10.0"
-  },
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.10.0",
+    "@microsoft/rush-stack-compiler-4.2": "^0.1.2",
-    "@microsoft/sp-lodash-subset": "1.10.0",
+    "@microsoft/sp-core-library": "1.14.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
+    "@microsoft/sp-lodash-subset": "1.14.0",
-    "@microsoft/sp-property-pane": "1.10.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
-    "@microsoft/sp-webpart-base": "1.10.0",
+    "@microsoft/sp-property-pane": "1.14.0",
-    "@pnp/common": "^2.0.3",
+    "@microsoft/sp-webpart-base": "1.14.0",
-    "@pnp/logging": "^2.0.3",
+    "@pnp/sp": "^3.1.0",
-    "@pnp/odata": "^2.0.3",
+    "@pnp/spfx-controls-react": "^3.7.2",
-    "@pnp/sp": "^2.0.3",
+    "@pnp/spfx-property-controls": "^3.6.0",
-    "@pnp/spfx-controls-react": "1.17.0",
+    "office-ui-fabric-react": "7.174.1",
-    "@pnp/spfx-property-controls": "1.17.0",
+    "react": "16.13.1",
-    "@types/es6-promise": "0.0.33",
+    "react-dom": "16.13.1",
-    "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.3",
-    "@types/webpack-env": "1.13.1",
-    "office-ui-fabric-react": "6.189.2",
-    "react": "16.8.5",
-    "react-dom": "16.8.5",
     "react-resize-detector": "^4.2.1"
   },
   "resolutions": {
     "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
+    "@microsoft/sp-build-web": "1.14.0",
-    "@microsoft/sp-build-web": "1.10.0",
+    "@microsoft/sp-module-interfaces": "1.14.0",
-    "@microsoft/sp-module-interfaces": "1.10.0",
+    "@microsoft/sp-tslint-rules": "1.14.0",
-    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-webpart-workbench": "^1.12.1",
-    "@microsoft/sp-webpart-workbench": "1.10.0",
+    "@types/es6-promise": "0.0.33",
-    "@types/chai": "3.4.34",
+    "@types/react": "16.9.51",
-    "@types/mocha": "2.2.38",
+    "@types/react-dom": "16.9.8",
+    "@types/webpack-env": "^1.16.3",
     "ajv": "~5.2.2",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.2",
     "run-sequence": "^2.2.1"
   }
 }

samples/react-pages-hierarchy/src/apiHooks/usePageApi.ts

@@ -1,9 +1,10 @@
 import { useReducer, useEffect, useState } from 'react';
-import { sp, PermissionKind } from '@pnp/sp/presets/all';
+import { PermissionKind, spfi, SPFx } from '@pnp/sp/presets/all';
 import { ErrorHelper, LogHelper, ListTitles, PageFields } from '@src/utilities';
 import { Action } from "./action";
 import { GetRequest } from './getRequest';
 import { IPage } from '@src/models/IPage';
+import { WebPartContext } from '@microsoft/sp-webpart-base';
 
 // state that we track
 interface PagesState {
@@ -83,7 +84,7 @@ function pagesReducer(state: PagesState, action: Action): PagesState {
   }
 }
 
-export function usePageApi(currentPageId: number, pageEditFinished: boolean): PageApi {
+export function usePageApi(currentPageId: number, pageEditFinished: boolean, context: WebPartContext): PageApi {
   const [pagesState, pagesDispatch] = useReducer(pagesReducer, {
     parentPageColumnExists: true,
     userCanManagePages: false,
@@ -92,6 +93,8 @@ export function usePageApi(currentPageId: number, pageEditFinished: boolean): Pa
     getRequest: { isLoading: false, hasError: false, errorMessage: "" },
   });
 
+  const sp = spfi().using(SPFx(context));
+
   // currentPageId is a dependency only because it can change when on the workbench, otherwise it really wouldn't change while on a page
   useEffect(() => {
     LogHelper.verbose('usePageApi', 'useEffect', `[currentPageId, ${currentPageId}, pageEditFinished: ${pageEditFinished} ]`);
@@ -126,8 +129,7 @@ export function usePageApi(currentPageId: number, pageEditFinished: boolean): Pa
         PageFields.PARENTPAGELOOKUP
       )
       .top(5000)
-      .orderBy(PageFields.TITLE, true)
+      .orderBy(PageFields.TITLE, true)()
-      .get()
       .catch(e => {
         ErrorHelper.handleHttpError('getPages', e);
         pagesDispatch({ type: ActionTypes.GET_PAGES_ERRORED });
@@ -153,8 +155,7 @@ export function usePageApi(currentPageId: number, pageEditFinished: boolean): Pa
     LogHelper.verbose('usePageApi', 'parentPageExists', ``);
 
     let parentPage = await sp.web.lists.getByTitle(ListTitles.SITEPAGES).fields
-      .getByInternalNameOrTitle(PageFields.PARENTPAGELOOKUP)
+      .getByInternalNameOrTitle(PageFields.PARENTPAGELOOKUP)()
-      .get()
       .catch(e => {
         // swallow the exception we'll handle below
       });
@@ -185,11 +186,10 @@ export function usePageApi(currentPageId: number, pageEditFinished: boolean): Pa
   async function addParentPageFieldToSitePages(): Promise<void> {
     LogHelper.verbose('usePageApi', 'addParentPageFieldToSitePages', ``);
 
-    let list = await sp.web.lists.getByTitle(ListTitles.SITEPAGES)
+    let list = await sp.web.lists.getByTitle(ListTitles.SITEPAGES)();
-      .get();
 
     let lookup = await sp.web.lists.getByTitle(ListTitles.SITEPAGES).fields
-      .addLookup(PageFields.PARENTPAGELOOKUP, list.Id, PageFields.TITLE)
+      .addLookup(PageFields.PARENTPAGELOOKUP, { LookupListId: list.Id, LookupFieldName: PageFields.TITLE })
       .catch(e => {
         return null;
         ErrorHelper.handleHttpError('canUserUpdateSitePages', e);

samples/react-pages-hierarchy/src/mocks/mockresponse.ts

@@ -424,7 +424,7 @@ export class MockResponse {
 
                 let result: IItemUpdateResult = {
                     item: item,
-                    data: { 'odata.etag': '' }
+                    data: { 'etag': '' }
                 };
 
                 body = JSON.stringify(result);

samples/react-pages-hierarchy/src/webparts/BaseWebPart.ts

@@ -1,6 +1,5 @@
 import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
 import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
-import { sp } from "@pnp/sp";
 import { Logger, ConsoleListener, LogLevel } from "@pnp/logging";
 import { CustomFetchClient } from '@src/mocks/customfetchclient';
 
@@ -14,15 +13,6 @@ export default class BaseWebPart<TProperties> extends BaseClientSideWebPart<TPro
         }
 
         return super.onInit().then(_ => {
-
-            sp.setup({
-              spfxContext: this.context,
-              sp: {
-                fetchClientFactory: () => {
-                    return new CustomFetchClient(isUsingSharePoint);
-                },
-            }
-            });
             // subscribe a listener
             Logger.subscribe(new ConsoleListener());
 

samples/react-pages-hierarchy/src/webparts/pagehierarchy/PageHierarchyWebPart.ts

@@ -53,7 +53,8 @@ export default class PageHierarchyWebPart extends BaseWebPart<IPageHierarchyWebP
         displayMode: this.displayMode,
         updateTitle: (t) => { this.properties.title = t; this.render(); },
         onConfigure: () => { this.onConfigure(); },
-        pageEditFinished: this.pageEditFinished
+        pageEditFinished: this.pageEditFinished,
+        context: this.context
       }
     );
     ReactDom.render(element, this.domElement, () => {

samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Container/Container.tsx

@@ -9,7 +9,7 @@ import { usePageApi } from '@src/apiHooks/usePageApi';
 import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
 
 export const Container: React.FunctionComponent<IContainerProps> = props => {
-  const pagesApi = usePageApi(props.currentPageId, props.pageEditFinished);
+  const pagesApi = usePageApi(props.currentPageId, props.pageEditFinished, props.context);
 
   let controlToRender = undefined;
   switch (props.pagesToDisplay) {

samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Container/IContainerProps.ts

@@ -1,11 +1,13 @@
 import { IReadonlyTheme } from '@microsoft/sp-component-base';
 import { PagesToDisplay } from '@src/utilities';
 import { DisplayMode } from "@microsoft/sp-core-library";
+import { WebPartContext } from '@microsoft/sp-webpart-base';
 
 export interface IContainerProps {
   currentPageId: number;
   pagesToDisplay: PagesToDisplay;
   themeVariant: IReadonlyTheme;
+  context: WebPartContext;
   domElement: HTMLElement;
   // all this is just for WebPartTitle control
   showTitle: boolean;

samples/react-pages-hierarchy/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.2/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -25,22 +25,18 @@
       "./node_modules/@microsoft"
     ],
     "types": [
-      "es6-promise",
       "webpack-env"
     ],
     "lib": [
       // commented out to allow for this.constructor.name support
-      // "es5",
+      "es2015.promise",
       "es2017",
       "dom",
       "es2015.collection"
     ]
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
-  ],
+    "src/**/*.tsx"
-  "exclude": [
-    "node_modules",
-    "lib"
   ]
 }

samples/react-pages-hierarchy/tslint.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
   "rules": {
     "class-name": false,
     "export-name": false,
@@ -17,7 +17,6 @@
     "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,

samples/react-teams-membership-updater/.devcontainer/devcontainer.json

@@ -1,7 +1,7 @@
 // For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
 {
-	"name": "SPFx 1.12.1",
+	"name": "SPFx 1.140.",
-	"image": "docker.io/m365pnp/spfx:1.12.1",
+	"image": "docker.io/m365pnp/spfx:1.14.0",
 	// Set *default* container specific settings.json values on container create.
 	"settings": {},
 	// Add the IDs of extensions you want installed when the container is created.
@@ -21,7 +21,7 @@
 			"onAutoForward": "silent",
 			"requireLocalPort": true
 		},
-		// Not needed for SPFx>= 1.12.1 
+		// Not needed for SPFx>= 1.12.1
 		// "5432": {
 		// 	"protocol": "https",
 		// 	"label": "Workbench",
@@ -36,4 +36,4 @@
 	},
 	"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
 	"remoteUser": "node"
-}
+}

samples/react-teams-membership-updater/.yo-rc.json

@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.12.1",
+    "version": "1.14.0",
     "libraryName": "teams-membership-updater",
     "libraryId": "5da816cf-c693-4b88-b9bd-a9da3587f05c",
     "packageManager": "npm",

samples/react-teams-membership-updater/README.md

@@ -12,9 +12,9 @@ Used to update the membership of a team based on the contents of a CSV file, can
 
 ## Compatibility
 
-![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg) 
+![SPFx 1.14.0](https://img.shields.io/badge/SPFx-1.14.0-green.svg)
-![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg) 
+![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg)
-![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) 
+![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
 ![Teams Yes: Designed for Microsoft Teams](https://img.shields.io/badge/Teams-Yes-green.svg "Designed for Microsoft Teams")
 ![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
@@ -29,9 +29,9 @@ This web part can be deployed to a site or as a teams personal app.  This does r
 
 Uses:
 
-- PnP React Controls
+* PnP React Controls
-- PnP React Property Controls
+* PnP React Property Controls
-- React Papaparse (CSV parsing)
+* React Papaparse (CSV parsing)
 
 Solution|Author(s)
 --------|---------
@@ -48,20 +48,21 @@ Version|Date|Comments
 1.0.8|April 22, 2021|Added support for paging on the team member list get
 1.1.0|July 13, 2021|Upgraded to v1.12.1 of SPFx and v3 of pnp controls
 1.2.0|August 17, 2021|Added support for populating private channels inside of a team, added support for paged list of teams from Graph, added sorting to the Team list
-1.2.1|September 21, 2021| Missing '/members' in the private channel membership url 
+1.2.1|September 21, 2021| Missing '/members' in the private channel membership url
+1.2.2|March, 24, 2022|Upgraded to SPFx v1.14 and v4 of react-papaparse
 
 ## Minimal Path to Awesome
 
-- Clone this repository
+* Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-membership-updater) then unzip it)
-- in the command line run:
+* From your command line, change your current directory to the directory containing this sample (`react-teams-membership-updater`, located under `samples`)
-  - `npm install`
+* in the command line run:
-  - `gulp build`
+  * `npm install`
-  - `gulp bundle --ship`
+  * `gulp build`
-  - `gulp package-solution --ship`
+  * `gulp bundle --ship`
-  - Add to AppCatalog and deploy
+  * `gulp package-solution --ship`
-
+  * Add to AppCatalog and deploy
->  This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
 
+> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit <https://aka.ms/spfx-devcontainer> for further instructions.
 
 ## Help
 
@@ -79,10 +80,8 @@ For questions regarding this sample, [create a new question](https://github.com/
 
 Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-teams-membership-updater&template=question.yml&sample=react-teams-membership-updater&authors=@techienickb&title=react-teams-membership-updater%20-%20).
 
-
 ## 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.**
 
-
+<img src="<https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-teams-membership-updater> />
-<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-teams-membership-updater />

samples/react-teams-membership-updater/assets/sample.json

@@ -9,7 +9,7 @@
       "Used to update the membership of a team based on the contents of a CSV file, can be hosted in a SharePoint site where a list can be defined for logging purposes or run inside teams as a personal app."
     ],
     "creationDateTime": "2020-04-27",
-    "updateDateTime": "2021-09-21",
+    "updateDateTime": "2022-03-24",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.12.1"
+        "value": "1.14.0"
       }
     ],
     "thumbnails": [

samples/react-teams-membership-updater/config/package-solution.json

@@ -12,7 +12,7 @@
       "websiteUrl": "https://nbdev.uk",
       "mpnId": "000000"
     },
-    "version": "1.0.2.1",
+    "version": "1.0.2.2",
     "includeClientSideAssets": true,
     "isDomainIsolated": false,
     "webApiPermissionRequests": [
@@ -32,6 +32,25 @@
         "resource": "Microsoft Graph",
         "scope": "ChannelMember.ReadWrite.All"
       }
+    ],
+    "metadata": {
+      "shortDescription": {
+        "default": "Populate a Team or Channel Membership from a CSV file"
+      },
+      "longDescription": {
+        "default": "Populate or update a Team or Channel Membership from a CSV file"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "Channe/Team Membership Updating",
+        "description": "Updates/Populates a Team based on the values in a CSV file",
+        "id": "c7e4099a-153e-444f-a52f-c3bd3c137760",
+        "version": "1.0.2.1"
+      }
     ]
   },
   "paths": {

samples/react-teams-membership-updater/package.json

@@ -9,32 +9,30 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.12.1",
+    "@microsoft/sp-core-library": "1.14.0",
-    "@microsoft/sp-http": "1.12.1",
+    "@microsoft/sp-lodash-subset": "1.14.0",
-    "@microsoft/sp-lodash-subset": "1.12.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.12.1",
+    "@microsoft/sp-property-pane": "1.14.0",
-    "@microsoft/sp-property-pane": "1.12.1",
+    "@microsoft/sp-webpart-base": "1.14.0",
-    "@microsoft/sp-webpart-base": "1.12.1",
+    "@pnp/spfx-controls-react": "3.7.2",
-    "@pnp/spfx-controls-react": "^3.3.0",
+    "@pnp/spfx-property-controls": "3.6.0",
-    "@pnp/spfx-property-controls": "^3.2.0",
+    "office-ui-fabric-react": "^7.174.1",
-    "office-ui-fabric-react": "^7.176.1",
+    "react": "16.13.1",
-    "react": "16.9.0",
+    "react-dom": "16.13.1",
-    "react-dom": "16.9.0",
+    "react-papaparse": "^4.0.2"
-    "react-papaparse": "^3.17.2"
   },
   "resolutions": {
     "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-3.7": "0.2.3",
+    "@microsoft/rush-stack-compiler-3.9": "^0.4.48",
-    "@microsoft/sp-build-web": "1.12.1",
+    "@microsoft/sp-build-web": "1.14.0",
-    "@microsoft/sp-module-interfaces": "1.12.1",
+    "@microsoft/sp-module-interfaces": "1.14.0",
-    "@microsoft/sp-tslint-rules": "1.12.1",
+    "@microsoft/sp-tslint-rules": "1.14.0",
-    "@microsoft/sp-webpart-workbench": "1.12.1",
+    "@types/react": "^16.9.51",
-    "@types/react": "^17.0.22",
+    "@types/react-dom": "^16.9.8",
-    "@types/react-dom": "^17.0.8",
     "@types/webpack-env": "^1.16.2",
-    "ajv": "~5.2.2",
+    "ajv": "~6.9.1",
     "gulp": "~4.0.2"
   }
 }

samples/react-teams-membership-updater/src/webparts/teamsMembershipUpdater/components/TeamsMembershipUpdater.tsx

@@ -3,7 +3,7 @@ import styles from './TeamsMembershipUpdater.module.scss';
 import { ITeamsMembershipUpdaterProps } from './ITeamsMembershipUpdaterProps';
 import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode, ProgressIndicator, Separator, PrimaryButton, MessageBar, MessageBarType, Link, Toggle, List, Dropdown, IDropdownOption, Text, TeachingBubble, Icon, Callout, mergeStyleSets, FontWeights } from 'office-ui-fabric-react';
 import { ITeamsMembershipUpdaterWebPartProps } from '../TeamsMembershipUpdaterWebPart';
-import { readString } from 'react-papaparse';
+import { usePapaParse } from 'react-papaparse';
 import { MSGraphClient, SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
 import * as MicrosoftGraph from "@microsoft/microsoft-graph-types";
 import { FilePicker, IFilePickerResult } from '@pnp/spfx-controls-react';
@@ -117,11 +117,13 @@ export default class TeamsMembershipUpdater extends React.Component<ITeamsMember
           reader.readAsArrayBuffer(file);
           reader.onloadend = ((ev) => {
             let decodedString = new TextDecoder('utf-8').decode(new DataView(reader.result as ArrayBuffer));
-            const csv = readString(decodedString, { header: true, skipEmptyLines: true });
+            const { readString } = usePapaParse();
-            var h = csv.meta.fields;
+            readString(decodedString, { header: true, skipEmptyLines: true, worker: true, complete: (results) => {
-            this._data = csv.data;
+              var h = results.meta.fields;
-            this._datacolumns = h.map(r => { return { key: r.replace(' ', ''), name: r, fieldName: r, isResizable: true }; });
+              this._data = results.data;
-            this.setState({ ...this.state, csvcolumns: this._datacolumns, csvdata: this._data, csvItems: h.map(r => ({ key: r.replace(' ', ''), text: r })), logs: [], errors: [], logurl: null });
+              this._datacolumns = h.map(r => { return { key: r.replace(' ', ''), name: r, fieldName: r, isResizable: true, minWidth: 100 }; });
+              this.setState({ ...this.state, csvcolumns: this._datacolumns, csvdata: this._data, csvItems: h.map(r => ({ key: r.replace(' ', ''), text: r })), logs: [], errors: [], logurl: null });
+            } });
           });
         });
       });

samples/react-teams-membership-updater/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -19,7 +19,6 @@
       "./node_modules/@microsoft"
     ],
     "types": [
-      "es6-promise",
       "webpack-env"
     ],
     "lib": [

samples/react-teams-membership-updater/tslint.json

@@ -17,7 +17,6 @@
     "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,