Allow setting default language for translations interface or choosing user's language (#13576)

* Added the same options as on the translations display.
This now allows us to set the default interface option instead of always defaulting to the user's language or using the first language.

* Refactored i18n to useI18n

app/src/interfaces/translations/index.ts

@@ -38,6 +38,32 @@ export default defineInterface({
 					},
 				},
 			},
+			{
+				field: 'defaultLanguage',
+				name: '$t:interfaces.translations.default_language',
+				meta: {
+					interface: 'input',
+					width: 'half',
+					options: {
+						placeholder: '$t:primary_key',
+					},
+				},
+			},
+			{
+				field: 'userLanguage',
+				name: '$t:interfaces.translations.user_language',
+				type: 'string',
+				schema: {
+					default_value: false,
+				},
+				meta: {
+					interface: 'boolean',
+					options: {
+						label: '$t:interfaces.translations.enable',
+					},
+					width: 'half',
+				},
+			},
 		];
 	},
 	preview: PreviewSVG,

app/src/interfaces/translations/translations.vue

@@ -63,7 +63,7 @@
 import api from '@/api';
 import { DisplayItem, RelationQueryMultiple, useRelationM2M, useRelationMultiple } from '@/composables/use-relation';
 import { useWindowSize } from '@/composables/use-window-size';
-import { useFieldsStore, useUserStore } from '@/stores/';
+import { useFieldsStore } from '@/stores/';
 import { notEmpty } from '@/utils/is-empty';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { toArray } from '@directus/shared/utils';
@@ -77,6 +77,8 @@ const props = withDefaults(
 		field: string;
 		primaryKey: string | number;
 		languageField?: string | null;
+		defaultLanguage?: string | null;
+		userLanguage?: boolean;
 		value: (number | string | Record<string, any>)[] | Record<string, any>;
 		autofocus?: boolean;
 		disabled?: boolean;
@@ -86,6 +88,8 @@ const props = withDefaults(
 		value: () => [],
 		autofocus: false,
 		disabled: false,
+		defaultLanguage: () => null,
+		userLanguage: false,
 	}
 );
 
@@ -98,12 +102,11 @@ const value = computed({
 	},
 });
 
-const { collection, field, primaryKey } = toRefs(props);
+const { collection, field, primaryKey, defaultLanguage, userLanguage } = toRefs(props);
 const { relationInfo } = useRelationM2M(collection, field);
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const fieldsStore = useFieldsStore();
-const userStore = useUserStore();
 
 const { width } = useWindowSize();
 
@@ -250,14 +253,9 @@ function useLanguages() {
 			languages.value = response.data.data ? toArray(response.data.data) : [];
 
 			if (!firstLang.value) {
-				const userLang = languages.value.find(
-					(lang) =>
-						userStore.currentUser &&
-						'language' in userStore.currentUser &&
-						lang[pkField] === userStore.currentUser.language
-				)?.[pkField];
-
-				firstLang.value = userLang || languages.value[0]?.[pkField];
+				const userLocale = userLanguage.value ? locale.value : defaultLanguage.value;
+				const lang = languages.value.find((lang) => lang[pkField] === userLocale) || languages.value[0];
+				firstLang.value = lang?.[pkField];
 			}
 
 			if (!secondLang.value) {