From 92e1ee77bd34118dce69e91c44d9cfcfbd208f37 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 27 Jul 2021 00:02:24 +0200
Subject: [PATCH] Add support for Conditional Fields (#6864)

* Add conditions field to directus_fields

* Add conditions configuration

* Apply conditional overrides

* Handle conditions in nested groups

* Fix reverse mutating conditions

* Start on filter setup interface

* Move field types/constants to shared

* [WIP] Updated client side filter validation

* Support logical operators in client validation step

* Use new validation util in conditions check

* Add nesting in filter seutp

* Add filter rule setup configurator

* Fixes that should've been done in the merge

* Strip out filter-settings interface

TBD in a new PR

* Move browser to index
---
 api/src/cli/commands/bootstrap/index.ts       |   2 +-
 api/src/controllers/fields.ts                 |  11 +-
 .../20210716A-add-conditions-to-fields.ts     |  13 ++
 api/src/database/seeds/run.ts                 |   6 +-
 .../database/system-data/fields/fields.yaml   |   5 +
 api/src/database/system-data/fields/index.ts  |   2 +-
 api/src/extensions.ts                         |   2 +-
 api/src/services/collections.ts               |  10 +-
 api/src/services/fields.ts                    |  11 +-
 api/src/services/specifications.ts            |  44 ++--
 api/src/types/collection.ts                   |   2 +-
 api/src/types/field.ts                        |  44 ----
 api/src/types/index.ts                        |   1 -
 api/src/types/schema.ts                       |   4 +-
 api/src/utils/get-graphql-type.ts             |   6 +-
 api/src/utils/get-local-type.ts               |   6 +-
 app/src/components/v-form/form-field.vue      |   6 +-
 app/src/components/v-form/v-form.vue          |  58 +++--
 app/src/components/v-input/v-input.vue        |   5 +
 .../use-form-fields/use-form-fields.ts        |   4 +-
 app/src/displays/boolean/index.ts             |   2 +-
 app/src/displays/collection/index.ts          |   2 +-
 app/src/displays/color/index.ts               |   2 +-
 app/src/displays/datetime/index.ts            |   2 +-
 app/src/displays/file/index.ts                |   2 +-
 app/src/displays/filesize/index.ts            |   2 +-
 .../displays/formatted-json-value/index.ts    |   2 +-
 app/src/displays/formatted-value/index.ts     |   2 +-
 app/src/displays/icon/index.ts                |   2 +-
 app/src/displays/image/index.ts               |   2 +-
 app/src/displays/labels/index.ts              |   2 +-
 app/src/displays/mime-type/index.ts           |   2 +-
 app/src/displays/rating/index.ts              |   2 +-
 app/src/displays/raw/index.ts                 |   2 +-
 app/src/displays/related-values/index.ts      |   2 +-
 app/src/displays/user/index.ts                |   2 +-
 .../_system/system-collection/index.ts        |   2 +-
 .../_system/system-collections/index.ts       |   2 +-
 .../_system/system-display-template/index.ts  |   2 +-
 .../_system/system-field-tree/index.ts        |   2 +-
 .../interfaces/_system/system-field/index.ts  |   2 +-
 .../interfaces/_system/system-folder/index.ts |   2 +-
 .../_system/system-interface-options/index.ts |   2 +-
 .../system-interface-options.vue              |  20 +-
 .../_system/system-interface/index.ts         |   2 +-
 .../_system/system-language/index.ts          |   2 +-
 .../_system/system-mfa-setup/index.ts         |   2 +-
 .../interfaces/_system/system-scope/index.ts  |   2 +-
 app/src/interfaces/boolean/index.ts           |   2 +-
 app/src/interfaces/datetime/index.ts          |   2 +-
 app/src/interfaces/file-image/index.ts        |   2 +-
 app/src/interfaces/file/index.ts              |   2 +-
 app/src/interfaces/group-divider/index.ts     |   2 +-
 app/src/interfaces/group-raw/index.ts         |   2 +-
 .../input-autocomplete-api/index.ts           |   2 +-
 app/src/interfaces/input-code/index.ts        |   2 +-
 app/src/interfaces/input-hash/index.ts        |   2 +-
 app/src/interfaces/input-multiline/index.ts   |   2 +-
 .../interfaces/input-rich-text-html/index.ts  |   2 +-
 .../interfaces/input-rich-text-md/index.ts    |   2 +-
 app/src/interfaces/input/index.ts             |   2 +-
 app/src/interfaces/list-m2a/index.ts          |   2 +-
 app/src/interfaces/list-m2m/index.ts          |   2 +-
 .../interfaces/list-o2m-tree-view/index.ts    |   2 +-
 app/src/interfaces/list-o2m/index.ts          |   2 +-
 app/src/interfaces/list/index.ts              |   2 +-
 .../interfaces/presentation-divider/index.ts  |   2 +-
 .../interfaces/presentation-links/index.ts    |   2 +-
 .../interfaces/presentation-notice/index.ts   |   2 +-
 app/src/interfaces/select-color/index.ts      |   2 +-
 .../interfaces/select-dropdown-m2o/index.ts   |   2 +-
 app/src/interfaces/select-dropdown/index.ts   |   2 +-
 app/src/interfaces/select-icon/index.ts       |   2 +-
 .../select-multiple-checkbox-tree/index.ts    |   2 +-
 .../select-multiple-checkbox/index.ts         |   2 +-
 .../select-multiple-dropdown/index.ts         |   2 +-
 app/src/interfaces/select-radio/index.ts      |   2 +-
 app/src/interfaces/slider/index.ts            |   2 +-
 app/src/interfaces/tags/index.ts              |   2 +-
 app/src/interfaces/translations/index.ts      |   2 +-
 app/src/lang/translations/en-US.yaml          |   5 +
 app/src/layouts/calendar/index.ts             |   2 +-
 app/src/layouts/cards/index.ts                |   2 +-
 app/src/layouts/tabular/index.ts              |   2 +-
 app/src/modules/activity/index.ts             |   2 +-
 app/src/modules/collections/index.ts          |   2 +-
 app/src/modules/docs/index.ts                 |   2 +-
 app/src/modules/files/index.ts                |   2 +-
 app/src/modules/settings/index.ts             |   2 +-
 .../field-detail/components/conditions.vue    | 101 +++++++++
 .../data-model/field-detail/field-detail.vue  |  10 +
 app/src/modules/users/index.ts                |   2 +-
 app/src/types/fields.ts                       |  10 -
 app/src/types/index.ts                        |   1 -
 app/src/utils/generate-joi/index.ts           |  23 +-
 .../filter-sidebar-detail/field-filter.vue    |   4 +-
 .../filter-sidebar-detail.vue                 |   4 +-
 .../components/filter-sidebar-detail/types.ts |   5 -
 app/vite.config.js                            |   2 +-
 docs/reference/environment-variables.md       |   2 +-
 package-lock.json                             |   4 +
 packages/extension-sdk/src/index.ts           |   2 +-
 packages/shared/package.json                  |   5 +
 packages/shared/src/constants/field-types.ts  |  33 +++
 packages/shared/src/types/fields.ts           |  20 ++
 packages/shared/src/types/filter.ts           |  47 +++++
 packages/shared/src/types/index.ts            |   1 +
 packages/shared/src/types/layouts.ts          |   4 +-
 packages/shared/src/types/presets.ts          |  22 +-
 packages/shared/src/utils/browser/index.ts    |   6 +-
 .../utils/{browser => }/define-extension.ts   |   2 +-
 packages/shared/src/utils/generate-joi.ts     | 199 ++++++++++++++++++
 .../utils/get-filter-operators-for-type.ts    |  60 ++++++
 packages/shared/src/utils/index.ts            |   9 +-
 .../src/utils/{browser => }/is-extension.ts   |   4 +-
 .../src/utils/node/ensure-extension-dirs.ts   |   2 +-
 .../shared/src/utils/node/get-extensions.ts   |   3 +-
 .../src/utils/{browser => }/pluralize.ts      |   2 +-
 .../validate-extension-manifest.ts            |   4 +-
 packages/shared/src/utils/validate-payload.ts |  58 +++++
 packages/shared/utils/node.d.ts               |   1 +
 121 files changed, 792 insertions(+), 261 deletions(-)
 create mode 100644 api/src/database/migrations/20210716A-add-conditions-to-fields.ts
 delete mode 100644 api/src/types/field.ts
 create mode 100644 app/src/modules/settings/routes/data-model/field-detail/components/conditions.vue
 delete mode 100644 app/src/types/fields.ts
 create mode 100644 packages/shared/src/constants/field-types.ts
 create mode 100644 packages/shared/src/types/filter.ts
 rename packages/shared/src/utils/{browser => }/define-extension.ts (97%)
 create mode 100644 packages/shared/src/utils/generate-joi.ts
 create mode 100644 packages/shared/src/utils/get-filter-operators-for-type.ts
 rename packages/shared/src/utils/{browser => }/is-extension.ts (88%)
 rename packages/shared/src/utils/{browser => }/pluralize.ts (83%)
 rename packages/shared/src/utils/{browser => }/validate-extension-manifest.ts (85%)
 create mode 100644 packages/shared/src/utils/validate-payload.ts
 create mode 100644 packages/shared/utils/node.d.ts

diff --git a/api/src/cli/commands/bootstrap/index.ts b/api/src/cli/commands/bootstrap/index.ts
index 0a04145d4c..fbcd4f7726 100644
--- a/api/src/cli/commands/bootstrap/index.ts
+++ b/api/src/cli/commands/bootstrap/index.ts
@@ -5,7 +5,7 @@ import env from '../../../env';
 import logger from '../../../logger';
 import { getSchema } from '../../../utils/get-schema';
 import { RolesService, UsersService, SettingsService } from '../../../services';
-import getDatabase, { isInstalled, hasDatabaseConnection, validateDBConnection } from '../../../database';
+import getDatabase, { isInstalled, validateDBConnection } from '../../../database';
 import { SchemaOverview } from '../../../types';
 
 export default async function bootstrap({ skipAdminInit }: { skipAdminInit?: boolean }): Promise<void> {
diff --git a/api/src/controllers/fields.ts b/api/src/controllers/fields.ts
index 2d45235b2b..732e6a589c 100644
--- a/api/src/controllers/fields.ts
+++ b/api/src/controllers/fields.ts
@@ -6,7 +6,8 @@ import validateCollection from '../middleware/collection-exists';
 import { respond } from '../middleware/respond';
 import useCollection from '../middleware/use-collection';
 import { FieldsService } from '../services/fields';
-import { Field, types } from '../types';
+import { Field, Type } from '@directus/shared/types';
+import { TYPES } from '@directus/shared/constants';
 import asyncHandler from '../utils/async-handler';
 
 const router = Router();
@@ -65,7 +66,7 @@ const newFieldSchema = Joi.object({
 	collection: Joi.string().optional(),
 	field: Joi.string().required(),
 	type: Joi.string()
-		.valid(...types, ...ALIAS_TYPES)
+		.valid(...TYPES, ...ALIAS_TYPES)
 		.allow(null)
 		.optional(),
 	schema: Joi.object({
@@ -93,7 +94,7 @@ router.post(
 			throw new InvalidPayloadException(error.message);
 		}
 
-		const field: Partial<Field> & { field: string; type: typeof types[number] | null } = req.body;
+		const field: Partial<Field> & { field: string; type: Type | null } = req.body;
 
 		await service.createField(req.params.collection, field);
 
@@ -152,7 +153,7 @@ router.patch(
 
 const updateSchema = Joi.object({
 	type: Joi.string()
-		.valid(...types, ...ALIAS_TYPES)
+		.valid(...TYPES, ...ALIAS_TYPES)
 		.allow(null),
 	schema: Joi.object({
 		default_value: Joi.any(),
@@ -183,7 +184,7 @@ router.patch(
 			throw new InvalidPayloadException(`You need to provide "type" when providing "schema".`);
 		}
 
-		const fieldData: Partial<Field> & { field: string; type: typeof types[number] } = req.body;
+		const fieldData: Partial<Field> & { field: string; type: Type } = req.body;
 
 		if (!fieldData.field) fieldData.field = req.params.field;
 
diff --git a/api/src/database/migrations/20210716A-add-conditions-to-fields.ts b/api/src/database/migrations/20210716A-add-conditions-to-fields.ts
new file mode 100644
index 0000000000..efead1ddf5
--- /dev/null
+++ b/api/src/database/migrations/20210716A-add-conditions-to-fields.ts
@@ -0,0 +1,13 @@
+import { Knex } from 'knex';
+
+export async function up(knex: Knex): Promise<void> {
+	await knex.schema.alterTable('directus_fields', (table) => {
+		table.json('conditions');
+	});
+}
+
+export async function down(knex: Knex): Promise<void> {
+	await knex.schema.alterTable('directus_files', (table) => {
+		table.dropColumn('conditions');
+	});
+}
diff --git a/api/src/database/seeds/run.ts b/api/src/database/seeds/run.ts
index 2ad2eb0916..cf86c8eddf 100644
--- a/api/src/database/seeds/run.ts
+++ b/api/src/database/seeds/run.ts
@@ -3,13 +3,13 @@ import yaml from 'js-yaml';
 import { Knex } from 'knex';
 import { isObject } from 'lodash';
 import path from 'path';
-import { types } from '../../types';
+import { Type } from '@directus/shared/types';
 
 type TableSeed = {
 	table: string;
 	columns: {
 		[column: string]: {
-			type?: typeof types[number];
+			type?: Type;
 			primary?: boolean;
 			nullable?: boolean;
 			default?: any;
@@ -45,6 +45,8 @@ export default async function runSeed(database: Knex): Promise<void> {
 			for (const [columnName, columnInfo] of Object.entries(seedData.columns)) {
 				let column: Knex.ColumnBuilder;
 
+				if (columnInfo.type === 'alias' || columnInfo.type === 'unknown') return;
+
 				if (columnInfo.type === 'string') {
 					column = tableBuilder.string(columnName, columnInfo.length);
 				} else if (columnInfo.increments) {
diff --git a/api/src/database/system-data/fields/fields.yaml b/api/src/database/system-data/fields/fields.yaml
index 5dfc5fcb25..82dd60a3ca 100644
--- a/api/src/database/system-data/fields/fields.yaml
+++ b/api/src/database/system-data/fields/fields.yaml
@@ -73,3 +73,8 @@ fields:
   - collection: directus_fields
     field: note
     width: half
+
+  - collection: directus_fields
+    field: conditions
+    hidden: true
+    special: json
diff --git a/api/src/database/system-data/fields/index.ts b/api/src/database/system-data/fields/index.ts
index b085e359e2..0f27da3436 100644
--- a/api/src/database/system-data/fields/index.ts
+++ b/api/src/database/system-data/fields/index.ts
@@ -1,7 +1,7 @@
 import fse from 'fs-extra';
 import { merge } from 'lodash';
 import path from 'path';
-import { FieldMeta } from '../../../types';
+import { FieldMeta } from '@directus/shared/types';
 import { requireYAML } from '../../../utils/require-yaml';
 
 const defaults = requireYAML(require.resolve('./_defaults.yaml'));
diff --git a/api/src/extensions.ts b/api/src/extensions.ts
index ece92a880c..d510411d4d 100644
--- a/api/src/extensions.ts
+++ b/api/src/extensions.ts
@@ -7,7 +7,7 @@ import {
 	getLocalExtensions,
 	getPackageExtensions,
 	resolvePackage,
-} from '@directus/shared/utils';
+} from '@directus/shared/utils/node';
 import { APP_EXTENSION_TYPES, APP_SHARED_DEPS } from '@directus/shared/constants';
 import getDatabase from './database';
 import emitter from './emitter';
diff --git a/api/src/services/collections.ts b/api/src/services/collections.ts
index 3b87db7fa2..242d40a204 100644
--- a/api/src/services/collections.ts
+++ b/api/src/services/collections.ts
@@ -10,14 +10,8 @@ import logger from '../logger';
 import { FieldsService, RawField } from '../services/fields';
 import { ItemsService, MutationOptions } from '../services/items';
 import Keyv from 'keyv';
-import {
-	AbstractServiceOptions,
-	Accountability,
-	Collection,
-	CollectionMeta,
-	FieldMeta,
-	SchemaOverview,
-} from '../types';
+import { AbstractServiceOptions, Accountability, Collection, CollectionMeta, SchemaOverview } from '../types';
+import { FieldMeta } from '@directus/shared/types';
 
 export type RawCollection = {
 	collection: string;
diff --git a/api/src/services/fields.ts b/api/src/services/fields.ts
index b39ee0e07a..74ccd0cf07 100644
--- a/api/src/services/fields.ts
+++ b/api/src/services/fields.ts
@@ -11,8 +11,8 @@ import { ForbiddenException, InvalidPayloadException } from '../exceptions';
 import { translateDatabaseError } from '../exceptions/database/translate';
 import { ItemsService } from '../services/items';
 import { PayloadService } from '../services/payload';
-import { AbstractServiceOptions, Accountability, FieldMeta, SchemaOverview, types } from '../types';
-import { Field } from '../types/field';
+import { AbstractServiceOptions, Accountability, SchemaOverview } from '../types';
+import { Field, FieldMeta, Type } from '@directus/shared/types';
 import getDefaultValue from '../utils/get-default-value';
 import getLocalType from '../utils/get-local-type';
 import { toArray } from '../utils/to-array';
@@ -21,7 +21,7 @@ import { RelationsService } from './relations';
 import Keyv from 'keyv';
 import { DeepPartial } from '@directus/shared/types';
 
-export type RawField = DeepPartial<Field> & { field: string; type: typeof types[number] };
+export type RawField = DeepPartial<Field> & { field: string; type: Type };
 
 export class FieldsService {
 	knex: Knex;
@@ -214,7 +214,7 @@ export class FieldsService {
 
 	async createField(
 		collection: string,
-		field: Partial<Field> & { field: string; type: typeof types[number] | null },
+		field: Partial<Field> & { field: string; type: Type | null },
 		table?: Knex.CreateTableBuilder // allows collection creation to
 	): Promise<void> {
 		if (this.accountability && this.accountability.admin !== true) {
@@ -435,6 +435,9 @@ export class FieldsService {
 	public addColumnToTable(table: Knex.CreateTableBuilder, field: RawField | Field, alter: Column | null = null): void {
 		let column: Knex.ColumnBuilder;
 
+		// Don't attempt to add a DB column for alias / corrupt fields
+		if (field.type === 'alias' || field.type === 'unknown') return;
+
 		if (field.schema?.has_auto_increment) {
 			column = table.increments(field.field);
 		} else if (field.type === 'string') {
diff --git a/api/src/services/specifications.ts b/api/src/services/specifications.ts
index c4d21e60ed..24479f7dab 100644
--- a/api/src/services/specifications.ts
+++ b/api/src/services/specifications.ts
@@ -7,16 +7,8 @@ import { OpenAPIObject, OperationObject, PathItemObject, SchemaObject, TagObject
 import { version } from '../../package.json';
 import getDatabase from '../database';
 import env from '../env';
-import {
-	AbstractServiceOptions,
-	Accountability,
-	Collection,
-	Field,
-	Permission,
-	Relation,
-	SchemaOverview,
-	types,
-} from '../types';
+import { AbstractServiceOptions, Accountability, Collection, Permission, Relation, SchemaOverview } from '../types';
+import { Field, Type } from '@directus/shared/types';
 import { getRelationType } from '../utils/get-relation-type';
 import { CollectionsService } from './collections';
 import { FieldsService } from './fields';
@@ -459,20 +451,33 @@ class OASSpecsService implements SpecificationSubService {
 	}
 
 	private fieldTypes: Record<
-		typeof types[number],
+		Type,
 		{
 			type: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'integer' | 'null' | undefined;
 			format?: string;
 			items?: any;
 		}
 	> = {
+		alias: {
+			type: 'string',
+		},
 		bigInteger: {
 			type: 'integer',
 			format: 'int64',
 		},
+		binary: {
+			type: 'string',
+			format: 'binary',
+		},
 		boolean: {
 			type: 'boolean',
 		},
+		csv: {
+			type: 'array',
+			items: {
+				type: 'string',
+			},
+		},
 		date: {
 			type: 'string',
 			format: 'date',
@@ -488,6 +493,9 @@ class OASSpecsService implements SpecificationSubService {
 			type: 'number',
 			format: 'float',
 		},
+		hash: {
+			type: 'string',
+		},
 		integer: {
 			type: 'integer',
 		},
@@ -511,23 +519,13 @@ class OASSpecsService implements SpecificationSubService {
 			type: 'string',
 			format: 'timestamp',
 		},
-		binary: {
-			type: 'string',
-			format: 'binary',
+		unknown: {
+			type: undefined,
 		},
 		uuid: {
 			type: 'string',
 			format: 'uuid',
 		},
-		csv: {
-			type: 'array',
-			items: {
-				type: 'string',
-			},
-		},
-		hash: {
-			type: 'string',
-		},
 	};
 }
 
diff --git a/api/src/types/collection.ts b/api/src/types/collection.ts
index e589efb85e..37362d1789 100644
--- a/api/src/types/collection.ts
+++ b/api/src/types/collection.ts
@@ -1,5 +1,5 @@
 import { Table } from 'knex-schema-inspector/dist/types/table';
-import { Field } from './field';
+import { Field } from '@directus/shared/types';
 
 export type CollectionMeta = {
 	collection: string;
diff --git a/api/src/types/field.ts b/api/src/types/field.ts
deleted file mode 100644
index d0b518a89e..0000000000
--- a/api/src/types/field.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Column } from 'knex-schema-inspector/dist/types/column';
-
-export const types = [
-	'bigInteger',
-	'boolean',
-	'date',
-	'dateTime',
-	'decimal',
-	'float',
-	'integer',
-	'json',
-	'string',
-	'text',
-	'time',
-	'timestamp',
-	'binary',
-	'uuid',
-	'hash',
-	'csv',
-] as const;
-
-export type FieldMeta = {
-	id: number;
-	collection: string;
-	field: string;
-	special: string[] | null;
-	interface: string | null;
-	options: Record<string, any> | null;
-	readonly: boolean;
-	hidden: boolean;
-	sort: number | null;
-	width: string | null;
-	group: number | null;
-	note: string | null;
-	translations: null;
-};
-
-export type Field = {
-	collection: string;
-	field: string;
-	type: typeof types[number];
-	schema: Column | null;
-	meta: FieldMeta | null;
-};
diff --git a/api/src/types/index.ts b/api/src/types/index.ts
index 4fbf2d9510..d8c3228f00 100644
--- a/api/src/types/index.ts
+++ b/api/src/types/index.ts
@@ -4,7 +4,6 @@ export * from './assets';
 export * from './ast';
 export * from './collection';
 export * from './extensions';
-export * from './field';
 export * from './files';
 export * from './graphql';
 export * from './items';
diff --git a/api/src/types/schema.ts b/api/src/types/schema.ts
index b5f4b33a60..0bc23e94a2 100644
--- a/api/src/types/schema.ts
+++ b/api/src/types/schema.ts
@@ -1,4 +1,4 @@
-import { types } from './field';
+import { Type } from '@directus/shared/types';
 import { Permission } from './permissions';
 import { Relation } from './relation';
 
@@ -15,7 +15,7 @@ type CollectionsOverview = {
 				field: string;
 				defaultValue: any;
 				nullable: boolean;
-				type: typeof types[number] | 'unknown' | 'alias';
+				type: Type | 'unknown' | 'alias';
 				dbType: string | null;
 				precision: number | null;
 				scale: number | null;
diff --git a/api/src/utils/get-graphql-type.ts b/api/src/utils/get-graphql-type.ts
index d2b3821e5d..4edce04d06 100644
--- a/api/src/utils/get-graphql-type.ts
+++ b/api/src/utils/get-graphql-type.ts
@@ -9,11 +9,9 @@ import {
 } from 'graphql';
 import { GraphQLJSON } from 'graphql-compose';
 import { GraphQLDate } from '../services/graphql';
-import { types } from '../types';
+import { Type } from '@directus/shared/types';
 
-export function getGraphQLType(
-	localType: typeof types[number] | 'alias' | 'unknown'
-): GraphQLScalarType | GraphQLList<GraphQLType> {
+export function getGraphQLType(localType: Type | 'alias' | 'unknown'): GraphQLScalarType | GraphQLList<GraphQLType> {
 	switch (localType) {
 		case 'boolean':
 			return GraphQLBoolean;
diff --git a/api/src/utils/get-local-type.ts b/api/src/utils/get-local-type.ts
index f5759267ff..6f5885473b 100644
--- a/api/src/utils/get-local-type.ts
+++ b/api/src/utils/get-local-type.ts
@@ -1,11 +1,11 @@
 import { SchemaOverview } from '@directus/schema/dist/types/overview';
 import { Column } from 'knex-schema-inspector/dist/types/column';
-import { FieldMeta, types } from '../types';
+import { FieldMeta, Type } from '@directus/shared/types';
 
 /**
  * Typemap graciously provided by @gpetrov
  */
-const localTypeMap: Record<string, { type: typeof types[number]; useTimezone?: boolean }> = {
+const localTypeMap: Record<string, { type: Type; useTimezone?: boolean }> = {
 	// Shared
 	boolean: { type: 'boolean' },
 	tinyint: { type: 'boolean' },
@@ -90,7 +90,7 @@ const localTypeMap: Record<string, { type: typeof types[number]; useTimezone?: b
 export default function getLocalType(
 	column: SchemaOverview[string]['columns'][string] | Column,
 	field?: { special?: FieldMeta['special'] }
-): typeof types[number] | 'unknown' {
+): Type | 'unknown' {
 	const type = localTypeMap[column.data_type.toLowerCase().split('(')[0]];
 
 	const special = field?.special;
diff --git a/app/src/components/v-form/form-field.vue b/app/src/components/v-form/form-field.vue
index eb3236dc12..27042ccc42 100644
--- a/app/src/components/v-form/form-field.vue
+++ b/app/src/components/v-form/form-field.vue
@@ -1,9 +1,5 @@
 <template>
-	<div
-		:key="field.field"
-		class="field"
-		:class="[(field.meta && field.meta.width) || 'full', { invalid: validationError }]"
-	>
+	<div :key="field.field" class="field" :class="[field.meta?.width || 'full', { invalid: validationError }]">
 		<v-menu v-if="field.hideLabel !== true" placement="bottom-start" show-arrow :disabled="isDisabled">
 			<template #activator="{ toggle, active }">
 				<form-field-label
diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index b9c902b7d4..7d5bac6d95 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -21,6 +21,7 @@
 			<component
 				:is="`interface-${field.meta?.interface || 'group-raw'}`"
 				v-if="field.meta?.special?.includes('group')"
+				v-show="!field.meta?.hidden"
 				:key="field.field"
 				:class="field.meta?.width || 'full'"
 				:field="field"
@@ -39,6 +40,7 @@
 
 			<form-field
 				v-else
+				v-show="!field.meta?.hidden"
 				:key="field.field"
 				:field="field"
 				:autofocus="index === firstEditableFieldIndex && autofocus"
@@ -62,12 +64,12 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref, provide } from 'vue';
 import { useFieldsStore } from '@/stores/';
-import { Field, FieldRaw } from '@directus/shared/types';
+import { Field, FieldRaw, ValidationError } from '@directus/shared/types';
 import { clone, cloneDeep, isNil, merge, omit } from 'lodash';
 import useFormFields from '@/composables/use-form-fields';
-import { ValidationError } from '@/types';
 import { useElementSize } from '@/composables/use-element-size';
 import FormField from './form-field.vue';
+import { validatePayload } from '@directus/shared/utils';
 
 type FieldValues = {
 	[field: string]: any;
@@ -202,16 +204,10 @@ export default defineComponent({
 				throw new Error('[v-form]: You need to pass either the collection or fields prop.');
 			});
 
-			const fieldsInGroup = computed(() =>
-				fields.value.filter(
-					(field) => field.meta?.group === props.group || (props.group === null && isNil(field.meta?.group))
-				)
-			);
+			const fieldsParsed = computed(() => {
+				if (props.group !== null) return fields.value;
 
-			const { formFields } = useFormFields(fieldsInGroup);
-
-			const formFieldsParsed = computed(() => {
-				const blockPrimaryKey = (field: Field) => {
+				const setPrimaryKeyReadonly = (field: Field) => {
 					if (
 						field.schema?.has_auto_increment === true ||
 						(field.schema?.is_primary_key === true && props.primaryKey !== '+')
@@ -225,10 +221,44 @@ export default defineComponent({
 					return field;
 				};
 
-				return formFields.value.map((field) => blockPrimaryKey(field));
+				const applyConditions = (field: Field) => {
+					if (field.meta && Array.isArray(field.meta?.conditions)) {
+						const conditions = [...field.meta.conditions].reverse();
+
+						const matchingCondition = conditions.find((condition) => {
+							const errors = validatePayload(condition.rule, values.value, { requireAll: true });
+							return errors.length === 0;
+						});
+
+						if (matchingCondition) {
+							return {
+								...field,
+								meta: merge({}, field.meta || {}, {
+									readonly: matchingCondition.readonly,
+									options: matchingCondition.options,
+									hidden: matchingCondition.hidden,
+								}),
+							};
+						}
+
+						return field;
+					} else {
+						return field;
+					}
+				};
+
+				return fields.value.map((field) => setPrimaryKeyReadonly(field)).map((field) => applyConditions(field));
 			});
 
-			return { formFields: formFieldsParsed, isDisabled, getFieldsForGroup };
+			const fieldsInGroup = computed(() =>
+				fieldsParsed.value.filter(
+					(field) => field.meta?.group === props.group || (props.group === null && isNil(field.meta?.group))
+				)
+			);
+
+			const { formFields } = useFormFields(fieldsInGroup);
+
+			return { formFields, isDisabled, getFieldsForGroup };
 
 			function isDisabled(field: Field) {
 				return (
@@ -240,7 +270,7 @@ export default defineComponent({
 			}
 
 			function getFieldsForGroup(group: null | number): Field[] {
-				const fieldsInGroup: Field[] = fields.value.filter(
+				const fieldsInGroup: Field[] = fieldsParsed.value.filter(
 					(field) => field.meta?.group === group || (group === null && isNil(field.meta))
 				);
 
diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input/v-input.vue
index d55d43f0ac..fe04090287 100644
--- a/app/src/components/v-input/v-input.vue
+++ b/app/src/components/v-input/v-input.vue
@@ -13,6 +13,7 @@
 					ref="input"
 					v-focus="autofocus"
 					v-bind="attributes"
+					:placeholder="placeholder"
 					:autocomplete="autocomplete"
 					:type="type"
 					:min="min"
@@ -84,6 +85,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		placeholder: {
+			type: String,
+			default: null,
+		},
 		modelValue: {
 			type: [String, Number],
 			default: null,
diff --git a/app/src/composables/use-form-fields/use-form-fields.ts b/app/src/composables/use-form-fields/use-form-fields.ts
index b9b58af959..eef2b73177 100644
--- a/app/src/composables/use-form-fields/use-form-fields.ts
+++ b/app/src/composables/use-form-fields/use-form-fields.ts
@@ -51,11 +51,9 @@ export default function useFormFields(fields: Ref<Field[]>): { formFields: Compu
 			return field;
 		});
 
-		// Filter out the fields that are marked hidden on detail
 		formFields = formFields.filter((field) => {
-			const hidden = field.meta?.hidden;
 			const systemFake = field.field?.startsWith('$') || false;
-			return hidden !== true && systemFake === false;
+			return systemFake === false;
 		});
 
 		formFields = orderBy(formFields, 'meta.sort');
diff --git a/app/src/displays/boolean/index.ts b/app/src/displays/boolean/index.ts
index f19dac29ba..8eb7f0ce55 100644
--- a/app/src/displays/boolean/index.ts
+++ b/app/src/displays/boolean/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayBoolean from './boolean.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/collection/index.ts b/app/src/displays/collection/index.ts
index 397a29ead9..85dac22c23 100644
--- a/app/src/displays/collection/index.ts
+++ b/app/src/displays/collection/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayCollection from './collection.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/color/index.ts b/app/src/displays/color/index.ts
index 80a41cdb1e..b516341072 100644
--- a/app/src/displays/color/index.ts
+++ b/app/src/displays/color/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayColor from './color.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/datetime/index.ts b/app/src/displays/datetime/index.ts
index 2804917610..383f9da02d 100644
--- a/app/src/displays/datetime/index.ts
+++ b/app/src/displays/datetime/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayDateTime from './datetime.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/file/index.ts b/app/src/displays/file/index.ts
index 44251ed77e..5e3c86843e 100644
--- a/app/src/displays/file/index.ts
+++ b/app/src/displays/file/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayFile from './file.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/filesize/index.ts b/app/src/displays/filesize/index.ts
index f66c7d9a10..4f807cce3f 100644
--- a/app/src/displays/filesize/index.ts
+++ b/app/src/displays/filesize/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import handler from './handler';
 
 export default defineDisplay({
diff --git a/app/src/displays/formatted-json-value/index.ts b/app/src/displays/formatted-json-value/index.ts
index 1a8ea5e88f..acdd31a3c8 100644
--- a/app/src/displays/formatted-json-value/index.ts
+++ b/app/src/displays/formatted-json-value/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayJsonValue from './formatted-json-value.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/formatted-value/index.ts b/app/src/displays/formatted-value/index.ts
index cd600a140d..13d6a14601 100644
--- a/app/src/displays/formatted-value/index.ts
+++ b/app/src/displays/formatted-value/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayFormattedValue from './formatted-value.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/icon/index.ts b/app/src/displays/icon/index.ts
index f23352c6ea..1bb4b8f807 100644
--- a/app/src/displays/icon/index.ts
+++ b/app/src/displays/icon/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayIcon from './icon.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/image/index.ts b/app/src/displays/image/index.ts
index cdeb5a0b60..339d7003da 100644
--- a/app/src/displays/image/index.ts
+++ b/app/src/displays/image/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayImage from './image.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/labels/index.ts b/app/src/displays/labels/index.ts
index aa22588d77..c41cb74436 100644
--- a/app/src/displays/labels/index.ts
+++ b/app/src/displays/labels/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayLabels from './labels.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/mime-type/index.ts b/app/src/displays/mime-type/index.ts
index ea977dddae..5ea1dde593 100644
--- a/app/src/displays/mime-type/index.ts
+++ b/app/src/displays/mime-type/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import readableMimeType from '@/utils/readable-mime-type';
 import mime from 'mime/lite';
 
diff --git a/app/src/displays/rating/index.ts b/app/src/displays/rating/index.ts
index f1cb6d614b..ccce51a66f 100644
--- a/app/src/displays/rating/index.ts
+++ b/app/src/displays/rating/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayRating from './rating.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/raw/index.ts b/app/src/displays/raw/index.ts
index b0722a7585..f7b5ec7e6b 100644
--- a/app/src/displays/raw/index.ts
+++ b/app/src/displays/raw/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import { TYPES } from '@directus/shared/constants';
 
 export default defineDisplay({
diff --git a/app/src/displays/related-values/index.ts b/app/src/displays/related-values/index.ts
index ab66e1dd20..3c38c0d833 100644
--- a/app/src/displays/related-values/index.ts
+++ b/app/src/displays/related-values/index.ts
@@ -1,5 +1,5 @@
 import useCollection from '@/composables/use-collection';
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import getRelatedCollection from '@/utils/get-related-collection';
diff --git a/app/src/displays/user/index.ts b/app/src/displays/user/index.ts
index e729264e0f..cfb26fa3fa 100644
--- a/app/src/displays/user/index.ts
+++ b/app/src/displays/user/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@directus/shared/utils/browser';
+import { defineDisplay } from '@directus/shared/utils';
 import DisplayUser from './user.vue';
 
 export default defineDisplay({
diff --git a/app/src/interfaces/_system/system-collection/index.ts b/app/src/interfaces/_system/system-collection/index.ts
index febd62d9c1..a4dbfb1e15 100644
--- a/app/src/interfaces/_system/system-collection/index.ts
+++ b/app/src/interfaces/_system/system-collection/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemCollection from './system-collection.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-collections/index.ts b/app/src/interfaces/_system/system-collections/index.ts
index ee82c3dfd9..de7929f973 100644
--- a/app/src/interfaces/_system/system-collections/index.ts
+++ b/app/src/interfaces/_system/system-collections/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemCollections from './system-collections.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-display-template/index.ts b/app/src/interfaces/_system/system-display-template/index.ts
index 25b47ffba3..defc70ce8d 100644
--- a/app/src/interfaces/_system/system-display-template/index.ts
+++ b/app/src/interfaces/_system/system-display-template/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemDisplayTemplate from './system-display-template.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-field-tree/index.ts b/app/src/interfaces/_system/system-field-tree/index.ts
index 05b9d854ff..57e83811ca 100644
--- a/app/src/interfaces/_system/system-field-tree/index.ts
+++ b/app/src/interfaces/_system/system-field-tree/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemFieldTree from './system-field-tree.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-field/index.ts b/app/src/interfaces/_system/system-field/index.ts
index 386f68d6b9..765053d82b 100644
--- a/app/src/interfaces/_system/system-field/index.ts
+++ b/app/src/interfaces/_system/system-field/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemField from './system-field.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-folder/index.ts b/app/src/interfaces/_system/system-folder/index.ts
index f536875384..a2b4dffc62 100644
--- a/app/src/interfaces/_system/system-folder/index.ts
+++ b/app/src/interfaces/_system/system-folder/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemFolder from './folder.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-interface-options/index.ts b/app/src/interfaces/_system/system-interface-options/index.ts
index 6bf9ade22f..5a3201536f 100644
--- a/app/src/interfaces/_system/system-interface-options/index.ts
+++ b/app/src/interfaces/_system/system-interface-options/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemInterfaceOptions from './system-interface-options.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-interface-options/system-interface-options.vue b/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
index 6f154c2d0c..562a3a7089 100644
--- a/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
+++ b/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
@@ -20,7 +20,6 @@
 			:is="`interface-options-${selectedInterface.id}`"
 			v-else
 			:value="value"
-			:field-data="fieldData"
 			@input="$emit('input', $event)"
 		/>
 	</div>
@@ -40,7 +39,11 @@ export default defineComponent({
 		},
 		interfaceField: {
 			type: String,
-			required: true,
+			default: null,
+		},
+		interface: {
+			type: String,
+			default: null,
 		},
 	},
 	emits: ['input'],
@@ -52,6 +55,10 @@ export default defineComponent({
 		const values = inject('values', ref<Record<string, any>>({}));
 
 		const selectedInterface = computed(() => {
+			if (props.interface) {
+				return interfaces.value.find((inter: InterfaceConfig) => inter.id === props.interface);
+			}
+
 			if (!values.value[props.interfaceField]) return;
 
 			return interfaces.value.find((inter: InterfaceConfig) => inter.id === values.value[props.interfaceField]);
@@ -64,8 +71,15 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .inset {
-	padding: 8px;
+	--form-horizontal-gap: 24px;
+	--form-vertical-gap: 24px;
+
+	padding: 12px;
 	border: var(--border-width) solid var(--border-normal);
 	border-radius: var(--border-radius);
+
+	:deep(.type-label) {
+		font-size: 1rem;
+	}
 }
 </style>
diff --git a/app/src/interfaces/_system/system-interface/index.ts b/app/src/interfaces/_system/system-interface/index.ts
index 57ffcfb61a..e499b0ce19 100644
--- a/app/src/interfaces/_system/system-interface/index.ts
+++ b/app/src/interfaces/_system/system-interface/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemInterface from './system-interface.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-language/index.ts b/app/src/interfaces/_system/system-language/index.ts
index b8eba21099..06f188fd84 100644
--- a/app/src/interfaces/_system/system-language/index.ts
+++ b/app/src/interfaces/_system/system-language/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemLanguage from './system-language.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-mfa-setup/index.ts b/app/src/interfaces/_system/system-mfa-setup/index.ts
index 9840307e24..b2be476b11 100644
--- a/app/src/interfaces/_system/system-mfa-setup/index.ts
+++ b/app/src/interfaces/_system/system-mfa-setup/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemMFASetup from './system-mfa-setup.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-scope/index.ts b/app/src/interfaces/_system/system-scope/index.ts
index c7a50bd10a..f70ca83637 100644
--- a/app/src/interfaces/_system/system-scope/index.ts
+++ b/app/src/interfaces/_system/system-scope/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSystemScope from './system-scope.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/boolean/index.ts b/app/src/interfaces/boolean/index.ts
index cb0235d83c..e806e5a38d 100644
--- a/app/src/interfaces/boolean/index.ts
+++ b/app/src/interfaces/boolean/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceBoolean from './boolean.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/datetime/index.ts b/app/src/interfaces/datetime/index.ts
index cd088677c7..ed0860d6f1 100644
--- a/app/src/interfaces/datetime/index.ts
+++ b/app/src/interfaces/datetime/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceDateTime from './datetime.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/file-image/index.ts b/app/src/interfaces/file-image/index.ts
index 3894b9df46..5a5f2a5a37 100644
--- a/app/src/interfaces/file-image/index.ts
+++ b/app/src/interfaces/file-image/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceFileImage from './file-image.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/file/index.ts b/app/src/interfaces/file/index.ts
index f56c34d359..91bb445412 100644
--- a/app/src/interfaces/file/index.ts
+++ b/app/src/interfaces/file/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceFile from './file.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/group-divider/index.ts b/app/src/interfaces/group-divider/index.ts
index 6d0cb5ce27..fd871c2d34 100644
--- a/app/src/interfaces/group-divider/index.ts
+++ b/app/src/interfaces/group-divider/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceGroupDivider from './group-divider.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/group-raw/index.ts b/app/src/interfaces/group-raw/index.ts
index 472c31ddb7..ab7a28fb73 100644
--- a/app/src/interfaces/group-raw/index.ts
+++ b/app/src/interfaces/group-raw/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceGroupRaw from './group-raw.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/input-autocomplete-api/index.ts b/app/src/interfaces/input-autocomplete-api/index.ts
index 4cb5c61ce8..507b960e81 100644
--- a/app/src/interfaces/input-autocomplete-api/index.ts
+++ b/app/src/interfaces/input-autocomplete-api/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputAutocompleteAPI from './input-autocomplete-api.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/input-code/index.ts b/app/src/interfaces/input-code/index.ts
index 68e88706fc..c16274aef7 100644
--- a/app/src/interfaces/input-code/index.ts
+++ b/app/src/interfaces/input-code/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/meta';
 import InterfaceCode from './input-code.vue';
diff --git a/app/src/interfaces/input-hash/index.ts b/app/src/interfaces/input-hash/index.ts
index 5fbba0b170..90aec5123b 100644
--- a/app/src/interfaces/input-hash/index.ts
+++ b/app/src/interfaces/input-hash/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputHash from './input-hash.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/input-multiline/index.ts b/app/src/interfaces/input-multiline/index.ts
index 3c1165d732..69cde8b2eb 100644
--- a/app/src/interfaces/input-multiline/index.ts
+++ b/app/src/interfaces/input-multiline/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputMultiline from './input-multiline.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/input-rich-text-html/index.ts b/app/src/interfaces/input-rich-text-html/index.ts
index b78d4eaf6c..a8c1e36ce0 100644
--- a/app/src/interfaces/input-rich-text-html/index.ts
+++ b/app/src/interfaces/input-rich-text-html/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import { defineAsyncComponent } from 'vue';
 
 const InterfaceWYSIWYG = defineAsyncComponent(() => import('./input-rich-text-html.vue'));
diff --git a/app/src/interfaces/input-rich-text-md/index.ts b/app/src/interfaces/input-rich-text-md/index.ts
index ce56441141..166fdc2225 100644
--- a/app/src/interfaces/input-rich-text-md/index.ts
+++ b/app/src/interfaces/input-rich-text-md/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputRichTextMD from './input-rich-text-md.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/input/index.ts b/app/src/interfaces/input/index.ts
index 771817fb63..a1c555a414 100644
--- a/app/src/interfaces/input/index.ts
+++ b/app/src/interfaces/input/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceInput from './input.vue';
 import Options from './options.vue';
 
diff --git a/app/src/interfaces/list-m2a/index.ts b/app/src/interfaces/list-m2a/index.ts
index b2a0506d8a..e187b839b4 100644
--- a/app/src/interfaces/list-m2a/index.ts
+++ b/app/src/interfaces/list-m2a/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceListM2A from './list-m2a.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/list-m2m/index.ts b/app/src/interfaces/list-m2m/index.ts
index 5e1bbb95c6..c5327f819c 100644
--- a/app/src/interfaces/list-m2m/index.ts
+++ b/app/src/interfaces/list-m2m/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceListM2M from './list-m2m.vue';
 import Options from './options.vue';
 
diff --git a/app/src/interfaces/list-o2m-tree-view/index.ts b/app/src/interfaces/list-o2m-tree-view/index.ts
index fe58d1fac7..0d24009ce4 100644
--- a/app/src/interfaces/list-o2m-tree-view/index.ts
+++ b/app/src/interfaces/list-o2m-tree-view/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import Options from './options.vue';
 import InterfaceListO2MTreeView from './list-o2m-tree-view.vue';
 
diff --git a/app/src/interfaces/list-o2m/index.ts b/app/src/interfaces/list-o2m/index.ts
index 3bb2e2cf68..d47303e4df 100644
--- a/app/src/interfaces/list-o2m/index.ts
+++ b/app/src/interfaces/list-o2m/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceListO2M from './list-o2m.vue';
 import Options from './options.vue';
 
diff --git a/app/src/interfaces/list/index.ts b/app/src/interfaces/list/index.ts
index 87e98484d3..6e88dcaf84 100644
--- a/app/src/interfaces/list/index.ts
+++ b/app/src/interfaces/list/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import RepeaterOptions from './options.vue';
 import InterfaceList from './list.vue';
 
diff --git a/app/src/interfaces/presentation-divider/index.ts b/app/src/interfaces/presentation-divider/index.ts
index 6cb1e2f7c0..db8833ba4a 100644
--- a/app/src/interfaces/presentation-divider/index.ts
+++ b/app/src/interfaces/presentation-divider/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfacePresentationDivider from './presentation-divider.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/presentation-links/index.ts b/app/src/interfaces/presentation-links/index.ts
index 9be7de65ca..9733fc3112 100644
--- a/app/src/interfaces/presentation-links/index.ts
+++ b/app/src/interfaces/presentation-links/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfacePresentationLinks from './presentation-links.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/presentation-notice/index.ts b/app/src/interfaces/presentation-notice/index.ts
index 48bcdf3a4d..302dadb9b8 100644
--- a/app/src/interfaces/presentation-notice/index.ts
+++ b/app/src/interfaces/presentation-notice/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfacePresentationNotice from './presentation-notice.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-color/index.ts b/app/src/interfaces/select-color/index.ts
index 662238bdb8..fa3c188e09 100644
--- a/app/src/interfaces/select-color/index.ts
+++ b/app/src/interfaces/select-color/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceColor from './select-color.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-dropdown-m2o/index.ts b/app/src/interfaces/select-dropdown-m2o/index.ts
index 8883926305..b600e93750 100644
--- a/app/src/interfaces/select-dropdown-m2o/index.ts
+++ b/app/src/interfaces/select-dropdown-m2o/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectDropdownM2O from './select-dropdown-m2o.vue';
 import Options from './options.vue';
 
diff --git a/app/src/interfaces/select-dropdown/index.ts b/app/src/interfaces/select-dropdown/index.ts
index 055be61442..4d0e587974 100644
--- a/app/src/interfaces/select-dropdown/index.ts
+++ b/app/src/interfaces/select-dropdown/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectDropdown from './select-dropdown.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-icon/index.ts b/app/src/interfaces/select-icon/index.ts
index 3cf1c07c77..29221ea547 100644
--- a/app/src/interfaces/select-icon/index.ts
+++ b/app/src/interfaces/select-icon/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectIcon from './select-icon.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-multiple-checkbox-tree/index.ts b/app/src/interfaces/select-multiple-checkbox-tree/index.ts
index 30eff7ad25..31b1902746 100644
--- a/app/src/interfaces/select-multiple-checkbox-tree/index.ts
+++ b/app/src/interfaces/select-multiple-checkbox-tree/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import { DeepPartial, Field } from '@directus/shared/types';
 import InterfaceSelectMultipleCheckboxesTree from './select-multiple-checkbox-tree.vue';
 
diff --git a/app/src/interfaces/select-multiple-checkbox/index.ts b/app/src/interfaces/select-multiple-checkbox/index.ts
index 16e2e82713..68ce93c0a3 100644
--- a/app/src/interfaces/select-multiple-checkbox/index.ts
+++ b/app/src/interfaces/select-multiple-checkbox/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectMultipleCheckboxes from './select-multiple-checkbox.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-multiple-dropdown/index.ts b/app/src/interfaces/select-multiple-dropdown/index.ts
index bf13a3e922..fc32786c30 100644
--- a/app/src/interfaces/select-multiple-dropdown/index.ts
+++ b/app/src/interfaces/select-multiple-dropdown/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectMultipleDropdown from './select-multiple-dropdown.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-radio/index.ts b/app/src/interfaces/select-radio/index.ts
index 5c7166b4d6..bfedcd0f83 100644
--- a/app/src/interfaces/select-radio/index.ts
+++ b/app/src/interfaces/select-radio/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectRadio from './select-radio.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/slider/index.ts b/app/src/interfaces/slider/index.ts
index 7df2e08bb7..d67633ffe1 100644
--- a/app/src/interfaces/slider/index.ts
+++ b/app/src/interfaces/slider/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceSlider from './slider.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/tags/index.ts b/app/src/interfaces/tags/index.ts
index 1ba6baf150..026b240b1a 100644
--- a/app/src/interfaces/tags/index.ts
+++ b/app/src/interfaces/tags/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import InterfaceTags from './tags.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/translations/index.ts b/app/src/interfaces/translations/index.ts
index 881518f96c..343bdc7e87 100644
--- a/app/src/interfaces/translations/index.ts
+++ b/app/src/interfaces/translations/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@directus/shared/utils/browser';
+import { defineInterface } from '@directus/shared/utils';
 import TranslationsOptions from './options.vue';
 import InterfaceTranslations from './translations.vue';
 
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 020eb9b7f9..66ac78eb73 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -1,9 +1,12 @@
 edit_field: Edit Field
+conditions: Conditions
 item_revision: Item Revision
 duplicate_field: Duplicate Field
 half_width: Half Width
 full_width: Full Width
 group: Group
+and: And
+or: Or
 fill_width: Fill Width
 field_name_translations: Field Name Translations
 enter_password_to_enable_tfa: Enter your password to enable Two-Factor Authentication
@@ -511,6 +514,7 @@ upload_files_success: '{count} Files Uploaded'
 upload_pending: Upload Pending
 drag_file_here: Drag & Drop a File Here
 click_to_browse: Click to Browse
+interface_options: Interface Options
 layout_options: Layout Options
 rows: Rows
 columns: Columns
@@ -536,6 +540,7 @@ no_results_copy: Adjust or clear search filters to see results.
 clear_filters: Clear Filters
 saves_automatically: Saves Automatically
 role: Role
+rule: Rule
 user: User
 no_presets: No Presets
 no_presets_copy: No presets or bookmarks have been saved yet.
diff --git a/app/src/layouts/calendar/index.ts b/app/src/layouts/calendar/index.ts
index 5eb32e91b2..6905a40839 100644
--- a/app/src/layouts/calendar/index.ts
+++ b/app/src/layouts/calendar/index.ts
@@ -1,4 +1,4 @@
-import { defineLayout } from '@directus/shared/utils/browser';
+import { defineLayout } from '@directus/shared/utils';
 import CalendarLayout from './calendar.vue';
 import CalendarOptions from './options.vue';
 import CalendarSidebar from './sidebar.vue';
diff --git a/app/src/layouts/cards/index.ts b/app/src/layouts/cards/index.ts
index 1e7f31f8d3..551fd82ccf 100644
--- a/app/src/layouts/cards/index.ts
+++ b/app/src/layouts/cards/index.ts
@@ -1,4 +1,4 @@
-import { defineLayout } from '@directus/shared/utils/browser';
+import { defineLayout } from '@directus/shared/utils';
 import CardsLayout from './cards.vue';
 import CardsOptions from './options.vue';
 import CardsSidebar from './sidebar.vue';
diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts
index 43f74a3764..37ce7de0ca 100644
--- a/app/src/layouts/tabular/index.ts
+++ b/app/src/layouts/tabular/index.ts
@@ -1,4 +1,4 @@
-import { defineLayout } from '@directus/shared/utils/browser';
+import { defineLayout } from '@directus/shared/utils';
 import TabularLayout from './tabular.vue';
 import TabularOptions from './options.vue';
 import TabularSidebar from './sidebar.vue';
diff --git a/app/src/modules/activity/index.ts b/app/src/modules/activity/index.ts
index 73b7158cc6..80008d78ce 100644
--- a/app/src/modules/activity/index.ts
+++ b/app/src/modules/activity/index.ts
@@ -1,4 +1,4 @@
-import { defineModule } from '@directus/shared/utils/browser';
+import { defineModule } from '@directus/shared/utils';
 import ActivityCollection from './routes/collection.vue';
 import ActivityItem from './routes/item.vue';
 
diff --git a/app/src/modules/collections/index.ts b/app/src/modules/collections/index.ts
index 4efb26c7c4..0b62d92a7c 100644
--- a/app/src/modules/collections/index.ts
+++ b/app/src/modules/collections/index.ts
@@ -1,4 +1,4 @@
-import { defineModule } from '@directus/shared/utils/browser';
+import { defineModule } from '@directus/shared/utils';
 import { addQueryToPath } from '@/utils/add-query-to-path';
 import RouterPass from '@/utils/router-passthrough';
 import { NavigationGuard } from 'vue-router';
diff --git a/app/src/modules/docs/index.ts b/app/src/modules/docs/index.ts
index 86e6e5d85d..20ac5a8633 100644
--- a/app/src/modules/docs/index.ts
+++ b/app/src/modules/docs/index.ts
@@ -1,4 +1,4 @@
-import { defineModule } from '@directus/shared/utils/browser';
+import { defineModule } from '@directus/shared/utils';
 import docs, { DocsRoutes } from '@directus/docs';
 import { RouteRecordRaw } from 'vue-router';
 import NotFound from './routes/not-found.vue';
diff --git a/app/src/modules/files/index.ts b/app/src/modules/files/index.ts
index 7b75af6ac9..d9484bd246 100644
--- a/app/src/modules/files/index.ts
+++ b/app/src/modules/files/index.ts
@@ -1,4 +1,4 @@
-import { defineModule } from '@directus/shared/utils/browser';
+import { defineModule } from '@directus/shared/utils';
 import AddNew from './routes/add-new.vue';
 import Collection from './routes/collection.vue';
 import Item from './routes/item.vue';
diff --git a/app/src/modules/settings/index.ts b/app/src/modules/settings/index.ts
index dbc0559d0d..7dfd2a419a 100644
--- a/app/src/modules/settings/index.ts
+++ b/app/src/modules/settings/index.ts
@@ -1,6 +1,6 @@
 import api from '@/api';
 import { useCollection } from '@/composables/use-collection';
-import { defineModule } from '@directus/shared/utils/browser';
+import { defineModule } from '@directus/shared/utils';
 import { useCollectionsStore, useFieldsStore } from '@/stores';
 import RouterPass from '@/utils/router-passthrough';
 import { ref } from 'vue';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/conditions.vue b/app/src/modules/settings/routes/data-model/field-detail/components/conditions.vue
new file mode 100644
index 0000000000..b188f303be
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/conditions.vue
@@ -0,0 +1,101 @@
+<template>
+	<div>
+		<interface-list :fields="repeaterFields" template="{{ name }}" :value="value" @input="value = $event" />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { Field, Condition, DeepPartial } from '@directus/shared/types';
+import { useI18n } from 'vue-i18n';
+import { state } from '../store';
+import { get, set } from 'lodash';
+
+export default defineComponent({
+	props: {
+		type: {
+			type: String,
+			required: true,
+		},
+		collection: {
+			type: String,
+			required: true,
+		},
+	},
+	setup() {
+		const { t } = useI18n();
+
+		const value = computed({
+			get() {
+				return get(state, 'fieldData.meta.conditions', []);
+			},
+			set(value: Condition[]) {
+				set(state, 'fieldData.meta.conditions', value);
+			},
+		});
+
+		const repeaterFields = computed<DeepPartial<Field>[]>(() => [
+			{
+				field: 'name',
+				name: t('name'),
+				type: 'string',
+				meta: {
+					interface: 'input',
+					options: {
+						iconLeft: 'label',
+						placeholder: t('enter_a_value'),
+					},
+				},
+			},
+			{
+				field: 'rule',
+				name: t('rule'),
+				type: 'json',
+				meta: {
+					interface: 'input-code',
+					options: {
+						language: 'json',
+					},
+				},
+			},
+			{
+				field: 'readonly',
+				name: t('readonly'),
+				type: 'boolean',
+				meta: {
+					interface: 'boolean',
+					options: {
+						label: t('disabled_editing_value'),
+					},
+					width: 'half',
+				},
+			},
+			{
+				field: 'hidden',
+				name: t('hidden'),
+				type: 'boolean',
+				meta: {
+					interface: 'boolean',
+					options: {
+						label: t('hidden_on_detail'),
+					},
+					width: 'half',
+				},
+			},
+			{
+				field: 'options',
+				name: t('interface_options'),
+				type: 'json',
+				meta: {
+					interface: 'system-interface-options',
+					options: {
+						interface: state?.fieldData.meta?.interface,
+					},
+				},
+			},
+		]);
+
+		return { repeaterFields, value, state };
+	},
+});
+</script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 1ff356b8b0..0165147d25 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -83,6 +83,8 @@
 				:collection="collection"
 				:type="localType"
 			/>
+
+			<setup-conditions v-if="currentTab[0] === 'conditions'" :collection="collection" :type="localType" />
 		</div>
 
 		<template #actions>
@@ -125,6 +127,7 @@ import SetupRelationship from './components/relationship.vue';
 import SetupTranslations from './components/translations.vue';
 import SetupInterface from './components/interface.vue';
 import SetupDisplay from './components/display.vue';
+import SetupConditions from './components/conditions.vue';
 import { isEmpty, cloneDeep } from 'lodash';
 import api from '@/api';
 import { useFieldsStore, useRelationsStore, useCollectionsStore } from '@/stores/';
@@ -149,6 +152,7 @@ export default defineComponent({
 		SetupTranslations,
 		SetupInterface,
 		SetupDisplay,
+		SetupConditions,
 	},
 	props: {
 		collection: {
@@ -284,6 +288,12 @@ export default defineComponent({
 					);
 				}
 
+				tabs.push({
+					text: t('conditions'),
+					value: 'conditions',
+					disabled: interfaceDisplayDisabled(),
+				});
+
 				return tabs;
 			});
 
diff --git a/app/src/modules/users/index.ts b/app/src/modules/users/index.ts
index e2b1d3b765..b311e341b8 100644
--- a/app/src/modules/users/index.ts
+++ b/app/src/modules/users/index.ts
@@ -1,4 +1,4 @@
-import { defineModule } from '@directus/shared/utils/browser';
+import { defineModule } from '@directus/shared/utils';
 import Collection from './routes/collection.vue';
 import Item from './routes/item.vue';
 
diff --git a/app/src/types/fields.ts b/app/src/types/fields.ts
deleted file mode 100644
index 3ddef96858..0000000000
--- a/app/src/types/fields.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FilterOperator } from '@directus/shared/types';
-
-export type ValidationError = {
-	code: string;
-	field: string;
-	type: FilterOperator;
-	valid?: number | string | (number | string)[];
-	invalid?: number | string | (number | string)[];
-	substring?: string;
-};
diff --git a/app/src/types/index.ts b/app/src/types/index.ts
index 72feface87..05dafa864a 100644
--- a/app/src/types/index.ts
+++ b/app/src/types/index.ts
@@ -1,5 +1,4 @@
 export * from './collections';
 export * from './error';
-export * from './fields';
 export * from './notifications';
 export * from './relations';
diff --git a/app/src/utils/generate-joi/index.ts b/app/src/utils/generate-joi/index.ts
index 7b42461a0c..89097304f1 100644
--- a/app/src/utils/generate-joi/index.ts
+++ b/app/src/utils/generate-joi/index.ts
@@ -1,5 +1,5 @@
 import BaseJoi, { AnySchema } from 'joi';
-import { escapeRegExp } from 'lodash';
+import { escapeRegExp, merge } from 'lodash';
 
 /**
  * @TODO
@@ -58,20 +58,19 @@ const Joi = BaseJoi.extend({
 });
 
 type JoiOptions = {
-	allowUnknown: boolean;
+	allowUnknown?: boolean;
+	requireAll?: boolean;
 };
 
 const defaults: JoiOptions = {
 	allowUnknown: true,
+	requireAll: false,
 };
 
 export default function generateJoi(filter: Record<string, any> | null, options?: JoiOptions): AnySchema {
 	filter = filter || {};
 
-	options = {
-		...defaults,
-		...(options || {}),
-	};
+	options = merge({}, defaults, options);
 
 	const schema: Record<string, AnySchema> = {};
 
@@ -98,26 +97,26 @@ export default function generateJoi(filter: Record<string, any> | null, options?
 			}
 
 			if (operator === '_starts_with') {
-				return Joi.string().pattern(new RegExp(`^${escapeRegExp(Object.values(value)[0] as string)}.*`), {
+				schema[key] = Joi.string().pattern(new RegExp(`^${escapeRegExp(Object.values(value)[0] as string)}.*`), {
 					name: 'starts_with',
 				});
 			}
 
 			if (operator === '_nstarts_with') {
-				return Joi.string().pattern(new RegExp(`^${escapeRegExp(Object.values(value)[0] as string)}.*`), {
+				schema[key] = Joi.string().pattern(new RegExp(`^${escapeRegExp(Object.values(value)[0] as string)}.*`), {
 					name: 'starts_with',
 					invert: true,
 				});
 			}
 
 			if (operator === '_ends_with') {
-				return Joi.string().pattern(new RegExp(`.*${escapeRegExp(Object.values(value)[0] as string)}$`), {
+				schema[key] = Joi.string().pattern(new RegExp(`.*${escapeRegExp(Object.values(value)[0] as string)}$`), {
 					name: 'ends_with',
 				});
 			}
 
 			if (operator === '_nends_with') {
-				return Joi.string().pattern(new RegExp(`.*${escapeRegExp(Object.values(value)[0] as string)}$`), {
+				schema[key] = Joi.string().pattern(new RegExp(`.*${escapeRegExp(Object.values(value)[0] as string)}$`), {
 					name: 'ends_with',
 					invert: true,
 				});
@@ -172,6 +171,10 @@ export default function generateJoi(filter: Record<string, any> | null, options?
 				const values = Object.values(value)[0] as number[];
 				schema[key] = Joi.number().less(values[0]).greater(values[1]);
 			}
+
+			if (options.requireAll) {
+				schema[key] = schema[key].required();
+			}
 		}
 	}
 
diff --git a/app/src/views/private/components/filter-sidebar-detail/field-filter.vue b/app/src/views/private/components/filter-sidebar-detail/field-filter.vue
index 9dadb8ce12..25aee01791 100644
--- a/app/src/views/private/components/filter-sidebar-detail/field-filter.vue
+++ b/app/src/views/private/components/filter-sidebar-detail/field-filter.vue
@@ -45,7 +45,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
 import { Filter } from '@directus/shared/types';
 import { useFieldsStore } from '@/stores';
-import getAvailableOperatorsForType from './get-available-operators-for-type';
+import { getFilterOperatorsForType } from '@directus/shared/utils';
 import FilterInput from './filter-input.vue';
 
 export default defineComponent({
@@ -94,7 +94,7 @@ export default defineComponent({
 
 		const parsedField = computed(() => {
 			const field = getFieldForKey(props.filter.field);
-			return getAvailableOperatorsForType(field.type);
+			return getFilterOperatorsForType(field.type);
 		});
 
 		return { t, activeOperator, value, name, parsedField };
diff --git a/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue b/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
index 1bc9671578..5005ace16c 100644
--- a/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
+++ b/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
@@ -50,7 +50,7 @@ import { nanoid } from 'nanoid';
 import { debounce } from 'lodash';
 import FieldListItem from './field-list-item.vue';
 import { useCollection } from '@/composables/use-collection';
-import getAvailableOperatorsForType from './get-available-operators-for-type';
+import { getFilterOperatorsForType } from '@directus/shared/utils';
 import { useFieldTree } from '@/composables/use-field-tree';
 
 export default defineComponent({
@@ -143,7 +143,7 @@ export default defineComponent({
 
 		function addFilterForField(fieldKey: string) {
 			const field = fieldsStore.getField(props.collection, fieldKey) as Field;
-			const defaultOperator = getAvailableOperatorsForType(field.type).operators[0];
+			const defaultOperator = getFilterOperatorsForType(field.type).operators[0];
 
 			emit('update:modelValue', [
 				...props.modelValue,
diff --git a/app/src/views/private/components/filter-sidebar-detail/types.ts b/app/src/views/private/components/filter-sidebar-detail/types.ts
index aff36cd5c1..45de5d059b 100644
--- a/app/src/views/private/components/filter-sidebar-detail/types.ts
+++ b/app/src/views/private/components/filter-sidebar-detail/types.ts
@@ -3,8 +3,3 @@ export type FieldTree = {
 	name: string;
 	children?: FieldTree[];
 };
-
-export type OperatorType = {
-	type: string;
-	operators: string[];
-};
diff --git a/app/vite.config.js b/app/vite.config.js
index 2db884278d..ed31b97f31 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -7,7 +7,7 @@ import {
 	getPackageExtensions,
 	getLocalExtensions,
 	generateExtensionsEntry,
-} from '@directus/shared/utils';
+} from '@directus/shared/utils/node';
 import { APP_SHARED_DEPS, APP_EXTENSION_TYPES } from '@directus/shared/constants';
 
 // https://vitejs.dev/config/
diff --git a/docs/reference/environment-variables.md b/docs/reference/environment-variables.md
index 2b25e6a2b1..c516240db0 100644
--- a/docs/reference/environment-variables.md
+++ b/docs/reference/environment-variables.md
@@ -16,7 +16,7 @@
 | `LOG_STYLE`                | Render the logs human readable (pretty) or as JSON. One of `pretty`, `raw`.                                | `pretty`      |
 | `MAX_PAYLOAD_SIZE`         | Controls the maximum request body size. Accepts number of bytes, or human readable string.                 | `100kb`       |
 | `ROOT_REDIRECT`            | Where to redirect to when navigating to `/`. Accepts a relative path, absolute URL, or `false` to disable. | `./admin`     |
-| `SERVE_APP`                | Whether or not to serve the Admin App under `/admin`.                                     | true            |
+| `SERVE_APP`                | Whether or not to serve the Admin App under `/admin`.                                                      | true          |
 
 <sup>[1]</sup> The PUBLIC_URL value is used for things like oAuth redirects, forgot-password emails, and logos that
 needs to be publicly available on the internet.
diff --git a/package-lock.json b/package-lock.json
index fc1c5ad780..7f3e9e653c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57831,7 +57831,9 @@
 			"dependencies": {
 				"express": "4.17.1",
 				"fs-extra": "10.0.0",
+				"joi": "^17.4.1",
 				"knex-schema-inspector": "1.5.12",
+				"lodash": "^4.17.21",
 				"vue": "3.1.5",
 				"vue-router": "4.0.10"
 			},
@@ -63023,7 +63025,9 @@
 			"requires": {
 				"express": "4.17.1",
 				"fs-extra": "10.0.0",
+				"joi": "^17.4.1",
 				"knex-schema-inspector": "1.5.12",
+				"lodash": "^4.17.21",
 				"npm-run-all": "4.1.5",
 				"rimraf": "3.0.2",
 				"typescript": "4.3.5",
diff --git a/packages/extension-sdk/src/index.ts b/packages/extension-sdk/src/index.ts
index 396ecc420f..1ea9b62793 100644
--- a/packages/extension-sdk/src/index.ts
+++ b/packages/extension-sdk/src/index.ts
@@ -5,5 +5,5 @@ export {
 	defineModule,
 	defineHook,
 	defineEndpoint,
-} from '@directus/shared/utils/browser';
+} from '@directus/shared/utils';
 export { useLayoutState } from '@directus/shared/composables';
diff --git a/packages/shared/package.json b/packages/shared/package.json
index cf117029a2..ea23573d0b 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -36,11 +36,16 @@
 		"dev": "npm run build -- -w --preserveWatchOutput --incremental"
 	},
 	"author": "Nicola Krumschmidt",
+	"maintainers": [
+		"Rijk van Zanten <rijkvanzanten@me.com>"
+	],
 	"gitHead": "24621f3934dc77eb23441331040ed13c676ceffd",
 	"dependencies": {
 		"express": "4.17.1",
 		"fs-extra": "10.0.0",
+		"joi": "^17.4.1",
 		"knex-schema-inspector": "1.5.12",
+		"lodash": "^4.17.21",
 		"vue": "3.1.5",
 		"vue-router": "4.0.10"
 	},
diff --git a/packages/shared/src/constants/field-types.ts b/packages/shared/src/constants/field-types.ts
new file mode 100644
index 0000000000..4e623b9438
--- /dev/null
+++ b/packages/shared/src/constants/field-types.ts
@@ -0,0 +1,33 @@
+export const types = [
+	'alias',
+	'bigInteger',
+	'boolean',
+	'date',
+	'dateTime',
+	'decimal',
+	'float',
+	'integer',
+	'json',
+	'string',
+	'text',
+	'time',
+	'timestamp',
+	'binary',
+	'uuid',
+	'hash',
+	'csv',
+	'unknown',
+] as const;
+
+export const localTypes = [
+	'standard',
+	'file',
+	'files',
+	'm2o',
+	'o2m',
+	'm2m',
+	'm2a',
+	'presentation',
+	'translations',
+	'group',
+] as const;
diff --git a/packages/shared/src/types/fields.ts b/packages/shared/src/types/fields.ts
index 3c3141ee26..265075de13 100644
--- a/packages/shared/src/types/fields.ts
+++ b/packages/shared/src/types/fields.ts
@@ -1,3 +1,4 @@
+import { FilterOperator } from './filter';
 import { Column } from 'knex-schema-inspector/dist/types/column';
 import { LOCAL_TYPES, TYPES } from '../constants';
 
@@ -28,6 +29,7 @@ export type FieldMeta = {
 	translations: Translations[] | null;
 	width: Width | null;
 	note: string | null;
+	conditions: Condition[] | null;
 	system?: true;
 };
 
@@ -43,3 +45,21 @@ export interface Field extends FieldRaw {
 	name: string;
 	children?: Field[] | null;
 }
+
+export type ValidationError = {
+	code: string;
+	field: string;
+	type: FilterOperator;
+	valid?: number | string | (number | string)[];
+	invalid?: number | string | (number | string)[];
+	substring?: string;
+};
+
+export type Condition = {
+	name: string;
+	rule: Record<string, any>;
+
+	readonly?: boolean;
+	hidden?: boolean;
+	options?: Record<string, any>;
+};
diff --git a/packages/shared/src/types/filter.ts b/packages/shared/src/types/filter.ts
new file mode 100644
index 0000000000..67202c06bf
--- /dev/null
+++ b/packages/shared/src/types/filter.ts
@@ -0,0 +1,47 @@
+export type FilterOperator =
+	| 'eq'
+	| 'neq'
+	| 'lt'
+	| 'lte'
+	| 'gt'
+	| 'gte'
+	| 'in'
+	| 'nin'
+	| 'null'
+	| 'nnull'
+	| 'contains'
+	| 'ncontains'
+	| 'between'
+	| 'nbetween'
+	| 'empty'
+	| 'nempty';
+
+export type ClientFilterOperator = FilterOperator | 'starts_with' | 'nstarts_with' | 'ends_with' | 'nends_with';
+
+export type Filter = FieldFilter & {
+	_and?: FieldFilter[];
+	_or?: FieldFilter[];
+};
+
+export type FieldFilter = {
+	[field: string]: FieldFilterOperator | FieldFilter;
+};
+
+export type FieldFilterOperator = {
+	_eq?: string | number | boolean;
+	_neq?: string | number | boolean;
+	_lt?: string | number;
+	_lte?: string | number;
+	_gt?: string | number;
+	_gte?: string | number;
+	_in?: (string | number)[];
+	_nin?: (string | number)[];
+	_null?: boolean;
+	_nnull?: boolean;
+	_contains?: string;
+	_ncontains?: string;
+	_between?: (string | number)[];
+	_nbetween?: (string | number)[];
+	_empty?: boolean;
+	_nempty?: boolean;
+};
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index b82ad1a67b..3600b29ae7 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -2,6 +2,7 @@ export * from './displays';
 export * from './endpoints';
 export * from './extensions';
 export * from './fields';
+export * from './filter';
 export * from './hooks';
 export * from './interfaces';
 export * from './items';
diff --git a/packages/shared/src/types/layouts.ts b/packages/shared/src/types/layouts.ts
index 8b2bdcd339..a9b85c17e5 100644
--- a/packages/shared/src/types/layouts.ts
+++ b/packages/shared/src/types/layouts.ts
@@ -1,6 +1,6 @@
 import { Component } from 'vue';
 import { Item } from './items';
-import { Filter } from './presets';
+import { AppFilter } from './presets';
 
 export interface LayoutConfig<Options = any, Query = any> {
 	id: string;
@@ -20,7 +20,7 @@ export interface LayoutProps<Options = any, Query = any> {
 	selection: Item[];
 	layoutOptions: Options;
 	layoutQuery: Query;
-	filters: Filter[];
+	filters: AppFilter[];
 	searchQuery: string | null;
 	selectMode: boolean;
 	readonly: boolean;
diff --git a/packages/shared/src/types/presets.ts b/packages/shared/src/types/presets.ts
index 6afdbd6605..165312bdbd 100644
--- a/packages/shared/src/types/presets.ts
+++ b/packages/shared/src/types/presets.ts
@@ -1,22 +1,6 @@
-export type FilterOperator =
-	| 'eq'
-	| 'neq'
-	| 'lt'
-	| 'lte'
-	| 'gt'
-	| 'gte'
-	| 'in'
-	| 'nin'
-	| 'null'
-	| 'nnull'
-	| 'contains'
-	| 'ncontains'
-	| 'between'
-	| 'nbetween'
-	| 'empty'
-	| 'nempty';
+import { FilterOperator } from './filter';
 
-export type Filter = {
+export type AppFilter = {
 	key: string;
 	field: string;
 	operator: FilterOperator;
@@ -31,7 +15,7 @@ export type Preset = {
 	role: string | null;
 	collection: string;
 	search: string | null;
-	filters: readonly Filter[] | null;
+	filters: readonly AppFilter[] | null;
 	layout: string | null;
 	layout_query: { [layout: string]: any } | null;
 	layout_options: { [layout: string]: any } | null;
diff --git a/packages/shared/src/utils/browser/index.ts b/packages/shared/src/utils/browser/index.ts
index e04c71aa02..d4942e089c 100644
--- a/packages/shared/src/utils/browser/index.ts
+++ b/packages/shared/src/utils/browser/index.ts
@@ -1,4 +1,2 @@
-export * from './define-extension';
-export * from './is-extension';
-export * from './pluralize';
-export * from './validate-extension-manifest';
+// nothing to see here
+export {};
diff --git a/packages/shared/src/utils/browser/define-extension.ts b/packages/shared/src/utils/define-extension.ts
similarity index 97%
rename from packages/shared/src/utils/browser/define-extension.ts
rename to packages/shared/src/utils/define-extension.ts
index 11f317d746..c2ddd4fd5b 100644
--- a/packages/shared/src/utils/browser/define-extension.ts
+++ b/packages/shared/src/utils/define-extension.ts
@@ -5,7 +5,7 @@ import {
 	ModuleConfig,
 	HookRegisterFunction,
 	EndpointRegisterFunction,
-} from '../../types';
+} from '../types';
 
 export function defineInterface(config: InterfaceConfig): InterfaceConfig {
 	return config;
diff --git a/packages/shared/src/utils/generate-joi.ts b/packages/shared/src/utils/generate-joi.ts
new file mode 100644
index 0000000000..11ec0328e9
--- /dev/null
+++ b/packages/shared/src/utils/generate-joi.ts
@@ -0,0 +1,199 @@
+import BaseJoi, { AnySchema } from 'joi';
+import { escapeRegExp, merge } from 'lodash';
+import { FieldFilter } from '../types/filter';
+
+const Joi = BaseJoi.extend({
+	type: 'string',
+	base: BaseJoi.string(),
+	messages: {
+		'string.contains': '{{#label}} must contain [{{#substring}}]',
+		'string.ncontains': "{{#label}} can't contain [{{#substring}}]",
+	},
+	rules: {
+		contains: {
+			args: [
+				{
+					name: 'substring',
+					ref: true,
+					assert: (val) => typeof val === 'string',
+					message: 'must be a string',
+				},
+			],
+			method(substring) {
+				return this.$_addRule({ name: 'contains', args: { substring } });
+			},
+			validate(value, helpers, { substring }) {
+				if (value.includes(substring) === false) {
+					return helpers.error('string.contains', { substring });
+				}
+
+				return value;
+			},
+		},
+		ncontains: {
+			args: [
+				{
+					name: 'substring',
+					ref: true,
+					assert: (val) => typeof val === 'string',
+					message: 'must be a string',
+				},
+			],
+			method(substring) {
+				return this.$_addRule({ name: 'ncontains', args: { substring } });
+			},
+			validate(value, helpers, { substring }) {
+				if (value.includes(substring) === true) {
+					return helpers.error('string.ncontains', { substring });
+				}
+
+				return value;
+			},
+		},
+	},
+});
+
+export type JoiOptions = {
+	requireAll?: boolean;
+};
+
+const defaults: JoiOptions = {
+	requireAll: false,
+};
+
+/**
+ * Generate a Joi schema from a filter object.
+ *
+ * @param {FieldFilter} filter - Field filter object. Note: does not support _and/_or filters.
+ * @param {JoiOptions} [options] - Options for the schema generation.
+ * @returns {AnySchema} Joi schema.
+ */
+export function generateJoi(filter: FieldFilter, options?: JoiOptions): AnySchema {
+	filter = filter || {};
+
+	options = merge({}, defaults, options);
+
+	const schema: Record<string, AnySchema> = {};
+
+	const key = Object.keys(filter)[0];
+
+	if (!key) {
+		throw new Error(`[generateJoi] Filter doesn't contain field key. Passed filter: ${JSON.stringify(filter)}`);
+	}
+
+	const value = Object.values(filter)[0];
+
+	if (!value) {
+		throw new Error(`[generateJoi] Filter doesn't contain filter rule. Passed filter: ${JSON.stringify(filter)}`);
+	}
+
+	const isField = key.startsWith('_') === false;
+
+	if (isField) {
+		const operator = Object.keys(value)[0];
+
+		if (operator === '_eq') {
+			schema[key] = Joi.any().equal(Object.values(value)[0]);
+		}
+
+		if (operator === '_neq') {
+			schema[key] = Joi.any().not(Object.values(value)[0]);
+		}
+
+		if (operator === '_contains') {
+			schema[key] = Joi.string().contains(Object.values(value)[0]);
+		}
+
+		if (operator === '_ncontains') {
+			schema[key] = Joi.string().ncontains(Object.values(value)[0]);
+		}
+
+		if (operator === '_starts_with') {
+			schema[key] = Joi.string().pattern(new RegExp(`^${escapeRegExp(Object.values(value)[0] as string)}.*`), {
+				name: 'starts_with',
+			});
+		}
+
+		if (operator === '_nstarts_with') {
+			schema[key] = Joi.string().pattern(new RegExp(`^${escapeRegExp(Object.values(value)[0] as string)}.*`), {
+				name: 'starts_with',
+				invert: true,
+			});
+		}
+
+		if (operator === '_ends_with') {
+			schema[key] = Joi.string().pattern(new RegExp(`.*${escapeRegExp(Object.values(value)[0] as string)}$`), {
+				name: 'ends_with',
+			});
+		}
+
+		if (operator === '_nends_with') {
+			schema[key] = Joi.string().pattern(new RegExp(`.*${escapeRegExp(Object.values(value)[0] as string)}$`), {
+				name: 'ends_with',
+				invert: true,
+			});
+		}
+
+		if (operator === '_in') {
+			schema[key] = Joi.any().equal(...(Object.values(value)[0] as (string | number)[]));
+		}
+
+		if (operator === '_nin') {
+			schema[key] = Joi.any().not(...(Object.values(value)[0] as (string | number)[]));
+		}
+
+		if (operator === '_gt') {
+			schema[key] = Joi.number().greater(Number(Object.values(value)[0]));
+		}
+
+		if (operator === '_gte') {
+			schema[key] = Joi.number().min(Number(Object.values(value)[0]));
+		}
+
+		if (operator === '_lt') {
+			schema[key] = Joi.number().less(Number(Object.values(value)[0]));
+		}
+
+		if (operator === '_lte') {
+			schema[key] = Joi.number().max(Number(Object.values(value)[0]));
+		}
+
+		if (operator === '_null') {
+			schema[key] = Joi.any().valid(null);
+		}
+
+		if (operator === '_nnull') {
+			schema[key] = Joi.any().invalid(null);
+		}
+
+		if (operator === '_empty') {
+			schema[key] = Joi.any().valid('');
+		}
+
+		if (operator === '_nempty') {
+			schema[key] = Joi.any().invalid('');
+		}
+
+		if (operator === '_between') {
+			const values = Object.values(value)[0] as number[];
+			schema[key] = Joi.number().greater(values[0]).less(values[1]);
+		}
+
+		if (operator === '_nbetween') {
+			const values = Object.values(value)[0] as number[];
+			schema[key] = Joi.number().less(values[0]).greater(values[1]);
+		}
+	} else {
+		schema[key] = Joi.object({
+			[key]: generateJoi(value as FieldFilter, options),
+		});
+	}
+
+	schema[key] = schema[key] ?? Joi.any();
+
+	if (options.requireAll) {
+		schema[key] = schema[key]!.required();
+	}
+
+	return Joi.object(schema).unknown();
+}
diff --git a/packages/shared/src/utils/get-filter-operators-for-type.ts b/packages/shared/src/utils/get-filter-operators-for-type.ts
new file mode 100644
index 0000000000..ccc74ef8b1
--- /dev/null
+++ b/packages/shared/src/utils/get-filter-operators-for-type.ts
@@ -0,0 +1,60 @@
+import { ClientFilterOperator, Type } from '../types';
+
+export function getFilterOperatorsForType(type: Type): ClientFilterOperator[] {
+	switch (type) {
+		// Text
+		case 'binary':
+		case 'json':
+		case 'hash':
+		case 'string':
+			return [
+				'contains',
+				'ncontains',
+				'starts_with',
+				'nstarts_with',
+				'ends_with',
+				'nends_with',
+				'eq',
+				'neq',
+				'empty',
+				'nempty',
+				'in',
+				'nin',
+			];
+		case 'uuid':
+			return ['eq', 'neq', 'empty', 'nempty', 'in', 'nin'];
+
+		// Boolean
+		case 'boolean':
+			return ['eq', 'neq', 'empty', 'nempty'];
+
+		// Numbers
+		case 'integer':
+		case 'decimal':
+			return ['eq', 'neq', 'lt', 'lte', 'gt', 'gte', 'between', 'nbetween', 'empty', 'nempty', 'in', 'nin'];
+
+		// Datetime
+		case 'dateTime':
+		case 'date':
+		case 'time':
+			return ['eq', 'neq', 'lt', 'lte', 'gt', 'gte', 'between', 'nbetween', 'empty', 'nempty', 'in', 'nin'];
+
+		default:
+			return [
+				'eq',
+				'neq',
+				'lt',
+				'lte',
+				'gt',
+				'gte',
+				'contains',
+				'ncontains',
+				'between',
+				'nbetween',
+				'empty',
+				'nempty',
+				'in',
+				'nin',
+			];
+	}
+}
diff --git a/packages/shared/src/utils/index.ts b/packages/shared/src/utils/index.ts
index 59eadcbb63..8b087fa717 100644
--- a/packages/shared/src/utils/index.ts
+++ b/packages/shared/src/utils/index.ts
@@ -1,2 +1,7 @@
-export * from './browser';
-export * from './node';
+export * from './define-extension';
+export * from './generate-joi';
+export * from './get-filter-operators-for-type';
+export * from './is-extension';
+export * from './pluralize';
+export * from './validate-extension-manifest';
+export * from './validate-payload';
diff --git a/packages/shared/src/utils/browser/is-extension.ts b/packages/shared/src/utils/is-extension.ts
similarity index 88%
rename from packages/shared/src/utils/browser/is-extension.ts
rename to packages/shared/src/utils/is-extension.ts
index 81a77fcbd8..2072a3e9db 100644
--- a/packages/shared/src/utils/browser/is-extension.ts
+++ b/packages/shared/src/utils/is-extension.ts
@@ -1,5 +1,5 @@
-import { API_EXTENSION_TYPES, APP_EXTENSION_TYPES, EXTENSION_PACKAGE_TYPES, EXTENSION_TYPES } from '../../constants';
-import { ApiExtensionType, AppExtensionType, ExtensionPackageType, ExtensionType } from '../../types';
+import { API_EXTENSION_TYPES, APP_EXTENSION_TYPES, EXTENSION_PACKAGE_TYPES, EXTENSION_TYPES } from '../constants';
+import { ApiExtensionType, AppExtensionType, ExtensionPackageType, ExtensionType } from '../types';
 
 export function isExtension(type: string): type is ExtensionType {
 	return (EXTENSION_TYPES as readonly string[]).includes(type);
diff --git a/packages/shared/src/utils/node/ensure-extension-dirs.ts b/packages/shared/src/utils/node/ensure-extension-dirs.ts
index 5bde8163fe..fc047ddc45 100644
--- a/packages/shared/src/utils/node/ensure-extension-dirs.ts
+++ b/packages/shared/src/utils/node/ensure-extension-dirs.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 import fse from 'fs-extra';
-import { pluralize } from '../browser';
+import { pluralize } from '../pluralize';
 import { EXTENSION_TYPES } from '../../constants';
 
 export async function ensureExtensionDirs(extensionsPath: string): Promise<void> {
diff --git a/packages/shared/src/utils/node/get-extensions.ts b/packages/shared/src/utils/node/get-extensions.ts
index 88a34323b4..2498765f49 100644
--- a/packages/shared/src/utils/node/get-extensions.ts
+++ b/packages/shared/src/utils/node/get-extensions.ts
@@ -4,7 +4,8 @@ import { Extension, ExtensionManifestRaw } from '../../types';
 import { resolvePackage } from './resolve-package';
 import { listFolders } from './list-folders';
 import { EXTENSION_NAME_REGEX, EXTENSION_PKG_KEY, EXTENSION_TYPES } from '../../constants';
-import { pluralize, validateExtensionManifest } from '../browser';
+import { pluralize } from '../pluralize';
+import { validateExtensionManifest } from '../validate-extension-manifest';
 
 export async function getPackageExtensions(root: string): Promise<Extension[]> {
 	let pkg: { dependencies?: Record<string, string> };
diff --git a/packages/shared/src/utils/browser/pluralize.ts b/packages/shared/src/utils/pluralize.ts
similarity index 83%
rename from packages/shared/src/utils/browser/pluralize.ts
rename to packages/shared/src/utils/pluralize.ts
index 65574fc098..2be5ed840a 100644
--- a/packages/shared/src/utils/browser/pluralize.ts
+++ b/packages/shared/src/utils/pluralize.ts
@@ -1,4 +1,4 @@
-import { Plural } from '../../types';
+import { Plural } from '../types';
 
 export function pluralize<T extends string>(str: T): Plural<T> {
 	return `${str}s`;
diff --git a/packages/shared/src/utils/browser/validate-extension-manifest.ts b/packages/shared/src/utils/validate-extension-manifest.ts
similarity index 85%
rename from packages/shared/src/utils/browser/validate-extension-manifest.ts
rename to packages/shared/src/utils/validate-extension-manifest.ts
index 3ecdf23217..aa4a07aa0e 100644
--- a/packages/shared/src/utils/browser/validate-extension-manifest.ts
+++ b/packages/shared/src/utils/validate-extension-manifest.ts
@@ -1,5 +1,5 @@
-import { EXTENSION_PKG_KEY } from '../../constants';
-import { ExtensionManifest, ExtensionManifestRaw } from '../../types';
+import { EXTENSION_PKG_KEY } from '../constants';
+import { ExtensionManifest, ExtensionManifestRaw } from '../types';
 import { isExtensionPackage } from './is-extension';
 
 export function validateExtensionManifest(
diff --git a/packages/shared/src/utils/validate-payload.ts b/packages/shared/src/utils/validate-payload.ts
new file mode 100644
index 0000000000..844ba26f4e
--- /dev/null
+++ b/packages/shared/src/utils/validate-payload.ts
@@ -0,0 +1,58 @@
+import { FieldFilter, Filter } from '../types/filter';
+import { flatten } from 'lodash';
+import { generateJoi, JoiOptions } from './generate-joi';
+import Joi from 'joi';
+
+/**
+ * Validate the payload against the given filter rules
+ *
+ * @param {Filter} filter - The filter rules to check against
+ * @param {Record<string, any>} payload - The payload to validate
+ * @param {JoiOptions} [options] - Optional options to pass to Joi
+ * @returns Array of errors
+ */
+export function validatePayload(
+	filter: Filter,
+	payload: Record<string, any>,
+	options?: JoiOptions
+): Joi.ValidationError[] {
+	const errors: Joi.ValidationError[] = [];
+
+	/**
+	 * Note there can only be a single _and / _or per level
+	 */
+
+	if (Object.keys(filter)[0] === '_and') {
+		const subValidation = Object.values(filter)[0] as FieldFilter[];
+
+		const nestedErrors = flatten<Joi.ValidationError>(
+			subValidation.map((subObj: Record<string, any>) => {
+				return validatePayload(subObj, payload);
+			})
+		).filter((err?: Joi.ValidationError) => err);
+
+		errors.push(...nestedErrors);
+	} else if (Object.keys(filter)[0] === '_or') {
+		const subValidation = Object.values(filter)[0] as FieldFilter[];
+
+		const nestedErrors = flatten<Joi.ValidationError>(
+			subValidation.map((subObj: Record<string, any>) => validatePayload(subObj, payload))
+		);
+
+		const allErrored = subValidation.length === nestedErrors.length;
+
+		if (allErrored) {
+			errors.push(...nestedErrors);
+		}
+	} else {
+		const schema = generateJoi(filter, options);
+
+		const { error } = schema.validate(payload, { abortEarly: false });
+
+		if (error) {
+			errors.push(error);
+		}
+	}
+
+	return errors;
+}
diff --git a/packages/shared/utils/node.d.ts b/packages/shared/utils/node.d.ts
new file mode 100644
index 0000000000..4a327a5dc7
--- /dev/null
+++ b/packages/shared/utils/node.d.ts
@@ -0,0 +1 @@
+export * from '../dist/esm/utils/node';