From 4e624d5c7a5e95e718ffd6b8edd75d85f2cbba51 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 15 Sep 2021 16:03:37 -0400
Subject: [PATCH] Move default module listing to app

---
 .../migrations/20210910A-move-module-setup.ts | 36 +------------------
 app/src/constants.ts                          | 34 ++++++++++++++++++
 .../_system/system-modules/system-modules.vue | 19 +++++-----
 .../views/private/components/module-bar.vue   |  3 +-
 4 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/api/src/database/migrations/20210910A-move-module-setup.ts b/api/src/database/migrations/20210910A-move-module-setup.ts
index 774430cbcc..3d8489b882 100644
--- a/api/src/database/migrations/20210910A-move-module-setup.ts
+++ b/api/src/database/migrations/20210910A-move-module-setup.ts
@@ -6,41 +6,7 @@ export async function up(knex: Knex): Promise<void> {
 	});
 
 	await knex.schema.alterTable('directus_settings', (table) => {
-		table.json('module_bar').defaultTo(
-			JSON.stringify([
-				{
-					type: 'module',
-					id: 'collections',
-					enabled: true,
-				},
-				{
-					type: 'module',
-					id: 'users',
-					enabled: true,
-				},
-				{
-					type: 'module',
-					id: 'files',
-					enabled: true,
-				},
-				{
-					type: 'module',
-					id: 'insights',
-					enabled: false,
-				},
-				{
-					type: 'module',
-					id: 'docs',
-					enabled: true,
-				},
-				{
-					type: 'module',
-					id: 'settings',
-					enabled: true,
-					locked: true,
-				},
-			])
-		);
+		table.json('module_bar');
 	});
 }
 
diff --git a/app/src/constants.ts b/app/src/constants.ts
index a436aef802..8dadf3fa18 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -21,3 +21,37 @@ export const DIRECTUS_LOGO = `
 ⠀⠀⠀⠀⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
 
 `;
+
+export const MODULE_BAR_DEFAULT = [
+	{
+		type: 'module',
+		id: 'collections',
+		enabled: true,
+	},
+	{
+		type: 'module',
+		id: 'users',
+		enabled: true,
+	},
+	{
+		type: 'module',
+		id: 'files',
+		enabled: true,
+	},
+	{
+		type: 'module',
+		id: 'insights',
+		enabled: false,
+	},
+	{
+		type: 'module',
+		id: 'docs',
+		enabled: true,
+	},
+	{
+		type: 'module',
+		id: 'settings',
+		enabled: true,
+		locked: true,
+	},
+];
diff --git a/app/src/interfaces/_system/system-modules/system-modules.vue b/app/src/interfaces/_system/system-modules/system-modules.vue
index 04dbb97801..9fea557f17 100644
--- a/app/src/interfaces/_system/system-modules/system-modules.vue
+++ b/app/src/interfaces/_system/system-modules/system-modules.vue
@@ -68,6 +68,7 @@ import { assign } from 'lodash';
 import { useI18n } from 'vue-i18n';
 import { nanoid } from 'nanoid';
 import { Field, DeepPartial } from '@directus/shared/types';
+import { MODULE_BAR_DEFAULT } from '@/constants';
 
 type PreviewExtra = {
 	to: string;
@@ -118,7 +119,7 @@ export default defineComponent({
 	props: {
 		value: {
 			type: Array as PropType<Settings['module_bar']>,
-			default: () => [],
+			default: () => MODULE_BAR_DEFAULT,
 		},
 	},
 	emits: ['input'],
@@ -145,12 +146,12 @@ export default defineComponent({
 
 		const valuesWithData = computed<PreviewValue[]>({
 			get() {
-				const savedModules = (props.value.filter((value) => value.type === 'module') as SettingsModuleBarModule[]).map(
-					(value) => value.id
-				);
+				const savedModules = (
+					(props.value ?? MODULE_BAR_DEFAULT).filter((value) => value.type === 'module') as SettingsModuleBarModule[]
+				).map((value) => value.id);
 
 				return valueToPreview([
-					...props.value,
+					...(props.value ?? MODULE_BAR_DEFAULT),
 					...availableModulesAsBarModule.value.filter(
 						(availableModuleAsBarModule) => savedModules.includes(availableModuleAsBarModule.id) === false
 					),
@@ -230,7 +231,7 @@ export default defineComponent({
 			let value: SettingsModuleBarLink;
 
 			if (id !== '+') {
-				value = props.value.find((val) => val.id === id) as SettingsModuleBarLink;
+				value = (props.value ?? MODULE_BAR_DEFAULT).find((val) => val.id === id) as SettingsModuleBarLink;
 			} else {
 				value = {
 					id: nanoid(),
@@ -248,11 +249,11 @@ export default defineComponent({
 
 		function save() {
 			if (editing.value === '+') {
-				emit('input', [...props.value, values.value]);
+				emit('input', [...(props.value ?? MODULE_BAR_DEFAULT), values.value]);
 			} else {
 				emit(
 					'input',
-					props.value.map((val) => (val.id === editing.value ? values.value : val))
+					(props.value ?? MODULE_BAR_DEFAULT).map((val) => (val.id === editing.value ? values.value : val))
 				);
 			}
 
@@ -263,7 +264,7 @@ export default defineComponent({
 		function remove(id: string) {
 			emit(
 				'input',
-				props.value.filter((val) => val.id !== id)
+				(props.value ?? MODULE_BAR_DEFAULT).filter((val) => val.id !== id)
 			);
 		}
 	},
diff --git a/app/src/views/private/components/module-bar.vue b/app/src/views/private/components/module-bar.vue
index f6401ba9d2..ebaef39533 100644
--- a/app/src/views/private/components/module-bar.vue
+++ b/app/src/views/private/components/module-bar.vue
@@ -34,6 +34,7 @@ import ModuleBarLogo from './module-bar-logo/';
 import ModuleBarAvatar from './module-bar-avatar/';
 import { useSettingsStore } from '@/stores/';
 import { translate } from '@/utils/translate-object-values';
+import { MODULE_BAR_DEFAULT } from '@/constants';
 
 export default defineComponent({
 	components: {
@@ -49,7 +50,7 @@ export default defineComponent({
 		const modules = computed(() => {
 			if (!settingsStore.settings) return [];
 
-			return settingsStore.settings.module_bar
+			return (settingsStore.settings.module_bar ?? MODULE_BAR_DEFAULT)
 				.filter((modulePart) => {
 					if (modulePart.type === 'link') return true;
 					return modulePart.enabled && registeredModuleIDs.value.includes(modulePart.id);