From c6ec0dfa17d1738bb65560ac4e91031466e629b6 Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Mon, 15 May 2023 08:44:49 -0400 Subject: [PATCH] Fixed lints, updated readme, sample.json, added devcontainer --- .../.devcontainer/devcontainer.json | 39 ++++++++++ .../.devcontainer/spfx-startup.sh | 33 +++++++++ samples/react-graph-azureapps/README.md | 29 +++++--- .../react-graph-azureapps/assets/sample.json | 56 +++++++++++++++ .../common/components/IRegisterAppProps.ts | 8 ++- .../src/common/components/RegisterApp.tsx | 16 +++-- .../webparts/azureApps/AzureAppsWebPart.ts | 1 + .../azureApps/components/AzureApps.tsx | 71 ++++++++++--------- 8 files changed, 198 insertions(+), 55 deletions(-) create mode 100644 samples/react-graph-azureapps/.devcontainer/devcontainer.json create mode 100644 samples/react-graph-azureapps/.devcontainer/spfx-startup.sh create mode 100644 samples/react-graph-azureapps/assets/sample.json diff --git a/samples/react-graph-azureapps/.devcontainer/devcontainer.json b/samples/react-graph-azureapps/.devcontainer/devcontainer.json new file mode 100644 index 000000000..ae879f459 --- /dev/null +++ b/samples/react-graph-azureapps/.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.16.1", + "image": "docker.io/m365pnp/spfx:1.16.1", + // 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" +} \ No newline at end of file diff --git a/samples/react-graph-azureapps/.devcontainer/spfx-startup.sh b/samples/react-graph-azureapps/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-graph-azureapps/.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-graph-azureapps/README.md b/samples/react-graph-azureapps/README.md index 402ab42a1..201024af8 100644 --- a/samples/react-graph-azureapps/README.md +++ b/samples/react-graph-azureapps/README.md @@ -2,15 +2,13 @@ ## Summary -This sample webpart shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this webpart. +This sample web part shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this web part. -**Add Azure App** -![Animated Sample](./assets/Add-New-App.gif) +![Add Azure App](./assets/Add-New-App.gif) -**Edit Azure App** -![Animated Sample](./assets/Edit-App.gif) +![Edit Azure App](./assets/Edit-App.gif) ## Compatibility @@ -31,11 +29,11 @@ This sample webpart shows list of Azure apps in your tenant. A new Azure applica ## Applies to - [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://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant) -## Contributors +## Contributors -[Diksha Bhura](https://github.com/Diksha-Bhura) +- [Diksha Bhura](https://github.com/Diksha-Bhura) ## Version history @@ -56,17 +54,26 @@ This sample webpart shows list of Azure apps in your tenant. A new Azure applica - In the command-line run: - `gulp serve --nobrowser` -> 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 for further instructions. ## Help -We do not support samples, but we 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. +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. +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-graph-azureapps%22) to see if anybody else is having the same issues. +You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-graph-azureapps) and see what the community is saying. + +If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-graph-azureapps&template=bug-report.yml&sample=react-graph-azureapps&authors=@Diksha-Bhura&title=react-graph-azureapps%20-%20). + +For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-graph-azureapps&template=question.yml&sample=react-graph-azureapps&authors=@Diksha-Bhura&title=react-graph-azureapps%20-%20). + +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-graph-azureapps&template=suggestion.yml&sample=react-graph-azureapps&authors=@Diksha-Bhura&title=react-graph-azureapps%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.** +**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.** + diff --git a/samples/react-graph-azureapps/assets/sample.json b/samples/react-graph-azureapps/assets/sample.json new file mode 100644 index 000000000..f1e6e8096 --- /dev/null +++ b/samples/react-graph-azureapps/assets/sample.json @@ -0,0 +1,56 @@ +[ + { + "name": "pnp-sp-dev-spfx-web-parts-react-graph-azureapps", + "source": "pnp", + "title": "Azure Apps", + "shortDescription": "This sample web part shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this web part.", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-azureapps", + "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-azureapps", + "longDescription": [ + "This sample web part shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this web part." + ], + "creationDateTime": "2023-05-07", + "updateDateTime": "2023-05-07", + "products": [ + "SharePoint" + ], + "metadata": [ + { + "key": "CLIENT-SIDE-DEV", + "value": "React" + }, + { + "key": "SPFX-VERSION", + "value": "1.16.1" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-azureapps/assets/Add-New-App.gif", + "alt": "Web Part Preview" + }, + { + "type": "image", + "order": 101, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-azureapps/assets/Edit-App.gif", + "alt": "Web Part Preview" + } + ], + "authors": [ + { + "gitHubAccount": "Diksha-Bhura", + "pictureUrl": "https://github.com/Diksha-Bhura.png", + "name": "Diksha Bhura" + } + ], + "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" + } + ] + } +] \ No newline at end of file diff --git a/samples/react-graph-azureapps/src/common/components/IRegisterAppProps.ts b/samples/react-graph-azureapps/src/common/components/IRegisterAppProps.ts index 164647bac..8f6eed5c2 100644 --- a/samples/react-graph-azureapps/src/common/components/IRegisterAppProps.ts +++ b/samples/react-graph-azureapps/src/common/components/IRegisterAppProps.ts @@ -1,7 +1,9 @@ import { MSGraphClientV3 } from '@microsoft/sp-http'; -export interface IRegisterAppProps{ +export interface IRegisterAppProps { graphClient: MSGraphClientV3, - modal:() => any, - callBack:(latestapp: any) => any, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + modal: () => any, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + callBack: (latestapp: any) => any, } \ No newline at end of file diff --git a/samples/react-graph-azureapps/src/common/components/RegisterApp.tsx b/samples/react-graph-azureapps/src/common/components/RegisterApp.tsx index b49049388..bcf582ff3 100644 --- a/samples/react-graph-azureapps/src/common/components/RegisterApp.tsx +++ b/samples/react-graph-azureapps/src/common/components/RegisterApp.tsx @@ -18,7 +18,7 @@ export default class RegisterApp extends React.Component, newValue?: string) => { + private onNameChanged = (event: React.FormEvent, newValue?: string): void => { this.setState((prevState: IRegisterAppState, nextState: IRegisterAppState): IRegisterAppState => { nextState = cloneDeep(prevState); nextState.appName = newValue; @@ -36,6 +36,7 @@ export default class RegisterApp extends React.Component => { + // eslint-disable-next-line no-async-promise-executor return new Promise(async (resolve, reject) => { try { @@ -43,12 +44,12 @@ export default class RegisterApp extends React.Component { + private handlerRegisterClick = (): void => { + // eslint-disable-next-line @typescript-eslint/no-floating-promises this.onRegisterApp().then( this.props.modal() ) @@ -103,7 +105,7 @@ export default class RegisterApp extends React.Component
- + ); } diff --git a/samples/react-graph-azureapps/src/webparts/azureApps/AzureAppsWebPart.ts b/samples/react-graph-azureapps/src/webparts/azureApps/AzureAppsWebPart.ts index f515cf029..22b409a8c 100644 --- a/samples/react-graph-azureapps/src/webparts/azureApps/AzureAppsWebPart.ts +++ b/samples/react-graph-azureapps/src/webparts/azureApps/AzureAppsWebPart.ts @@ -20,6 +20,7 @@ export default class azureAppsWebPart extends BaseClientSideWebPart { + // eslint-disable-next-line @typescript-eslint/no-explicit-any return new Promise((resolve: () => void, reject: (error: any) => void): void => { this.context.msGraphClientFactory .getClient("3") diff --git a/samples/react-graph-azureapps/src/webparts/azureApps/components/AzureApps.tsx b/samples/react-graph-azureapps/src/webparts/azureApps/components/AzureApps.tsx index e7e4f10e0..143893e9b 100644 --- a/samples/react-graph-azureapps/src/webparts/azureApps/components/AzureApps.tsx +++ b/samples/react-graph-azureapps/src/webparts/azureApps/components/AzureApps.tsx @@ -27,6 +27,7 @@ export default class azureApps extends React.Component { retrievedApps.forEach(async currentApp => { @@ -49,19 +50,20 @@ export default class azureApps extends React.Component => { + // eslint-disable-next-line no-async-promise-executor return new Promise(async (resolve, reject) => { try { - let retrievedApps: IAppModel[] = []; - let result = await this.props.graphClient + const retrievedApps: IAppModel[] = []; + const result = await this.props.graphClient .api("applications") .get(); if (result && result.value && result.value.length > 0) { for (let index = 0; index < result.value.length; index++) { - let currApp = result.value[index]; - if (currApp.createdDateTime != null) { - let app: IAppModel = { + const currApp = result.value[index]; + if (currApp.createdDateTime !== null) { + const app: IAppModel = { Id: "", appId: "", displayName: "", @@ -93,24 +95,25 @@ export default class azureApps extends React.Component => { - let users: IDocumentCardActivityPerson[] = []; + private getAllOwners = (id: string): Promise => { + const users: IDocumentCardActivityPerson[] = []; + // eslint-disable-next-line no-async-promise-executor return new Promise(async (resolve, reject) => { try { - let result = await this.props.graphClient + const result = await this.props.graphClient .api("/applications/" + id + "/owners"). get(); if (result && result.value && result.value.length) { for (let index = 0; index < result.value.length; index++) { - let currentUser = result.value[index] - let userDetails: IDocumentCardActivityPerson = { + const currentUser = result.value[index] + const userDetails: IDocumentCardActivityPerson = { name: "", profileImageSrc: "" }; - userDetails.name = currentUser.displayName, - userDetails.profileImageSrc = '' + userDetails.name = currentUser.displayName; + userDetails.profileImageSrc = ''; users.push(userDetails); } @@ -124,10 +127,11 @@ export default class azureApps extends React.Component { - let apps = this.state.apps; + const apps = this.state.apps; apps.push(latestapp); - console.log("Apps on callback: "+this.state.apps.length); + console.log("Apps on callback: " + this.state.apps.length); await this.setState((prevState: IAzureAppsState, newState: IAzureAppsState) => { newState = cloneDeep(prevState); newState.apps.push(latestapp); @@ -135,10 +139,10 @@ export default class azureApps extends React.Component { newState = cloneDeep(prevState); newState.isModalOpen = !this.state.isModalOpen; @@ -147,10 +151,10 @@ export default class azureApps extends React.Component { + private handlerRefreshClick = (): void => { window.location.reload(); - this.setState((prevState: IAzureAppsState, newState:IAzureAppsState):IAzureAppsState => { + this.setState((prevState: IAzureAppsState, newState: IAzureAppsState): IAzureAppsState => { newState = cloneDeep(prevState); newState.isRefreshed = true; @@ -171,11 +175,11 @@ export default class azureApps extends React.Component { @@ -188,10 +192,10 @@ export default class azureApps extends React.Component { - + this.state.apps.length ? this.state.apps.map(currentApp => ( -
+
{currentApp.users.length ? : -
+
}
@@ -233,8 +237,7 @@ export default class azureApps extends React.Component - + callBack={this.refreshCallback.bind(this)} />
@@ -243,15 +246,15 @@ export default class azureApps extends React.Component