[FIX] web: ListView use the correct label

This commit solves 2 problems in the list view:
- incorrect label for a column
- the label in the optional column dropdown can be different than
  the label of the displayed column

When converting the list view, we used the displayName of the widget
and not its label.

In order to improve the consistency between the labels in the optional
column dropdown and the associated columns, we decided to use the same
label.

closes odoo/odoo#96408

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/views/list/list_arch_parser.js

@@ -86,7 +86,7 @@ export class ListArchParser extends XMLParser {
                 }
                 addFieldDependencies(activeFields, fieldInfo.FieldComponent.fieldDependencies);
                 if (!invisible || !archParseBoolean(invisible)) {
-                    const displayName = fieldInfo.FieldComponent.displayName;
+                    const label = fieldInfo.FieldComponent.label;
                     columns.push({
                         ...fieldInfo,
                         id: `column_${nextId++}`,
@@ -94,9 +94,7 @@ export class ListArchParser extends XMLParser {
                         optional: node.getAttribute("optional") || false,
                         type: "field",
                         hasLabel: !(fieldInfo.noLabel || fieldInfo.FieldComponent.noLabel),
-                        label:
-                            (fieldInfo.widget && displayName && displayName.toString()) ||
-                            fieldInfo.string,
+                        label: (fieldInfo.widget && label && label.toString()) || fieldInfo.string,
                     });
                 }
                 return false;

addons/web/static/src/views/list/list_renderer.js

@@ -435,7 +435,7 @@ export class ListRenderer extends Component {
         return this.allColumns
             .filter((col) => col.optional)
             .map((col) => ({
-                string: col.string,
+                label: col.label,
                 name: col.name,
                 value: this.optionalActiveFields[col.name],
             }));

addons/web/static/src/views/list/list_renderer.xml

@@ -80,7 +80,7 @@
                                 value="field.value"
                                 name="field.name"
                             >
-                                <t t-esc="field.string"/> <t t-if="env.debug" t-esc="' (' + field.name + ')'" />
+                                <t t-esc="field.label"/> <t t-if="env.debug" t-esc="' (' + field.name + ')'" />
                             </CheckBox>
                         </DropdownItem>
                     </t>

addons/web/static/tests/views/list_view_tests.js

@@ -846,7 +846,7 @@ QUnit.module("Views", (hooks) => {
         fieldRegistry.add("nolabel_char", NoLabelCharField);
 
         class LabelCharField extends CharField {}
-        LabelCharField.displayName = "Some static label";
+        LabelCharField.label = "Some static label";
         fieldRegistry.add("label_char", LabelCharField);
 
         await makeView({
@@ -855,10 +855,10 @@ QUnit.module("Views", (hooks) => {
             serverData,
             arch: `
                 <tree>
-                    <field name="display_name" widget="nolabel_char"/>
-                    <field name="foo" widget="label_char"/>
-                    <field name="int_field" string="My custom label"/>
-                    <field name="text"/>
+                    <field name="display_name" widget="nolabel_char" optional="show"/>
+                    <field name="foo" widget="label_char" optional="show"/>
+                    <field name="int_field" string="My custom label" optional="show"/>
+                    <field name="text" optional="show"/>
                 </tree>`,
         });
 
@@ -870,6 +870,17 @@ QUnit.module("Views", (hooks) => {
             "My custom label",
             "text field",
         ]);
+
+        await click(target, "table .o_optional_columns_dropdown .dropdown-toggle");
+        const optionalColumnLabels = [
+            ...target.querySelectorAll(".o_optional_columns_dropdown .dropdown-item"),
+        ].map((item) => item.textContent.trim());
+        assert.deepEqual(optionalColumnLabels, [
+            "Display Name",
+            "Some static label",
+            "My custom label",
+            "text field",
+        ]);
     });
 
     QUnit.test("simple editable rendering", async function (assert) {