From 32a6729dd094d53eb4a653ebb9d69d2b8cbe2390 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 9 Jan 2024 19:07:54 +0100
Subject: [PATCH] [FIX] website, *: do not observe changes of drag and drop
 initialization

*: web_editor

Commit [1] made the multiple drag and drop feature of the editor stop
using jQuery and used our own implementation. Unfortunately, the
initialization of that implementation in the case of the "drag column
on image move" feature marked the page as dirty by mistake.

Steps to reproduce:
- Enter edit mode
- Add a "Text - Image" snippet
- Save
- Enter edit mode again
- Click on the image of the snippet (and do not do anything else)
- Click on discard
=> A popup appears to say you will lose your changes... while you did
   not make any.

[1]: https://github.com/odoo/odoo/commit/7594d71ca8610d5947e80f325ccb57abc23c2c76

Related to runbot-18747

Part-of: odoo/odoo#148728
---
 .../static/src/js/editor/drag_and_drop.js     |  4 +++
 .../static/src/js/editor/snippets.editor.js   |  6 ++++
 .../tests/tours/website_no_dirty_page.js      | 31 ++++++++++++++-----
 addons/website/tests/test_ui.py               |  2 +-
 4 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/drag_and_drop.js b/addons/web_editor/static/src/js/editor/drag_and_drop.js
index ad29dfb2b3b..b6eeaa6376b 100644
--- a/addons/web_editor/static/src/js/editor/drag_and_drop.js
+++ b/addons/web_editor/static/src/js/editor/drag_and_drop.js
@@ -69,6 +69,10 @@ export function useNativeDraggable(hookParams, initialParams) {
     };
     // Compatibility for tests
     const el = initialParams.ref.el;
+    // TODO this is probably to be removed in master: the received params
+    // contain the selector that should be checked and it will be transferred
+    // to the makeDraggableHook function. There should not be any need to add
+    // the default selector class here.
     el.classList.add("o_draggable");
     cleanupFunctions.push(() => el.classList.remove("o_draggable"));
 
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 1fa3e43947a..b1e3282c0c8 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -116,8 +116,14 @@ var SnippetEditor = Widget.extend({
             this.draggableComponent = this._initDragAndDrop(".o_move_handle", ".oe_overlay", this.el);
             if (!this.$target[0].matches("section")) {
                 // Allow the user to drag the image itself to move the target.
+                // Note that the o_draggable class will be added by the
+                // _initDragAndDrop function. So adding it here is probably
+                // useless. To check. The fact that that class is added in any
+                // case should probably reviewed in master anyway (TODO).
+                this.options.wysiwyg.odooEditor.observerUnactive('image_drag_and_drop');
                 this.$target[0].classList.add("o_draggable");
                 this.draggableComponentImgs = this._initDragAndDrop("img", ".o_draggable", this.$target[0]);
+                this.options.wysiwyg.odooEditor.observerActive('image_drag_and_drop');
             }
         } else {
             this.$('.o_overlay_move_options').addClass('d-none');
diff --git a/addons/website/static/tests/tours/website_no_dirty_page.js b/addons/website/static/tests/tours/website_no_dirty_page.js
index 040b0d7aa8f..4a4e8f0defc 100644
--- a/addons/website/static/tests/tours/website_no_dirty_page.js
+++ b/addons/website/static/tests/tours/website_no_dirty_page.js
@@ -2,11 +2,7 @@
 
 import wTourUtils from '@website/js/tours/tour_utils';
 
-wTourUtils.registerWebsitePreviewTour('website_no_dirty_page', {
-    test: true,
-    url: '/',
-    edition: true,
-}, () => [
+const makeSteps = (steps = []) => [
     wTourUtils.dragNDrop({
         id: "s_text_image",
         name: "Text - Image",
@@ -25,7 +21,9 @@ wTourUtils.registerWebsitePreviewTour('website_no_dirty_page', {
         content: "Confirm we are in edit mode",
         trigger: 'body.editor_has_snippets',
         run: () => null,
-    }, {
+    },
+    ...steps,
+    {
         // Makes sure the dirty flag does not happen after a setTimeout or
         // something like that.
         content: "Click elsewhere and wait for a few ms",
@@ -43,4 +41,23 @@ wTourUtils.registerWebsitePreviewTour('website_no_dirty_page', {
         trigger: 'body:not(.editor_has_snippets)',
         run: () => null,
     },
-]);
+];
+
+wTourUtils.registerWebsitePreviewTour('website_no_action_no_dirty_page', {
+    test: true,
+    url: '/',
+    edition: true,
+}, () => makeSteps());
+
+wTourUtils.registerWebsitePreviewTour('website_no_dirty_page', {
+    test: true,
+    url: '/',
+    edition: true,
+}, () => makeSteps([
+    {
+        // This has been known to mark the page as dirty because of the "drag
+        // the column on image move" feature.
+        content: "Click on default image",
+        trigger: 'iframe .s_text_image img',
+    },
+]));
diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py
index 6164affe2e5..88e5333255d 100644
--- a/addons/website/tests/test_ui.py
+++ b/addons/website/tests/test_ui.py
@@ -493,7 +493,7 @@ class TestUi(odoo.tests.HttpCase):
             'parent_id': website.menu_id.id,
         })
 
-        self.start_tour('/', 'website_no_dirty_page', login='admin')
+        self.start_tour('/', 'website_no_action_no_dirty_page', login='admin')
 
     def test_website_no_dirty_page(self):
         # Previous tests are testing the dirty behavior when the extra items