From df7b8a17cd61220101ee4b17b45ce7653d54b4df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= <sobo@odoo.com>
Date: Fri, 6 Oct 2023 20:09:34 +0200
Subject: [PATCH] [IMP] web_editor: clean the snippet UI before cloning it

When cloning a snippet, if it had some previews displayed, the previews
may be cloned with it. This is not a good behavior because the clone
is a new snippet so it should not have all the preview classes that were
added when editing. Moreover, these previews could also cause bugs.

To solve this, an idea could be to call the `cleanForSave` function of
all its options before cloning the snippet. But the problem is that in
some options, the `cleanForSave` function does more than simply clean
the UI (as it was originally supposed to) and so it cannot be used for
that purpose only.

As a solution, this commit adds a new function called `cleanUI` whose
exclusive purpose will be to clean the snippet UI. In the future, it
will replace the `cleanForSave` function.

task-3369695

Part-of: odoo/odoo#136683
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.editor.js   | 33 +++++++++++++++++++
 .../static/src/js/editor/snippets.options.js  |  9 +++++
 2 files changed, 42 insertions(+)

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 598c4459213..8a1f875d214 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -218,6 +218,17 @@ var SnippetEditor = Widget.extend({
             return option.cleanForSave();
         });
         await Promise.all(proms);
+        await this.cleanUI();
+    },
+    /**
+     * Notifies all the associated snippet options that the snippet UI needs to
+     * be cleaned.
+     */
+    async cleanUI() {
+        const proms = Object.values(this.styles).map((option) => {
+            return option.cleanUI();
+        });
+        await Promise.all(proms);
     },
     /**
      * Closes all widgets of all options.
@@ -631,6 +642,13 @@ var SnippetEditor = Widget.extend({
     clone: async function (recordUndo) {
         this.trigger_up('snippet_will_be_cloned', {$target: this.$target});
 
+        await new Promise(resolve => {
+            this.trigger_up("clean_ui_request", {
+                targetEl: this.$target[0],
+                onSuccess: resolve,
+            });
+        });
+
         var $clone = this.$target.clone(false);
 
         this.$target.after($clone);
@@ -1723,6 +1741,7 @@ var SnippetsMenu = Widget.extend({
         'activate_snippet': '_onActivateSnippet',
         'call_for_each_child_snippet': '_onCallForEachChildSnippet',
         'clone_snippet': '_onCloneSnippet',
+        "clean_ui_request": "_onCleanUIRequest",
         'cover_update': '_onOverlaysCoverUpdate',
         'deactivate_snippet': '_onDeactivateSnippet',
         'drag_and_drop_stop': '_onSnippetDragAndDropStop',
@@ -3724,6 +3743,20 @@ var SnippetsMenu = Widget.extend({
             ev.data.onSuccess();
         }
     },
+    /**
+     * Called when a child editor asks to clean the UI of a snippet.
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onCleanUIRequest(ev) {
+        const targetEditors = this.snippetEditors.filter(editor => {
+            return ev.data.targetEl.contains(editor.$target[0]);
+        });
+        Promise.all(targetEditors.map(editor => editor.cleanUI())).then(() => {
+            ev.data.onSuccess();
+        });
+    },
     /**
      * Called when a child editor asks to deactivate the current snippet
      * overlay.
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 9152de915e8..1759b4fb8a5 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3255,6 +3255,15 @@ const SnippetOptionWidget = Widget.extend({
      * @return {Promise|undefined}
      */
     cleanForSave: async function () {},
+    /**
+     * Called when the associated snippet UI needs to be cleaned (e.g. from
+     * visual effects like previews).
+     * TODO this function will replace `cleanForSave` in the future.
+     *
+     * @abstract
+     * @return {Promise|undefined}
+     */
+    cleanUI: async function () {},
     /**
      * Adds the given widget to the known list of user value widgets
      *