From 3e620f2b689ad7cea6dd91f24b290ba77e79e1fd Mon Sep 17 00:00:00 2001 From: Ibrahim Muhammad Nada Date: Fri, 11 Oct 2024 10:32:09 +0300 Subject: [PATCH] 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> --- .../localization.controller.test.ts | 6 +++++ .../localization.controller.ts | 13 ++++++++++- .../block-grid-entries.element.ts | 2 +- .../property-editor-ui-block-list.element.ts | 22 ++++++++---------- .../block-type-card.element.ts | 23 +++++++++---------- .../block-workspace-editor.element.ts | 6 ++--- .../edit/block-workspace-view-edit.element.ts | 23 +++++++++++-------- .../tree-picker-modal.element.ts | 2 +- 8 files changed, 57 insertions(+), 40 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.test.ts b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.test.ts index 4126febed5..a0332b08a9 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.test.ts +++ b/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', () => { diff --git a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts index 49f337f3b4..587f7b14d8 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts @@ -178,7 +178,18 @@ export class UmbLocalizationController { - this._createLabel = this.localize.term('blockEditor_addThis', [firstAllowedName]); + this._createLabel = this.localize.term('blockEditor_addThis', this.localize.string(firstAllowedName)); }, 'observeSingleBlockTypeName', ); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 3accdffc9c..7c73350a4d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/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(UmbLitElement) implements UmbPropertyEditorUiElement { - // - #sorter = new UmbSorterController(this, { + readonly #sorter = new UmbSorterController(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('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` `; @@ -294,7 +292,7 @@ export class UmbPropertyEditorUIBlockListElement `; } - static override styles = [ + static override readonly styles = [ UmbTextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts index 7acba0d8be..5ec53ac6a3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts +++ b/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; + readonly #init: Promise; #appUrl: string = ''; - #itemManager = new UmbRepositoryItemsManager( + readonly #itemManager = new UmbRepositoryItemsManager( 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 { ${this._iconFile diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace-editor.element.ts index 8e89bcb06e..1e8cefd585 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace-editor.element.ts +++ b/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 { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts index bdf60dd194..3b5f9c6fda 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts +++ b/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(this); @@ -138,9 +138,9 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U Content + href=${this._routerPath + '/'}> + Content + ` : ''} ${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`${tab.name}`; + return html` + ${this.localize.string(tab.name)} + `; }, )} ` @@ -169,7 +172,7 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U `; } - static override styles = [ + static override readonly styles = [ UmbTextStyles, css` :host { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts index dcb3fc0159..107dc84fbf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts @@ -189,7 +189,7 @@ export class UmbTreePickerModalElement ${this._createPath ? html` ` : nothing}