Refactor relationship field to new design, reusing AssetPicker filters/search (Edit Contentlet)

[erickgonzalez]

Description

Refactor the Relationship field in the new Edit Content to follow the new design, reusing as much as possible from the AssetPicker component built for Content Drive (#36702) — filters, search, and the same backend endpoint.

🎨 Design: https://claude.ai/design/p/202fc776-9326-4926-b4c6-5996a8be9ea1?via=share&file=Asset+Picker.dc.html
💬 Context (Slack): https://dotcms.slack.com/archives/C0893BF7GRJ/p1787232866639669

Reuse goals:

• Reuse the AssetPicker shell/interaction patterns (Create AssetPicker component reusing Content Drive (File/Image field asset selection) #36702) where applicable.
• Reuse the filters and search UI.
• Use the same endpoint the AssetPicker/Content Drive uses (api/v1/drive/search) for searching related content.

This is the larger design refactor of the relationship field. It is separate from #36155 (smaller relationship-field refinements: chip colors, Locales column, hint, empty state, showFields) — cross-referenced, not superseded.

Acceptance Criteria

Design refactor

• The relationship field is refactored to match the new design (linked above)
• Relating and unrelating content works with the new design
• The refactor preserves relationship-field behavior (cardinality, ordering, permissions)
• The picker is a selection editor: it opens with already-related items checked, checking adds and unchecking removes; confirming leaves the relationship equal to the selection
• The confirm action is never disabled — confirming with an empty selection unrelates every item

Reuse AssetPicker & Content Drive patterns (#36702)

• Filters are reused from the AssetPicker component (not re-implemented) where applicable
• The search reuses the AssetPicker/Content Drive search, using the api/v1/drive/search endpoint
• Shared UI/interaction patterns from the AssetPicker are reused rather than duplicated
• The picker presents a full-width search bar plus filter chips (site/folder, Locale) — no folder-tree sidebar; the folder scope is a chip

Consistency & regressions

• Existing related content loads and displays correctly after the refactor
• Saving a contentlet persists relationship changes correctly (no data loss)
• The picker keeps its own paging (page, prev/next, page size). Only the related-content list in the form loses its paging — the two lists are different lists

Relationship component fixes (not picker-related)

Additional fixes to the relationship component shown in the new Edit Content (the list of related content), independent of the picker:

• The drag handle is shown only on hover of a related-content row (hidden otherwise)
• The Status column is right-aligned
• The component respects the form max width when there is only one column (verify/fix against the single-column max width — see New Edit Content: apply field padding (18px) and form max-width (720px/1000px) guidelines #36615)
• Pagination is removed from the related-content list — no paging control. The list renders the first 40 rows and appends a "Load more" control that reveals 40 more, following the Key/Value field precedent (Refactor shared Key/Value field to new design across edit content, field variables, and apps portlet #37191). Withholding is a rendering limit only: every related item stays in the field's value, so a drag never loses a withheld row
• With pagination removed, drag-reordering works across all related items (not just a single page)

Suggested Tests

Frontend refactor + component fixes (search reuses the existing api/v1/drive/search endpoint — no backend change). Unit-first; E2E covers the relate/unrelate + drag-reorder flows that are hard to assert fully in unit. Integration/Postman are not applicable.

Unit (Jest/Spectator) — primary coverage

• The relationship field renders the new design (relate control, related-content rows)
• Relating content adds it to the model; unrelating removes it
• The search calls the api/v1/drive/search endpoint with the expected params (reused, not re-implemented)
• Filters reuse the AssetPicker filter component (assert the shared component is used)
• The drag handle is hidden by default and shown on row hover
• The Status column is right-aligned (assert the alignment class/style)
• With a single-column form, the component honors the single-column max width (see New Edit Content: apply field padding (18px) and form max-width (720px/1000px) guidelines #36615)
• No pagination control is rendered in the related-content list; ≤40 items render fully with no Load more, >40 render 40 rows plus Load more, and the withheld items remain in the emitted value

E2E (Playwright) — flows hard to unit-cover

• Open a contentlet with a relationship field → search + relate content → the item appears → save → persists
• Unrelate an item → save → it is removed
• Drag-reorder across the full related set (with pagination removed) → new order is saved and reloads correctly

Integration / Postman

• No tests — search reuses the existing api/v1/drive/search endpoint; relationship persistence uses existing content endpoints. No API contract change.

Spec

Spec-driven work (Spec-Kit): specs/37192-relationship-field-assetpicker/spec.md, on branch issue-37192-relationship-field-assetpicker. PR 1 carries the spec alone and must be approved before implementation starts.

Not in scope: the "New content" path (creating related content in place, side panel or dialog per the feature flag) is unchanged — only the "Existing content" path is refactored.

Priority

Medium

Additional Context

Part of the new Edit Contentlet work (dotCMS: New Edit Contentlet), Relationship field. Reuses the AssetPicker component (#36702) and the shared api/v1/drive/search endpoint for search/filters. Cross-references #36155 (smaller relationship-field refinements — kept separate per scope decision). Product context is in the linked Slack thread.

This issue also bundles fixes to the relationship component (the related-content list) that are independent of the picker: hover-only drag handle, right-aligned Status column, single-column max-width handling (see #36615), and removing pagination so drag-reordering works across the full related set.

[github-actions]

PRs linked to this issue

• docs(edit-content): spec for #37192 relationship field picker and related-list fixes by @adrianjm-dotCMS