Handle segmentation when segment alias includes underscore character(s)

src/Umbraco.Web.UI.Client/src/apps/preview/apps/preview-segment.element.ts

@@ -47,7 +47,7 @@ export class UmbPreviewSegmentElement extends UmbLitElement {
 	}
 
 	override render() {
-		if (this._segments.length <= 1) return nothing;
+		if (!this._segments.length) return nothing;
 		return html`
 			<uui-button look="primary" popovertarget="segments-popover">
 				<div>

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

@@ -37,9 +37,12 @@ export class UmbVariantId {
 	}
 
 	public static FromString(str: string): UmbVariantId {
-		const split = str.split('_');
-		const culture = split[0] === UMB_INVARIANT_CULTURE ? null : split[0];
-		const segment = split[1] ?? null;
+		const firstUnderscoreIndex = str.indexOf('_');
+		let culture: string | null = firstUnderscoreIndex === -1 ? str : str.substring(0, firstUnderscoreIndex);
+		culture = culture === UMB_INVARIANT_CULTURE ? null : culture;
+
+		const segment = firstUnderscoreIndex === -1 ? null : str.substring(firstUnderscoreIndex + 1) || null;
+
 		return Object.freeze(new UmbVariantId(culture, segment));
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/workspace/controllers/workspace-split-view-manager.controller.ts

@@ -18,6 +18,8 @@ export class UmbWorkspaceSplitViewManager {
 	public readonly activeVariantsInfo = this.#activeVariantsInfo.asObservable();
 	public readonly splitViewActive = this.#activeVariantsInfo.asObservablePart((x) => x.length > 1);
 
+	private readonly VARIANT_DELIMITER = '_&_';
+
 	private _routeBase?: string;
 	public getWorkspaceRoute(): string | undefined {
 		return this._routeBase;
@@ -55,7 +57,7 @@ export class UmbWorkspaceSplitViewManager {
 				const newVariants = [...activeVariants];
 				newVariants[index] = { index, culture: variantId.culture, segment: variantId.segment };
 
-				const variantPart: string = newVariants.map((v) => UmbVariantId.Create(v).toString()).join('_&_');
+				const variantPart: string = newVariants.map((v) => UmbVariantId.Create(v).toString()).join(this.VARIANT_DELIMITER);
 
 				history.pushState(null, '', `${workspaceRoute}/${variantPart}`);
 				return true;
@@ -72,7 +74,7 @@ export class UmbWorkspaceSplitViewManager {
 		const currentVariant = this.getActiveVariants()[0];
 		const workspaceRoute = this.getWorkspaceRoute();
 		if (currentVariant && workspaceRoute) {
-			history.pushState(null, '', `${workspaceRoute}/${UmbVariantId.Create(currentVariant)}_&_${newVariant}`);
+			history.pushState(null, '', `${workspaceRoute}/${UmbVariantId.Create(currentVariant)}${this.VARIANT_DELIMITER}${newVariant}`);
 			return true;
 		}
 		return false;
@@ -85,12 +87,24 @@ export class UmbWorkspaceSplitViewManager {
 			if (activeVariants && index < activeVariants.length) {
 				const newVariants = activeVariants.filter((x) => x.index !== index);
 
-				const variantPart: string = newVariants.map((v) => UmbVariantId.Create(v)).join('_&_');
+				const variantPart: string = newVariants.map((v) => UmbVariantId.Create(v)).join(this.VARIANT_DELIMITER);
 
 				history.pushState(null, '', `${workspaceRoute}/${variantPart}`);
 				return true;
 			}
 		}
 		return false;
 	}
+
+	public setVariantParts(routeFragment: string) {
+		const variantSplit = routeFragment.split(this.VARIANT_DELIMITER);
+		variantSplit.forEach((part, index) => {
+			this.handleVariantFolderPart(index, part);
+		});
+	}
+
+	public handleVariantFolderPart(index: number, folderPart: string) {
+		const variantId = UmbVariantId.FromString(folderPart);
+		this.setActiveVariant(index, variantId.culture, variantId.segment);
+	}
 }

src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace-editor.element.ts

@@ -51,13 +51,6 @@
 		);
 	}
 
-	private _handleVariantFolderPart(index: number, folderPart: string) {
-		const variantSplit = folderPart.split('_');
-		const culture = variantSplit[0];
-		const segment = variantSplit[1];
-		this.#workspaceContext?.splitView.setActiveVariant(index, culture, segment);
-	}
-
 	private async _generateRoutes() {
 		// Generate split view routes for all available routes
 		const routes: Array<UmbRoute> = [];
@@ -71,25 +64,22 @@
 					component: this.splitViewElement,
 					setup: (_component, info) => {
 						// Set split view/active info..
-						const variantSplit = info.match.fragments.consumed.split('_&_');
-						variantSplit.forEach((part, index) => {
-							this._handleVariantFolderPart(index, part);
-						});
+						this.#workspaceContext?.splitView.setVariantParts(info.match.fragments.consumed);
 					},
 				});
 			});
 		});
 
 		// Single view:
 		this.#variants?.forEach((variant) => {
 			routes.push({
 				// TODO: When implementing Segments, be aware if using the unique is URL Safe... [NL]
 				path: variant.unique,
 				component: this.splitViewElement,
 				setup: (_component, info) => {
 					// cause we might come from a split-view, we need to reset index 1.
 					this.#workspaceContext?.splitView.removeActiveVariant(1);
-					this._handleVariantFolderPart(0, info.match.fragments.consumed);
+					this.#workspaceContext?.splitView.handleVariantFolderPart(0, info.match.fragments.consumed);
 				},
 			});
 		});

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts

@@ -58,13 +58,6 @@
 		});
 	}
 
-	#handleVariantFolderPart(index: number, folderPart: string) {
-		const variantSplit = folderPart.split('_');
-		const culture = variantSplit[0];
-		const segment = variantSplit[1];
-		this.#workspaceContext?.splitView.setActiveVariant(index, culture, segment);
-	}
-
 	#generateRoutes() {
 		if (!this.#variants || !this.#appCulture) {
 			this._routes = [];
@@ -83,25 +76,22 @@
 					component: this.splitViewElement,
 					setup: (_component, info) => {
 						// Set split view/active info..
-						const variantSplit = info.match.fragments.consumed.split('_&_');
-						variantSplit.forEach((part, index) => {
-							this.#handleVariantFolderPart(index, part);
-						});
+						this.#workspaceContext?.splitView.setVariantParts(info.match.fragments.consumed);
 					},
 				});
 			});
 		});
 
 		// Single view:
 		this.#variants.forEach((variant) => {
 			routes.push({
 				// TODO: When implementing Segments, be aware if using the unique still is URL Safe, cause its most likely not... [NL]
 				path: variant.unique,
 				component: this.splitViewElement,
 				setup: (_component, info) => {
 					// cause we might come from a split-view, we need to reset index 1.
 					this.#workspaceContext?.splitView.removeActiveVariant(1);
-					this.#handleVariantFolderPart(0, info.match.fragments.consumed);
+					this.#workspaceContext?.splitView.handleVariantFolderPart(0, info.match.fragments.consumed);
 				},
 			});
 		});

src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace-editor.element.ts

@@ -51,13 +51,6 @@
 		);
 	}
 
-	private _handleVariantFolderPart(index: number, folderPart: string) {
-		const variantSplit = folderPart.split('_');
-		const culture = variantSplit[0];
-		const segment = variantSplit[1];
-		this.#workspaceContext?.splitView.setActiveVariant(index, culture, segment);
-	}
-
 	private async _generateRoutes() {
 		// Generate split view routes for all available routes
 		const routes: Array<UmbRoute> = [];
@@ -71,25 +64,22 @@
 					component: this.splitViewElement,
 					setup: (_component, info) => {
 						// Set split view/active info..
-						const variantSplit = info.match.fragments.consumed.split('_&_');
-						variantSplit.forEach((part, index) => {
-							this._handleVariantFolderPart(index, part);
-						});
+						this.#workspaceContext?.splitView.setVariantParts(info.match.fragments.consumed);
 					},
 				});
 			});
 		});
 
 		// Single view:
 		this.#variants?.forEach((variant) => {
 			routes.push({
 				// TODO: When implementing Segments, be aware if using the unique is URL Safe... [NL]
 				path: variant.unique,
 				component: this.splitViewElement,
 				setup: (_component, info) => {
 					// cause we might come from a split-view, we need to reset index 1.
 					this.#workspaceContext?.splitView.removeActiveVariant(1);
-					this._handleVariantFolderPart(0, info.match.fragments.consumed);
+					this.#workspaceContext?.splitView.handleVariantFolderPart(0, info.match.fragments.consumed);
 				},
 			});
 		});

src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace-editor.element.ts

@@ -47,12 +47,6 @@ export class UmbMemberWorkspaceEditorElement extends UmbLitElement {
 		);
 	}
 
-	private _handleVariantFolderPart(index: number, folderPart: string) {
-		const variantSplit = folderPart.split('_');
-		const culture = variantSplit[0];
-		const segment = variantSplit[1];
-		this.#workspaceContext?.splitView.setActiveVariant(index, culture, segment);
-	}
 
 	private async _generateRoutes(variants: Array<UmbMemberVariantOptionModel>) {
 		// Generate split view routes for all available routes
@@ -67,10 +61,7 @@ export class UmbMemberWorkspaceEditorElement extends UmbLitElement {
 					component: this.splitViewElement,
 					setup: (_component, info) => {
 						// Set split view/active info..
-						const variantSplit = info.match.fragments.consumed.split('_&_');
-						variantSplit.forEach((part, index) => {
-							this._handleVariantFolderPart(index, part);
-						});
+						this.#workspaceContext?.splitView.setVariantParts(info.match.fragments.consumed);
 					},
 				});
 			});
@@ -85,7 +76,7 @@ export class UmbMemberWorkspaceEditorElement extends UmbLitElement {
 				setup: (_component, info) => {
 					// cause we might come from a split-view, we need to reset index 1.
 					this.#workspaceContext?.splitView.removeActiveVariant(1);
-					this._handleVariantFolderPart(0, info.match.fragments.consumed);
+					this.#workspaceContext?.splitView.handleVariantFolderPart(0, info.match.fragments.consumed);
 				},
 			});
 		});