Variant workspace breadcrumb item parentheses (#19599)

* Refactored breadcrumb variant name

The parentheses will be added to unnamed variant ancestor items.

* Adds `last-item` attribute

(for semantics)

* Imports tidy-up

* Refactored `#getHref` to early exit for `.isFolder`

Saves on the string allocation.

Author: leekelleher

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.ts

@@ -2,12 +2,9 @@ import { UMB_WORKSPACE_CONTEXT } from '../../../workspace.context-token.js';
 import { css, customElement, html, ifDefined, map, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/menu';
 import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section';
-import {
-	UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT,
-	type UmbMenuStructureWorkspaceContext,
-	type UmbStructureItemModel,
-} from '@umbraco-cms/backoffice/menu';
+import type { UmbMenuStructureWorkspaceContext, UmbStructureItemModel } from '@umbraco-cms/backoffice/menu';
 
 @customElement('umb-workspace-breadcrumb')
 export class UmbWorkspaceBreadcrumbElement extends UmbLitElement {
@@ -65,8 +62,8 @@ export class UmbWorkspaceBreadcrumbElement extends UmbLitElement {
 	}
 
 	#getHref(structureItem: UmbStructureItemModel) {
-		const workspaceBasePath = `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit`;
-		return structureItem.isFolder ? undefined : `${workspaceBasePath}/${structureItem.unique}`;
+		if (structureItem.isFolder) return undefined;
+		return `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit/${structureItem.unique}`;
 	}
 
 	override render() {
@@ -79,7 +76,7 @@ export class UmbWorkspaceBreadcrumbElement extends UmbLitElement {
 							>${this.localize.string(structureItem.name)}</uui-breadcrumb-item
 						>`,
 				)}
-				<uui-breadcrumb-item>${this._name}</uui-breadcrumb-item>
+				<uui-breadcrumb-item last-item>${this._name}</uui-breadcrumb-item>
 			</uui-breadcrumbs>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-variant-menu-breadcrumb/workspace-variant-menu-breadcrumb.element.ts

@@ -1,15 +1,14 @@
-import { UMB_VARIANT_WORKSPACE_CONTEXT, type UmbVariantDatasetWorkspaceContext } from '../../../contexts/index.js';
+import { UMB_VARIANT_WORKSPACE_CONTEXT } from '../../../contexts/index.js';
+import type { UmbVariantDatasetWorkspaceContext } from '../../../contexts/index.js';
 import { css, customElement, html, ifDefined, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
+import { UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/menu';
 import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section';
 import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language';
-import {
-	UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT,
-	type UmbVariantStructureItemModel,
-} from '@umbraco-cms/backoffice/menu';
+import type { UmbVariantStructureItemModel } from '@umbraco-cms/backoffice/menu';
 
 @customElement('umb-workspace-variant-menu-breadcrumb')
 export class UmbWorkspaceVariantMenuBreadcrumbElement extends UmbLitElement {
@@ -96,31 +95,40 @@ export class UmbWorkspaceVariantMenuBreadcrumbElement extends UmbLitElement {
 
 	// TODO: we should move the fallback name logic to a helper class. It will be used in multiple places
 	#getItemVariantName(structureItem: UmbVariantStructureItemModel) {
-		const fallbackName =
-			structureItem.variants.find((variant) => variant.culture === this._appDefaultCulture)?.name ??
-			structureItem.variants[0].name ??
-			'Unknown';
-		const name = structureItem.variants.find((variant) => this._workspaceActiveVariantId?.compare(variant))?.name;
-		return name ?? `(${fallbackName})`;
+		// If the active workspace is a variant, we will try to find the matching variant name.
+		if (!this._workspaceActiveVariantId?.isInvariant()) {
+			const variant = structureItem.variants.find((variantId) => this._workspaceActiveVariantId?.compare(variantId));
+			if (variant) {
+				return variant.name;
+			}
+		}
+
+		// If the active workspace is invariant, we will try to find the variant that matches the app default culture.
+		const variant = structureItem.variants.find((variant) => variant.culture === this._appDefaultCulture);
+		if (variant) {
+			return `(${variant.name})`;
+		}
+
+		// If an active variant can not be found, then we fallback to the first variant name or a generic "unknown" label.
+		return structureItem.variants?.[0]?.name ?? '(#general_unknown)';
 	}
 
 	#getHref(structureItem: any) {
+		if (structureItem.isFolder) return undefined;
 		const workspaceBasePath = `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit`;
-		return structureItem.isFolder
-			? undefined
-			: `${workspaceBasePath}/${structureItem.unique}/${this._workspaceActiveVariantId?.culture}`;
+		return `${workspaceBasePath}/${structureItem.unique}/${this._workspaceActiveVariantId?.culture}`;
 	}
 
 	override render() {
 		return html`
 			<uui-breadcrumbs>
 				${this._structure.map(
 					(structureItem) =>
-						html`<uui-breadcrumb-item href="${ifDefined(this.#getHref(structureItem))}"
+						html`<uui-breadcrumb-item href=${ifDefined(this.#getHref(structureItem))}
 							>${this.localize.string(this.#getItemVariantName(structureItem))}</uui-breadcrumb-item
 						>`,
 				)}
-				<uui-breadcrumb-item>${this._name}</uui-breadcrumb-item>
+				<uui-breadcrumb-item last-item>${this._name}</uui-breadcrumb-item>
 			</uui-breadcrumbs>
 		`;
 	}