compositionRepositoryAlias

src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts

@@ -4,11 +4,13 @@ import type {
 } from './composition-picker-modal.token.js';
 import { css, html, customElement, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import {
+import type {
 	UmbDocumentTypeCompositionRepository,
-	type UmbDocumentTypeCompositionCompatibleModel,
-	type UmbDocumentTypeCompositionReferenceModel,
+	UmbDocumentTypeCompositionCompatibleModel,
+	UmbDocumentTypeCompositionReferenceModel,
 } from '@umbraco-cms/backoffice/document-type';
+import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 
 interface CompatibleCompositions {
 	path: string;
@@ -20,9 +22,10 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 	UmbCompositionPickerModalData,
 	UmbCompositionPickerModalValue
 > {
-	// TODO: Loosen this from begin specific to Document Types:
-	#compositionRepository = new UmbDocumentTypeCompositionRepository(this);
+	// TODO: Loosen this from begin specific to Document Types, so we can have a general interface for composition repositories. [NL]
+	#compositionRepository?: UmbDocumentTypeCompositionRepository;
 	#unique?: string;
+	#init?: Promise<void>;
 
 	@state()
 	private _references: Array<UmbDocumentTypeCompositionReferenceModel> = [];
@@ -32,10 +35,18 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 
 	@state()
 	private _selection: Array<string> = [];
-
 	connectedCallback() {
 		super.connectedCallback();
 
+		const alias = this.data?.compositionRepositoryAlias;
+		if (alias) {
+			this.#init = new UmbExtensionApiInitializer(this, umbExtensionsRegistry, alias, [this], (permitted, ctrl) => {
+				this.#compositionRepository = permitted ? (ctrl.api as UmbDocumentTypeCompositionRepository) : undefined;
+			}).asPromise();
+		} else {
+			throw new Error('No composition repository alias provided');
+		}
+
 		this._selection = this.data?.selection ?? [];
 		this.modalContext?.setValue({ selection: this._selection });
 
@@ -43,8 +54,9 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 	}
 
 	async #requestReference() {
+		await this.#init;
 		this.#unique = this.data?.unique;
-		if (!this.#unique) return;
+		if (!this.#unique || !this.#compositionRepository) return;
 
 		const { data } = await this.#compositionRepository.getReferences(this.#unique);
 
@@ -56,7 +68,8 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 	}
 
 	async #requestAvailableCompositions() {
-		if (!this.#unique) return;
+		await this.#init;
+		if (!this.#unique || !this.#compositionRepository) return;
 
 		const isElement = this.data?.isElement;
 		const currentPropertyAliases = this.data?.currentPropertyAliases;
@@ -77,6 +90,16 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 		}));
 	}
 
+	#onSelectionAdd(unique: string) {
+		this._selection = [...this._selection, unique];
+		this.modalContext?.setValue({ selection: this._selection });
+	}
+
+	#onSelectionRemove(unique: string) {
+		this._selection = this._selection.filter((s) => s !== unique);
+		this.modalContext?.setValue({ selection: this._selection });
+	}
+
 	render() {
 		return html`
 			<umb-body-layout headline="${this.localize.term('contentTypeEditor_compositions')}">
@@ -147,16 +170,6 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 		}
 	}
 
-	#onSelectionAdd(unique: string) {
-		this._selection = [...this._selection, unique];
-		this.modalContext?.setValue({ selection: this._selection });
-	}
-
-	#onSelectionRemove(unique: string) {
-		this._selection = this._selection.filter((s) => s !== unique);
-		this.modalContext?.setValue({ selection: this._selection });
-	}
-
 	#renderCompositionsItems(compositionsList: Array<UmbDocumentTypeCompositionCompatibleModel>) {
 		return repeat(
 			compositionsList,

src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/composition-picker-modal.token.ts

@@ -2,6 +2,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 // TODO: Stop sending the initial selection as part of data [NL], it should just be in the value:
 export interface UmbCompositionPickerModalData {
+	compositionRepositoryAlias: string;
 	selection: Array<string>;
 	unique: string;
 	//Do we really need to send this to the server - Why isn't unique enough?

src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-tab.element.ts

@@ -135,7 +135,6 @@ export class UmbContentTypeDesignEditorTabElement extends UmbLitElement {
 
 	render() {
 		return html`
-		<h1>${this.containerId}</h1>
 		${
 			this._sortModeActive
 				? html`<uui-button
@@ -159,7 +158,6 @@ export class UmbContentTypeDesignEditorTabElement extends UmbLitElement {
 						this._groups,
 						(group) => group.id + '_' + group.name + '_' + (group.parent?.id ?? ''),
 						(group) => html`
-							<b>${group.id}</b>
 							<umb-content-type-design-editor-group
 								class="container-handle"
 								?sort-mode-active=${this._sortModeActive}

src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts

@@ -15,7 +15,10 @@ import {
 	type PropertyTypeContainerModelBaseModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
-import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
+import type {
+	ManifestWorkspaceViewContentTypeDesignEditorKind,
+	UmbWorkspaceViewElement,
+} from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbConfirmModalData } from '@umbraco-cms/backoffice/modal';
 import { UMB_MODAL_MANAGER_CONTEXT, umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -75,8 +78,14 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 	#workspaceContext?: (typeof UMB_CONTENT_TYPE_WORKSPACE_CONTEXT)['TYPE'];
 	#designContext = new UmbContentTypeDesignEditorContext(this);
 
+	set manifest(value: ManifestWorkspaceViewContentTypeDesignEditorKind) {
+		this._compositionRepositoryAlias = value.meta.compositionRepositoryAlias;
+	}
+
 	private _tabsStructureHelper = new UmbContentTypeContainerStructureHelper<UmbContentTypeModel>(this);
 
+	@state()
+	_compositionRepositoryAlias?: string;
 	//private _hasRootProperties = false;
 
 	@state()
@@ -306,7 +315,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 	}
 
 	async #openCompositionModal() {
-		if (!this.#workspaceContext) return;
+		if (!this.#workspaceContext || !this._compositionRepositoryAlias) return;
 
 		const unique = this.#workspaceContext.getUnique();
 		if (!unique) {
@@ -319,6 +328,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 		}
 
 		const compositionConfiguration = {
+			compositionRepositoryAlias: this._compositionRepositoryAlias,
 			unique: unique,
 			// Here we use the loaded content types to declare what we already inherit. That puts a pressure on cleaning up, but thats a good thing. [NL]
 			selection: contentTypes.map((contentType) => contentType.unique).filter((id) => id !== unique),
@@ -376,14 +386,16 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 			: this.localize.term('general_reorder');
 
 		return html`<div class="tab-actions">
-			<uui-button
-				look="outline"
-				label=${this.localize.term('contentTypeEditor_compositions')}
-				compact
-				@click=${this.#openCompositionModal}>
-				<uui-icon name="icon-merge"></uui-icon>
-				${this.localize.term('contentTypeEditor_compositions')}
-			</uui-button>
+			${this._compositionRepositoryAlias
+				? html`<uui-button
+						look="outline"
+						label=${this.localize.term('contentTypeEditor_compositions')}
+						compact
+						@click=${this.#openCompositionModal}>
+						<uui-icon name="icon-merge"></uui-icon>
+						${this.localize.term('contentTypeEditor_compositions')}
+					</uui-button>`
+				: ''}
 			<uui-button look="outline" label=${sortButtonText} compact @click=${this.#toggleSortMode}>
 				<uui-icon name="icon-navigation"></uui-icon>
 				${sortButtonText}

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/workspace-view.model.ts

@@ -18,4 +18,9 @@ export interface MetaWorkspaceView extends MetaManifestWithView {}
 export interface ManifestWorkspaceViewContentTypeDesignEditorKind extends ManifestWorkspaceView {
 	type: 'workspaceView';
 	kind: 'contentTypeDesignEditor';
+	meta: MetaWorkspaceViewContentTypeDesignEditorKind;
+}
+
+export interface MetaWorkspaceViewContentTypeDesignEditorKind extends MetaWorkspaceView {
+	compositionRepositoryAlias?: string;
 }

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/manifests.ts

@@ -1,3 +1,4 @@
+import { UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS } from '../repository/composition/index.js';
 import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 import type {
 	ManifestWorkspace,
@@ -27,6 +28,7 @@ const workspaceViews: Array<ManifestWorkspaceViews> = [
 			label: 'Design',
 			pathname: 'design',
 			icon: 'icon-document-dashed-line',
+			compositionRepositoryAlias: UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS,
 		},
 		conditions: [
 			{