Backoffice Item Pickers: Show error for missing items in 10 picker types (closes #19329, #20270, #20367)

[iOvergaard]

Summary

Fixes pickers showing blank when the referenced item has been deleted. Now displays a clear error state with meaningful information (file path or GUID) and allows users to remove the broken reference.

This fix applies to 10 picker types:

• Static file pickers (block thumbnails, stylesheets, scripts, etc.) - Shows file path
• Document pickers - Shows document GUID
• Member pickers - Shows member GUID
• Document type pickers - Shows document type GUID
• User pickers - Shows user GUID
• Language pickers - Shows language GUID
• Media type pickers - Shows media type GUID
• Member type pickers - Shows member type GUID
• Member group pickers - Shows member group GUID
• User group pickers - Shows user group GUID

Changes

Infrastructure

• Added errorDetail property to umb-entity-item-ref to display additional context in error states
• Made _removeItem protected in UmbPickerInputContext for better extensibility
• Added protected getItemDisplayName() method to UmbPickerInputContext for extensible display name formatting
• Moved requestRemoveItem logic to base class to eliminate duplicate code

Picker Updates

All 10 pickers now:

• Observe statuses from UmbRepositoryItemsManager instead of just selectedItems
• Render based on status state (success vs error)
• Show error state with GUID (or file path for static files) when item is missing
• Use umb-entity-item-ref for error display
• Use specialized components for successful items
• Allow removal with proper confirmation dialog showing meaningful information

Affected pickers:

1. umb-input-static-file - Overrides getItemDisplayName() to show file path
2. umb-input-document - Uses default GUID display
3. umb-input-member - Uses default GUID display
4. umb-input-document-type - Uses default GUID display
5. umb-user-input - Uses default GUID display
6. umb-input-language - Uses default GUID display
7. umb-input-media-type - Uses default GUID display
8. umb-input-member-type - Uses default GUID display
9. umb-input-member-group - Uses default GUID display
10. umb-user-group-input - Uses default GUID display

Test plan

General Testing (applies to all pickers)

For each picker type below:

1. Create or configure an entity that uses the picker
2. Select an item using the picker
3. Delete the selected item (and empty trash if applicable)
4. Reload the page and view the picker
5. ✅ Verify the picker shows "Not Found" with a red alert icon and the item identifier in the detail
6. ✅ Click remove and verify the confirmation dialog shows the identifier instead of "Not found"
7. ✅ Verify you can successfully remove the broken reference

Static File Picker

Test with block thumbnails, stylesheets, scripts, etc.

• Shows file path as errorDetail (e.g., /media/image.jpg)

Document Picker

Test with content property using document picker

• Shows document GUID as errorDetail

Member Picker

Test with content property using member picker

• Shows member GUID as errorDetail

Document Type Picker

Test with document type allowed child types

• Shows document type GUID as errorDetail

User Picker

Test with user assignments/permissions

• Shows user GUID as errorDetail

Language Picker

Test with language selection fields

• Shows language GUID as errorDetail

Media Type Picker

Test with media type selection

• Shows media type GUID as errorDetail

Member Type Picker

Test with member type selection

• Shows member type GUID as errorDetail

Member Group Picker

Test with member group assignments

• Shows member group GUID as errorDetail

User Group Picker

Test with user group assignments

• Shows user group GUID as errorDetail

Code Quality

• Net addition of 141 lines across all changes
• Eliminated duplicate code across multiple picker contexts
• Improved maintainability through base class implementation
• Consistent error handling pattern across all 10 picker types

Issues

Fixes #19329
Fixes #20270
Fixes #20367

🤖 Generated with Claude Code

[Copilot]

Pull Request Overview

This PR enhances the static file picker input component to display error states for items that cannot be retrieved from the server, and adds a confirmation modal before removing static file items.

Key changes:

• Integrates repository status tracking to show error states for unavailable static files
• Adds removal confirmation modal with customized message showing file path when item name is unavailable
• Updates the entity-item-ref component to support displaying error detail information

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
input-static-file.element.ts	Updated to render items based on repository statuses, passing error states and details to umb-entity-item-ref component
input-static-file.context.ts	Overrides requestRemoveItem to show confirmation modal with fallback to file path when item name is unavailable
picker-input.context.ts	Changed _removeItem from private to protected to allow override in subclasses
entity-item-ref.element.ts	Added errorDetail property to display additional error information, reorganized item getter/setter, and fixed property access consistency

[Copilot]

Pull Request Overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated no new comments.

[nielslyngsoe]

I skimmed through the code just to see if everything looked alright, and it does!

I will not test it, so leave that to someone else for now, just a minor comment:
There is a few component that have lost their #renderItem method. But some neither have had this. But an improvement could be to align this across, so all have such, I think that could lower the complexity a bit and it seems like a nice alignment :-)

[iOvergaard]

There is a few component that have lost their #renderItem method. But some neither have had this. But an improvement could be to align this across, so all have such, I think that could lower the complexity a bit and it seems like a nice alignment :-)

Good suggestion, I aligned the pickers so they all have #renderItem now (some were renamed from _renderItem as well to match).

[leekelleher]

Tested out, all looking great, working as expected! 🚀

I made some code amends, nothing functional, mostly import sorting, tidy-up.