From 5e8ce8f358a6c046b3dffc9a57532de1d83eca66 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 10 Sep 2020 13:46:47 -0400
Subject: [PATCH 1/9] Add event emitter to api

---
 api/package-lock.json | 5 +++++
 api/package.json      | 1 +
 api/src/emitter.ts    | 5 +++++
 3 files changed, 11 insertions(+)
 create mode 100644 api/src/emitter.ts

diff --git a/api/package-lock.json b/api/package-lock.json
index 6df0e51aac..4bba55a5a5 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -27875,6 +27875,11 @@
 			"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
 			"integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
 		},
+		"eventemitter2": {
+			"version": "6.4.3",
+			"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.3.tgz",
+			"integrity": "sha512-t0A2msp6BzOf+QAcI6z9XMktLj52OjGQg+8SJH6v5+3uxNpWYRR3wQmfA+6xtMU9kOC59qk9licus5dYcrYkMQ=="
+		},
 		"events": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
diff --git a/api/package.json b/api/package.json
index c77302432e..fe430d85a4 100644
--- a/api/package.json
+++ b/api/package.json
@@ -80,6 +80,7 @@
 		"cookie-parser": "^1.4.5",
 		"cors": "^2.8.5",
 		"dotenv": "^8.2.0",
+		"eventemitter2": "^6.4.3",
 		"execa": "^4.0.3",
 		"exif-reader": "^1.0.3",
 		"express": "^4.17.1",
diff --git a/api/src/emitter.ts b/api/src/emitter.ts
new file mode 100644
index 0000000000..a0a4563949
--- /dev/null
+++ b/api/src/emitter.ts
@@ -0,0 +1,5 @@
+import { EventEmitter2 } from 'eventemitter2';
+
+const emitter = new EventEmitter2({ wildcard: true });
+
+export default emitter;

From a046af7a5cd6351e26151c8af06b2e657be01d4a Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 10 Sep 2020 13:47:02 -0400
Subject: [PATCH 2/9] Emit item crud

---
 api/src/services/items.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/api/src/services/items.ts b/api/src/services/items.ts
index c716eca737..ce716e5edd 100644
--- a/api/src/services/items.ts
+++ b/api/src/services/items.ts
@@ -14,6 +14,7 @@ import {
 } from '../types';
 import Knex from 'knex';
 import cache from '../cache';
+import emitter from '../emitter';
 
 import PayloadService from './payload';
 import AuthorizationService from './authorization';
@@ -150,6 +151,13 @@ export default class ItemsService implements AbstractService {
 				await cache.clear();
 			}
 
+			emitter.emitAsync(`item.create.${this.collection}`, {
+				collection: this.collection,
+				item: primaryKeys,
+				action: 'create',
+				payload: payloads,
+			});
+
 			return primaryKeys;
 		});
 
@@ -311,6 +319,13 @@ export default class ItemsService implements AbstractService {
 				await cache.clear();
 			}
 
+			emitter.emitAsync(`item.update.${this.collection}`, {
+				collection: this.collection,
+				item: key,
+				action: 'update',
+				payload,
+			});
+
 			return key;
 		}
 
@@ -373,6 +388,12 @@ export default class ItemsService implements AbstractService {
 			await cache.clear();
 		}
 
+		emitter.emitAsync(`item.delete.${this.collection}`, {
+			collection: this.collection,
+			item: key,
+			action: 'delete',
+		});
+
 		return key;
 	}
 

From 9546dbb834f7f64d5ee7067f3fbe71e3ad593c40 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 10 Sep 2020 14:00:28 -0400
Subject: [PATCH 3/9] Dynamically register / fire webhooks

---
 api/src/app.ts                     |  6 +++
 api/src/controllers/webhooks.ts    | 14 +++--
 api/src/database/seeds/system.yaml | 22 +++++++-
 api/src/emitter.ts                 |  2 +-
 api/src/services/webhooks.ts       | 83 +++++++++++++++++++++++++++++-
 api/src/types/index.ts             |  1 +
 api/src/types/webhooks.ts          | 10 ++++
 7 files changed, 130 insertions(+), 8 deletions(-)
 create mode 100644 api/src/types/webhooks.ts

diff --git a/api/src/app.ts b/api/src/app.ts
index cef1c0a8eb..d8ea0c0745 100644
--- a/api/src/app.ts
+++ b/api/src/app.ts
@@ -36,10 +36,12 @@ import webhooksRouter from './controllers/webhooks';
 
 import notFoundHandler from './controllers/not-found';
 import sanitizeQuery from './middleware/sanitize-query';
+import WebhooksService from './services/webhooks';
 
 validateEnv(['KEY', 'SECRET']);
 
 const app = express();
+
 app.disable('x-powered-by');
 app.set('trust proxy', true);
 
@@ -99,4 +101,8 @@ app.use(respond);
 app.use(notFoundHandler);
 app.use(errorHandler);
 
+// Register all webhooks
+const webhooksService = new WebhooksService();
+webhooksService.register();
+
 export default app;
diff --git a/api/src/controllers/webhooks.ts b/api/src/controllers/webhooks.ts
index f13c09136f..9f224a3dba 100644
--- a/api/src/controllers/webhooks.ts
+++ b/api/src/controllers/webhooks.ts
@@ -13,7 +13,8 @@ router.post(
 		const item = await service.readByKey(primaryKey, req.sanitizedQuery);
 
 		res.locals.payload = { data: item || null };
-	}),
+		return next();
+	})
 );
 
 router.get(
@@ -26,7 +27,8 @@ router.get(
 		const meta = await metaService.getMetaForQuery(req.collection, req.sanitizedQuery);
 
 		res.locals.payload = { data: records || null, meta };
-	}),
+		return next();
+	})
 );
 
 router.get(
@@ -36,7 +38,8 @@ router.get(
 		const record = await service.readByKey(req.params.pk, req.sanitizedQuery);
 
 		res.locals.payload = { data: record || null };
-	}),
+		return next();
+	})
 );
 
 router.patch(
@@ -47,7 +50,8 @@ router.patch(
 		const item = await service.readByKey(primaryKey, req.sanitizedQuery);
 
 		res.locals.payload = { data: item || null };
-	}),
+		return next();
+	})
 );
 
 router.delete(
@@ -57,7 +61,7 @@ router.delete(
 		await service.delete(req.params.pk);
 
 		return next();
-	}),
+	})
 );
 
 export default router;
diff --git a/api/src/database/seeds/system.yaml b/api/src/database/seeds/system.yaml
index 968cddfbc9..1a7b519696 100644
--- a/api/src/database/seeds/system.yaml
+++ b/api/src/database/seeds/system.yaml
@@ -520,7 +520,27 @@ tables:
   directus_webhooks:
     id:
       increments: true
-    # TBD
+    name:
+      type: string
+      length: 255
+    method:
+      type: string
+      length: 10
+    url:
+      type: string
+      length: 255
+    status:
+      type: string
+      length: 10
+    data:
+      type: boolean
+      default: false
+    actions:
+      type: string
+      length: 100
+    collections:
+      type: string
+      length: 255
 
 rows:
   directus_collections:
diff --git a/api/src/emitter.ts b/api/src/emitter.ts
index a0a4563949..b6a984e212 100644
--- a/api/src/emitter.ts
+++ b/api/src/emitter.ts
@@ -1,5 +1,5 @@
 import { EventEmitter2 } from 'eventemitter2';
 
-const emitter = new EventEmitter2({ wildcard: true });
+const emitter = new EventEmitter2({ wildcard: true, verboseMemoryLeak: true });
 
 export default emitter;
diff --git a/api/src/services/webhooks.ts b/api/src/services/webhooks.ts
index f4b962f759..f16ecf20f1 100644
--- a/api/src/services/webhooks.ts
+++ b/api/src/services/webhooks.ts
@@ -1,8 +1,89 @@
 import ItemsService from './items';
-import { AbstractServiceOptions } from '../types';
+import { Item, PrimaryKey, AbstractServiceOptions } from '../types';
+import emitter from '../emitter';
+import { ListenerFn } from 'eventemitter2';
+import { Webhook } from '../types';
+import axios from 'axios';
+import logger from '../logger';
+
+let registered: { event: string; handler: ListenerFn }[] = [];
 
 export default class WebhooksService extends ItemsService {
 	constructor(options?: AbstractServiceOptions) {
 		super('directus_webhooks', options);
 	}
+
+	async register() {
+		this.unregister();
+
+		const webhooks = await this.knex
+			.select<Webhook[]>('*')
+			.from('directus_webhooks')
+			.where({ status: 'active' });
+
+		for (const webhook of webhooks) {
+			if (webhook.actions === '*') {
+				if (webhook.collections === '*') {
+					const event = 'item.*.*';
+					const handler = this.createHandler(webhook);
+					emitter.on(event, handler);
+					registered.push({ event, handler });
+				} else {
+					for (const collection of webhook.collections.split(',')) {
+						const event = `item.*.${collection}`;
+						const handler = this.createHandler(webhook);
+						emitter.on(event, handler);
+						registered.push({ event, handler });
+					}
+				}
+			} else {
+				for (const action of webhook.actions.split(',')) {
+					if (webhook.collections === '*') {
+						const event = `item.${action}.*`;
+						const handler = this.createHandler(webhook);
+						emitter.on(event, handler);
+						registered.push({ event, handler });
+					} else {
+						for (const collection of webhook.collections.split(',')) {
+							const event = `item.${action}.${collection}`;
+							const handler = this.createHandler(webhook);
+							emitter.on(event, handler);
+							registered.push({ event, handler });
+						}
+					}
+				}
+			}
+		}
+	}
+
+	unregister() {
+		for (const { event, handler } of registered) {
+			emitter.off(event, handler);
+		}
+
+		registered = [];
+	}
+
+	createHandler(webhook: Webhook): ListenerFn {
+		return async (data) => {
+			try {
+				await axios({
+					url: webhook.url,
+					method: webhook.method,
+					data: webhook.data ? data : null,
+				});
+			} catch (error) {
+				logger.warn(`Webhook "${webhook.name}" (id: ${webhook.id}) failed`);
+				logger.warn(error);
+			}
+		};
+	}
+
+	async create(data: Partial<Item>[]): Promise<PrimaryKey[]>;
+	async create(data: Partial<Item>): Promise<PrimaryKey>;
+	async create(data: Partial<Item> | Partial<Item>[]): Promise<PrimaryKey | PrimaryKey[]> {
+		const result = await super.create(data);
+		await this.register();
+		return result;
+	}
 }
diff --git a/api/src/types/index.ts b/api/src/types/index.ts
index 1543d0e6e8..52ca062a11 100644
--- a/api/src/types/index.ts
+++ b/api/src/types/index.ts
@@ -12,3 +12,4 @@ export * from './query';
 export * from './relation';
 export * from './services';
 export * from './sessions';
+export * from './webhooks';
diff --git a/api/src/types/webhooks.ts b/api/src/types/webhooks.ts
new file mode 100644
index 0000000000..21922a0903
--- /dev/null
+++ b/api/src/types/webhooks.ts
@@ -0,0 +1,10 @@
+export type Webhook = {
+	id: number;
+	name: string;
+	method: 'GET' | 'POST';
+	url: string;
+	status: 'active' | 'inactive';
+	data: boolean;
+	actions: string;
+	collections: string;
+};

From 587d325301892ab0693f785af8db152fe5cafd42 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 10 Sep 2020 14:44:52 -0400
Subject: [PATCH 4/9] Re-init webhooks correclty

---
 api/src/services/fields.ts   |  2 ++
 api/src/services/webhooks.ts | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/api/src/services/fields.ts b/api/src/services/fields.ts
index f655654186..3cafb703f6 100644
--- a/api/src/services/fields.ts
+++ b/api/src/services/fields.ts
@@ -234,6 +234,8 @@ export default class FieldsService {
 					const type = field.type as 'float' | 'decimal';
 					/** @todo add precision and scale support */
 					column = table[type](field.field /* precision, scale */);
+				} else if (field.type === 'csv') {
+					column = table.string(field.field);
 				} else {
 					column = table[field.type](field.field);
 				}
diff --git a/api/src/services/webhooks.ts b/api/src/services/webhooks.ts
index f16ecf20f1..bd0c29388d 100644
--- a/api/src/services/webhooks.ts
+++ b/api/src/services/webhooks.ts
@@ -83,7 +83,33 @@ export default class WebhooksService extends ItemsService {
 	async create(data: Partial<Item>): Promise<PrimaryKey>;
 	async create(data: Partial<Item> | Partial<Item>[]): Promise<PrimaryKey | PrimaryKey[]> {
 		const result = await super.create(data);
+
 		await this.register();
+
+		return result;
+	}
+
+	update(data: Partial<Item>, keys: PrimaryKey[]): Promise<PrimaryKey[]>;
+	update(data: Partial<Item>, key: PrimaryKey): Promise<PrimaryKey>;
+	update(data: Partial<Item>[]): Promise<PrimaryKey[]>;
+	async update(
+		data: Partial<Item> | Partial<Item>[],
+		key?: PrimaryKey | PrimaryKey[]
+	): Promise<PrimaryKey | PrimaryKey[]> {
+		const result = await super.update(data, key as any);
+
+		await this.register();
+
+		return result;
+	}
+
+	delete(key: PrimaryKey): Promise<PrimaryKey>;
+	delete(keys: PrimaryKey[]): Promise<PrimaryKey[]>;
+	async delete(key: PrimaryKey | PrimaryKey[]): Promise<PrimaryKey | PrimaryKey[]> {
+		const result = await super.delete(key as any);
+
+		await this.register();
+
 		return result;
 	}
 }

From 6f201e72b0f4f4439708c5bd500b5e3a94d3ade8 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 10 Sep 2020 14:44:55 -0400
Subject: [PATCH 5/9] Add webhooks browse

---
 app/src/lang/en-US/index.json                 |   3 +
 app/src/modules/collections/index.ts          |   8 +
 .../settings/routes/webhooks/browse.vue       | 153 +++++++++++++++++-
 app/src/types/fields.ts                       |   1 +
 .../get-default-interface-for-type.ts         |   1 +
 5 files changed, 160 insertions(+), 6 deletions(-)

diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 28c5cc9972..6ce943dc18 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -459,6 +459,9 @@
 	"user_count": "No Users | One User | {count} Users",
 	"no_users_copy": "There are no users in this role yet.",
 
+	"webhooks_count": "No Webhooks | One Webhook | {count} Webhooks",
+	"no_webhooks_copy": "There are no webhooks yet.",
+
 	"all_items": "All Items",
 
 	"no_collections": "No Collections",
diff --git a/app/src/modules/collections/index.ts b/app/src/modules/collections/index.ts
index b32b6d7c33..785dec032c 100644
--- a/app/src/modules/collections/index.ts
+++ b/app/src/modules/collections/index.ts
@@ -32,6 +32,14 @@ const checkForSystem: NavigationGuard = (to, from, next) => {
 		}
 	}
 
+	if (to.params.collection === 'directus_webhooks') {
+		if (to.params.primaryKey) {
+			return next(`/settings/webhooks/${to.params.primaryKey}`);
+		} else {
+			return next('/settings/webhooks');
+		}
+	}
+
 	return next();
 };
 
diff --git a/app/src/modules/settings/routes/webhooks/browse.vue b/app/src/modules/settings/routes/webhooks/browse.vue
index 2e9b58f4ee..acf688e878 100644
--- a/app/src/modules/settings/routes/webhooks/browse.vue
+++ b/app/src/modules/settings/routes/webhooks/browse.vue
@@ -12,9 +12,78 @@
 			<settings-navigation />
 		</template>
 
-		<div class="content">
-			<v-notice>Pre-Release: Feature not yet available</v-notice>
-		</div>
+		<template #actions>
+			<search-input v-model="searchQuery" />
+
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
+				<template #activator="{ on }">
+					<v-button rounded icon class="action-delete" @click="on">
+						<v-icon name="delete" outline />
+					</v-button>
+				</template>
+
+				<v-card>
+					<v-card-title>{{ $tc('batch_delete_confirm', selection.length) }}</v-card-title>
+
+					<v-card-actions>
+						<v-button @click="confirmDelete = false" secondary>
+							{{ $t('cancel') }}
+						</v-button>
+						<v-button @click="batchDelete" class="action-delete" :loading="deleting">
+							{{ $t('delete') }}
+						</v-button>
+					</v-card-actions>
+				</v-card>
+			</v-dialog>
+
+			<v-button
+				rounded
+				icon
+				class="action-batch"
+				v-if="selection.length > 1"
+				:to="batchLink"
+				v-tooltip.bottom="$t('edit')"
+			>
+				<v-icon name="edit" outline />
+			</v-button>
+
+			<v-button rounded icon :to="addNewLink" v-tooltip.bottom="$t('create_webhook')">
+				<v-icon name="add" />
+			</v-button>
+		</template>
+
+		<component
+			class="layout"
+			ref="layoutRef"
+			:is="`layout-${layout}`"
+			collection="directus_webhooks"
+			:selection.sync="selection"
+			:layout-options.sync="layoutOptions"
+			:layout-query.sync="layoutQuery"
+			:filters="filters"
+			:search-query="searchQuery"
+			@update:filters="filters = $event"
+		>
+			<template #no-results>
+				<v-info :title="$t('no_results')" icon="search" center>
+					{{ $t('no_results_copy') }}
+
+					<template #append>
+						<v-button @click="clearFilters">{{ $t('clear_filters') }}</v-button>
+					</template>
+				</v-info>
+			</template>
+
+			<template #no-items>
+				<v-info :title="$tc('webhooks_count', 0)" icon="people_alt" center>
+					{{ $t('no_webhooks_copy') }}
+
+					<template #append>
+						<v-button :to="{ path: '/settings/webhooks/+', query: queryFilters }">{{ $t('create_webhook') }}</v-button>
+					</template>
+				</v-info>
+			</template>
+		</component>
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
@@ -27,10 +96,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, computed, ref } from '@vue/composition-api';
 import SettingsNavigation from '../../components/navigation.vue';
-
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import marked from 'marked';
+import { LayoutComponent } from '@/layouts/types';
+import { usePreset } from '@/composables/use-preset';
+import { i18n } from '@/lang';
+import api from '@/api';
+import SearchInput from '@/views/private/components/search-input';
 
 type Item = {
 	[field: string]: any;
@@ -38,7 +112,74 @@ type Item = {
 
 export default defineComponent({
 	name: 'webhooks-browse',
-	components: { SettingsNavigation, LayoutDrawerDetail },
+	components: { SettingsNavigation, LayoutDrawerDetail, SearchInput },
+	setup(props) {
+		const layoutRef = ref<LayoutComponent | null>(null);
+
+		const selection = ref<Item[]>([]);
+
+		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_webhooks'));
+		const { addNewLink, batchLink } = useLinks();
+		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
+
+		return {
+			addNewLink,
+			batchDelete,
+			batchLink,
+			confirmDelete,
+			deleting,
+			filters,
+			layoutRef,
+			selection,
+			layoutOptions,
+			layoutQuery,
+			layout,
+			searchQuery,
+			marked,
+			clearFilters,
+		};
+
+		function useBatchDelete() {
+			const confirmDelete = ref(false);
+			const deleting = ref(false);
+
+			return { confirmDelete, deleting, batchDelete };
+
+			async function batchDelete() {
+				deleting.value = true;
+
+				confirmDelete.value = false;
+
+				const batchPrimaryKeys = selection.value;
+
+				await api.delete(`/webhooks/${batchPrimaryKeys}`);
+
+				await layoutRef.value?.refresh();
+
+				selection.value = [];
+				deleting.value = false;
+				confirmDelete.value = false;
+			}
+		}
+
+		function useLinks() {
+			const addNewLink = computed<string>(() => {
+				return `/webhooks/+`;
+			});
+
+			const batchLink = computed<string>(() => {
+				const batchPrimaryKeys = selection.value;
+				return `/webhooks/${batchPrimaryKeys}`;
+			});
+
+			return { addNewLink, batchLink };
+		}
+
+		function clearFilters() {
+			filters.value = [];
+			searchQuery.value = null;
+		}
+	}
 });
 </script>
 
diff --git a/app/src/types/fields.ts b/app/src/types/fields.ts
index 46bf69b359..acbf689417 100644
--- a/app/src/types/fields.ts
+++ b/app/src/types/fields.ts
@@ -23,6 +23,7 @@ export const types = [
 	'timestamp',
 	'binary',
 	'uuid',
+	'csv',
 	'unknown',
 ] as const;
 
diff --git a/app/src/utils/get-default-interface-for-type/get-default-interface-for-type.ts b/app/src/utils/get-default-interface-for-type/get-default-interface-for-type.ts
index 7753595c10..448e045369 100644
--- a/app/src/utils/get-default-interface-for-type/get-default-interface-for-type.ts
+++ b/app/src/utils/get-default-interface-for-type/get-default-interface-for-type.ts
@@ -17,6 +17,7 @@ const defaultInterfaceMap: Record<typeof types[number], string> = {
 	timestamp: 'datetime',
 	uuid: 'text-input',
 	unknown: 'text-input',
+	csv: 'tags'
 };
 
 /**

From ce5cc907752f1ebd0ec9ffc70fdda8b406aab1ca Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 10 Sep 2020 14:58:08 -0400
Subject: [PATCH 6/9] Add collections interface

---
 api/src/database/seeds/system.yaml            |  2 +-
 app/src/interfaces/collection/collection.vue  | 45 +++++++++++++++++++
 app/src/interfaces/collection/index.ts        | 29 ++++++++++++
 .../interfaces/collections/collections.vue    |  4 +-
 app/src/interfaces/collections/index.ts       |  4 +-
 app/src/lang/en-US/interfaces.json            |  5 +++
 6 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 app/src/interfaces/collection/collection.vue
 create mode 100644 app/src/interfaces/collection/index.ts

diff --git a/api/src/database/seeds/system.yaml b/api/src/database/seeds/system.yaml
index 1a7b519696..e18ceee482 100644
--- a/api/src/database/seeds/system.yaml
+++ b/api/src/database/seeds/system.yaml
@@ -901,7 +901,7 @@ rows:
                       field: collection
                       type: string
                       system:
-                        interface: collections
+                        interface: collection
                         width: full
         special: json
         sort: 10
diff --git a/app/src/interfaces/collection/collection.vue b/app/src/interfaces/collection/collection.vue
new file mode 100644
index 0000000000..b6265bee3f
--- /dev/null
+++ b/app/src/interfaces/collection/collection.vue
@@ -0,0 +1,45 @@
+<template>
+	<v-select :value="value" :disabled="disabled" :items="items" @input="$emit('input', $event)" />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api';
+import { useCollectionsStore } from '@/stores/';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: String,
+			default: null,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		includeSystem: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const collectionsStore = useCollectionsStore();
+
+		const collections = computed(() => {
+			if (props.includeSystem) return collectionsStore.state.collections;
+
+			return collectionsStore.state.collections.filter(
+				(collection) => collection.collection.startsWith('directus_') === false
+			);
+		});
+
+		const items = computed(() => {
+			return collections.value.map((collection) => ({
+				text: collection.name,
+				value: collection.collection,
+			}));
+		});
+
+		return { items };
+	},
+});
+</script>
diff --git a/app/src/interfaces/collection/index.ts b/app/src/interfaces/collection/index.ts
new file mode 100644
index 0000000000..0bf3265f0d
--- /dev/null
+++ b/app/src/interfaces/collection/index.ts
@@ -0,0 +1,29 @@
+import { defineInterface } from '@/interfaces/define';
+import InterfaceCollection from './collection.vue';
+
+export default defineInterface(({ i18n }) => ({
+	id: 'collections',
+	name: i18n.t('interfaces.collection.collection'),
+	description: i18n.t('interfaces.collection.description'),
+	icon: 'featured_play_list',
+	component: InterfaceCollection,
+	types: ['string'],
+	options: [
+		{
+			field: 'includeSystem',
+			name: i18n.t('system'),
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+				options: {
+					label: i18n.t('interfaces.collection.include_system_collections'),
+				},
+			},
+			schema: {
+				default_value: false,
+			},
+		},
+	],
+	recommendedDisplays: ['collection'],
+}));
diff --git a/app/src/interfaces/collections/collections.vue b/app/src/interfaces/collections/collections.vue
index b6265bee3f..60563684b0 100644
--- a/app/src/interfaces/collections/collections.vue
+++ b/app/src/interfaces/collections/collections.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-select :value="value" :disabled="disabled" :items="items" @input="$emit('input', $event)" />
+	<interface-checkboxes :choices="items" @input="$listeners.input" :value="value" :disabled="disabled" />
 </template>
 
 <script lang="ts">
@@ -9,7 +9,7 @@ import { useCollectionsStore } from '@/stores/';
 export default defineComponent({
 	props: {
 		value: {
-			type: String,
+			type: Array,
 			default: null,
 		},
 		disabled: {
diff --git a/app/src/interfaces/collections/index.ts b/app/src/interfaces/collections/index.ts
index f3da84141a..c77de822e3 100644
--- a/app/src/interfaces/collections/index.ts
+++ b/app/src/interfaces/collections/index.ts
@@ -7,7 +7,7 @@ export default defineInterface(({ i18n }) => ({
 	description: i18n.t('interfaces.collections.description'),
 	icon: 'featured_play_list',
 	component: InterfaceCollections,
-	types: ['string'],
+	types: ['json', 'csv'],
 	options: [
 		{
 			field: 'includeSystem',
@@ -25,5 +25,5 @@ export default defineInterface(({ i18n }) => ({
 			},
 		},
 	],
-	recommendedDisplays: ['collection'],
+	recommendedDisplays: ['labels'],
 }));
diff --git a/app/src/lang/en-US/interfaces.json b/app/src/lang/en-US/interfaces.json
index 180e5f9331..e45115a92f 100644
--- a/app/src/lang/en-US/interfaces.json
+++ b/app/src/lang/en-US/interfaces.json
@@ -14,6 +14,11 @@
 			"line_number": "Line Number",
 			"placeholder": "Enter code here..."
 		},
+		"collection": {
+			"collection": "Collection",
+			"description": "Select between existing collections",
+			"include_system_collections": "Include System Collections"
+		},
 		"collections": {
 			"collections": "Collections",
 			"description": "Select between existing collections",

From 76dea282ad7eba810f0412fdf7c9aa0574466deb Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 10 Sep 2020 14:58:47 -0400
Subject: [PATCH 7/9] Make collection/collections system interfaces

---
 app/src/interfaces/{ => _system}/collection/collection.vue   | 0
 app/src/interfaces/{ => _system}/collection/index.ts         | 1 +
 app/src/interfaces/{ => _system}/collections/collections.vue | 0
 app/src/interfaces/{ => _system}/collections/index.ts        | 1 +
 4 files changed, 2 insertions(+)
 rename app/src/interfaces/{ => _system}/collection/collection.vue (100%)
 rename app/src/interfaces/{ => _system}/collection/index.ts (97%)
 rename app/src/interfaces/{ => _system}/collections/collections.vue (100%)
 rename app/src/interfaces/{ => _system}/collections/index.ts (97%)

diff --git a/app/src/interfaces/collection/collection.vue b/app/src/interfaces/_system/collection/collection.vue
similarity index 100%
rename from app/src/interfaces/collection/collection.vue
rename to app/src/interfaces/_system/collection/collection.vue
diff --git a/app/src/interfaces/collection/index.ts b/app/src/interfaces/_system/collection/index.ts
similarity index 97%
rename from app/src/interfaces/collection/index.ts
rename to app/src/interfaces/_system/collection/index.ts
index 0bf3265f0d..3f1e2e2bd0 100644
--- a/app/src/interfaces/collection/index.ts
+++ b/app/src/interfaces/_system/collection/index.ts
@@ -25,5 +25,6 @@ export default defineInterface(({ i18n }) => ({
 			},
 		},
 	],
+	system: true,
 	recommendedDisplays: ['collection'],
 }));
diff --git a/app/src/interfaces/collections/collections.vue b/app/src/interfaces/_system/collections/collections.vue
similarity index 100%
rename from app/src/interfaces/collections/collections.vue
rename to app/src/interfaces/_system/collections/collections.vue
diff --git a/app/src/interfaces/collections/index.ts b/app/src/interfaces/_system/collections/index.ts
similarity index 97%
rename from app/src/interfaces/collections/index.ts
rename to app/src/interfaces/_system/collections/index.ts
index c77de822e3..8d21692cbb 100644
--- a/app/src/interfaces/collections/index.ts
+++ b/app/src/interfaces/_system/collections/index.ts
@@ -25,5 +25,6 @@ export default defineInterface(({ i18n }) => ({
 			},
 		},
 	],
+	system: true,
 	recommendedDisplays: ['labels'],
 }));

From 3e72d09f450c69cf3bdd19d70308affe3de9e417 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 10 Sep 2020 15:14:04 -0400
Subject: [PATCH 8/9] Add correct form layout to webhooks

---
 api/src/database/seeds/system.yaml            | 80 ++++++++++++++++++-
 api/src/services/items.ts                     |  1 +
 .../interfaces/_system/collection/index.ts    |  2 +-
 .../_system/collections/collections.vue       |  5 +-
 app/src/lang/en-US/index.json                 |  1 +
 .../settings/routes/webhooks/browse.vue       |  4 +-
 6 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/api/src/database/seeds/system.yaml b/api/src/database/seeds/system.yaml
index e18ceee482..640924816a 100644
--- a/api/src/database/seeds/system.yaml
+++ b/api/src/database/seeds/system.yaml
@@ -1836,7 +1836,85 @@ rows:
         hidden: true
         locked: true
 
-      # directus_webhooks TBD
+      - collection: directus_webhooks
+        field: id
+        hidden: true
+        locked: true
+      - collection: directus_webhooks
+        field: name
+        interface: text-input
+        locked: true
+        sort: 1
+        width: full
+      - collection: directus_webhooks
+        field: method
+        interface: dropdown
+        locked: true
+        options:
+          choices:
+            - GET
+            - POST
+        sort: 2
+        width: half
+      - collection: directus_webhooks
+        field: url
+        interface: text-input
+        locked: true
+        options:
+          iconRight: link
+        sort: 3
+        width: half
+      - collection: directus_webhooks
+        field: status
+        interface: dropdown
+        locked: true
+        options:
+          choices:
+            - text: Active
+              value: active
+            - text: Inactive
+              value: inactive
+        sort: 4
+        width: half
+      - collection: directus_webhooks
+        field: data
+        interface: toggle
+        locked: true
+        options:
+          choices:
+            label: Include item data in request
+        sort: 5
+        width: half
+      - collection: directus_webhooks
+        field: triggers_divider
+        interface: divider
+        options:
+          icon: api
+          title: Triggers
+          color: '#2F80ED'
+        special: alias
+        sort: 6
+        width: full
+      - collection: directus_webhooks
+        field: actions
+        interface: checkboxes
+        options:
+          choices:
+            - text: Create
+              value: create
+            - text: Update
+              value: update
+            - text: Delete
+              value: delete
+        special: csv
+        sort: 7
+        width: full
+      - collection: directus_webhooks
+        field: collections
+        interface: collections
+        special: csv
+        sort: 8
+        width: full
 
       - collection: directus_activity
         field: action
diff --git a/api/src/services/items.ts b/api/src/services/items.ts
index ce716e5edd..b46b7fe9bc 100644
--- a/api/src/services/items.ts
+++ b/api/src/services/items.ts
@@ -175,6 +175,7 @@ export default class ItemsService implements AbstractService {
 		}
 
 		const records = await runAST(ast);
+
 		return records;
 	}
 
diff --git a/app/src/interfaces/_system/collection/index.ts b/app/src/interfaces/_system/collection/index.ts
index 3f1e2e2bd0..99bb3c673c 100644
--- a/app/src/interfaces/_system/collection/index.ts
+++ b/app/src/interfaces/_system/collection/index.ts
@@ -2,7 +2,7 @@ import { defineInterface } from '@/interfaces/define';
 import InterfaceCollection from './collection.vue';
 
 export default defineInterface(({ i18n }) => ({
-	id: 'collections',
+	id: 'collection',
 	name: i18n.t('interfaces.collection.collection'),
 	description: i18n.t('interfaces.collection.description'),
 	icon: 'featured_play_list',
diff --git a/app/src/interfaces/_system/collections/collections.vue b/app/src/interfaces/_system/collections/collections.vue
index 60563684b0..2c57a74067 100644
--- a/app/src/interfaces/_system/collections/collections.vue
+++ b/app/src/interfaces/_system/collections/collections.vue
@@ -1,5 +1,8 @@
 <template>
-	<interface-checkboxes :choices="items" @input="$listeners.input" :value="value" :disabled="disabled" />
+	<v-notice v-if="items.length === 0">
+		{{ $t('no_collections') }}
+	</v-notice>
+	<interface-checkboxes v-else :choices="items" @input="$listeners.input" :value="value" :disabled="disabled" />
 </template>
 
 <script lang="ts">
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 03e2aa5411..42cd3b31d3 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -17,6 +17,7 @@
 	"create_preset": "Create Preset",
 	"create_role": "Create Role",
 	"create_user": "Create User",
+	"create_webhook": "Create Webhook",
 
 	"rename_folder": "Rename Folder",
 	"delete_folder": "Delete Folder",
diff --git a/app/src/modules/settings/routes/webhooks/browse.vue b/app/src/modules/settings/routes/webhooks/browse.vue
index acf688e878..cf1fa4b282 100644
--- a/app/src/modules/settings/routes/webhooks/browse.vue
+++ b/app/src/modules/settings/routes/webhooks/browse.vue
@@ -75,11 +75,11 @@
 			</template>
 
 			<template #no-items>
-				<v-info :title="$tc('webhooks_count', 0)" icon="people_alt" center>
+				<v-info :title="$tc('webhooks_count', 0)" icon="anchor" center>
 					{{ $t('no_webhooks_copy') }}
 
 					<template #append>
-						<v-button :to="{ path: '/settings/webhooks/+', query: queryFilters }">{{ $t('create_webhook') }}</v-button>
+						<v-button :to="{ path: '/settings/webhooks/+' }">{{ $t('create_webhook') }}</v-button>
 					</template>
 				</v-info>
 			</template>

From 7d988dba042eee1b557a220d318416a50c748202 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 10 Sep 2020 15:26:53 -0400
Subject: [PATCH 9/9] Fix batch for system collections

---
 api/src/controllers/folders.ts                | 19 ++++++++-------
 api/src/controllers/permissions.ts            | 22 +++++++++--------
 api/src/controllers/presets.ts                |  9 ++++---
 api/src/controllers/relations.ts              | 19 ++++++++-------
 api/src/controllers/revisions.ts              |  7 +++---
 api/src/controllers/roles.ts                  | 19 ++++++++-------
 api/src/controllers/users.ts                  | 23 ++++++++++--------
 api/src/controllers/webhooks.ts               |  9 ++++---
 api/src/database/seeds/system.yaml            |  3 +++
 .../settings/routes/webhooks/browse.vue       | 24 +++++++++++++++----
 10 files changed, 96 insertions(+), 58 deletions(-)

diff --git a/api/src/controllers/folders.ts b/api/src/controllers/folders.ts
index c66ef2a8ea..fe74a67e0c 100644
--- a/api/src/controllers/folders.ts
+++ b/api/src/controllers/folders.ts
@@ -14,7 +14,7 @@ router.post(
 
 		res.locals.payload = { data: record || null };
 		return next();
-	}),
+	})
 );
 
 router.get(
@@ -28,39 +28,42 @@ router.get(
 
 		res.locals.payload = { data: records || null, meta };
 		return next();
-	}),
+	})
 );
 
 router.get(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new FoldersService({ accountability: req.accountability });
-		const record = await service.readByKey(req.params.pk, req.sanitizedQuery);
+		const primaryKey = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const record = await service.readByKey(primaryKey as any, req.sanitizedQuery);
 
 		res.locals.payload = { data: record || null };
 		return next();
-	}),
+	})
 );
 
 router.patch(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new FoldersService({ accountability: req.accountability });
-		const primaryKey = await service.update(req.body, req.params.pk);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const primaryKey = await service.update(req.body, pk as any);
 		const record = await service.readByKey(primaryKey, req.sanitizedQuery);
 
 		res.locals.payload = { data: record || null };
 		return next();
-	}),
+	})
 );
 
 router.delete(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new FoldersService({ accountability: req.accountability });
-		await service.delete(req.params.pk);
+		const primaryKey = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		await service.delete(primaryKey as any);
 		return next();
-	}),
+	})
 );
 
 export default router;
diff --git a/api/src/controllers/permissions.ts b/api/src/controllers/permissions.ts
index 0727f5ef35..8c8e7a2e3c 100644
--- a/api/src/controllers/permissions.ts
+++ b/api/src/controllers/permissions.ts
@@ -16,7 +16,7 @@ router.post(
 
 		res.locals.payload = { data: item || null };
 		return next();
-	}),
+	})
 );
 
 router.get(
@@ -30,7 +30,7 @@ router.get(
 
 		res.locals.payload = { data: item || null, meta };
 		return next();
-	}),
+	})
 );
 
 router.get(
@@ -54,7 +54,7 @@ router.get(
 
 		res.locals.payload = { data: items || null };
 		return next();
-	}),
+	})
 );
 
 router.get(
@@ -62,33 +62,35 @@ router.get(
 	asyncHandler(async (req, res, next) => {
 		if (req.path.endsWith('me')) return next();
 		const service = new PermissionsService({ accountability: req.accountability });
-		const record = await service.readByKey(Number(req.params.pk), req.sanitizedQuery);
+		const primaryKey = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const record = await service.readByKey(primaryKey as any, req.sanitizedQuery);
 
 		res.locals.payload = { data: record || null };
 		return next();
-	}),
+	})
 );
 
 router.patch(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new PermissionsService({ accountability: req.accountability });
-		const primaryKey = await service.update(req.body, Number(req.params.pk));
-
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const primaryKey = await service.update(req.body, pk as any);
 		const item = await service.readByKey(primaryKey, req.sanitizedQuery);
 
 		res.locals.payload = { data: item || null };
 		return next();
-	}),
+	})
 );
 
 router.delete(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new PermissionsService({ accountability: req.accountability });
-		await service.delete(Number(req.params.pk));
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		await service.delete(pk as any);
 		return next();
-	}),
+	})
 );
 
 export default router;
diff --git a/api/src/controllers/presets.ts b/api/src/controllers/presets.ts
index ec56310c9f..abd9300925 100644
--- a/api/src/controllers/presets.ts
+++ b/api/src/controllers/presets.ts
@@ -35,7 +35,8 @@ router.get(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new PresetsService({ accountability: req.accountability });
-		const record = await service.readByKey(req.params.pk, req.sanitizedQuery);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const record = await service.readByKey(pk as any, req.sanitizedQuery);
 
 		res.locals.payload = { data: record || null };
 		return next();
@@ -46,7 +47,8 @@ router.patch(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new PresetsService({ accountability: req.accountability });
-		const primaryKey = await service.update(req.body, req.params.pk);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const primaryKey = await service.update(req.body, pk as any);
 		const record = await service.readByKey(primaryKey, req.sanitizedQuery);
 
 		res.locals.payload = { data: record || null };
@@ -58,7 +60,8 @@ router.delete(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new PresetsService({ accountability: req.accountability });
-		await service.delete(req.params.pk);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		await service.delete(pk as any);
 		return next();
 	})
 );
diff --git a/api/src/controllers/relations.ts b/api/src/controllers/relations.ts
index 03f8f2dc12..246ca3f0cd 100644
--- a/api/src/controllers/relations.ts
+++ b/api/src/controllers/relations.ts
@@ -13,7 +13,7 @@ router.post(
 		const item = await service.readByKey(primaryKey, req.sanitizedQuery);
 		res.locals.payload = { data: item || null };
 		return next();
-	}),
+	})
 );
 
 router.get(
@@ -27,37 +27,40 @@ router.get(
 
 		res.locals.payload = { data: records || null, meta };
 		return next();
-	}),
+	})
 );
 
 router.get(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new RelationsService({ accountability: req.accountability });
-		const record = await service.readByKey(req.params.pk, req.sanitizedQuery);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const record = await service.readByKey(pk as any, req.sanitizedQuery);
 		res.locals.payload = { data: record || null };
 		return next();
-	}),
+	})
 );
 
 router.patch(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new RelationsService({ accountability: req.accountability });
-		const primaryKey = await service.update(req.body, req.params.pk);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const primaryKey = await service.update(req.body, pk as any);
 		const item = await service.readByKey(primaryKey, req.sanitizedQuery);
 		res.locals.payload = { data: item || null };
 		return next();
-	}),
+	})
 );
 
 router.delete(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new RelationsService({ accountability: req.accountability });
-		await service.delete(Number(req.params.pk));
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		await service.delete(pk as any);
 		return next();
-	}),
+	})
 );
 
 export default router;
diff --git a/api/src/controllers/revisions.ts b/api/src/controllers/revisions.ts
index 23d7a08490..eccb50a3ea 100644
--- a/api/src/controllers/revisions.ts
+++ b/api/src/controllers/revisions.ts
@@ -16,17 +16,18 @@ router.get(
 
 		res.locals.payload = { data: records || null, meta };
 		return next();
-	}),
+	})
 );
 
 router.get(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new RevisionsService({ accountability: req.accountability });
-		const record = await service.readByKey(req.params.pk, req.sanitizedQuery);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const record = await service.readByKey(pk as any, req.sanitizedQuery);
 		res.locals.payload = { data: record || null };
 		return next();
-	}),
+	})
 );
 
 export default router;
diff --git a/api/src/controllers/roles.ts b/api/src/controllers/roles.ts
index c7fcc59da2..80a7ac8e37 100644
--- a/api/src/controllers/roles.ts
+++ b/api/src/controllers/roles.ts
@@ -13,7 +13,7 @@ router.post(
 		const item = await service.readByKey(primaryKey, req.sanitizedQuery);
 		res.locals.payload = { data: item || null };
 		return next();
-	}),
+	})
 );
 
 router.get(
@@ -27,37 +27,40 @@ router.get(
 
 		res.locals.payload = { data: records || null, meta };
 		return next();
-	}),
+	})
 );
 
 router.get(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new RolesService({ accountability: req.accountability });
-		const record = await service.readByKey(req.params.pk, req.sanitizedQuery);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const record = await service.readByKey(pk as any, req.sanitizedQuery);
 		res.locals.payload = { data: record || null };
 		return next();
-	}),
+	})
 );
 
 router.patch(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new RolesService({ accountability: req.accountability });
-		const primaryKey = await service.update(req.body, req.params.pk);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const primaryKey = await service.update(req.body, pk as any);
 		const item = await service.readByKey(primaryKey, req.sanitizedQuery);
 		res.locals.payload = { data: item || null };
 		return next();
-	}),
+	})
 );
 
 router.delete(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new RolesService({ accountability: req.accountability });
-		await service.delete(req.params.pk);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		await service.delete(pk as any);
 		return next();
-	}),
+	})
 );
 
 export default router;
diff --git a/api/src/controllers/users.ts b/api/src/controllers/users.ts
index 1904901c96..291860e63f 100644
--- a/api/src/controllers/users.ts
+++ b/api/src/controllers/users.ts
@@ -16,7 +16,7 @@ router.post(
 		const item = await service.readByKey(primaryKey, req.sanitizedQuery);
 		res.locals.payload = { data: item || null };
 		return next();
-	}),
+	})
 );
 
 router.get(
@@ -30,7 +30,7 @@ router.get(
 
 		res.locals.payload = { data: item || null, meta };
 		return next();
-	}),
+	})
 );
 
 router.get(
@@ -45,7 +45,7 @@ router.get(
 
 		res.locals.payload = { data: item || null };
 		return next();
-	}),
+	})
 );
 
 router.get(
@@ -53,10 +53,11 @@ router.get(
 	asyncHandler(async (req, res, next) => {
 		if (req.path.endsWith('me')) return next();
 		const service = new UsersService({ accountability: req.accountability });
-		const items = await service.readByKey(req.params.pk, req.sanitizedQuery);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const items = await service.readByKey(pk as any, req.sanitizedQuery);
 		res.locals.payload = { data: items || null };
 		return next();
-	}),
+	})
 );
 
 router.patch(
@@ -72,7 +73,7 @@ router.patch(
 
 		res.locals.payload = { data: item || null };
 		return next();
-	}),
+	})
 );
 
 router.patch(
@@ -97,20 +98,22 @@ router.patch(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new UsersService({ accountability: req.accountability });
-		const primaryKey = await service.update(req.body, req.params.pk);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const primaryKey = await service.update(req.body, pk as any);
 
 		const item = await service.readByKey(primaryKey, req.sanitizedQuery);
 
 		res.locals.payload = { data: item || null };
 		return next();
-	}),
+	})
 );
 
 router.delete(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new UsersService({ accountability: req.accountability });
-		await service.delete(req.params.pk);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		await service.delete(pk as any);
 
 		return next();
 	})
@@ -161,7 +164,7 @@ router.post(
 
 		res.locals.payload = { data: { secret, otpauth_url: url } };
 		return next();
-	}),
+	})
 );
 
 router.post(
diff --git a/api/src/controllers/webhooks.ts b/api/src/controllers/webhooks.ts
index 9f224a3dba..b70135f3f4 100644
--- a/api/src/controllers/webhooks.ts
+++ b/api/src/controllers/webhooks.ts
@@ -35,7 +35,8 @@ router.get(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new WebhooksService({ accountability: req.accountability });
-		const record = await service.readByKey(req.params.pk, req.sanitizedQuery);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const record = await service.readByKey(pk as any, req.sanitizedQuery);
 
 		res.locals.payload = { data: record || null };
 		return next();
@@ -46,7 +47,8 @@ router.patch(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new WebhooksService({ accountability: req.accountability });
-		const primaryKey = await service.update(req.body, req.params.pk);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		const primaryKey = await service.update(req.body, pk as any);
 		const item = await service.readByKey(primaryKey, req.sanitizedQuery);
 
 		res.locals.payload = { data: item || null };
@@ -58,7 +60,8 @@ router.delete(
 	'/:pk',
 	asyncHandler(async (req, res, next) => {
 		const service = new WebhooksService({ accountability: req.accountability });
-		await service.delete(req.params.pk);
+		const pk = req.params.pk.includes(',') ? req.params.pk.split(',') : req.params.pk;
+		await service.delete(pk as any);
 
 		return next();
 	})
diff --git a/api/src/database/seeds/system.yaml b/api/src/database/seeds/system.yaml
index 640924816a..01112982ed 100644
--- a/api/src/database/seeds/system.yaml
+++ b/api/src/database/seeds/system.yaml
@@ -526,12 +526,14 @@ tables:
     method:
       type: string
       length: 10
+      default: POST
     url:
       type: string
       length: 255
     status:
       type: string
       length: 10
+      default: inactive
     data:
       type: boolean
       default: false
@@ -563,6 +565,7 @@ rows:
       - collection: directus_relations
       - collection: directus_revisions
       - collection: directus_roles
+      - collection: directus_sessions
       - collection: directus_settings
       - collection: directus_users
         archive_field: status
diff --git a/app/src/modules/settings/routes/webhooks/browse.vue b/app/src/modules/settings/routes/webhooks/browse.vue
index cf1fa4b282..b95d46053b 100644
--- a/app/src/modules/settings/routes/webhooks/browse.vue
+++ b/app/src/modules/settings/routes/webhooks/browse.vue
@@ -75,7 +75,7 @@
 			</template>
 
 			<template #no-items>
-				<v-info :title="$tc('webhooks_count', 0)" icon="anchor" center>
+				<v-info :title="$tc('webhooks_count', 0)" icon="anchor" center type="warning">
 					{{ $t('no_webhooks_copy') }}
 
 					<template #append>
@@ -164,12 +164,12 @@ export default defineComponent({
 
 		function useLinks() {
 			const addNewLink = computed<string>(() => {
-				return `/webhooks/+`;
+				return `/settings/webhooks/+`;
 			});
 
 			const batchLink = computed<string>(() => {
 				const batchPrimaryKeys = selection.value;
-				return `/webhooks/${batchPrimaryKeys}`;
+				return `/settings/webhooks/${batchPrimaryKeys}`;
 			});
 
 			return { addNewLink, batchLink };
@@ -189,7 +189,21 @@ export default defineComponent({
 	--v-button-background-color-disabled: var(--warning-25);
 }
 
-.content {
-	padding: var(--content-padding);
+.action-delete {
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
+}
+
+.action-batch {
+	--v-button-background-color: var(--warning-25);
+	--v-button-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-50);
+	--v-button-color-hover: var(--warning);
+}
+
+.layout {
+	--layout-offset-top: 64px;
 }
 </style>