From 1d7a7cdf06b8388ff0bf5e5c2e00a223768a300b Mon Sep 17 00:00:00 2001
From: Pascal Jufer <pascal-jufer@bluewin.ch>
Date: Mon, 29 Apr 2024 18:04:40 +0200
Subject: [PATCH] Inject Content Version in Live Preview popout (#22339)

---
 .changeset/shiny-avocados-eat.md           |  5 ++++
 app/src/modules/content/routes/item.vue    | 16 ++++++-------
 app/src/modules/content/routes/preview.vue | 28 +++++++++++++---------
 3 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/shiny-avocados-eat.md

diff --git a/.changeset/shiny-avocados-eat.md b/.changeset/shiny-avocados-eat.md
new file mode 100644
index 0000000000..e9bd193b75
--- /dev/null
+++ b/.changeset/shiny-avocados-eat.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Ensured the URL in Live Preview popout window receives the current Content Version
diff --git a/app/src/modules/content/routes/item.vue b/app/src/modules/content/routes/item.vue
index 38067cc868..346e63688e 100644
--- a/app/src/modules/content/routes/item.vue
+++ b/app/src/modules/content/routes/item.vue
@@ -222,10 +222,10 @@ const previewTemplate = computed(() => collectionInfo.value?.meta?.preview_url ?
 
 const { templateData: previewData, fetchTemplateValues } = useTemplateData(collectionInfo, primaryKey, previewTemplate);
 
-const previewURL = computed(() => {
+const previewUrl = computed(() => {
 	const enrichedPreviewData = {
-		...unref(previewData),
-		$version: currentVersion.value ? currentVersion.value.key : 'main',
+		...previewData.value,
+		$version: currentVersion.value?.key ?? 'main',
 	};
 
 	const { displayValue } = renderStringTemplate(previewTemplate.value, enrichedPreviewData);
@@ -250,7 +250,7 @@ const splitView = computed({
 let popupWindow: Window | null = null;
 
 watch(
-	[livePreviewMode, previewURL],
+	[livePreviewMode, previewUrl],
 	([mode, url]) => {
 		if (mode !== 'popup' || !url) {
 			if (popupWindow) popupWindow.close();
@@ -291,8 +291,8 @@ function toggleSplitView() {
 async function refreshLivePreview() {
 	try {
 		await fetchTemplateValues();
-		window.refreshLivePreview(previewURL.value);
-		if (popupWindow) popupWindow.refreshLivePreview(previewURL.value);
+		window.refreshLivePreview(previewUrl.value);
+		if (popupWindow) popupWindow.refreshLivePreview(previewUrl.value);
 	} catch (error) {
 		// noop
 	}
@@ -545,7 +545,7 @@ function revert(values: Record<string, any>) {
 
 		<template #actions>
 			<v-button
-				v-if="previewURL"
+				v-if="previewUrl"
 				v-tooltip.bottom="t(livePreviewMode === null ? 'live_preview.enable' : 'live_preview.disable')"
 				rounded
 				icon
@@ -715,7 +715,7 @@ function revert(values: Record<string, any>) {
 		</v-dialog>
 
 		<template #splitView>
-			<LivePreview v-if="previewURL" :url="previewURL" @new-window="livePreviewMode = 'popup'" />
+			<LivePreview v-if="previewUrl" :url="previewUrl" @new-window="livePreviewMode = 'popup'" />
 		</template>
 
 		<template #sidebar>
diff --git a/app/src/modules/content/routes/preview.vue b/app/src/modules/content/routes/preview.vue
index d640b0a5af..4c1dfb651f 100644
--- a/app/src/modules/content/routes/preview.vue
+++ b/app/src/modules/content/routes/preview.vue
@@ -1,27 +1,33 @@
 <script setup lang="ts">
+import { useTemplateData } from '@/composables/use-template-data';
+import { useVersions } from '@/composables/use-versions';
+import { renderStringTemplate } from '@/utils/render-string-template';
+import { useCollection } from '@directus/composables';
 import { computed, toRefs } from 'vue';
 import LivePreview from '../components/live-preview.vue';
-import { useCollection } from '@directus/composables';
-import { renderStringTemplate } from '@/utils/render-string-template';
-import { useTemplateData } from '@/composables/use-template-data';
 
-type Props = {
+const props = defineProps<{
 	collection: string;
 	primaryKey: string;
-};
-
-const props = defineProps<Props>();
+}>();
 
 const { collection, primaryKey } = toRefs(props);
 
-const { info: collectionInfo } = useCollection(collection);
+const { info: collectionInfo, isSingleton } = useCollection(collection);
+
+const { currentVersion } = useVersions(collection, isSingleton, primaryKey);
 
 const previewTemplate = computed(() => collectionInfo.value?.meta?.preview_url ?? '');
 
 const { templateData: previewData } = useTemplateData(collectionInfo, primaryKey, previewTemplate);
 
-const previewURL = computed(() => {
-	const { displayValue } = renderStringTemplate(previewTemplate.value, previewData);
+const previewUrl = computed(() => {
+	const enrichedPreviewData = {
+		...previewData.value,
+		$version: currentVersion.value?.key ?? 'main',
+	};
+
+	const { displayValue } = renderStringTemplate(previewTemplate.value, enrichedPreviewData);
 
 	return displayValue.value || null;
 });
@@ -32,5 +38,5 @@ function closePopup() {
 </script>
 
 <template>
-	<LivePreview v-if="previewURL" :url="previewURL" in-popup @new-window="closePopup" />
+	<LivePreview v-if="previewUrl" :url="previewUrl" in-popup @new-window="closePopup" />
 </template>