diff --git a/app/jest.config.js b/app/jest.config.js
deleted file mode 100644
index 9cc18d9f67..0000000000
--- a/app/jest.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
-const base = require('../jest.config.js');
-
-require('dotenv').config();
-
-module.exports = {
-	...base,
-	preset: 'ts-jest',
-	testEnvironment: 'node',
-	moduleNameMapper: {
-		...base.moduleNameMapper,
-		'@/(.*)': `${__dirname}/src/$1`,
-	},
-};
diff --git a/app/package.json b/app/package.json
index 862bc8b517..4d293e4661 100644
--- a/app/package.json
+++ b/app/package.json
@@ -25,10 +25,10 @@
 		"dev": "vite",
 		"build": "vite build",
 		"serve": "vite preview",
-		"test": "jest",
-		"test:watch": "jest --watchAll"
+		"test": "vitest run",
+		"test:coverage": "vitest run --coverage",
+		"test:watch": "vitest"
 	},
-	"gitHead": "24621f3934dc77eb23441331040ed13c676ceffd",
 	"devDependencies": {
 		"@directus/docs": "9.14.2",
 		"@directus/extensions-sdk": "^9.14.1",
@@ -45,6 +45,7 @@
 		"@mapbox/mapbox-gl-draw": "1.3.0",
 		"@mapbox/mapbox-gl-draw-static-mode": "1.0.1",
 		"@mapbox/mapbox-gl-geocoder": "4.7.4",
+		"@pinia/testing": "^0.0.12",
 		"@popperjs/core": "2.10.2",
 		"@rollup/plugin-yaml": "3.1.0",
 		"@sindresorhus/slugify": "2.1.0",
@@ -59,7 +60,6 @@
 		"@types/dompurify": "2.3.1",
 		"@types/file-saver": "^2.0.5",
 		"@types/geojson": "7946.0.8",
-		"@types/jest": "28.1.4",
 		"@types/json2csv": "^5.0.3",
 		"@types/lodash": "4.14.177",
 		"@types/mapbox__mapbox-gl-draw": "1.2.3",
@@ -72,10 +72,12 @@
 		"@types/wellknown": "0.5.1",
 		"@vitejs/plugin-vue": "2.3.3",
 		"@vue/compiler-sfc": "3.2.36",
+		"@vue/test-utils": "^2.0.2",
 		"apexcharts": "3.30.0",
 		"axios": "0.24.0",
 		"base-64": "1.0.0",
 		"bytes": "^3.1.2",
+		"c8": "^7.12.0",
 		"camelcase": "^7.0.0",
 		"caret-pos": "2.0.0",
 		"codemirror": "5.64.0",
@@ -91,9 +93,9 @@
 		"flatpickr": "4.6.9",
 		"front-matter": "4.0.2",
 		"geojson": "^0.5.0",
+		"happy-dom": "^6.0.4",
 		"highlight.js": "^11.5.1",
 		"html-entities": "2.3.2",
-		"jest": "28.1.2",
 		"joi": "^17.6.0",
 		"json-to-graphql-query": "^2.2.4",
 		"json2csv": "^5.0.7",
@@ -120,11 +122,11 @@
 		"rollup": "^2.75.6",
 		"sass": "1.43.4",
 		"tinymce": "5.10.2",
-		"ts-jest": "28.0.5",
 		"tslib": "^2.4.0",
 		"typescript": "4.7.3",
 		"vite": "2.9.9",
 		"vite-plugin-vue-markdown": "0.1.1",
+		"vitest": "^0.18.1",
 		"vue": "3.2.36",
 		"vue-i18n": "9.1.10",
 		"vue-router": "4.0.15",
diff --git a/app/src/__utils__/crypto.ts b/app/src/__utils__/crypto.ts
new file mode 100644
index 0000000000..71e547cc26
--- /dev/null
+++ b/app/src/__utils__/crypto.ts
@@ -0,0 +1,7 @@
+import crypto from 'node:crypto';
+
+export const cryptoStub = {
+	value: {
+		getRandomValues: (arr: any[]) => crypto.randomBytes(arr.length),
+	},
+};
diff --git a/app/src/components/__snapshots__/v-sheet.test.ts.snap b/app/src/components/__snapshots__/v-sheet.test.ts.snap
new file mode 100644
index 0000000000..138cb1f1d9
--- /dev/null
+++ b/app/src/components/__snapshots__/v-sheet.test.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `"<div class=\\"v-sheet\\" data-v-24b86768=\\"\\">Slot Content</div>"`;
diff --git a/app/src/components/v-sheet.test.ts b/app/src/components/v-sheet.test.ts
new file mode 100644
index 0000000000..c9fe15a4e5
--- /dev/null
+++ b/app/src/components/v-sheet.test.ts
@@ -0,0 +1,16 @@
+import { test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VSheet from './v-sheet.vue';
+
+test('Mount component', () => {
+	expect(VSheet).toBeTruthy();
+
+	const wrapper = mount(VSheet, {
+		slots: {
+			default: 'Slot Content',
+		},
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/app/src/components/v-sheet.vue b/app/src/components/v-sheet.vue
index 5be539f32b..ef0db684eb 100644
--- a/app/src/components/v-sheet.vue
+++ b/app/src/components/v-sheet.vue
@@ -4,19 +4,8 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	props: {},
-	setup() {
-		return {};
-	},
-});
-</script>
-
-<style>
-body {
+<style lang="scss" scoped>
+:global(body) {
 	--v-sheet-background-color: var(--background-subdued);
 	--v-sheet-height: auto;
 	--v-sheet-min-height: var(--input-height);
@@ -26,9 +15,7 @@ body {
 	--v-sheet-max-width: none;
 	--v-sheet-padding: 8px;
 }
-</style>
 
-<style lang="scss" scoped>
 .v-sheet {
 	width: var(--v-sheet-width);
 	min-width: var(--v-sheet-min-width);
diff --git a/app/src/composables/use-event-listener.test.ts b/app/src/composables/use-event-listener.test.ts
new file mode 100644
index 0000000000..792a99a7a7
--- /dev/null
+++ b/app/src/composables/use-event-listener.test.ts
@@ -0,0 +1,29 @@
+import { test, expect, vi } from 'vitest';
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
+
+import { useEventListener } from '@/composables/use-event-listener';
+
+test('Registers the event listener on mount, unregisters on unmount', () => {
+	const target = {
+		addEventListener: vi.fn(),
+		removeEventListener: vi.fn(),
+	} as any;
+
+	// eslint-disable-next-line @typescript-eslint/no-empty-function
+	const testHandler = () => {};
+
+	const TestComponent = defineComponent({
+		setup() {
+			return useEventListener(target, 'click', testHandler);
+		},
+	});
+
+	const wrapper = mount(TestComponent);
+
+	expect(target.addEventListener).toHaveBeenCalledWith('click', testHandler, undefined);
+
+	wrapper.unmount();
+
+	expect(target.removeEventListener).toHaveBeenCalledWith('click', testHandler, undefined);
+});
diff --git a/app/src/composables/use-event-listener.ts b/app/src/composables/use-event-listener.ts
index dae7bf3e78..e91ff89a9d 100644
--- a/app/src/composables/use-event-listener.ts
+++ b/app/src/composables/use-event-listener.ts
@@ -1,5 +1,14 @@
-import { onMounted, onBeforeUnmount, Ref, isRef } from 'vue';
+import { onMounted, onBeforeUnmount, Ref, unref } from 'vue';
 
+/**
+ * Adds the given event listener to the given element on mount. Auto-cleans up the event listener on
+ * unmount.
+ *
+ * @param target - The element to add the event listener to.
+ * @param type - The event type to listen for.
+ * @param handler - The event listener handler function to add.
+ * @param options - The event listener options.
+ */
 export function useEventListener<T extends EventTarget, E extends Event>(
 	target: T | Ref<T>,
 	type: string,
@@ -7,12 +16,10 @@ export function useEventListener<T extends EventTarget, E extends Event>(
 	options?: AddEventListenerOptions
 ): void {
 	onMounted(() => {
-		const t = isRef(target) ? target.value : target;
-		t.addEventListener(type, handler as (evt: Event) => void, options);
+		unref(target).addEventListener(type, handler as (evt: Event) => void, options);
 	});
 
 	onBeforeUnmount(() => {
-		const t = isRef(target) ? target.value : target;
-		t.removeEventListener(type, handler as (evt: Event) => void, options);
+		unref(target).removeEventListener(type, handler as (evt: Event) => void, options);
 	});
 }
diff --git a/app/src/composables/use-window-size.ts b/app/src/composables/use-window-size.ts
index 33c3d09281..37c4456891 100644
--- a/app/src/composables/use-window-size.ts
+++ b/app/src/composables/use-window-size.ts
@@ -12,10 +12,10 @@ export function useWindowSize(options: WindowSizeOptions = { throttle: 100 }): {
 	const width = ref(0);
 	const height = ref(0);
 
-	function setSize() {
+	const setSize = () => {
 		width.value = window.innerWidth;
 		height.value = window.innerHeight;
-	}
+	};
 
 	const onResize = throttle(setSize, options.throttle);
 
diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index d972e118fb..688c74490f 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -38,7 +38,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, PropType } from 'vue';
 import { getRelatedCollection } from '@/utils/get-related-collection';
 import { useCollection } from '@directus/shared/composables';
-import { getLocalTypeForField } from '../../modules/settings/routes/data-model/get-local-type';
+import { getLocalTypeForField } from '@/utils/get-local-type';
 import { get } from 'lodash';
 
 export default defineComponent({
diff --git a/app/src/interfaces/map/map.vue b/app/src/interfaces/map/map.vue
index 76d9e327e6..4edfcdcf24 100644
--- a/app/src/interfaces/map/map.vue
+++ b/app/src/interfaces/map/map.vue
@@ -62,38 +62,39 @@
 </template>
 
 <script lang="ts">
-import 'maplibre-gl/dist/maplibre-gl.css';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
-import { defineComponent, onMounted, onUnmounted, PropType, ref, watch, toRefs, computed } from 'vue';
 import maplibre, {
-	LngLatLike,
-	LngLatBoundsLike,
 	AnimationOptions,
+	AttributionControl,
 	CameraOptions,
+	GeolocateControl,
+	LngLatBoundsLike,
+	LngLatLike,
 	Map,
 	NavigationControl,
-	GeolocateControl,
-	AttributionControl,
 } from 'maplibre-gl';
-import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, toRefs, watch } from 'vue';
+import { useSettingsStore } from '@/stores/settings';
+import { flatten, getBBox, getGeometryFormatForType, getParser, getSerializer } from '@/utils/geometry';
+import { ButtonControl } from '@/utils/geometry/controls';
+import {
+	Field,
+	GeoJSONParser,
+	GeoJSONSerializer,
+	GeometryType,
+	MultiGeometry,
+	SimpleGeometry,
+} from '@directus/shared/types';
 // @ts-ignore
 import StaticMode from '@mapbox/mapbox-gl-draw-static-mode';
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
-import { ButtonControl } from '@/utils/geometry/controls';
 import { Geometry } from 'geojson';
-import { flatten, getBBox, getParser, getSerializer, getGeometryFormatForType } from '@/utils/geometry';
-import {
-	Field,
-	GeometryType,
-	GeoJSONParser,
-	GeoJSONSerializer,
-	SimpleGeometry,
-	MultiGeometry,
-} from '@directus/shared/types';
-import { getSetting } from '@/utils/get-setting';
-import { snakeCase, isEqual, debounce } from 'lodash';
+import { debounce, isEqual, snakeCase } from 'lodash';
 import { getMapStyle } from './style';
+
 const activeLayers = [
 	'directus-point',
 	'directus-line',
@@ -103,9 +104,8 @@ const activeLayers = [
 	'directus-polygon-and-line-vertex',
 ].flatMap((name) => [name + '.hot', name + '.cold']);
 
-import { useI18n } from 'vue-i18n';
-import { TranslateResult } from 'vue-i18n';
 import { useAppStore } from '@/stores/app';
+import { TranslateResult, useI18n } from 'vue-i18n';
 
 import { getBasemapSources, getStyleFromBasemapSource } from '@/utils/geometry/basemap';
 
@@ -154,7 +154,9 @@ export default defineComponent({
 		const geometryType = props.geometryType || (props.fieldData?.type.split('.')[1] as GeometryType);
 		const geometryFormat = getGeometryFormatForType(props.type)!;
 
-		const mapboxKey = getSetting('mapbox_key');
+		const settingsStore = useSettingsStore();
+		const mapboxKey = settingsStore.settings?.mapbox_key;
+
 		const basemaps = getBasemapSources();
 		const appStore = useAppStore();
 		const { basemap } = toRefs(appStore);
diff --git a/app/src/interfaces/map/options.vue b/app/src/interfaces/map/options.vue
index 288d7e6d40..0f32d39bb9 100644
--- a/app/src/interfaces/map/options.vue
+++ b/app/src/interfaces/map/options.vue
@@ -25,7 +25,7 @@ import { getBasemapSources, getStyleFromBasemapSource } from '@/utils/geometry/b
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { Map, CameraOptions } from 'maplibre-gl';
 import { useAppStore } from '@/stores/app';
-import { getSetting } from '@/utils/get-setting';
+import { useSettingsStore } from '@/stores/settings';
 
 export default defineComponent({
 	props: {
@@ -50,6 +50,8 @@ export default defineComponent({
 		const geometryType = ref<GeometryType>(nativeGeometryType.value ?? props.value?.geometryType ?? 'Point');
 		const defaultView = ref<CameraOptions | undefined>(props.value?.defaultView);
 
+		const settingsStore = useSettingsStore();
+
 		watch(() => props.field?.type, watchType);
 		watch(nativeGeometryType, watchNativeType);
 		watch([geometryType, defaultView], input, { immediate: true });
@@ -72,7 +74,7 @@ export default defineComponent({
 		const mapContainer = ref<HTMLElement | null>(null);
 		let map: Map;
 
-		const mapboxKey = getSetting('mapbox_key');
+		const mapboxKey = settingsStore.settings?.mapbox_key;
 		const basemaps = getBasemapSources();
 		const appStore = useAppStore();
 		const { basemap } = toRefs(appStore);
diff --git a/app/src/layouts/map/components/map.vue b/app/src/layouts/map/components/map.vue
index 9acc6b3830..b8e50fb83d 100644
--- a/app/src/layouts/map/components/map.vue
+++ b/app/src/layouts/map/components/map.vue
@@ -27,8 +27,8 @@ import { ref, watch, PropType, onMounted, onUnmounted, defineComponent, toRefs,
 import { useI18n } from 'vue-i18n';
 
 import { ShowSelect } from '@directus/shared/types';
-import { getSetting } from '@/utils/get-setting';
 import { useAppStore } from '@/stores/app';
+import { useSettingsStore } from '@/stores/settings';
 import { BoxSelectControl, ButtonControl } from '@/utils/geometry/controls';
 import { getBasemapSources, getStyleFromBasemapSource } from '@/utils/geometry/basemap';
 
@@ -72,6 +72,7 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 		const appStore = useAppStore();
+		const settingsStore = useSettingsStore();
 		let map: Map;
 		const hoveredFeature = ref<MapboxGeoJSONFeature>();
 		const hoveredCluster = ref<boolean>();
@@ -79,7 +80,7 @@ export default defineComponent({
 		const container = ref<HTMLElement>();
 		const unwatchers = [] as WatchStopHandle[];
 		const { sidebarOpen, basemap } = toRefs(appStore);
-		const mapboxKey = getSetting('mapbox_key');
+		const mapboxKey = settingsStore.settings?.mapbox_key;
 		const basemaps = getBasemapSources();
 		const style = computed(() => {
 			const source = basemaps.find((source) => source.name === basemap.value) ?? basemaps[0];
diff --git a/app/src/modules/files/components/navigation.vue b/app/src/modules/files/components/navigation.vue
index 2e6b9d70fd..bdea005fd2 100644
--- a/app/src/modules/files/components/navigation.vue
+++ b/app/src/modules/files/components/navigation.vue
@@ -65,7 +65,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, watch } from 'vue';
 import { useFolders, Folder } from '@/composables/use-folders';
 import NavigationFolder from './navigation-folder.vue';
-import { arraysAreEqual } from '@/utils/arrays-are-equal';
+import { isEqual } from 'lodash';
 
 export default defineComponent({
 	components: { NavigationFolder },
@@ -103,7 +103,7 @@ export default defineComponent({
 				}
 			}
 
-			if (newOpenFolders.length !== 1 && arraysAreEqual(newOpenFolders, openFolders.value) === false) {
+			if (newOpenFolders.length !== 1 && isEqual(newOpenFolders, openFolders.value) === false) {
 				openFolders.value = newOpenFolders;
 			}
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/index.ts b/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
index 04cb08dc68..8062f8dd9b 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
@@ -20,7 +20,7 @@ import { useFieldsStore } from '@/stores/fields';
 import { useRelationsStore } from '@/stores/relations';
 
 import * as alterations from './alterations';
-import { getLocalTypeForField } from '../../get-local-type';
+import { getLocalTypeForField } from '@/utils/get-local-type';
 import api from '@/api';
 
 export function syncFieldDetailStoreProperty(path: string, defaultValue?: any) {
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue
index 6d1b35d50f..2a97c8d26b 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue
@@ -80,7 +80,7 @@
 import { computed, defineComponent, PropType } from 'vue';
 import { Field } from '@directus/shared/types';
 import { useI18n } from 'vue-i18n';
-import { getLocalTypeForField } from '../../get-local-type';
+import { getLocalTypeForField } from '@/utils/get-local-type';
 
 export default defineComponent({
 	name: 'FieldSelectMenu',
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 99b93633b3..4f861b302d 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -151,7 +151,7 @@ import { useFieldsStore } from '@/stores/fields';
 import { getInterface } from '@/interfaces';
 import { useRouter } from 'vue-router';
 import { cloneDeep } from 'lodash';
-import { getLocalTypeForField } from '../../get-local-type';
+import { getLocalTypeForField } from '@/utils/get-local-type';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { Field } from '@directus/shared/types';
diff --git a/app/src/panels/time-series/panel-time-series.vue b/app/src/panels/time-series/panel-time-series.vue
index f24f1c3e55..f7e71224ac 100644
--- a/app/src/panels/time-series/panel-time-series.vue
+++ b/app/src/panels/time-series/panel-time-series.vue
@@ -6,9 +6,8 @@
 
 <script setup lang="ts">
 import { useFieldsStore } from '@/stores/fields';
-import { adjustDate } from '@/utils/adjust-date';
 import { Filter } from '@directus/shared/types';
-import { abbreviateNumber } from '@directus/shared/utils';
+import { abbreviateNumber, adjustDate } from '@directus/shared/utils';
 import { cssVar } from '@directus/shared/utils/browser';
 import ApexCharts from 'apexcharts';
 import { addWeeks } from 'date-fns';
diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index 46e51e9bf3..cff4fa4a19 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -1,12 +1,12 @@
 import api from '@/api';
 import { i18n } from '@/lang';
-import { useRelationsStore } from '@/stores/relations';
 import { useCollectionsStore } from '@/stores/collections';
+import { useRelationsStore } from '@/stores/relations';
 import { notEmpty } from '@/utils/is-empty';
 import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
 import { DeepPartial, Field, FieldRaw, Relation } from '@directus/shared/types';
-import { isEqual, merge, orderBy, omit } from 'lodash';
+import { isEqual, merge, omit, orderBy } from 'lodash';
 import { nanoid } from 'nanoid';
 import { defineStore } from 'pinia';
 
diff --git a/app/src/utils/add-query-to-path.test.ts b/app/src/utils/add-query-to-path.test.ts
new file mode 100644
index 0000000000..b3c36cba61
--- /dev/null
+++ b/app/src/utils/add-query-to-path.test.ts
@@ -0,0 +1,20 @@
+import { test, expect } from 'vitest';
+import { addQueryToPath } from '@/utils/add-query-to-path';
+
+test('Adds query parameters to given path', () => {
+	const output = addQueryToPath('/path/to/something', {
+		test: 'hello',
+		another: 'world',
+	});
+
+	expect(output).toBe('/path/to/something?test=hello&another=world');
+});
+
+test('Keeps existing query parameters intact', () => {
+	const output = addQueryToPath('/path/to/something?existing=param', {
+		test: 'hello',
+		another: 'world',
+	});
+
+	expect(output).toBe('/path/to/something?existing=param&test=hello&another=world');
+});
diff --git a/app/src/utils/add-query-to-path.ts b/app/src/utils/add-query-to-path.ts
index 2f87e01631..ad4f9240b7 100644
--- a/app/src/utils/add-query-to-path.ts
+++ b/app/src/utils/add-query-to-path.ts
@@ -1,3 +1,10 @@
+/**
+ * Add a object of strings to a given path as query parameters. It will keep whatever query
+ * parameters already existed on the path
+ *
+ * @param path - URL path to add query parameters too
+ * @param query - Object style query parameters to add
+ */
 export function addQueryToPath(path: string, query: Record<string, string>): string {
 	const queryParams = new URLSearchParams(path.split('?')[1] || '');
 
diff --git a/app/src/utils/add-related-primary-key-to-fields.test.ts b/app/src/utils/add-related-primary-key-to-fields.test.ts
new file mode 100644
index 0000000000..e12dde218b
--- /dev/null
+++ b/app/src/utils/add-related-primary-key-to-fields.test.ts
@@ -0,0 +1,57 @@
+import { test, expect, vi, beforeEach, afterEach, Mock } from 'vitest';
+import { setActivePinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+
+import { cryptoStub } from '@/__utils__/crypto';
+vi.stubGlobal('crypto', cryptoStub);
+
+import { useFieldsStore } from '@/stores/fields';
+import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
+
+beforeEach(() => {
+	setActivePinia(
+		createTestingPinia({
+			createSpy: vi.fn,
+		})
+	);
+});
+
+test('Returns empty array when empty array is passed', () => {
+	const output = addRelatedPrimaryKeyToFields('articles', []);
+	expect(output).toEqual([]);
+});
+
+test('Returns array as-is if no relational fields are passed', () => {
+	const output = addRelatedPrimaryKeyToFields('articles', ['id', 'title']);
+	expect(output).toEqual(['id', 'title']);
+});
+
+test('Retrieves related primary key from store and adds to array', () => {
+	const store = useFieldsStore();
+	(store.getField as Mock).mockReturnValueOnce({ collection: 'test' });
+	(store.getPrimaryKeyFieldForCollection as Mock).mockReturnValueOnce({ field: 'test_pk' });
+
+	const output = addRelatedPrimaryKeyToFields('articles', ['id', 'title', 'author.name']);
+	expect(output).toEqual(['id', 'title', 'author.name', 'author.test_pk']);
+});
+
+test('Ignores adding primary key related collection cannot be found', () => {
+	const store = useFieldsStore();
+	(store.getField as Mock).mockReturnValueOnce(undefined);
+
+	const output = addRelatedPrimaryKeyToFields('articles', ['id', 'title', 'author.name']);
+	expect(output).toEqual(['id', 'title', 'author.name']);
+});
+
+test('Ignores adding primary key if it already exists', () => {
+	const store = useFieldsStore();
+	(store.getField as Mock).mockReturnValueOnce({ collection: 'test' });
+	(store.getPrimaryKeyFieldForCollection as Mock).mockReturnValueOnce({ field: 'test_pk' });
+
+	const output = addRelatedPrimaryKeyToFields('articles', ['id', 'title', 'author.name', 'author.title']);
+	expect(output).toEqual(['id', 'title', 'author.name', 'author.test_pk', 'author.title']);
+});
+
+afterEach(() => {
+	vi.clearAllMocks();
+});
diff --git a/app/src/utils/add-related-primary-key-to-fields.ts b/app/src/utils/add-related-primary-key-to-fields.ts
index 7129915728..9e055c4c87 100644
--- a/app/src/utils/add-related-primary-key-to-fields.ts
+++ b/app/src/utils/add-related-primary-key-to-fields.ts
@@ -5,6 +5,9 @@ import { useFieldsStore } from '@/stores/fields';
  * Useful for cases where you need to fetch a single piece of nested relational data, but also need
  * access to its primary key.
  *
+ * @param currentCollection - Current root collection
+ * @param fields - Array of (dot-notation) fields you want to augment
+ *
  * @example
  * const collection = 'articles';
  * const fields = ['title', 'user.name'];
@@ -26,12 +29,14 @@ export function addRelatedPrimaryKeyToFields(currentCollection: string, fields:
 		const fieldParts = fieldName.split('.');
 
 		const field = fieldsStore.getField(currentCollection, fieldName);
-		const primaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(field?.collection ?? '');
+		if (!field) continue;
 
-		const includeField = primaryKeyField && fieldParts.slice(0, -1).concat(primaryKeyField.field).join('.');
+		const primaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(field.collection);
 
-		if (includeField && !sanitizedFields.includes(includeField)) {
-			sanitizedFields.push(includeField);
+		const fieldToInclude = primaryKeyField && fieldParts.slice(0, -1).concat(primaryKeyField.field).join('.');
+
+		if (fieldToInclude && !sanitizedFields.includes(fieldToInclude)) {
+			sanitizedFields.push(fieldToInclude);
 		}
 	}
 
diff --git a/app/src/utils/adjust-date.ts b/app/src/utils/adjust-date.ts
deleted file mode 100644
index bcbcf952ad..0000000000
--- a/app/src/utils/adjust-date.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * @TODO this has to go in a shared package. Another one copy pasted from the API
- */
-
-import {
-	addYears,
-	subWeeks,
-	subYears,
-	addWeeks,
-	subMonths,
-	addMonths,
-	subDays,
-	addDays,
-	subHours,
-	addHours,
-	subMinutes,
-	addMinutes,
-	subSeconds,
-	addSeconds,
-	addMilliseconds,
-	subMilliseconds,
-} from 'date-fns';
-import { clone } from 'lodash';
-
-/**
- * Adjust a given date by a given change in duration. The adjustment value uses the exact same syntax
- * and logic as Vercel's `ms`.
- *
- * The conversion is lifted straight from `ms`.
- */
-export function adjustDate(date: Date, adjustment: string): Date | undefined {
-	date = clone(date);
-
-	const subtract = adjustment.startsWith('-');
-
-	if (subtract || adjustment.startsWith('+')) {
-		adjustment = adjustment.substring(1);
-	}
-
-	const match =
-		/^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|months?|mth|mo|years?|yrs?|y)?$/i.exec(
-			adjustment
-		);
-
-	if (!match) {
-		return;
-	}
-
-	const amount = parseFloat(match[1]);
-	const type = (match[2] || 'days').toLowerCase();
-
-	switch (type) {
-		case 'years':
-		case 'year':
-		case 'yrs':
-		case 'yr':
-		case 'y':
-			return subtract ? subYears(date, amount) : addYears(date, amount);
-		case 'months':
-		case 'month':
-		case 'mth':
-		case 'mo':
-			return subtract ? subMonths(date, amount) : addMonths(date, amount);
-		case 'weeks':
-		case 'week':
-		case 'w':
-			return subtract ? subWeeks(date, amount) : addWeeks(date, amount);
-		case 'days':
-		case 'day':
-		case 'd':
-			return subtract ? subDays(date, amount) : addDays(date, amount);
-		case 'hours':
-		case 'hour':
-		case 'hrs':
-		case 'hr':
-		case 'h':
-			return subtract ? subHours(date, amount) : addHours(date, amount);
-		case 'minutes':
-		case 'minute':
-		case 'mins':
-		case 'min':
-		case 'm':
-			return subtract ? subMinutes(date, amount) : addMinutes(date, amount);
-		case 'seconds':
-		case 'second':
-		case 'secs':
-		case 'sec':
-		case 's':
-			return subtract ? subSeconds(date, amount) : addSeconds(date, amount);
-		case 'milliseconds':
-		case 'millisecond':
-		case 'msecs':
-		case 'msec':
-		case 'ms':
-			return subtract ? subMilliseconds(date, amount) : addMilliseconds(date, amount);
-		default:
-			return undefined;
-	}
-}
diff --git a/app/src/utils/arrays-are-equal.ts b/app/src/utils/arrays-are-equal.ts
deleted file mode 100644
index 91da47d61e..0000000000
--- a/app/src/utils/arrays-are-equal.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export function arraysAreEqual(a1: readonly (string | number)[], a2: readonly (string | number)[]): boolean {
-	const superSet: {
-		[key: string]: number;
-	} = {};
-
-	for (let i = 0; i < a1.length; i++) {
-		const e = a1[i] + typeof a1[i];
-		superSet[e] = 1;
-	}
-
-	for (let i = 0; i < a2.length; i++) {
-		const e = a2[i] + typeof a2[i];
-		if (!superSet[e]) {
-			return false;
-		}
-		superSet[e] = 2;
-	}
-
-	for (const e in superSet) {
-		if (superSet[e] === 1) {
-			return false;
-		}
-	}
-
-	return true;
-}
diff --git a/app/src/utils/capitalize-first.test.ts b/app/src/utils/capitalize-first.test.ts
new file mode 100644
index 0000000000..ee667b07a2
--- /dev/null
+++ b/app/src/utils/capitalize-first.test.ts
@@ -0,0 +1,11 @@
+import { test, expect } from 'vitest';
+
+import { capitalizeFirst } from '@/utils/capitalize-first';
+
+test('Capitalizes first character', () => {
+	expect(capitalizeFirst('test')).toBe('Test');
+});
+
+test('Does not explode on empty strings', () => {
+	expect(capitalizeFirst('')).toBe('');
+});
diff --git a/app/src/utils/capitalize-first.ts b/app/src/utils/capitalize-first.ts
index 37cc324ae0..d513b2d600 100644
--- a/app/src/utils/capitalize-first.ts
+++ b/app/src/utils/capitalize-first.ts
@@ -1,3 +1,15 @@
+/**
+ * Capitalizes the first character in a given string
+ *
+ * @param str - String to capitalize
+ * @returns same string with first character capitalized
+ *
+ * @example
+ * ```js
+ * capitalizeFirst('test');
+ * // => 'Test'
+ * ```
+ */
 export function capitalizeFirst(str: string): string {
 	return str.charAt(0).toUpperCase() + str.slice(1);
 }
diff --git a/app/src/utils/extract-field-from-function.test.ts b/app/src/utils/extract-field-from-function.test.ts
new file mode 100644
index 0000000000..7c75f8e45d
--- /dev/null
+++ b/app/src/utils/extract-field-from-function.test.ts
@@ -0,0 +1,11 @@
+import { test, expect } from 'vitest';
+
+import { extractFieldFromFunction } from '@/utils/extract-field-from-function';
+
+test('Returns original field if no function is given', () => {
+	expect(extractFieldFromFunction('title')).toEqual({ fn: null, field: 'title' });
+});
+
+test('Returns function extracted', () => {
+	expect(extractFieldFromFunction('year(date_created)')).toEqual({ fn: 'year', field: 'date_created' });
+});
diff --git a/app/src/utils/extract-field-from-function.ts b/app/src/utils/extract-field-from-function.ts
index e6b848f41b..913175af21 100644
--- a/app/src/utils/extract-field-from-function.ts
+++ b/app/src/utils/extract-field-from-function.ts
@@ -1,6 +1,18 @@
 import { REGEX_BETWEEN_PARENS } from '@directus/shared/constants';
 import { FieldFunction } from '@directus/shared/types';
 
+/**
+ * Extracts the function and field name of a field wrapped in a function
+ *
+ * @param fieldKey - Field in function, for example `year(date_created)`
+ * @return Object of function name and field key
+ *
+ * @example
+ * ```js
+ * extractFieldFromFunction('year(date_created)');
+ * // => { fn: 'year', field: 'date_created' }
+ * ```
+ */
 export function extractFieldFromFunction(fieldKey: string): { fn: FieldFunction | null; field: string } {
 	let functionName;
 
diff --git a/app/tests/utils/flatten-field-groups.test.ts b/app/src/utils/flatten-field-groups.test.ts
similarity index 96%
rename from app/tests/utils/flatten-field-groups.test.ts
rename to app/src/utils/flatten-field-groups.test.ts
index b053daf3a6..571778ae50 100644
--- a/app/tests/utils/flatten-field-groups.test.ts
+++ b/app/src/utils/flatten-field-groups.test.ts
@@ -1,5 +1,6 @@
+import { describe, it, expect } from 'vitest';
+import { FieldNode } from '../../src/composables/use-field-tree';
 import { flattenFieldGroups } from '../../src/utils/flatten-field-groups';
-import { FieldNode } from '@/composables/use-field-tree';
 
 describe('utils/flatten-field-groups', () => {
 	it('Returns the original tree when no groups are present', () => {
diff --git a/app/src/utils/format-field-function.test.ts b/app/src/utils/format-field-function.test.ts
new file mode 100644
index 0000000000..736caf7cbb
--- /dev/null
+++ b/app/src/utils/format-field-function.test.ts
@@ -0,0 +1,52 @@
+import { test, expect, vi, beforeEach, Mock } from 'vitest';
+import { setActivePinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { createI18n } from 'vue-i18n';
+
+import { cryptoStub } from '@/__utils__/crypto';
+vi.stubGlobal('crypto', cryptoStub);
+
+import { useFieldsStore } from '@/stores/fields';
+import { formatFieldFunction } from '@/utils/format-field-function';
+
+vi.mock('@/lang', () => {
+	return {
+		i18n: createI18n({
+			legacy: false,
+			locale: 'en-US',
+			messages: {
+				'en-US': {
+					functions: {
+						year: 'Year',
+					},
+				},
+			},
+		}),
+	};
+});
+
+beforeEach(() => {
+	setActivePinia(
+		createTestingPinia({
+			createSpy: vi.fn,
+		})
+	);
+});
+
+test('Returns original field key if no function is passed, and field cannot be found', () => {
+	expect(formatFieldFunction('articles', 'date_created')).toBe('date_created');
+});
+
+test('Returns translated field key if no function is passed', () => {
+	(useFieldsStore().getField as Mock).mockReturnValueOnce({ name: 'Date Created' });
+	expect(formatFieldFunction('articles', 'date_created')).toBe('Date Created');
+});
+
+test('Returns translated function with field key if field cannot be found in store', () => {
+	expect(formatFieldFunction('articles', 'year(date_created)')).toBe('Year (date_created)');
+});
+
+test('Returns translated field key and function', () => {
+	(useFieldsStore().getField as Mock).mockReturnValueOnce({ name: 'Date Created' });
+	expect(formatFieldFunction('articles', 'year(date_created)')).toBe('Year (Date Created)');
+});
diff --git a/app/src/utils/format-field-function.ts b/app/src/utils/format-field-function.ts
index 4a4edcc4a8..9a589b6be2 100644
--- a/app/src/utils/format-field-function.ts
+++ b/app/src/utils/format-field-function.ts
@@ -1,16 +1,26 @@
 import { useFieldsStore } from '@/stores/fields';
-import { useI18n } from 'vue-i18n';
+import { i18n } from '@/lang';
 import { extractFieldFromFunction } from '@/utils/extract-field-from-function';
 
+/**
+ * Renders a function-wrapped field as the formatted function name and translated field key
+ *
+ * @param collection - Name of the collection the field lives in
+ * @param fieldKey - Key of the field to format (including function)
+ *
+ * @example
+ * ```js
+ * formatFieldFunction('articles', 'year(date_created)');
+ * // => "Year (Date Created)"
+ * ```
+ */
 export function formatFieldFunction(collection: string, fieldKey: string) {
-	const { t } = useI18n();
-
 	const { field, fn } = extractFieldFromFunction(fieldKey);
 
 	const fieldName = useFieldsStore().getField(collection, field)?.name ?? field;
 
 	if (fn) {
-		return t(`functions.${fn}`) + ` (${fieldName})`;
+		return i18n.global.t(`functions.${fn}`) + ` (${fieldName})`;
 	}
 
 	return fieldName;
diff --git a/app/src/utils/format-filesize.test.ts b/app/src/utils/format-filesize.test.ts
new file mode 100644
index 0000000000..5f56a2c752
--- /dev/null
+++ b/app/src/utils/format-filesize.test.ts
@@ -0,0 +1,55 @@
+import { test, expect } from 'vitest';
+
+import { formatFilesize } from '@/utils/format-filesize';
+
+test('Returns -- for 0 bytes', () => {
+	expect(formatFilesize(0)).toBe('--');
+});
+
+test('Returns n B bytes below threshold', () => {
+	expect(formatFilesize(50)).toBe('50 B');
+	expect(formatFilesize(50, false)).toBe('50 B');
+
+	expect(formatFilesize(1100)).not.toBe('1100 B');
+	expect(formatFilesize(1100, false)).not.toBe('1100 B');
+});
+
+test('Returns the correct unit for given bytes (decimal)', () => {
+	const testCases: [number, string][] = [
+		[50, '50 B'],
+		[500, '500 B'],
+		[1000, '1.0 kB'],
+		[1500, '1.5 kB'],
+		[15e5, '1.5 MB'],
+		[15e8, '1.5 GB'],
+		[15e11, '1.5 TB'],
+		[15e14, '1.5 PB'],
+		[15e17, '1.5 EB'],
+		[15e20, '1.5 ZB'],
+		[15e23, '1.5 YB'],
+	];
+
+	for (const [input, output] of testCases) {
+		expect(formatFilesize(input)).toBe(output);
+	}
+});
+
+test('Returns the correct unit for given bytes (base 2)', () => {
+	const testCases: [number, string][] = [
+		[50, '50 B'],
+		[500, '500 B'],
+		[1000, '1000 B'],
+		[1500, '1.5 KiB'],
+		[15e5, '1.4 MiB'],
+		[15e8, '1.4 GiB'],
+		[15e11, '1.4 TiB'],
+		[15e14, '1.3 PiB'],
+		[15e17, '1.3 EiB'],
+		[15e20, '1.3 ZiB'],
+		[15e23, '1.2 YiB'],
+	];
+
+	for (const [input, output] of testCases) {
+		expect(formatFilesize(input, false)).toBe(output);
+	}
+});
diff --git a/app/src/utils/format-filesize.ts b/app/src/utils/format-filesize.ts
index 22e728a952..1529d1b501 100644
--- a/app/src/utils/format-filesize.ts
+++ b/app/src/utils/format-filesize.ts
@@ -1,3 +1,15 @@
+/**
+ * Turns a bytes number into a human readable filesize
+ *
+ * @param bytes - Number of bytes
+ * @param decimal - Whether you want power of ten (default) or power of two (f.e. MB vs MiB)
+ *
+ * @example
+ * ```js
+ * formatFilesize(12500);
+ * // => "12.5 kB"
+ * ```
+ */
 export function formatFilesize(bytes = 0, decimal = true): string {
 	const threshold = decimal ? 1000 : 1024;
 
diff --git a/app/src/utils/geometry/basemap.ts b/app/src/utils/geometry/basemap.ts
index c19412a503..ef41b2dd00 100644
--- a/app/src/utils/geometry/basemap.ts
+++ b/app/src/utils/geometry/basemap.ts
@@ -1,7 +1,6 @@
 import { Style, RasterSource } from 'maplibre-gl';
-import { getSetting } from '@/utils/get-setting';
-import maplibre from 'maplibre-gl';
 import { getTheme } from '@/utils/get-theme';
+import { useSettingsStore } from '@/stores/settings';
 
 export type BasemapSource = {
 	name: string;
@@ -25,16 +24,16 @@ const baseStyle: Style = {
 };
 
 export function getBasemapSources(): BasemapSource[] {
-	if (getSetting('mapbox_key')) {
-		return [getDefaultMapboxBasemap(), defaultBasemap, ...(getSetting('basemaps') || [])];
+	const settingsStore = useSettingsStore();
+
+	if (settingsStore.settings?.mapbox_key) {
+		return [getDefaultMapboxBasemap(), defaultBasemap, ...(settingsStore.settings?.basemaps || [])];
 	}
 
-	return [defaultBasemap, ...(getSetting('basemaps') || [])];
+	return [defaultBasemap, ...(settingsStore.settings?.basemaps || [])];
 }
 
 export function getStyleFromBasemapSource(basemap: BasemapSource): Style | string {
-	setMapboxAccessToken(basemap.url);
-
 	if (basemap.type == 'style') {
 		return basemap.url;
 	} else {
@@ -89,20 +88,6 @@ function expandUrl(url: string): string[] {
 	return urls;
 }
 
-function setMapboxAccessToken(styleURL: string): void {
-	styleURL = styleURL.replace(/^mapbox:\//, 'https://api.mapbox.com/styles/v1');
-
-	try {
-		const url = new URL(styleURL);
-		if (url.host == 'api.mapbox.com') {
-			const token = url.searchParams.get('access_token');
-			if (token) maplibre.accessToken = token;
-		}
-	} catch {
-		return;
-	}
-}
-
 function getDefaultMapboxBasemap(): BasemapSource {
 	const defaultMapboxBasemap: BasemapSource = {
 		name: 'Mapbox',
diff --git a/app/src/utils/get-groups.test.ts b/app/src/utils/get-groups.test.ts
new file mode 100644
index 0000000000..3adfb82029
--- /dev/null
+++ b/app/src/utils/get-groups.test.ts
@@ -0,0 +1,43 @@
+import { test, expect } from 'vitest';
+
+import { getGroups } from '@/utils/get-groups';
+
+test('Returns correct groupings for given precision', () => {
+	const testCases: ['year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second', string, string[]][] = [
+		['year', 'date_created', ['year(date_created)']],
+		['month', 'date_created', ['year(date_created)', 'month(date_created)']],
+		['week', 'date_created', ['year(date_created)', 'month(date_created)', 'week(date_created)']],
+		['day', 'date_created', ['year(date_created)', 'month(date_created)', 'day(date_created)']],
+		['hour', 'date_created', ['year(date_created)', 'month(date_created)', 'day(date_created)', 'hour(date_created)']],
+		[
+			'minute',
+			'date_created',
+			['year(date_created)', 'month(date_created)', 'day(date_created)', 'hour(date_created)', 'minute(date_created)'],
+		],
+		[
+			'second',
+			'date_created',
+			[
+				'year(date_created)',
+				'month(date_created)',
+				'day(date_created)',
+				'hour(date_created)',
+				'minute(date_created)',
+				'second(date_created)',
+			],
+		],
+	];
+
+	for (const [precision, dateField, output] of testCases) {
+		expect(getGroups(precision, dateField)).toEqual(output);
+	}
+});
+
+test('Defaults to hour if precision is undefined', () => {
+	expect(getGroups(undefined, 'date_created')).toEqual([
+		'year(date_created)',
+		'month(date_created)',
+		'day(date_created)',
+		'hour(date_created)',
+	]);
+});
diff --git a/app/src/utils/get-groups.ts b/app/src/utils/get-groups.ts
index a2beb42de3..f84795c6e1 100644
--- a/app/src/utils/get-groups.ts
+++ b/app/src/utils/get-groups.ts
@@ -1,7 +1,22 @@
-export function getGroups(precision: string, dateField: string) {
+/**
+ * Return array of formatted field groups required to fetch a data set in a given precision
+ *
+ * @param precision - What precision you want to group by
+ * @param dateField - Field you're grouping on
+ *
+ * @example
+ * ```js
+ * getGroups('day', 'date_created');
+ * // => ['year(date_created)', 'month(date_created)', 'day(date_created)']
+ * ```
+ */
+export function getGroups(
+	precision: 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second' | undefined,
+	dateField: string
+) {
 	let groups: string[] = [];
 
-	switch (precision || 'hour') {
+	switch (precision ?? 'hour') {
 		case 'year':
 			groups = ['year'];
 			break;
@@ -23,9 +38,6 @@ export function getGroups(precision: string, dateField: string) {
 		case 'second':
 			groups = ['year', 'month', 'day', 'hour', 'minute', 'second'];
 			break;
-		default:
-			groups = ['year', 'month', 'day', 'hour'];
-			break;
 	}
 
 	return groups.map((datePart) => `${datePart}(${dateField})`);
diff --git a/app/src/modules/settings/routes/data-model/get-local-type.ts b/app/src/utils/get-local-type.ts
similarity index 100%
rename from app/src/modules/settings/routes/data-model/get-local-type.ts
rename to app/src/utils/get-local-type.ts
diff --git a/app/src/utils/get-related-collection.test.ts b/app/src/utils/get-related-collection.test.ts
new file mode 100644
index 0000000000..42fe45dde4
--- /dev/null
+++ b/app/src/utils/get-related-collection.test.ts
@@ -0,0 +1,81 @@
+import { test, expect, vi, beforeEach, Mock } from 'vitest';
+import { setActivePinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+
+import { cryptoStub } from '@/__utils__/crypto';
+vi.stubGlobal('crypto', cryptoStub);
+
+beforeEach(() => {
+	setActivePinia(
+		createTestingPinia({
+			createSpy: vi.fn,
+		})
+	);
+});
+
+vi.mock('@/utils/get-local-type');
+
+import { getRelatedCollection } from '@/utils/get-related-collection';
+import { useRelationsStore } from '@/stores/relations';
+import { getLocalTypeForField } from '@/utils/get-local-type';
+
+test('Returns M2M as related + junction', () => {
+	const relationsStore = useRelationsStore();
+
+	(relationsStore.getRelationsForField as Mock).mockReturnValue([
+		{
+			collection: 'articles_categories',
+			field: 'articles_id',
+			related_collection: 'articles',
+		},
+		{
+			collection: 'articles_categories',
+			field: 'categories_id',
+			related_collection: 'categories',
+		},
+	]);
+
+	(getLocalTypeForField as Mock).mockReturnValue('m2m');
+
+	expect(getRelatedCollection('articles', 'categories')).toEqual({
+		relatedCollection: 'categories',
+		junctionCollection: 'articles_categories',
+		path: ['categories_id'],
+	});
+});
+
+test('Returns other O2M as just related', () => {
+	const relationsStore = useRelationsStore();
+
+	(relationsStore.getRelationsForField as Mock).mockReturnValue([
+		{
+			collection: 'users',
+			field: 'favorite_article',
+			related_collection: 'articles',
+		},
+	]);
+
+	(getLocalTypeForField as Mock).mockReturnValue('o2m');
+
+	expect(getRelatedCollection('articles', 'favorited_by')).toEqual({
+		relatedCollection: 'users',
+	});
+});
+
+test('Returns M2O from related_collection rather than collection', () => {
+	const relationsStore = useRelationsStore();
+
+	(relationsStore.getRelationsForField as Mock).mockReturnValue([
+		{
+			collection: 'users',
+			field: 'favorite_article',
+			related_collection: 'articles',
+		},
+	]);
+
+	(getLocalTypeForField as Mock).mockReturnValue('m2o');
+
+	expect(getRelatedCollection('users', 'favorite_article')).toEqual({
+		relatedCollection: 'articles',
+	});
+});
diff --git a/app/src/utils/get-related-collection.ts b/app/src/utils/get-related-collection.ts
index 11eac5c4b9..9548a41b2c 100644
--- a/app/src/utils/get-related-collection.ts
+++ b/app/src/utils/get-related-collection.ts
@@ -1,6 +1,6 @@
 import { useRelationsStore } from '@/stores/relations';
 import { Relation } from '@directus/shared/types';
-import { getLocalTypeForField } from '../modules/settings/routes/data-model/get-local-type';
+import { getLocalTypeForField } from './get-local-type';
 
 export interface RelatedCollectionData {
 	relatedCollection: string;
@@ -8,6 +8,14 @@ export interface RelatedCollectionData {
 	path?: string[];
 }
 
+/**
+ * Get the related collection for a given relational field
+ * For many-to-many type fields, it will return both the junction as the related collection
+ *
+ * @param collection - Name of the current parent collection
+ * @param field - Name of the relational field in the current collection
+ * @returns Related collection name(s)
+ */
 export function getRelatedCollection(collection: string, field: string): RelatedCollectionData {
 	const relationsStore = useRelationsStore();
 
@@ -15,6 +23,7 @@ export function getRelatedCollection(collection: string, field: string): Related
 	const localType = getLocalTypeForField(collection, field);
 
 	const o2mTypes = ['o2m', 'm2m', 'm2a', 'translations', 'files'];
+
 	if (localType && o2mTypes.includes(localType)) {
 		if (localType == 'm2m' && relations.length > 1) {
 			return {
diff --git a/app/src/utils/get-root-path.test.ts b/app/src/utils/get-root-path.test.ts
new file mode 100644
index 0000000000..eb627f753d
--- /dev/null
+++ b/app/src/utils/get-root-path.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import { extract, getPublicURL, getRootPath } from '@/utils/get-root-path';
+
+describe('extract', () => {
+	it('Returns the part of the string leading up to /admin', () => {
+		expect(extract('/path/to/admin/something')).toBe('/path/to/');
+	});
+});
+
+describe('getRootPath', () => {
+	it('Extracts the root path, using the current window pathname as the input path', () => {
+		window.location.pathname = '/path/to/admin/something';
+		expect(getRootPath()).toBe('/path/to/');
+	});
+});
+
+describe('getPublicURL', () => {
+	it('Extracts the root URL, using the current window href as the input path', () => {
+		window.location.href = 'https://example.com/path/to/admin/something';
+		expect(getPublicURL()).toBe('https://example.com/path/to/');
+	});
+});
diff --git a/app/src/utils/get-root-path.ts b/app/src/utils/get-root-path.ts
index 4f16792083..e20bc14551 100644
--- a/app/src/utils/get-root-path.ts
+++ b/app/src/utils/get-root-path.ts
@@ -1,13 +1,24 @@
+/**
+ * Get the API root location from the current window path
+ */
 export function getRootPath(): string {
-	const path = window.location.pathname;
-	const parts = path.split('/');
-	const adminIndex = parts.indexOf('admin');
-	const rootPath = parts.slice(0, adminIndex).join('/') + '/';
-	return rootPath;
+	return extract(window.location.pathname);
 }
 
+/**
+ * Get the full API root URL from the current page href
+ */
 export function getPublicURL(): string {
-	const path = window.location.href;
+	return extract(window.location.href);
+}
+
+/**
+ * Extract the root path of the admin app from a given input path/url
+ *
+ * @param path - Path or URL string of the current page
+ * @returns - Root URL of the Directus instance
+ */
+export function extract(path: string) {
 	const parts = path.split('/');
 	const adminIndex = parts.indexOf('admin');
 	const rootPath = parts.slice(0, adminIndex).join('/') + '/';
diff --git a/app/src/utils/get-setting.ts b/app/src/utils/get-setting.ts
deleted file mode 100644
index d419a101d6..0000000000
--- a/app/src/utils/get-setting.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { useSettingsStore } from '@/stores/settings';
-import { Settings } from '@directus/shared/types';
-
-export function getSetting(setting: keyof Settings): any {
-	const settingsStore = useSettingsStore();
-	if (settingsStore.settings) return settingsStore.settings[setting];
-	return null;
-}
diff --git a/app/src/utils/get-theme.test.ts b/app/src/utils/get-theme.test.ts
new file mode 100644
index 0000000000..0c9430439c
--- /dev/null
+++ b/app/src/utils/get-theme.test.ts
@@ -0,0 +1,51 @@
+import { test, expect, beforeEach, vi } from 'vitest';
+import { setActivePinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+
+import { cryptoStub } from '@/__utils__/crypto';
+vi.stubGlobal('crypto', cryptoStub);
+
+beforeEach(() => {
+	setActivePinia(
+		createTestingPinia({
+			createSpy: vi.fn,
+		})
+	);
+});
+
+import { getTheme } from '@/utils/get-theme';
+import { useUserStore } from '@/stores/user';
+
+test(`Defaults to light when configured to auto and matchMedia isn't available in the browser`, () => {
+	const userStore = useUserStore();
+
+	userStore.currentUser = undefined as any;
+	window.matchMedia = undefined as any;
+
+	expect(getTheme()).toBe('light');
+
+	userStore.currentUser = {} as any;
+
+	expect(getTheme()).toBe('light');
+});
+
+test(`Uses matchMedia to find browser preference for dark mode`, () => {
+	const userStore = useUserStore();
+
+	userStore.currentUser = undefined as any;
+	window.matchMedia = vi.fn(() => ({ matches: true })) as any;
+
+	expect(getTheme()).toBe('dark');
+});
+
+test(`Returns configured theme if not set to auto in store`, () => {
+	const userStore = useUserStore();
+
+	userStore.currentUser = { theme: 'light' } as any;
+
+	expect(getTheme()).toBe('light');
+
+	userStore.currentUser = { theme: 'dark' } as any;
+
+	expect(getTheme()).toBe('dark');
+});
diff --git a/app/src/utils/get-theme.ts b/app/src/utils/get-theme.ts
index 3e0fdc673d..417671d447 100644
--- a/app/src/utils/get-theme.ts
+++ b/app/src/utils/get-theme.ts
@@ -1,5 +1,9 @@
 import { useUserStore } from '@/stores/user';
 
+/**
+ * Returns the used theme for the current user. Will check prefers-color-scheme dark if theme is
+ * configured to be "auto"
+ */
 export function getTheme(): 'light' | 'dark' {
 	const userStore = useUserStore();
 
diff --git a/app/src/utils/get-with-arrays.test.ts b/app/src/utils/get-with-arrays.test.ts
new file mode 100644
index 0000000000..0eb410fc24
--- /dev/null
+++ b/app/src/utils/get-with-arrays.test.ts
@@ -0,0 +1,18 @@
+import { test, expect } from 'vitest';
+
+import { get } from '@/utils/get-with-arrays';
+
+test('Returns static value from object', () => {
+	const input = { test: { path: 'example' } };
+	expect(get(input, 'test.path')).toBe('example');
+});
+
+test('Returns default value if path does not exist in object', () => {
+	const input = { test: { path: 'example' } };
+	expect(get(input, 'test.wrong', 'default value')).toBe('default value');
+});
+
+test('Returns values in array path as flattened array', () => {
+	const input = { test: [{ path: 'example' }, { path: 'another' }] };
+	expect(get(input, 'test.path')).toEqual(['example', 'another']);
+});
diff --git a/app/src/utils/get-with-arrays.ts b/app/src/utils/get-with-arrays.ts
index 9c57a4ee4b..919dc4ee31 100644
--- a/app/src/utils/get-with-arrays.ts
+++ b/app/src/utils/get-with-arrays.ts
@@ -10,9 +10,12 @@
  */
 export function get(object: Record<string, any> | any[], path: string, defaultValue?: any): any {
 	const [key, ...follow] = path.split('.');
+
 	const result = Array.isArray(object) ? object.map((entry) => entry[key!]) : object?.[key!];
+
 	if (follow.length > 0) {
 		return get(result, follow.join('.'), defaultValue);
 	}
+
 	return result ?? defaultValue;
 }
diff --git a/app/src/utils/hide-drag-image.test.ts b/app/src/utils/hide-drag-image.test.ts
new file mode 100644
index 0000000000..523fdd7714
--- /dev/null
+++ b/app/src/utils/hide-drag-image.test.ts
@@ -0,0 +1,13 @@
+import { test, expect, vi } from 'vitest';
+
+import { hideDragImage } from '@/utils/hide-drag-image';
+
+test('Sets drag image to empty image', () => {
+	const dataTransfer = {
+		setDragImage: vi.fn() as any,
+	} as DataTransfer;
+
+	hideDragImage(dataTransfer);
+
+	expect(dataTransfer.setDragImage).toHaveBeenCalledWith(new Image(), 0, 0);
+});
diff --git a/app/src/utils/hide-drag-image.ts b/app/src/utils/hide-drag-image.ts
index 40269f9028..4e411c36e1 100644
--- a/app/src/utils/hide-drag-image.ts
+++ b/app/src/utils/hide-drag-image.ts
@@ -1,3 +1,6 @@
+/**
+ * Set the passed data transfer's drag image to an empty image object of 0x0 size
+ */
 export function hideDragImage(dataTransfer: DataTransfer): void {
 	const emptyImg = new Image();
 	dataTransfer.setDragImage(emptyImg, 0, 0);
diff --git a/app/src/utils/is-empty.test.ts b/app/src/utils/is-empty.test.ts
new file mode 100644
index 0000000000..f6e7c1f2c5
--- /dev/null
+++ b/app/src/utils/is-empty.test.ts
@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest';
+
+import { isEmpty, notEmpty } from '@/utils/is-empty';
+
+describe('isEmpty', () => {
+	it('Returns true for null', () => {
+		expect(isEmpty(null)).toBe(true);
+	});
+
+	it('Returns true for undefined', () => {
+		expect(isEmpty(undefined)).toBe(true);
+	});
+
+	it('Returns false for strings/numbers/etc', () => {
+		expect(isEmpty('')).toBe(false);
+		expect(isEmpty('hello')).toBe(false);
+		expect(isEmpty(123)).toBe(false);
+		expect(isEmpty(0)).toBe(false);
+		expect(isEmpty([])).toBe(false);
+		expect(isEmpty({})).toBe(false);
+	});
+});
+
+describe('notEmpty', () => {
+	it('Returns false for null', () => {
+		expect(notEmpty(null)).toBe(false);
+	});
+
+	it('Returns false for undefined', () => {
+		expect(notEmpty(undefined)).toBe(false);
+	});
+
+	it('Returns true for strings/numbers/etc', () => {
+		expect(notEmpty('')).toBe(true);
+		expect(notEmpty('hello')).toBe(true);
+		expect(notEmpty(123)).toBe(true);
+		expect(notEmpty(0)).toBe(true);
+		expect(notEmpty([])).toBe(true);
+		expect(notEmpty({})).toBe(true);
+	});
+});
diff --git a/app/src/utils/is-hex.test.ts b/app/src/utils/is-hex.test.ts
new file mode 100644
index 0000000000..21fc889523
--- /dev/null
+++ b/app/src/utils/is-hex.test.ts
@@ -0,0 +1,13 @@
+import { test, expect } from 'vitest';
+
+import { isHex } from '@/utils/is-hex';
+
+test('Returns true for valid hex', () => {
+	const cases = ['#64f', '#64ff', '#6644ff', '#6644ffff'];
+	cases.forEach((testCase) => expect(isHex(testCase)).toBe(true));
+});
+
+test('Returns false for anything non-hash', () => {
+	const cases = ['123', 'hello', 'rgba(255, 255, 255, 0)', 'hsl(123, 123, 123)'];
+	cases.forEach((testCase) => expect(isHex(testCase)).toBe(false));
+});
diff --git a/app/src/utils/is-hex.ts b/app/src/utils/is-hex.ts
index 21888337ab..07ca9f9d90 100644
--- a/app/src/utils/is-hex.ts
+++ b/app/src/utils/is-hex.ts
@@ -1,3 +1,6 @@
+/**
+ * Returns whether or not a given string is a valid hex color
+ */
 export function isHex(hex: string): boolean {
-	return /^#(([a-f\d]{2}){3,4})$/i.test(hex);
+	return /^#(([a-f\d]{3,4}))$/i.test(hex) || /^#(([a-f\d]{2}){3,4})$/i.test(hex);
 }
diff --git a/app/src/utils/is-permission-empty.test.ts b/app/src/utils/is-permission-empty.test.ts
new file mode 100644
index 0000000000..3ac34e48d2
--- /dev/null
+++ b/app/src/utils/is-permission-empty.test.ts
@@ -0,0 +1,47 @@
+import { test, expect } from 'vitest';
+
+import { isPermissionEmpty } from '@/utils/is-permission-empty';
+
+test('Returns true if all fields are missing', () => {
+	const perm: any = {};
+
+	expect(isPermissionEmpty(perm)).toBe(true);
+});
+
+test('Returns true if fields is empty, others are missing', () => {
+	const perm: any = {
+		fields: [],
+	};
+
+	expect(isPermissionEmpty(perm)).toBe(true);
+});
+
+test('Returns true fields, validation are empty, others are missing', () => {
+	const perm: any = {
+		fields: [],
+		validation: {},
+	};
+
+	expect(isPermissionEmpty(perm)).toBe(true);
+});
+
+test('Returns true fields, validation, presets are empty, permissions is missing', () => {
+	const perm: any = {
+		fields: [],
+		validation: {},
+		presets: {},
+	};
+
+	expect(isPermissionEmpty(perm)).toBe(true);
+});
+
+test('Returns true if fields, validation, presets, and permissions is empty', () => {
+	const perm: any = {
+		fields: [],
+		validation: {},
+		presets: {},
+		permissions: {},
+	};
+
+	expect(isPermissionEmpty(perm)).toBe(true);
+});
diff --git a/app/src/utils/jwt-payload.test.ts b/app/src/utils/jwt-payload.test.ts
new file mode 100644
index 0000000000..5ee1363c57
--- /dev/null
+++ b/app/src/utils/jwt-payload.test.ts
@@ -0,0 +1,15 @@
+import { test, expect } from 'vitest';
+
+import { jwtPayload } from '@/utils/jwt-payload';
+
+test('Returns payload as JSON object from JWT', () => {
+	const token =
+		'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
+	const payload = jwtPayload(token);
+
+	expect(payload).toEqual({
+		sub: '1234567890',
+		name: 'John Doe',
+		iat: 1516239022,
+	});
+});
diff --git a/app/tests/utils/percentage.test.ts b/app/src/utils/percentage.test.ts
similarity index 78%
rename from app/tests/utils/percentage.test.ts
rename to app/src/utils/percentage.test.ts
index 122ef0c788..3a62d57854 100644
--- a/app/tests/utils/percentage.test.ts
+++ b/app/src/utils/percentage.test.ts
@@ -1,4 +1,5 @@
-import { percentage } from '../../src/utils/percentage';
+import { describe, it, expect } from 'vitest';
+import { percentage } from '@/utils/percentage';
 
 describe('utils/percentage', () => {
 	it('Returns null for undefined upper limits', () => {
diff --git a/app/src/utils/point-on-line.test.ts b/app/src/utils/point-on-line.test.ts
new file mode 100644
index 0000000000..832c9ef604
--- /dev/null
+++ b/app/src/utils/point-on-line.test.ts
@@ -0,0 +1,19 @@
+import { test, expect } from 'vitest';
+
+import { pointOnLine, Point } from '@/utils/point-on-line';
+
+const cases: [boolean, Point, Point, Point][] = [
+	[false, [0, 0], [1, 10], [10, 1]],
+
+	[true, [0, 0], [0, 10], [0, 0]],
+	[true, [0, 0], [10, 0], [0, 0]],
+
+	[true, [0, 0], [0, 0], [0, 10]],
+	[true, [0, 0], [0, 0], [10, 0]],
+];
+
+for (const [result, current, p1, p2] of cases) {
+	test(`(${current}) on line (${p1})—(${p2})`, () => {
+		expect(pointOnLine(current, p1, p2)).toBe(result);
+	});
+}
diff --git a/app/src/utils/point-on-line.ts b/app/src/utils/point-on-line.ts
index 6d3a6a0314..4c7536213c 100644
--- a/app/src/utils/point-on-line.ts
+++ b/app/src/utils/point-on-line.ts
@@ -1,4 +1,4 @@
-type Point = [number, number];
+export type Point = [number, number];
 
 /**
  * Check if a given X, Y coordinate is on the line between two other points
@@ -18,6 +18,17 @@ export function pointOnLine(current: Point, point1: Point, point2: Point): boole
 
 	if (cross !== 0) return false;
 
-	if (Math.abs(dxl) >= Math.abs(dyl)) return dxl > 0 ? p1X <= curX && curX <= p2X : p2X <= curX && curX <= p1X;
-	else return dyl > 0 ? p1Y <= curY && curY <= p2Y : p2Y <= curY && curY <= p1Y;
+	if (Math.abs(dxl) >= Math.abs(dyl)) {
+		if (dxl > 0) {
+			return p1X <= curX && curX <= p2X;
+		} else {
+			return p2X <= curX && curX <= p1X;
+		}
+	} else {
+		if (dyl > 0) {
+			return p1Y <= curY && curY <= p2Y;
+		} else {
+			return p2Y <= curY && curY <= p1Y;
+		}
+	}
 }
diff --git a/app/src/utils/user-name.test.ts b/app/src/utils/user-name.test.ts
new file mode 100644
index 0000000000..72389d264c
--- /dev/null
+++ b/app/src/utils/user-name.test.ts
@@ -0,0 +1,39 @@
+import { test, expect, vi } from 'vitest';
+import { createI18n } from 'vue-i18n';
+
+import { userName } from '@/utils/user-name';
+
+vi.mock('@/lang', () => {
+	return {
+		i18n: createI18n({
+			legacy: false,
+			locale: 'en-US',
+			messages: {
+				'en-US': {
+					unknown_user: 'TEST_UNKNOWN',
+				},
+			},
+		}),
+	};
+});
+
+test(`Returns unknown when user isn't passed`, () => {
+	expect(userName()).toBe('TEST_UNKNOWN');
+	expect(userName(undefined)).toBe('TEST_UNKNOWN');
+});
+
+test(`Returns first + last name if both exist`, () => {
+	expect(userName({ first_name: 'Test', last_name: 'Last' })).toBe('Test Last');
+});
+
+test(`Returns just first name if last name doesn't exist`, () => {
+	expect(userName({ first_name: 'Test' })).toBe('Test');
+});
+
+test(`Returns email address if first name doesn't exist`, () => {
+	expect(userName({ email: 'test@example.com' })).toBe('test@example.com');
+});
+
+test(`Returns unknown if name and email are missing`, () => {
+	expect(userName({ id: '12345' })).toBe('TEST_UNKNOWN');
+});
diff --git a/app/src/utils/user-name.ts b/app/src/utils/user-name.ts
index 1517caaa85..d2a227de49 100644
--- a/app/src/utils/user-name.ts
+++ b/app/src/utils/user-name.ts
@@ -1,7 +1,7 @@
 import { i18n } from '@/lang';
 import { User } from '@directus/shared/types';
 
-export function userName(user: Partial<User>): string {
+export function userName(user?: Partial<User>): string {
 	if (!user) {
 		return i18n.global.t('unknown_user') as string;
 	}
diff --git a/app/tests/utils/is-allowed.test.ts b/app/tests/utils/is-allowed.test.ts
deleted file mode 100644
index d93e665db3..0000000000
--- a/app/tests/utils/is-allowed.test.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { isAllowed } from '../../src/utils/is-allowed';
-
-jest.mock('../../src/stores/permissions', () => {
-	return {
-		usePermissionsStore: jest
-			.fn()
-			.mockReturnValueOnce({ permissions: [{}] }) // 1
-			.mockReturnValueOnce({ permissions: [{}] }) // 2
-			.mockReturnValueOnce({ permissions: [{ collection: 'test', action: 'update' }] }) //3
-			.mockReturnValueOnce({
-				permissions: [
-					{
-						collection: 'test',
-						action: 'share',
-						permissions: { testField: { _eq: 'field' } },
-						fields: ['testField'],
-					},
-				],
-			}) // 4
-			.mockReturnValueOnce({
-				permissions: [
-					{
-						collection: 'test',
-						action: 'share',
-						permissions: { testField: { _eq: 'field' } },
-						fields: ['field'],
-					},
-				],
-			}) //5
-			.mockReturnValueOnce({
-				permissions: [
-					{
-						collection: 'test',
-						action: 'update',
-						permissions: { testField: { _eq: 'field' } },
-						fields: ['field'],
-					},
-				],
-			}), //6
-	};
-});
-
-jest.mock('../../src/stores/user', () => {
-	return {
-		useUserStore: jest.fn().mockReturnValueOnce({ isAdmin: true }).mockReturnValue({ isAdmin: false }),
-	};
-});
-
-describe('isAllowed', () => {
-	it('returns true if user is admin', () => {
-		expect(isAllowed('test', 'update', {})).toBe(true);
-	}); // 1
-
-	it('returns false if there are no matching permissions', () => {
-		expect(isAllowed('test', 'update', {})).toBe(false);
-	}); // 2
-
-	it('returns false if there is a matching permission but the action is not "share"', () => {
-		expect(isAllowed('test', 'update', { testField: 'field' })).toBe(false);
-	}); // 3
-
-	it('returns true if there is a matching permission and matching fields', () => {
-		expect(isAllowed('test', 'share', { testField: 'field' }, true)).toBe(true);
-	}); // 4
-
-	it('returns false if there is a matching permission and unmatching fields', () => {
-		expect(isAllowed('test', 'share', { testField: 'no-match' }, true)).toBe(false);
-	}); // 5
-
-	it('returns false if action is not share and there is no matching fields', () => {
-		expect(isAllowed('test', 'update', { no: 'no-match' }, true)).toBe(false);
-	}); // 6
-});
diff --git a/app/tsconfig.json b/app/tsconfig.json
index 2b0f4c28b2..f3fdc76990 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -12,7 +12,7 @@
 		"resolveJsonModule": true,
 		"sourceMap": true,
 		"baseUrl": ".",
-		"types": ["vite/client", "jest"],
+		"types": ["vite/client"],
 		"paths": {
 			"@/*": ["src/*"],
 			"preact/*": ["stub/empty.d.ts"],
diff --git a/app/vite.config.js b/app/vite.config.js
index d892eafd02..53c3485f48 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -1,20 +1,21 @@
-import { defineConfig, searchForWorkspaceRoot } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import md from 'vite-plugin-vue-markdown';
-import yaml from '@rollup/plugin-yaml';
-import path from 'path';
-import {
-	ensureExtensionDirs,
-	getPackageExtensions,
-	getLocalExtensions,
-	generateExtensionsEntry,
-} from '@directus/shared/utils/node';
 import {
 	APP_OR_HYBRID_EXTENSION_PACKAGE_TYPES,
 	APP_OR_HYBRID_EXTENSION_TYPES,
 	APP_SHARED_DEPS,
 } from '@directus/shared/constants';
+import {
+	ensureExtensionDirs,
+	generateExtensionsEntry,
+	getLocalExtensions,
+	getPackageExtensions,
+} from '@directus/shared/utils/node';
+import yaml from '@rollup/plugin-yaml';
+import vue from '@vitejs/plugin-vue';
 import hljs from 'highlight.js';
+import path from 'path';
+import { searchForWorkspaceRoot } from 'vite';
+import md from 'vite-plugin-vue-markdown';
+import { defineConfig } from 'vitest/config';
 import hljsGraphQL from './src/utils/hljs-graphql';
 
 hljs.registerLanguage('graphql', hljsGraphQL);
@@ -144,6 +145,9 @@ export default defineConfig({
 			allow: [searchForWorkspaceRoot(process.cwd()), '/admin/'],
 		},
 	},
+	test: {
+		environment: 'happy-dom',
+	},
 });
 
 function directusExtensions() {
diff --git a/packages/shared/src/utils/adjust-date.ts b/packages/shared/src/utils/adjust-date.ts
index ffca13eda9..9c062434c9 100644
--- a/packages/shared/src/utils/adjust-date.ts
+++ b/packages/shared/src/utils/adjust-date.ts
@@ -1,4 +1,21 @@
-import { addYears, addWeeks, addMonths, addDays, addHours, addMinutes, addSeconds, addMilliseconds } from 'date-fns';
+import {
+	addYears,
+	subWeeks,
+	subYears,
+	addWeeks,
+	subMonths,
+	addMonths,
+	subDays,
+	addDays,
+	subHours,
+	addHours,
+	subMinutes,
+	addMinutes,
+	subSeconds,
+	addSeconds,
+	addMilliseconds,
+	subMilliseconds,
+} from 'date-fns';
 import { clone } from 'lodash';
 
 /**
@@ -10,12 +27,20 @@ import { clone } from 'lodash';
 export function adjustDate(date: Date, adjustment: string): Date | undefined {
 	date = clone(date);
 
+	const subtract = adjustment.startsWith('-');
+
+	if (subtract || adjustment.startsWith('+')) {
+		adjustment = adjustment.substring(1);
+	}
+
 	const match =
-		/^((?:-|\+)?\d*?\.?\d+?) *?(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|months?|mth|mo|years?|yrs?|y)?$/i.exec(
-			adjustment.trim()
+		/^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|months?|mth|mo|years?|yrs?|y)?$/i.exec(
+			adjustment
 		);
 
-	if (!match || !match[1]) return;
+	if (!match || !match[1]) {
+		return;
+	}
 
 	const amount = parseFloat(match[1]);
 	const type = (match[2] ?? 'days').toLowerCase();
@@ -26,44 +51,44 @@ export function adjustDate(date: Date, adjustment: string): Date | undefined {
 		case 'yrs':
 		case 'yr':
 		case 'y':
-			return addYears(date, amount);
+			return subtract ? subYears(date, amount) : addYears(date, amount);
 		case 'months':
 		case 'month':
 		case 'mth':
 		case 'mo':
-			return addMonths(date, amount);
+			return subtract ? subMonths(date, amount) : addMonths(date, amount);
 		case 'weeks':
 		case 'week':
 		case 'w':
-			return addWeeks(date, amount);
+			return subtract ? subWeeks(date, amount) : addWeeks(date, amount);
 		case 'days':
 		case 'day':
 		case 'd':
-			return addDays(date, amount);
+			return subtract ? subDays(date, amount) : addDays(date, amount);
 		case 'hours':
 		case 'hour':
 		case 'hrs':
 		case 'hr':
 		case 'h':
-			return addHours(date, amount);
+			return subtract ? subHours(date, amount) : addHours(date, amount);
 		case 'minutes':
 		case 'minute':
 		case 'mins':
 		case 'min':
 		case 'm':
-			return addMinutes(date, amount);
+			return subtract ? subMinutes(date, amount) : addMinutes(date, amount);
 		case 'seconds':
 		case 'second':
 		case 'secs':
 		case 'sec':
 		case 's':
-			return addSeconds(date, amount);
+			return subtract ? subSeconds(date, amount) : addSeconds(date, amount);
 		case 'milliseconds':
 		case 'millisecond':
 		case 'msecs':
 		case 'msec':
 		case 'ms':
-			return addMilliseconds(date, amount);
+			return subtract ? subMilliseconds(date, amount) : addMilliseconds(date, amount);
 		default:
 			return undefined;
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6ff6316dea..83347ff764 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -380,6 +380,7 @@ importers:
       '@mapbox/mapbox-gl-draw': 1.3.0
       '@mapbox/mapbox-gl-draw-static-mode': 1.0.1
       '@mapbox/mapbox-gl-geocoder': 4.7.4
+      '@pinia/testing': ^0.0.12
       '@popperjs/core': 2.10.2
       '@rollup/plugin-yaml': 3.1.0
       '@sindresorhus/slugify': 2.1.0
@@ -394,7 +395,6 @@ importers:
       '@types/dompurify': 2.3.1
       '@types/file-saver': ^2.0.5
       '@types/geojson': 7946.0.8
-      '@types/jest': 28.1.4
       '@types/json2csv': ^5.0.3
       '@types/lodash': 4.14.177
       '@types/mapbox__mapbox-gl-draw': 1.2.3
@@ -407,10 +407,12 @@ importers:
       '@types/wellknown': 0.5.1
       '@vitejs/plugin-vue': 2.3.3
       '@vue/compiler-sfc': 3.2.36
+      '@vue/test-utils': ^2.0.2
       apexcharts: 3.30.0
       axios: 0.24.0
       base-64: 1.0.0
       bytes: ^3.1.2
+      c8: ^7.12.0
       camelcase: ^7.0.0
       caret-pos: 2.0.0
       codemirror: 5.64.0
@@ -426,9 +428,9 @@ importers:
       flatpickr: 4.6.9
       front-matter: 4.0.2
       geojson: ^0.5.0
+      happy-dom: ^6.0.4
       highlight.js: ^11.5.1
       html-entities: 2.3.2
-      jest: 28.1.2
       joi: ^17.6.0
       json-to-graphql-query: ^2.2.4
       json2csv: ^5.0.7
@@ -455,11 +457,11 @@ importers:
       rollup: ^2.75.6
       sass: 1.43.4
       tinymce: 5.10.2
-      ts-jest: 28.0.5
       tslib: ^2.4.0
       typescript: 4.7.3
       vite: 2.9.9
       vite-plugin-vue-markdown: 0.1.1
+      vitest: ^0.18.1
       vue: 3.2.36
       vue-i18n: 9.1.10
       vue-router: 4.0.15
@@ -481,6 +483,7 @@ importers:
       '@mapbox/mapbox-gl-draw': 1.3.0
       '@mapbox/mapbox-gl-draw-static-mode': 1.0.1
       '@mapbox/mapbox-gl-geocoder': 4.7.4_mapbox-gl@2.9.2
+      '@pinia/testing': 0.0.12_pinia@2.0.14+vue@3.2.36
       '@popperjs/core': 2.10.2
       '@rollup/plugin-yaml': 3.1.0_rollup@2.77.0
       '@sindresorhus/slugify': 2.1.0
@@ -495,7 +498,6 @@ importers:
       '@types/dompurify': 2.3.1
       '@types/file-saver': 2.0.5
       '@types/geojson': 7946.0.8
-      '@types/jest': 28.1.4
       '@types/json2csv': 5.0.3
       '@types/lodash': 4.14.177
       '@types/mapbox__mapbox-gl-draw': 1.2.3
@@ -508,10 +510,12 @@ importers:
       '@types/wellknown': 0.5.1
       '@vitejs/plugin-vue': 2.3.3_vite@2.9.9+vue@3.2.36
       '@vue/compiler-sfc': 3.2.36
+      '@vue/test-utils': 2.0.2_vue@3.2.36
       apexcharts: 3.30.0
       axios: 0.24.0
       base-64: 1.0.0
       bytes: 3.1.2
+      c8: 7.12.0
       camelcase: 7.0.0
       caret-pos: 2.0.0
       codemirror: 5.64.0
@@ -527,9 +531,9 @@ importers:
       flatpickr: 4.6.9
       front-matter: 4.0.2
       geojson: 0.5.0
+      happy-dom: 6.0.4
       highlight.js: 11.6.0
       html-entities: 2.3.2
-      jest: 28.1.2
       joi: 17.6.0
       json-to-graphql-query: 2.2.4
       json2csv: 5.0.7
@@ -556,11 +560,11 @@ importers:
       rollup: 2.77.0
       sass: 1.43.4
       tinymce: 5.10.2
-      ts-jest: 28.0.5_burdcpru4gmol7mmtlcoahzthu
       tslib: 2.4.0
       typescript: 4.7.3
       vite: 2.9.9_sass@1.43.4
       vite-plugin-vue-markdown: 0.1.1_vite@2.9.9
+      vitest: 0.18.1_zr7mwyjguy3vali3lbhmwsgtqy
       vue: 3.2.36
       vue-i18n: 9.1.10_vue@3.2.36
       vue-router: 4.0.15_vue@3.2.36
@@ -3308,6 +3312,19 @@ packages:
     engines: { node: '>=10' }
     dev: false
 
+  /@pinia/testing/0.0.12_pinia@2.0.14+vue@3.2.36:
+    resolution:
+      { integrity: sha512-OGJ5kZihiuNua9trREAVLiv8wAlxT2+gZAz3Cen1L4ch51MbSgY5/nbo9htYsP2my9dhbggBhecgYWlhejhRcQ== }
+    peerDependencies:
+      pinia: '>=2.0.14'
+    dependencies:
+      pinia: 2.0.14_hxrfy3rdja4lhsamokddlc63fi
+      vue-demi: 0.13.4_vue@3.2.36
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@popperjs/core/2.10.2:
     resolution:
       { integrity: sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ== }
@@ -3644,6 +3661,18 @@ packages:
       '@types/responselike': 1.0.0
     dev: true
 
+  /@types/chai-subset/1.3.3:
+    resolution:
+      { integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw== }
+    dependencies:
+      '@types/chai': 4.3.1
+    dev: true
+
+  /@types/chai/4.3.1:
+    resolution:
+      { integrity: sha512-/zPMqDkzSZ8t3VtxOa4KPq7uzzW978M9Tvh+j7GHKuo6k6GTLxPJ4J5gE5cjfJ26pnXst0N5Hax8Sr0T2Mi9zQ== }
+    dev: true
+
   /@types/codemirror/5.60.5:
     resolution:
       { integrity: sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg== }
@@ -3675,6 +3704,13 @@ packages:
       { integrity: sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ== }
     dev: true
 
+  /@types/concat-stream/1.6.1:
+    resolution:
+      { integrity: sha512-eHE4cQPoj6ngxBZMvVf6Hw7Mh4jMW4U9lpGmS5GBPB9RYxlFg+CHaVN7ErNY4W9XfLIEn20b4VDYaIrbq0q4uA== }
+    dependencies:
+      '@types/node': 18.0.4
+    dev: true
+
   /@types/connect/3.4.35:
     resolution:
       { integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ== }
@@ -3801,6 +3837,13 @@ packages:
       { integrity: sha512-3zsplnP2djeps5P9OyarTxwRpMLoe5Ash8aL9iprw0JxB+FAHjY+ifn4yZUuW4/9hqtnmor6uvjSRzJhiVbrEQ== }
     dev: true
 
+  /@types/form-data/0.0.33:
+    resolution:
+      { integrity: sha512-8BSvG1kGm83cyJITQMZSulnl6QV8jqAGreJsc5tPu1Jq0vTSOiY/k24Wx82JRpWwZSqrala6sd5rWi6aNXvqcw== }
+    dependencies:
+      '@types/node': 18.0.4
+    dev: true
+
   /@types/fs-extra/9.0.13:
     resolution:
       { integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA== }
@@ -3875,14 +3918,6 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
-  /@types/jest/28.1.4:
-    resolution:
-      { integrity: sha512-telv6G5N7zRJiLcI3Rs3o+ipZ28EnE+7EvF0pSrt2pZOMnAVI/f+6/LucDxOvcBcTeTL3JMF744BbVQAVBUQRA== }
-    dependencies:
-      jest-matcher-utils: 28.1.3
-      pretty-format: 28.1.3
-    dev: true
-
   /@types/jest/28.1.5:
     resolution:
       { integrity: sha512-TLAC2zXxGnohSP3GxgIyJn7yrTeRPDEyVFyCY1NE2wzg392auI+69uk5EPGjUXuhkq/K208J/TWpLG7J8ebIEQ== }
@@ -4041,6 +4076,11 @@ packages:
       '@types/node': 16.11.9
       form-data: 3.0.1
 
+  /@types/node/10.17.60:
+    resolution:
+      { integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw== }
+    dev: true
+
   /@types/node/16.11.9:
     resolution:
       { integrity: sha512-MKmdASMf3LtPzwLyRrFjtFFZ48cMf8jmX5VRYrDQiJa8Ybu5VAmkqBWqKU8fdCwD8ysw4mQ9nrEHvzg6gunR7A== }
@@ -4049,6 +4089,11 @@ packages:
     resolution:
       { integrity: sha512-M0+G6V0Y4YV8cqzHssZpaNCqvYwlCiulmm0PwpNLF55r/+cT8Ol42CHRU1SEaYFH2rTwiiE1aYg/2g2rrtGdPA== }
 
+  /@types/node/8.10.66:
+    resolution:
+      { integrity: sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw== }
+    dev: true
+
   /@types/nodemailer/6.4.4:
     resolution:
       { integrity: sha512-Ksw4t7iliXeYGvIQcSIgWQ5BLuC/mljIEbjf615svhZL10PE9t+ei8O9gDaD3FPCasUJn9KTLwz2JFJyiiyuqw== }
@@ -4587,6 +4632,15 @@ packages:
       { integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw== }
     dev: false
 
+  /@vue/test-utils/2.0.2_vue@3.2.36:
+    resolution:
+      { integrity: sha512-E2P4oXSaWDqTZNbmKZFVLrNN/siVN78YkEqs7pHryWerrlZR9bBFLWdJwRoguX45Ru6HxIflzKl4vQvwRMwm5g== }
+    peerDependencies:
+      vue: ^3.0.1
+    dependencies:
+      vue: 3.2.36
+    dev: true
+
   /@yarn-tool/resolve-package/1.0.47:
     resolution:
       { integrity: sha512-Zaw58gQxjQceJqhqybJi1oUDaORT8i2GTgwICPs8v/X/Pkx35FXQba69ldHVg5pQZ6YLKpROXgyHvBaCJOFXiA== }
@@ -4933,6 +4987,11 @@ packages:
     engines: { node: '>=0.8' }
     dev: false
 
+  /assertion-error/1.1.0:
+    resolution:
+      { integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw== }
+    dev: true
+
   /astral-regex/2.0.0:
     resolution:
       { integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== }
@@ -5356,6 +5415,26 @@ packages:
       { integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg== }
     engines: { node: '>= 0.8' }
 
+  /c8/7.12.0:
+    resolution:
+      { integrity: sha512-CtgQrHOkyxr5koX1wEUmN/5cfDa2ckbHRA4Gy5LAL0zaCFtVWJS5++n+w4/sr2GWGerBxgTjpKeDclk/Qk6W/A== }
+    engines: { node: '>=10.12.0' }
+    hasBin: true
+    dependencies:
+      '@bcoe/v8-coverage': 0.2.3
+      '@istanbuljs/schema': 0.1.3
+      find-up: 5.0.0
+      foreground-child: 2.0.0
+      istanbul-lib-coverage: 3.2.0
+      istanbul-lib-report: 3.0.0
+      istanbul-reports: 3.1.5
+      rimraf: 3.0.2
+      test-exclude: 6.0.0
+      v8-to-istanbul: 9.0.1
+      yargs: 16.2.0
+      yargs-parser: 20.2.9
+    dev: true
+
   /cacache/15.3.0:
     resolution:
       { integrity: sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ== }
@@ -5469,6 +5548,25 @@ packages:
       { integrity: sha512-cOIiBS1SjzXg+LXSiQAzGg89dHDKq/y4c30+tB5hkVN7GbtXh1BNypOmjti4LwAWQrvP4y+bNG7RJFxLGoL3bA== }
     dev: true
 
+  /caseless/0.12.0:
+    resolution:
+      { integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw== }
+    dev: true
+
+  /chai/4.3.6:
+    resolution:
+      { integrity: sha512-bbcp3YfHCUzMOvKqsztczerVgBKSsEijCySNlHHbX3VG1nskvqjz5Rfso1gGwD6w6oOV3eI60pKuMOV5MV7p3Q== }
+    engines: { node: '>=4' }
+    dependencies:
+      assertion-error: 1.1.0
+      check-error: 1.0.2
+      deep-eql: 3.0.1
+      get-func-name: 2.0.0
+      loupe: 2.3.4
+      pathval: 1.1.1
+      type-detect: 4.0.8
+    dev: true
+
   /chalk/1.1.3:
     resolution:
       { integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A== }
@@ -5518,6 +5616,11 @@ packages:
       { integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== }
     dev: false
 
+  /check-error/1.0.2:
+    resolution:
+      { integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA== }
+    dev: true
+
   /chokidar/3.5.3:
     resolution:
       { integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== }
@@ -5824,6 +5927,17 @@ packages:
       readable-stream: 2.0.6
       typedarray: 0.0.6
 
+  /concat-stream/1.6.2:
+    resolution:
+      { integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw== }
+    engines: { '0': node >= 0.8 }
+    dependencies:
+      buffer-from: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 2.3.7
+      typedarray: 0.0.6
+    dev: true
+
   /configstore/5.0.1:
     resolution:
       { integrity: sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA== }
@@ -6196,6 +6310,11 @@ packages:
     engines: { node: '>= 6' }
     dev: false
 
+  /css.escape/1.5.1:
+    resolution:
+      { integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg== }
+    dev: true
+
   /csscolorparser/1.0.3:
     resolution:
       { integrity: sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w== }
@@ -6428,6 +6547,14 @@ packages:
       { integrity: sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg== }
     dev: false
 
+  /deep-eql/3.0.1:
+    resolution:
+      { integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw== }
+    engines: { node: '>=0.12' }
+    dependencies:
+      type-detect: 4.0.8
+    dev: true
+
   /deep-extend/0.6.0:
     resolution:
       { integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA== }
@@ -7668,7 +7795,6 @@ packages:
     dependencies:
       locate-path: 6.0.0
       path-exists: 4.0.0
-    dev: false
 
   /first-chunk-stream/3.0.0:
     resolution:
@@ -7731,6 +7857,25 @@ packages:
       is-callable: 1.2.4
     dev: false
 
+  /foreground-child/2.0.0:
+    resolution:
+      { integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA== }
+    engines: { node: '>=8.0.0' }
+    dependencies:
+      cross-spawn: 7.0.3
+      signal-exit: 3.0.7
+    dev: true
+
+  /form-data/2.5.1:
+    resolution:
+      { integrity: sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA== }
+    engines: { node: '>= 0.12' }
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: true
+
   /form-data/3.0.1:
     resolution:
       { integrity: sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg== }
@@ -7949,6 +8094,11 @@ packages:
     engines: { node: 6.* || 8.* || >= 10.* }
     dev: true
 
+  /get-func-name/2.0.0:
+    resolution:
+      { integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig== }
+    dev: true
+
   /get-intrinsic/1.1.2:
     resolution:
       { integrity: sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA== }
@@ -7962,6 +8112,12 @@ packages:
       { integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q== }
     engines: { node: '>=8.0.0' }
 
+  /get-port/3.2.0:
+    resolution:
+      { integrity: sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg== }
+    engines: { node: '>=4' }
+    dev: true
+
   /get-stdin/7.0.0:
     resolution:
       { integrity: sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ== }
@@ -8171,6 +8327,21 @@ packages:
       - supports-color
     dev: false
 
+  /happy-dom/6.0.4:
+    resolution:
+      { integrity: sha512-b+ID23Ms0BY08UNLymsOMG7EI2jSlwEt4cbJs938GZfeNAg+fqgkSO3TokQMgSOFoHznpjWmpVjBUL5boJ9PWw== }
+    dependencies:
+      css.escape: 1.5.1
+      he: 1.2.0
+      node-fetch: 2.6.7
+      sync-request: 6.1.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /hard-rejection/2.1.0:
     resolution:
       { integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA== }
@@ -8252,6 +8423,12 @@ packages:
       { integrity: sha512-zpImx2GoKXy42fVDSEad2BPKuSQdLcqsCYa48K3zHSzM/ugWuYjLDr8IXxpVuL7uCLHw56eaiLxCRthhOzf5ug== }
     dev: true
 
+  /he/1.2.0:
+    resolution:
+      { integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== }
+    hasBin: true
+    dev: true
+
   /helmet/4.6.0:
     resolution:
       { integrity: sha512-HVqALKZlR95ROkrnesdhbbZJFi/rIVSoNq6f3jA/9u6MIbTsPh3xZwihjeI5+DO/2sOV6HMHooXcEOuwskHpTg== }
@@ -8301,6 +8478,17 @@ packages:
       domutils: 2.8.0
       entities: 2.2.0
 
+  /http-basic/8.1.3:
+    resolution:
+      { integrity: sha512-/EcDMwJZh3mABI2NhGfHOGOeOZITqfkEO4p/xK+l3NpyncIHUQBoMvCSF/b5GqvKtySC2srL/GGG3+EtlqlmCw== }
+    engines: { node: '>=6.0.0' }
+    dependencies:
+      caseless: 0.12.0
+      concat-stream: 1.6.2
+      http-response-object: 3.0.2
+      parse-cache-control: 1.0.1
+    dev: true
+
   /http-cache-semantics/4.1.0:
     resolution:
       { integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ== }
@@ -8339,6 +8527,13 @@ packages:
       - supports-color
     dev: false
 
+  /http-response-object/3.0.2:
+    resolution:
+      { integrity: sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA== }
+    dependencies:
+      '@types/node': 10.17.60
+    dev: true
+
   /https-proxy-agent/5.0.1:
     resolution:
       { integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA== }
@@ -10709,6 +10904,12 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /local-pkg/0.4.2:
+    resolution:
+      { integrity: sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg== }
+    engines: { node: '>=14' }
+    dev: true
+
   /locate-path/3.0.0:
     resolution:
       { integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A== }
@@ -10731,7 +10932,6 @@ packages:
     engines: { node: '>=10' }
     dependencies:
       p-locate: 5.0.0
-    dev: false
 
   /lodash.clonedeep/4.5.0:
     resolution:
@@ -10861,6 +11061,13 @@ packages:
       wrap-ansi: 6.2.0
     dev: true
 
+  /loupe/2.3.4:
+    resolution:
+      { integrity: sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ== }
+    dependencies:
+      get-func-name: 2.0.0
+    dev: true
+
   /lowercase-keys/2.0.0:
     resolution:
       { integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA== }
@@ -11929,7 +12136,6 @@ packages:
     engines: { node: '>=10' }
     dependencies:
       p-limit: 3.1.0
-    dev: false
 
   /p-map/2.1.0:
     resolution:
@@ -11990,6 +12196,11 @@ packages:
     dependencies:
       callsites: 3.1.0
 
+  /parse-cache-control/1.0.1:
+    resolution:
+      { integrity: sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg== }
+    dev: true
+
   /parse-json/4.0.0:
     resolution:
       { integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw== }
@@ -12115,6 +12326,11 @@ packages:
       util: 0.10.4
     dev: true
 
+  /pathval/1.1.1:
+    resolution:
+      { integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ== }
+    dev: true
+
   /pbf/3.2.1:
     resolution:
       { integrity: sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ== }
@@ -12835,6 +13051,13 @@ packages:
       retry: 0.12.0
     optional: true
 
+  /promise/8.1.0:
+    resolution:
+      { integrity: sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q== }
+    dependencies:
+      asap: 2.0.6
+    dev: true
+
   /prompts/2.4.2:
     resolution:
       { integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q== }
@@ -14442,6 +14665,23 @@ packages:
       { integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== }
     dev: true
 
+  /sync-request/6.1.0:
+    resolution:
+      { integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw== }
+    engines: { node: '>=8.0.0' }
+    dependencies:
+      http-response-object: 3.0.2
+      sync-rpc: 1.3.6
+      then-request: 6.0.2
+    dev: true
+
+  /sync-rpc/1.3.6:
+    resolution:
+      { integrity: sha512-J8jTXuZzRlvU7HemDgHi3pGnh/rkoqR/OZSjhTyyZrEkkYQbk7Z33AXp37mkPfPpfdOuj7Ex3H/TJM1z48uPQw== }
+    dependencies:
+      get-port: 3.2.0
+    dev: true
+
   /tabbable/4.0.0:
     resolution:
       { integrity: sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ== }
@@ -14556,6 +14796,24 @@ packages:
       { integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== }
     dev: true
 
+  /then-request/6.0.2:
+    resolution:
+      { integrity: sha512-3ZBiG7JvP3wbDzA9iNY5zJQcHL4jn/0BWtXIkagfz7QgOL/LqjCEOBQuJNZfu0XYnv5JhKh+cDxCPM4ILrqruA== }
+    engines: { node: '>=6.0.0' }
+    dependencies:
+      '@types/concat-stream': 1.6.1
+      '@types/form-data': 0.0.33
+      '@types/node': 8.10.66
+      '@types/qs': 6.9.7
+      caseless: 0.12.0
+      concat-stream: 1.6.2
+      form-data: 2.5.1
+      http-basic: 8.1.3
+      http-response-object: 3.0.2
+      promise: 8.1.0
+      qs: 6.11.0
+    dev: true
+
   /thirty-two/1.0.2:
     resolution:
       { integrity: sha512-OEI0IWCe+Dw46019YLl6V10Us5bi574EvlJEOcAkB29IzQ/mYD1A6RyNHLjZPiHCmuodxvgF6U+vZO1L15lxVA== }
@@ -14600,11 +14858,23 @@ packages:
       { integrity: sha512-5QhnZ6c8F28fYucLLc00MM37fZoAZ4g7QCYzwIl38i5TwJR5xGqzOv6YMideyLM4tytCzLCRwJoQen2LI66p5A== }
     dev: true
 
+  /tinypool/0.2.4:
+    resolution:
+      { integrity: sha512-Vs3rhkUH6Qq1t5bqtb816oT+HeJTXfwt2cbPH17sWHIYKTotQIFPk3tf2fgqRrVyMDVOc1EnPgzIxfIulXVzwQ== }
+    engines: { node: '>=14.0.0' }
+    dev: true
+
   /tinyqueue/2.0.3:
     resolution:
       { integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA== }
     dev: true
 
+  /tinyspy/1.0.0:
+    resolution:
+      { integrity: sha512-FI5B2QdODQYDRjfuLF+OrJ8bjWRMCXokQPcwKm0W3IzcbUmBNv536cQc7eXGoAuXphZwgx1DFbqImwzz08Fnhw== }
+    engines: { node: '>=14.0.0' }
+    dev: true
+
   /tmp-promise/3.0.3:
     resolution:
       { integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ== }
@@ -14760,7 +15030,7 @@ packages:
     dependencies:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
-      jest: 28.1.2_dyhfsldgbafx4up6nvciefunqu
+      jest: 28.1.2
       jest-util: 28.1.3
       json5: 2.2.1
       lodash.memoize: 4.1.2
@@ -15341,6 +15611,77 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vite/3.0.2_sass@1.43.4:
+    resolution:
+      { integrity: sha512-TAqydxW/w0U5AoL5AsD9DApTvGb2iNbGs3sN4u2VdT1GFkQVUfgUldt+t08TZgi23uIauh1TUOQJALduo9GXqw== }
+    engines: { node: ^14.18.0 || >=16.0.0 }
+    hasBin: true
+    peerDependencies:
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.14.49
+      postcss: 8.4.14
+      resolve: 1.22.1
+      rollup: 2.77.0
+      sass: 1.43.4
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /vitest/0.18.1_zr7mwyjguy3vali3lbhmwsgtqy:
+    resolution:
+      { integrity: sha512-4F/1K/Vn4AvJwe7i2YblR02PT5vMKcw9KN4unDq2KD0YcSxX0B/6D6Qu9PJaXwVuxXMFTQ5ovd4+CQaW3bwofA== }
+    engines: { node: '>=v14.16.0' }
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@vitest/ui': '*'
+      c8: '*'
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      c8:
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/chai': 4.3.1
+      '@types/chai-subset': 1.3.3
+      '@types/node': 18.0.4
+      c8: 7.12.0
+      chai: 4.3.6
+      debug: 4.3.4
+      happy-dom: 6.0.4
+      local-pkg: 0.4.2
+      tinypool: 0.2.4
+      tinyspy: 1.0.0
+      vite: 3.0.2_sass@1.43.4
+    transitivePeerDependencies:
+      - less
+      - sass
+      - stylus
+      - supports-color
+      - terser
+    dev: true
+
   /vt-pbf/3.1.3:
     resolution:
       { integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA== }
@@ -15479,6 +15820,12 @@ packages:
     engines: { node: '>=10.4' }
     dev: true
 
+  /webidl-conversions/7.0.0:
+    resolution:
+      { integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g== }
+    engines: { node: '>=12' }
+    dev: true
+
   /webpack-merge/5.8.0:
     resolution:
       { integrity: sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q== }
@@ -15509,11 +15856,25 @@ packages:
       iconv-lite: 0.4.24
     dev: true
 
+  /whatwg-encoding/2.0.0:
+    resolution:
+      { integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg== }
+    engines: { node: '>=12' }
+    dependencies:
+      iconv-lite: 0.6.3
+    dev: true
+
   /whatwg-mimetype/2.3.0:
     resolution:
       { integrity: sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g== }
     dev: true
 
+  /whatwg-mimetype/3.0.0:
+    resolution:
+      { integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q== }
+    engines: { node: '>=12' }
+    dev: true
+
   /whatwg-url/5.0.0:
     resolution:
       { integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw== }