Merge pull request #2152 from umbraco/v14/bugfix/webhooks-localization

Bugfix: Webhooks localizations + other fixes

src/assets/lang/en.ts

@@ -1735,18 +1735,19 @@ export default {
 		enabled: 'Enabled',
 		events: 'Events',
 		event: 'Event',
-		url: 'Url',
+		url: 'URL',
 		types: 'Types',
 		webhookKey: 'Webhook key',
 		retryCount: 'Retry count',
-		urlDescription: 'The url to call when the webhook is triggered.',
+		urlDescription: 'The URL to call when the webhook is triggered.',
 		eventDescription: 'The events for which the webhook should be triggered.',
 		contentTypeDescription: 'Only trigger the webhook for a specific content type.',
 		enabledDescription: 'Is the webhook enabled?',
 		headersDescription: 'Custom headers to include in the webhook request.',
 		contentType: 'Content Type',
 		headers: 'Headers',
 		selectEventFirst: 'Please select an event first.',
+		selectEvents: 'Select events',
 	},
 	languages: {
 		addLanguage: 'Add language',

src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts

@@ -1,4 +1,4 @@
-import { html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-webhook-table-boolean-column-layout')
@@ -7,7 +7,7 @@ export class UmbWebhookTableBooleanColumnLayoutElement extends UmbLitElement {
 	value = false;
 
 	override render() {
-		return this.value ? html`<uui-icon name="icon-check"></uui-icon>` : nothing;
+		return html`<uui-icon name="${this.value ? 'check' : 'remove'}"></uui-icon>`;
 	}
 }
 

src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts

@@ -32,7 +32,7 @@ export class UmbWebhookTableContentTypeColumnLayoutElement extends UmbLitElement
 
 		if (this.value?.contentTypeName && this.#repository) {
 			const { data } = await this.#repository.requestItems(this.value.contentTypes);
-			this._contentTypes = data?.map((item) => item.name).join(', ') ?? '';
+			this._contentTypes = data?.map((item) => this.localize.string(item.name)).join(', ') ?? '';
 		}
 	}
 

src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts

@@ -1,10 +1,9 @@
 import type { UmbWebhookDetailModel } from '../../../types.js';
 import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
+import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
 import type { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 import './column-layouts/boolean/webhook-table-boolean-column-layout.element.js';
 import './column-layouts/name/webhook-table-name-column-layout.element.js';
@@ -21,25 +20,25 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
 	@state()
 	private _tableColumns: Array<UmbTableColumn> = [
 		{
-			name: 'Name',
+			name: this.localize.term('general_name'),
 			alias: 'name',
 			elementName: 'umb-webhook-table-name-column-layout',
 		},
 		{
-			name: 'Enabled',
+			name: this.localize.term('webhooks_enabled'),
 			alias: 'enabled',
 			elementName: 'umb-webhook-table-boolean-column-layout',
 		},
 		{
-			name: 'URL',
+			name: this.localize.term('webhooks_url'),
 			alias: 'url',
 		},
 		{
-			name: 'Events',
+			name: this.localize.term('webhooks_events'),
 			alias: 'events',
 		},
 		{
-			name: 'Types',
+			name: this.localize.term('webhooks_types'),
 			alias: 'types',
 			elementName: 'umb-webhook-table-content-type-column-layout',
 		},
@@ -112,7 +111,6 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
 	}
 
 	static override styles = [
-		UmbTextStyles,
 		css`
 			:host {
 				display: flex;

src/packages/webhook/components/input-webhook-events.element.ts

@@ -47,23 +47,29 @@ export class UmbInputWebhookEventsElement extends UmbLitElement {
 		if (!this.events.length) return nothing;
 
 		return html`
-			${repeat(
-				this.events,
-				(item) => item.alias,
-				(item) => html`
-					<span>${item.eventName}</span>
-					<uui-button
-						label=${this.localize.term('general_remove')}
-						@click=${() => this.#removeEvent(item.alias)}></uui-button>
-				`,
-			)}
+			<uui-ref-list>
+				${repeat(
+					this.events,
+					(item) => item.alias,
+					(item) => html`
+						<uui-ref-node name=${item.eventName} @open=${this.#openModal}>
+							<umb-icon slot="icon" name="icon-globe"></umb-icon>
+							<uui-action-bar slot="actions">
+								<uui-button
+									label=${this.localize.term('general_remove')}
+									@click=${() => this.#removeEvent(item.alias)}></uui-button>
+							</uui-action-bar>
+						</uui-ref-node>
+					`,
+				)}
+			</uui-ref-list>
 		`;
 	}
 
 	override render() {
 		return html`${this.#renderEvents()}
 			<uui-button
-				id="choose"
+				id="btn-add"
 				look="placeholder"
 				label=${this.localize.term('general_choose')}
 				@click=${this.#openModal}></uui-button>`;
@@ -72,15 +78,8 @@ export class UmbInputWebhookEventsElement extends UmbLitElement {
 	static override styles = [
 		UmbTextStyles,
 		css`
-			:host {
-				display: grid;
-				grid-template-columns: 1fr auto;
-				gap: var(--uui-size-space-2) var(--uui-size-space-2);
-				align-items: center;
-			}
-
-			#choose {
-				grid-column: -1 / 1;
+			#btn-add {
+				display: block;
 			}
 		`,
 	];

src/packages/webhook/components/input-webhook-headers.element.ts

@@ -14,7 +14,7 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement {
 	private _headers: Array<{ name: string; value: string }> = [];
 
 	@state()
-	private _headerNames: string[] = ['Accept', 'Content-Type', 'User-Agent', 'Content-Length'];
+	private _headerNames: string[] = ['Accept', 'Content-Length', 'Content-Type', 'User-Agent'];
 
 	get #filterHeaderNames() {
 		return this._headerNames.filter((name) => !this._headers.find((header) => header.name === name));
@@ -78,7 +78,7 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement {
 				.value=${header.value}
 				@input=${(e: InputEvent) => this.#onInput(e, 'value', index)}
 				list="valueList" />
-			<uui-button @click=${() => this.#removeHeader(index)} label="Remove"></uui-button>
+			<uui-button @click=${() => this.#removeHeader(index)} label=${this.localize.term('general_remove')}></uui-button>
 		`;
 	}
 
@@ -105,8 +105,8 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement {
 		if (!this._headers.length) return nothing;
 
 		return html`
-			<span class="grid-top">KEY</span>
-			<span class="grid-top">VALUE</span>
+			<span class="grid-top"><umb-localize key="general_name">Name</umb-localize></span>
+			<span class="grid-top"><umb-localize key="general_value">Value</umb-localize></span>
 			<span class="grid-top"></span>
 			${repeat(
 				this._headers,

src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts

@@ -1,9 +1,7 @@
 import { UmbWebhookEventRepository } from '../../repository/event/webhook-event.repository.js';
 import type { UmbWebhookEventModel } from '../../types.js';
 import type { UmbWebhookPickerModalData, UmbWebhookPickerModalValue } from './webhook-events-modal.token.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
-
+import { customElement, html, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
 
@@ -67,32 +65,36 @@ export class UmbWebhookEventsModalElement extends UmbModalBaseElement<
 	}
 
 	override render() {
-		return html`<umb-body-layout headline="Select events">
-			<uui-box>
-				${repeat(
-					this._events,
-					(item) => item.alias,
-					(item) => html`
-						<uui-menu-item
-							label=${item.eventName}
-							?disabled=${this.#getItemDisabled(item)}
-							selectable
-							@selected=${() => this.#selectionManager.select(item.alias)}
-							@deselected=${() => this.#selectionManager.deselect(item.alias)}
-							?selected=${this.value.events.includes(item)}></uui-menu-item>
-							<uui-icon slot="icon" name="icon-globe"></uui-icon>
-						</uui-menu-item>
-					`,
-				)}
-			</uui-box>
-			<div slot="actions">
-				<uui-button label="Close" @click=${this.#close}></uui-button>
-				<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
-			</div>
-		</umb-body-layout> `;
+		return html`
+			<umb-body-layout headline=${this.localize.term('webhooks_selectEvents')}>
+				<uui-box>
+					${repeat(
+						this._events,
+						(item) => item.alias,
+						(item) => html`
+							<uui-menu-item
+								label=${item.eventName}
+								?disabled=${this.#getItemDisabled(item)}
+								selectable
+								@selected=${() => this.#selectionManager.select(item.alias)}
+								@deselected=${() => this.#selectionManager.deselect(item.alias)}
+								?selected=${this.value.events.includes(item)}>
+								<uui-icon slot="icon" name="icon-globe"></uui-icon>
+							</uui-menu-item>
+						`,
+					)}
+				</uui-box>
+				<div slot="actions">
+					<uui-button label=${this.localize.term('general_cancel')} @click=${this.#close}></uui-button>
+					<uui-button
+						label=${this.localize.term('general_submit')}
+						look="primary"
+						color="positive"
+						@click=${this.#submit}></uui-button>
+				</div>
+			</umb-body-layout>
+		`;
 	}
-
-	static override styles = [UmbTextStyles, css``];
 }
 
 export default UmbWebhookEventsModalElement;

src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts

@@ -5,9 +5,11 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 @customElement('umb-webhook-root-workspace')
 export class UmbWebhookRootWorkspaceElement extends UmbLitElement {
 	override render() {
-		return html` <umb-body-layout main-no-padding headline="Webhooks">
-			<umb-collection alias=${UMB_WEBHOOK_COLLECTION_ALIAS}></umb-collection>;
-		</umb-body-layout>`;
+		return html`
+			<umb-body-layout main-no-padding headline=${this.localize.term('treeHeaders_webhooks')}>
+				<umb-collection alias=${UMB_WEBHOOK_COLLECTION_ALIAS}></umb-collection>;
+			</umb-body-layout>
+		`;
 	}
 }
 

src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts

@@ -1,17 +1,16 @@
-import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js';
 import { UMB_WEBHOOK_WORKSPACE_CONTEXT } from '../webhook-workspace.context-token.js';
+import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js';
 import type { UmbInputWebhookEventsElement } from '../../../components/input-webhook-events.element.js';
-import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import '@umbraco-cms/backoffice/culture';
-import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook';
-
 import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import type { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type';
+import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook';
+import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
 import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
+import '@umbraco-cms/backoffice/culture';
 import '../../../components/input-webhook-headers.element.js';
 import '../../../components/input-webhook-events.element.js';
 
@@ -43,9 +42,9 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
 		});
 	}
 
-	#onEventsChange(event: UmbChangeEvent) {
-		const events = (event.target as UmbInputWebhookEventsElement).events;
-		if (events[0].eventType !== this.contentType) {
+	#onEventsChange(event: UmbChangeEvent & { target: UmbInputWebhookEventsElement }) {
+		const events = event.target.events ?? [];
+		if (events.length && events[0].eventType !== this.contentType) {
 			this.#webhookWorkspaceContext?.setTypes([]);
 		}
 		this.#webhookWorkspaceContext?.setEvents(events);
@@ -75,7 +74,9 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
 		if (this.contentType !== 'Content' && this.contentType !== 'Media') return nothing;
 
 		return html`
-			<umb-property-layout label="Content Type" description="Only trigger the webhook for a specific content type.">
+			<umb-property-layout
+				label=${this.localize.term('webhooks_contentType')}
+				description=${this.localize.term('webhooks_contentTypeDescription')}>
 				${this.#renderContentTypePickerEditor()}
 			</umb-property-layout>
 		`;
@@ -84,17 +85,20 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
 	#renderContentTypePickerEditor() {
 		switch (this.contentType) {
 			case 'Content':
-				return html`<umb-input-document-type
-					@change=${this.#onTypesChange}
-					.selection=${this._webhook?.contentTypes ?? []}
-					slot="editor"
-					?elementTypesOnly=${true}></umb-input-document-type>`;
+				return html`
+					<umb-input-document-type
+						slot="editor"
+						@change=${this.#onTypesChange}
+						.selection=${this._webhook?.contentTypes ?? []}
+						?documentTypesOnly=${true}></umb-input-document-type>
+				`;
 			case 'Media':
-				return html`<umb-input-media-type
-					@change=${this.#onTypesChange}
-					.selection=${this._webhook?.contentTypes ?? []}
-					slot="editor"
-					?elementTypesOnly=${true}></umb-input-media-type>`;
+				return html`
+					<umb-input-media-type
+						slot="editor"
+						@change=${this.#onTypesChange}
+						.selection=${this._webhook?.contentTypes ?? []}></umb-input-media-type>
+				`;
 			default:
 				return nothing;
 		}
@@ -105,20 +109,28 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
 
 		return html`
 			<uui-box>
-				<umb-property-layout label="Url" description="The url to call when the webhook is triggered.">
+				<umb-property-layout
+					label=${this.localize.term('webhooks_url')}
+					description=${this.localize.term('webhooks_urlDescription')}>
 					<uui-input @input=${this.#onUrlChange} .value=${this._webhook.url} slot="editor"></uui-input>
 				</umb-property-layout>
-				<umb-property-layout label="Events" description="The events for which the webhook should be triggered.">
+				<umb-property-layout
+					label=${this.localize.term('webhooks_events')}
+					description=${this.localize.term('webhooks_eventDescription')}>
 					<umb-input-webhook-events
 						@change=${this.#onEventsChange}
 						.events=${this._webhook.events ?? []}
 						slot="editor"></umb-input-webhook-events>
 				</umb-property-layout>
 				${this.#renderContentTypePicker()}
-				<umb-property-layout label="Enabled" description="Is the webhook enabled?">
-					<uui-toggle slot="editor" .checked=${this._webhook.enabled} @input=${this.#onEnabledChange}></uui-toggle>
+				<umb-property-layout
+					label=${this.localize.term('webhooks_enabled')}
+					description=${this.localize.term('webhooks_enabledDescription')}>
+					<uui-toggle slot="editor" .checked=${this._webhook.enabled} @change=${this.#onEnabledChange}></uui-toggle>
 				</umb-property-layout>
-				<umb-property-layout label="Headers" description="Custom headers to include in the webhook request.">
+				<umb-property-layout
+					label=${this.localize.term('webhooks_headers')}
+					description=${this.localize.term('webhooks_headersDescription')}>
 					<umb-input-webhook-headers
 						@change=${this.#onHeadersChange}
 						.headers=${this._webhook.headers}