From 3436812ee855b1e277e7aed858039e0370d10ecf Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Mon, 2 Jan 2023 18:23:03 -0500 Subject: [PATCH] Fixed sample.json and readme + linting issues --- .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ samples/react-listview-context-ecb/README.md | 26 +++++-------- .../assets/sample.json | 2 +- .../EmplopyeeListViewWebPart.manifest.json | 6 +-- .../emplopyeeListView/components/ECB.tsx | 4 +- .../components/EmployeeListView.tsx | 6 +-- 7 files changed, 90 insertions(+), 26 deletions(-) create mode 100644 samples/react-listview-context-ecb/.devcontainer/devcontainer.json create mode 100644 samples/react-listview-context-ecb/.devcontainer/spfx-startup.sh diff --git a/samples/react-listview-context-ecb/.devcontainer/devcontainer.json b/samples/react-listview-context-ecb/.devcontainer/devcontainer.json new file mode 100644 index 000000000..d0df53099 --- /dev/null +++ b/samples/react-listview-context-ecb/.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-listview-context-ecb/.devcontainer/spfx-startup.sh b/samples/react-listview-context-ecb/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-listview-context-ecb/.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-listview-context-ecb/README.md b/samples/react-listview-context-ecb/README.md index e7103b5f6..3fd876562 100644 --- a/samples/react-listview-context-ecb/README.md +++ b/samples/react-listview-context-ecb/README.md @@ -1,4 +1,4 @@ -# react-listview-context-ecb +# Employee ListView Contextual Menu ## Summary @@ -44,22 +44,15 @@ react-listview-context-ecb| [Markus Moeller](https://github.com/mmsharepoint) ([ Version|Date|Comments -------|----|-------- -1.0|December 26, 2022|Initial release - -## 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.** - - ---- +1.0|January 1, 2022|Initial release ## Minimal Path to Awesome - Clone this repository - Ensure that you are at the solution folder - in the command-line run: - - **npm install** - - **gulp serve** + - `npm install` + - `gulp serve` - With Mockup data you are good to go - Now you can start to adjust to your own custom list data - Uncomment the several blocks inside [EmployeeListView.tsx](src/webparts/emplopyeeListView/components/EmployeeListView.tsx) @@ -74,7 +67,6 @@ This extension illustrates the following concepts: - [Add contextual menu](https://pnp.github.io/sp-dev-fx-controls-react/controls/ListView.ContextualMenu/) - [FluentUI Contextual Menu](https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu) - ## References - [Getting started with SharePoint Framework](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant?WT.mc_id=M365-MVP-5004617) @@ -86,14 +78,14 @@ We do not support samples, but this community is always willing to help, and we 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-taxonomy-file-explorer") to see if anybody else is having the same issues. +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-listview-context-ecb") 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-taxonomy-file-explorer) and see what the community is saying. +You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-listview-context-ecb) and see what the community is saying. -If you encounter any issues while 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-taxonomy-file-explorer&template=bug-report.yml&sample=react-taxonomy-file-explorer&authors=@mmsharepoint&title=react-taxonomy-file-explorer%20-%20). +If you encounter any issues while 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-listview-context-ecb&template=bug-report.yml&sample=react-listview-context-ecb&authors=@mmsharepoint&title=react-listview-context-ecb%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-taxonomy-file-explorer&template=question.yml&sample=react-taxonomy-file-explorer&authors=@mmsharepoint&title=react-taxonomy-file-explorer%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-listview-context-ecb&template=question.yml&sample=react-listview-context-ecb&authors=@mmsharepoint&title=react-listview-context-ecb%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-taxonomy-file-explorer&template=suggestion.yml&sample=react-taxonomy-file-explorer&authors=@mmsharepoint&title=react-taxonomy-file-explorer%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-listview-context-ecb&template=suggestion.yml&sample=react-listview-context-ecb&authors=@mmsharepoint&title=react-listview-context-ecb%20-%20). diff --git a/samples/react-listview-context-ecb/assets/sample.json b/samples/react-listview-context-ecb/assets/sample.json index 8f433240b..098071ec8 100644 --- a/samples/react-listview-context-ecb/assets/sample.json +++ b/samples/react-listview-context-ecb/assets/sample.json @@ -2,7 +2,7 @@ { "name": "pnp-sp-dev-spfx-web-parts-react-listview-context-ecb", "source": "pnp", - "title": "Emplopyee ListView Contextual Menu", + "title": "Employee ListView Contextual Menu", "shortDescription": "This small sample illustrates how to extend the PnP React SPFx ListView control with a contextual menu.", "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-listview-context-ecb", "longDescription": [ diff --git a/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/EmplopyeeListViewWebPart.manifest.json b/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/EmplopyeeListViewWebPart.manifest.json index bd171f723..126470708 100644 --- a/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/EmplopyeeListViewWebPart.manifest.json +++ b/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/EmplopyeeListViewWebPart.manifest.json @@ -18,11 +18,11 @@ "preconfiguredEntries": [{ "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced "group": { "default": "Advanced" }, - "title": { "default": "Emplopyee ListView" }, - "description": { "default": "Emplopyee ListView description" }, + "title": { "default": "Employee ListView" }, + "description": { "default": "Employee ListView description" }, "officeFabricIconFontName": "Page", "properties": { - "description": "Emplopyee ListView" + "description": "Employee ListView" } }] } diff --git a/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/components/ECB.tsx b/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/components/ECB.tsx index 1734f42db..3a9a542d0 100644 --- a/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/components/ECB.tsx +++ b/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/components/ECB.tsx @@ -13,7 +13,7 @@ export class ECB extends React.Component { }; } - public render() { + public render(): React.ReactElement { return
{ ; } - private handleClick(source: string, event: any) { + private handleClick(source: string, _event: any): void { alert(source + ' clicked'); } } \ No newline at end of file diff --git a/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/components/EmployeeListView.tsx b/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/components/EmployeeListView.tsx index 89f66abb2..2bfe65c21 100644 --- a/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/components/EmployeeListView.tsx +++ b/samples/react-listview-context-ecb/src/webparts/emplopyeeListView/components/EmployeeListView.tsx @@ -84,12 +84,12 @@ export default class EmployeeListView extends React.Component