From 13f6d26cd9e5ee6c713ffd801c3c8b192e5ca887 Mon Sep 17 00:00:00 2001
From: Dossogne Bertrand <bedo@odoo.com>
Date: Mon, 28 Nov 2022 16:44:44 +0000
Subject: [PATCH] [FIX] hr_contract: fix tooltip warning

When the contract has a working schedule different
from the employee's, a red triangle appears with a tooltip
explaining the reason. That tooltip was implemented in the
arch view using data-tooltip, which is not intended.
This commit adds an owl widget replacing that issue.

In order to test that tooltip warning, it's only needed
to go on any running contract and change the resource_calendar
so it's different to the one on the employee's page.
Same process on the employee form.

closes odoo/odoo#106760

Signed-off-by: Kevin Baptiste <kba@odoo.com>
---
 .../src/widgets/tooltip_warning_widget.js     | 17 ++++++++++
 .../src/widgets/tooltip_warning_widget.xml    | 10 ++++++
 .../hr_contract/views/hr_contract_views.xml   | 34 ++++++++-----------
 3 files changed, 42 insertions(+), 19 deletions(-)
 create mode 100644 addons/hr_contract/static/src/widgets/tooltip_warning_widget.js
 create mode 100644 addons/hr_contract/static/src/widgets/tooltip_warning_widget.xml

diff --git a/addons/hr_contract/static/src/widgets/tooltip_warning_widget.js b/addons/hr_contract/static/src/widgets/tooltip_warning_widget.js
new file mode 100644
index 00000000000..17a5f2dd7bc
--- /dev/null
+++ b/addons/hr_contract/static/src/widgets/tooltip_warning_widget.js
@@ -0,0 +1,17 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _t } from "@web/core/l10n/translation";
+
+const { Component } = owl;
+
+export class ContractWarningTooltip extends Component {
+    get tooltipInfo() {
+        return JSON.stringify({
+            "text" : _t("Calendar Mismatch : The employee's calendar does not match this contract's calendar. This could lead to unexpected behaviors."),
+        })
+    }
+}
+ContractWarningTooltip.template = "hr_contract.ContractWarningTooltip";
+
+registry.category("view_widgets").add("contract_warning_tooltip", ContractWarningTooltip);
diff --git a/addons/hr_contract/static/src/widgets/tooltip_warning_widget.xml b/addons/hr_contract/static/src/widgets/tooltip_warning_widget.xml
new file mode 100644
index 00000000000..3e1c6ded16c
--- /dev/null
+++ b/addons/hr_contract/static/src/widgets/tooltip_warning_widget.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-name="hr_contract.ContractWarningTooltip" owl="1">
+        <span
+            class="fa fa-exclamation-triangle text-danger o_calendar_warning ms-3"
+            data-tooltip-template="hr_contract.CalendarMismatch"
+            t-att-data-tooltip-info='tooltipInfo'/>
+    </t>
+</templates>
+
diff --git a/addons/hr_contract/views/hr_contract_views.xml b/addons/hr_contract/views/hr_contract_views.xml
index e3c6fa9cb1b..518dfa45805 100644
--- a/addons/hr_contract/views/hr_contract_views.xml
+++ b/addons/hr_contract/views/hr_contract_views.xml
@@ -19,15 +19,10 @@
                     <xpath expr="//field[@name='resource_calendar_id']" position="replace">
                         <field name="calendar_mismatch" invisible="1"/>
                         <label for="resource_calendar_id"/>
-                        <div>
-                            <field name="resource_calendar_id" required="1" nolabel="1"/>
-                            <span attrs="{'invisible': [('calendar_mismatch', '=', False)]}"
-                                class="fa fa-exclamation-triangle text-danger o_calendar_warning ms-3"
-                                data-tooltip-template="hr_contract.CalendarMismatch"
-                                data-tooltip-info='{
-                                        "text":"Calendar Mismatch : The employee&apos;s calendar does not match this contract&apos;s calendar. This could lead to unexpected behaviors."
-                                    }'>
-                            </span>
+                        <div class="d-flex align-items-center">
+                            <field name="resource_calendar_id" required="1"/>
+                            <widget name="contract_warning_tooltip"
+                                attrs="{'invisible': [('calendar_mismatch', '=', False)]}"/>
                         </div>
                     </xpath>
                     <field name="job_id" position="before">
@@ -209,16 +204,17 @@
                                 <field name="structure_type_id" groups="hr_contract.group_hr_contract_manager" domain="['|', ('country_id', '=', False), ('country_id', '=', company_country_id)]"/>
                                 <field name="calendar_mismatch" invisible="1"/>
                                 <label for="resource_calendar_id"/>
-                                <div id="resource_calendar_warning">
-                                    <field name="resource_calendar_id" groups="!hr_contract.group_hr_contract_manager" required="1" nolabel="1" options="{'no_open': True, 'no_create': True}"/>
-                                    <field name="resource_calendar_id" groups="hr_contract.group_hr_contract_manager" required="1" nolabel="1"/>
-                                    <span attrs="{'invisible': ['|', ('calendar_mismatch', '=', False), ('state', '!=', 'open')]}"
-                                        class="fa fa-exclamation-triangle text-danger o_calendar_warning ms-3"
-                                        data-tooltip-template="hr_contract.CalendarMismatch"
-                                        data-tooltip-info='{
-                                                "text":"Calendar Mismatch : The employee&apos;s calendar does not match this contract&apos;s calendar. This could lead to unexpected behaviors."
-                                            }'>
-                                    </span>
+                                <div id="resource_calendar_warning" class="d-flex align-items-center">
+                                        <field name="resource_calendar_id"
+                                            groups="!hr_contract.group_hr_contract_manager"
+                                            required="1"
+                                            options="{'no_open': True, 'no_create': True}"/>
+                                        <field name="resource_calendar_id"
+                                            groups="hr_contract.group_hr_contract_manager"
+                                            required="1"/>
+                                        <widget
+                                            name="contract_warning_tooltip"
+                                            attrs="{'invisible': ['|', ('calendar_mismatch', '=', False), ('state', '!=', 'open')]}"/>
                                 </div>
                             </group>
                             <group name="top_info_right">