Clear existing preview data on initial load of the create/edit view

This prevents stale preview data from being initially shown after reloading the PreviewOnCreate view
- fixes #9058

CHANGELOG.txt

@@ -178,6 +178,7 @@ Changelog
  * Fix: Ensure screen readers are made aware of page level messages added dynamically to the top of the page (Paarth Agarwal)
  * Fix: Fix `updatemodulepaths` command for Python 3.7 (Matt Westcott)
  * Fix: Only show locale filter in choosers when i18n is enabled in settings (Matt Westcott)
+ * Fix: Ensure that the live preview panel correctly clears the cache when a new page is created (Sage Abdullah)
 
 
 3.0.2 (xx.xx.xxxx) - IN DEVELOPMENT

client/src/entrypoints/admin/preview-panel.js

@@ -138,6 +138,17 @@ function initPreview() {
     newIframe.addEventListener('load', handleLoad);
   };
 
+  const clearPreviewData = () => {
+    const csrfToken = document.querySelector(
+      'input[name="csrfmiddlewaretoken"]',
+    ).value;
+
+    return fetch(previewUrl, {
+      headers: { 'X-CSRFToken': csrfToken },
+      method: 'DELETE',
+    });
+  };
+
   const setPreviewData = () => {
     hasPendingUpdate = true;
     spinnerTimeout = setTimeout(
@@ -260,7 +271,9 @@ function initPreview() {
   }
 
   // Make sure current preview data in session exists and is up-to-date.
-  setPreviewData();
+  clearPreviewData()
+    .then(() => setPreviewData())
+    .then(() => reloadIframe());
   setPreviewWidth();
 }
 

docs/releases/4.0.md

@@ -236,6 +236,7 @@ The bulk of these enhancements have been from Paarth Agarwal, who has been doing
  * Ensure screen readers are made aware of page level messages added dynamically to the top of the page (Paarth Agarwal)
  * Fix `updatemodulepaths` command for Python 3.7 (Matt Westcott)
  * Only show locale filter in choosers when i18n is enabled in settings (Matt Westcott)
+ * Ensure that the live preview panel correctly clears the cache when a new page is created (Sage Abdullah)
 
 
 ## Upgrade considerations

wagtail/admin/tests/pages/test_preview.py

@@ -316,6 +316,79 @@ class TestPreview(TestCase, WagtailTestUtils):
             response = self.client.get(preview_url)
             self.assertEqual(response.status_code, 200)
 
+    def test_preview_on_create_clear_preview_data(self):
+        preview_session_key = "wagtail-preview-tests-eventpage-{}".format(
+            self.home_page.id
+        )
+
+        # Set a fake preview session data for the page
+        self.client.session[preview_session_key] = "test data"
+
+        preview_url = reverse(
+            "wagtailadmin_pages:preview_on_add",
+            args=("tests", "eventpage", self.home_page.id),
+        )
+        response = self.client.delete(preview_url)
+        self.assertEqual(response.status_code, 200)
+        self.assertJSONEqual(
+            response.content.decode(),
+            {"success": True},
+        )
+
+        # The data should no longer exist in the session
+        self.assertNotIn(preview_session_key, self.client.session)
+
+        response = self.client.get(preview_url)
+
+        # The preview should be unavailable
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "wagtailadmin/generic/preview_error.html")
+        self.assertContains(
+            response,
+            "<title>Wagtail - Preview not available</title>",
+            html=True,
+        )
+        self.assertContains(
+            response,
+            '<h1 class="preview-error__title">Preview not available</h1>',
+            html=True,
+        )
+
+    def test_preview_on_edit_clear_preview_data(self):
+        preview_session_key = "wagtail-preview-{}".format(self.event_page.id)
+
+        # Set a fake preview session data for the page
+        self.client.session[preview_session_key] = "test data"
+
+        preview_url = reverse(
+            "wagtailadmin_pages:preview_on_edit", args=(self.event_page.id,)
+        )
+        response = self.client.delete(preview_url)
+        self.assertEqual(response.status_code, 200)
+        self.assertJSONEqual(
+            response.content.decode(),
+            {"success": True},
+        )
+
+        # The data should no longer exist in the session
+        self.assertNotIn(preview_session_key, self.client.session)
+
+        response = self.client.get(preview_url)
+
+        # The preview should be unavailable
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "wagtailadmin/generic/preview_error.html")
+        self.assertContains(
+            response,
+            "<title>Wagtail - Preview not available</title>",
+            html=True,
+        )
+        self.assertContains(
+            response,
+            '<h1 class="preview-error__title">Preview not available</h1>',
+            html=True,
+        )
+
     def test_preview_modes(self):
         preview_url = reverse(
             "wagtailadmin_pages:preview_on_add",

wagtail/admin/views/generic/preview.py

@@ -16,7 +16,7 @@ from wagtail.utils.decorators import xframe_options_sameorigin_override
 
 class PreviewOnEdit(View):
     model = None
-    http_method_names = ("post", "get")
+    http_method_names = ("post", "get", "delete")
     preview_expiration_timeout = 60 * 60 * 24  # seconds
     session_key_prefix = "wagtail-preview-"
 
@@ -111,6 +111,10 @@ class PreviewOnEdit(View):
 
         return self.object.make_preview_request(request, preview_mode, extra_attrs)
 
+    def delete(self, request, *args, **kwargs):
+        request.session.pop(self.session_key, None)
+        return JsonResponse({"success": True})
+
 
 class PreviewOnCreate(PreviewOnEdit):
     @property

wagtail/snippets/tests/test_preview.py

@@ -199,6 +199,66 @@ class TestPreview(TestCase, WagtailTestUtils):
                 self.client.session,
             )
 
+    def test_preview_on_create_clear_preview_data(self):
+        # Set a fake preview session data for the page
+        self.client.session[self.session_key_prefix] = "test data"
+
+        response = self.client.delete(self.preview_on_add_url)
+        self.assertEqual(response.status_code, 200)
+        self.assertJSONEqual(
+            response.content.decode(),
+            {"success": True},
+        )
+
+        # The data should no longer exist in the session
+        self.assertNotIn(self.session_key_prefix, self.client.session)
+
+        response = self.client.get(self.preview_on_add_url)
+
+        # The preview should be unavailable
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "wagtailadmin/generic/preview_error.html")
+        self.assertContains(
+            response,
+            "<title>Wagtail - Preview not available</title>",
+            html=True,
+        )
+        self.assertContains(
+            response,
+            '<h1 class="preview-error__title">Preview not available</h1>',
+            html=True,
+        )
+
+    def test_preview_on_edit_clear_preview_data(self):
+        # Set a fake preview session data for the page
+        self.client.session[self.edit_session_key] = "test data"
+
+        response = self.client.delete(self.preview_on_edit_url)
+        self.assertEqual(response.status_code, 200)
+        self.assertJSONEqual(
+            response.content.decode(),
+            {"success": True},
+        )
+
+        # The data should no longer exist in the session
+        self.assertNotIn(self.edit_session_key, self.client.session)
+
+        response = self.client.get(self.preview_on_edit_url)
+
+        # The preview should be unavailable
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "wagtailadmin/generic/preview_error.html")
+        self.assertContains(
+            response,
+            "<title>Wagtail - Preview not available</title>",
+            html=True,
+        )
+        self.assertContains(
+            response,
+            '<h1 class="preview-error__title">Preview not available</h1>',
+            html=True,
+        )
+
     def test_preview_revision(self):
         snippet = MultiPreviewModesModel.objects.create(text="Multiple modes")
         revision = snippet.save_revision(log_action=True)