Collection: Introduce Card and Ref Collection View kinds

[madsrasmussen]

This PR introduces reusable collection view kinds (card and ref) that can be used out-of-the-box for collections. We also want to introduce a table kind, but that requires a bit more up-front work before that can happen.

• Both kinds support Entity Actions.
• The PR introduces an optional requestItemHref method on the collection context to have a centralized place to provide the same href for an item across all views.

Updates:

• The PR updates the collection example to demonstrate both card and ref view kinds.
• The PR updates the user collection to use the card kind instead of the custom "grid" implementation

How to use

Card Manifest

{
  type: 'collectionView',
  kind: 'ref',
  alias: 'My.CollectionView.Ref',
  name: 'My Ref Collection View',
}

Ref Manifest

{
  type: 'collectionView',
  kind: 'card',
  alias: 'My.CollectionView.Card,
  name: 'My Card Collection View',
}

How to test:

• The user collection has been updated to use the card collection view. Please ensure that it still works as expected.
• Running the collection example will render a Dashboard with a Collection that includes the different views. They currently do not have any entity actions, bulk actions, or links, so it only showcases the bare minimum.

[Copilot]

Pull request overview

This PR introduces reusable collection view kinds (card and ref) that provide out-of-the-box collection views with built-in support for entity actions, selection, and item navigation. The PR refactors the collection architecture by adding a requestItemHref method to collection contexts, enabling centralized href generation for collection items across all views. Additionally, it introduces a bulk action manager that automatically enables collection selection when bulk actions are available.

Key changes:

• New reusable card and ref collection view kinds with manifest-based configuration
• Base class (UmbCollectionViewElementBase) for collection views that handles common patterns
• requestItemHref method on collection contexts for centralized item link generation
• Bulk action manager that observes available bulk actions and automatically configures selection

Reviewed changes

Copilot reviewed 29 out of 30 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/src/packages/core/collection/view/umb-collection-view-element-base.ts	New abstract base class providing shared state management and context consumption for collection views
src/Umbraco.Web.UI.Client/src/packages/core/collection/view/card/card-collection-view.element.ts	New card-based collection view implementation using the base class
src/Umbraco.Web.UI.Client/src/packages/core/collection/view/ref/ref-collection-view.element.ts	New list-based collection view implementation using the base class
src/Umbraco.Web.UI.Client/src/packages/core/collection/view/card/manifests.ts	Manifest kind definition for card collection views
src/Umbraco.Web.UI.Client/src/packages/core/collection/view/ref/manifests.ts	Manifest kind definition for ref collection views
src/Umbraco.Web.UI.Client/src/packages/core/collection/view/collection-view.extension.ts	Moved type definitions for collection views from extensions folder
src/Umbraco.Web.UI.Client/src/packages/core/collection/view/types.ts	New type export file for collection views
src/Umbraco.Web.UI.Client/src/packages/core/collection/view/manifests.ts	Aggregates card and ref manifests
src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts	Adds requestItemHref method and bulk action integration with selection
src/Umbraco.Web.UI.Client/src/packages/core/collection/bulk-action/collection-bulk-action.manager.ts	New manager for observing bulk action availability
src/Umbraco.Web.UI.Client/src/packages/core/collection/bulk-action/collection-bulk-action.manager.test.ts	Unit tests for bulk action manager
src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts	Adds requestItemHref to collection context interface and exports view types
src/Umbraco.Web.UI.Client/src/packages/core/collection/manifests.ts	Registers new view manifests
src/Umbraco.Web.UI.Client/src/packages/core/collection/extensions/types.ts	Removes collection view type export (moved to view/types)
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.ts	Adds readonly property when href is undefined
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/default-collection-item-ref.element.ts	Adds readonly property when href is undefined
src/Umbraco.Web.UI.Client/src/packages/user/user/paths.ts	Adds parent path parameter to edit workspace path pattern for consistency
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection.context.ts	Implements requestItemHref for user items
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/table/user-table-collection-view.element.ts	Updates to use requestItemHref for generating hrefs
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/table/column-layouts/name/user-table-name-column-layout.element.ts	Updates to receive href from parent instead of constructing it
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/manifests.ts	Converts user grid collection view to use card kind
src/Umbraco.Web.UI.Client/src/packages/language/collection/views/table/language-table-collection-view.element.ts	Refactors selection observation pattern
src/Umbraco.Web.UI.Client/examples/collection/collection/card-view/manifests.ts	Updates example to use card kind
src/Umbraco.Web.UI.Client/examples/collection/collection/card-view/collection-view.element.ts	Removes custom card view implementation (now using built-in kind)
src/Umbraco.Web.UI.Client/examples/collection/collection/ref-view/manifests.ts	New example manifest using ref kind
src/Umbraco.Web.UI.Client/examples/collection/collection/manifests.ts	Registers new ref view example
src/Umbraco.Web.UI.Client/src/packages/core/collection/view/collection-view.manager.ts	Updates import path for collection view types
src/Umbraco.Web.UI.Client/src/packages/core/collection/view/collection-view.manager.test.ts	Updates import path for collection view types
src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts	Updates import path for collection view types
src/Umbraco.Web.UI.Client/eslint.config.js	Updates ESLint configuration for unused variables and formatting

Comments suppressed due to low confidence (2)

src/Umbraco.Web.UI.Client/src/packages/core/collection/bulk-action/collection-bulk-action.manager.test.ts:4

• Unused import first.

import { Observable, first } from '@umbraco-cms/backoffice/external/rxjs';

src/Umbraco.Web.UI.Client/eslint.config.js:89

• This property is overwritten by another property in the same object literal.

			'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],

[leekelleher]

Tested out, works as described. 🚀