Merge branch 'add-react-webpart-save-to-approot-folder' of https://github.com/Adam-it/sp-dev-fx-webparts into add-react-webpart-save-to-approot-folder

samples/react-save-to-onedrive-app-personal-folder/.devcontainer/devcontainer.json

@@ -0,0 +1,39 @@
+// 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.14.0",
+	"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.
+	"extensions": [
+		"editorconfig.editorconfig",
+		"dbaeumer.vscode-eslint"
+	],
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [
+		4321,
+		35729
+	],
+	"portsAttributes": {
+		"4321": {
+			"protocol": "https",
+			"label": "Manifest",
+			"onAutoForward": "silent",
+			"requireLocalPort": true
+		},
+		// Not needed for SPFx>= 1.12.1 
+		// "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-save-to-onedrive-app-personal-folder/.devcontainer/spfx-startup.sh

@@ -0,0 +1,51 @@
+mkdir ~/.npm-global
+export NPM_CONFIG_PREFIX=~/.npm-global
+export PATH=$PATH:~/.npm-global/bin
+echo -e "export NPM_CONFIG_PREFIX=~/.npm-global\nexport PATH=\$PATH:~/.npm-global/bin" >> ~/.bashrc
+
+echo
+echo -e "\e[1;94mInstalling Node dependencies for library\e[0m"
+cd library
+npm install
+# npm install sudo -g
+gulp bundle --ship
+gulp package-solution --ship
+npm link
+
+## 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
+
+cd ..
+
+## 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;94mInstalling Node dependencies for web part\e[0m"
+cd webpart
+npm link manage-data
+npm if
+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-save-to-onedrive-app-personal-folder/.gitignore

@@ -0,0 +1,4 @@
+# .CER Certificates
+*.cer
+# .PEM Certificates
+*.pem

samples/react-save-to-onedrive-app-personal-folder/README.md

@@ -1,8 +1,8 @@
-# react-save-to-onedrive-app-personal-folder
+# Save to User Application Personal Folder in OneDrive
 
 ## Summary
 
-This solution shows how to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams. The solution is built of two compontents. Spfx library which provides the functionality to manage data saved to OneDrive application personal folder and Spfx webpart component which is a very simple solution that uses the library and gets or saves data.
+This solution shows how to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams. The solution is built of two compontents. SPFx library which provides the functionality to manage data saved to OneDrive application personal folder and SPFx webpart component which is a very simple solution that uses the library and gets or saves data.
 
 ![image](./assets/to-all-sites.png)
 when adding solution to appcatalog make it available to all sites
@@ -20,19 +20,19 @@ webpart added to teams
 
 ## Compatibility
 
-![SPFx 1.13.0](https://img.shields.io/badge/SPFx-1.13.0-green.svg)
+![SPFx 1.14](https://img.shields.io/badge/SPFx-1.14-green.svg)
 ![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-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 "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
 ![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")
 ![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
-![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
+![Hosted Workbench (Requires permissions))](https://img.shields.io/badge/Hosted%20Workbench-(Requires%20permissions%)-yellow.svg "Requires permissions to be granted before this solution can work on the hosted workbench")
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
 
 ## Applies to
 
-- [SharePoint Framework](https://aka.ms/spfx)
+- [SharePoint Framework](https://aka.ms/SPFx)
-- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/SPFx/set-up-your-developer-tenant)
 
 ## Solution
 
@@ -44,7 +44,7 @@ react-save-to-onedrive-app-personal-folder | [Adam Wójcik](https://github.com/A
 
 Version|Date|Comments
 -------|----|--------
-1.0|Februaru 21, 2022|Initial release
+1.0|February 21, 2022|Initial release
 
 ## How to debug (local testing)
 
@@ -61,14 +61,14 @@ please follow those instructions being in the root folder (react-save-to-onedriv
 
 - 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-save-to-onedrive-app-personal-folder) then unzip it)
 - Ensure that you are at the solution folder
-- go to library folder
+- go to `library` folder
 - in the command-line run:
   - `npm install`
   - `gulp bundle --ship`
   - `gulp package-solution --ship`
   - Add to AppCatalog and deploy (check option to make this solution available to all sites)
   - Approve the MS Graph API permissions in SharePoint Admin page
-- go to webpart folder
+- go to `webpart` folder
 - in the command-line run:
   - `npm install`
   - `gulp serve`
@@ -76,7 +76,7 @@ please follow those instructions being in the root folder (react-save-to-onedriv
   - `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.
 
 ## Features
 
@@ -84,23 +84,23 @@ Description of the extension that expands upon high-level summary above.
 
 This extension illustrates the following concepts:
 
-- how to use Spfx library code in webpart
+- how to use SPFx library code in webpart
-- how to use Microsoft Graph api to use special approot on user OneDrive
+- how to use Microsoft Graph API to use special approot on user OneDrive
-- how to save/update data in a json file special approot folder on user OneDrive as a place to keep data a use in SharePoint or Teams
+- how to save/update data in a `json` file special approot folder on user OneDrive as a place to keep data a use in SharePoint or Teams
 
 ## References
 
-- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/SPFx/set-up-your-developer-tenant)
-- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
+- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/SPFx/build-for-teams-overview)
-- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
+- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/SPFx/web-parts/get-started/using-microsoft-graph-apis)
-- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
+- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/SPFx/publish-to-marketplace-overview)
 - [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
 
 ## Help
 
 We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.
 
-If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
+If you're having issues building the solution, please run [SPFx doctor](https://pnp.github.io/cli-microsoft365/cmd/SPFx/SPFx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
 
 You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-save-to-onedrive-app-personal-folder%22) to see if anybody else is having the same issues.
 

samples/react-save-to-onedrive-app-personal-folder/assets/sample.json

@@ -0,0 +1,56 @@
+[
+    {
+        "name": "pnp-sp-dev-spfx-web-parts-react-save-to-onedrive-app-personal-folder",
+        "source": "pnp",
+        "title": "Save to User Application Personal Folder in OneDrive",
+        "shortDescription": "This solution shows how to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams.",
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-save-to-onedrive-app-personal-folder",
+        "longDescription": [
+            "This solution shows how to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams. The solution is built of two compontents.",
+            "SPFx library which provides the functionality to manage data saved to OneDrive application personal folder and SFIx webpart component which is a very simple solution that uses the library and gets or saves data."
+        ],
+        "creationDateTime": "2022-02-21",
+        "updateDateTime": "2022-02-21",
+        "products": [
+            "SharePoint"
+        ],
+        "metadata": [
+            {
+                "key": "CLIENT-SIDE-DEV",
+                "value": "React"
+            },
+            {
+                "key": "SPFX-VERSION",
+                "value": "1.14"
+            }
+        ],
+        "thumbnails": [
+            {
+                "type": "image",
+                "order": 100,
+                "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-save-to-onedrive-app-personal-folder/assets/in-sharepoint.png",
+                "alt": "Web Part Preview in SharePoint"
+            },
+            {
+                "type": "image",
+                "order": 100,
+                "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-save-to-onedrive-app-personal-folder/assets/in-teams.png",
+                "alt": "Web Part Preview in Teams"
+            }
+        ],
+        "authors": [
+            {
+                "gitHubAccount": "Adam-it",
+                "pictureUrl": "https://github.com/Adam-it.png",
+                "name": "Adam Wójcik"
+            }
+        ],
+        "references": [
+            {
+                "name": "Build your first SharePoint client-side web part",
+                "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
+                "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+            }
+        ]
+    }
+]

samples/react-save-to-onedrive-app-personal-folder/library/.gitignore

@@ -31,3 +31,7 @@ obj
 
 # Styles Generated Code
 *.scss.ts
+# .CER Certificates
+*.cer
+# .PEM Certificates
+*.pem

samples/react-save-to-onedrive-app-personal-folder/library/README.md

@@ -2,7 +2,7 @@
 
 ## Summary
 
-This is a Spfx library component which provides functionality to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams.
+This is a SPFx library component which provides functionality to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams.
 
 ![image](../assets/to-all-sites.png)
 when adding solution to appcatalog make it available to all sites

samples/react-save-to-onedrive-app-personal-folder/library/package-lock.json

@@ -2491,6 +2491,14 @@
             "tslib": "^1.9.3"
           }
         },
+        "msalLegacy": {
+          "version": "npm:msal@1.4.12",
+          "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
+          "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
         "tslib": {
           "version": "1.10.0",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
@@ -11452,8 +11460,7 @@
     "inpath": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/inpath/-/inpath-1.0.2.tgz",
-      "integrity": "sha1-SsIZcQ7Hpy9GD/lL9CTdPvDlKBc=",
+      "integrity": "sha1-SsIZcQ7Hpy9GD/lL9CTdPvDlKBc="
-      "dev": true
     },
     "inquirer": {
       "version": "7.3.3",
@@ -14856,14 +14863,6 @@
         "tslib": "^1.9.3"
       }
     },
-    "msalLegacy": {
-      "version": "npm:msal@1.4.12",
-      "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
-      "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
-      "requires": {
-        "tslib": "^1.9.3"
-      }
-    },
     "multicast-dns": {
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
@@ -14898,8 +14897,7 @@
     "mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
-      "dev": true
     },
     "mz": {
       "version": "2.7.0",
@@ -16051,8 +16049,7 @@
     "pidof": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pidof/-/pidof-1.0.2.tgz",
-      "integrity": "sha1-+6Dq4cgzWhHrgJn10PPvvEXLTpA=",
+      "integrity": "sha1-+6Dq4cgzWhHrgJn10PPvvEXLTpA="
-      "dev": true
     },
     "pify": {
       "version": "2.3.0",
@@ -17234,7 +17231,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
       "integrity": "sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=",
-      "dev": true,
       "requires": {
         "mute-stream": "~0.0.4"
       }
@@ -19282,7 +19278,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sudo/-/sudo-1.0.3.tgz",
       "integrity": "sha1-zPKGaRIPi3T4K4Rt/38clRIO/yA=",
-      "dev": true,
       "requires": {
         "inpath": "~1.0.2",
         "pidof": "~1.0.2",

samples/react-save-to-onedrive-app-personal-folder/library/package.json

@@ -9,7 +9,8 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-webpart-base": "^1.14.0-beta.5"
+    "@microsoft/sp-webpart-base": "^1.14.0-beta.5",
+    "sudo": "^1.0.3"
   },
   "devDependencies": {
     "@microsoft/sp-build-web": "1.14.0-beta.5",

samples/react-save-to-onedrive-app-personal-folder/webpart/.gitignore

@@ -31,3 +31,7 @@ obj
 
 # Styles Generated Code
 *.scss.ts
+# .CER Certificates
+*.cer
+# .PEM Certificates
+*.pem

samples/react-save-to-onedrive-app-personal-folder/webpart/README.md

@@ -2,7 +2,7 @@
 
 ## Summary
 
-This is a very simple Spfx webpart which presents how to use your own Spfx library in your solution. The webpart uses two methods from Spfx manage-data library to get and save data in user application's personal folder in OneDrive.
+This is a very simple SPFx webpart which presents how to use your own SPFx library in your solution. The webpart uses two methods from SPFx manage-data library to get and save data in user application's personal folder in OneDrive.
 
 ![image](../assets/in-sharepoint.png)
 webpart added to sharepoint page
@@ -57,7 +57,7 @@ Description of the extension that expands upon high-level summary above.
 
 This extension illustrates the following concepts:
 
-- how to use Spfx library code in webpart
+- how to use SPFx library code in webpart
 
 ## References