[FIX] board: use single column layout on small screen

Steps to reproduce:

- Create My dashboard on PC with two views set one next to the other
- Open My dashboard on mobile devices, and you see the desktop view
  => bug

On small screens, we don't have enough available space on the screen to
allow other layout then "1".

opw-3145706

closes odoo/odoo#123561

X-original-commit: 9e1f79156e9440b953e9d476a608f9ce117c0d5b
Signed-off-by: Pierre Paridans (app) <app@odoo.com>

addons/board/__manifest__.py

@@ -26,6 +26,10 @@ Allows users to create custom dashboard.
         ],
         'web.qunit_suite_tests': [
             'board/static/tests/**/*',
+            ('remove', 'board/static/tests/mobile/**/*'), # mobile test
+        ],
+        'web.qunit_mobile_suite_tests': [
+            'board/static/tests/mobile/**/*',
         ],
     },
     'license': 'LGPL-3',

addons/board/static/src/board_controller.js

@@ -17,6 +17,10 @@ export class BoardController extends Component {
         this.board = useState(this.props.board);
         this.rpc = useService("rpc");
         this.dialogService = useService("dialog");
+        if (this.env.isSmall) {
+            this.board.layout = "1";
+            this.board.colNumber = 1;
+        }
         const mainRef = useRef("main");
         useSortable({
             ref: mainRef,
@@ -107,7 +111,7 @@ export class BoardController extends Component {
         const root = document.createElement("rendertostring");
         blockDom.mount(bdom, root);
         const result = xmlSerializer.serializeToString(root);
-        const arch = result.slice(result.indexOf('<', 1), result.indexOf('</rendertostring>'));
+        const arch = result.slice(result.indexOf("<", 1), result.indexOf("</rendertostring>"));
 
         this.rpc("/web/view/edit_custom", {
             custom_id: this.board.customViewId,

addons/board/static/src/board_controller.scss

@@ -36,7 +36,7 @@
         }
     }
 
-    .o_column_quick_create {
+    .o_column_quick_create, .o_control_panel {
         display: none;
     }
 }

addons/board/static/src/board_controller.xml

@@ -13,8 +13,7 @@
     </t>
 
     <t t-name="board.Content" owl="1">
-        <!-- Note: need to add mobile support that i just removed for now -->
-        <div class="o-dashboard-header d-flex justify-content-end">
+        <div t-if="!env.isSmall" class="o-dashboard-header d-flex justify-content-end">
             <Dropdown togglerClass="'btn btn-secondary m-2 p-2'">
                 <t t-set-slot="toggler">
                     <img t-attf-src="/board/static/img/layout_{{board.layout}}.png" width="16" height="16" alt=""/>

addons/board/static/tests/mobile/board_test.js

@@ -0,0 +1,81 @@
+/** @odoo-module **/
+
+import { getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Board", (hooks) => {
+    hooks.beforeEach(async () => {
+        target = getFixture();
+
+        serverData = {
+            models: {
+                board: {
+                    fields: {},
+                    records: [],
+                },
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            foo: "yop",
+                        },
+                    ],
+                },
+            },
+            views: {
+                "partner,100000001,form": "<form/>",
+                "partner,100000002,search": "<search/>",
+            },
+        };
+        setupViewRegistries();
+    });
+
+    QUnit.module("BoardView");
+
+    QUnit.test("can't switch views in the dashboard", async (assert) => {
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{&quot;orderedBy&quot;: [{&quot;name&quot;: &quot;foo&quot;, &quot;asc&quot;: True}]}" view_mode="list" string="ABC" name="51" domain="[['foo', '!=', 'False']]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [
+                            [4, "list"],
+                            [5, "form"],
+                        ],
+                    });
+                }
+            },
+        });
+
+        assert.containsNone(target, ".o-dashboard-header", "Couldn't allow user to Change layout");
+        assert.containsOnce(target, ".o-dashboard-layout-1", "The display layout is force to 1");
+        assert.isNotVisible(
+            target.querySelector(".o-dashboard-action .o_control_panel"),
+            "views in the dashboard do not have a control panel"
+        );
+    });
+});