From ae075ec5c94555be08b584ed4e79ee2ffb6ebddb Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Thu, 6 Apr 2023 06:24:03 +0000
Subject: [PATCH] [IMP] web: TagsList supports icon props

This commits makes the TagsList component able to display icons as well
as images were previously supported. A test has been added to verify the
presence of the icon set in each tag.

closes odoo/odoo#117751

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../static/src/core/tags_list/tags_list.xml   |  1 +
 .../web/static/tests/core/tags_list_tests.js  | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/addons/web/static/src/core/tags_list/tags_list.xml b/addons/web/static/src/core/tags_list/tags_list.xml
index 8bf06810bb6..7dc989a5a72 100644
--- a/addons/web/static/src/core/tags_list/tags_list.xml
+++ b/addons/web/static/src/core/tags_list/tags_list.xml
@@ -5,6 +5,7 @@
         <t t-foreach="visibleTags" t-as="tag" t-key="tag.id or tag_index">
             <span t-attf-class="{{`o_tag_color_${ tag.colorIndex or 0 } ${props.displayBadge ? 'badge rounded-pill' : ''}`}} o_tag d-inline-flex align-items-center" t-att-class="tag.className" tabindex="-1" t-att-data-color="tag.colorIndex" t-att-title="tag.text" t-on-click="(ev) => tag.onClick and tag.onClick(ev)" t-on-keydown="tag.onKeydown">
                 <img t-if="tag.img" t-att-src="tag.img" class="o_m2m_avatar rounded-circle"/>
+                <i t-if="tag.icon" t-attf-class="p-1 fa {{ tag.icon }}"/>
                 <div t-if="props.displayBadge and props.displayText" class="o_tag_badge_text px-1" t-esc="tag.text" />
                 <t t-elif="props.displayText">
                     <span />
diff --git a/addons/web/static/tests/core/tags_list_tests.js b/addons/web/static/tests/core/tags_list_tests.js
index d08dd518cdc..383768b02bd 100644
--- a/addons/web/static/tests/core/tags_list_tests.js
+++ b/addons/web/static/tests/core/tags_list_tests.js
@@ -98,6 +98,33 @@ QUnit.module("Web Components", (hooks) => {
         );
     });
 
+    QUnit.test("Tags can be displayed with an icon", async (assert) => {
+        class Parent extends Component {
+            setup() {
+                this.tags = [
+                    {
+                        icon: "fa-trash",
+                        id: "tag1",
+                        text: "Bad",
+                    },
+                    {
+                        icon: "fa-check",
+                        id: "tag2",
+                        text: "Good",
+                    },
+                ];
+            }
+        }
+        Parent.components = { TagsList };
+        Parent.template = xml`
+        <TagsList tags="tags" />`;
+
+        await mount(Parent, target, { env });
+        assert.containsN(target, ".o_tag", 2);
+        assert.hasClass(target.querySelector(".o_tag:nth-of-type(1) i"), "fa fa-trash");
+        assert.hasClass(target.querySelector(".o_tag:nth-of-type(2) i"), "fa fa-check");
+    });
+
     QUnit.test("Limiting the visible tags displays a counter", async (assert) => {
         class Parent extends Component {
             setup() {