Fix: Block validation (Refactor of context-api proxy from Clipboard Feature) (#18038)

* set data path

* use prop setting

* move prop

* type

* clean up

* validation messages test

* remove import

* remove import

* refactor property context proxy to property actions scope only

* clean up

* remove proxy

* find block data

* clean up block clipboard entry data

* check if areas exisists

* test with empty area

---------

Co-authored-by: Mads Rasmussen <[email protected]>

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/block/copy/block-grid-to-block-copy-translator.ts

@@ -24,6 +24,7 @@ export class UmbBlockGridToBlockClipboardCopyPropertyValueTranslator
 	}
 
 	#constructGridBlockValue(propertyValue: UmbBlockGridValueModel): UmbGridBlockClipboardEntryValueModel {
+		// TODO: investigate if structured can be remove here.
 		const valueClone = structuredClone(propertyValue);
 
 		const gridBlockValue: UmbGridBlockClipboardEntryValueModel = {
@@ -38,17 +39,38 @@ export class UmbBlockGridToBlockClipboardCopyPropertyValueTranslator
 	#constructBlockValue(propertyValue: UmbBlockGridValueModel): UmbBlockClipboardEntryValueModel {
 		const gridBlockValue = this.#constructGridBlockValue(propertyValue);
 
+		const contentData: typeof gridBlockValue.contentData = [];
+		const settingsData: typeof gridBlockValue.settingsData = [];
+
 		const layout: UmbBlockClipboardEntryValueModel['layout'] = gridBlockValue.layout?.map((gridLayout) => {
+			const contentDataEntry = gridBlockValue.contentData.find(
+				(contentData) => contentData.key === gridLayout.contentKey,
+			);
+			if (!contentDataEntry) {
+				throw new Error('No content data found for layout entry');
+			}
+			contentData.push(contentDataEntry);
+
+			if (gridLayout.settingsKey) {
+				const settingsDataEntry = gridBlockValue.settingsData.find(
+					(settingsData) => settingsData.key === gridLayout.settingsKey,
+				);
+				if (!settingsDataEntry) {
+					throw new Error('No settings data found for layout entry');
+				}
+				settingsData.push(settingsDataEntry);
+			}
+
 			return {
 				contentKey: gridLayout.contentKey,
 				settingsKey: gridLayout.settingsKey,
 			};
 		});
 
 		return {
-			contentData: gridBlockValue.contentData,
 			layout: layout,
-			settingsData: gridBlockValue.settingsData,
+			contentData,
+			settingsData,
 		};
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/grid-block/copy/block-grid-to-grid-block-copy-translator.ts

@@ -1,28 +1,17 @@
 import type { UmbBlockGridValueModel } from '../../../types.js';
 import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../../../property-editors/constants.js';
 import type { UmbGridBlockClipboardEntryValueModel } from '../../types.js';
-import { forEachBlockLayoutEntryOf } from '../../../utils/index.js';
-import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from '../../../context/constants.js';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbClipboardCopyPropertyValueTranslator } from '@umbraco-cms/backoffice/clipboard';
 
 export class UmbBlockGridToGridBlockClipboardCopyPropertyValueTranslator
 	extends UmbControllerBase
 	implements UmbClipboardCopyPropertyValueTranslator<UmbBlockGridValueModel, UmbGridBlockClipboardEntryValueModel>
 {
-	#blockGridManager?: typeof UMB_BLOCK_GRID_MANAGER_CONTEXT.TYPE;
-
 	async translate(propertyValue: UmbBlockGridValueModel) {
 		if (!propertyValue) {
 			throw new Error('Property value is missing.');
 		}
-
-		this.#blockGridManager = await this.getContext(UMB_BLOCK_GRID_MANAGER_CONTEXT);
-
-		return this.#constructGridBlockValue(propertyValue);
-	}
-
-	#constructGridBlockValue(propertyValue: UmbBlockGridValueModel): UmbGridBlockClipboardEntryValueModel {
 		const valueClone = structuredClone(propertyValue);
 
 		const layout = valueClone.layout?.[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS] ?? undefined;
@@ -33,24 +22,9 @@ export class UmbBlockGridToGridBlockClipboardCopyPropertyValueTranslator
 			throw new Error('No layouts found.');
 		}
 
-		layout.forEach((layout) => {
-			// Find sub Blocks and append their data:
-			forEachBlockLayoutEntryOf(layout, async (entry) => {
-				const content = this.#blockGridManager!.getContentOf(entry.contentKey);
-
-				if (!content) {
-					throw new Error('No content found');
-				}
-
-				contentData.push(structuredClone(content));
-
-				if (entry.settingsKey) {
-					const settings = this.#blockGridManager!.getSettingsOf(entry.settingsKey);
-					if (settings) {
-						settingsData.push(structuredClone(settings));
-					}
-				}
-			});
+		layout?.forEach((layoutItem) => {
+			// @ts-expect-error - We are removing the $type property from the layout item
+			delete layoutItem.$type;
 		});
 
 		const gridBlockValue: UmbGridBlockClipboardEntryValueModel = {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts

@@ -20,6 +20,8 @@ import {
 } from '@umbraco-cms/backoffice/extension-api';
 import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbDataPathPropertyValueQuery } from '@umbraco-cms/backoffice/validation';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
 const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest: unknown) => {
 	return [{ manifest }];
@@ -30,6 +32,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	//
 	#blockContext?: typeof UMB_BLOCK_GRID_ENTRY_CONTEXT.TYPE;
 	#workspaceContext?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
+	#variantId: UmbVariantId | undefined;
 	#contentKey?: string;
 	#parentUnique?: string | null;
 	#areaKey?: string | null;
@@ -52,6 +55,9 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	@state()
 	_inlineProperty?: UmbPropertyTypeModel;
 
+	@state()
+	_inlinePropertyDataPath?: string;
+
 	@state()
 	private _ownerContentTypeName?: string;
 
@@ -82,7 +88,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 			UMB_BLOCK_WORKSPACE_ALIAS,
 			apiArgsCreator,
 			(permitted, ctrl) => {
-				const context = ctrl.api as typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
+				const context = ctrl.api as typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE | undefined;
 				if (permitted && context) {
 					// Risky business, cause here we are lucky that it seems to be consumed and set before this is called and there for this is acceptable for now. [NL]
 					if (this.#parentUnique === undefined || this.#areaKey === undefined) {
@@ -101,6 +107,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 						this.#workspaceContext.content.structure.contentTypeProperties,
 						(contentTypeProperties) => {
 							this._inlineProperty = contentTypeProperties[0];
+							this.#generatePropertyDataPath();
 						},
 						'observeProperties',
 					);
@@ -116,9 +123,10 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 					this.observe(
 						context.variantId,
 						async (variantId) => {
+							this.#variantId = variantId;
+							this.#generatePropertyDataPath();
 							if (variantId) {
 								context.content.setup(this, variantId);
-								// TODO: Support segment name?
 								const culture = variantId.culture;
 								if (culture) {
 									const languageRepository = new UmbLanguageItemRepository(this);
@@ -142,6 +150,16 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 		this.#workspaceContext.load(this.#contentKey);
 	}
 
+	#generatePropertyDataPath() {
+		if (!this.#variantId || !this._inlineProperty) return;
+		const property = this._inlineProperty;
+		this._inlinePropertyDataPath = `$.values[${UmbDataPathPropertyValueQuery({
+			alias: property.alias,
+			culture: property.variesByCulture ? this.#variantId!.culture : null,
+			segment: property.variesBySegment ? this.#variantId!.segment : null,
+		})}].value`;
+	}
+
 	#expose = () => {
 		this.#workspaceContext?.expose();
 	};
@@ -189,6 +207,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 			return html`<div id="inside">
 				<umb-property-type-based-property
 					.property=${this._inlineProperty}
+					.dataPath=${this._inlinePropertyDataPath ?? ''}
 					slot="areas"></umb-property-type-based-property>
 				<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
 			</div>`;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts

@@ -1,4 +1,4 @@
-import { closestColumnSpanOption } from '../utils/index.js';
+import { closestColumnSpanOption, forEachBlockLayoutEntryOf } from '../utils/index.js';
 import type { UmbBlockGridValueModel } from '../types.js';
 import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from '../constants.js';
 import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from './block-grid-manager.context-token.js';
@@ -296,6 +296,22 @@ export class UmbBlockGridEntryContext
 		const settingsData = settings ? [structuredClone(settings)] : [];
 		const exposes = expose ? [structuredClone(expose)] : [];
 
+		// Find sub Blocks and append their data:
+		forEachBlockLayoutEntryOf(layout, async (entry) => {
+			const content = this._manager!.getContentOf(entry.contentKey);
+			if (!content) {
+				throw new Error('No content found');
+			}
+			contentData.push(structuredClone(content));
+
+			if (entry.settingsKey) {
+				const settings = this._manager!.getSettingsOf(entry.settingsKey);
+				if (settings) {
+					settingsData.push(structuredClone(settings));
+				}
+			}
+		});
+
 		const propertyValue: UmbBlockGridValueModel = {
 			layout: {
 				[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]: layout ? [structuredClone(layout)] : undefined,

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-value-cloner/property-value-cloner-block-grid.cloner.test.ts

@@ -49,7 +49,6 @@ describe('UmbBlockGridPropertyValueCloner', () => {
 															{
 																contentKey: 'content-3',
 																settingsKey: 'settings-3',
-																areas: [],
 															},
 														],
 													},

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-value-cloner/property-value-cloner-block-grid.cloner.ts

@@ -19,15 +19,17 @@ export class UmbBlockGridPropertyValueCloner extends UmbBlockPropertyValueCloner
 	#cloneLayoutEntry = async (layout: UmbBlockGridLayoutModel): Promise<UmbBlockGridLayoutModel> => {
 		// Clone the specific layout entry:
 		const entryClone = await this._cloneBlock(layout);
-		// And then clone the items of its areas:
-		entryClone.areas = await Promise.all(
-			entryClone.areas.map(async (area) => {
-				return {
-					...area,
-					items: await Promise.all(area.items.map(this.#cloneLayoutEntry)),
-				};
-			}),
-		);
+		if (entryClone.areas) {
+			// And then clone the items of its areas:
+			entryClone.areas = await Promise.all(
+				entryClone.areas.map(async (area) => {
+					return {
+						...area,
+						items: await Promise.all(area.items.map(this.#cloneLayoutEntry)),
+					};
+				}),
+			);
+		}
 		return entryClone;
 	};
 }

src/Umbraco.Web.UI.Client/src/packages/clipboard/property/context/clipboard.property-context-token.ts

@@ -2,5 +2,6 @@ import type { UmbClipboardPropertyContext } from './clipboard.property-context.j
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
 export const UMB_CLIPBOARD_PROPERTY_CONTEXT = new UmbContextToken<UmbClipboardPropertyContext>(
+	'UmbPropertyContext',
 	'UmbClipboardPropertyContext',
 );

src/Umbraco.Web.UI.Client/src/packages/clipboard/property/context/clipboard.property-context.ts

@@ -15,9 +15,8 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import { UMB_PROPERTY_CONTEXT, UmbPropertyValueCloneController } from '@umbraco-cms/backoffice/property';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import type { ManifestPropertyEditorUi, UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
+import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
-import { UMB_CONTEXT_REQUEST_EVENT_TYPE, type UmbContextRequestEvent } from '@umbraco-cms/backoffice/context-api';
 
 /**
  * Clipboard context for managing clipboard entries for property values
@@ -29,30 +28,15 @@ export class UmbClipboardPropertyContext extends UmbContextBase<UmbClipboardProp
 	#init?: Promise<unknown>;
 
 	#modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE;
-	#propertyContext?: typeof UMB_PROPERTY_CONTEXT.TYPE;
-	#hostElement?: Element;
-	#propertyEditorElement?: UmbPropertyEditorUiElement;
 
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_CLIPBOARD_PROPERTY_CONTEXT);
 
-		this.#hostElement = host.getHostElement();
-
 		this.#init = Promise.all([
 			this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (context) => {
 				this.#modalManagerContext = context;
 			}).asPromise(),
-
-			this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
-				this.#propertyContext = context;
-				this.#propertyEditorElement = context.getEditor();
-			}).asPromise(),
 		]);
-
-		this.#hostElement.addEventListener(
-			UMB_CONTEXT_REQUEST_EVENT_TYPE,
-			this.#proxyContextRequest.bind(this) as EventListener,
-		);
 	}
 
 	/**
@@ -143,7 +127,7 @@ export class UmbClipboardPropertyContext extends UmbContextBase<UmbClipboardProp
 
 		const pasteTranslatorManifests = this.getPasteTranslatorManifests(args.propertyEditorUiAlias);
 		const propertyEditorUiManifest = await this.#findPropertyEditorUiManifest(args.propertyEditorUiAlias);
-		const config = this.#propertyContext?.getConfig();
+		const config = (await this.getContext(UMB_PROPERTY_CONTEXT)).getConfig();
 
 		const valueResolver = new UmbClipboardPastePropertyValueTranslatorValueResolver(this);
 
@@ -283,30 +267,6 @@ export class UmbClipboardPropertyContext extends UmbContextBase<UmbClipboardProp
 
 		return supportedManifests.length > 0;
 	}
-
-	#proxyContextRequest(event: UmbContextRequestEvent) {
-		const path = event.composedPath();
-
-		// Ignore events from the property editor element so we don't end up in a loop when proxying the requests.
-		if (path.includes(this.#propertyEditorElement as EventTarget)) {
-			return;
-		}
-
-		// Proxy all context requests to the property editor element so the clipboard actions, translators and filters
-		// can consume contexts from property editor root element.
-		if (this.#propertyEditorElement) {
-			event.stopImmediatePropagation();
-			this.#propertyEditorElement.dispatchEvent(event.clone());
-		}
-	}
-
-	override destroy(): void {
-		super.destroy();
-		this.#hostElement?.removeEventListener(
-			UMB_CONTEXT_REQUEST_EVENT_TYPE,
-			this.#proxyContextRequest.bind(this) as EventListener,
-		);
-	}
 }
 
 export { UmbClipboardPropertyContext as api };

src/Umbraco.Web.UI.Client/src/packages/core/validation/context/validation-messages.manager.test.ts

@@ -0,0 +1,34 @@
+import { expect } from '@open-wc/testing';
+import { UmbValidationMessagesManager } from './validation-messages.manager';
+import { UmbObserver } from '@umbraco-cms/backoffice/observable-api';
+
+describe('UmbValidationMessagesManager', () => {
+	let messages: UmbValidationMessagesManager;
+
+	beforeEach(() => {
+		messages = new UmbValidationMessagesManager();
+	});
+
+	it('knows if it has any messages', () => {
+		messages.addMessage('server', '$.test', 'test');
+
+		expect(messages.getHasAnyMessages()).to.be.true;
+	});
+
+	it('knows if it has any messages of a certain path or descending path', () => {
+		messages.addMessage('server', `$.values[?(@.id == '123')].value`, 'test');
+
+		expect(messages.getHasMessagesOfPathAndDescendant(`$.values[?(@.id == '123')]`)).to.be.true;
+	});
+
+	it('enables you to observe for path or descending path messages', async () => {
+		messages.addMessage('server', `$.values[?(@.id == '123')].value`, 'test');
+
+		const observeable = messages.hasMessagesOfPathAndDescendant(`$.values[?(@.id == '123')]`);
+
+		const observer = new UmbObserver(observeable);
+		const result = await observer.asPromise();
+
+		expect(result).to.be.true;
+	});
+});

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

@@ -18,7 +18,6 @@ export abstract class UmbSubmittableWorkspaceContextBase<WorkspaceDataModelType>
 	// 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 (instead of the object type)
 	public readonly modalContext?: UmbModalContext<{ preset: object }>;
 
-	//public readonly validation = new UmbValidationContext(this);
 	#validationContexts: Array<UmbValidationController> = [];
 
 	/**