Feature: Webhooks workspace

src/apps/backoffice/backoffice.element.ts

@@ -36,6 +36,7 @@ const CORE_PACKAGES = [
 	import('../../packages/tiny-mce/umbraco-package.js'),
 	import('../../packages/umbraco-news/umbraco-package.js'),
 	import('../../packages/user/umbraco-package.js'),
+	import('../../packages/webhooks/umbraco-package.js'),
 ];
 
 @customElement('umb-backoffice')

src/assets/lang/da-dk.ts

@@ -1790,6 +1790,7 @@ export default {
 		settingsGroup: 'Indstillinger',
 		templatingGroup: 'Design og layout',
 		thirdPartyGroup: 'Tredjepart',
+		webhooks: 'Webhooks',
 	},
 	update: {
 		updateAvailable: 'Ny opdatering er klar',

src/assets/lang/en-us.ts

@@ -1782,6 +1782,7 @@ export default {
 		settingsGroup: 'Settings',
 		templatingGroup: 'Templating',
 		thirdPartyGroup: 'Third Party',
+		webhooks: 'Webhooks',
 	},
 	update: {
 		updateAvailable: 'New update ready',

src/mocks/browser-handlers.ts

@@ -11,6 +11,7 @@ import { handlers as healthCheckHandlers } from './handlers/health-check.handler
 import { handlers as installHandlers } from './handlers/install.handlers.js';
 import { handlers as languageHandlers } from './handlers/language/index.js';
 import { handlers as logViewerHandlers } from './handlers/log-viewer.handlers.js';
+import { handlers as webhookHandlers } from './handlers/webhook.handlers.js';
 import { handlers as mediaHandlers } from './handlers/media/index.js';
 import { handlers as mediaTypeHandlers } from './handlers/media-type/index.js';
 import { handlers as memberGroupHandlers } from './handlers/member-group/index.js';
@@ -52,6 +53,7 @@ const handlers = [
 	...installHandlers,
 	...languageHandlers,
 	...logViewerHandlers,
+	...webhookHandlers,
 	...mediaHandlers,
 	...mediaTypeHandlers,
 	...memberGroupHandlers,

src/mocks/data/webhooks.data.ts

@@ -0,0 +1,14 @@
+import { UmbMockDBBase } from './utils/mock-db-base.js';
+//import {
+//	WebhooksResponseModel,
+//} from '@umbraco-cms/backoffice/backend-api';
+
+class UmbWebhooksData extends UmbMockDBBase<any> {
+	constructor(data: any[]) {
+		super(data);
+	}
+}
+
+export const umbWebhooksData = {
+	//webhooks: new UmbWebhooksData(webhooks),
+};

src/mocks/handlers/log-viewer.handlers.ts

@@ -40,7 +40,7 @@ export const handlers = [
 	}),
 	//#endregion
 
-	//#region Temaplates
+	//#region Templates
 	rest.get(umbracoPath('/log-viewer/message-template'), (req, res, ctx) => {
 		const skip = req.url.searchParams.get('skip');
 		const skipNumber = skip ? Number.parseInt(skip) : undefined;
@@ -57,6 +57,7 @@ export const handlers = [
 		return res(ctx.delay(), ctx.status(200), ctx.json(response));
 	}),
 	//#endregion
+
 	//#region Logs
 	rest.get(umbracoPath('/log-viewer/level'), (req, res, ctx) => {
 		return res(ctx.delay(), ctx.status(200), ctx.json(umbLogViewerData.logLevels));

src/mocks/handlers/webhook.handlers.ts

@@ -0,0 +1,6 @@
+const { rest } = window.MockServiceWorker;
+//import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+export const handlers = [
+
+];

src/packages/log-viewer/workspace/logviewer/logviewer-workspace.element.ts

@@ -33,10 +33,7 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`
-			<umb-workspace-editor alias="Umb.Workspace.LogViewer" headline="Log Viewer" .enforceNoFooter=${true}>
-			</umb-workspace-editor>
-		`;
+		return html` <umb-workspace-editor headline="Log Viewer" .enforceNoFooter=${true}> </umb-workspace-editor> `;
 	}
 
 	static styles = [

src/packages/webhooks/collection/action/manifests.ts

@@ -0,0 +1,22 @@
+import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collection';
+import type { ManifestCollectionAction } from '@umbraco-cms/backoffice/extension-registry';
+
+export const createManifest: ManifestCollectionAction = {
+	type: 'collectionAction',
+	kind: 'button',
+	name: 'Create Webhook Collection Action',
+	alias: 'Umb.CollectionAction.Webhook.Create',
+	weight: 200,
+	meta: {
+		label: 'Create',
+		href: 'section/settings/workspace/webhook/create',
+	},
+	conditions: [
+		{
+			alias: UMB_COLLECTION_ALIAS_CONDITION,
+			match: 'Umb.Collection.Webhooks',
+		},
+	],
+};
+
+export const manifests = [createManifest];

src/packages/webhooks/collection/index.ts

@@ -0,0 +1,2 @@
+export { UmbWebhookCollectionRepository } from './repository/index.js';
+export { UMB_WEBHOOK_COLLECTION_ALIAS } from './manifests.js';

src/packages/webhooks/collection/manifests.ts

@@ -0,0 +1,26 @@
+import {
+	manifests as collectionRepositoryManifests,
+	UMB_WEBHOOK_COLLECTION_REPOSITORY_ALIAS,
+} from './repository/manifests.js';
+import { manifests as collectionViewManifests } from './views/manifests.js';
+import { manifests as collectionActionManifests } from './action/manifests.js';
+import type { ManifestCollection } from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_WEBHOOK_COLLECTION_ALIAS = 'Umb.Collection.Webhooks';
+
+const collectionManifest: ManifestCollection = {
+	type: 'collection',
+	kind: 'default',
+	alias: UMB_WEBHOOK_COLLECTION_ALIAS,
+	name: 'Webhook Collection',
+	meta: {
+		repositoryAlias: UMB_WEBHOOK_COLLECTION_REPOSITORY_ALIAS,
+	},
+};
+
+export const manifests = [
+	collectionManifest,
+	...collectionRepositoryManifests,
+	...collectionViewManifests,
+	...collectionActionManifests,
+];

src/packages/webhooks/collection/repository/index.ts

@@ -0,0 +1,2 @@
+export { UMB_WEBHOOK_COLLECTION_REPOSITORY_ALIAS } from './manifests.js';
+export { UmbWebhookCollectionRepository } from './webhook-collection.repository.js';

src/packages/webhooks/collection/repository/manifests.ts

@@ -0,0 +1,12 @@
+import type { ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_WEBHOOK_COLLECTION_REPOSITORY_ALIAS = 'Umb.Repository.WebhookCollection';
+
+const repository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_WEBHOOK_COLLECTION_REPOSITORY_ALIAS,
+	name: 'Webhook Collection Repository',
+	api: () => import('./webhook-collection.repository.js'),
+};
+
+export const manifests = [repository];

src/packages/webhooks/collection/repository/types.ts

@@ -0,0 +1,8 @@
+import type { UmbWebhookDetailModel } from '../../types.js';
+import type { UmbWebhookCollectionFilterModel } from '../types.js';
+import type { UmbCollectionDataSource } from '@umbraco-cms/backoffice/collection';
+
+export type UmbWebhookCollectionDataSource = UmbCollectionDataSource<
+	UmbWebhookDetailModel,
+	UmbWebhookCollectionFilterModel
+>;

src/packages/webhooks/collection/repository/webhook-collection.repository.ts

@@ -0,0 +1,21 @@
+import type { UmbWebhookCollectionFilterModel } from '../types.js';
+import { UmbWebhookCollectionServerDataSource } from './webhook-collection.server.data-source.js';
+import type { UmbWebhookCollectionDataSource } from './types.js';
+import type { UmbCollectionRepository } from '@umbraco-cms/backoffice/collection';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbWebhookCollectionRepository implements UmbCollectionRepository {
+	#collectionSource: UmbWebhookCollectionDataSource;
+
+	constructor(host: UmbControllerHost) {
+		this.#collectionSource = new UmbWebhookCollectionServerDataSource(host);
+	}
+
+	async requestCollection(filter: UmbWebhookCollectionFilterModel) {
+		return this.#collectionSource.getCollection(filter);
+	}
+
+	destroy(): void {}
+}
+
+export default UmbWebhookCollectionRepository;

src/packages/webhooks/collection/repository/webhook-collection.server.data-source.ts

@@ -0,0 +1,55 @@
+import type { UmbWebhookCollectionFilterModel } from '../types.js';
+import type { UmbWebhookDetailModel } from '../../types.js';
+import { UMB_WEBHOOK_ENTITY_TYPE } from '../../entity.js';
+import { WebhookResource } from '@umbraco-cms/backoffice/external/backend-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+
+/**
+ * A data source that fetches the webhook collection data from the server.
+ * @export
+ * @class UmbWebhookCollectionServerDataSource
+ * @implements {UmbCollectionDataSource}
+ */
+export class UmbWebhookCollectionServerDataSource implements UmbWebhookCollectionServerDataSource {
+	#host: UmbControllerHost;
+
+	/**
+	 * Creates an instance of UmbWebhookCollectionServerDataSource.
+	 * @param {UmbControllerHost} host
+	 * @memberof UmbWebhookCollectionServerDataSource
+	 */
+	constructor(host: UmbControllerHost) {
+		this.#host = host;
+	}
+
+	/**
+	 * Gets the Wwbhook collection filtered by the given filter.
+	 * @param {UmbWebhookCollectionFilterModel} filter
+	 * @return {*}
+	 * @memberof UmbWebhookCollectionServerDataSource
+	 */
+	async getCollection(_filter: UmbWebhookCollectionFilterModel) {
+		const { data, error } = await tryExecuteAndNotify(this.#host, WebhookResource.getWebhookItem({}));
+
+		if (data) {
+			const items = data.map((item) => {
+				const model: UmbWebhookDetailModel = {
+					entityType: UMB_WEBHOOK_ENTITY_TYPE,
+					unique: item.url,
+					name: item.name,
+					url: item.url,
+					enabled: item.enabled,
+					events: item.events.split(','),
+					types: item.types.split(','),
+				};
+
+				return model;
+			});
+
+			return { data: { items, total: data.length } };
+		}
+
+		return { error };
+	}
+}

src/packages/webhooks/collection/types.ts

@@ -0,0 +1,4 @@
+export interface UmbWebhookCollectionFilterModel {
+	skip?: number;
+	take?: number;
+}

src/packages/webhooks/collection/views/index.ts

@@ -0,0 +1 @@
+export { UMB_WEBHOOK_TABLE_COLLECTION_VIEW_ALIAS } from './manifests.js';

src/packages/webhooks/collection/views/manifests.ts

@@ -0,0 +1,24 @@
+import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collection';
+import type { ManifestCollectionView } from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_WEBHOOK_TABLE_COLLECTION_VIEW_ALIAS = 'Umb.CollectionView.Webhook.Table';
+
+const tableCollectionView: ManifestCollectionView = {
+	type: 'collectionView',
+	alias: UMB_WEBHOOK_TABLE_COLLECTION_VIEW_ALIAS,
+	name: 'Webhook Table Collection View',
+	js: () => import('./table/webhook-table-collection-view.element.js'),
+	meta: {
+		label: 'Table',
+		icon: 'icon-list',
+		pathName: 'table',
+	},
+	conditions: [
+		{
+			alias: UMB_COLLECTION_ALIAS_CONDITION,
+			match: 'Umb.Collection.Webhooks',
+		},
+	],
+};
+
+export const manifests = [tableCollectionView];

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

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

src/packages/webhooks/collection/views/table/column-layouts/entity-actions/webhook-table-entity-actions-column-layout.element.ts

@@ -0,0 +1,34 @@
+import type { UmbWebhookDetailModel } from '../../../../../types.js';
+import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-webhook-table-entity-actions-column-layout')
+export class UmbWebhookTableEntityActionsColumnLayoutElement extends UmbLitElement {
+	@property({ attribute: false })
+	value!: UmbWebhookDetailModel;
+
+	@state()
+	_isOpen = false;
+
+	#onActionExecuted() {
+		this._isOpen = false;
+	}
+
+	render() {
+		return html`
+			<umb-dropdown .open=${this._isOpen} compact hide-expand>
+				<uui-symbol-more slot="label"></uui-symbol-more>
+				<umb-entity-action-list
+					@action-executed=${this.#onActionExecuted}
+					entity-type=${this.value.entityType}
+					unique=${ifDefined(this.value.unique)}></umb-entity-action-list>
+			</umb-dropdown>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-webhook-table-entity-actions-column-layout': UmbWebhookTableEntityActionsColumnLayoutElement;
+	}
+}

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

@@ -0,0 +1,21 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, LitElement, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+
+@customElement('umb-w-table-name-column-layout')
+export class UmbLanguageTableNameColumnLayoutElement extends LitElement {
+	@property({ attribute: false })
+	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>`;
+	}
+
+	static styles = [UmbTextStyles];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-language-table-name-column-layout': UmbLanguageTableNameColumnLayoutElement;
+	}
+}