Handle segmentation when segment alias includes underscore character(s) (#19782)

nathanwoulfe · iOvergaard · web-flow · commit 56569af0f94f · 2025-08-13T16:28:43.000Z
* move variant fragment split logic into splitview manager

* further centralise split logic into umbVariantId

* show segment selector if any exist

* invariant null

* chore: run eslint:fix

* chore(eslint): generate a UBM_ constant

---------

Co-authored-by: Jacob Overgaard &lt;752371+iOvergaard@users.noreply.github.com&gt;
diff --git a/src/Umbraco.Web.UI.Client/src/apps/preview/apps/preview-segment.element.ts b/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>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/variant/variant-id.class.ts b/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));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/controllers/workspace-split-view-manager.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/controllers/workspace-split-view-manager.controller.ts
@@ -13,6 +13,8 @@ export type UmbActiveVariant = {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export type ActiveVariant = UmbActiveVariant;
 
+const UBM_VARIANT_DELIMITER = '_&_';
+
 /**
  * @class UmbWorkspaceSplitViewManager
  * @description - Class managing the split view state for a workspace context.
@@ -61,7 +63,9 @@ 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(UBM_VARIANT_DELIMITER);
 
 				history.pushState(null, '', `${workspaceRoute}/${variantPart}`);
 				return true;
@@ -78,7 +82,11 @@ 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)}${UBM_VARIANT_DELIMITER}${newVariant}`,
+			);
 			return true;
 		}
 		return false;
@@ -91,12 +99,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(UBM_VARIANT_DELIMITER);
 
 				history.pushState(null, '', `${workspaceRoute}/${variantPart}`);
 				return true;
 			}
 		}
 		return false;
 	}
+
+	public setVariantParts(routeFragment: string) {
+		const variantSplit = routeFragment.split(UBM_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);
+	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace-editor.element.ts
@@ -51,13 +51,6 @@ export class UmbDocumentBlueprintWorkspaceEditorElement 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() {
 		// Generate split view routes for all available routes
 		const routes: Array<UmbRoute> = [];
@@ -71,10 +64,7 @@ export class UmbDocumentBlueprintWorkspaceEditorElement 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);
 					},
 				});
 			});
@@ -89,7 +79,7 @@ export class UmbDocumentBlueprintWorkspaceEditorElement 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);
 				},
 			});
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts
@@ -58,13 +58,6 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement {
 		});
 	}
 
-	#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,10 +76,7 @@ export class UmbDocumentWorkspaceEditorElement 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);
 					},
 				});
 			});
@@ -101,7 +91,7 @@ export class UmbDocumentWorkspaceEditorElement 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);
 				},
 			});
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace-editor.element.ts
@@ -51,13 +51,6 @@ export class UmbMediaWorkspaceEditorElement 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() {
 		// Generate split view routes for all available routes
 		const routes: Array<UmbRoute> = [];
@@ -71,10 +64,7 @@ export class UmbMediaWorkspaceEditorElement 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);
 					},
 				});
 			});
@@ -89,7 +79,7 @@ export class UmbMediaWorkspaceEditorElement 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);
 				},
 			});
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace-editor.element.ts
@@ -47,13 +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
 		const routes: Array<UmbRoute> = [];
@@ -67,10 +60,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 +75,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);
 				},
 			});
 		});

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ export class UmbPreviewSegmentElement extends UmbLitElement {`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`override render() {`
`50`		`- if (this._segments.length <= 1) return nothing;`
	`50`	`+ if (!this._segments.length) return nothing;`
`51`	`51`	return html`
`52`	`52`	`<uui-button look="primary" popovertarget="segments-popover">`
`53`	`53`	`<div>`
Original file line number	Diff line number	Diff line change
`@@ -37,9 +37,12 @@ export class UmbVariantId {`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`public static FromString(str: string): UmbVariantId {`
`40`		`- const split = str.split('_');`
`41`		`- const culture = split[0] === UMB_INVARIANT_CULTURE ? null : split[0];`
`42`		`- const segment = split[1] ?? null;`
	`40`	`+ const firstUnderscoreIndex = str.indexOf('_');`
	`41`	`+ let culture: string \| null = firstUnderscoreIndex === -1 ? str : str.substring(0, firstUnderscoreIndex);`
	`42`	`+ culture = culture === UMB_INVARIANT_CULTURE ? null : culture;`
	`43`	`+`
	`44`	`+ const segment = firstUnderscoreIndex === -1 ? null : str.substring(firstUnderscoreIndex + 1) \|\| null;`
	`45`	`+`
`43`	`46`	`return Object.freeze(new UmbVariantId(culture, segment));`
`44`	`47`	`}`
`45`	`48`