[FIX] web: form_compiler, classes on FormLabel in a group

Before this commit, when compiling a form group, the scope class is
added to the elements of the outer group. It was added on the element
class attribute. The issue is that FormLabel don't have a class
attribute but a className attribute. So the class wasn't shown on the
DOM.

Now, the class is added on the FormLabel className attribute and shown
in the DOM.

closes odoo/odoo#105315

X-original-commit: 214beb39d7c1a315255f0a5a842e60f73e7900cc
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Co-authored-by: Lucas Perais (lpe) <lpe@odoo.com>

addons/web/static/src/views/form/form_compiler.js

@@ -70,13 +70,6 @@ export class FormCompiler extends ViewCompiler {
     }
 
     createLabelFromField(fieldId, fieldName, fieldString, label, params) {
-        const props = {
-            id: `'${fieldId}'`,
-            fieldName: `'${fieldName}'`,
-            record: `props.record`,
-            fieldInfo: `props.archInfo.fieldNodes['${fieldId}']`,
-            className: `"${label.className}"`,
-        };
         let labelText = label.textContent || fieldString;
         if (label.hasAttribute("data-no-label")) {
             labelText = toStringExpression("");
@@ -86,7 +79,11 @@ export class FormCompiler extends ViewCompiler {
                 : `props.record.fields['${fieldName}'].string`;
         }
         const formLabel = createElement("FormLabel", {
-            "t-props": objectToString(props),
+            id: `'${fieldId}'`,
+            fieldName: `'${fieldName}'`,
+            record: `props.record`,
+            fieldInfo: `props.archInfo.fieldNodes['${fieldId}']`,
+            className: `"${label.className}"`,
             string: labelText,
         });
         const condition = label.getAttribute("t-if");
@@ -372,7 +369,20 @@ export class FormCompiler extends ViewCompiler {
 
                 const groupClassExpr = `scope && scope.className`;
                 if (isComponentNode(slotContent)) {
-                    if (getTag(child, true) !== "button") {
+                    if (getTag(slotContent) === "FormLabel") {
+                        mainSlot.prepend(
+                            createElement("t", {
+                                "t-set": "addClass",
+                                "t-value": groupClassExpr,
+                            })
+                        );
+                        combineAttributes(
+                            slotContent,
+                            "className",
+                            `(addClass ? " " + addClass : "")`,
+                            `+`
+                        );
+                    } else if (getTag(child, true) !== "button") {
                         if (slotContent.hasAttribute("class")) {
                             mainSlot.prepend(
                                 createElement("t", {

addons/web/static/tests/views/form/form_compiler_tests.js

@@ -54,7 +54,7 @@ QUnit.module("Form Compiler", (hooks) => {
             <t>
                 <div t-att-class="props.class" t-attf-class="{{props.record.isInEdition ? 'o_form_editable' : 'o_form_readonly'}} d-block {{ props.record.isDirty ? 'o_form_dirty' : !props.record.isVirtual ? 'o_form_saved' : '' }}" class="o_form_nosheet" t-ref="compiled_view_root">
                     <Field id="'test'" name="'test'" record="props.record" fieldInfo="props.archInfo.fieldNodes['test']" />
-                    <FormLabel t-props="{id:'test',fieldName:'test',record:props.record,fieldInfo:props.archInfo.fieldNodes['test'],className:&quot;&quot;}" string="\`\`" />
+                    <FormLabel id="'test'" fieldName="'test'" record="props.record" fieldInfo="props.archInfo.fieldNodes['test']" className="&quot;&quot;" string="\`\`" />
                 </div>
             </t>`;
             assert.areEquivalent(compileTemplate(arch), expected);

addons/web/static/tests/views/form/form_view_tests.js

@@ -826,6 +826,35 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(target, "div.o_inner_group");
     });
 
+    QUnit.test("group with formLabel", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <!-- OuterGroup -->
+                            <field name="foo"/>
+                            <label for="foo" class="plop plop2"/>
+                            <group>
+                                <!-- InnerGroup -->
+                                <field name="display_name"/>
+                            </group>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+        assert.hasClass(target.querySelector(".o_field_widget[name=foo]"), "o_field_char");
+        assert.hasClass(target.querySelector(".o_field_widget[name=foo]"), "col-lg-6");
+
+        assert.hasClass(target.querySelector(".o_form_label[for=foo]"), "plop");
+        assert.hasClass(target.querySelector(".o_form_label[for=foo]"), "plop2");
+        assert.hasClass(target.querySelector(".o_form_label[for=foo]"), "col-lg-6");
+    });
+
     QUnit.test("group containing both a field and a group", async function (assert) {
         // The purpose of this test is to check that classnames defined in a
         // field widget and those added by the form renderer are correctly

addons/web/static/tests/webclient/settings_form_view/settings_form_view_tests.js

@@ -1455,7 +1455,7 @@ QUnit.module("SettingsFormView", (hooks) => {
         <div class="o_setting_container">
             <SettingsPage slots="{NoContentHelper:props.slots.NoContentHelper}" 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" 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\`"/>
+                    <FormLabel 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>