diff --git a/samples/react-flow-dashboard/.devcontainer/devcontainer.json b/samples/react-flow-dashboard/.devcontainer/devcontainer.json new file mode 100644 index 000000000..602d1be2c --- /dev/null +++ b/samples/react-flow-dashboard/.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" +} diff --git a/samples/react-flow-dashboard/.devcontainer/spfx-startup.sh b/samples/react-flow-dashboard/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-flow-dashboard/.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**********" \ No newline at end of file diff --git a/samples/react-flow-dashboard/README.md b/samples/react-flow-dashboard/README.md index d018f2cef..72e3862f3 100644 --- a/samples/react-flow-dashboard/README.md +++ b/samples/react-flow-dashboard/README.md @@ -4,15 +4,11 @@ This web part demonstrates displaying the list of flows and perform some basic actions on the flow. -# Flow Dashboard +![Flow Dashboard](./assets/Dashboard.gif) -![](./assets/Dashboard.gif) +![Flow run history](./assets/Flowrunhistory.gif) -# Flow run history -![](./assets/Flowrunhistory.gif) - -# Enabling stopped or suspended flows -![](./assets/Enablingflows.gif) +![Enabling stopped or suspended flows](./assets/Enablingflows.gif) ## Compatibility @@ -23,7 +19,7 @@ This web part demonstrates displaying the list of flows and perform some basic a |Refer to for more information on SPFx compatibility. | ![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg) -![Node.js v18.18.2 | v14](https://img.shields.io/badge/Node.js-v18.18.2-green.svg) +![Node.js v18](https://img.shields.io/badge/Node.js-v18-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") @@ -40,11 +36,12 @@ This web part uses *Microsoft Graph* API and *Microsoft Flow Service* API. You n - Microsoft Flow Service - `Flows.Read.All` -If the problem still persists, +If the problem still persists, + - go to `App Registrations` - find `SharePoint Online Client Extensibility Web Application Principal` - make sure you have added the above permission levels -![](./assets/APIPermissions.png) + ![](./assets/APIPermissions.png) ## Minimal Path to Awesome @@ -59,11 +56,11 @@ If the problem still persists, - `Press enter if prompted to install node modules (will run npm install)` - `npm run serve` -> 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. ## Contributors -* [Nishkalank Bezawada](https://github.com/NishkalankBezawada) +- [Nishkalank Bezawada](https://github.com/NishkalankBezawada) ## Version history