link

src/Umbraco.Web.UI.Client/src/packages/webhook/collection/repository/webhook-collection.server.data-source.ts

@@ -39,7 +39,7 @@ export class UmbWebhookCollectionServerDataSource implements UmbWebhookCollectio
 		const items = data.items.map((item) => {
 			const model: UmbWebhookDetailModel = {
 				entityType: UMB_WEBHOOK_ENTITY_TYPE,
-				unique: item.url,
+				unique: item.id,
 				url: item.url,
 				enabled: item.enabled,
 				headers: item.headers,

src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/name/webhook-table-name-column-layout.element.ts

@@ -1,21 +1,29 @@
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { html, LitElement, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, LitElement, nothing, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
 
-@customElement('umb-w-table-name-column-layout')
-export class UmbLanguageTableNameColumnLayoutElement extends LitElement {
+@customElement('umb-webhook-table-name-column-layout')
+export class UmbWebhookTableNameColumnLayoutElement extends LitElement {
 	@property({ attribute: false })
-	value!: { unique: string; name: string };
+	value?: { unique: string; name: string };
 
 	render() {
 		if (!this.value) return nothing;
-		return html`<a href=${'section/settings/workspace/language/edit/' + this.value.unique}>${this.value.name}</a>`;
+
+		return html`<a href=${'section/settings/workspace/webhook/edit/' + this.value.unique}>${this.value.name}</a>`;
 	}
 
-	static styles = [UmbTextStyles];
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				white-space: nowrap;
+			}
+		`,
+	];
 }
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-language-table-name-column-layout': UmbLanguageTableNameColumnLayoutElement;
+		'umb-webhook-table-name-column-layout': UmbWebhookTableNameColumnLayoutElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/remove/webhook-table-remove-column-layout.element.ts

@@ -4,6 +4,9 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-webhook-table-remove-column-layout')
 export class UmbWebhookTableRemoveColumnLayoutElement extends UmbLitElement {
+	@property()
+	value = '';
+
 	render() {
 		return html` <uui-button label="remove"></uui-button> `;
 	}

src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts

@@ -19,6 +19,11 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
 
 	@state()
 	private _tableColumns: Array<UmbTableColumn> = [
+		{
+			name: 'Name',
+			alias: 'name',
+			elementName: 'umb-webhook-table-name-column-layout',
+		},
 		{
 			name: 'Enabled',
 			alias: 'enabled',
@@ -63,18 +68,24 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
 	}
 
 	#createTableItems(webhooks: Array<UmbWebhookDetailModel>) {
-		this._tableItems = webhooks.map((webhook) => {
+		console.log(webhooks);
+		this._tableItems = webhooks.map((webhook, index) => {
 			return {
 				id: webhook.unique,
 				icon: 'icon-webhook',
 				data: [
 					{
-						columnAlias: 'enabled',
-						value: webhook.enabled,
+						columnAlias: 'name',
+						value: { name: `Webhook ${index + 1}`, unique: webhook.unique },
 					},
 					{
 						columnAlias: 'url',
 						value: webhook.url,
+						path: webhook.url,
+					},
+					{
+						columnAlias: 'enabled',
+						value: webhook.enabled,
 					},
 					{
 						columnAlias: 'events',
@@ -86,7 +97,7 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
 					},
 					{
 						columnAlias: 'remove',
-						value: '',
+						value: webhook.unique,
 					},
 				],
 			};