Make Grid List Create Button Respect the Translation of a document type (#2435)

* fix label

* Make umb-block-workspace-view-edit Respect Translations as well

* fix umb-workspace-editor

* Update src/libs/localization-api/localization.controller.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Update src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Update src/packages/block/block-type/components/block-type-card/block-type-card.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Update src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Update src/packages/block/block/workspace/block-workspace-editor.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* fix: ensure strings are actual strings at runtime

* fix: allow LocalizationController#string to receive unknown values to support various usecases

* test: add tests for undefined|unknown scenarios

* fix: translate the name of the entity as well

* fix: localize create labels

* fix: localize only when data changes

* chore: fix sonarcloud issues

---------

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.test.ts

@@ -290,6 +290,12 @@ describe('UmbLocalizeController', () => {
 			const str = '#missing_translation_key';
 			expect(controller.string(str)).to.equal('#missing_translation_key');
 		});
+
+		it('should return an empty string if the input is not a string', async () => {
+			expect(controller.string(123)).to.equal('');
+			expect(controller.string({})).to.equal('');
+			expect(controller.string(undefined)).to.equal('');
+		});
 	});
 
 	describe('host element', () => {

src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts

@@ -178,7 +178,18 @@ export class UmbLocalizationController<LocalizationSetType extends UmbLocalizati
 		return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);
 	}
 
-	string(text: string): string {
+	/**
+	 * Translates a string containing one or more terms. The terms should be prefixed with a `#` character.
+	 * If the term is found in the localization set, it will be replaced with the localized term.
+	 * If the term is not found, the original term will be returned.
+	 * @param {string} text The text to translate.
+	 * @returns {string} The translated text.
+	 */
+	string(text: unknown): string {
+		if (typeof text !== 'string') {
+			return '';
+		}
+
 		// find all words starting with #
 		const regex = /#\w+/g;
 

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts

@@ -204,7 +204,7 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 					this.observe(
 						this.#context.firstAllowedBlockTypeName(),
 						(firstAllowedName) => {
-							this._createLabel = this.localize.term('blockEditor_addThis', [firstAllowedName]);
+							this._createLabel = this.localize.term('blockEditor_addThis', this.localize.string(firstAllowedName));
 						},
 						'observeSingleBlockTypeName',
 					);

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

@@ -43,15 +43,14 @@ export class UmbPropertyEditorUIBlockListElement
 	extends UmbFormControlMixin<UmbBlockListValueModel | undefined, typeof UmbLitElement, undefined>(UmbLitElement)
 	implements UmbPropertyEditorUiElement
 {
-	//
-	#sorter = new UmbSorterController<UmbBlockListLayoutModel, UmbBlockListEntryElement>(this, {
+	readonly #sorter = new UmbSorterController<UmbBlockListLayoutModel, UmbBlockListEntryElement>(this, {
 		...SORTER_CONFIG,
 		onChange: ({ model }) => {
 			this.#entriesContext.setLayouts(model);
 		},
 	});
 
-	#validationContext = new UmbValidationContext(this);
+	readonly #validationContext = new UmbValidationContext(this);
 	#contentDataPathTranslator?: UmbBlockElementDataValidationPathTranslator;
 	#settingsDataPathTranslator?: UmbBlockElementDataValidationPathTranslator;
 
@@ -106,11 +105,11 @@ export class UmbPropertyEditorUIBlockListElement
 
 		const customCreateButtonLabel = config.getValueByAlias<string>('createLabel');
 		if (customCreateButtonLabel) {
-			this._createButtonLabel = customCreateButtonLabel;
+			this._createButtonLabel = this.localize.string(customCreateButtonLabel);
 		} else if (blocks.length === 1) {
 			this.#managerContext.contentTypesLoaded.then(() => {
 				const firstContentTypeName = this.#managerContext.getContentTypeNameOf(blocks[0].contentElementTypeKey);
-				this._createButtonLabel = `${this.localize.term('general_add')} ${firstContentTypeName}`;
+				this._createButtonLabel = this.localize.term('blockEditor_addThis', this.localize.string(firstContentTypeName));
 			});
 		}
 	}
@@ -122,9 +121,6 @@ export class UmbPropertyEditorUIBlockListElement
 	 * @default
 	 */
 	@property({ type: Boolean, reflect: true })
-	public get readonly() {
-		return this.#readonly;
-	}
 	public set readonly(value) {
 		this.#readonly = value;
 
@@ -134,6 +130,9 @@ export class UmbPropertyEditorUIBlockListElement
 			this.#sorter.enable();
 		}
 	}
+	public get readonly() {
+		return this.#readonly;
+	}
 	#readonly = false;
 
 	@state()
@@ -150,8 +149,8 @@ export class UmbPropertyEditorUIBlockListElement
 	@state()
 	private _catalogueRouteBuilder?: UmbModalRouteBuilder;
 
-	#managerContext = new UmbBlockListManagerContext(this);
-	#entriesContext = new UmbBlockListEntriesContext(this);
+	readonly #managerContext = new UmbBlockListManagerContext(this);
+	readonly #entriesContext = new UmbBlockListEntriesContext(this);
 
 	constructor() {
 		super();
@@ -276,7 +275,6 @@ export class UmbPropertyEditorUIBlockListElement
 		} else {
 			createPath = this._catalogueRouteBuilder?.({ view: 'create', index: -1 });
 		}
-
 		return html`
 			<uui-button look="placeholder" label=${this._createButtonLabel} href=${createPath ?? ''}></uui-button>
 		`;
@@ -294,7 +292,7 @@ export class UmbPropertyEditorUIBlockListElement
 		`;
 	}
 
-	static override styles = [
+	static override readonly styles = [
 		UmbTextStyles,
 
 		css`

src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts

@@ -11,11 +11,10 @@ import { UUICardEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-block-type-card')
 export class UmbBlockTypeCardElement extends UmbLitElement {
-	//
-	#init: Promise<void>;
+	readonly #init: Promise<void>;
 	#appUrl: string = '';
 
-	#itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeItemModel>(
+	readonly #itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeItemModel>(
 		this,
 		UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
 		(x) => x.unique,
@@ -51,9 +50,6 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 	// TODO: support custom icon/image file
 
 	@property({ type: String, attribute: false })
-	public get contentElementTypeKey(): string | undefined {
-		return this._elementTypeKey;
-	}
 	public set contentElementTypeKey(value: string | undefined) {
 		this._elementTypeKey = value;
 		if (value) {
@@ -62,10 +58,13 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 			this.#itemManager.setUniques([]);
 		}
 	}
-	private _elementTypeKey?: string | undefined;
+	public get contentElementTypeKey(): string | undefined {
+		return this._elementTypeKey;
+	}
+	private _elementTypeKey?: string;
 
 	@state()
-	_name?: string;
+	_name = '';
 
 	@state()
 	_description?: string;
@@ -84,13 +83,13 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 			const item = items[0];
 			if (item) {
 				this._fallbackIcon = item.icon;
-				this._name = item.name;
-				this._description = item.description ?? undefined;
+				this._name = item.name ? this.localize.string(item.name) : this.localize.term('general_unknown');
+				this._description = this.localize.string(item.description);
 			}
 		});
 	}
 
-	#onOpen = () => {
+	readonly #onOpen = () => {
 		this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
 	};
 
@@ -100,7 +99,7 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 			<uui-card-block-type
 				href=${ifDefined(this.href)}
 				@open=${this.#onOpen}
-				.name=${this._name ?? 'Unknown'}
+				.name=${this._name}
 				.description=${this._description}
 				.background=${this.backgroundColor}>
 				${this._iconFile

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

@@ -6,7 +6,6 @@ import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
 
 @customElement('umb-block-workspace-editor')
 export class UmbBlockWorkspaceEditorElement extends UmbLitElement {
-	//
 	@property({ type: String, attribute: false })
 	workspaceAlias?: string;
 
@@ -19,7 +18,8 @@ export class UmbBlockWorkspaceEditorElement extends UmbLitElement {
 					context.content.structure.ownerContentTypeObservablePart((contentType) => contentType?.name),
 				]),
 				([isNew, name]) => {
-					this._headline = this.localize.term(isNew ? 'general_add' : 'general_edit') + ' ' + name;
+					this._headline =
+						this.localize.term(isNew ? 'general_add' : 'general_edit') + ' ' + this.localize.string(name);
 				},
 				'observeOwnerContentElementTypeName',
 			);
@@ -35,7 +35,7 @@ export class UmbBlockWorkspaceEditorElement extends UmbLitElement {
 			: nothing;
 	}
 
-	static override styles = [
+	static override readonly styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts

@@ -13,13 +13,13 @@ import type { ManifestWorkspaceView, UmbWorkspaceViewElement } from '@umbraco-cm
 @customElement('umb-block-workspace-view-edit')
 export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement {
 	@property({ attribute: false })
-	public get manifest(): ManifestWorkspaceView | undefined {
-		return;
-	}
 	public set manifest(value: ManifestWorkspaceView | undefined) {
 		this.#managerName = (value?.meta as any).blockElementManagerName ?? 'content';
 		this.#setStructureManager();
 	}
+	public get manifest(): ManifestWorkspaceView | undefined {
+		return;
+	}
 	#managerName?: UmbBlockWorkspaceElementManagerNames;
 	#blockWorkspace?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
 	#tabsStructureHelper = new UmbContentTypeContainerStructureHelper<UmbContentTypeModel>(this);
@@ -138,9 +138,9 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
 										<uui-tab
 											label="Content"
 											.active=${this._routerPath + '/' === this._activePath}
-											href=${this._routerPath + '/'}
-											>Content</uui-tab
-										>
+											href=${this._routerPath + '/'}>
+											<umb-localize key="general_content">Content</umb-localize>
+										</uui-tab>
 									`
 								: ''}
 							${repeat(
@@ -148,9 +148,12 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
 								(tab) => tab.name,
 								(tab) => {
 									const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
-									return html`<uui-tab label=${tab.name ?? 'Unnamed'} .active=${path === this._activePath} href=${path}
-										>${tab.name}</uui-tab
-									>`;
+									return html`<uui-tab
+										label=${this.localize.string(tab.name ?? '#general_unknown')}
+										.active=${path === this._activePath}
+										href=${path}>
+										${this.localize.string(tab.name)}
+									</uui-tab>`;
 								},
 							)}
 						</uui-tab-group>`
@@ -169,7 +172,7 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
 		`;
 	}
 
-	static override styles = [
+	static override readonly styles = [
 		UmbTextStyles,
 		css`
 			:host {

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts

@@ -189,7 +189,7 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 				<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 				${this._createPath
 					? html` <uui-button
-							label=${this.localize.string(this._createLabel ?? 'general_create')}
+							label=${this.localize.string(this._createLabel ?? '#general_create')}
 							look="secondary"
 							href=${this._createPath}></uui-button>`
 					: nothing}