Fix empty form info on translations (#15757)

* fix empty form info

* hide circle

* Allow setting prop icon to false in v-info

* Add inline prop to v-form to disable info icon

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

app/src/components/__snapshots__/v-info.test.ts.snap

@@ -2,9 +2,7 @@
 
 exports[`Mount component 1`] = `
 "<div class=\\"v-info info\\" data-v-30215bfa=\\"\\">
-  <div class=\\"icon\\" data-v-30215bfa=\\"\\">
-    <v-icon-stub large=\\"\\" name=\\"box\\" outline=\\"\\" data-v-30215bfa=\\"\\"></v-icon-stub>
-  </div>
+  <!--v-if-->
   <h2 class=\\"title type-title\\" data-v-30215bfa=\\"\\">This is an info</h2>
   <p class=\\"content\\" data-v-30215bfa=\\"\\">content</p>
 </div>"

app/src/components/v-form/v-form.vue

@@ -6,7 +6,12 @@
 			:fields="fields ? fields : []"
 			@scroll-to-field="scrollToField"
 		/>
-		<v-info v-if="noVisibleFields && !nested && !loading" :title="t('no_visible_fields')" icon="search" center>
+		<v-info
+			v-if="noVisibleFields && !nested && !loading"
+			:title="t('no_visible_fields')"
+			:icon="inline ? false : 'search'"
+			center
+		>
 			{{ t('no_visible_fields_copy') }}
 		</v-info>
 		<template v-for="(fieldName, index) in fieldNames" :key="fieldName">
@@ -80,18 +85,18 @@
 </template>
 
 <script setup lang="ts">
-import { useElementSize } from '@directus/shared/composables';
 import { useFormFields } from '@/composables/use-form-fields';
 import { useFieldsStore } from '@/stores/fields';
 import { applyConditions } from '@/utils/apply-conditions';
 import { extractFieldFromFunction } from '@/utils/extract-field-from-function';
 import { getDefaultValuesFromFields } from '@/utils/get-default-values-from-fields';
+import { useElementSize } from '@directus/shared/composables';
 import { Field, ValidationError } from '@directus/shared/types';
 import { assign, cloneDeep, isEqual, isNil, omit, pick } from 'lodash';
 import { computed, ComputedRef, onBeforeUpdate, provide, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import FormField from './form-field.vue';
 import ValidationErrors from './validation-errors.vue';
-import { useI18n } from 'vue-i18n';
 
 type FieldValues = {
 	[field: string]: any;
@@ -114,6 +119,7 @@ interface Props {
 	rawEditorEnabled?: boolean;
 	direction?: string;
 	showDivider?: boolean;
+	inline?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -133,6 +139,7 @@ const props = withDefaults(defineProps<Props>(), {
 	rawEditorEnabled: false,
 	direction: undefined,
 	showDivider: false,
+	inline: false,
 });
 
 const { t } = useI18n();

app/src/components/v-info.test.ts

@@ -2,11 +2,7 @@ import { test, expect } from 'vitest';
 import { mount } from '@vue/test-utils';
 
 import VInfo from './v-info.vue';
-import { GlobalMountOptions } from '@vue/test-utils/dist/types';
-
-const global: GlobalMountOptions = {
-	stubs: ['v-icon'],
-};
+import VIcon from './v-icon/v-icon.vue';
 
 test('Mount component', () => {
 	expect(VInfo).toBeTruthy();
@@ -18,13 +14,12 @@ test('Mount component', () => {
 		slots: {
 			default: 'content',
 		},
-		global,
 	});
 
 	expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('stlye props', async () => {
+test('style props', async () => {
 	const types = ['info', 'success', 'warning', 'danger', 'center'];
 
 	for (const type of types) {
@@ -33,21 +28,34 @@ test('stlye props', async () => {
 				title: 'This is an info',
 				type,
 			},
-			global,
 		});
 
 		expect(wrapper.classes()).toContain(type);
 	}
 });
 
-test('icon prop', async () => {
+test('Renders an icon div with the passed icon when icon prop is set', () => {
 	const wrapper = mount(VInfo, {
 		props: {
-			title: 'This is an info',
-			icon: 'close',
+			title: 'This is a test',
+			icon: 'box',
 		},
-		global,
 	});
 
-	expect(wrapper.getComponent({ name: 'v-icon' }).attributes().name).toBe('close');
+	const iconDiv = wrapper.get('div.icon');
+
+	expect(iconDiv.isVisible()).toBe(true);
+	expect(iconDiv.getComponent(VIcon).props().name).toBe('box');
+	expect(iconDiv.getComponent(VIcon).props().large).toBe(true);
+});
+
+test('Does not render icon when icon prop is set to false', () => {
+	const wrapper = mount(VInfo, {
+		props: {
+			title: 'This is a test',
+			icon: false,
+		},
+	});
+
+	expect(wrapper.find('div.icon').exists()).toBe(false);
 });

app/src/components/v-info.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="v-info" :class="[type, { center }]">
-		<div class="icon">
-			<v-icon large :name="icon" outline />
+		<div v-if="icon !== false" class="icon">
+			<v-icon large :name="icon" />
 		</div>
 		<h2 class="title type-title">{{ title }}</h2>
 		<p class="content"><slot /></p>
@@ -10,11 +10,13 @@
 </template>
 
 <script setup lang="ts">
+import VIcon from './v-icon/v-icon.vue';
+
 interface Props {
 	/** The title to display in the info */
 	title: string;
 	/** What icon to render above the title */
-	icon?: string;
+	icon?: string | false;
 	/** Styling of the info */
 	type?: 'info' | 'success' | 'warning' | 'danger';
 	/** Displays the info centered */
@@ -22,7 +24,7 @@ interface Props {
 }
 
 withDefaults(defineProps<Props>(), {
-	icon: 'box',
+	icon: false,
 	type: 'info',
 	center: false,
 });

app/src/interfaces/translations/translations.vue

@@ -27,6 +27,7 @@
 				:badge="languageOptions.find((lang) => lang.value === firstLang)?.text"
 				:direction="languageOptions.find((lang) => lang.value === firstLang)?.direction"
 				:autofocus="autofocus"
+				inline
 				@update:model-value="updateValue($event, firstLang)"
 			/>
 			<v-divider />
@@ -56,6 +57,7 @@
 				:badge="languageOptions.find((lang) => lang.value === secondLang)?.text"
 				:direction="languageOptions.find((lang) => lang.value === secondLang)?.direction"
 				:model-value="secondItem"
+				inline
 				@update:model-value="updateValue($event, secondLang)"
 			/>
 			<v-divider />
@@ -65,16 +67,20 @@
 
 <script setup lang="ts">
 import api from '@/api';
-import { DisplayItem, RelationQueryMultiple, useRelationMultiple } from '@/composables/use-relation-multiple';
+import VDivider from '@/components/v-divider.vue';
+import VForm from '@/components/v-form/v-form.vue';
+import VIcon from '@/components/v-icon/v-icon.vue';
 import { useRelationM2M } from '@/composables/use-relation-m2m';
+import { DisplayItem, RelationQueryMultiple, useRelationMultiple } from '@/composables/use-relation-multiple';
 import { useWindowSize } from '@/composables/use-window-size';
+import vTooltip from '@/directives/tooltip';
 import { useFieldsStore } from '@/stores/fields';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { toArray } from '@directus/shared/utils';
+import { isNil } from 'lodash';
 import { computed, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import LanguageSelect from './language-select.vue';
-import { isNil } from 'lodash';
 
 const props = withDefaults(
 	defineProps<{