From ebcecf74c6e1e36624b28673e3954380b718a4f7 Mon Sep 17 00:00:00 2001
From: Bruno Boi <boi@odoo.com>
Date: Mon, 4 Jul 2022 11:02:27 +0000
Subject: [PATCH] [FIX] web: missing t-attf-class part for ViewButtons

Before this commit
When defining a view button in some view arch, the combination of its
class attribute with a `t-attf-class` is not correctly handled.

After this commit
This is fixed.

Part-of: odoo/odoo#94952
---
 addons/web/static/src/core/utils/xml.js       |  4 +-
 addons/web/static/src/views/view_compiler.js  |  7 ++-
 .../static/tests/views/kanban_view_tests.js   | 55 +++++++++++++++++++
 3 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/core/utils/xml.js b/addons/web/static/src/core/utils/xml.js
index 01cd2a3b26b..aa27b3011a0 100644
--- a/addons/web/static/src/core/utils/xml.js
+++ b/addons/web/static/src/core/utils/xml.js
@@ -82,7 +82,9 @@ export function combineAttributes(el, attr, parts, glue = " ") {
     if (el.hasAttribute(attr)) {
         allValues.push(el.getAttribute(attr));
     }
-    allValues.push(...(Array.isArray(parts) ? parts : [parts]));
+    parts = Array.isArray(parts) ? parts : [parts];
+    parts = parts.filter((part) => !!part);
+    allValues.push(...parts);
     el.setAttribute(attr, allValues.join(glue));
 }
 
diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
index 75e94f2e4a7..1a843f15ee9 100644
--- a/addons/web/static/src/views/view_compiler.js
+++ b/addons/web/static/src/views/view_compiler.js
@@ -345,7 +345,12 @@ export class ViewCompiler {
         }
 
         button.setAttribute("clickParams", JSON.stringify(clickParams));
-        button.setAttribute("className", toStringExpression(el.className));
+        combineAttributes(
+            button,
+            "className",
+            [toStringExpression(el.className), button.className],
+            "+` `+"
+        );
         el.removeAttribute("class");
         button.removeAttribute("class");
 
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 59e4a540199..bdd764ab56f 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -33,6 +33,7 @@ import { getNextTabableElement } from "@web/core/utils/ui";
 import { session } from "@web/session";
 import { KanbanAnimatedNumber } from "@web/views/kanban/kanban_animated_number";
 import { kanbanView } from "@web/views/kanban/kanban_view";
+import { ViewButton } from "@web/views/view_button/view_button";
 import AbstractField from "web.AbstractField";
 import legacyFieldRegistry from "web.field_registry";
 import Widget from "web.Widget";
@@ -861,6 +862,60 @@ QUnit.module("Views", (hooks) => {
         ]);
     });
 
+    QUnit.test("view button and string interpolated attribute in kanban", async (assert) => {
+        patchWithCleanup(ViewButton.prototype, {
+            setup() {
+                this._super();
+                assert.step(
+                    `[${this.props.clickParams["name"]}] className: '${this.props.className}'`
+                );
+            },
+        });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <field name="foo"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <a name="one" type="object" class="hola"/>
+                                <a name="two" type="object" class="hola" t-attf-class="hello"/>
+                                <a name="sri" type="object" class="hola" t-attf-class="{{record.foo.value}}"/>
+                                <a name="foa" type="object" class="hola" t-attf-class="{{record.foo.value}} olleh"/>
+                                <a name="fye" type="object" class="hola" t-attf-class="hello {{record.foo.value}}"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+        assert.verifySteps([
+            "[one] className: 'hola oe_kanban_action oe_kanban_action_a'",
+            "[two] className: 'hola oe_kanban_action oe_kanban_action_a hello'",
+            "[sri] className: 'hola oe_kanban_action oe_kanban_action_a yop'",
+            "[foa] className: 'hola oe_kanban_action oe_kanban_action_a yop olleh'",
+            "[fye] className: 'hola oe_kanban_action oe_kanban_action_a hello yop'",
+            "[one] className: 'hola oe_kanban_action oe_kanban_action_a'",
+            "[two] className: 'hola oe_kanban_action oe_kanban_action_a hello'",
+            "[sri] className: 'hola oe_kanban_action oe_kanban_action_a blip'",
+            "[foa] className: 'hola oe_kanban_action oe_kanban_action_a blip olleh'",
+            "[fye] className: 'hola oe_kanban_action oe_kanban_action_a hello blip'",
+            "[one] className: 'hola oe_kanban_action oe_kanban_action_a'",
+            "[two] className: 'hola oe_kanban_action oe_kanban_action_a hello'",
+            "[sri] className: 'hola oe_kanban_action oe_kanban_action_a gnap'",
+            "[foa] className: 'hola oe_kanban_action oe_kanban_action_a gnap olleh'",
+            "[fye] className: 'hola oe_kanban_action oe_kanban_action_a hello gnap'",
+            "[one] className: 'hola oe_kanban_action oe_kanban_action_a'",
+            "[two] className: 'hola oe_kanban_action oe_kanban_action_a hello'",
+            "[sri] className: 'hola oe_kanban_action oe_kanban_action_a blip'",
+            "[foa] className: 'hola oe_kanban_action oe_kanban_action_a blip olleh'",
+            "[fye] className: 'hola oe_kanban_action oe_kanban_action_a hello blip'",
+        ]);
+    });
+
     QUnit.test("kanban with kanban-tooltip template", async (assert) => {
         serviceRegistry.add("tooltip", tooltipService);
         let simulateTimeout;