yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Variant workspace breadcrumb item parentheses (#19599)

Browse Source 
* 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.
This commit is contained in:
Lee Kelleher
2025-06-24 09:10:02 +01:00
committed by GitHub
parent 6237ddca89
commit 0a7a92287b
2 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
`;
}

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

@@ -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,19 +95,28 @@ 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() {
@@ -116,11 +124,11 @@ export class UmbWorkspaceVariantMenuBreadcrumbElement extends UmbLitElement {
<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>
`;
}