Skip to content

Commit 4e840b9

Browse files
madsrasmussenmadsrasmussen
authored
Merge pull request #2152 from umbraco/v14/bugfix/webhooks-localization
Bugfix: Webhooks localizations + other fixes
2 parents a64b795 + 1a7c846 commit 4e840b9

File tree

10 files changed

+113
-97
lines changed

10 files changed

+113
-97
lines changed

‎src/assets/lang/en.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1735,18 +1735,19 @@ export default {
17351735
enabled: 'Enabled',
17361736
events: 'Events',
17371737
event: 'Event',
1738-
url: 'Url',
1738+
url: 'URL',
17391739
types: 'Types',
17401740
webhookKey: 'Webhook key',
17411741
retryCount: 'Retry count',
1742-
urlDescription: 'The url to call when the webhook is triggered.',
1742+
urlDescription: 'The URL to call when the webhook is triggered.',
17431743
eventDescription: 'The events for which the webhook should be triggered.',
17441744
contentTypeDescription: 'Only trigger the webhook for a specific content type.',
17451745
enabledDescription: 'Is the webhook enabled?',
17461746
headersDescription: 'Custom headers to include in the webhook request.',
17471747
contentType: 'Content Type',
17481748
headers: 'Headers',
17491749
selectEventFirst: 'Please select an event first.',
1750+
selectEvents: 'Select events',
17501751
},
17511752
languages: {
17521753
addLanguage: 'Add language',

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit';
1+
import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
22
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
33

44
@customElement('umb-webhook-table-boolean-column-layout')
@@ -7,7 +7,7 @@ export class UmbWebhookTableBooleanColumnLayoutElement extends UmbLitElement {
77
value = false;
88

99
override render() {
10-
return this.value ? html`<uui-icon name="icon-check"></uui-icon>` : nothing;
10+
return html`<uui-icon name="${this.value ? 'check' : 'remove'}"></uui-icon>`;
1111
}
1212
}
1313

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export class UmbWebhookTableContentTypeColumnLayoutElement extends UmbLitElement
3232

3333
if (this.value?.contentTypeName && this.#repository) {
3434
const { data } = await this.#repository.requestItems(this.value.contentTypes);
35-
this._contentTypes = data?.map((item) => item.name).join(', ') ?? '';
35+
this._contentTypes = data?.map((item) => this.localize.string(item.name)).join(', ') ?? '';
3636
}
3737
}
3838

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import type { UmbWebhookDetailModel } from '../../../types.js';
22
import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
3+
import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit';
4+
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
35
import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
46
import type { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components';
5-
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
6-
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
7-
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
87

98
import './column-layouts/boolean/webhook-table-boolean-column-layout.element.js';
109
import './column-layouts/name/webhook-table-name-column-layout.element.js';
@@ -21,25 +20,25 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
2120
@state()
2221
private _tableColumns: Array<UmbTableColumn> = [
2322
{
24-
name: 'Name',
23+
name: this.localize.term('general_name'),
2524
alias: 'name',
2625
elementName: 'umb-webhook-table-name-column-layout',
2726
},
2827
{
29-
name: 'Enabled',
28+
name: this.localize.term('webhooks_enabled'),
3029
alias: 'enabled',
3130
elementName: 'umb-webhook-table-boolean-column-layout',
3231
},
3332
{
34-
name: 'URL',
33+
name: this.localize.term('webhooks_url'),
3534
alias: 'url',
3635
},
3736
{
38-
name: 'Events',
37+
name: this.localize.term('webhooks_events'),
3938
alias: 'events',
4039
},
4140
{
42-
name: 'Types',
41+
name: this.localize.term('webhooks_types'),
4342
alias: 'types',
4443
elementName: 'umb-webhook-table-content-type-column-layout',
4544
},
@@ -112,7 +111,6 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
112111
}
113112

114113
static override styles = [
115-
UmbTextStyles,
116114
css`
117115
:host {
118116
display: flex;

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

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -47,23 +47,29 @@ export class UmbInputWebhookEventsElement extends UmbLitElement {
4747
if (!this.events.length) return nothing;
4848

4949
return html`
50-
${repeat(
51-
this.events,
52-
(item) => item.alias,
53-
(item) => html`
54-
<span>${item.eventName}</span>
55-
<uui-button
56-
label=${this.localize.term('general_remove')}
57-
@click=${() => this.#removeEvent(item.alias)}></uui-button>
58-
`,
59-
)}
50+
<uui-ref-list>
51+
${repeat(
52+
this.events,
53+
(item) => item.alias,
54+
(item) => html`
55+
<uui-ref-node name=${item.eventName} @open=${this.#openModal}>
56+
<umb-icon slot="icon" name="icon-globe"></umb-icon>
57+
<uui-action-bar slot="actions">
58+
<uui-button
59+
label=${this.localize.term('general_remove')}
60+
@click=${() => this.#removeEvent(item.alias)}></uui-button>
61+
</uui-action-bar>
62+
</uui-ref-node>
63+
`,
64+
)}
65+
</uui-ref-list>
6066
`;
6167
}
6268

6369
override render() {
6470
return html`${this.#renderEvents()}
6571
<uui-button
66-
id="choose"
72+
id="btn-add"
6773
look="placeholder"
6874
label=${this.localize.term('general_choose')}
6975
@click=${this.#openModal}></uui-button>`;
@@ -72,15 +78,8 @@ export class UmbInputWebhookEventsElement extends UmbLitElement {
7278
static override styles = [
7379
UmbTextStyles,
7480
css`
75-
:host {
76-
display: grid;
77-
grid-template-columns: 1fr auto;
78-
gap: var(--uui-size-space-2) var(--uui-size-space-2);
79-
align-items: center;
80-
}
81-
82-
#choose {
83-
grid-column: -1 / 1;
81+
#btn-add {
82+
display: block;
8483
}
8584
`,
8685
];

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement {
1414
private _headers: Array<{ name: string; value: string }> = [];
1515

1616
@state()
17-
private _headerNames: string[] = ['Accept', 'Content-Type', 'User-Agent', 'Content-Length'];
17+
private _headerNames: string[] = ['Accept', 'Content-Length', 'Content-Type', 'User-Agent'];
1818

1919
get #filterHeaderNames() {
2020
return this._headerNames.filter((name) => !this._headers.find((header) => header.name === name));
@@ -78,7 +78,7 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement {
7878
.value=${header.value}
7979
@input=${(e: InputEvent) => this.#onInput(e, 'value', index)}
8080
list="valueList" />
81-
<uui-button @click=${() => this.#removeHeader(index)} label="Remove"></uui-button>
81+
<uui-button @click=${() => this.#removeHeader(index)} label=${this.localize.term('general_remove')}></uui-button>
8282
`;
8383
}
8484

@@ -105,8 +105,8 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement {
105105
if (!this._headers.length) return nothing;
106106

107107
return html`
108-
<span class="grid-top">KEY</span>
109-
<span class="grid-top">VALUE</span>
108+
<span class="grid-top"><umb-localize key="general_name">Name</umb-localize></span>
109+
<span class="grid-top"><umb-localize key="general_value">Value</umb-localize></span>
110110
<span class="grid-top"></span>
111111
${repeat(
112112
this._headers,

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

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { UmbWebhookEventRepository } from '../../repository/event/webhook-event.repository.js';
22
import type { UmbWebhookEventModel } from '../../types.js';
33
import type { UmbWebhookPickerModalData, UmbWebhookPickerModalValue } from './webhook-events-modal.token.js';
4-
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
5-
import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
6-
4+
import { customElement, html, state, repeat } from '@umbraco-cms/backoffice/external/lit';
75
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
86
import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
97

@@ -67,32 +65,36 @@ export class UmbWebhookEventsModalElement extends UmbModalBaseElement<
6765
}
6866

6967
override render() {
70-
return html`<umb-body-layout headline="Select events">
71-
<uui-box>
72-
${repeat(
73-
this._events,
74-
(item) => item.alias,
75-
(item) => html`
76-
<uui-menu-item
77-
label=${item.eventName}
78-
?disabled=${this.#getItemDisabled(item)}
79-
selectable
80-
@selected=${() => this.#selectionManager.select(item.alias)}
81-
@deselected=${() => this.#selectionManager.deselect(item.alias)}
82-
?selected=${this.value.events.includes(item)}></uui-menu-item>
83-
<uui-icon slot="icon" name="icon-globe"></uui-icon>
84-
</uui-menu-item>
85-
`,
86-
)}
87-
</uui-box>
88-
<div slot="actions">
89-
<uui-button label="Close" @click=${this.#close}></uui-button>
90-
<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
91-
</div>
92-
</umb-body-layout> `;
68+
return html`
69+
<umb-body-layout headline=${this.localize.term('webhooks_selectEvents')}>
70+
<uui-box>
71+
${repeat(
72+
this._events,
73+
(item) => item.alias,
74+
(item) => html`
75+
<uui-menu-item
76+
label=${item.eventName}
77+
?disabled=${this.#getItemDisabled(item)}
78+
selectable
79+
@selected=${() => this.#selectionManager.select(item.alias)}
80+
@deselected=${() => this.#selectionManager.deselect(item.alias)}
81+
?selected=${this.value.events.includes(item)}>
82+
<uui-icon slot="icon" name="icon-globe"></uui-icon>
83+
</uui-menu-item>
84+
`,
85+
)}
86+
</uui-box>
87+
<div slot="actions">
88+
<uui-button label=${this.localize.term('general_cancel')} @click=${this.#close}></uui-button>
89+
<uui-button
90+
label=${this.localize.term('general_submit')}
91+
look="primary"
92+
color="positive"
93+
@click=${this.#submit}></uui-button>
94+
</div>
95+
</umb-body-layout>
96+
`;
9397
}
94-
95-
static override styles = [UmbTextStyles, css``];
9698
}
9799

98100
export default UmbWebhookEventsModalElement;

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
55
@customElement('umb-webhook-root-workspace')
66
export class UmbWebhookRootWorkspaceElement extends UmbLitElement {
77
override render() {
8-
return html` <umb-body-layout main-no-padding headline="Webhooks">
9-
<umb-collection alias=${UMB_WEBHOOK_COLLECTION_ALIAS}></umb-collection>;
10-
</umb-body-layout>`;
8+
return html`
9+
<umb-body-layout main-no-padding headline=${this.localize.term('treeHeaders_webhooks')}>
10+
<umb-collection alias=${UMB_WEBHOOK_COLLECTION_ALIAS}></umb-collection>;
11+
</umb-body-layout>
12+
`;
1113
}
1214
}
1315

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

Lines changed: 37 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js';
21
import { UMB_WEBHOOK_WORKSPACE_CONTEXT } from '../webhook-workspace.context-token.js';
2+
import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js';
33
import type { UmbInputWebhookEventsElement } from '../../../components/input-webhook-events.element.js';
4-
import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
4+
import { css, customElement, html, state, nothing } from '@umbraco-cms/backoffice/external/lit';
55
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
6-
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
76
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
8-
import '@umbraco-cms/backoffice/culture';
9-
import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook';
10-
117
import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
128
import type { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type';
9+
import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook';
10+
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
1311
import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
1412

13+
import '@umbraco-cms/backoffice/culture';
1514
import '../../../components/input-webhook-headers.element.js';
1615
import '../../../components/input-webhook-events.element.js';
1716

@@ -43,9 +42,9 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
4342
});
4443
}
4544

46-
#onEventsChange(event: UmbChangeEvent) {
47-
const events = (event.target as UmbInputWebhookEventsElement).events;
48-
if (events[0].eventType !== this.contentType) {
45+
#onEventsChange(event: UmbChangeEvent & { target: UmbInputWebhookEventsElement }) {
46+
const events = event.target.events ?? [];
47+
if (events.length && events[0].eventType !== this.contentType) {
4948
this.#webhookWorkspaceContext?.setTypes([]);
5049
}
5150
this.#webhookWorkspaceContext?.setEvents(events);
@@ -75,7 +74,9 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
7574
if (this.contentType !== 'Content' && this.contentType !== 'Media') return nothing;
7675

7776
return html`
78-
<umb-property-layout label="Content Type" description="Only trigger the webhook for a specific content type.">
77+
<umb-property-layout
78+
label=${this.localize.term('webhooks_contentType')}
79+
description=${this.localize.term('webhooks_contentTypeDescription')}>
7980
${this.#renderContentTypePickerEditor()}
8081
</umb-property-layout>
8182
`;
@@ -84,17 +85,20 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
8485
#renderContentTypePickerEditor() {
8586
switch (this.contentType) {
8687
case 'Content':
87-
return html`<umb-input-document-type
88-
@change=${this.#onTypesChange}
89-
.selection=${this._webhook?.contentTypes ?? []}
90-
slot="editor"
91-
?elementTypesOnly=${true}></umb-input-document-type>`;
88+
return html`
89+
<umb-input-document-type
90+
slot="editor"
91+
@change=${this.#onTypesChange}
92+
.selection=${this._webhook?.contentTypes ?? []}
93+
?documentTypesOnly=${true}></umb-input-document-type>
94+
`;
9295
case 'Media':
93-
return html`<umb-input-media-type
94-
@change=${this.#onTypesChange}
95-
.selection=${this._webhook?.contentTypes ?? []}
96-
slot="editor"
97-
?elementTypesOnly=${true}></umb-input-media-type>`;
96+
return html`
97+
<umb-input-media-type
98+
slot="editor"
99+
@change=${this.#onTypesChange}
100+
.selection=${this._webhook?.contentTypes ?? []}></umb-input-media-type>
101+
`;
98102
default:
99103
return nothing;
100104
}
@@ -105,20 +109,28 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
105109

106110
return html`
107111
<uui-box>
108-
<umb-property-layout label="Url" description="The url to call when the webhook is triggered.">
112+
<umb-property-layout
113+
label=${this.localize.term('webhooks_url')}
114+
description=${this.localize.term('webhooks_urlDescription')}>
109115
<uui-input @input=${this.#onUrlChange} .value=${this._webhook.url} slot="editor"></uui-input>
110116
</umb-property-layout>
111-
<umb-property-layout label="Events" description="The events for which the webhook should be triggered.">
117+
<umb-property-layout
118+
label=${this.localize.term('webhooks_events')}
119+
description=${this.localize.term('webhooks_eventDescription')}>
112120
<umb-input-webhook-events
113121
@change=${this.#onEventsChange}
114122
.events=${this._webhook.events ?? []}
115123
slot="editor"></umb-input-webhook-events>
116124
</umb-property-layout>
117125
${this.#renderContentTypePicker()}
118-
<umb-property-layout label="Enabled" description="Is the webhook enabled?">
119-
<uui-toggle slot="editor" .checked=${this._webhook.enabled} @input=${this.#onEnabledChange}></uui-toggle>
126+
<umb-property-layout
127+
label=${this.localize.term('webhooks_enabled')}
128+
description=${this.localize.term('webhooks_enabledDescription')}>
129+
<uui-toggle slot="editor" .checked=${this._webhook.enabled} @change=${this.#onEnabledChange}></uui-toggle>
120130
</umb-property-layout>
121-
<umb-property-layout label="Headers" description="Custom headers to include in the webhook request.">
131+
<umb-property-layout
132+
label=${this.localize.term('webhooks_headers')}
133+
description=${this.localize.term('webhooks_headersDescription')}>
122134
<umb-input-webhook-headers
123135
@change=${this.#onHeadersChange}
124136
.headers=${this._webhook.headers}

0 commit comments

Comments
 (0)