Upgrade to SPFx 1.20 #5243

samples/react-securitygrid/.devcontainer/devcontainer.json

@@ -0,0 +1,38 @@
+{
+  "name": "SPFx 1.20.0",
+  "image": "docker.io/m365pnp/spfx:1.20.0",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "editorconfig.editorconfig",
+        "dbaeumer.vscode-eslint"
+      ]
+    }
+  },
+  "forwardPorts": [
+    4321,
+    35729,
+    5432
+  ],
+  "portsAttributes": {
+    "4321": {
+      "protocol": "https",
+      "label": "Manifest",
+      "onAutoForward": "silent",
+      "requireLocalPort": true
+    },
+    "5432": {
+      "protocol": "https",
+      "label": "Workbench",
+      "onAutoForward": "silent"
+    },
+    "35729": {
+      "protocol": "https",
+      "label": "LiveReload",
+      "onAutoForward": "silent",
+      "requireLocalPort": true
+    }
+  },
+  "postCreateCommand": "bash .devcontainer/spfx-startup.sh",
+  "remoteUser": "node"
+}

samples/react-securitygrid/.devcontainer/spfx-startup.sh

@@ -0,0 +1,33 @@
+echo
+echo -e "\e[1;94mInstalling Node dependencies\e[0m"
+npm install
+
+## commands to create dev certificate and copy it to the root folder of the project
+echo
+echo -e "\e[1;94mGenerating dev certificate\e[0m"
+gulp trust-dev-cert
+
+# Convert the generated PEM certificate to a  CER certificate
+openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
+
+# Copy the PEM ecrtificate for non-Windows hosts
+cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
+
+## add *.cer to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.cer' ./.gitignore
+  then
+    echo "# .CER Certificates" >> .gitignore
+    echo "*.cer" >> .gitignore
+fi
+
+## add *.pem to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.pem' ./.gitignore
+  then
+    echo "# .PEM Certificates" >> .gitignore
+    echo "*.pem" >> .gitignore
+fi
+
+echo
+echo -e "\e[1;92mReady!\e[0m"
+
+echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"

samples/react-securitygrid/.eslintrc.js

@@ -0,0 +1,5 @@
+require('@rushstack/eslint-config/patch/modern-module-resolution');
+module.exports = {
+  extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
+  parserOptions: { tsconfigRootDir: __dirname }
+};

samples/react-securitygrid/.gitignore

@@ -9,6 +9,7 @@ node_modules
 # Build generated files
 dist
 lib
+release
 solution
 temp
 *.sppkg
@@ -30,3 +31,6 @@ obj
 
 # Styles Generated Code
 *.scss.ts
+
+# heft folder
+.heft

samples/react-securitygrid/.nvmrc

@@ -0,0 +1 @@
+v18.20.4

samples/react-securitygrid/.yo-rc.json

@@ -3,10 +3,15 @@
     "isDomainIsolated": false,
     "isCreatingSolution": false,
     "packageManager": "npm",
-    "version": "1.10.0",
+    "version": "1.20.0",
     "libraryName": "spsecurity-webpart-3",
     "libraryId": "788271fb-ee9b-40df-8381-eb3dc70d1982",
     "environment": "spo",
-    "componentType": "webpart"
+    "componentType": "webpart",
+    "nodeVersion": "18.20.4"
+  },
+  "sdkVersions": {
+    "@microsoft/teams-js": "2.24.0",
+    "@microsoft/microsoft-graph-client": "3.0.2"
   }
 }

samples/react-securitygrid/README.md

@@ -1,18 +1,3 @@
----
-page_type: sample
-products:
-- office-sp
-languages:
-- javascript
-- typescript
-extensions:
-  contentType: samples
-  technologies:
-  - SharePoint Framework
-  platforms:
-  - react
-  createdDate: 12/1/2017 12:00:00 AM
----
 # Security Grid
 
 ## Summary
@@ -87,8 +72,8 @@ This is a port of an Angular 1.3 SharePoint hosted App at https://github.com/rus
 | Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
 |Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility.   |
 
-![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) 
-![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) 
+![SPFx 1.20](https://img.shields.io/badge/SPFx-1.20.0-green.svg) 
+![Node.js v18](https://img.shields.io/badge/Node.js-%20v18-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")
@@ -102,7 +87,7 @@ This is a port of an Angular 1.3 SharePoint hosted App at https://github.com/rus
 
 ## Prerequisites
 
-> React, Office-UI-Fabric, sp-pnp-js, lodash
+> React, Fluent UI React, sp-pnp-js, lodash
 
 ## Contributors
 
@@ -112,6 +97,7 @@ This is a port of an Angular 1.3 SharePoint hosted App at https://github.com/rus
 
 Version|Date|Comments
 -------|----|--------
+1.0.6.0|Oct 20, 2024 | Upgrade to SPFx 1.20
 1.0.5.0|March 6, 2021 | Added webApiPermission request
 1.0.0.4|February 22, 2021 | Added support for AD groups
 1.0.0.3|October 28, 2020 | Update to office-ui-fabric-react 7.148.1, fixing icons and indentation for sub-folders 

samples/react-securitygrid/assets/sample.json

@@ -9,7 +9,7 @@
       "React-securitygrid is an SPFX web part that uses React and Office-UI-Fabric to render a grid showing which users have access to which lists/libraries/folders/files on a Web"
     ],
     "creationDateTime": "2021-03-06",
-    "updateDateTime": "2021-03-06",
+    "updateDateTime": "2024-10-20",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.10.0"
+        "value": "1.20.0"
       }
     ],
     "thumbnails": [

samples/react-securitygrid/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": "spsecurity-webpart-3",
   "accessKey": "<!-- ACCESS KEY -->"

samples/react-securitygrid/config/package-solution.json

@@ -6,15 +6,46 @@
         "name": "spsecurity-webpart-3-client-side-solution",
         "id": "788271fb-ee9b-40df-8381-eb3dc70d1982",
         "version": "1.0.4.0",
-        "webApiPermissionRequests": [{
+        "webApiPermissionRequests": [
+            {
                 "resource": "Microsoft Graph",
                 "scope": "Group.Read.All"
             },
             {
                 "resource": "Microsoft Graph",
                 "scope": "GroupMember.Read.All"
             }
-        ]
+        ],
+        "developer": {
+            "name": "Russel Gove",
+            "privacyUrl": "",
+            "termsOfUseUrl": "",
+            "websiteUrl": "https://github.com/russgove",
+            "mpnId": "Undefined-1.20.0"
+        },
+        "metadata": {
+            "shortDescription": {
+              "default": "Security Grid Web Part"
+            },
+            "longDescription": {
+              "default": "React-securitygrid is an SPFX web part that uses React and Office-UI-Fabric to render a grid showing which users have access to which lists/libraries/folders/files on a Web"
+            },
+            "screenshotPaths": [],
+            "videoUrl": "",
+            "categories": []
+          },
+          "features": [
+            {
+              "title": "Security Grid Web Part Feature",
+              "description": "The feature that activates Security Grid Web Part from the react-securitygrid solution.",
+              "id": "41e37f03-2ea8-4f19-b77a-f2121a1e7c45",
+              "version": "1.0.4.0",
+              "componentIds": [
+                "41e37f03-2ea8-4f19-b77a-f2121a1e7c45"
+              ]
+            }
+          ]
+
     },
     "paths": {
         "zippedPackage": "solution/spsecurity-webpart-3.sppkg"

samples/react-securitygrid/config/sass.json

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

samples/react-securitygrid/config/serve.json

@@ -1,15 +1,6 @@
 {
-    "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
     "port": 4321,
-    "initialPage": "https://localhost:5432/workbench",
-    "https": true,
-    "api": {
-        "port": 5432,
-        "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-    },
-    "serveConfigurations": {
-        "default": {
-            "pageUrl": "https://russellwgove.sharepoint.com/sites/testazad/_layouts/15/workbench.aspx"
-        }
-    }
+    "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx",
+    "https": true
 }

samples/react-securitygrid/gulpfile.js

@@ -8,4 +8,13 @@ build.addSuppression(`Warning - [sass] The local CSS class 'ms-DetailsHeader-cel
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-List-cell' is not camelCase and will not be type-safe.`);
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-DetailsRow' is not camelCase and will not be type-safe.`);
 
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
 build.initialize(gulp);