[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>

1 files changed, 49 insertions, 49 deletions

diff --git a/addons/website_hr_recruitment/data/hr_job_demo.xml b/addons/website_hr_recruitment/data/hr_job_demo.xml
index b2fd2575424..88b3d3b06bf 100644
--- a/addons/website_hr_recruitment/data/hr_job_demo.xml
+++ b/addons/website_hr_recruitment/data/hr_job_demo.xml
@@ -20,7 +20,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -34,7 +34,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -48,7 +48,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -62,7 +62,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -76,7 +76,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -95,7 +95,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -169,7 +169,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -253,7 +253,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -267,7 +267,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -281,7 +281,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -295,7 +295,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -309,7 +309,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -328,7 +328,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -402,7 +402,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -486,7 +486,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -500,7 +500,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -514,7 +514,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -528,7 +528,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -542,7 +542,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -561,7 +561,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -635,7 +635,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -718,7 +718,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -732,7 +732,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -746,7 +746,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -760,7 +760,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -774,7 +774,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -793,7 +793,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -867,7 +867,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -950,7 +950,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -964,7 +964,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -978,7 +978,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -992,7 +992,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1006,7 +1006,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1025,7 +1025,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -1099,7 +1099,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -1182,7 +1182,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1196,7 +1196,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1210,7 +1210,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1224,7 +1224,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1238,7 +1238,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1257,7 +1257,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -1331,7 +1331,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -1414,7 +1414,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1428,7 +1428,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1442,7 +1442,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1456,7 +1456,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1470,7 +1470,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1489,7 +1489,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -1563,7 +1563,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>