Show warning icon for no-meta collections/fields

api/src/services/collections.ts

@@ -199,12 +199,22 @@ export default class CollectionsService {
 			const payload = data as Partial<Collection>;
 
 			if (!payload.meta) {
-				throw new InvalidPayloadException(`"system" key is required`);
+				throw new InvalidPayloadException(`"meta" key is required`);
 			}
 
-			return (await collectionItemsService.update(payload.meta!, key as any)) as
-				| string
-				| string[];
+			const keys = Array.isArray(key) ? key : [key];
+
+			for (const key of keys) {
+				const exists = await this.knex.select('collection').from('directus_collections').where({ collection: key }).first() !== undefined;
+
+				if (exists) {
+					await collectionItemsService.update(payload.meta, key);
+				} else {
+					await collectionItemsService.create({ ...payload.meta, collection: key });
+				}
+			}
+
+			return key;
 		}
 
 		const payloads = Array.isArray(data) ? data : [data];

app/src/modules/settings/index.ts

@@ -13,6 +13,9 @@ import SettingsPresetsDetail from './routes/presets/detail.vue';
 import SettingsWebhooksBrowse from './routes/webhooks/browse.vue';
 import SettingsWebhooksDetail from './routes/webhooks/detail.vue';
 import SettingsNotFound from './routes/not-found.vue';
+import api from '@/api';
+import { useCollection } from '@/composables/use-collection';
+import { ref } from '@vue/composition-api';
 
 export default defineModule(({ i18n }) => ({
 	id: 'settings',
@@ -47,6 +50,15 @@ export default defineModule(({ i18n }) => ({
 			name: 'settings-fields',
 			path: '/data-model/:collection',
 			component: SettingsFields,
+			async beforeEnter(to, from, next) {
+				const { info } = useCollection(ref(to.params.collection));
+
+				if (!info.value?.meta) {
+					await api.patch(`/collections/${to.params.collection}`, { meta: {} });
+				}
+
+				next();
+			},
 			props: (route) => ({
 				collection: route.params.collection,
 				field: route.params.field,

app/src/modules/settings/routes/data-model/collections/collections.vue

@@ -68,6 +68,13 @@
 				</template>
 
 				<template #item-append="{ item }">
+					<v-icon
+						small
+						class="no-meta"
+						name="report_problem"
+						v-if="!item.meta"
+						v-tooltip="$t('db_only_click_to_configure')"
+					/>
 					<collection-options :collection="item" />
 				</template>
 			</v-table>
@@ -238,4 +245,10 @@ export default defineComponent({
 	--v-button-color-disabled: var(--warning);
 	--v-button-background-color-disabled: var(--warning-25);
 }
+
+.no-meta {
+	--v-icon-color: var(--foreground-subdued);
+
+	margin-right: 4px;
+}
 </style>