From 6cafec44ded50782ab07dfb4f7cb1adba4ee33ca Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Sat, 16 Mar 2024 13:57:07 -0400 Subject: [PATCH] Fixed readme, linting, typos, sample manifest, removed upgrade files, updated devcontainer --- .../.devcontainer/devcontainer.json | 73 +- .../.devcontainer/spfx-startup.sh | 6 +- samples/react-property-bag-editor/.nvmrc | 1 + samples/react-property-bag-editor/README.md | 81 +- .../PropertBagDisplayConfig.PNG | Bin .../PropertyBagDisplayDisplay.PNG | Bin .../PropertyBagDisplayEdit.PNG | Bin .../PropertyBagEditorConfig.PNG | Bin .../PropertyBagEditorDisplay.PNG | Bin .../PropertyBagEditorEdit.PNG | Bin .../PropertyBagFilteredSiteListConfigy.PNG | Bin .../PropertyBagFilteredSiteListDisplay.PNG | Bin .../PropertyBagGlobalNavConfig.PNG | Bin .../propertyBagGlobalNavDisplay.PNG | Bin .../assets/sample.json | 13 +- .../PropertyBagDisplayWebPart.ts | 11 +- .../components/PropertyBagDisplay.tsx | 169 +- .../PropertyBagEditorWebPart.ts | 13 +- .../components/PropertyBagEditor.tsx | 68 +- .../PropertyBagFilteredSiteListWebPart.ts | 13 +- .../PropertyBagFilteredSiteList.tsx | 85 +- .../PropertyBagGlobalNavWebPart.ts | 1 + .../components/PropertyBagGlobalNav.tsx | 9 +- .../src/webparts/shared/MessageDisplay.tsx | 12 +- .../src/webparts/shared/utils.ts | 87 +- .../upgrade-report.md | 3126 ----------------- samples/react-property-bag-editor/upgrade.md | 197 -- 27 files changed, 335 insertions(+), 3630 deletions(-) create mode 100644 samples/react-property-bag-editor/.nvmrc rename samples/react-property-bag-editor/{src/images => assets}/PropertBagDisplayConfig.PNG (100%) rename samples/react-property-bag-editor/{src/images => assets}/PropertyBagDisplayDisplay.PNG (100%) rename samples/react-property-bag-editor/{src/images => assets}/PropertyBagDisplayEdit.PNG (100%) rename samples/react-property-bag-editor/{src/images => assets}/PropertyBagEditorConfig.PNG (100%) rename samples/react-property-bag-editor/{src/images => assets}/PropertyBagEditorDisplay.PNG (100%) rename samples/react-property-bag-editor/{src/images => assets}/PropertyBagEditorEdit.PNG (100%) rename samples/react-property-bag-editor/{src/images => assets}/PropertyBagFilteredSiteListConfigy.PNG (100%) rename samples/react-property-bag-editor/{src/images => assets}/PropertyBagFilteredSiteListDisplay.PNG (100%) rename samples/react-property-bag-editor/{src/images => assets}/PropertyBagGlobalNavConfig.PNG (100%) rename samples/react-property-bag-editor/{src/images => assets}/propertyBagGlobalNavDisplay.PNG (100%) delete mode 100644 samples/react-property-bag-editor/upgrade-report.md delete mode 100644 samples/react-property-bag-editor/upgrade.md diff --git a/samples/react-property-bag-editor/.devcontainer/devcontainer.json b/samples/react-property-bag-editor/.devcontainer/devcontainer.json index 404c35930..183984b53 100644 --- a/samples/react-property-bag-editor/.devcontainer/devcontainer.json +++ b/samples/react-property-bag-editor/.devcontainer/devcontainer.json @@ -1,39 +1,38 @@ -// 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.0.0", - "image": "docker.io/m365pnp/spfx:ga", - // 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, - 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" + "name": "SPFx 1.17.1", + "image": "docker.io/m365pnp/spfx:1.17.1", + "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-property-bag-editor/.devcontainer/spfx-startup.sh b/samples/react-property-bag-editor/.devcontainer/spfx-startup.sh index ca531bdf2..456d6aea8 100644 --- a/samples/react-property-bag-editor/.devcontainer/spfx-startup.sh +++ b/samples/react-property-bag-editor/.devcontainer/spfx-startup.sh @@ -7,9 +7,11 @@ 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 -cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer -cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem +# 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 diff --git a/samples/react-property-bag-editor/.nvmrc b/samples/react-property-bag-editor/.nvmrc new file mode 100644 index 000000000..9e15be387 --- /dev/null +++ b/samples/react-property-bag-editor/.nvmrc @@ -0,0 +1 @@ +v16.20.0 diff --git a/samples/react-property-bag-editor/README.md b/samples/react-property-bag-editor/README.md index f5c19e832..9a5c64f58 100644 --- a/samples/react-property-bag-editor/README.md +++ b/samples/react-property-bag-editor/README.md @@ -1,9 +1,9 @@ -# Property Bag Navigation Webparts +# Property Bag Navigation Web parts ## Summary -A set of webparts that lets you set property bag settings on site collections and enable navigation using those properties. -[picture of the web part in action] +A set of web parts that lets you set property bag settings on site collections and enable navigation using those properties. +![PropertyBagEditorDisplay](./assets/PropertyBagEditorDisplay.PNG) ## Compatibility @@ -13,7 +13,7 @@ A set of webparts that lets you set property bag settings on site collections an |Refer to for more information on SPFx compatibility. | ![SPFx 1.0.0](https://img.shields.io/badge/SPFx-1.0.0-green.svg) -![Node.js v6](https://img.shields.io/badge/Node.js-v6-green.svg) +![Node.js v6](https://img.shields.io/badge/Node.js-v6-green.svg) ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) ![Compatible SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Compatible-green.svg) ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) @@ -26,10 +26,8 @@ A set of webparts that lets you set property bag settings on site collections an * [SharePoint Framework](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/) * [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) - - ## Prerequisites - + > pnp-js-core ## Contributors @@ -43,52 +41,53 @@ Version|Date|Comments 1.0|march 19, 2017|Initial release 2.0|Feb 21, 2024|Upgraded to SPFX 1.17.1 - - ## Minimal Path to Awesome -- Clone this repository -- This project uses the JSOM to interact with the property bag. Therefore in config/config.js you need to change the paths - on the externals sp-init,microsoft-ajax,sp-runtime, and sharepoint to point to your tenant. -- in the command line run: - - `npm install` - - `gulp serve` +* Clone this repository +* This project uses the JSOM to interact with the property bag. Therefore in config/config.js you need to change the paths + on the externals `sp-init`,`microsoft-ajax`,`sp-runtime`, and SharePoint to point to your tenant. +* in the command line run: + * `npm install` + * `gulp 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 for further instructions. -> Note that using the JSOM to updates the propertybag of a site is not supported on 'NoScript' sites. You can enable scripts on all sites using the admnin center or via powershell: - Set-PnPTenantSite -Identity {SiteUrl} -DenyAddAndCustomizePages:$false +> Note that using the JSOM to updates the property bag of a site is not supported on 'NoScript' sites. You can enable scripts on all sites using the admin center or via PowerShell: +> +> ```powershell +> Set-PnPTenantSite -Identity {SiteUrl} -DenyAddAndCustomizePages:$false +> ``` ## Features -This project consists of two webparts that can be used to manage the Property Bags for SharePoint sites and two webparts that can be used to display navigational components from those Properties. -- PropertyBagEditor +This project consists of two web parts that can be used to manage the Property Bags for SharePoint sites and two web parts that can be used to display navigational components from those Properties. + +* PropertyBagEditor This web part allows a site owner/administrator to edit selected items in a site's Property Bag. It edits the properties of the current site. A sample display is shown below: -![PropertyBagEditorDisplay](./src/images/PropertyBagEditorDisplay.PNG) +![PropertyBagEditorDisplay](./assets/PropertyBagEditorDisplay.PNG) Selecting a Property and clicking the Edit button will bring up the Edit Panel: -![PropertyBagEditorEdur](./src/images/PropertyBagEditorEdit.PNG) +![PropertyBagEditorEdur](./assets/PropertyBagEditorEdit.PNG) -Here you can change the value of the property and specify if the property should be included in the search Index. +Here you can change the value of the property and specify if the property should be included in the search Index. The Properties that can be edited are specified in the web part's Property Pane: -![PropertyBagEditorEdur](./src/images/PropertyBagEditorConfig.PNG) +![PropertyBagEditorEdur](./assets/PropertyBagEditorConfig.PNG) - -The Properties set in the Property Pane of this web part are crawled properties, and should be mapped to managed properties so that can be used by the other webparts in this project. +The Properties set in the Property Pane of this web part are crawled properties, and should be mapped to managed properties so that can be used by the other web parts in this project. The Site whose properties are to be edited can be passed in via a query parameter. While this web part can be added to any page, it would be most useful if added to a page in an infrastructure site collection in the tenant, and then linked to from all other sites via a link in the Site Settings page. -The following script shows how to add such a link to all sites 'Site Settings' page using PNP Powershell. It will add a menu item named 'Edit Site Metadata ' to the Site Settings of each Team Site that links to the PropertBagEdcitor.aspx page on the tenants infrastructure site (this site is named 'cdn' in the example below). +The following script shows how to add such a link to all sites 'Site Settings' page using PNP PowerShell. It will add a menu item named 'Edit Site Metadata ' to the Site Settings of each Team Site that links to the PropertyBagEditor.aspx page on the tenants infrastructure site (this site is named 'cdn' in the example below). -``` +```powershell $adminSiteUrl="https://tenant-admin.sharepoint.com" $customActionDescription="CUSTOM_\ ___Navigation__ \__Metadata" -$pageUrl="https://tenant.sharepoint.com/sites/cdn/SitePages/PropertBagEdcitor.aspx?siteUrl={0}" +$pageUrl="https://tenant.sharepoint.com/sites/cdn/SitePages/PropertyBagEditor.aspx?siteUrl={0}" $credentials=get-credential @@ -126,49 +125,47 @@ foreach($site in $sites){ } ``` -- PropertyBagDisplay +* PropertyBagDisplay The propertyBagDisplay web part can be used by an administrator to view and edit selected properties across sites in the tenant: -![PropertyBagDisplay](./src/images/PropertyBagDisplayDisplay.PNG) +![PropertyBagDisplay](./assets/PropertyBagDisplayDisplay.PNG) In the Property Pane, an administrator must specify both the Crawled Property Name and the Managed Property name (separated by a pipe character) of the properties to be included in the web part: -![PropertyBagDisplayConfig](./src/images/PropertBagDisplayConfig.PNG) +![PropertyBagDisplayConfig](./assets/PropertBagDisplayConfig.PNG) The administrator can also include a list of site templates to narrow down the list of sites to be included in the web part. When specifying site templates to include you can include just the Site Template Name (STS) and all sites within that template name will be included, or you can specify the Site Template Name and ID, separated by a '#" character (STS#1) to have only sites with that template name and ID included. -The web part displays the site template, Title and Url, plus the selected Managed Properties for all sites in the tenant with the selected site template. The Managed Properties are only displayed if they have been set as searchable, and a full crawl has been run. After selecting a Site, a user can click the edit button to edit the Crawled properties (i.e. the raw property bag values) for the selected site: +The web part displays the site template, Title and URL, plus the selected Managed Properties for all sites in the tenant with the selected site template. The Managed Properties are only displayed if they have been set as searchable, and a full crawl has been run. After selecting a Site, a user can click the edit button to edit the Crawled properties (i.e. the raw property bag values) for the selected site: -![PropertyBagDisplayEdit](./src/images/PropertyBagDisplayEdit.PNG) +![PropertyBagDisplayEdit](./assets/PropertyBagDisplayEdit.PNG) On the edit panel one can specify a new value for each property as well as whether that property is to be included in the search index. Additionally one can specify that a full crawl of the site should be run once the properties are saved. -- PropertyBagFilteredSiteList +* PropertyBagFilteredSiteList This web part displays a list of all sites that meet the criteria specified in the property pane by the administrator: -![PropertyBagFilteredSiteListDisplay](./src/images/PropertyBagFilteredSiteListDisplay.PNG) +![PropertyBagFilteredSiteListDisplay](./assets/PropertyBagFilteredSiteListDisplay.PNG) Additionally, it lets the user narrow down the list of sites displayed by applying metadata filters that are set up by the administrator in the Property Pane( Business Unit and Continent in the example above): -![PropertyBagFilteredSiteListConfig](./src/images/PropertyBagFilteredSiteListConfigy.PNG) +![PropertyBagFilteredSiteListConfig](./assets/PropertyBagFilteredSiteListConfigy.PNG) In the PropertyPane above, the 'Site Templates to Include' and 'Metadata Filters' are used to filter which site collections are retrieved from search. The 'User Filters' are used to allow the user to easily filter the results returned from search using the command bar on the top of the display. -- PropertyBagGlobalNav +* PropertyBagGlobalNav This Web part builds a navigation menu based on the Managed Properties set up in the PropertyPane: -![propertyBagGlobalNavDisplay](./src/images/propertyBagGlobalNavDisplay.PNG) +![propertyBagGlobalNavDisplay](./assets/propertyBagGlobalNavDisplay.PNG) In the PropertyPane, an administrator just needs to specify which Managed Properties are to be used to build the Navigation menu: -![PropertyBagGlobalNavConfig](./src/images/PropertyBagGlobalNavConfig.PNG) +![PropertyBagGlobalNavConfig](./assets/PropertyBagGlobalNavConfig.PNG) If desired, the admin can also specify which site templates should be included in the menu, as wall as any additional filters. Additional Filters can be specified in the format 'ManagedPropertyName=value'; - ## 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.** - diff --git a/samples/react-property-bag-editor/src/images/PropertBagDisplayConfig.PNG b/samples/react-property-bag-editor/assets/PropertBagDisplayConfig.PNG similarity index 100% rename from samples/react-property-bag-editor/src/images/PropertBagDisplayConfig.PNG rename to samples/react-property-bag-editor/assets/PropertBagDisplayConfig.PNG diff --git a/samples/react-property-bag-editor/src/images/PropertyBagDisplayDisplay.PNG b/samples/react-property-bag-editor/assets/PropertyBagDisplayDisplay.PNG similarity index 100% rename from samples/react-property-bag-editor/src/images/PropertyBagDisplayDisplay.PNG rename to samples/react-property-bag-editor/assets/PropertyBagDisplayDisplay.PNG diff --git a/samples/react-property-bag-editor/src/images/PropertyBagDisplayEdit.PNG b/samples/react-property-bag-editor/assets/PropertyBagDisplayEdit.PNG similarity index 100% rename from samples/react-property-bag-editor/src/images/PropertyBagDisplayEdit.PNG rename to samples/react-property-bag-editor/assets/PropertyBagDisplayEdit.PNG diff --git a/samples/react-property-bag-editor/src/images/PropertyBagEditorConfig.PNG b/samples/react-property-bag-editor/assets/PropertyBagEditorConfig.PNG similarity index 100% rename from samples/react-property-bag-editor/src/images/PropertyBagEditorConfig.PNG rename to samples/react-property-bag-editor/assets/PropertyBagEditorConfig.PNG diff --git a/samples/react-property-bag-editor/src/images/PropertyBagEditorDisplay.PNG b/samples/react-property-bag-editor/assets/PropertyBagEditorDisplay.PNG similarity index 100% rename from samples/react-property-bag-editor/src/images/PropertyBagEditorDisplay.PNG rename to samples/react-property-bag-editor/assets/PropertyBagEditorDisplay.PNG diff --git a/samples/react-property-bag-editor/src/images/PropertyBagEditorEdit.PNG b/samples/react-property-bag-editor/assets/PropertyBagEditorEdit.PNG similarity index 100% rename from samples/react-property-bag-editor/src/images/PropertyBagEditorEdit.PNG rename to samples/react-property-bag-editor/assets/PropertyBagEditorEdit.PNG diff --git a/samples/react-property-bag-editor/src/images/PropertyBagFilteredSiteListConfigy.PNG b/samples/react-property-bag-editor/assets/PropertyBagFilteredSiteListConfigy.PNG similarity index 100% rename from samples/react-property-bag-editor/src/images/PropertyBagFilteredSiteListConfigy.PNG rename to samples/react-property-bag-editor/assets/PropertyBagFilteredSiteListConfigy.PNG diff --git a/samples/react-property-bag-editor/src/images/PropertyBagFilteredSiteListDisplay.PNG b/samples/react-property-bag-editor/assets/PropertyBagFilteredSiteListDisplay.PNG similarity index 100% rename from samples/react-property-bag-editor/src/images/PropertyBagFilteredSiteListDisplay.PNG rename to samples/react-property-bag-editor/assets/PropertyBagFilteredSiteListDisplay.PNG diff --git a/samples/react-property-bag-editor/src/images/PropertyBagGlobalNavConfig.PNG b/samples/react-property-bag-editor/assets/PropertyBagGlobalNavConfig.PNG similarity index 100% rename from samples/react-property-bag-editor/src/images/PropertyBagGlobalNavConfig.PNG rename to samples/react-property-bag-editor/assets/PropertyBagGlobalNavConfig.PNG diff --git a/samples/react-property-bag-editor/src/images/propertyBagGlobalNavDisplay.PNG b/samples/react-property-bag-editor/assets/propertyBagGlobalNavDisplay.PNG similarity index 100% rename from samples/react-property-bag-editor/src/images/propertyBagGlobalNavDisplay.PNG rename to samples/react-property-bag-editor/assets/propertyBagGlobalNavDisplay.PNG diff --git a/samples/react-property-bag-editor/assets/sample.json b/samples/react-property-bag-editor/assets/sample.json index 781fdf723..cf70de5d2 100644 --- a/samples/react-property-bag-editor/assets/sample.json +++ b/samples/react-property-bag-editor/assets/sample.json @@ -2,14 +2,14 @@ { "name": "pnp-sp-dev-spfx-web-parts-react-property-bag-editor", "source": "pnp", - "title": "Property Bag Navigation Webparts", - "shortDescription": "A set of webparts that lets you set property bag settings on site collections and enable navigation using those properties.", + "title": "Property Bag Navigation Web parts", + "shortDescription": "A set of web parts that lets you set property bag settings on site collections and enable navigation using those properties.", "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-property-bag-editor", "longDescription": [ - "A set of webparts that lets you set property bag settings on site collections and enable navigation using those properties." + "A set of web parts that lets you set property bag settings on site collections and enable navigation using those properties." ], "creationDateTime": "2017-03-19", - "updateDateTime": "2017-03-19", + "updateDateTime": "2024-02-21", "products": [ "SharePoint" ], @@ -27,14 +27,13 @@ { "type": "image", "order": 100, - "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-property-bag-editor/src/images/PropertyBagEditorDisplay.PNG", - "alt": "Property Bag Navigation Webparts" + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-property-bag-editor/assets/PropertyBagEditorDisplay.PNG", + "alt": "Property Bag Navigation Web parts" } ], "authors": [ { "gitHubAccount": "russgove", - "company": "", "pictureUrl": "https://github.com/russgove.png", "name": "Russell Gove" } diff --git a/samples/react-property-bag-editor/src/webparts/propertyBagDisplay/PropertyBagDisplayWebPart.ts b/samples/react-property-bag-editor/src/webparts/propertyBagDisplay/PropertyBagDisplayWebPart.ts index 5e8561682..13ecf911a 100644 --- a/samples/react-property-bag-editor/src/webparts/propertyBagDisplay/PropertyBagDisplayWebPart.ts +++ b/samples/react-property-bag-editor/src/webparts/propertyBagDisplay/PropertyBagDisplayWebPart.ts @@ -14,12 +14,12 @@ import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp export default class PropertyBagDisplayWebPart extends BaseClientSideWebPart { /** - * Renders the component. - * - * converts the new-line (\n) separated strings to an array of + * Renders the component. + * + * converts the new-line (\n) separated strings to an array of * strings to be passed to the component. - * - * + * + * * @memberOf PropertyBagDisplayWebPart */ public render(): void { @@ -32,6 +32,7 @@ export default class PropertyBagDisplayWebPart extends BaseClientSideWebPart { diff --git a/samples/react-property-bag-editor/src/webparts/propertyBagDisplay/components/PropertyBagDisplay.tsx b/samples/react-property-bag-editor/src/webparts/propertyBagDisplay/components/PropertyBagDisplay.tsx index 824a864ea..9fa6b6126 100644 --- a/samples/react-property-bag-editor/src/webparts/propertyBagDisplay/components/PropertyBagDisplay.tsx +++ b/samples/react-property-bag-editor/src/webparts/propertyBagDisplay/components/PropertyBagDisplay.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ import * as _ from "lodash"; import * as React from "react"; import pnp, { SearchQuery, SearchResults, Web } from "sp-pnp-js"; @@ -23,9 +24,10 @@ import { } from "office-ui-fabric-react/lib/Panel"; export interface IPropertyBagDisplayState { selectedIndex: number; // the currently selected site - managedToCrawedMapping?: Array;// Determines which Carwled propeties are mapped to which Managed Properties + managedToCrawedMapping?: Array;// Determines which Crawled properties are mapped to which Managed Properties errorMessages: Array; // a list of error massages displayed on the page isediting?: boolean; //Determines if the edit panel is displayed + // eslint-disable-next-line @typescript-eslint/no-explicit-any sites: Array; // the list of sites displayed in the component workingStorage?: DisplaySite;// A working copy of the site being edited managedPropNames?: Array; // the list of managed properties to be displayed @@ -42,14 +44,14 @@ export class ManagedToCrawledMappingEntry { export class DisplaySite { /** * Creates an instance of DisplaySite to be used in workingStorage when editing a site - * @param {string} Title - * @param {string} Url - * @param {string} SiteTemplate - * @param {Array} errorMessages - * @param {Array} [DisplayProps] - * @param {Array} [searchableProps] - * @param {boolean} [forceCrawl] - * + * @param {string} Title + * @param {string} Url + * @param {string} SiteTemplate + * @param {Array} errorMessages + * @param {Array} [DisplayProps] + * @param {Array} [searchableProps] + * @param {boolean} [forceCrawl] + * * @memberOf DisplaySite */ constructor( @@ -73,8 +75,8 @@ export default class PropertyBagDisplay extends React.Component} * @memberOf PropertyBagDisplay @@ -98,9 +100,9 @@ export default class PropertyBagDisplay extends React.Component} messageList The list to remove the masseg from (the 'main' window of the Panel) - * @param {string} messageId The Id of the massge to remove - * + * + * @param {Array} messageList The list to remove the message from (the 'main' window of the Panel) + * @param {string} messageId The Id of the message to remove + * * @memberOf PropertyBagDisplay */ private removeMessage(messageList: Array, messageId: string): void { @@ -183,10 +185,10 @@ export default class PropertyBagDisplay extends React.Component ({ ...current, errorMessages: messageList })); } /** - * Removes a massage from the main windo - * - * @param {string} messageId - * + * Removes a massage from the main window + * + * @param {string} messageId + * * @memberOf PropertyBagDisplay */ private removeMainMessage(messageId: string): void { @@ -194,9 +196,9 @@ export default class PropertyBagDisplay extends React.Component} - * + * @returns {Promise} + * * @memberOf PropertyBagDisplay */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any private changeSearchable(siteUrl: string, propname: string, newValue: boolean): Promise { if (newValue) {//make prop searchable - if (_.indexOf(this.state.workingStorage.searchableProps, propname) === -1) {// wasa not searchable, mpw it is + if (_.indexOf(this.state.workingStorage.searchableProps, propname) === -1) {// was not searchable, now it is console.log(propname + "was not searchable, now it is "); this.state.workingStorage.searchableProps.push(propname); return utils.saveSearchablePropertiesToSharePoint(siteUrl, this.state.workingStorage.searchableProps); @@ -224,8 +227,8 @@ export default class PropertyBagDisplay extends React.Component { return p === propname; }); return utils.saveSearchablePropertiesToSharePoint(siteUrl, this.state.workingStorage.searchableProps); @@ -238,8 +241,8 @@ export default class PropertyBagDisplay extends React.Component{item[column.fieldName]} ); } @@ -267,12 +271,12 @@ export default class PropertyBagDisplay extends React.Component} - * + * @returns {Array} + * * @memberOf PropertyBagDisplay */ private setupColumns(): Array { @@ -321,15 +325,15 @@ export default class PropertyBagDisplay extends React.Component = prop.split('|');// crawledpropety/managed property + const names: Array = prop.split('|');// crawled property/managed property initState.managedToCrawedMapping.push(new ManagedToCrawledMappingEntry(names[0], names[1])); initState.managedPropNames.push(names[1]); } @@ -372,6 +376,7 @@ export default class PropertyBagDisplay extends React.Component { for (const r of results.PrimarySearchResults) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any const obj: any = {}; for (const dp of initState.managedPropNames) { obj[dp] = r[dp]; @@ -390,24 +395,26 @@ export default class PropertyBagDisplay extends React.Component ({ ...current, selectedIndex: index })); } /** * Saves the item in workingStorage back to SharePoint - * - * @param {MouseEvent} [e] - * + * + * @param {MouseEvent} [e] + * * @memberOf PropertyBagDisplay */ private onSave(e?: MouseEvent): void { + // eslint-disable-next-line @typescript-eslint/no-explicit-any const promises: Array> = []; for (const prop of this.state.workingStorage.DisplayProps) { const promise = utils.setSPProperty(prop.crawledPropertyName, prop.value, this.state.workingStorage.Url) @@ -417,8 +424,10 @@ export default class PropertyBagDisplay extends React.Component) => { if (this.state.workingStorage.forceCrawl) { + // eslint-disable-next-line @typescript-eslint/no-floating-promises utils.forceCrawl(this.state.workingStorage.Url); } debugger; @@ -434,9 +443,9 @@ export default class PropertyBagDisplay extends React.Component { const crawledProps: Array = this.props.propertiesToDisplay.map(item => { return item.split("|")[0]; }); - let temp = _.clone(selectedSite); + const temp = _.clone(selectedSite); + // eslint-disable-next-line dot-notation temp.searchableProps = utils.decodeSearchableProps(r.AllProperties["vti_x005f_indexedpropertykeys"]); temp.DisplayProps = utils.SelectProperties(r.AllProperties, crawledProps, temp.searchableProps); temp.errorMessages = new Array(); @@ -499,13 +510,14 @@ export default class PropertyBagDisplay extends React.Component c.fieldName === column.fieldName);// find the object in state // If we've sorted this column, flip it. @@ -517,7 +529,7 @@ export default class PropertyBagDisplay extends React.Component { + const temp = _.orderBy(this.state.sites, (site) => { if (site[column.fieldName]) { return site[column.fieldName].toLowerCase(); } @@ -535,9 +547,9 @@ export default class PropertyBagDisplay extends React.Component} - * + * + * @returns {React.ReactElement} + * * @memberOf PropertyBagDisplay */ public render(): React.ReactElement { @@ -558,8 +570,7 @@ export default class PropertyBagDisplay extends React.Component - + /> {this.renderPopup.bind(this)()} ); diff --git a/samples/react-property-bag-editor/src/webparts/propertyBagEditor/PropertyBagEditorWebPart.ts b/samples/react-property-bag-editor/src/webparts/propertyBagEditor/PropertyBagEditorWebPart.ts index b93de4da5..c0cb93563 100644 --- a/samples/react-property-bag-editor/src/webparts/propertyBagEditor/PropertyBagEditorWebPart.ts +++ b/samples/react-property-bag-editor/src/webparts/propertyBagEditor/PropertyBagEditorWebPart.ts @@ -11,7 +11,7 @@ import { IPropertyBagEditorWebPartProps } from "./IPropertyBagEditorWebPartProps import utils from "../shared/utils"; /** - * This webpart is used to edit the properties of a Rootweb. + * This webpart is used to edit the properties of a Rootweb. * The web to be edited is passed in by the SiteUrl Property. If not set, the Current site is used * @export * @class PropertyBagEditorWebPart @@ -21,13 +21,13 @@ export default class PropertyBagEditorWebPart extends BaseClientSideWebPart { public refs: { [key: string]: React.ReactInstance; + // eslint-disable-next-line @typescript-eslint/no-explicit-any list: any //DetailsList }; public constructor(props: IPropertyBagEditorProps) { @@ -41,7 +44,7 @@ export default class PropertyBagEditor extends React.Component} * @memberOf PropertyBagEditor @@ -58,24 +61,25 @@ export default class PropertyBagEditor extends React.Component { debugger; const sp = utils.decodeSearchableProps(r.AllProperties.vti_x005f_indexedpropertykeys); @@ -84,20 +88,21 @@ export default class PropertyBagEditor extends React.Component ({ ...current, isediting: false })) } + // eslint-disable-next-line @typescript-eslint/no-explicit-any private onActiveItemChanged(item?: any, index?: number) { this.setState((current) => ({ ...current, selectedIndex: index })) } /** * Gets fired when the user changes the 'Searchable' value in the ui. * Saves the value in workingStorage - * - * @param {boolean} newValue - * + * + * @param {boolean} newValue + * * @memberOf PropertyBagEditor */ private onSearchableValueChanged(e: Event, newValue: boolean) { @@ -107,9 +112,9 @@ export default class PropertyBagEditor extends React.Component { + // eslint-disable-next-line @typescript-eslint/no-floating-promises this.changeSearchable(this.state.workingStorage.crawledPropertyName, this.state.workingStorage.searchable) .then(s => { const temp = _.clone(this.state.displayProps);// this.state.workingStorage = null; @@ -155,9 +162,9 @@ export default class PropertyBagEditor extends React.Component} - * + * + * @param {string} propname The property to be made Searchable or non-Searchable + * @param {boolean} newValue Whether to make it Searchable or non-Searchable + * @returns {Promise} + * * @memberOf PropertyBagEditor */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any private changeSearchable(propname: string, newValue: boolean): Promise { if (newValue) {//make prop searchable if (_.indexOf(this.state.searchableProps, propname) === -1) {// wasa not searchable, mpw it is @@ -199,6 +207,7 @@ export default class PropertyBagEditor extends React.ComponentYes); @@ -208,9 +217,9 @@ export default class PropertyBagEditor extends React.Component} - * + * + * @returns {React.ReactElement} + * * @memberOf PropertyBagEditor */ public render(): React.ReactElement { @@ -229,8 +238,7 @@ export default class PropertyBagEditor extends React.Component - + />