From aca77f18b89393fb7cdbf0df84ab22d5a8f865a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Wed, 16 Mar 2022 18:15:19 +0000
Subject: [PATCH] [FIX] mail: do not show chat window hidden menu in mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Task-2795429

closes odoo/odoo#86551

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../chat_window_manager.xml                   |  2 +-
 .../static/src/models/chat_window_manager.js  | 10 ---
 .../components/chat_window_manager_tests.js   | 64 +++++++++++++++++++
 3 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
index e8d57227d7a..af12d243dec 100644
--- a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
+++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
@@ -5,7 +5,7 @@
         <div class="o_ChatWindowManager flex-row-reverse d-flex" t-attf-class="{{ className }}" t-ref="root">
             <t t-if="messaging and messaging.chatWindowManager">
                 <!-- Note: DOM elements are ordered from left to right -->
-                <t t-if="messaging.chatWindowManager.hasHiddenChatWindows">
+                <t t-if="messaging.chatWindowManager.visual.hidden.isVisible">
                     <ChatWindowHiddenMenu className="'o_ChatWindowManager_hiddenMenu'"/>
                 </t>
                 <t t-foreach="messaging.chatWindowManager.allOrderedVisible" t-as="chatWindow" t-key="chatWindow.localId">
diff --git a/addons/mail/static/src/models/chat_window_manager.js b/addons/mail/static/src/models/chat_window_manager.js
index b6c3a75e0e8..2f119ddd0ce 100644
--- a/addons/mail/static/src/models/chat_window_manager.js
+++ b/addons/mail/static/src/models/chat_window_manager.js
@@ -213,13 +213,6 @@ registerModel({
                 this.messaging.models['ChatWindow'].get(chatWindowLocalId)
             ));
         },
-        /**
-         * @private
-         * @returns {boolean}
-         */
-        _computeHasHiddenChatWindows() {
-            return this.allOrderedHidden.length > 0;
-        },
         /**
          * @private
          * @returns {boolean}
@@ -340,9 +333,6 @@ registerModel({
             inverse: 'manager',
             isCausal: true,
         }),
-        hasHiddenChatWindows: attr({
-            compute: '_computeHasHiddenChatWindows',
-        }),
         hasVisibleChatWindows: attr({
             compute: '_computeHasVisibleChatWindows',
         }),
diff --git a/addons/mail/static/tests/qunit_suite_tests/components/chat_window_manager_tests.js b/addons/mail/static/tests/qunit_suite_tests/components/chat_window_manager_tests.js
index 476310eddc8..add750b6fae 100644
--- a/addons/mail/static/tests/qunit_suite_tests/components/chat_window_manager_tests.js
+++ b/addons/mail/static/tests/qunit_suite_tests/components/chat_window_manager_tests.js
@@ -2456,5 +2456,69 @@ QUnit.test('chat window should remain folded when new message is received', asyn
     );
 });
 
+QUnit.test('should not have chat window hidden menu in mobile (transition from 2 chat windows in desktop to mobile)', async function (assert) {
+    /**
+     * computation uses following info:
+     * ([mocked] global window width: 900px)
+     * (others: @see `mail/static/src/models/chat_window_manager.js:visual`)
+     *
+     * - chat window width: 325px
+     * - start/end/between gap width: 10px/10px/5px
+     * - hidden menu width: 200px
+     * - global width: 1080px
+     *
+     * Not enough space for 2 visible chat windows:
+     *  10 + 325 + 5 + 325 + 10 = 675 > 600
+     * Enough space for 1 visible chat window + hidden menu:
+     *  10 + 325 + 5 + 200 + 10 = 550 < 600
+     */
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ id: 11 }, { id: 12 });
+    const { click, createMessagingMenuComponent, messaging } = await this.start({
+        env: {
+            browser: {
+                innerWidth: 600, // enough to fit 1 chat window + hidden menu
+            },
+        },
+    });
+    await createMessagingMenuComponent();
+    // open, from systray menu, chat windows of channels with id 1, 2
+    await click('.o_MessagingMenu_toggler');
+    await click(`
+        .o_MessagingMenu_dropdownMenu
+        .o_NotificationList_preview[data-thread-local-id="${
+            messaging.models['Thread'].findFromIdentifyingData({
+                id: 11,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    await click('.o_MessagingMenu_toggler');
+    await click(`
+        .o_MessagingMenu_dropdownMenu
+        .o_NotificationList_preview[data-thread-local-id="${
+            messaging.models['Thread'].findFromIdentifyingData({
+                id: 12,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    // simulate resize to go into mobile
+    await afterNextRender(
+        () => messaging.device.update({
+            globalWindowInnerWidth: 300,
+            isMobile: true,
+            isMobileDevice: true,
+            sizeClass: 0, // XS
+        }),
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindowManager_hiddenMenu',
+        "should not have any chat window hidden menu in mobile (transition from desktop having 2 visible chat windows)",
+    );
+});
+
 });
 });