From 5c1e7a6f5db2abba29147a5f1ea69bdd0368fa59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Tue, 26 Apr 2022 14:45:02 +0000
Subject: [PATCH] [IMP] mail: introduce view models (step 5)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit introduces models that define records being 1:1 map with components,
as a step to move further to having essentially all business code in models.

Having code in models is desirable to have very maintainable code, thanks to
robust and declarative code with an ORM-like architecture.

Task-2831082

closes odoo/odoo#90427

Related: odoo/enterprise#26928
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../components/messaging_menu_tests.js        | 10 ++--
 .../src/components/activity/activity.js       |  2 +
 .../src/components/activity/activity.xml      | 14 ++---
 .../activity_mark_done_popover.xml            | 25 --------
 .../activity_mark_done_popover_content.js}    | 22 +++----
 .../activity_mark_done_popover_content.scss}  |  2 +-
 .../activity_mark_done_popover_content.xml    | 28 +++++++++
 .../messaging_menu/messaging_menu.scss        | 15 -----
 .../messaging_menu/messaging_menu.xml         | 10 +---
 .../messaging_menu_tab/messaging_menu_tab.js  | 30 ++++++++++
 .../messaging_menu_tab.scss                   | 13 +++++
 .../messaging_menu_tab/messaging_menu_tab.xml | 12 ++++
 .../rtc_call_participant_card.xml             |  4 +-
 .../rtc_configuration_menu.xml                |  4 +-
 .../rtc_configuration_menu_device.js          | 14 +++++
 .../rtc_configuration_menu_device.xml         | 10 ++++
 .../src/components/rtc_video/rtc_video.js     | 17 +++---
 .../src/components/rtc_video/rtc_video.xml    |  4 +-
 ...ctivity_mark_done_popover_content_view.js} | 39 +++++++++++--
 .../mail/static/src/models/activity_view.js   | 13 +++--
 addons/mail/static/src/models/popover_view.js | 34 ++++++++++-
 .../src/models/rtc_call_participant_card.js   | 16 +++++
 .../mail/static/src/models/rtc_video_view.js  | 33 +++++++++++
 .../activity_mark_done_popover_tests.js       | 36 ++++++------
 .../components/activity_tests.js              | 20 +++----
 .../components/messaging_menu_tests.js        | 58 +++++++++----------
 26 files changed, 328 insertions(+), 157 deletions(-)
 delete mode 100644 addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
 rename addons/mail/static/src/components/{activity_mark_done_popover/activity_mark_done_popover.js => activity_mark_done_popover_content/activity_mark_done_popover_content.js} (62%)
 rename addons/mail/static/src/components/{activity_mark_done_popover/activity_mark_done_popover.scss => activity_mark_done_popover_content/activity_mark_done_popover_content.scss} (79%)
 create mode 100644 addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml
 create mode 100644 addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js
 create mode 100644 addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.scss
 create mode 100644 addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
 create mode 100644 addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.js
 create mode 100644 addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.xml
 rename addons/mail/static/src/models/{activity_mark_done_popover_view.js => activity_mark_done_popover_content_view.js} (66%)
 create mode 100644 addons/mail/static/src/models/rtc_video_view.js

diff --git a/addons/im_livechat/static/tests/qunit_suite_tests/components/messaging_menu_tests.js b/addons/im_livechat/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
index cdd15e205e7..4b42a055f2b 100644
--- a/addons/im_livechat/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
+++ b/addons/im_livechat/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
@@ -34,16 +34,16 @@ QUnit.test('livechats should be in "chat" filter', async function (assert) {
     await afterNextRender(() => document.querySelector('.o_MessagingMenu_toggler').click());
     assert.containsOnce(
         document.body,
-        '.o_MessagingMenu_tabButton[data-tab-id="all"]',
+        '.o_MessagingMenuTab[data-tab-id="all"]',
         "should have a tab/filter 'all' in messaging menu"
     );
     assert.containsOnce(
         document.body,
-        '.o_MessagingMenu_tabButton[data-tab-id="chat"]',
+        '.o_MessagingMenuTab[data-tab-id="chat"]',
         "should have a tab/filter 'chat' in messaging menu"
     );
     assert.hasClass(
-        document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="all"]'),
+        document.querySelector('.o_MessagingMenuTab[data-tab-id="all"]'),
         'o-active',
         "tab/filter 'all' of messaging menu should be active initially"
     );
@@ -59,10 +59,10 @@ QUnit.test('livechats should be in "chat" filter', async function (assert) {
     );
 
     await afterNextRender(() =>
-        document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="chat"]').click()
+        document.querySelector('.o_MessagingMenuTab[data-tab-id="chat"]').click()
     );
     assert.hasClass(
-        document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="chat"]'),
+        document.querySelector('.o_MessagingMenuTab[data-tab-id="chat"]'),
         'o-active',
         "tab/filter 'chat' of messaging menu should become active after click"
     );
diff --git a/addons/mail/static/src/components/activity/activity.js b/addons/mail/static/src/components/activity/activity.js
index 835363cf78d..f947f2af1fd 100644
--- a/addons/mail/static/src/components/activity/activity.js
+++ b/addons/mail/static/src/components/activity/activity.js
@@ -1,6 +1,7 @@
 /** @odoo-module **/
 
 import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
+import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
 import Popover from "web.Popover";
@@ -14,6 +15,7 @@ export class Activity extends LegacyComponent {
      setup() {
         super.setup();
         useComponentToModel({ fieldName: 'component', modelName: 'ActivityView' });
+        useRefToModel({ fieldName: 'markDoneButtonRef', modelName: 'ActivityView', refName: 'markDoneButton', });
     }
 
     /**
diff --git a/addons/mail/static/src/components/activity/activity.xml b/addons/mail/static/src/components/activity/activity.xml
index 8b79205f02f..1b0a2b9d914 100644
--- a/addons/mail/static/src/components/activity/activity.xml
+++ b/addons/mail/static/src/components/activity/activity.xml
@@ -119,16 +119,10 @@
 
                     <t t-if="activityView.activity.canWrite">
                         <div name="tools" class="o_Activity_tools d-flex">
-                            <t t-if="!activityView.fileUploader">
-                                <Popover position="'right'" title="activityView.markDoneText">
-                                    <button class="o_Activity_toolButton o_Activity_markDoneButton btn btn-link btn-primary pt-0 pl-0" t-att-title="activityView.markDoneText">
-                                        <i class="fa fa-check"/> Mark Done
-                                    </button>
-                                    <t t-set-slot="opened">
-                                        <ActivityMarkDonePopover localId="activityView.activityMarkDonePopoverView.localId"/>
-                                    </t>
-                                </Popover>
-                            </t>
+                            <button class="o_Activity_toolButton o_Activity_markDoneButton btn btn-link btn-primary pt-0 pl-0" t-att-title="activityView.markDoneText" t-ref="markDoneButton" t-on-click="activityView.onClickMarkDoneButton">
+                                <i class="fa fa-check"/> Mark Done
+                            </button>
+                            <PopoverView t-if="activityView.markDonePopoverView" localId="activityView.markDonePopoverView.localId"/>
                             <t t-if="activityView.fileUploader">
                                 <button class="o_Activity_toolButton o_Activity_uploadButton btn btn-link btn-primary pt-0 pl-0" t-on-click="activityView.onClickUploadDocument">
                                     <i class="fa fa-upload"/> Upload Document
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
deleted file mode 100644
index 43f03c97409..00000000000
--- a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
+++ /dev/null
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates xml:space="preserve">
-
-    <t t-name="mail.ActivityMarkDonePopover" owl="1">
-        <t t-if="activityMarkDonePopoverView">
-            <div class="o_ActivityMarkDonePopover" t-attf-class="{{ className }}" t-on-keydown="activityMarkDonePopoverView.onKeydown" t-ref="root">
-                <textarea class="form-control o_ActivityMarkDonePopover_feedback mb-2" rows="3" placeholder="Write Feedback" t-on-blur="activityMarkDonePopoverView.onBlur" t-ref="feedbackTextarea"/>
-                <div class="o_ActivityMarkDonePopover_buttons">
-                    <button type="button" class="o_ActivityMarkDonePopover_doneScheduleNextButton btn btn-sm btn-primary" t-on-click="activityMarkDonePopoverView.onClickDoneAndScheduleNext">
-                        Done &amp; Schedule Next
-                    </button>
-                    <t t-if="activityMarkDonePopoverView.activityViewOwner.activity.chaining_type === 'suggest'">
-                        <button type="button" class="o_ActivityMarkDonePopover_doneButton btn btn-sm btn-primary mx-2" t-on-click="activityMarkDonePopoverView.onClickDone">
-                            Done
-                        </button>
-                    </t>
-                    <button type="button" class="o_ActivityMarkDonePopover_discardButton btn btn-sm btn-link" t-on-click="activityMarkDonePopoverView.onClickDiscard">
-                        Discard
-                    </button>
-                </div>
-            </div>
-        </t>
-    </t>
-
-</templates>
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.js
similarity index 62%
rename from addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js
rename to addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.js
index 744bd75b45a..e96661f2a68 100644
--- a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js
+++ b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.js
@@ -7,15 +7,15 @@ import { LegacyComponent } from "@web/legacy/legacy_component";
 
 const { onMounted, useRef } = owl;
 
-export class ActivityMarkDonePopover extends LegacyComponent {
+export class ActivityMarkDonePopoverContent extends LegacyComponent {
 
     /**
      * @override
      */
     setup() {
         super.setup();
-        useComponentToModel({ fieldName: 'component', modelName: 'ActivityMarkDonePopoverView' });
-        useRefToModel({ fieldName: 'feedbackTextareaRef', modelName: 'ActivityMarkDonePopoverView', refName: 'feedbackTextarea' });
+        useComponentToModel({ fieldName: 'component', modelName: 'ActivityMarkDonePopoverContentView' });
+        useRefToModel({ fieldName: 'feedbackTextareaRef', modelName: 'ActivityMarkDonePopoverContentView', refName: 'feedbackTextarea' });
         this._feedbackTextareaRef = useRef('feedbackTextarea');
         onMounted(() => this._mounted());
     }
@@ -26,23 +26,23 @@ export class ActivityMarkDonePopover extends LegacyComponent {
 
     _mounted() {
         this._feedbackTextareaRef.el.focus();
-        if (this.activityMarkDonePopoverView.activityViewOwner.activity.feedbackBackup) {
-            this._feedbackTextareaRef.el.value = this.activityMarkDonePopoverView.activityViewOwner.activity.feedbackBackup;
+        if (this.activityMarkDonePopoverContentView.activityViewOwner.activity.feedbackBackup) {
+            this._feedbackTextareaRef.el.value = this.activityMarkDonePopoverContentView.activityViewOwner.activity.feedbackBackup;
         }
     }
 
     /**
-     * @returns {ActivityMarkDonePopoverView}
+     * @returns {ActivityMarkDonePopoverContentView}
      */
-    get activityMarkDonePopoverView() {
-        return this.messaging && this.messaging.models['ActivityMarkDonePopoverView'].get(this.props.localId);
+    get activityMarkDonePopoverContentView() {
+        return this.messaging && this.messaging.models['ActivityMarkDonePopoverContentView'].get(this.props.localId);
     }
 
 }
 
-Object.assign(ActivityMarkDonePopover, {
+Object.assign(ActivityMarkDonePopoverContent, {
     props: { localId: String },
-    template: 'mail.ActivityMarkDonePopover',
+    template: 'mail.ActivityMarkDonePopoverContent',
 });
 
-registerMessagingComponent(ActivityMarkDonePopover);
+registerMessagingComponent(ActivityMarkDonePopoverContent);
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.scss
similarity index 79%
rename from addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss
rename to addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.scss
index f983fcff5e4..b9d52f5bb22 100644
--- a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss
+++ b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.scss
@@ -2,6 +2,6 @@
 // Layout
 // ------------------------------------------------------------------
 
-.o_ActivityMarkDonePopover_feedback {
+.o_ActivityMarkDonePopoverContent_feedback {
     min-height: 70px;
 }
diff --git a/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml
new file mode 100644
index 00000000000..cb41e1a2c74
--- /dev/null
+++ b/addons/mail/static/src/components/activity_mark_done_popover_content/activity_mark_done_popover_content.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ActivityMarkDonePopoverContent" owl="1">
+        <t t-if="activityMarkDonePopoverContentView">
+            <div class="o_ActivityMarkDonePopoverContent" t-attf-class="{{ className }}" t-on-keydown="activityMarkDonePopoverContentView.onKeydown" t-ref="root">
+                <h6 class="o_ActivityMarkDonePopoverContent_header p-2 font-weight-bolder bg-200 border-bottom" t-esc="activityMarkDonePopoverContentView.headerText"/>
+                <div class="o_ActivityMarkDonePopoverContent_content py-2 px-3">
+                    <textarea class="form-control o_ActivityMarkDonePopoverContent_feedback" rows="3" placeholder="Write Feedback" t-on-blur="activityMarkDonePopoverContentView.onBlur" t-ref="feedbackTextarea"/>
+                    <div class="o_ActivityMarkDonePopoverContent_buttons">
+                        <button type="button" class="o_ActivityMarkDonePopoverContent_doneScheduleNextButton btn btn-sm btn-primary" t-on-click="activityMarkDonePopoverContentView.onClickDoneAndScheduleNext">
+                            Done &amp; Schedule Next
+                        </button>
+                        <t t-if="activityMarkDonePopoverContentView.activityViewOwner.activity.chaining_type === 'suggest'">
+                            <button type="button" class="o_ActivityMarkDonePopoverContent_doneButton btn btn-sm btn-primary mx-2" t-on-click="activityMarkDonePopoverContentView.onClickDone">
+                                Done
+                            </button>
+                        </t>
+                        <button type="button" class="o_ActivityMarkDonePopoverContent_discardButton btn btn-sm btn-link" t-on-click="activityMarkDonePopoverContentView.onClickDiscard">
+                            Discard
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
index 868c7464d6e..1f0b93725d7 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
@@ -115,18 +115,3 @@
     border-radius: 5px;
     outline: none;
 }
-
-.o_MessagingMenu_tabButton.o-desktop {
-
-    &.o-active {
-        font-weight: bold;
-    }
-
-    &:not(:hover) {
-
-        &:not(.o-active) {
-            color: gray('500');
-        }
-    }
-}
-
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
index 694da89c44b..8dece355832 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -23,13 +23,9 @@
                         <t t-else="">
                             <div class="o_MessagingMenu_dropdownMenuHeader border-bottom" t-att-class="{ 'o-mobile': messaging.device.isSmall }">
                                 <t t-if="!messaging.device.isSmall">
-                                    <t t-foreach="['all', 'chat', 'channel']" t-as="tabId" t-key="tabId">
-                                        <button class="o_MessagingMenu_tabButton o-desktop btn btn-link" t-att-class="{ 'o-active': messagingMenu.activeTabId === tabId, }" t-on-click="messagingMenu.onClickDesktopTabButton" type="button" role="tab" t-att-data-tab-id="tabId">
-                                            <t t-if="tabId === 'all'">All</t>
-                                            <t t-elif="tabId === 'chat'">Chat</t>
-                                            <t t-elif="tabId === 'channel'">Channels</t>
-                                        </button>
-                                    </t>
+                                    <MessagingMenuTab messagingMenuLocalId="messagingMenu.localId" tabId="'all'"/>
+                                    <MessagingMenuTab messagingMenuLocalId="messagingMenu.localId" tabId="'chat'"/>
+                                    <MessagingMenuTab messagingMenuLocalId="messagingMenu.localId" tabId="'channel'"/>
                                 </t>
                                 <t t-if="messaging.device.isSmall">
                                     <t t-call="mail.MessagingMenu.newMessageButton"/>
diff --git a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js
new file mode 100644
index 00000000000..b3b93f63679
--- /dev/null
+++ b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js
@@ -0,0 +1,30 @@
+/** @odoo-module **/
+
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+
+const { Component } = owl;
+
+export class MessagingMenuTab extends Component {
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {MessagingMenu}
+     */
+    get messagingMenu() {
+        return this.messaging && this.messaging.models['MessagingMenu'].get(this.props.messagingMenuLocalId);
+    }
+
+}
+
+Object.assign(MessagingMenuTab, {
+    props: {
+        messagingMenuLocalId: String,
+        tabId: String,
+    },
+    template: 'mail.MessagingMenuTab',
+});
+
+registerMessagingComponent(MessagingMenuTab);
diff --git a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.scss b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.scss
new file mode 100644
index 00000000000..55c299448ba
--- /dev/null
+++ b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.scss
@@ -0,0 +1,13 @@
+.o_MessagingMenuTab.o-desktop {
+
+    &.o-active {
+        font-weight: bold;
+    }
+
+    &:not(:hover) {
+
+        &:not(.o-active) {
+            color: gray('500');
+        }
+    }
+}
\ No newline at end of file
diff --git a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
new file mode 100644
index 00000000000..4921fa1ce15
--- /dev/null
+++ b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.MessagingMenuTab" owl="1">
+        <button class="o_MessagingMenuTab o-desktop btn btn-link" t-att-class="{ 'o-active': messagingMenu.activeTabId === props.tabId, }" t-on-click="messagingMenu.onClickDesktopTabButton" type="button" role="tab" t-att-data-tab-id="props.tabId" t-attf-class="{{ className }}" t-ref="root">
+            <t t-if="props.tabId === 'all'">All</t>
+            <t t-elif="props.tabId === 'chat'">Chat</t>
+            <t t-elif="props.tabId === 'channel'">Channels</t>
+        </button>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
index 635e324a1dd..1cb07a12e4a 100644
--- a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
+++ b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
@@ -19,8 +19,8 @@
                      t-on-click="callParticipantCard.onClick"
                 >
                     <!-- card -->
-                    <t t-if="callParticipantCard.rtcSession and callParticipantCard.rtcSession.videoStream">
-                        <RtcVideo rtcSessionLocalId="callParticipantCard.rtcSession.localId"/>
+                    <t t-if="callParticipantCard.rtcVideoView">
+                        <RtcVideo localId="callParticipantCard.rtcVideoView.localId"/>
                     </t>
                     <t t-else="">
                         <div class="o_RtcCallParticipantCard_avatarFrame mh-100 mw-100 h-100 align-items-center justify-content-center" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized }" draggable="false">
diff --git a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
index 49bb0037059..f858d8b138f 100644
--- a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
+++ b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
@@ -10,9 +10,7 @@
                         <select name="inputDevice" class="o_RtcConfigurationMenu_optionDeviceSelect" t-att-value="messaging.userSetting.audioInputDeviceId" t-on-change="rtcConfigurationMenu.onChangeSelectAudioInput">
                             <option value="">Browser default</option>
                             <t t-if="state.userDevices" t-foreach="state.userDevices" t-as="device" t-key="device_index">
-                                <t t-if="device.kind === 'audioinput'">
-                                    <option t-att-value="device.deviceId"><t t-esc="device.label"/></option>
-                                </t>
+                                <RtcConfigurationMenuDeviceComponent device="device"/>
                             </t>
                         </select>
                     </div>
diff --git a/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.js b/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.js
new file mode 100644
index 00000000000..4c05615e9f7
--- /dev/null
+++ b/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.js
@@ -0,0 +1,14 @@
+/** @odoo-module **/
+
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+
+const { Component } = owl;
+
+export class RtcConfigurationMenuDevice extends Component {}
+
+Object.assign(RtcConfigurationMenuDevice, {
+    props: { device: Object },
+    template: 'mail.RtcConfigurationMenuDevice',
+});
+
+registerMessagingComponent(RtcConfigurationMenuDevice);
diff --git a/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.xml b/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.xml
new file mode 100644
index 00000000000..31882171212
--- /dev/null
+++ b/addons/mail/static/src/components/rtc_configuration_menu_device/rtc_configuration_menu_device.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.RtcConfigurationMenuDeviceComponent" owl="1">
+        <t t-if="props.device.kind === 'audioinput'">
+            <option t-att-value="props.device.deviceId" t-attf-class="{{ className }}" t-ref="root"><t t-esc="props.device.label"/></option>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/rtc_video/rtc_video.js b/addons/mail/static/src/components/rtc_video/rtc_video.js
index e643db4cefe..f00d055dab3 100644
--- a/addons/mail/static/src/components/rtc_video/rtc_video.js
+++ b/addons/mail/static/src/components/rtc_video/rtc_video.js
@@ -20,12 +20,10 @@ export class RtcVideo extends Component {
     //--------------------------------------------------------------------------
 
     /**
-     * @returns {RtcSession|undefined}
+     * @returns {RtcVideoView}
      */
-    get rtcSession() {
-        return this.messaging.models['RtcSession'].get(
-            this.props.rtcSessionLocalId
-        );
+     get rtcVideoView() {
+        return this.messaging && this.messaging.models['RtcVideoView'].get(this.props.localId);
     }
 
     //--------------------------------------------------------------------------
@@ -46,10 +44,13 @@ export class RtcVideo extends Component {
         if (!this.root.el) {
             return;
         }
-        if (!this.rtcSession || !this.rtcSession.videoStream) {
+        if (!this.rtcVideoView) {
+            return;
+        }
+        if (!this.rtcVideoView.rtcSession || !this.rtcVideoView.rtcSession.videoStream) {
             this.root.el.srcObject = undefined;
         } else {
-            this.root.el.srcObject = this.rtcSession.videoStream;
+            this.root.el.srcObject = this.rtcVideoView.rtcSession.videoStream;
         }
         this.root.el.load();
     }
@@ -57,7 +58,7 @@ export class RtcVideo extends Component {
 }
 
 Object.assign(RtcVideo, {
-    props: { rtcSessionLocalId: String },
+    props: { localId: String },
     template: 'mail.RtcVideo',
 });
 
diff --git a/addons/mail/static/src/components/rtc_video/rtc_video.xml b/addons/mail/static/src/components/rtc_video/rtc_video.xml
index 1ac15810dd0..0daa977f86e 100644
--- a/addons/mail/static/src/components/rtc_video/rtc_video.xml
+++ b/addons/mail/static/src/components/rtc_video/rtc_video.xml
@@ -2,13 +2,13 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.RtcVideo" owl="1">
-        <t t-if="rtcSession">
+        <t t-if="rtcVideoView">
             <video class="o_RtcVideo"
                 t-attf-class="{{ className }}"
                 playsinline="true"
                 autoplay="true"
                 muted="true"
-                t-on-loadedmetadata="rtcSession.onVideoLoadedMetaData"
+                t-on-loadedmetadata="rtcVideoView.rtcSession.onVideoLoadedMetaData"
                 t-ref="root"
             />
         </t>
diff --git a/addons/mail/static/src/models/activity_mark_done_popover_view.js b/addons/mail/static/src/models/activity_mark_done_popover_content_view.js
similarity index 66%
rename from addons/mail/static/src/models/activity_mark_done_popover_view.js
rename to addons/mail/static/src/models/activity_mark_done_popover_content_view.js
index 47ea5e973e4..ad4d7a3fa00 100644
--- a/addons/mail/static/src/models/activity_mark_done_popover_view.js
+++ b/addons/mail/static/src/models/activity_mark_done_popover_content_view.js
@@ -2,10 +2,11 @@
 
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
+import { clear, replace } from '@mail/model/model_field_command';
 
 registerModel({
-    name: 'ActivityMarkDonePopoverView',
-    identifyingFields: ['activityViewOwner'],
+    name: 'ActivityMarkDonePopoverContentView',
+    identifyingFields: ['popoverViewOwner'],
     recordMethods: {
         /**
          * Handles blur on this feedback textarea.
@@ -69,16 +70,44 @@ registerModel({
          */
         _close() {
             this._backupFeedback();
-            this.component.trigger('o-popover-close');
+            this.activityViewOwner.update({ markDonePopoverView: clear() });
+        },
+        /**
+         * @private
+         * @returns {FieldCommand}
+         */
+        _computeActivityViewOwner() {
+            if (this.popoverViewOwner.activityViewOwnerAsMarkDone) {
+                return replace(this.popoverViewOwner.activityViewOwnerAsMarkDone);
+            }
+            return clear();
+        },
+        /**
+         * @private
+         * @returns {string|FieldCommand}
+         */
+        _computeHeaderText() {
+            if (this.activityViewOwner) {
+                return this.activityViewOwner.markDoneText;
+            }
+            return clear();
         },
     },
     fields: {
         activityViewOwner: one('ActivityView', {
-            inverse: 'activityMarkDonePopoverView',
+            compute: '_computeActivityViewOwner',
             readonly: true,
-            required: true,
         }),
         component: attr(),
         feedbackTextareaRef: attr(),
+        headerText: attr({
+            compute: '_computeHeaderText',
+            default: '',
+        }),
+        popoverViewOwner: one('PopoverView', {
+            inverse: 'activityMarkDonePopoverContentView',
+            readonly: true,
+            required: true,
+        }),
     },
 });
diff --git a/addons/mail/static/src/models/activity_view.js b/addons/mail/static/src/models/activity_view.js
index dc09a62eaea..ad50978c349 100644
--- a/addons/mail/static/src/models/activity_view.js
+++ b/addons/mail/static/src/models/activity_view.js
@@ -50,6 +50,9 @@ registerModel({
         onClickEdit() {
             this.activity.edit();
         },
+        onClickMarkDoneButton() {
+            this.update({ markDonePopoverView: this.markDonePopoverView ? clear() : insertAndReplace() });
+        },
         /**
          * Handles the click on the upload document button. This open the file
          * explorer for upload.
@@ -165,11 +168,6 @@ registerModel({
             readonly: true,
             required: true,
         }),
-        activityMarkDonePopoverView: one('ActivityMarkDonePopoverView', {
-            default: insertAndReplace(),
-            inverse: 'activityViewOwner',
-            isCausal: true,
-        }),
         /**
          * Determines whether the details are visible.
          */
@@ -223,6 +221,11 @@ registerModel({
             inverse: 'activityViewOwner',
             isCausal: true,
         }),
+        markDoneButtonRef: attr(),
+        markDonePopoverView: one('PopoverView', {
+            inverse: 'activityViewOwnerAsMarkDone',
+            isCausal: true,
+        }),
         /**
          * Label for mark as done. This is just for translations purpose.
          */
diff --git a/addons/mail/static/src/models/popover_view.js b/addons/mail/static/src/models/popover_view.js
index c8d6488b554..c360553926c 100644
--- a/addons/mail/static/src/models/popover_view.js
+++ b/addons/mail/static/src/models/popover_view.js
@@ -6,7 +6,7 @@ import { clear, insertAndReplace, replace } from '@mail/model/model_field_comman
 
 registerModel({
     name: 'PopoverView',
-    identifyingFields: [['composerViewOwnerAsEmoji', 'messageActionListOwnerAsReaction', 'threadViewTopbarOwnerAsInvite']],
+    identifyingFields: [['activityViewOwnerAsMarkDone', 'composerViewOwnerAsEmoji', 'messageActionListOwnerAsReaction', 'threadViewTopbarOwnerAsInvite']],
     lifecycleHooks: {
         _created() {
             document.addEventListener('click', this._onClickCaptureGlobal, true);
@@ -26,11 +26,24 @@ registerModel({
         contains(element) {
             return Boolean(this.component && this.component.root.el.contains(element));
         },
+        /**
+         * @private
+         * @returns {FieldCommand}
+         */
+        _computeActivityMarkDonePopoverContentView() {
+            if (this.activityViewOwnerAsMarkDone) {
+                return insertAndReplace();
+            }
+            return clear();
+        },
         /**
          * @private
          * @returns {Ref}
          */
         _computeAnchorRef() {
+            if (this.activityViewOwnerAsMarkDone) {
+                return this.activityViewOwnerAsMarkDone.markDoneButtonRef;
+            }
             if (this.threadViewTopbarOwnerAsInvite) {
                 return this.threadViewTopbarOwnerAsInvite.inviteButtonRef;
             }
@@ -57,6 +70,9 @@ registerModel({
          * @returns {FieldCommand}
          */
         _computeContent() {
+            if (this.activityMarkDonePopoverContentView) {
+                return replace(this.activityMarkDonePopoverContentView);
+            }
             if (this.channelInvitationForm) {
                 return replace(this.channelInvitationForm);
             }
@@ -83,6 +99,9 @@ registerModel({
          * @returns {string|FieldCommand}
          */
         _computeContentComponentName() {
+            if (this.activityMarkDonePopoverContentView) {
+                return 'ActivityMarkDonePopoverContent';
+            }
             if (this.channelInvitationForm) {
                 return 'ChannelInvitationForm';
             }
@@ -109,6 +128,9 @@ registerModel({
          * @returns {string}
          */
         _computePosition() {
+            if (this.activityViewOwnerAsMarkDone) {
+                return 'right';
+            }
             if (this.threadViewTopbarOwnerAsInvite) {
                 return 'bottom';
             }
@@ -140,6 +162,16 @@ registerModel({
         },
     },
     fields: {
+        activityMarkDonePopoverContentView: one('ActivityMarkDonePopoverContentView', {
+            compute: '_computeActivityMarkDonePopoverContentView',
+            inverse: 'popoverViewOwner',
+            isCausal: true,
+            readonly: true,
+        }),
+        activityViewOwnerAsMarkDone: one('ActivityView', {
+            inverse: 'markDonePopoverView',
+            readonly: true,
+        }),
         /**
          * HTML element that is used as anchor position for this popover view.
          */
diff --git a/addons/mail/static/src/models/rtc_call_participant_card.js b/addons/mail/static/src/models/rtc_call_participant_card.js
index ad6261b6fa7..9989c96d8f6 100644
--- a/addons/mail/static/src/models/rtc_call_participant_card.js
+++ b/addons/mail/static/src/models/rtc_call_participant_card.js
@@ -2,6 +2,7 @@
 
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
+import { clear, insertAndReplace } from '@mail/model/model_field_command';
 import { isEventHandled, markEventHandled } from '@mail/utils/utils';
 
 import { sprintf } from '@web/core/utils/strings';
@@ -158,6 +159,16 @@ registerModel({
                 },
             );
         },
+        /**
+         * @private
+         * @returns {FieldCommand}
+         */
+        _computeRtcVideoView() {
+            if (this.rtcSession && this.rtcSession.videoStream) {
+                return insertAndReplace();
+            }
+            return clear();
+        },
     },
     fields: {
         /**
@@ -249,6 +260,11 @@ registerModel({
          * If set, this card represents a rtcSession.
          */
         rtcSession: one('RtcSession'),
+        rtcVideoView: one('RtcVideoView', {
+            compute: '_computeRtcVideoView',
+            inverse: 'rtcCallParticipantCardOwner',
+            isCausal: true,
+        }),
         volumeMenuAnchorRef: attr(),
     },
 });
diff --git a/addons/mail/static/src/models/rtc_video_view.js b/addons/mail/static/src/models/rtc_video_view.js
new file mode 100644
index 00000000000..ad92c5c401b
--- /dev/null
+++ b/addons/mail/static/src/models/rtc_video_view.js
@@ -0,0 +1,33 @@
+/** @odoo-module **/
+
+import { registerModel } from '@mail/model/model_core';
+import { one } from '@mail/model/model_field';
+import { clear, replace } from '@mail/model/model_field_command';
+
+registerModel({
+    name: 'RtcVideoView',
+    identifyingFields: ['rtcCallParticipantCardOwner'],
+    recordMethods: {
+        /**
+         * @private
+         * @returns {FieldCommand}
+         */
+        _computeRtcSession() {
+            if (this.rtcCallParticipantCardOwner.rtcSession) {
+                return replace(this.rtcCallParticipantCardOwner.rtcSession);
+            }
+            return clear();
+        },
+    },
+    fields: {
+        rtcCallParticipantCardOwner: one('RtcCallParticipantCard', {
+            inverse: 'rtcVideoView',
+            readonly: true,
+            required: true,
+        }),
+        rtcSession: one('RtcSession', {
+            compute: '_computeRtcSession',
+            readonly: true,
+        }),
+    },
+});
diff --git a/addons/mail/static/tests/qunit_suite_tests/components/activity_mark_done_popover_tests.js b/addons/mail/static/tests/qunit_suite_tests/components/activity_mark_done_popover_tests.js
index 4cc2c3aadf4..439caa68327 100644
--- a/addons/mail/static/tests/qunit_suite_tests/components/activity_mark_done_popover_tests.js
+++ b/addons/mail/static/tests/qunit_suite_tests/components/activity_mark_done_popover_tests.js
@@ -28,32 +28,32 @@ QUnit.test('activity mark done popover simplest layout', async function (assert)
 
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "Popover component should be present"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_feedback',
+        '.o_ActivityMarkDonePopoverContent_feedback',
         "Popover component should contain the feedback textarea"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_buttons',
+        '.o_ActivityMarkDonePopoverContent_buttons',
         "Popover component should contain the action buttons"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_doneScheduleNextButton',
+        '.o_ActivityMarkDonePopoverContent_doneScheduleNextButton',
         "Popover component should contain the done & schedule next button"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_doneButton',
+        '.o_ActivityMarkDonePopoverContent_doneButton',
         "Popover component should contain the done button"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_discardButton',
+        '.o_ActivityMarkDonePopoverContent_discardButton',
         "Popover component should contain the discard button"
     );
 });
@@ -79,32 +79,32 @@ QUnit.test('activity with force next mark done popover simplest layout', async f
 
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "Popover component should be present"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_feedback',
+        '.o_ActivityMarkDonePopoverContent_feedback',
         "Popover component should contain the feedback textarea"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_buttons',
+        '.o_ActivityMarkDonePopoverContent_buttons',
         "Popover component should contain the action buttons"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_doneScheduleNextButton',
+        '.o_ActivityMarkDonePopoverContent_doneScheduleNextButton',
         "Popover component should contain the done & schedule next button"
     );
     assert.containsNone(
         document.body,
-        '.o_ActivityMarkDonePopover_doneButton',
+        '.o_ActivityMarkDonePopoverContent_doneButton',
         "Popover component should NOT contain the done button"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_discardButton',
+        '.o_ActivityMarkDonePopoverContent_discardButton',
         "Popover component should contain the discard button"
     );
 });
@@ -143,7 +143,7 @@ QUnit.test('activity mark done popover mark done without feedback', async functi
         threadModel: 'res.partner',
     });
     await click('.o_Activity_markDoneButton');
-    await click('.o_ActivityMarkDonePopover_doneButton');
+    await click('.o_ActivityMarkDonePopoverContent_doneButton');
     assert.verifySteps(
         ['action_feedback'],
         "Mark done and schedule next button should call the right rpc"
@@ -185,10 +185,10 @@ QUnit.test('activity mark done popover mark done with feedback', async function
     });
     await click('.o_Activity_markDoneButton');
 
-    let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopover_feedback');
+    let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopoverContent_feedback');
     feedbackTextarea.focus();
     document.execCommand('insertText', false, 'This task is done');
-    document.querySelector('.o_ActivityMarkDonePopover_doneButton').click();
+    document.querySelector('.o_ActivityMarkDonePopoverContent_doneButton').click();
     assert.verifySteps(
         ['action_feedback'],
         "Mark done and schedule next button should call the right rpc"
@@ -235,10 +235,10 @@ QUnit.test('activity mark done popover mark done and schedule next', async funct
     });
     await click('.o_Activity_markDoneButton');
 
-    let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopover_feedback');
+    let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopoverContent_feedback');
     feedbackTextarea.focus();
     document.execCommand('insertText', false, 'This task is done');
-    await click('.o_ActivityMarkDonePopover_doneScheduleNextButton');
+    await click('.o_ActivityMarkDonePopoverContent_doneScheduleNextButton');
     assert.verifySteps(
         ['action_feedback_schedule_next'],
         "Mark done and schedule next button should call the right rpc and not trigger an action"
@@ -280,7 +280,7 @@ QUnit.test('[technical] activity mark done & schedule next with new action', asy
     });
     await click('.o_Activity_markDoneButton');
 
-    await click('.o_ActivityMarkDonePopover_doneScheduleNextButton');
+    await click('.o_ActivityMarkDonePopoverContent_doneScheduleNextButton');
     assert.verifySteps(
         ['activity_action'],
         "The action returned by the route should be executed"
diff --git a/addons/mail/static/tests/qunit_suite_tests/components/activity_tests.js b/addons/mail/static/tests/qunit_suite_tests/components/activity_tests.js
index d2ee13967e8..794e749d542 100644
--- a/addons/mail/static/tests/qunit_suite_tests/components/activity_tests.js
+++ b/addons/mail/static/tests/qunit_suite_tests/components/activity_tests.js
@@ -771,14 +771,14 @@ QUnit.test('activity click on mark as done', async function (assert) {
 
     await click('.o_Activity_markDoneButton');
     assert.strictEqual(
-        document.querySelectorAll('.o_ActivityMarkDonePopover').length,
+        document.querySelectorAll('.o_ActivityMarkDonePopoverContent').length,
         1,
         "should have opened the mark done popover"
     );
 
     await click('.o_Activity_markDoneButton');
     assert.strictEqual(
-        document.querySelectorAll('.o_ActivityMarkDonePopover').length,
+        document.querySelectorAll('.o_ActivityMarkDonePopoverContent').length,
         0,
         "should have closed the mark done popover"
     );
@@ -815,7 +815,7 @@ QUnit.test('activity mark as done popover should focus feedback input on open [R
 
     await click('.o_Activity_markDoneButton');
     assert.strictEqual(
-        document.querySelector('.o_ActivityMarkDonePopover_feedback'),
+        document.querySelector('.o_ActivityMarkDonePopoverContent_feedback'),
         document.activeElement,
         "the popover textarea should have the focus"
     );
@@ -1051,17 +1051,17 @@ QUnit.test('activity mark done popover close on ESCAPE', async function (assert)
     await click('.o_Activity_markDoneButton');
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "Popover component should be present"
     );
 
     await afterNextRender(() => {
         const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" });
-        document.querySelector(`.o_ActivityMarkDonePopover`).dispatchEvent(ev);
+        document.querySelector(`.o_ActivityMarkDonePopoverContent`).dispatchEvent(ev);
     });
     assert.containsNone(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "ESCAPE pressed should have closed the mark done popover"
     );
 });
@@ -1090,18 +1090,18 @@ QUnit.test('activity mark done popover click on discard', async function (assert
     await click('.o_Activity_markDoneButton');
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "Popover component should be present"
     );
     assert.containsOnce(
         document.body,
-        '.o_ActivityMarkDonePopover_discardButton',
+        '.o_ActivityMarkDonePopoverContent_discardButton',
         "Popover component should contain the discard button"
     );
-    await click('.o_ActivityMarkDonePopover_discardButton');
+    await click('.o_ActivityMarkDonePopoverContent_discardButton');
     assert.containsNone(
         document.body,
-        '.o_ActivityMarkDonePopover',
+        '.o_ActivityMarkDonePopoverContent',
         "Discard button clicked should have closed the mark done popover"
     );
 });
diff --git a/addons/mail/static/tests/qunit_suite_tests/components/messaging_menu_tests.js b/addons/mail/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
index 25781f8b59e..995438c96df 100644
--- a/addons/mail/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
+++ b/addons/mail/static/tests/qunit_suite_tests/components/messaging_menu_tests.js
@@ -160,41 +160,41 @@ QUnit.test('basic rendering', async function (assert) {
     assert.strictEqual(
         document.querySelectorAll(`
             .o_MessagingMenu_dropdownMenuHeader
-            .o_MessagingMenu_tabButton
+            .o_MessagingMenuTab
         `).length,
         3,
         "should have 3 tab buttons to filter items in the header"
     );
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="all"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="all"]`).length,
         1,
         "1 tab button should be 'All'"
     );
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="chat"]`).length,
         1,
         "1 tab button should be 'Chat'"
     );
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="channel"]`).length,
         1,
         "1 tab button should be 'Channels'"
     );
     assert.ok(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="all"]
+            .o_MessagingMenuTab[data-tab-id="all"]
         `).classList.contains('o-active'),
         "'all' tab button should be active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+            .o_MessagingMenuTab[data-tab-id="chat"]
         `).classList.contains('o-active'),
         "'chat' tab button should not be active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+            .o_MessagingMenuTab[data-tab-id="channel"]
         `).classList.contains('o-active'),
         "'channel' tab button should not be active"
     );
@@ -268,95 +268,95 @@ QUnit.test('switch tab', async function (assert) {
 
     await click(`.o_MessagingMenu_toggler`);
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="all"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="all"]`).length,
         1,
         "1 tab button should be 'All'"
     );
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="chat"]`).length,
         1,
         "1 tab button should be 'Chat'"
     );
     assert.strictEqual(
-        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`).length,
+        document.querySelectorAll(`.o_MessagingMenuTab[data-tab-id="channel"]`).length,
         1,
         "1 tab button should be 'Channels'"
     );
     assert.ok(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="all"]
+            .o_MessagingMenuTab[data-tab-id="all"]
         `).classList.contains('o-active'),
         "'all' tab button should be active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+            .o_MessagingMenuTab[data-tab-id="chat"]
         `).classList.contains('o-active'),
         "'chat' tab button should not be active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+            .o_MessagingMenuTab[data-tab-id="channel"]
         `).classList.contains('o-active'),
         "'channel' tab button should not be active"
     );
 
-    await click(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`);
+    await click(`.o_MessagingMenuTab[data-tab-id="chat"]`);
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="all"]
+            .o_MessagingMenuTab[data-tab-id="all"]
         `).classList.contains('o-active'),
         "'all' tab button should become inactive"
     );
     assert.ok(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+            .o_MessagingMenuTab[data-tab-id="chat"]
         `).classList.contains('o-active'),
         "'chat' tab button should not become active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+            .o_MessagingMenuTab[data-tab-id="channel"]
         `).classList.contains('o-active'),
         "'channel' tab button should stay inactive"
     );
 
-    await click(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`);
+    await click(`.o_MessagingMenuTab[data-tab-id="channel"]`);
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="all"]
+            .o_MessagingMenuTab[data-tab-id="all"]
         `).classList.contains('o-active'),
         "'all' tab button should stay active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+            .o_MessagingMenuTab[data-tab-id="chat"]
         `).classList.contains('o-active'),
         "'chat' tab button should become inactive"
     );
     assert.ok(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+            .o_MessagingMenuTab[data-tab-id="channel"]
         `).classList.contains('o-active'),
         "'channel' tab button should become active"
     );
 
-    await click(`.o_MessagingMenu_tabButton[data-tab-id="all"]`);
+    await click(`.o_MessagingMenuTab[data-tab-id="all"]`);
     assert.ok(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="all"]
+            .o_MessagingMenuTab[data-tab-id="all"]
         `).classList.contains('o-active'),
         "'all' tab button should become active"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+            .o_MessagingMenuTab[data-tab-id="chat"]
         `).classList.contains('o-active'),
         "'chat' tab button should stay inactive"
     );
     assert.notOk(
         document.querySelector(`
-            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+            .o_MessagingMenuTab[data-tab-id="channel"]
         `).classList.contains('o-active'),
         "'channel' tab button should become inactive"
     );
@@ -563,7 +563,7 @@ QUnit.test('filtered previews', async function (assert) {
         "should have preview of channel"
     );
 
-    await click('.o_MessagingMenu_tabButton[data-tab-id="chat"]');
+    await click('.o_MessagingMenuTab[data-tab-id="chat"]');
     assert.strictEqual(
         document.querySelectorAll(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).length,
         1,
@@ -596,7 +596,7 @@ QUnit.test('filtered previews', async function (assert) {
         "should not have preview of channel"
     );
 
-    await click('.o_MessagingMenu_tabButton[data-tab-id="channel"]');
+    await click('.o_MessagingMenuTab[data-tab-id="channel"]');
     assert.strictEqual(
         document.querySelectorAll(`
             .o_MessagingMenu_dropdownMenu
@@ -632,7 +632,7 @@ QUnit.test('filtered previews', async function (assert) {
         "should have preview of channel"
     );
 
-    await click('.o_MessagingMenu_tabButton[data-tab-id="all"]');
+    await click('.o_MessagingMenuTab[data-tab-id="all"]');
     assert.strictEqual(
         document.querySelectorAll(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).length,
         2,
@@ -954,7 +954,7 @@ QUnit.test('Group chat should be displayed inside the chat section of the messag
     await createMessagingMenuComponent();
 
     await click('.o_MessagingMenu_toggler');
-    await click(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`);
+    await click(`.o_MessagingMenuTab[data-tab-id="chat"]`);
 
     assert.strictEqual(
         document.querySelectorAll(`