align with modal

src/Umbraco.Web.UI.Client/src/packages/core/collection/action/create/collection-create-action.element.ts

@@ -1,7 +1,12 @@
-import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
+import type { ManifestEntityCreateOptionAction } from '@umbraco-cms/backoffice/entity-create-option-action';
+
+type ManifestType = ManifestEntityCreateOptionAction;
 
 const elementName = 'umb-collection-create-action-button';
 @customElement(elementName)
@@ -13,9 +18,13 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
 	private _multipleOptions = false;
 
 	@state()
-	private _apiControllers: Array<any> = [];
+	private _apiControllers: Array<UmbExtensionApiInitializer<ManifestType>> = [];
+
+	@state()
+	_hrefList: Array<string | undefined> = [];
 
 	#createLabel = this.localize.term('general_create');
+	#entityContext?: typeof UMB_ENTITY_CONTEXT.TYPE;
 
 	#onPopoverToggle(event: PointerEvent) {
 		// TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
@@ -24,27 +33,61 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
 		this._popoverOpen = event.newState === 'open';
 	}
 
-	async #onClick(event: Event, controller: any) {
+	async #onClick(event: Event, controller: UmbExtensionApiInitializer<ManifestType>, href?: string) {
 		event.stopPropagation();
+
+		// skip if href is defined
+		if (href) {
+			return;
+		}
+
+		if (!controller.api) throw new Error('No API found');
 		await controller.api.execute();
 	}
 
 	constructor() {
 		super();
 
+		this.consumeContext(UMB_ENTITY_CONTEXT, (context) => {
+			this.#entityContext = context;
+			this.#initApi();
+		});
+	}
+
+	#initApi() {
+		if (!this.#entityContext) return;
+
+		const entityType = this.#entityContext.getEntityType();
+		if (!entityType) throw new Error('No entityType found');
+
+		const unique = this.#entityContext.getUnique();
+		if (unique === undefined) throw new Error('No unique found');
+
 		new UmbExtensionsApiInitializer(
 			this,
 			umbExtensionsRegistry,
 			'entityCreateOptionAction',
-			[],
-			undefined,
-			(controllers) => {
-				this._apiControllers = controllers;
+			(manifest: ManifestType) => {
+				return [{ entityType, unique, meta: manifest.meta }];
+			},
+			(manifest: ManifestType) => manifest.forEntityTypes.includes(entityType),
+			async (controllers) => {
+				this._apiControllers = controllers as unknown as Array<UmbExtensionApiInitializer<ManifestType>>;
 				this._multipleOptions = controllers.length > 1;
+				const hrefPromises = this._apiControllers.map((controller) => controller.api?.getHref());
+				this._hrefList = await Promise.all(hrefPromises);
 			},
 		);
 	}
 
+	#getTarget(href?: string) {
+		if (href && href.startsWith('http')) {
+			return '_blank';
+		}
+
+		return '_self';
+	}
+
 	override render() {
 		return this._multipleOptions ? this.#renderMultiOptionAction() : this.#renderSingleOptionAction();
 	}
@@ -79,19 +122,26 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
 				@toggle=${this.#onPopoverToggle}>
 				<umb-popover-layout>
 					<uui-scroll-container>
-						${this._apiControllers.map((controller) => this.#renderMenuItem(controller))}
+						${this._apiControllers.map((controller, index) => this.#renderMenuItem(controller, index))}
 					</uui-scroll-container>
 				</umb-popover-layout>
 			</uui-popover-container>
 		`;
 	}
 
-	#renderMenuItem(controller: any) {
+	#renderMenuItem(controller: UmbExtensionApiInitializer<ManifestType>, index: number) {
 		const manifest = controller.manifest;
-		const label = manifest.meta.label ? this.localize.string(manifest.meta.label) : manifest.meta.name;
+		if (!manifest) throw new Error('No manifest found');
+
+		const label = manifest.meta.label ? this.localize.string(manifest.meta.label) : manifest.name;
+		const href = this._hrefList[index];
 
 		return html`
-			<uui-menu-item label=${label} @click=${(event: Event) => this.#onClick(event, controller)}>
+			<uui-menu-item
+				label=${label}
+				@click=${(event: Event) => this.#onClick(event, controller, href)}
+				href=${ifDefined(href)}
+				target=${this.#getTarget(href)}>
 				<umb-icon slot="icon" .name=${manifest.meta.icon}></umb-icon>
 			</uui-menu-item>
 		`;