[FIX] website: correctly mark translatable attributes

Steps to reproduce:

- Go to a website page > Add a 'Form' block > Set an input "Placeholder"
value.
- Go to the page (in 'edit_translations' mode) > The translation of the
input "Placeholder" attribute doesn't mark the input as translated and
even after saving the translation, the input is still marked as
"to_translate".

The goal of this commit is to fix this issue by extending the same
behaviour on the translated `<select/>` options (using `.oe_translated`
class) and setting the right translation state on the input from the
linked attribute translation `<span/>`.

task-3323245

closes odoo/odoo#122011

X-original-commit: 946de52ea80e0cf5f1284cea2134c22ffda3aa5f
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>

addons/website/static/src/components/translator/translator.js

@@ -36,6 +36,7 @@ export class AttributeTranslateDialog extends Component {
                         $originalNode.val(value).trigger('translate');
                     }
                     $node.trigger('change');
+                    $originalNode[0].classList.add('oe_translated');
                 });
                 $group.append($label).append($input);
             }
@@ -58,7 +59,7 @@ export class SelectTranslateDialog extends Component {
         const value = this.inputEl.el.value;
         this.optionEl.textContent = value;
         this.optionEl.classList.toggle(
-            'o_option_translated',
+            'oe_translated',
             value !== this.optionEl.dataset.initialTranslationValue
         );
     }
@@ -320,6 +321,13 @@ export class WebsiteTranslator extends WebsiteEditorComponent {
             Object.values(translation).forEach((node) => {
                 var trans = self.getTranslationObject(node);
                 trans.value = (trans.value ? trans.value : $node.html()).replace(/[ \t\n\r]+/, ' ');
+                trans.state = node.dataset.oeTranslationState;
+                // If a node has an already translated attribute, we don't
+                // need to update its state, since it can be set again as
+                // "to_translate" by other attributes...
+                if ($node[0].dataset.oeTranslationState === 'translated') {
+                    return;
+                }
                 $node.attr('data-oe-translation-state', (trans.state || 'to_translate'));
             });
         });

addons/website/static/src/scss/website.wysiwyg.scss

@@ -32,7 +32,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         }
     }
 
-    &.o_dirty, .o_option_translated {
+    &.o_dirty, &.oe_translated, .oe_translated {
         background: rgba($o-we-translated-content-color, 0.25) !important;
     }
 }

addons/website/static/tests/tours/rte.js

@@ -84,7 +84,7 @@ wTourUtils.registerWebsitePreviewTour('rte_translator', {
     run: function () {
         $('iframe:not(.o_ignore_in_tour)').contents().find("#wrap p:first").replaceWith('<p>Write one or <font style="background-color: yellow;">two paragraphs <b>describing</b></font> your product or\
                 <font style="color: rgb(255, 0, 0);">services</font>. To be successful your content needs to be\
-                useful to your <a href="/999">readers</a>.</p> <input placeholder="test translate placeholder"/>\
+                useful to your <a href="/999">readers</a>.</p> <input value="test translate default value" placeholder="test translate placeholder"/>\
                 <p>&lt;b&gt;&lt;/b&gt; is an HTML&nbsp;tag &amp; is empty</p>');
         $('iframe:not(.o_ignore_in_tour)').contents().find("#wrap img").attr("title", "test translate image title");
     }
@@ -141,10 +141,18 @@ wTourUtils.registerWebsitePreviewTour('rte_translator', {
     content: "translate placeholder",
     trigger: '.modal-dialog input:first',
     run: 'text test Parseltongue placeholder',
+}, {
+    content: "translate default value",
+    trigger: '.modal-dialog input:last',
+    run: 'text test Parseltongue default value',
 }, {
     content: "close modal",
     trigger: '.modal-footer .btn-primary',
     extra_trigger: '.modal input:propValue(test Parseltongue placeholder)',
+}, {
+    content: "check: input marked as translated",
+    trigger: 'iframe input[placeholder="test Parseltongue placeholder"].oe_translated',
+    run: () => {},
 }, {
     content: "save translation",
     trigger: 'button[data-action=save]',
@@ -162,7 +170,10 @@ wTourUtils.registerWebsitePreviewTour('rte_translator', {
     content: "check: placeholder translation",
     trigger: 'iframe input[placeholder="test Parseltongue placeholder"]',
     run: function () {}, // it's a check
-
+}, {
+    content: "check: default value translation",
+    trigger: 'iframe input[value="test Parseltongue default value"]',
+    run: () => {},
 }, {
     content: "open language selector",
     trigger: 'iframe .js_language_selector button:first',