Collection: Introduce Card and Ref Collection View kinds

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

@@ -89,7 +89,12 @@ export default [
 			'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
 			'@typescript-eslint/no-non-null-assertion': 'off',
 			'@typescript-eslint/no-explicit-any': 'warn',
-			'@typescript-eslint/no-unused-vars': 'error',
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					argsIgnorePattern: '^_',
+				},
+			],
 			'@typescript-eslint/consistent-type-exports': 'error',
 			'@typescript-eslint/consistent-type-imports': 'error',
 			'@typescript-eslint/no-import-type-side-effects': 'warn',
@@ -154,7 +159,7 @@ export default [
 					selector: 'typeLike',
 					modifiers: ['exported'],
 					format: ['PascalCase'],
-					prefix: ['Umb', 'Ufm', 'Manifest', 'Meta', 'Example']
+					prefix: ['Umb', 'Ufm', 'Manifest', 'Meta', 'Example'],
 				},
 				// All exported string constants should be UPPER_CASE with leading 'UMB_'
 				// Example: UMB_EXAMPLE_CONSTANT
@@ -167,8 +172,8 @@ export default [
 				},
 				// Allow destructured variables to be named as they are in the object
 				{
-					selector: "variable",
-					modifiers: ["destructured"],
+					selector: 'variable',
+					modifiers: ['destructured'],
 					format: null,
 				},
 			],

src/Umbraco.Web.UI.Client/examples/collection/collection/card-view/manifests.ts

@@ -4,15 +4,9 @@ import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collecti
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'collectionView',
+		kind: 'card',
 		alias: 'Example.CollectionView.Card',
 		name: 'Example Card Collection View',
-		js: () => import('./collection-view.element.js'),
-		weight: 50,
-		meta: {
-			label: 'Card',
-			icon: 'icon-grid',
-			pathName: 'card',
-		},
 		conditions: [
 			{
 				alias: UMB_COLLECTION_ALIAS_CONDITION,

src/Umbraco.Web.UI.Client/examples/collection/collection/manifests.ts

@@ -1,6 +1,7 @@
 import { EXAMPLE_COLLECTION_ALIAS } from './constants.js';
 import { EXAMPLE_COLLECTION_REPOSITORY_ALIAS } from './repository/constants.js';
 import { manifests as cardViewManifests } from './card-view/manifests.js';
+import { manifests as refViewManifests } from './ref-view/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
 import { manifests as tableViewManifests } from './table-view/manifests.js';
 
@@ -15,6 +16,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 	},
 	...cardViewManifests,
+	...refViewManifests,
 	...repositoryManifests,
 	...tableViewManifests,
 ];

src/Umbraco.Web.UI.Client/examples/collection/collection/ref-view/manifests.ts

@@ -0,0 +1,17 @@
+import { EXAMPLE_COLLECTION_ALIAS } from '../constants.js';
+import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collection';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'collectionView',
+		kind: 'ref',
+		alias: 'Example.CollectionView.Ref',
+		name: 'Example Ref Collection View',
+		conditions: [
+			{
+				alias: UMB_COLLECTION_ALIAS_CONDITION,
+				match: EXAMPLE_COLLECTION_ALIAS,
+			},
+		],
+	},
+];

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

@@ -0,0 +1,73 @@
+import { UmbCollectionBulkActionManager } from './collection-bulk-action.manager.js';
+import { umbExtensionsRegistry } from '../../extension-registry/index.js';
+import { expect } from '@open-wc/testing';
+import { Observable, first } from '@umbraco-cms/backoffice/external/rxjs';
+import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+
+@customElement('test-bulk-action-controller-host')
+class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
+
+const bulkActionManifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'entityBulkAction',
+		alias: 'Umb.Test.EntityBulkAction.1',
+		name: 'Test Entity Bulk Action 1',
+		forEntityTypes: ['test-entity'],
+	},
+];
+
+describe('UmbCollectionBulkActionManager', () => {
+	let hostElement: UmbTestControllerHostElement;
+	let manager: UmbCollectionBulkActionManager;
+
+	beforeEach(() => {
+		hostElement = new UmbTestControllerHostElement();
+		manager = new UmbCollectionBulkActionManager(hostElement);
+	});
+
+	afterEach(() => {
+		manager.destroy();
+		hostElement.destroy();
+	});
+
+	describe('Public API', () => {
+		describe('properties', () => {
+			it('has a hasBulkActions property', () => {
+				expect(manager).to.have.property('hasBulkActions').to.be.an.instanceOf(Observable);
+			});
+		});
+	});
+
+	describe('hasBulkActions', () => {
+		afterEach(() => {
+			umbExtensionsRegistry.clear();
+		});
+
+		it('it emits false if there are no actions', (done) => {
+			// Use first() to only get the initial emission and auto-unsubscribe
+			manager.hasBulkActions.subscribe((value) => {
+				expect(value).to.equal(false);
+				done();
+			});
+		});
+
+		it('it emits true if there are actions', (done) => {
+			let isFirstValue = true;
+
+			// First, we need to add bulk action manifests to the registry
+			umbExtensionsRegistry.registerMany(bulkActionManifests);
+
+			manager.hasBulkActions.subscribe((value) => {
+				if (isFirstValue) {
+					// Skip the first emission which is false
+					isFirstValue = false;
+					return;
+				}
+
+				expect(value).to.equal(true);
+				done();
+			});
+		});
+	});
+});

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

@@ -0,0 +1,39 @@
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+/**
+ * Manager responsible for tracking the availability of bulk actions in a collection.
+ */
+export class UmbCollectionBulkActionManager extends UmbControllerBase {
+	#hasBulkActions = new UmbBooleanState<undefined>(undefined);
+
+	/**
+	 * Observable that emits `true` if bulk actions are available, `false` if none are registered,
+	 * or `undefined` if the state has not yet been determined.
+	 */
+	public readonly hasBulkActions = this.#hasBulkActions.asObservable();
+
+	/**
+	 * Creates a new instance of the bulk action manager.
+	 * @param {UmbControllerHost} host - The controller host that owns this manager.
+	 */
+	constructor(host: UmbControllerHost) {
+		super(host);
+		this.#observeBulkActions();
+	}
+
+	#observeBulkActions() {
+		new UmbExtensionsManifestInitializer(
+			this,
+			umbExtensionsRegistry,
+			'entityBulkAction',
+			null,
+			(bulkActionControllers) => {
+				this.#hasBulkActions.setValue(bulkActionControllers.length > 0);
+			},
+		);
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts

@@ -1,5 +1,5 @@
 import { UMB_COLLECTION_CONTEXT } from '../default/index.js';
-import type { ManifestCollectionView } from '../extensions/types.js';
+import type { ManifestCollectionView } from '../view/types.js';
 import type { UmbCollectionLayoutConfiguration } from '../types.js';
 import { css, customElement, html, nothing, query, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';

src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts

@@ -1,5 +1,5 @@
-import { UmbCollectionViewManager } from '../collection-view.manager.js';
-import type { UmbCollectionViewManagerConfig } from '../collection-view.manager.js';
+import { UmbCollectionViewManager } from '../view/collection-view.manager.js';
+import type { UmbCollectionViewManagerConfig } from '../view/collection-view.manager.js';
 import type {
 	UmbCollectionColumnConfiguration,
 	UmbCollectionConfiguration,
@@ -9,6 +9,7 @@ import type {
 import type { UmbCollectionFilterModel } from '../collection-filter-model.interface.js';
 import type { UmbCollectionRepository } from '../repository/collection-repository.interface.js';
 import type { ManifestCollection } from '../extensions/types.js';
+import { UmbCollectionBulkActionManager } from '../bulk-action/collection-bulk-action.manager.js';
 import { UMB_COLLECTION_CONTEXT } from './collection-default.context-token.js';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbArrayState, UmbBasicState, UmbNumberState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
@@ -67,6 +68,7 @@ export class UmbDefaultCollectionContext<
 	public readonly pagination = new UmbPaginationManager();
 	public readonly selection = new UmbSelectionManager(this);
 	public readonly view = new UmbCollectionViewManager(this);
+	public readonly bulkAction = new UmbCollectionBulkActionManager(this);
 
 	#defaultViewAlias: string;
 	#defaultFilter: Partial<FilterModelType>;
@@ -163,7 +165,7 @@ export class UmbDefaultCollectionContext<
 	protected _configure() {
 		if (!this.#config) return;
 
-		this.selection.setMultiple(true);
+		this.#configureSelection();
 
 		if (this.#config.pageSize) {
 			this.pagination.setPageSize(this.#config.pageSize);
@@ -194,6 +196,26 @@ export class UmbDefaultCollectionContext<
 		this._configured = true;
 	}
 
+	#configureSelection() {
+		// TODO: We need support a collecion selection configuration here so ex. Pickers can turn on single and multi select and set a selection.
+		this.selection.setSelectable(false);
+		this.selection.setMultiple(false);
+
+		// Observe bulk actions to enable selection when bulk actions are available
+		// Bulk Actions are an integrated part of a Collection so we handle it here instead of a configuration
+		this.observe(
+			this.bulkAction.hasBulkActions,
+			(hasBulkActions) => {
+				// Allow selection if there are bulk actions available
+				if (hasBulkActions) {
+					this.selection.setSelectable(true);
+					this.selection.setMultiple(true);
+				}
+			},
+			'umbCollectionHasBulkActionsObserver',
+		);
+	}
+
 	#checkIfInitialized() {
 		if (this._repository) {
 			this.#initialized = true;
@@ -358,7 +380,7 @@ export class UmbDefaultCollectionContext<
 
 	/**
 	 * Sets the manifest for the collection.
-	 * @param {ManifestCollection} manifest
+	 * @param {ManifestCollection} manifest - The manifest for the collection.
 	 * @memberof UmbCollectionContext
 	 * @deprecated Use set the `.manifest` property instead.
 	 */
@@ -372,11 +394,11 @@ export class UmbDefaultCollectionContext<
 
 	/**
 	 * Returns the manifest for the collection.
-	 * @returns {ManifestCollection}
+	 * @returns {ManifestCollection} - The manifest for the collection.
 	 * @memberof UmbCollectionContext
 	 * @deprecated Use the `.manifest` property instead.
 	 */
-	public getManifest() {
+	public getManifest(): ManifestCollection | undefined {
 		new UmbDeprecation({
 			removeInVersion: '18.0.0',
 			deprecated: 'getManifest',
@@ -389,7 +411,17 @@ export class UmbDefaultCollectionContext<
 	 * Returns the items in the collection.
 	 * @returns {Array<CollectionItemType>} - The items in the collection.
 	 */
-	public getItems() {
+	public getItems(): Array<CollectionItemType> {
 		return this._items.getValue();
 	}
+
+	/**
+	 * Returns the href for a specific collection item.
+	 * Override this method in specialized collection contexts to provide item-specific hrefs.
+	 * @param {CollectionItemType} _item  - The collection item to get the href for.
+	 * @returns {Promise<string | undefined>} - Undefined. The collection item do not link to anything by default.
+	 */
+	public async requestItemHref(_item: CollectionItemType): Promise<string | undefined> {
+		return undefined;
+	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/collection/extensions/types.ts

@@ -1,3 +1,2 @@
 export type * from './collection-action.extension.js';
-export type * from './collection-view.extension.js';
 export type * from './collection.extension.js';