From 7fbc49d4862b1a5a9014f351e09cc480ebf3e19c Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Wed, 28 Sep 2022 13:27:28 +0000
Subject: [PATCH] [FIX] web: ListView colspan for empty lines

Before this commit, empty lines on non-editable form's list are 1 column
too long and breaks the list's layout (ie. squish other columns and
empty space on non-empty columns).

This commit fixes it by properly calculating the number of columns and
their application on the empty lines' colspan. It also fixes an assert
in the list view's tests which mistakenly required that list's records
should be editable in a non-editable form.

Steps to reproduce:
- Open a Contact
- In the notebook, choose the Accounting tab
=> The Bank Accounts list has broken layout

closes odoo/odoo#101550

X-original-commit: 543134e215200bafd89edc1303032a210a4206cf
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 .../static/src/views/list/list_renderer.js    |  5 +-
 .../static/src/views/list/list_renderer.xml   |  2 +-
 .../web/static/tests/views/list_view_tests.js | 67 +++++++++++++++++--
 3 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index 97161e192c7..7442856bdac 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -338,7 +338,10 @@ export class ListRenderer extends Component {
         if (this.hasSelectors) {
             nbCols++;
         }
-        if (this.props.activeActions && this.props.activeActions.onDelete) {
+        if (
+            (this.props.activeActions && this.props.activeActions.onDelete) ||
+            this.displayOptionalFields
+        ) {
             nbCols++;
         }
         return nbCols;
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index 693aeae2bc3..408745aa0f6 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -126,7 +126,7 @@
             </tr>
             <t t-if="!props.list.isGrouped">
                 <tr t-foreach="getEmptyRowIds" t-as="emptyRowId" t-key="emptyRowId">
-                    <td t-att-colspan="props.list.editedRecord ? nbCols : nbCols + 1">&#8203;</td>
+                    <td t-att-colspan="nbCols">&#8203;</td>
                 </tr>
             </t>
         </t>
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index d88d3c7e2bc..ee3f5e77821 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -3291,9 +3291,8 @@ QUnit.module("Views", (hooks) => {
             resModel: "foo",
             serverData,
             resId: 1,
-            mode: "readonly",
             arch: `
-                    <form>
+                    <form edit="0">
                         <sheet>
                             <field name="foo_o2m">
                                 <tree editable="bottom">
@@ -3303,8 +3302,8 @@ QUnit.module("Views", (hooks) => {
                         </sheet>
                     </form>`,
         });
-        // in readonly mode, the delete action is available and the empty lines should cover that col
-        assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
+        // in readonly mode, the delete action is not available
+        assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "1");
     });
 
     QUnit.test("colspan of empty lines is correct in edit", async function (assert) {
@@ -3333,6 +3332,66 @@ QUnit.module("Views", (hooks) => {
         assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
     });
 
+    QUnit.test(
+        "colspan of empty lines is correct in readonly with optional fields",
+        async function (assert) {
+            serverData.models.foo.fields.foo_o2m = {
+                string: "Foo O2M",
+                type: "one2many",
+                relation: "foo",
+            };
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                resId: 1,
+                arch: `
+                    <form edit="0">
+                        <sheet>
+                            <field name="foo_o2m">
+                                <tree editable="bottom">
+                                    <field name="int_field"/>
+                                    <field name="foo" optional="hidden"/>
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+            });
+            // in readonly mode, the delete action is not available but the optional fields is and the empty lines should cover that col
+            assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
+        }
+    );
+
+    QUnit.test(
+        "colspan of empty lines is correct in edit with optional fields",
+        async function (assert) {
+            serverData.models.foo.fields.foo_o2m = {
+                string: "Foo O2M",
+                type: "one2many",
+                relation: "foo",
+            };
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                resId: 1,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="foo_o2m">
+                                <tree editable="bottom">
+                                    <field name="int_field"/>
+                                    <field name="foo" optional="hidden"/>
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+            });
+            // in edit mode, both the delete action and the optional fields are available and the empty lines should cover that col
+            assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
+        }
+    );
+
     QUnit.test(
         "width of some fields should be hardcoded if no data, and list initially invisible",
         async function (assert) {