[IMP] website, *: warn user about outdated blocks

* = mass_mailing, web_editor, website_crm, website_event, website_form,
website_forum, website_hr_recruitment, website_mail_channel,
website_mass_mailing, website_sale, website_slides

When an outdated snippet's option are activated we display a warning
in the left panel that inform the user about the potential
malfunctions.

To do so the snippet's template key is added to the snippet as
data-snippet.
If a snippet is "t-call" inside another snippet, it will need to use
t-snippet-call instead of t-call to have the key on himself.

Those unique keys are used on snippet selection to retrieve the
snippet's version in the left panel and compare it with the currently
selected snippet's version. Versions are describe with data-vcss,
data-vjs and data-vxml. If a snippet's key is not in the left panel we
consider that snippet as outdated.

Added some tests to ensure that t-snippet and t-snippet-call really have
their template key as data-snippet

Adapted the views to the data-snippet changes adding
data-snippet="tmpl_key".

Part of: https://github.com/odoo/odoo/pull/44569
task-2189669

closes odoo/odoo#50254

X-original-commit: 28a6cd49b6e87b75c2e70771e241c41778bf9e87
Related: odoo/enterprise#10236
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

5 files changed, 56 insertions, 0 deletions

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 07b5ab5f4bf..69baddaefe4 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -808,6 +808,7 @@ var SnippetsMenu = Widget.extend({
         'cover_update': '_onOverlaysCoverUpdate',
         'deactivate_snippet': '_onDeactivateSnippet',
         'drag_and_drop_stop': '_onDragAndDropStop',
+        'get_snippet_versions': '_onGetSnippetVersions',
         'go_to_parent': '_onGoToParent',
         'remove_snippet': '_onRemoveSnippet',
         'snippet_edition_request': '_onSnippetEditionRequest',
@@ -2094,6 +2095,18 @@ var SnippetsMenu = Widget.extend({
     },
     /**
      * @private
+     * @param {OdooEvent} ev
+     */
+    _onGetSnippetVersions: function (ev) {
+        const snippet = this.el.querySelector(`.oe_snippet > [data-snippet="${ev.data.snippetName}"]`);
+        ev.data.onSuccess(snippet && {
+            vcss: snippet.dataset.vcss,
+            vjs: snippet.dataset.vjs,
+            vxml: snippet.dataset.vxml,
+        });
+    },
+    /**
+     * @private
      */
     _onReloadSnippetTemplate: async function (ev) {
         await this._activateSnippet(false);
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 2bb4dfc429d..401665b8559 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3098,6 +3098,29 @@ registry.many2one = SnippetOptionWidget.extend({
 });
 
 /**
+ * Allows to display a warning message on outdated snippets.
+ */
+registry.VersionControl = SnippetOptionWidget.extend({
+    xmlDependencies: ['/web_editor/static/src/xml/snippets.xml'],
+
+    /**
+     * @override
+     */
+    start: function () {
+        this.trigger_up('get_snippet_versions', {
+            snippetName: this.$target[0].dataset.snippet,
+            onSuccess: snippetVersions => {
+                const isUpToDate = snippetVersions && ['vjs', 'vcss', 'vxml'].every(key => this.$target[0].dataset[key] === snippetVersions[key]);
+                if (!isUpToDate) {
+                    this.$el.prepend(qweb.render('web_editor.outdated_block_message'));
+                }
+            },
+        });
+        return this._super(...arguments);
+    },
+});
+
+/**
  * Handle the save of a snippet as a template that can be reused later
  */
 registry.SnippetSave = SnippetOptionWidget.extend({
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 7091f7c04cf..cac357a4af3 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -15,6 +15,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     --o-we-dropdown-color: #{$o-we-dropdown-color};
 
     --o-we-snippets-bg-color: #{$o-we-bg-color};
+    --o-we-snippets-bg-info: #{$o-we-color-info};
     --o-we-snippets-color: #{$o-we-color};
 }
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 1a3806ed5f6..d0c6026dfa8 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -328,6 +328,19 @@ body.editor_enable.editor_has_snippets {
                 // FIXME temporary fix for m2o option for example
                 position: static !important;
             }
+
+            > we-alert {
+                background-color: var(--o-we-snippets-bg-info);
+                display: block;
+                margin: -.5em;
+                padding: .5em;
+
+                we-title {
+                    margin-bottom: 0.5em;
+                    text-transform: uppercase;
+                    font-weight: bold;
+                }
+            }
         }
 
         //----------------------------------------------------------------------
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 1e962589c4e..a240431b6e8 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -34,6 +34,12 @@
             </we-title>
         </we-customizeblock-options>
     </t>
+    <t t-name="web_editor.outdated_block_message">
+        <we-alert>
+            <we-title>This block is outdated</we-title>
+            <span>To make changes, drop this block and use the new options in the last version.</span>
+        </we-alert>
+    </t>
 
     <!-- options -->
     <div t-name="web_editor.snippet.option.colorpicker" class="colorpicker">