Repository: directus/directus
File: app/src/modules/content/components/comparison-modal.vue (Vue)

Code before:
	} finally {
		modalLoading.value = false;
	}
}
</script>

<template>
	<v-dialog
		:model-value="active"
		persistent
		keep-behind
		@update:model-value="$emit('cancel')"
		@esc="$emit('cancel')"
		@apply="onPromoteClick"
	>
		<div class="comparison-modal">
			<div class="scrollable-container">
				<div class="columns">
					<div class="col left">
						<comparison-header
							:loading="modalLoading"
							:title="baseDisplayName"
							:date-updated="t('latest')"
							:user-updated="mainItemUserUpdated"
							:user-loading="mainItemUserLoading"
							:tooltip-message="comparisonData?.outdated ? t('outdated_notice') : undefined"
						/>
						<div class="comparison-content-divider"></div>
						<div class="comparison-content">
							<template v-if="modalLoading">
								<div class="form-skeleton">
									<v-skeleton-loader type="input" />
									<v-skeleton-loader type="input" />
									<v-skeleton-loader type="input" />
									<v-skeleton-loader type="input" />
								</div>
							</template>
							<template v-else>
								<v-form
									disabled
									:collection="collection"
									:primary-key="primaryKey"
									:initial-values="comparisonData?.base || {}"
									:comparison="{
										side: 'base',
										fields: comparisonFields,
										selectedFields: [],
										onToggleField: () => {},
										comparisonType: comparisonData?.comparisonType,
									}"
									class="comparison-form--main"

Review comment (refactor):
Let’s move this to the right side and use the i18n key `main_updated_notice` (see the other comment). By moving it to the right side, we ensure that the planned schema-changed-notice can appear at the same time as the outdated notice. Also, the outdated notice only appears for versions while the `no_relational_data` notice only appears for revisions. Since this will add a lot of inline code, let’s throw that logic into a computed like:

```ts
// not tested
const incomingTooltipMessage = computed(() => {
    if (isRevisionMode) return `${t('changes_made')} ${t('no_relational_data')}`;
    if (comparisonData?.outdated) return t('main_updated_notice');
    return;
});
```

Code after:

		comparisonData.value = { ...comparisonData.value, ...newComparisonData };

		await Promise.allSettled([fetchUserUpdated(), fetchMainItemUserUpdated()]);
	} catch (error) {
		unexpectedError(error);
	} finally {
		modalLoading.value = false;
	}
}
</script>

<template>
	<v-dialog
		:model-value="active"
		persistent
		keep-behind
		@update:model-value="$emit('cancel')"
		@esc="$emit('cancel')"
		@apply="onPromoteClick"
	>
		<div class="comparison-modal">
			<div class="scrollable-container">
				<div class="columns">
					<div class="col left">
						<comparison-header
							:loading="modalLoading"
							:title="baseDisplayName"
							:date-updated="t('latest')"
							:user-updated="mainItemUserUpdated"
							:user-loading="mainItemUserLoading"
						/>
						<div class="comparison-content-divider"></div>
						<div class="comparison-content">
							<template v-if="modalLoading">
								<div class="form-skeleton">
									<v-skeleton-loader type="input" />
									<v-skeleton-loader type="input" />
									<v-skeleton-loader type="input" />
									<v-skeleton-loader type="input" />
								</div>
							</template>
							<template v-else>
								<v-form
									disabled
									:collection="collection"
									:primary-key="primaryKey"
									:initial-values="comparisonData?.base || {}"
									:comparison="{
										side: 'base',
										fields: comparisonFields,