From 8ff00133a55e085db96d35617b4b9f349ff17cc3 Mon Sep 17 00:00:00 2001
From: Lucas Perais <lpe@odoo.com>
Date: Fri, 12 Aug 2022 15:07:27 +0000
Subject: [PATCH] [FIX] web: settings: label with string taken into account

Inside a res.config.settings form view have a label with a string on it placed
before the field it is linked to.
i.e.:
```
<label for="myField" string="myString" />
<field name="myField" />
````

Before this commit, the string was not taken into account to build the HTML label.

After this commit, it is.

closes odoo/odoo#98109

Signed-off-by: Mathieu Duckerts-Antoine <dam@odoo.com>
---
 .../settings_form_compiler.js                 | 15 ++++++
 .../settings_form_view_tests.js               | 54 +++++++++++++++++++
 2 files changed, 69 insertions(+)

diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_compiler.js b/addons/web/static/src/webclient/settings_form_view/settings_form_compiler.js
index ea977d2fbeb..3af48890c34 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_compiler.js
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_compiler.js
@@ -175,8 +175,12 @@ function compileField(el, params) {
     return res;
 }
 
+const labelsWeak = new WeakMap();
 function compileLabel(el, params) {
     const res = this.compileLabel(el, params);
+    // It the node is a FormLabel component node, the label is
+    // localized *after* the field.
+    // We don't know yet if the label refers to a field or not.
     if (res.textContent && res.tagName !== "FormLabel" && params.config) {
         params.labels.push({
             label: res.textContent.trim(),
@@ -186,6 +190,7 @@ function compileLabel(el, params) {
         const highlight = createElement("HighlightText");
         highlight.setAttribute("originalText", `\`${res.textContent}\``);
         append(res, highlight);
+        labelsWeak.set(res, { textContent: res.textContent });
         res.firstChild.remove();
     }
     return res;
@@ -235,7 +240,17 @@ export class SettingsFormCompiler extends FormCompiler {
         );
     }
     createLabelFromField(fieldId, fieldName, fieldString, label, params) {
+        const labelweak = labelsWeak.get(label);
+        if (labelweak) {
+            // Undo what we've done when we where not sure whether this label was attached to a field
+            // Now, we now it is.
+            label.textContent = labelweak.textContent;
+        }
         const res = super.createLabelFromField(fieldId, fieldName, fieldString, label, params);
+        if (labelweak) {
+            // the work of pushing the label in the search structure is already done
+            return res;
+        }
         let labelText = label.textContent || fieldString;
         labelText = labelText ? labelText : params.record.fields[fieldName].string;
 
diff --git a/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js b/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js
index 1e94ef00605..febe8d2cead 100644
--- a/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js
+++ b/addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js
@@ -7,16 +7,26 @@ import {
     makeDeferred,
     mockTimeout,
     nextTick,
+    patchWithCleanup,
 } from "@web/../tests/helpers/utils";
 import { editSearch } from "@web/../tests/search/helpers";
 import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
 import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
 import { registry } from "@web/core/registry";
+import { SettingsFormCompiler } from "@web/webclient/settings_form_view/settings_form_compiler";
 
 let target;
 let serverData;
 let execTimeouts;
 
+QUnit.assert.areEquivalent = function (template1, template2) {
+    if (template1.replace(/\s/g, "") === template2.replace(/\s/g, "")) {
+        QUnit.assert.ok(true);
+    } else {
+        QUnit.assert.strictEqual(template1, template2);
+    }
+};
+
 QUnit.module("SettingsFormView", (hooks) => {
     hooks.beforeEach(() => {
         serverData = {
@@ -1251,4 +1261,48 @@ QUnit.module("SettingsFormView", (hooks) => {
             ["xphone"]
         );
     });
+
+    QUnit.test("standalone field labels with string inside a settings page", async (assert) => {
+        let compiled = undefined;
+        patchWithCleanup(SettingsFormCompiler.prototype, {
+            compile() {
+                const _compiled = this._super(...arguments);
+                compiled = _compiled;
+                return _compiled;
+            },
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "res.config.settings",
+            serverData,
+            arch: `
+                <form js_class="base_settings">
+                    <div class="o_setting_container">
+                        <div class="settings">
+                            <div class="app_settings_block" string="CRM" data-key="crm">
+                                <label string="My&quot; little &apos;  Label" for="display_name" class="highhopes"/>
+                                <field name="display_name" />
+                            </div>
+                        </div>
+                    </div>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector("label.highhopes").textContent,
+            "My\" little '  Label"
+        );
+
+        const expectedCompiled = `
+        <div class="o_setting_container">
+            <SettingsPage slots="props.slots" initialTab="props.initialApp" t-slot-scope="settings" modules="[{&quot;key&quot;:&quot;crm&quot;,&quot;string&quot;:&quot;CRM&quot;,&quot;imgurl&quot;:&quot;/crm/static/description/icon.png&quot;,&quot;isVisible&quot;:false}]" class="'settings'">
+                <SettingsApp t-props="{&quot;key&quot;:&quot;crm&quot;,&quot;string&quot;:&quot;CRM&quot;,&quot;imgurl&quot;:&quot;/crm/static/description/icon.png&quot;,&quot;isVisible&quot;:false}" selectedTab="settings.selectedTab" t-if="!searchState.value or search(&quot;app&quot;, &quot;crm&quot;)" class="'app_settings_block'">
+                    <FormLabel t-props="{id:'display_name',fieldName:'display_name',record:props.record,fieldInfo:props.archInfo.fieldNodes['display_name'],className:&quot;highhopes&quot;}" string="\`My&quot; little '  Label\`"/>
+                    <Field id="'display_name'" name="'display_name'" record="props.record" fieldInfo="props.archInfo.fieldNodes['display_name']"/>
+                </SettingsApp>
+            </SettingsPage>
+        </div>`;
+        assert.areEquivalent(compiled.firstChild.innerHTML, expectedCompiled);
+    });
 });