Chore: Block Manager + Variant ID Polishing (#18321)

* use observablePart()

* methods for variant ID

* move into a gotManager method

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

@@ -92,89 +92,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 
 		this.#retrieveBlockManager = this.consumeContext(UMB_BLOCK_MANAGER_CONTEXT, (manager) => {
 			this.#blockManager = manager;
-
+			this.#gotManager();
-			this.observe(
-				manager.liveEditingMode,
-				(liveEditingMode) => {
-					this.#liveEditingMode = liveEditingMode ?? false;
-				},
-				'observeLiveEditingMode',
-			);
-
-			this.observe(
-				observeMultiple([
-					manager.variantId,
-					this.content.structure.variesByCulture,
-					this.content.structure.variesBySegment,
-				]),
-				([variantId, variesByCulture, variesBySegment]) => {
-					if (!variantId || variesByCulture === undefined || variesBySegment === undefined) return;
-					if (!variesBySegment && !variesByCulture) {
-						variantId = UmbVariantId.CreateInvariant();
-					} else if (!variesBySegment) {
-						variantId = variantId.toSegmentInvariant();
-					} else if (!variesByCulture) {
-						variantId = variantId.toCultureInvariant();
-					}
-
-					this.#variantId.setValue(variantId);
-				},
-				'observeVariantIds',
-			);
-
-			this.removeUmbControllerByAlias('observeHasExpose');
-			this.observe(
-				observeMultiple([this.contentKey, this.variantId]),
-				([contentKey, variantId]) => {
-					if (!contentKey || !variantId) return;
-
-					this.observe(
-						manager.hasExposeOf(contentKey, variantId),
-						(exposed) => {
-							this.#exposed.setValue(exposed);
-						},
-						'observeHasExpose',
-					);
-				},
-				'observeContentKeyAndVariantId',
-			);
-
-			this.observe(
-				observeMultiple([manager.readOnlyState.isReadOnly, this.variantId]),
-				([isReadOnly, variantId]) => {
-					const unique = 'UMB_BLOCK_MANAGER_CONTEXT';
-					if (variantId === undefined) return;
-
-					if (isReadOnly) {
-						const state = {
-							unique,
-							variantId,
-							message: '',
-						};
-
-						this.readOnlyState?.addState(state);
-					} else {
-						this.readOnlyState?.removeState(unique);
-					}
-				},
-				'observeIsReadOnly',
-			);
-
-			this.observe(
-				this.content.contentTypeId,
-				(contentTypeId) => {
-					this.observe(
-						contentTypeId ? manager.blockTypeOf(contentTypeId) : undefined,
-						(blockType) => {
-							if (blockType?.editorSize) {
-								this.setEditorSize(blockType.editorSize);
-							}
-						},
-						'observeBlockType',
-					);
-				},
-				'observeContentTypeId',
-			);
 		});
 
 		this.#retrieveBlockEntries = this.consumeContext(UMB_BLOCK_ENTRIES_CONTEXT, (context) => {
@@ -216,6 +134,95 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 		]);
 	}
 
+	#gotManager() {
+		if (!this.#blockManager) return;
+		const manager = this.#blockManager;
+
+		this.observe(
+			manager.liveEditingMode,
+			(liveEditingMode) => {
+				this.#liveEditingMode = liveEditingMode ?? false;
+			},
+			'observeLiveEditingMode',
+		);
+
+		this.observe(
+			observeMultiple([
+				manager.variantId,
+				this.content.structure.variesByCulture,
+				this.content.structure.variesBySegment,
+			]),
+			([variantId, variesByCulture, variesBySegment]) => {
+				if (!variantId || variesByCulture === undefined || variesBySegment === undefined) return;
+
+				if (!variesBySegment && !variesByCulture) {
+					variantId = UmbVariantId.CreateInvariant();
+				} else if (!variesBySegment) {
+					variantId = variantId.toSegmentInvariant();
+				} else if (!variesByCulture) {
+					variantId = variantId.toCultureInvariant();
+				}
+
+				this.#variantId.setValue(variantId);
+			},
+			'observeVariantIds',
+		);
+
+		this.removeUmbControllerByAlias('observeHasExpose');
+		this.observe(
+			observeMultiple([this.contentKey, this.variantId]),
+			([contentKey, variantId]) => {
+				if (!contentKey || !variantId) return;
+
+				this.observe(
+					manager.hasExposeOf(contentKey, variantId),
+					(exposed) => {
+						this.#exposed.setValue(exposed);
+					},
+					'observeHasExpose',
+				);
+			},
+			'observeContentKeyAndVariantId',
+		);
+
+		this.observe(
+			observeMultiple([manager.readOnlyState.isReadOnly, this.variantId]),
+			([isReadOnly, variantId]) => {
+				const unique = 'UMB_BLOCK_MANAGER_CONTEXT';
+				if (variantId === undefined) return;
+
+				if (isReadOnly) {
+					const state = {
+						unique,
+						variantId,
+						message: '',
+					};
+
+					this.readOnlyState?.addState(state);
+				} else {
+					this.readOnlyState?.removeState(unique);
+				}
+			},
+			'observeIsReadOnly',
+		);
+
+		this.observe(
+			this.content.contentTypeId,
+			(contentTypeId) => {
+				this.observe(
+					contentTypeId ? manager.blockTypeOf(contentTypeId) : undefined,
+					(blockType) => {
+						if (blockType?.editorSize) {
+							this.setEditorSize(blockType.editorSize);
+						}
+					},
+					'observeBlockType',
+				);
+			},
+			'observeContentTypeId',
+		);
+	}
+
 	setEditorSize(editorSize: UUIModalSidebarSize) {
 		this.#modalContext?.setModalSize(editorSize);
 	}

src/Umbraco.Web.UI.Client/src/packages/core/variant/variant-id.class.ts

@@ -1,3 +1,5 @@
+import { UmbDeprecation } from '../utils/index.js';
+
 export type UmbObjectWithVariantProperties = {
 	culture: string | null;
 	segment: string | null;
@@ -5,9 +7,16 @@ export type UmbObjectWithVariantProperties = {
 
 /**
  *
- * @param variant
+ * @param {UmbObjectWithVariantProperties} variant - An object with variant specifying properties to convert to a string.
+ * @returns {string} A string representation of the variant properties.
+ * @deprecated Use UmbVariantId to make this conversion. Will ve removed in v.17
  */
 export function variantPropertiesObjectToString(variant: UmbObjectWithVariantProperties): string {
+	new UmbDeprecation({
+		deprecated: 'Method `variantPropertiesObjectToString` is deprecated',
+		removeInVersion: '17',
+		solution: 'Use UmbVariantId to make this conversion',
+	}).warn();
 	// Currently a direct copy of the toString method of variantId.
 	return (variant.culture || UMB_INVARIANT_CULTURE) + (variant.segment ? `_${variant.segment}` : '');
 }
@@ -79,6 +88,10 @@ export class UmbVariantId {
 		return this.culture === null && this.segment === null;
 	}
 
+	public clone(): UmbVariantId {
+		return new UmbVariantId(null, this.segment);
+	}
+
 	public toObject(): UmbObjectWithVariantProperties {
 		return { culture: this.culture, segment: this.segment };
 	}
@@ -89,6 +102,14 @@ export class UmbVariantId {
 	public toCultureInvariant(): UmbVariantId {
 		return Object.freeze(new UmbVariantId(null, this.segment));
 	}
+
+	public toCulture(culture: string | null): UmbVariantId {
+		return Object.freeze(new UmbVariantId(culture, this.segment));
+	}
+	public toSegment(segment: string | null): UmbVariantId {
+		return Object.freeze(new UmbVariantId(this.culture, segment));
+	}
+
 	public toVariant(varyByCulture?: boolean, varyBySegment?: boolean): UmbVariantId {
 		return Object.freeze(new UmbVariantId(varyByCulture ? this.culture : null, varyBySegment ? this.segment : null));
 	}

src/Umbraco.Web.UI.Client/src/packages/language/global-contexts/app-language.context.ts

@@ -1,7 +1,7 @@
 import { UmbLanguageCollectionRepository } from '../collection/index.js';
 import type { UmbLanguageDetailModel } from '../types.js';
 import { UMB_APP_LANGUAGE_CONTEXT } from './app-language.context-token.js';
-import { UmbArrayState, UmbObjectState, createObservablePart } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
@@ -20,7 +20,7 @@ export class UmbAppLanguageContext extends UmbContextBase<UmbAppLanguageContext>
 
 	public readonly appLanguageReadOnlyState = new UmbReadOnlyStateManager(this);
 
-	public readonly appDefaultLanguage = createObservablePart(this.#languages.asObservable(), (languages) =>
+	public readonly appDefaultLanguage = this.#languages.asObservablePart((languages) =>
 		languages.find((language) => language.isDefault),
 	);