[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>

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"/>

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() {

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;
+    }
+}

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]"/>

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"]);
+    });
 });