Skip to content

Property editors: Add configuration and validation of allowed types for element picker, document picker, media picker - #23026

Merged
AndyButland merged 31 commits into
mainfrom
v18/feature/element-picker-configuration-allowed-types
Jun 13, 2026
Merged

Property editors: Add configuration and validation of allowed types for element picker, document picker, media picker#23026
AndyButland merged 31 commits into
mainfrom
v18/feature/element-picker-configuration-allowed-types

Conversation

@NguyenThuyLan

@NguyenThuyLan NguyenThuyLan commented Jun 1, 2026

Copy link
Copy Markdown
Contributor

Prerequisites

Description

Adds an "Allow items of type" configuration option to the Element Picker, Document Picker property editor, allowing editors to restrict which element types can be selected.

image

How to test

  1. Create a new Data Type using the Element Picker editor.
  2. In the "Allow items of type" config field, select one or more element types (e.g. only "Promo Block").
  3. Save the Data Type and assign it to a Document Type property.
  4. Open a content node, open the Element Picker — verify only elements of the allowed type(s) are selectable in the tree.
  5. Leave "Allow items of type" empty — verify all element types remain selectable (no restriction).
  6. Configure multiple allowed types — verify all of them are selectable and others are not.

@claude

claude Bot commented Jun 1, 2026

Copy link
Copy Markdown

Claude finished @NguyenThuyLan's task in 6m 43s —— View job


PR Review

Target: origin/main · Based on commit: acbd2ae8
· Skipped: 0 noise files out of 9 total

Adds an "Allow items of type" configuration option to the Element Picker property editor, restricting which element types can be selected. Touches the C# value editor (new AllowedTypeValidator), the configuration model, four frontend TypeScript components, and a new unit test class.

  • Modified public API: ElementPickerConfiguration (new AllowedContentTypeIds property); stored value format changed from ["guid"] to [{"type":"element","unique":"guid"}]
  • Affected implementations (outside this PR): ElementPickerValueConverter reads the old format and was not updated
  • Other changes: New allowedContentTypes data-type config field visible in the backoffice; umb-input-element selection property type changed from Array<string> to Array<UmbReferenceByUniqueAndType>

Critical

  • src/Umbraco.Core/PropertyEditors/ValueConverters/ElementPickerValueConverter.cs:70 (not changed in this PR): GetElements still does _jsonSerializer.Deserialize<Guid[]>(value). This PR changes the stored format to [{"type":"element","unique":"..."}], so Deserialize<Guid[]> will return null for every new value → all element picker properties render empty in templates and the Delivery API. ElementPickerValueConverter must be updated to extract GUIDs from the new object format before this PR can merge. Fix this →

Important

  • src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs:70: The stored value format change (from GUID array to object array) is not accompanied by a content migration or a dual-format reader. The codebase is at v18.1.0-rc, meaning existing installations may already have element picker values saved in the old ["guid"] format. After this PR, GetReferences silently yields nothing for those values, losing all entity-tracking references. Add a fallback in GetReferences that tries the old Guid[] format when the new format deserialization returns null.

  • src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs:119: AllowedTypeValidator calls GetByIds and only validates elements that were found. If a submitted element key doesn't exist (deleted element, or crafted request), it is silently treated as valid. A malicious editor could bypass the type restriction by submitting a key for a non-existent element alongside forbidden-type elements. Consider returning a validation failure when elements.Length differs from the number of distinct keys, or document this as accepted behavior.

Suggestions

  • tests/Umbraco.Tests.UnitTests/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditorValidationTests.cs:3: using System.Data is imported but never used — remove to keep the file clean.

  • tests/Umbraco.Tests.UnitTests/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditorValidationTests.cs: Test method names (Allowed_Type_Passes_..., Allowed_Type_Fails_...) deviate from the project's Can_/Cannot_ convention. Consider renaming to e.g. Can_Validate_With_No_Filter_Configured, Cannot_Validate_When_Element_Type_Is_Disallowed.


Request Changes

The Critical issue (value converter not updated) must be addressed — it causes a complete regression for anyone using the Element Picker in templates or the Delivery API after this PR ships. The data migration concern is also worth resolving before merging since this is a release candidate.

The feature itself is well-structured: the backend validator, configuration model, and frontend components are cleanly implemented, and the unit tests cover the key scenarios.

Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs
Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs
Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs Outdated
@NguyenThuyLan
NguyenThuyLan marked this pull request as draft June 1, 2026 07:02
@NguyenThuyLan
NguyenThuyLan marked this pull request as ready for review June 3, 2026 02:45
@claude

claude Bot commented Jun 3, 2026

Copy link
Copy Markdown

Claude finished @NguyenThuyLan's task in 5m 17s —— View job


Claude finished @NguyenThuyLan's task in 6m 43s —— View job


PR Review

Target: origin/main · Based on commit: 88f2e6fc · Skipped: 0 noise files out of 9 total

Adds "Allow items of type" configuration to the Element Picker property editor: a backend AllowedTypeValidator that queries element content types at save time, a new ElementPickerConfiguration.AllowedContentTypeIds property, and a frontend config UI that filters the picker tree at selection time.

  • Modified public API: ElementPickerConfiguration — new AllowedContentTypeIds property; ElementPickerPropertyValueEditor constructor — 3 new parameters (ILocalizedTextService, IElementService, ICoreScopeProvider)
  • Other changes: New allowedContentTypes data-type config field visible in the backoffice; umb-input-element gains a new allowedContentTypeIds property; UmbElementTreePickerDataSource.treePickableFilter now conditionally filters by content type

Important

  • src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs:85: jsonSerializer is accepted in the ElementPickerValidatorRunner constructor but never stored or used — dead parameter. Remove it from the constructor signature and the corresponding call site at line 55–57.

  • src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs:143: When a submitted element key doesn't exist in the database, GetByIds silently omits it — its type is never checked. An editor could include a non-existent or crafted key alongside valid ones to bypass the allowed-type restriction. Consider failing validation when elements.Length != value.Length, or document this as accepted behaviour.

Suggestions

  • src/Umbraco.Web.UI.Client/src/packages/elements/global-components/input-element.element.ts:2: Two commented-out imports remain in the file (lines 2 and 8). Remove them before merging.

Approved with Suggestions for improvement

The previous Critical issue (value converter regression) has been resolved, and the overall structure is clean. Please address the dead parameter and review the silent-bypass behaviour before merging.

Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs Outdated
Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs Outdated

@AndyButland AndyButland left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had a quick look over @NguyenThuyLan. I haven't tested as I wanted to give you some feedback that you'd have in the morning. Looks great so far, but I found a few things to suggest inline.

Don't forget also that we discussed on the Azure board story that we wanted to align the document picker with this and the media picker for validation. It's also missing the ability to select allowed types, so we should introduce that. And I think it makes sense to do so in this PR, so we can see it's all aligned and guarantee that it's released together (in C# the document picker is called ``ContentPickerPropertyEditor(with nestedContentPickerPropertyValueEditor`).

In the end we'd like to get the document, media and element picker all as aligned as we can in terms of features, validation and how they are handled client and server-side.

Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs Outdated
Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs Outdated
Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces an “accepted/allowed content types” configuration for picker-style property editors—most notably the Element Picker—so editors can restrict which element types may be selected, with corresponding server-side validation to enforce the restriction.

Changes:

  • Adds an “Accepted types” configuration UI for the Element Picker (and Document Picker), and wires the allowed-type IDs through to client-side pickers for filtering pickable tree items.
  • Adds server-side allowed-type validation for Element Picker and Content Picker, plus a shared AllowedContentTypeKeysParser helper.
  • Refactors validation infrastructure by introducing ITypedValidator and TypedValidatorRunner, and improves Media Picker validation to fail when referenced media no longer exists.

Reviewed changes

Copilot reviewed 34 out of 34 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
tests/Umbraco.Tests.UnitTests/Umbraco.Core/PropertyEditors/MediaPicker3ValueEditorValidationTests.cs Adds unit coverage for missing-media validation when allowed-type filtering is configured.
tests/Umbraco.Tests.UnitTests/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditorValidationTests.cs New tests covering allowed-type validation behavior for Element Picker.
tests/Umbraco.Tests.UnitTests/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditorMinMaxValidationTests.cs New tests covering min/max validation behavior for Element Picker.
tests/Umbraco.Tests.UnitTests/Umbraco.Core/PropertyEditors/ContentPickerPropertyEditorValidationTests.cs New tests covering allowed-type validation behavior for Content Picker.
tests/Umbraco.Tests.UnitTests/Umbraco.Core/PropertyEditors/AllowedContentTypeKeysParserTests.cs New tests for parsing comma-separated content-type GUIDs.
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts Updates config label/description copy for the content picker “filter” setting.
src/Umbraco.Web.UI.Client/src/packages/elements/property-editor/element-picker/Umbraco.ElementPicker.ts Adjusts config UI weights (ordering).
src/Umbraco.Web.UI.Client/src/packages/elements/property-editor/element-picker/manifests.ts Adds “Accepted types” config property and registers the new config UI manifest.
src/Umbraco.Web.UI.Client/src/packages/elements/property-editor/element-picker/element-picker-property-editor-ui.element.ts Reads allowedContentTypes config and forwards allowed IDs to the input component.
src/Umbraco.Web.UI.Client/src/packages/elements/property-editor/element-picker/config/allowed-element-types/property-editor-ui-element-picker-allowed-element-types.element.ts New config UI element for selecting allowed element types.
src/Umbraco.Web.UI.Client/src/packages/elements/property-editor/element-picker/config/allowed-element-types/manifests.ts New manifest registering the Element Picker allowed-types config UI.
src/Umbraco.Web.UI.Client/src/packages/elements/picker-data-source/element-tree.picker-data-source.ts Adds pickable filtering by allowed content type IDs for element tree items.
src/Umbraco.Web.UI.Client/src/packages/elements/global-components/input-element.element.ts Plumbs allowed content type IDs into the element picker data source config.
src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/Umbraco.ContentPicker.ts Adds missing weight to “Ignore user start nodes” config UI.
src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts Reads allowedContentTypes config and forwards allowed IDs to <umb-input-document>.
src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/manifests.ts Adds “Accepted types” config property and registers allowed-types config UI manifest.
src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/allowed-document-types/property-editor-ui-document-picker-allowed-document-types.element.ts New config UI element for selecting allowed document types.
src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/allowed-document-types/manifests.ts New manifest registering the Document Picker allowed-types config UI.
src/Umbraco.Infrastructure/Serialization/SystemTextJsonSerializerBase.cs Removes unused usings / minor formatting cleanup.
src/Umbraco.Infrastructure/PropertyEditors/MultiUrlPickerValueEditor.cs Switches validator interface from ITypedJsonValidator to ITypedValidator.
src/Umbraco.Infrastructure/PropertyEditors/MultiNodeTreePickerPropertyEditor.cs Switches validator interfaces from ITypedJsonValidator to ITypedValidator.
src/Umbraco.Infrastructure/PropertyEditors/MediaPicker3PropertyEditor.cs Switches validator interfaces and adds missing-media validation when resolving media types by lookup.
src/Umbraco.Infrastructure/PropertyEditors/DateTimePropertyEditorBase.cs Switches validator interface from ITypedJsonValidator to ITypedValidator.
src/Umbraco.Core/PropertyEditors/Validation/TypedValidatorRunner.cs New runner for already-typed editor values (casts once, runs multiple typed validators).
src/Umbraco.Core/PropertyEditors/Validation/TypedJsonValidatorRunner.cs Updates docs, switches to ITypedValidator, adds obsolete compatibility constructor.
src/Umbraco.Core/PropertyEditors/Validation/ITypedValidator.cs New typed validator interface (non-JSON-specific).
src/Umbraco.Core/PropertyEditors/Validation/ITypedJsonValidator.cs Obsoletes old interface in favor of ITypedValidator.
src/Umbraco.Core/PropertyEditors/EntityDataPickerPropertyEditor.cs Switches validator interface from ITypedJsonValidator to ITypedValidator.
src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs Adds typed validation runner + min/max + allowed-type validators for Element Picker.
src/Umbraco.Core/PropertyEditors/ElementPickerConfiguration.cs Adds validation limit + allowed content types configuration fields.
src/Umbraco.Core/PropertyEditors/ContentPickerPropertyEditor.cs Adds allowed-type validation for Content Picker using typed validator runner.
src/Umbraco.Core/PropertyEditors/ContentPickerConfiguration.cs Adds allowed content types configuration field.
src/Umbraco.Core/PropertyEditors/AllowedContentTypeKeysParser.cs New helper to parse comma-separated GUID config values.
src/Umbraco.Core/EmbeddedResources/Lang/en.xml Adds validation/missingMedia localization key.

Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs Outdated
Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs Outdated
Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerPropertyEditor.cs
Comment thread src/Umbraco.Core/PropertyEditors/ElementPickerConfiguration.cs Outdated
Comment thread src/Umbraco.Core/PropertyEditors/ContentPickerPropertyEditor.cs Outdated
@NguyenThuyLan NguyenThuyLan changed the title Element picker: Add allowed element types configuration Property editors: Add allowed types configuration and its validation for element picker, document picker, media picker Jun 11, 2026
@NguyenThuyLan NguyenThuyLan changed the title Property editors: Add allowed types configuration and its validation for element picker, document picker, media picker Property editors: Add allowed types configuration and validation for element picker, document picker, media picker Jun 11, 2026
@NguyenThuyLan NguyenThuyLan changed the title Property editors: Add allowed types configuration and validation for element picker, document picker, media picker Property editors: Add configuration and validation of allowed types for element picker, document picker, media picker Jun 11, 2026
@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants