[FIX] mail: do not show chat window hidden menu in mobile

Task-2795429

closes odoo/odoo#86551

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

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">

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',
         }),

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)",
+    );
+});
+
 });
 });