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="isRevisionMode ? `${t('changes_made')} ${t('no_relational_data')}` : 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,
										} as ComparisonContext

Review comment (suggestion):
Let’s move the `tooltip-message` to the right column because it belongs to the item revision. Additionally, we need the `tooltip-message` on the left to indicate schema changes.

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,
										selectedFields: [],