Media Picker: Show ancestor breadcrumb path in search results table view (closes #23101)

[AndyButland]

Description

The global backoffice search and the document/content picker already show an ancestor breadcrumb path in their search results so duplicate names can be told apart. The media picker did not, even though the ancestor data was already fetched. This adds the breadcrumb to the media picker's table search view.

• New umb-media-picker-table-column-name table column element renders the item name with the ancestor path beneath it (smaller, dimmed). Folder rows keep their click-to-open behaviour.
• The path is truncated start-first (direction: rtl) so the deepest, most disambiguating ancestor stays visible — matching the document picker.

The breadcrumb is added to the table view only. The default cards view is unchanged, as the thumbnail already provides visual disambiguation there. I considered adding it here too, but then we either lose some of the thumbnail display or need to make the card bigger, and we have a display difference for root items that don't have an ancestor.

Fixes #23101.

Testing

Automated

Unit tests are added for the new column element.

Manual

1. Create media with duplicate names in different folders (e.g. Folder A/banner.jpg and Folder B/banner.jpg).
2. Open a Media Picker, search for the duplicated name, and switch to the table view (view switcher).
3. The folder path appears under each result, and the duplicates are distinguishable.

---

This item has been added to our backlog AB#69746

[claude]

Claude finished @AndyButland's task in 3m 45s —— View job

---

Code Review

• Gather context and read changed files
• Review new media-picker-table-column-name.element.ts component
• Review test file media-picker-table-column-name.test.ts
• Review changes to media-picker-modal.element.ts
• Review index.ts export
• Post inline findings and summary
• Apply labels (area/frontend, category/ux, category/ui)

---

Summary

Verdict: Approved with suggestions — clean, well-scoped implementation that correctly ports the document-picker ancestor-breadcrumb pattern to the media picker's table view.

What the PR does

Adds a new umb-media-picker-table-column-name web component that renders the item name with an optional dimmed ancestor path beneath it. The path uses direction: rtl + text-align: left to truncate start-first, keeping the deepest (most disambiguating) ancestor visible — exactly matching the document picker approach. The ancestor data was already being fetched; this PR simply exposes it in the table UI.

Positive observations

• Follows existing conventions — the direction: rtl truncation, the 'ancestors' in item type-guard discriminator, and the || '(Untitled)' fallback all mirror how the rest of the codebase handles this.
• Well-tested — 6 unit tests covering instantiation, name rendering, ancestor path presence/absence, button vs. span mode, click-stops-propagation, and an a11y audit. Good use of composed: true on the dispatched events to cross shadow DOM boundaries correctly.
• Focused scope — the PR deliberately touches only the table view and leaves the cards view untouched, with a clear scope note explaining why.
• Clean refactor — pulling the name-cell logic into a dedicated element removes the inline conditional template from #buildTableItems, which is now much easier to follow.
• Correct ancestorPath: ... || undefined — the falsy coercion from #getAncestorPath's empty-string return for non-search items correctly suppresses the ancestor path for tree-browsing rows.

Findings

Two minor items, both left as inline comments:

1. [Suggestion] media-picker-table-column-name.element.ts line 47–51 — the uui-button CSS selector is missing overflow/truncation rules (width: 100%; overflow: hidden; white-space: nowrap). The .name span has these, but the button case (rendered for navigable folders) does not, so very long folder names may stretch the column instead of clipping.

2. [Informational] media-picker-modal.element.ts line 403 — the "(Untitled)" fallback string for ancestors with empty names is not localized. Practically a non-issue given how rarely media items have blank names, but worth flagging for completeness.

Neither finding blocks merging — both are quality-of-life improvements.

[Copilot]

Pull request overview

Adds ancestor breadcrumb paths to Media Picker table search results to better disambiguate items with duplicate names (matching the behavior in other pickers/search results).

Changes:

• Introduces a new table column layout element (umb-media-picker-table-column-name) that renders the item name plus an optional ancestor path beneath it (with start-truncation via direction: rtl).
• Updates the media picker modal’s table configuration to use the new column element and pass structured name/path/navigation data.
• Adds unit tests for the new column element (including click behavior and optional a11y audit).

Reviewed changes

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

File	Description
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts	Switches the table “name” column to a custom column element and supplies ancestor path + optional navigation callback.
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-table-column-name.element.ts	New column layout element rendering name + optional ancestor path, preserving “open folder” behavior via a button.
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-table-column-name.test.ts	Unit coverage for rendering, navigation click handling, and event propagation behavior (+ optional a11y audit).
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/index.ts	Re-exports the new column element so it’s registered via the existing components barrel import.

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud