Segments: The experience of working with Segments and Segmented Blocks (#20358)

* initial notes

* flat mapper impl

* first tests passed

* return incoming value to ensure it does not result in an error from an extension

* define the manifest type on UmbPropertyValueResolver

* finish property value flat-mapper

* make sure also to map values with no extension

* clean up test

* export controller

* fix block editor property resolver

* fix mapper types

* ensureVariantsData method

* ensure Block List only updates if it has an update

* ensure varians across for shared across segment and shared across cultures

* fix variant selector hints for segments

* fix hints in variant selector for segmented variants

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/assets/lang/da.ts

@@ -2473,8 +2473,7 @@ export default {
 		confirmDeleteBlockTypeNotice:
 			'Indholdet vil stadigt eksistere, men redigering af dette indhold vil ikke\n      være muligt. Indholdet vil blive vist som ikke understøttet indhold.\n    ',
 		confirmDeleteBlockGroupTitle: 'Slet gruppe?',
-		confirmDeleteBlockGroupMessage:
-			'Er du sikker på at du vil slette gruppen <strong>%0%</strong>?',
+		confirmDeleteBlockGroupMessage: 'Er du sikker på at du vil slette gruppen <strong>%0%</strong>?',
 		confirmDeleteBlockGroupNotice:
 			'Indholdet af gruppens blokke vil stadigt eksistere, men redigering af dette indhold vil ikke\n      være muligt. Indholdet vil blive vist som ikke understøttet indhold.\n    ',
 		blockConfigurationOverlayTitle: "Konfiguration af '%0%'",

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -2605,8 +2605,7 @@ export default {
 		confirmDeleteBlockTypeNotice:
 			'The content of this block will still be present, editing of this content will no longer be available and will be shown as unsupported content.',
 		confirmDeleteBlockGroupTitle: 'Delete group?',
-		confirmDeleteBlockGroupMessage:
-			'Are you sure you want to delete group <strong>%0%</strong>?',
+		confirmDeleteBlockGroupMessage: 'Are you sure you want to delete group <strong>%0%</strong>?',
 		confirmDeleteBlockGroupNotice:
 			'The content of these Blocks will still be present, editing of this content will no longer be available and will be shown as unsupported content.',
 		blockConfigurationOverlayTitle: "Configuration of '%0%'",

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts

@@ -73,9 +73,7 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 		alias: 'Umb.PropertyValueResolver.BlockGrid',
 		name: 'Block Value Resolver',
 		api: UmbStandardBlockValueResolver,
-		meta: {
-			editorAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
-		},
+		forEditorAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
 	},
 	blockGridSchemaManifest,
 	...propertyActionManifests,

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

@@ -17,7 +17,7 @@ import type {
 	UmbPropertyEditorUiElement,
 	UmbPropertyEditorConfigCollection,
 } from '@umbraco-cms/backoffice/property-editor';
-import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
+import { jsonStringComparison, observeMultiple } from '@umbraco-cms/backoffice/observable-api';
 import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { UmbFormControlMixin, UmbValidationContext } from '@umbraco-cms/backoffice/validation';
 import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
@@ -181,15 +181,22 @@ export class UmbPropertyEditorUIBlockGridElement
 				]).pipe(debounceTime(20)),
 				([layouts, contents, settings, exposes]) => {
 					if (layouts.length === 0) {
+						if (this.value === undefined) {
+							return;
+						}
 						super.value = undefined;
 					} else {
-						super.value = {
+						const newValue = {
 							...super.value,
 							layout: { [UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]: layouts },
 							contentData: contents,
 							settingsData: settings,
 							expose: exposes,
 						};
+						if (jsonStringComparison(this.value, newValue)) {
+							return;
+						}
+						super.value = newValue;
 					}
 
 					// If we don't have a value set from the outside or an internal value, we don't want to set the value.

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

@@ -51,9 +51,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		alias: 'Umb.PropertyValueResolver.BlockList',
 		name: 'Block Value Resolver',
 		api: UmbStandardBlockValueResolver,
-		meta: {
-			editorAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
-		},
+		forEditorAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
 	},
 	blockListSchemaManifest,
 ];

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

@@ -25,7 +25,7 @@ import {
 	UmbFormControlMixin,
 	UmbValidationContext,
 } from '@umbraco-cms/backoffice/validation';
-import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
+import { jsonStringComparison, observeMultiple } from '@umbraco-cms/backoffice/observable-api';
 import { debounceTime } from '@umbraco-cms/backoffice/external/rxjs';
 import { UMB_CONTENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content';
 
@@ -339,15 +339,22 @@ export class UmbPropertyEditorUIBlockListElement
 			]).pipe(debounceTime(20)),
 			([layouts, contents, settings, exposes]) => {
 				if (layouts.length === 0) {
+					if (this.value === undefined) {
+						return;
+					}
 					super.value = undefined;
 				} else {
-					super.value = {
+					const newValue = {
 						...super.value,
 						layout: { [UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS]: layouts },
 						contentData: contents,
 						settingsData: settings,
 						expose: exposes,
 					};
+					if (jsonStringComparison(this.value, newValue)) {
+						return;
+					}
+					super.value = newValue;
 				}
 
 				// If we don't have a value set from the outside or an internal value, we don't want to set the value.

src/Umbraco.Web.UI.Client/src/packages/content/content/controller/merge-content-variant-data.controller.ts

@@ -135,7 +135,7 @@ export class UmbMergeContentVariantDataController extends UmbControllerBase {
 			// If api is not to be found, then we can continue using the draftValue as is.
 			return draftValue;
 		}
-		(api as any).manifest = manifest;
+		api.manifest = manifest;
 
 		let newValue = draftValue;
 

src/Umbraco.Web.UI.Client/src/packages/content/content/manager/content-data-manager.ts

@@ -53,6 +53,14 @@ export class UmbContentWorkspaceDataManager<
 		this.updateVariantData(variantId);
 	}
 
+	ensureVariantsData(variantIds: UmbVariantId[]) {
+		this.initiatePropertyValueChange();
+		for (const variantId of variantIds) {
+			this.updateVariantData(variantId);
+		}
+		this.finishPropertyValueChange();
+	}
+
 	updateVariantData(variantId: UmbVariantId, update?: Partial<ModelVariantType>) {
 		if (!this.#variantScaffold) throw new Error('Variant scaffold data is missing');
 

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/content-detail-workspace-base.ts

@@ -28,6 +28,7 @@ import {
 } from '@umbraco-cms/backoffice/entity-action';
 import { UmbLanguageCollectionRepository } from '@umbraco-cms/backoffice/language';
 import {
+	UmbPropertyValueFlatMapperController,
 	UmbPropertyValuePresetVariantBuilderController,
 	UmbVariantPropertyGuardManager,
 } from '@umbraco-cms/backoffice/property';
@@ -287,7 +288,7 @@ export abstract class UmbContentDetailWorkspaceContextBase<
 				if (variesByCulture && variesBySegment) {
 					return languages.flatMap((language) => {
 						const culture = {
-							variant: variants.find((x) => x.culture === language.unique),
+							variant: variants.find((x) => x.culture === language.unique && x.segment === null),
 							language,
 							culture: language.unique,
 							segment: null,
@@ -496,10 +497,7 @@ export abstract class UmbContentDetailWorkspaceContextBase<
 	 * @memberof UmbContentDetailWorkspaceContextBase
 	 */
 	public setName(name: string, variantId?: UmbVariantId): void {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		// TODO: fix type error
-		this._data.updateVariantData(variantId ?? UmbVariantId.CreateInvariant(), { name });
+		this._data.updateVariantData(variantId ?? UmbVariantId.CreateInvariant(), { name } as Partial<VariantModelType>);
 	}
 
 	/**
@@ -661,36 +659,65 @@ export abstract class UmbContentDetailWorkspaceContextBase<
 
 		const currentData = this.getData();
 		if (currentData) {
-			const values = appendToFrozenArray(
+			const values: DetailModelType['values'] = appendToFrozenArray(
 				currentData.values ?? [],
 				entry,
 				(x) => x.alias === alias && variantId!.compare(x),
 			);
 
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			// TODO: fix type error
-			this._data.updateCurrent({ values });
-
-			/**
-			 * Handling of Not-Culture but Segment variant properties: [NL]
-			 * We need to ensure variant-entries across all culture variants for the given segment variant, when er property is configured to vary by segment but not culture.
-			 * This is the only different case, in all other cases its fine to just target the given variant.
-			 */
-			if (this.getVariesByCulture() && property.variesByCulture === false && property.variesBySegment === true) {
+			this.#ensureVariantsExistsForProperty(variantId, entry);
+
+			this._data.updateCurrent({ values } as Partial<DetailModelType>);
+		}
+
+		this.finishPropertyValueChange();
+	}
+
+	async #ensureVariantsExistsForProperty(variantId: UmbVariantId, entry: UmbElementValueModel) {
+		// TODO: Implement queueing of these operations to ensure this does not execute too often. [NL]
+
+		const cultureOptions = await firstValueFrom(this.variantOptions);
+		let valueVariantIds: Array<UmbVariantId> = [];
+
+		// Find inner values to determine if any of this holds variants that needs to be created.
+		if (variantId.isInvariant() && entry.value) {
+			valueVariantIds = await new UmbPropertyValueFlatMapperController(this).flatMap(entry, (property) => {
+				return UmbVariantId.CreateFromPartial(property);
+			});
+		}
+
+		valueVariantIds.push(variantId);
+		/**
+		 * Handling of Not-Culture but Segment variant properties: [NL]
+		 * We need to ensure variant-entries across all culture variants for the given segment variant, when er property is configured to vary by segment but not culture.
+		 * This is the only different case, in all other cases its fine to just target the given variant.
+		 */
+		const variantOptionsToCheck: Array<UmbVariantId> = [];
+		for (const variant of valueVariantIds) {
+			// If a non-culture but segmented value, then spread across all cultures for the given segment:
+			if (this.getVariesByCulture() && variant.culture === null && variant.segment !== null) {
 				// get all culture options:
-				const cultureOptions = await firstValueFrom(this.variantOptions);
 				for (const cultureOption of cultureOptions) {
-					if (cultureOption.segment === variantId.segment) {
-						this._data.ensureVariantData(UmbVariantId.Create(cultureOption));
+					if (cultureOption.segment === variant.segment) {
+						variantOptionsToCheck.push(UmbVariantId.Create(cultureOption));
 					}
 				}
-			} else {
-				// otherwise we know the property variant-id will be matching with a variant:
-				this._data.ensureVariantData(variantId);
+				// If a non-segmented but culture-variant value, then spread across all segments for the given culture:
+			}
+			if (this.getVariesBySegment() && variant.culture !== null && variant.segment === null) {
+				// get all culture options:
+				for (const cultureOption of cultureOptions) {
+					if (cultureOption.culture === variant.culture) {
+						variantOptionsToCheck.push(UmbVariantId.Create(cultureOption));
+					}
+				}
+			} else if (cultureOptions.some((x) => variant.compare(x))) {
+				// otherwise we can parse the variant-id on:
+				variantOptionsToCheck.push(variant);
 			}
 		}
-		this.finishPropertyValueChange();
+
+		this._data.ensureVariantsData(variantOptionsToCheck);
 	}
 
 	public initiatePropertyValueChange() {

src/Umbraco.Web.UI.Client/src/packages/core/components/badge/badge.element.ts

@@ -47,13 +47,20 @@ export class UmbBadgeElement extends LitElement {
 		css`
 			:host {
 				position: absolute;
-				anchor-name: --umb-badge-anchor;
 				/** because inset has no effect on uui-badge in this case, we then apply it here: */
 				inset: var(--uui-badge-inset, -8px -8px auto auto);
 			}
 
+			:host([inline-mode]) {
+				position: relative;
+				margin-left: 12px;
+			}
+
 			@supports (position-anchor: --my-name) {
-				uui-badge {
+				:host(:not([inline-mode])) {
+					anchor-name: --umb-badge-anchor;
+				}
+				:host(:not([inline-mode])) uui-badge {
 					position: fixed;
 					position-anchor: --umb-badge-anchor;
 					z-index: 1;