[FIX] web_editor, test_website: will fix the deletion of custom snippets

Before this commit the deletion of custom snippets failed because the
button click event got intercepted by the drag'n'drop mechanism.
The currentTarget of the event was used in an asynchronous call where it
had already been replaced by the jQuery's event bubbling mechanism when
invoking the other handler.

After this commit the deletion of custom snippets works again and a test
tour is introduced to make sure it does not get broken again

task-2405854

closes odoo/odoo#62555

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

5 files changed, 114 insertions, 1 deletions

diff --git a/addons/test_website/static/tests/tours/custom_snippets.js b/addons/test_website/static/tests/tours/custom_snippets.js
new file mode 100644
index 00000000000..22f15c9a887
--- /dev/null
+++ b/addons/test_website/static/tests/tours/custom_snippets.js
@@ -0,0 +1,96 @@
+odoo.define('test_website.custom_snippets', function (require) {
+'use strict';
+
+var tour = require('web_tour.tour');
+
+/**
+ * The purpose of this tour is to check the custom snippets flow:
+ *
+ * -> go to edit mode
+ * -> drag a banner into page content
+ * -> customize banner (set text)
+ * -> save banner as custom snippet
+ * -> confirm name (remove in master when implicit default name feature is implemented)
+ * -> confirm save & reload (remove in master because reload is not needed anymore)
+ * -> ensure custom snippet is available
+ * -> drag custom snippet
+ * -> ensure block appears as banner
+ * -> ensure block appears as custom banner
+ * -> delete custom snippet
+ * -> confirm delete
+ * -> ensure it was deleted
+ */
+
+tour.register('test_custom_snippet', {
+    url: '/',
+    test: true
+}, [
+    {
+        content: "enter edit mode",
+        trigger: "a[data-action=edit]"
+    },
+    {
+        content: "drop a snippet",
+        trigger: "#oe_snippets .oe_snippet[name='Banner'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
+        extra_trigger: "body.editor_enable.editor_has_snippets",
+        moveTrigger: ".oe_drop_zone",
+        run: "drag_and_drop #wrap",
+    },
+    {
+        content: "customize snippet",
+        trigger: "#wrapwrap .s_banner h1",
+        run: "text",
+        consumeEvent: "input",
+    },
+    {
+        content: "save custom snippet",
+        trigger: ".snippet-option-SnippetSave we-button",
+    },
+    {
+        content: "confirm save name",
+        trigger: ".modal-dialog button span:contains('Save')",
+    },
+    {
+        content: "confirm save and reload",
+        trigger: ".modal-dialog button span:contains('Save and Reload')",
+    },
+    {
+        content: "ensure custom snippet appeared",
+        trigger: "#oe_snippets .oe_snippet[name='Custom Banner']",
+        run: function() {}, // check
+    },
+    {
+        content: "drop custom snippet",
+        trigger: ".oe_snippet[name='Custom Banner'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
+        extra_trigger: "body.editor_enable.editor_has_snippets",
+        moveTrigger: ".oe_drop_zone",
+        run: "drag_and_drop #wrap",
+    },
+    {
+        content: "ensure banner section exists",
+        trigger: "#wrap section[data-name='Banner']",
+        run: function() {}, // check
+    },
+    {
+        content: "ensure custom banner section exists",
+        trigger: "#wrap section[data-name='Custom Banner']",
+        run: function() {}, // check
+    },
+    {
+        content: "delete custom snippet",
+        trigger: ".oe_snippet[name='Custom Banner'] we-button.o_delete_btn",
+        extra_trigger: ".oe_snippet[name='Custom Banner'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
+    },
+    {
+        content: "confirm delete",
+        trigger: ".modal-dialog button:has(span:contains('Yes'))",
+    },
+    {
+        content: "ensure custom snippet disappeared",
+        trigger: "#oe_snippets",
+        extra_trigger: "#oe_snippets:not(:has(.oe_snippet[name='Custom Banner']))",
+        run: function() {}, // check
+    },
+]);
+
+});
diff --git a/addons/test_website/tests/__init__.py b/addons/test_website/tests/__init__.py
index 08a794bfaab..c5469f4cd31 100644
--- a/addons/test_website/tests/__init__.py
+++ b/addons/test_website/tests/__init__.py
@@ -2,6 +2,7 @@
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
 from . import test_controller_args
+from . import test_custom_snippet
 from . import test_error
 from . import test_is_multilang
 from . import test_multi_company
diff --git a/addons/test_website/tests/test_custom_snippet.py b/addons/test_website/tests/test_custom_snippet.py
new file mode 100644
index 00000000000..c79ed227dc0
--- /dev/null
+++ b/addons/test_website/tests/test_custom_snippet.py
@@ -0,0 +1,13 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+import odoo.tests
+from odoo.tools import mute_logger
+
+
+@odoo.tests.common.tagged('post_install', '-at_install')
+class TestCustomSnippet(odoo.tests.HttpCase):
+
+    @mute_logger('odoo.addons.http_routing.models.ir_http', 'odoo.http')
+    def test_01_run_tour(self):
+        self.start_tour("/", 'test_custom_snippet', login="admin")
diff --git a/addons/test_website/views/templates.xml b/addons/test_website/views/templates.xml
index 9d12bd612a6..2bbee7e9714 100644
--- a/addons/test_website/views/templates.xml
+++ b/addons/test_website/views/templates.xml
@@ -11,6 +11,7 @@
             <script type="text/javascript" src="/test_website/static/tests/tours/reset_views.js"></script>
             <script type="text/javascript" src="/test_website/static/tests/tours/error_views.js"></script>
             <script type="text/javascript" src="/test_website/static/tests/tours/json_auth.js"></script>
+            <script type="text/javascript" src="/test_website/static/tests/tours/custom_snippets.js"></script>
         </xpath>
     </template>
 
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 5e25ecd32a7..391310b57b1 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -2369,6 +2369,8 @@ var SnippetsMenu = Widget.extend({
      */
     _onDeleteBtnClick: function (ev) {
         const $snippet = $(ev.target).closest('.oe_snippet');
+        const snippetId = parseInt(ev.currentTarget.dataset.snippetId);
+        ev.stopPropagation();
         new Dialog(this, {
             size: 'medium',
             title: _t('Confirmation'),
@@ -2382,7 +2384,7 @@ var SnippetsMenu = Widget.extend({
                         model: 'ir.ui.view',
                         method: 'delete_snippet',
                         kwargs: {
-                            'view_id': parseInt(ev.currentTarget.dataset.snippetId),
+                            'view_id': snippetId,
                             'template_key': this.options.snippets,
                         },
                     });