Feature: Webhooks workspace

package.json

@@ -60,6 +60,7 @@
 		"./data-type": "./dist-cms/packages/settings/data-types/index.js",
 		"./language": "./dist-cms/packages/settings/languages/index.js",
 		"./logviewer": "./dist-cms/packages/settings/logviewer/index.js",
+		"./webhooks": "./dist-cms/packages/settings/webhooks/index.js",
 		"./relation-type": "./dist-cms/packages/settings/relation-types/index.js",
 		"./tags": "./dist-cms/packages/tags/index.js",
 		"./partial-view": "./dist-cms/packages/templating/partial-views/index.js",

src/assets/lang/da-dk.ts

@@ -1751,6 +1751,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

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

src/mocks/browser-handlers.ts

@@ -25,6 +25,7 @@ import { handlers as languageHandlers } from './handlers/language.handlers.js';
 import { handlers as cultureHandlers } from './handlers/culture.handlers.js';
 import { handlers as redirectManagementHandlers } from './handlers/redirect-management.handlers.js';
 import { handlers as logViewerHandlers } from './handlers/log-viewer.handlers.js';
+import { handlers as webhookHandlers } from './handlers/webhook.handlers.js';
 import { handlers as packageHandlers } from './handlers/package.handlers.js';
 import { handlers as rteEmbedHandlers } from './handlers/rte-embed.handlers.js';
 import { handlers as stylesheetHandlers } from './handlers/stylesheet.handlers.js';
@@ -60,6 +61,7 @@ const handlers = [
 	...cultureHandlers,
 	...redirectManagementHandlers,
 	...logViewerHandlers,
+	...webhookHandlers,
 	...packageHandlers,
 	...rteEmbedHandlers,
 	...stylesheetHandlers,

src/mocks/data/webhooks.data.ts

@@ -0,0 +1,15 @@
+import { UmbData } from './data.js';
+//import {
+//	WebhooksResponseModel,
+//} from '@umbraco-cms/backoffice/backend-api';
+
+class UmbWebhooksData extends UmbData<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,7 +33,7 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<umb-workspace-editor alias="Umb.Workspace.Dictionary" headline="Log Viewer" .enforceNoFooter=${true}>
+			<umb-workspace-editor alias="Umb.Workspace.LogViewer" headline="Log Viewer" .enforceNoFooter=${true}>
 			</umb-workspace-editor>
 		`;
 	}

src/packages/settings/languages/workspace/language-root/language-root-workspace.element.ts

@@ -112,7 +112,8 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
 						label="Add language"
 						look="outline"
 						color="default"
-						href="section/settings/workspace/language/create"></uui-button>
+						href="section/settings/workspace/language/create">
+					</uui-button>
 
 					<!--- TODO: investigate if it's possible to use a collection component here --->
 					<umb-table .config=${this._tableConfig} .columns=${this._tableColumns} .items=${this._tableItems}></umb-table>

src/packages/settings/manifests.ts

@@ -2,6 +2,7 @@ import { manifests as dashboardManifests } from './dashboards/manifests.js';
 import { manifests as dataTypeManifests } from './data-types/manifests.js';
 import { manifests as extensionManifests } from './extensions/manifests.js';
 import { manifests as languageManifests } from './languages/manifests.js';
+import { manifests as webhooksManifests } from './webhooks/manifests.js';
 import { manifests as relationTypeManifests } from './relation-types/manifests.js';
 import { manifests as settingsMenuManifests } from './menu.manifests.js';
 import { manifests as settingsSectionManifests } from './section.manifests.js';
@@ -11,6 +12,7 @@ export const manifests = [
 	...dataTypeManifests,
 	...extensionManifests,
 	...languageManifests,
+	...webhooksManifests,
 	...relationTypeManifests,
 	...settingsMenuManifests,
 	...settingsSectionManifests,

src/packages/settings/webhooks/index.ts

@@ -0,0 +1 @@
+export * from './repository/index.js';

src/packages/settings/webhooks/manifests.ts

@@ -0,0 +1,4 @@
+import { manifests as treeManifests } from './menu-item/manifests.js';
+import { manifests as workspaceManifests } from './workspace/manifests.js';
+
+export const manifests = [...treeManifests, ...workspaceManifests];

src/packages/settings/webhooks/menu-item/manifests.ts

@@ -0,0 +1,16 @@
+import type { ManifestMenuItem } from '@umbraco-cms/backoffice/extension-registry';
+
+const menuItem: ManifestMenuItem = {
+	type: 'menuItem',
+	alias: 'Umb.MenuItem.Webhooks',
+	name: 'Webhooks Menu Item',
+	weight: 100,
+	meta: {
+		label: 'Webhooks',
+		icon: 'umb:anchor',
+		entityType: 'webhooks',
+		menus: ['Umb.Menu.Settings'],
+	},
+};
+
+export const manifests = [menuItem];

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

@@ -0,0 +1,2 @@
+export * from './webhooks.repository.js';
+//export * from './sources/index.js';

src/packages/settings/webhooks/repository/webhooks.repository.ts

@@ -0,0 +1,27 @@
+import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
+import { DirectionModel, LogLevelModel, SavedLogSearchPresenationBaseModel } from '@umbraco-cms/backoffice/backend-api';
+
+// Move to documentation / JSdoc
+/* We need to create a new instance of the repository from within the element context. We want the notifications to be displayed in the right context. */
+// element -> context -> repository -> (store) -> data source
+// All methods should be async and return a promise. Some methods might return an observable as part of the promise response.
+export class UmbWebhookRepository {
+	#host: UmbControllerHostElement;
+	#notificationService?: UmbNotificationContext;
+	#init;
+
+	constructor(host: UmbControllerHostElement) {
+		this.#host = host;
+
+		this.#init = new UmbContextConsumerController(this.#host, UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => {
+			this.#notificationService = instance;
+		}).asPromise();
+	}
+
+	async requestWebhooks({ skip, take } = { skip: 0, take: 1000 }) {
+		await this.#init;
+
+	}
+}

src/packages/settings/webhooks/workspace/manifests.ts

@@ -0,0 +1,3 @@
+import { manifests as webhooksRootManifests } from './webhooks/manifests.js';
+
+export const manifests = [...webhooksRootManifests];

src/packages/settings/webhooks/workspace/views/overview/index.ts

@@ -0,0 +1,4 @@
+//import './components/index.js';
+import { UmbWebhooksOverviewViewElement } from './webhooks-view.element.js';
+
+export default UmbWebhooksOverviewViewElement;

src/packages/settings/webhooks/workspace/views/overview/webhooks-view.element.ts

@@ -0,0 +1,132 @@
+import { UmbWebhookRepository } from '../../../repository/webhooks.repository.js';
+import { UmbWebhooksWorkspaceContext, UMB_APP_WEBHOOKS_CONTEXT_TOKEN } from '../../webhooks.context.js';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+@customElement('umb-webhooks-overview-view')
+export class UmbWebhooksOverviewViewElement extends UmbLitElement {
+	@state()
+	private _tableConfig: UmbTableConfig = {
+		allowSelection: false,
+	};
+
+	@state()
+	private _tableColumns: Array<UmbTableColumn> = [
+		{
+			name: 'Enabled',
+			alias: 'enabled',
+			elementName: 'umb-language-root-table-name-column-layout',
+		},
+		{
+			name: 'Events',
+			alias: 'events',
+		},
+		{
+			name: 'Url',
+			alias: 'url',
+		},
+		{
+			name: 'Types',
+			alias: 'types',
+		},
+		{
+			name: '',
+			alias: 'delete',
+			elementName: 'umb-language-root-table-delete-column-layout',
+		},
+	];
+
+	@state()s
+	private _tableItems: Array<UmbTableItem> = [];
+
+	#webhookRepository = new UmbWebhookRepository(this);
+
+	#webhooksContext?: UmbWebhooksWorkspaceContext;
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_APP_WEBHOOKS_CONTEXT_TOKEN, (instance) => {
+			this.#webhooksContext = instance;
+		});
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.#observeWebhook();
+	}
+
+	async #observeWebhook() {
+		const { asObservable } = await this.#webhookRepository.requestWebhooks();
+
+		if (asObservable) {
+			this.observe(asObservable(), (webhook) => this.#createTableItems(webhooks));
+		}
+	}
+
+	#createTableItems(webhooks: Array<LanguageResponseModel>) {
+		this._tableItems = webhooks.map((webhook) => {
+			return {
+				id: webhook.id ?? '',
+				icon: 'umb:anchor',
+				data: [
+					{
+						columnAlias: 'enabled',
+						value: webhook.enabled,
+					},
+					{
+						columnAlias: 'events',
+						value: webhook.events,
+					},
+					{
+						columnAlias: 'url',
+						value: webhook.url,
+					},
+					{
+						columnAlias: 'types',
+						value: webhook.types,
+					},
+					{
+						columnAlias: 'delete',
+						value: webhook,
+					},
+				],
+			};
+		});
+	}
+
+	render() {
+		return html`
+			<umb-body-layout main-no-padding headline="Languages">
+				<umb-body-layout header-transparent>
+					<uui-button
+						slot="header"
+						label="Add webhook"
+						look="outline"
+						color="default"
+						href="section/settings/workspace/webhook/create">
+					</uui-button>
+
+					<!--- TODO: investigate if it's possible to use a collection component here --->
+					<umb-table .config=${this._tableConfig} .columns=${this._tableColumns} .items=${this._tableItems}></umb-table>
+				</umb-body-layout>
+			</umb-body-layout>
+		`;
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-webhooks-overview-view': UmbWebhooksOverviewViewElement;
+	}
+}

src/packages/settings/webhooks/workspace/webhooks.context.ts

@@ -0,0 +1,40 @@
+import { UmbWebhookRepository } from '../repository/webhooks.repository.js';
+import { UmbBaseController, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { UMB_WORKSPACE_CONTEXT, UmbWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
+
+// TODO: Revisit usage of workspace for this case...
+export class UmbWebhooksWorkspaceContext extends UmbBaseController implements UmbWorkspaceContextInterface {
+	public readonly workspaceAlias: string = 'Umb.Workspace.Webhooks';
+	#repository: UmbWebhookRepository;
+
+	getEntityType() {
+		return 'webhooks';
+	}
+
+	getEntityName() {
+		return 'Webhooks';
+	}
+
+	getEntityId() {
+		return undefined;
+	}
+
+	currentPage = 1;
+
+	constructor(host: UmbControllerHostElement) {
+		super(host);
+		this.provideContext(UMB_WORKSPACE_CONTEXT, this);
+		// TODO: Revisit usage of workspace for this case... currently no other workspace context provides them self with their own token.
+		this.provideContext(UMB_APP_WEBHOOKS_CONTEXT_TOKEN, this);
+		this.#repository = new UmbWebhookRepository(host);
+	}
+
+	onChangeState = () => {
+
+	};
+}
+
+export const UMB_APP_WEBHOOKS_CONTEXT_TOKEN = new UmbContextToken<UmbWebhooksWorkspaceContext>(
+	UmbWebhooksWorkspaceContext.name,
+);