From 442d855c2e990d533313a4a9b8ff4e70056ce0dc Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 07:08:57 +0000
Subject: [PATCH] [FIX] web: notification: properly use className option

Before this commit, opening a notification with the className
option would result in a notification being displayed without the
given className. That className was overriden by the transition
className. This commit ensures we keep all classNames.

Part-of: odoo/odoo#92475
---
 .../core/notifications/notification_container.js    |  2 +-
 .../tests/core/notifications/notifications_tests.js | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/notifications/notification_container.js b/addons/web/static/src/core/notifications/notification_container.js
index 03ee640d5f2..0eb9617186f 100644
--- a/addons/web/static/src/core/notifications/notification_container.js
+++ b/addons/web/static/src/core/notifications/notification_container.js
@@ -15,7 +15,7 @@ NotificationContainer.template = xml`
     <div class="o_notification_manager">
         <t t-foreach="notifications" t-as="notification" t-key="notification">
             <Transition leaveDuration="0" name="'o_notification_fade'" t-slot-scope="transition">
-                <Notification t-props="notification_value.props" className="transition.className"/>
+                <Notification t-props="notification_value.props" className="(notification_value.props.className || '') + ' ' + transition.className"/>
             </Transition>
         </t>
     </div>`;
diff --git a/addons/web/static/tests/core/notifications/notifications_tests.js b/addons/web/static/tests/core/notifications/notifications_tests.js
index d7d516f8944..a8266fd50b1 100644
--- a/addons/web/static/tests/core/notifications/notifications_tests.js
+++ b/addons/web/static/tests/core/notifications/notifications_tests.js
@@ -38,6 +38,19 @@ QUnit.test("can display a basic notification", async (assert) => {
     assert.hasClass(notif, "border-warning");
 });
 
+QUnit.test("can display a notification with a className", async (assert) => {
+    const env = await makeTestEnv({ serviceRegistry });
+    const { Component: NotificationContainer, props } = registry
+        .category("main_components")
+        .get("NotificationContainer");
+    const notifService = env.services.notification;
+    await mount(NotificationContainer, target, { env, props });
+
+    notifService.add("I'm a basic notification", { className: "abc" });
+    await nextTick();
+    assert.containsOnce(target, ".o_notification.abc");
+});
+
 QUnit.test("title and message are escaped by default", async (assert) => {
     const env = await makeTestEnv({ serviceRegistry });
     const { Component: NotificationContainer, props } = registry