From e13f3103e2a57be2dab0c805b6e3ada4a3a77e19 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Fri, 14 Jul 2023 09:44:36 +0000
Subject: [PATCH] [FIX] web: view compiler: honnor class attribute on widget

Commit [1] inadvertently broke the handling of the "class"
attribute on a <widget> node, in the view compilers. When set,
the value of the "class" attribute was given in props to the
Widget component as "name", instead of "className".

[1] https://github.com/odoo/odoo/commit/0b574df2599da3dae66b9785198420d707a280a3

closes odoo/odoo#128646

X-original-commit: 3024f2121848ec414d596ef9c3eb0a1bd7e6cfd2
Signed-off-by: Jorge Pinna Puissant (jpp) <jpp@odoo.com>
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 addons/web/static/src/views/view_compiler.js  | 13 ++++++++---
 .../tests/views/form/form_view_tests.js       | 22 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
index 53ae5d0b96a..96fb448a0f9 100644
--- a/addons/web/static/src/views/view_compiler.js
+++ b/addons/web/static/src/views/view_compiler.js
@@ -199,8 +199,15 @@ export class ViewCompiler {
         this.id = 1;
         /** @type {Compiler[]} */
         this.compilers = [
-            { selector: "a[type]:not([data-bs-toggle]),a[data-type]:not([data-bs-toggle])", fn: this.compileButton },
-            { selector: "button:not([data-bs-toggle])", fn: this.compileButton, doNotCopyAttributes: true },
+            {
+                selector: "a[type]:not([data-bs-toggle]),a[data-type]:not([data-bs-toggle])",
+                fn: this.compileButton,
+            },
+            {
+                selector: "button:not([data-bs-toggle])",
+                fn: this.compileButton,
+                doNotCopyAttributes: true,
+            },
             { selector: "field", fn: this.compileField },
             { selector: "widget", fn: this.compileWidget },
         ];
@@ -415,7 +422,7 @@ export class ViewCompiler {
             props.name = `'${el.getAttribute("name")}'`;
         }
         if (el.hasAttribute("class")) {
-            props.name = `'${el.getAttribute("class")}'`;
+            props.className = `'${el.getAttribute("class")}'`;
         }
         props.widgetInfo = `__comp__.props.archInfo.widgetNodes['${widgetId}']`;
         const widget = createElement("Widget", props);
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
index d9c00a6d652..c7a7c17e15c 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -10143,8 +10143,28 @@ QUnit.module("Views", (hooks) => {
             target.querySelector(".o_widget").textContent,
             '{"foo":"My little Foo Value","bar":false}'
         );
+    });
 
-        widgetRegistry.remove("test_widget");
+    QUnit.test("widget with class attribute", async function (assert) {
+        class MyComponent extends owl.Component {
+            static template = owl.xml`<span>Hello</span>`;
+        }
+        const myComponent = {
+            component: MyComponent,
+        };
+        widgetRegistry.add("test_widget", myComponent);
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            arch: `
+                <form>
+                    <widget name="test_widget" class="my_classname"/>
+                </form>`,
+        });
+
+        assert.containsOnce(target, ".o_widget.my_classname");
     });
 
     QUnit.test("support header button as widgets on form statusbar", async function (assert) {