implement usage of modal context

src/Umbraco.Web.UI.Client/public-assets/App_Plugins/package-view.js

@@ -23,7 +23,6 @@ export default class MyPackageViewCustom extends HTMLElement {
 	}
 
 	onClick() {
-		console.log(this.modalHandler);
 		this.modalHandler.close();
 	}
 }

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

@@ -162,7 +162,6 @@ export class UmbModalContextClass<ModalData extends object = object, ModalResult
 
 		if (innerElement) {
 			innerElement.data = this.data;
-			//innerElement.observable = this.#dataObservable;
 			innerElement.modalHandler = this;
 			innerElement.manifest = manifest;
 		}

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

@@ -1,9 +1,10 @@
 import { UmbEntityWorkspaceContextInterface } from './workspace-entity-context.interface.js';
-import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
+import { UmbContextConsumerController, UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbEntityBase } from '@umbraco-cms/backoffice/models';
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
+import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '@umbraco-cms/backoffice/modal';
 
 /*
 
@@ -13,8 +14,11 @@ If so we need to align on a interface that all of these implements. otherwise co
 export abstract class UmbWorkspaceContext<T, EntityType extends UmbEntityBase>
 	implements UmbEntityWorkspaceContextInterface<EntityType>
 {
-	public host: UmbControllerHostElement;
-	public repository: T;
+	public readonly host: UmbControllerHostElement;
+	public readonly repository: T;
+
+	// TODO: We could make a base type for workspace modal data, and use this here: As well as a base for the result, to make sure we always include the unique.
+	public readonly modalContext?: UmbModalContext<{ preset: object }>;
 
 	#isNew = new UmbBooleanState(undefined);
 	isNew = this.#isNew.asObservable();
@@ -23,6 +27,9 @@ export abstract class UmbWorkspaceContext<T, EntityType extends UmbEntityBase>
 		this.host = host;
 		this.repository = repository;
 		new UmbContextProviderController(host, UMB_ENTITY_WORKSPACE_CONTEXT, this);
+		new UmbContextConsumerController(host, UMB_MODAL_CONTEXT_TOKEN, (context) => {
+			(this.modalContext as UmbModalContext) = context;
+		});
 	}
 
 	getIsNew() {
@@ -34,11 +41,16 @@ export abstract class UmbWorkspaceContext<T, EntityType extends UmbEntityBase>
 	}
 
 	protected saveComplete(data: EntityType) {
-		// TODO: Should we make a Event class for this=?
-		this.host.dispatchEvent(new CustomEvent('workspace-submit', { composed: true, bubbles: true, detail: { data } }));
+		if (this.modalContext) {
+			this.submitModal(data);
+		} else {
+			// No need to have UI changing to "not new" if we are in a modal.
+			this.setIsNew(false);
+		}
+	}
 
-		// If it went well, then its not new anymore?.
-		this.setIsNew(false);
+	protected submitModal(data: EntityType) {
+		this.modalContext?.submit(data);
 	}
 
 	abstract getEntityId(): string | undefined; // COnsider if this should go away now that we have getUnique()

src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-modal/workspace-modal.element.ts

@@ -1,36 +1,19 @@
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
 import { css, CSSResultGroup, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { UmbModalContext, UmbWorkspaceData, UmbWorkspaceResult } from '@umbraco-cms/backoffice/modal';
+import { UmbWorkspaceData } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-workspace-modal')
 export class UmbWorkspaceModalElement extends UmbLitElement {
-	@property({ attribute: false })
-	modalHandler?: UmbModalContext;
-
 	@property()
 	data?: UmbWorkspaceData;
 
-	private _reject = (event: CustomEvent) => {
-		event.stopPropagation();
-		this.modalHandler?.reject();
-	};
-
-	private _submit = (event: CustomEvent<UmbWorkspaceResult>) => {
-		event.stopPropagation();
-		this.modalHandler?.submit(event.detail);
-	};
-
 	/**
 	 * TODO: Consider if this binding and events integration is the right for communicating back the modal handler. Or if we should go with some Context API. like a Modal Context API.
 	 *
 	 */
 	render() {
-		return html`<umb-workspace
-			.entityType=${this.data?.entityType}
-			.preset=${this.data?.preset}
-			@workspace-submit=${this._submit}
-			@workspace-reject=${this._reject}></umb-workspace>`;
+		return html`<umb-workspace .entityType=${this.data?.entityType}></umb-workspace>`;
 	}
 
 	static styles: CSSResultGroup = [

src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace.element.ts

@@ -8,14 +8,10 @@ export class UmbWorkspaceElement extends UmbLitElement {
 	@property({ type: String, attribute: 'entity-type' })
 	entityType = '';
 
-	@property({ type: Object, attribute: false })
-	preset?: Record<string, unknown>;
-
 	render() {
 		if (!this.entityType) return nothing;
 		return html`<umb-extension-slot
 			type="workspace"
-			.props=${{ preset: this.preset }}
 			.filter=${(manifest: ManifestWorkspace) => manifest.meta.entityType === this.entityType}></umb-extension-slot>`;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/data-type-workspace.context.ts

@@ -12,8 +12,6 @@ export class UmbDataTypeWorkspaceContext
 	#data = new UmbObjectState<DataTypeResponseModel | undefined>(undefined);
 	data = this.#data.asObservable();
 
-	#preset?: Partial<DataTypeResponseModel>;
-
 	name = this.#data.getObservablePart((data) => data?.name);
 	id = this.#data.getObservablePart((data) => data?.id);
 
@@ -21,10 +19,6 @@ export class UmbDataTypeWorkspaceContext
 		super(host, new UmbDataTypeRepository(host));
 	}
 
-	public setPreset(preset: Partial<DataTypeResponseModel>) {
-		this.#preset = preset;
-	}
-
 	async load(id: string) {
 		const { data } = await this.repository.requestById(id);
 		if (data) {
@@ -35,8 +29,8 @@ export class UmbDataTypeWorkspaceContext
 
 	async createScaffold(parentId: string | null) {
 		let { data } = await this.repository.createScaffold(parentId);
-		if (this.#preset) {
-			data = { ...data, ...this.#preset };
+		if (this.modalContext) {
+			data = { ...data, ...this.modalContext.data.preset };
 		}
 		this.setIsNew(true);
 		// TODO: This is a hack to get around the fact that the data is not typed correctly.