From f20e3d13fcb3f833bcefb2935dccc02f17f417b1 Mon Sep 17 00:00:00 2001
From: "Michael (mcm)" <mcm@odoo.com>
Date: Thu, 4 Aug 2022 13:59:33 +0000
Subject: [PATCH] [FIX] web: fix state selection field position

Before this commit, the state selection field was positioned
on the left of the sheet, just above the title. Now, it is
positioned on the right of sheet.

This commit also fixes the text displayed by this field by
using the value of the fields (normal;blocked;done)_legend.

Finally, this commit removes the last uses of the deprecated
field `kanban_state_selection`.

closes odoo/odoo#97765

Signed-off-by: Bruno Boi (boi) <boi@odoo.com>
---
 .../views/hr_recruitment_views.xml            |  4 +-
 .../state_selection/state_selection_field.js  | 10 +++--
 .../state_selection_field.scss                | 10 +++++
 .../state_selection/state_selection_field.xml |  2 +-
 .../fields/state_selection_field_tests.js     | 40 +++++++++++++++++++
 5 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 addons/web/static/src/views/fields/state_selection/state_selection_field.scss

diff --git a/addons/hr_recruitment/views/hr_recruitment_views.xml b/addons/hr_recruitment/views/hr_recruitment_views.xml
index 018eae494cf..b84b3fba806 100644
--- a/addons/hr_recruitment/views/hr_recruitment_views.xml
+++ b/addons/hr_recruitment/views/hr_recruitment_views.xml
@@ -113,7 +113,7 @@
                 </div>
                 <widget name="web_ribbon" title="Refused" bg_color="bg-danger" attrs="{'invisible': ['|', ('active', '=', True), ('refuse_reason_id', '=', False)]}"/>
                 <widget name="web_ribbon" title="Hired" attrs="{'invisible': [('date_closed', '=', False)]}" />
-                <field name="kanban_state" widget="kanban_state_selection"/>
+                <field name="kanban_state" widget="state_selection"/>
                 <field name="active" invisible="1"/>
                 <field name="legend_normal" invisible="1"/>
                 <field name="legend_blocked" invisible="1"/>
@@ -387,7 +387,7 @@
                                             </span>
                                         </a>
                                         <div class="o_kanban_state_with_padding ms-1 me-2" >
-                                            <field name="kanban_state" widget="kanban_state_selection"/>
+                                            <field name="kanban_state" widget="state_selection"/>
                                             <field name="legend_normal" invisible="1"/>
                                             <field name="legend_blocked" invisible="1"/>
                                             <field name="legend_done" invisible="1"/>
diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.js b/addons/web/static/src/views/fields/state_selection/state_selection_field.js
index 447ba6e7c76..94972ab4d4b 100644
--- a/addons/web/static/src/views/fields/state_selection/state_selection_field.js
+++ b/addons/web/static/src/views/fields/state_selection/state_selection_field.js
@@ -15,7 +15,6 @@ export class StateSelectionField extends Component {
         if (this.props.record.activeFields[this.props.name].viewType === "form") {
             this.initiateCommand();
         }
-        this.excludedValues = [];
         this.colorPrefix = "o_status_";
         this.colors = {
             blocked: "red",
@@ -23,15 +22,20 @@ export class StateSelectionField extends Component {
         };
     }
     get options() {
-        return Array.from(this.props.record.fields[this.props.name].selection);
+        return this.props.record.fields[this.props.name].selection.map(([state, label]) => {
+            return [state, this.props.record.data[`legend_${state}`] || label];
+        });
     }
     get availableOptions() {
-        return this.options.filter((o) => !this.excludedValues.includes(o[0]));
+        return this.options.filter((o) => o[0] !== this.currentValue);
     }
     get currentValue() {
         return this.props.value || this.options[0][0];
     }
     get label() {
+        if (this.props.value && this.props.record.data[`legend_${this.props.value[0]}`]) {
+            return this.props.record.data[`legend_${this.props.value[0]}`];
+        }
         return formatSelection(this.currentValue, { selection: this.options });
     }
     get showLabel() {
diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.scss b/addons/web/static/src/views/fields/state_selection/state_selection_field.scss
new file mode 100644
index 00000000000..f04590a12c7
--- /dev/null
+++ b/addons/web/static/src/views/fields/state_selection/state_selection_field.scss
@@ -0,0 +1,10 @@
+.o_form_sheet > .o_field_state_selection {
+    > .dropdown {
+        float: right;
+    }
+
+    .dropdown-toggle .o_status {
+        height: $h3-font-size;
+        width: $h3-font-size;
+    }
+}
diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.xml b/addons/web/static/src/views/fields/state_selection/state_selection_field.xml
index 8ece1ad9637..b1956b10ebd 100644
--- a/addons/web/static/src/views/fields/state_selection/state_selection_field.xml
+++ b/addons/web/static/src/views/fields/state_selection/state_selection_field.xml
@@ -17,7 +17,7 @@
                     </div>
                 </t>
                 <t t-foreach="availableOptions" t-as="option" t-key="option[0]">
-                    <DropdownItem t-if="option[0] != currentValue" onSelected="() => props.update(option[0])">
+                    <DropdownItem onSelected="() => props.update(option[0])">
                         <div class="d-flex align-items-center">
                             <span t-attf-class="o_status {{ statusColor(option[0]) }} "/>
                             <span class="ms-2" t-esc="option[1]"/>
diff --git a/addons/web/static/tests/views/fields/state_selection_field_tests.js b/addons/web/static/tests/views/fields/state_selection_field_tests.js
index ce71d056717..b0e9a59c64d 100644
--- a/addons/web/static/tests/views/fields/state_selection_field_tests.js
+++ b/addons/web/static/tests/views/fields/state_selection_field_tests.js
@@ -468,4 +468,44 @@ QUnit.module("Fields", (hooks) => {
             assert.containsOnce(target, ".o_status_green");
         }
     );
+
+    QUnit.test("StateSelectionField uses legend_* fields", async function (assert) {
+        serverData.models.partner.fields.legend_normal = { type: "char" };
+        serverData.models.partner.fields.legend_blocked = { type: "char" };
+        serverData.models.partner.fields.legend_done = { type: "char" };
+        serverData.models.partner.records[0].legend_normal = "Custom normal";
+        serverData.models.partner.records[0].legend_blocked = "Custom blocked";
+        serverData.models.partner.records[0].legend_done = "Custom done";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="legend_normal" invisible="1" />
+                            <field name="legend_blocked" invisible="1" />
+                            <field name="legend_done" invisible="1" />
+                            <field name="selection" widget="state_selection"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        await click(target, ".o_status");
+        let dropdownItemTexts = [...target.querySelectorAll(".dropdown-item")].map(
+            (el) => el.textContent
+        );
+        assert.deepEqual(dropdownItemTexts, ["Custom normal", "Custom done"]);
+
+        await click(target.querySelector(".dropdown-item .o_status"));
+        await click(target, ".o_status");
+        dropdownItemTexts = [...target.querySelectorAll(".dropdown-item")].map(
+            (el) => el.textContent
+        );
+        assert.deepEqual(dropdownItemTexts, ["Custom blocked", "Custom done"]);
+    });
 });