From 99372adeebbb45da3c4a170cb7cb08e8d063518d Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Mon, 6 Nov 2023 14:59:33 +0100
Subject: [PATCH] [FIX] web: avoid moving fullscreen dialog on small screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On "small screen" (especially on Mobile), all dialogs are in fullscreen,
so we don't allow moving the dialog as there is no enough space
available on the screen.
This commit disallows the use of `useDialogDraggable` on "small screen".

Steps to reproduce:
* Open Odoo in "small screen"
* Go to Sale App
* Create a new SO
* Click on the Customer field
* Use the mouse to move the fullscreen dialog (modal's header) => BUG

closes odoo/odoo#141482

X-original-commit: c5f2bd38a3175d7a4ce471dbb91a54f0c3378d10
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
---
 addons/web/static/src/core/dialog/dialog.js   |  1 +
 .../static/tests/mobile/core/dialog_tests.js  | 62 +++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 addons/web/static/tests/mobile/core/dialog_tests.js

diff --git a/addons/web/static/src/core/dialog/dialog.js b/addons/web/static/src/core/dialog/dialog.js
index a8cafc144c5..f73505b0f96 100644
--- a/addons/web/static/src/core/dialog/dialog.js
+++ b/addons/web/static/src/core/dialog/dialog.js
@@ -57,6 +57,7 @@ export class Dialog extends Component {
         useChildSubEnv({ inDialog: true, dialogId: this.id, closeDialog: () => this.data.close() });
         this.position = useState({ left: 0, top: 0 });
         useDialogDraggable({
+            enable: () => !this.env.isSmall,
             ref: this.modalRef,
             elements: ".modal-content",
             handle: ".modal-header",
diff --git a/addons/web/static/tests/mobile/core/dialog_tests.js b/addons/web/static/tests/mobile/core/dialog_tests.js
new file mode 100644
index 00000000000..27aa2c608fc
--- /dev/null
+++ b/addons/web/static/tests/mobile/core/dialog_tests.js
@@ -0,0 +1,62 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
+import { Dialog } from "@web/core/dialog/dialog";
+import { makeTestEnv } from "../../helpers/mock_env";
+import { getFixture, mount, dragAndDrop } from "../../helpers/utils";
+import { makeFakeDialogService } from "../../helpers/mock_services";
+
+import { Component, xml } from "@odoo/owl";
+const serviceRegistry = registry.category("services");
+let parent;
+let target;
+
+async function makeDialogTestEnv() {
+    const env = await makeTestEnv();
+    env.dialogData = {
+        isActive: true,
+        close: () => {},
+        scrollToOrigin: () => {},
+    };
+    return env;
+}
+
+QUnit.module("Components", (hooks) => {
+    hooks.beforeEach(async () => {
+        target = getFixture();
+        serviceRegistry.add("hotkey", hotkeyService);
+        serviceRegistry.add("dialog", makeFakeDialogService());
+    });
+    hooks.afterEach(() => {
+        if (parent) {
+            parent = undefined;
+        }
+    });
+
+    QUnit.module("Dialog");
+
+    QUnit.test("dialog can't be moved on small screen", async (assert) => {
+        class Parent extends Component {
+            static template = xml`<Dialog>content</Dialog>`;
+            static components = { Dialog };
+        }
+
+        await mount(Parent, target, { env: await makeDialogTestEnv() });
+        const content = target.querySelector(".modal-content");
+        assert.strictEqual(content.style.top, "0px");
+        assert.strictEqual(content.style.left, "0px");
+
+        const header = content.querySelector(".modal-header");
+        const headerRect = header.getBoundingClientRect();
+        // Even if the `dragAndDrop` is called, confirms that there are no effects
+        await dragAndDrop(header, document.body, {
+            // the util function sets the source coordinates at (x; y) + (w/2; h/2)
+            // so we need to move the dialog based on these coordinates.
+            x: headerRect.x + headerRect.width / 2 + 20,
+            y: headerRect.y + headerRect.height / 2 + 50,
+        });
+        assert.strictEqual(content.style.top, "0px");
+        assert.strictEqual(content.style.left, "0px");
+    });
+});