Merge pull request #18194 from umbraco/v15/bugfix/17206

Fix: 17206

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

@@ -54,18 +54,14 @@ export class UmbPropertyEditorUIBlockListElement
 	#contentDataPathTranslator?: UmbBlockElementDataValidationPathTranslator;
 	#settingsDataPathTranslator?: UmbBlockElementDataValidationPathTranslator;
 
-	//#catalogueModal: UmbModalRouteRegistrationController<typeof UMB_BLOCK_CATALOGUE_MODAL.DATA, undefined>;
-
-	private _value: UmbBlockListValueModel | undefined = undefined;
-
 	#lastValue: UmbBlockListValueModel | undefined = undefined;
 
 	@property({ attribute: false })
 	public override set value(value: UmbBlockListValueModel | undefined) {
 		this.#lastValue = value;
 
 		if (!value) {
-			this._value = undefined;
+			super.value = undefined;
 			return;
 		}
 
@@ -74,15 +70,15 @@ export class UmbPropertyEditorUIBlockListElement
 		buildUpValue.contentData ??= [];
 		buildUpValue.settingsData ??= [];
 		buildUpValue.expose ??= [];
-		this._value = buildUpValue as UmbBlockListValueModel;
+		super.value = buildUpValue as UmbBlockListValueModel;
 
-		this.#managerContext.setLayouts(this._value.layout[UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS] ?? []);
-		this.#managerContext.setContents(this._value.contentData);
-		this.#managerContext.setSettings(this._value.settingsData);
-		this.#managerContext.setExposes(this._value.expose);
+		this.#managerContext.setLayouts(super.value.layout[UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS] ?? []);
+		this.#managerContext.setContents(super.value.contentData);
+		this.#managerContext.setSettings(super.value.settingsData);
+		this.#managerContext.setExposes(super.value.expose);
 	}
 	public override get value(): UmbBlockListValueModel | undefined {
-		return this._value;
+		return super.value;
 	}
 
 	@state()
@@ -214,10 +210,10 @@ export class UmbPropertyEditorUIBlockListElement
 				]).pipe(debounceTime(20)),
 				([layouts, contents, settings, exposes]) => {
 					if (layouts.length === 0) {
-						this._value = undefined;
+						super.value = undefined;
 					} else {
-						this._value = {
-							...this._value,
+						super.value = {
+							...super.value,
 							layout: { [UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS]: layouts },
 							contentData: contents,
 							settingsData: settings,
@@ -227,11 +223,11 @@ export class UmbPropertyEditorUIBlockListElement
 
 					// If we don't have a value set from the outside or an internal value, we don't want to set the value.
 					// This is added to prevent the block list from setting an empty value on startup.
-					if (this.#lastValue === undefined && this._value === undefined) {
+					if (this.#lastValue === undefined && super.value === undefined) {
 						return;
 					}
 
-					context.setValue(this._value);
+					context.setValue(super.value);
 				},
 				'motherObserver',
 			);

src/Umbraco.Web.UI.Client/src/packages/core/validation/controllers/validation.controller.ts

@@ -7,20 +7,7 @@ import type { UmbContextProviderController } from '@umbraco-cms/backoffice/conte
 import { type UmbClassInterface, UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
-
-/**
- * Helper method to replace the start of a string with another string.
- * @param path {string}
- * @param startFrom {string}
- * @param startTo {string}
- * @returns {string}
- */
-function ReplaceStartOfString(path: string, startFrom: string, startTo: string): string {
-	if (path.startsWith(startFrom + '.')) {
-		return startTo + path.slice(startFrom.length);
-	}
-	return path;
-}
+import { ReplaceStartOfPath } from '../utils/replace-start-of-path.function.js';
 
 /**
  * Validation Context is the core of Validation.
@@ -143,7 +130,12 @@ export class UmbValidationController extends UmbControllerBase implements UmbVal
 					}
 					this.#parentMessages = msgs;
 					msgs.forEach((msg) => {
-						const path = ReplaceStartOfString(msg.path, this.#baseDataPath!, '$');
+						const path = ReplaceStartOfPath(msg.path, this.#baseDataPath!, '$');
+						if (path === undefined) {
+							throw new Error(
+								'Path was not transformed correctly and can therefor not be transfered to the local validation context messages.',
+							);
+						}
 						// Notice, the local message uses the same key. [NL]
 						this.messages.addMessage(msg.type, path, msg.body, msg.key);
 					});
@@ -164,7 +156,12 @@ export class UmbValidationController extends UmbControllerBase implements UmbVal
 					this.#localMessages = msgs;
 					msgs.forEach((msg) => {
 						// replace this.#baseDataPath (if it starts with it) with $ in the path, so it becomes relative to the parent context
-						const path = ReplaceStartOfString(msg.path, '$', this.#baseDataPath!);
+						const path = ReplaceStartOfPath(msg.path, '$', this.#baseDataPath!);
+						if (path === undefined) {
+							throw new Error(
+								'Path was not transformed correctly and can therefor not be synced with parent messages.',
+							);
+						}
 						// Notice, the parent message uses the same key. [NL]
 						this.#parent!.messages.addMessage(msg.type, path, msg.body, msg.key);
 					});

src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts

@@ -125,11 +125,11 @@ export function UmbFormControlMixin<
 		 */
 		@property({ reflect: false }) // Do not 'reflect' as the attribute value is used as fallback. [NL]
 		get value(): ValueType | DefaultValueType {
+			// For some reason we need to keep this as setters and getters for inherited classes for work properly when they override these methods. [NL]
 			return this.#value;
 		}
 		set value(newValue: ValueType | DefaultValueType) {
 			this.#value = newValue;
-			this._runValidators();
 		}
 
 		// Validation

src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/replace-start-of-path.function.ts

@@ -0,0 +1,14 @@
+/**
+ * Helper method to replace the start of a JSON Path with another JSON Path.
+ * @param path {string}
+ * @param startFrom {string}
+ * @param startTo {string}
+ * @returns {string}
+ */
+export function ReplaceStartOfPath(path: string, startFrom: string, startTo: string): string | undefined {
+	// if the path conitnues with a . or [ aftr startFrom, then replace it with startTo, otherwise if identical then it is also a match. [NL]
+	if (path.startsWith(startFrom + '.') || path === startFrom) {
+		return startTo + path.slice(startFrom.length);
+	}
+	return;
+}

src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/replace-start-of-path.test.ts

@@ -0,0 +1,22 @@
+import { expect } from '@open-wc/testing';
+import { ReplaceStartOfPath } from './replace-start-of-path.function.js';
+
+describe('ReplaceStartOfPath', () => {
+	it('replaces a dot path', () => {
+		const result = ReplaceStartOfPath('$.start.test', '$.start', '$');
+
+		expect(result).to.eq('$.test');
+	});
+
+	it('replaces a array path', () => {
+		const result = ReplaceStartOfPath('$.start[0].test', '$.start[0]', '$');
+
+		expect(result).to.eq('$.test');
+	});
+
+	it('replaces a exact path', () => {
+		const result = ReplaceStartOfPath('$.start.test', '$.start.test', '$');
+
+		expect(result).to.eq('$');
+	});
+});