From a4dc7a3d8ec46b56b9be121311ed0ce7c2b82e2b Mon Sep 17 00:00:00 2001
From: tsm-odoo <tsm@odoo.com>
Date: Wed, 25 May 2022 09:47:13 +0000
Subject: [PATCH] [IMP] mail: wrap top level components into containers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Top level components should always be wrapped in containers since they have to receive
a record comming from messaging. To do that, we need to wait for messaging to be initialized.
In the PR introducing the new environment in the discuss app, some of those components will
be passed to the main_component registry, messaging won't be ready yet. In order to ease the
transition, the last components missing a wrapper have been wrapped.

task-2582313

closes odoo/odoo#92402

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../components/chat_window/chat_window.scss   |   1 +
 .../chat_window_manager.js                    |   2 +-
 .../chat_window_manager.scss                  |   7 --
 .../chat_window_manager.xml                   |  14 +--
 .../chat_window_manager_container.js          |  27 ++++
 .../chat_window_manager_container.xml         |   6 +
 .../dialog_manager/dialog_manager.js          |  10 +-
 .../dialog_manager/dialog_manager.xml         |  12 +-
 .../dialog_manager_container.js               |  27 ++++
 .../dialog_manager_container.xml              |   6 +
 .../discuss_public_view_container.js          |  32 +++++
 .../discuss_public_view_container.xml         |  11 ++
 addons/mail/static/src/main.js                |  10 +-
 .../static/src/public/discuss_public_boot.js  |  32 ++---
 .../chat_window_service.js                    |  78 ------------
 .../services/dialog_service/dialog_service.js |  78 ------------
 .../mail/static/tests/helpers/test_utils.js   | 116 +++++-------------
 .../components/chat_window_manager_tests.js   |  14 +--
 .../components/dialog_manager_tests.js        |  19 +--
 addons/project/__manifest__.py                |   2 -
 20 files changed, 190 insertions(+), 314 deletions(-)
 delete mode 100644 addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss
 create mode 100644 addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.js
 create mode 100644 addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.xml
 create mode 100644 addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.js
 create mode 100644 addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.xml
 create mode 100644 addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.js
 create mode 100644 addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.xml
 delete mode 100644 addons/mail/static/src/services/chat_window_service/chat_window_service.js
 delete mode 100644 addons/mail/static/src/services/dialog_service/dialog_service.js

diff --git a/addons/mail/static/src/components/chat_window/chat_window.scss b/addons/mail/static/src/components/chat_window/chat_window.scss
index 8f0479147cc..ef1e9b42d09 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.scss
+++ b/addons/mail/static/src/components/chat_window/chat_window.scss
@@ -4,6 +4,7 @@
 
 .o_ChatWindow {
     overflow: auto;
+    z-index: $zindex-dropdown;
 
     &:not(.o-isDeviceSmall) {
         width: 325px;
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js
index 57794aa1b41..a0694ebd91f 100644
--- a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js
+++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js
@@ -7,7 +7,7 @@ const { Component } = owl;
 export class ChatWindowManager extends Component {}
 
 Object.assign(ChatWindowManager, {
-    props: {},
+    props: { record: Object },
     template: 'mail.ChatWindowManager',
 });
 
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss
deleted file mode 100644
index 4bf512a6603..00000000000
--- a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_ChatWindowManager {
-    z-index: $zindex-dropdown;
-}
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 23a53d895a6..e733d7b8897 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
@@ -3,14 +3,12 @@
 
     <t t-name="mail.ChatWindowManager" owl="1">
         <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.visual.hidden.isVisible">
-                    <ChatWindowHiddenMenu className="'o_ChatWindowManager_hiddenMenu'"/>
-                </t>
-                <t t-foreach="messaging.chatWindowManager.allOrderedVisible" t-as="chatWindow" t-key="chatWindow.localId">
-                    <ChatWindow record="chatWindow"/>
-                </t>
+            <!-- Note: DOM elements are ordered from left to right -->
+            <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">
+                <ChatWindow record="chatWindow"/>
             </t>
         </div>
     </t>
diff --git a/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.js b/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.js
new file mode 100644
index 00000000000..5eae2bd09ca
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.js
@@ -0,0 +1,27 @@
+/** @odoo-module **/
+
+import { useModels } from '@mail/component_hooks/use_models';
+// ensure components are registered beforehand.
+import '@mail/components/chat_window_manager/chat_window_manager';
+import { getMessagingComponent } from "@mail/utils/messaging_component";
+
+const { Component, useSubEnv } = owl;
+
+export class ChatWindowManagerContainer extends Component {
+
+    /**
+     * @override
+     */
+    setup() {
+        // for now, the legacy env is needed for internal functions such as
+        // `useModels` to work
+        useSubEnv(Component.env);
+        useModels();
+        super.setup();
+    }
+}
+
+Object.assign(ChatWindowManagerContainer, {
+    components: { ChatWindowManager: getMessagingComponent('ChatWindowManager') },
+    template: 'mail.ChatWindowManagerContainer',
+});
diff --git a/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.xml b/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.xml
new file mode 100644
index 00000000000..a7ddd7d94d1
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="mail.ChatWindowManagerContainer" owl="1">
+        <ChatWindowManager t-if="messaging and messaging.chatWindowManager" record="messaging.chatWindowManager"/>     
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.js b/addons/mail/static/src/components/dialog_manager/dialog_manager.js
index f0e0d635cf5..f821053eae6 100644
--- a/addons/mail/static/src/components/dialog_manager/dialog_manager.js
+++ b/addons/mail/static/src/components/dialog_manager/dialog_manager.js
@@ -23,6 +23,14 @@ export class DialogManager extends Component {
         this._checkDialogOpen();
     }
 
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    get dialogManager() {
+        return this.props.record;
+    }
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
@@ -44,7 +52,7 @@ export class DialogManager extends Component {
 }
 
 Object.assign(DialogManager, {
-    props: {},
+    props: { record: Object },
     template: 'mail.DialogManager',
 });
 
diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.xml b/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
index 85fc6bf8c7c..94542c93adc 100644
--- a/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
+++ b/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
@@ -3,13 +3,11 @@
 
     <t t-name="mail.DialogManager" owl="1">
         <div class="o_DialogManager" t-attf-class="{{ className }}" t-ref="root">
-            <t t-if="messaging and messaging.dialogManager">
-                <t t-foreach="messaging.dialogManager.dialogs" t-as="dialog" t-key="dialog.localId">
-                    <Dialog
-                        className="'o_DialogManager_dialog'"
-                        record="dialog"
-                    />
-                </t>
+            <t t-foreach="dialogManager.dialogs" t-as="dialog" t-key="dialog.localId">
+                <Dialog
+                    className="'o_DialogManager_dialog'"
+                    record="dialog"
+                />
             </t>
         </div>
     </t>
diff --git a/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.js b/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.js
new file mode 100644
index 00000000000..64f1a40bafa
--- /dev/null
+++ b/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.js
@@ -0,0 +1,27 @@
+/** @odoo-module **/
+
+import { useModels } from '@mail/component_hooks/use_models';
+// ensure components are registered beforehand.
+import '@mail/components/dialog_manager/dialog_manager';
+import { getMessagingComponent } from "@mail/utils/messaging_component";
+
+const { Component, useSubEnv } = owl;
+
+export class DialogManagerContainer extends Component {
+
+    /**
+     * @override
+     */
+    setup() {
+        // for now, the legacy env is needed for internal functions such as
+        // `useModels` to work
+        useSubEnv(Component.env);
+        useModels();
+        super.setup();
+    }
+}
+
+Object.assign(DialogManagerContainer, {
+    components: { DialogManager: getMessagingComponent('DialogManager') },
+    template: 'mail.DialogManagerContainer',
+});
diff --git a/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.xml b/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.xml
new file mode 100644
index 00000000000..1f730a30ae0
--- /dev/null
+++ b/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="mail.DialogManagerContainer" owl="1">
+        <DialogManager t-if="messaging and messaging.dialogManager" record="messaging.dialogManager"/>     
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.js b/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.js
new file mode 100644
index 00000000000..9373574c03f
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.js
@@ -0,0 +1,32 @@
+/** @odoo-module **/
+
+import { useModels } from '@mail/component_hooks/use_models';
+// ensure components are registered beforehand.
+import '@mail/components/discuss_public_view/discuss_public_view';
+import { getMessagingComponent } from "@mail/utils/messaging_component";
+
+const { Component, useSubEnv } = owl;
+
+export class DiscussPublicViewContainer extends Component {
+
+    /**
+     * @override
+     */
+    setup() {
+        // for now, the legacy env is needed for internal functions such as
+        // `useModels` to work
+        useSubEnv(Component.env);
+        useModels();
+        super.setup();
+    }
+
+    get discussPublicView() {
+        return this.messaging.models['DiscussPublicView'].findFromIdentifyingData(this.messaging);
+    }
+
+}
+
+Object.assign(DiscussPublicViewContainer, {
+    components: { DiscussPublicView: getMessagingComponent('DiscussPublicView') },
+    template: 'mail.DiscussPublicViewContainer',
+});
diff --git a/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.xml b/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.xml
new file mode 100644
index 00000000000..690bb3bc247
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="mail.DiscussPublicViewContainer" owl="1">
+        <div class="o_DiscussPublicViewContainer position-absolute h-100 w-100">
+            <DiscussPublicView t-if="messaging and messaging.isInitialized" record="discussPublicView"/>
+            <div t-else="" class="h-100 d-flex justify-content-center align-items-center">
+                <i class="o_DiscussPublicViewContainer_spinner fa fa-circle-o-notch fa-spin mx-2" title="Please wait..."/>
+            </div>        
+        </div>
+    </t>
+</templates>
diff --git a/addons/mail/static/src/main.js b/addons/mail/static/src/main.js
index a40e45549c3..04e5c66b4a2 100644
--- a/addons/mail/static/src/main.js
+++ b/addons/mail/static/src/main.js
@@ -1,16 +1,18 @@
 /** @odoo-module **/
 
-import { ChatWindowService } from '@mail/services/chat_window_service/chat_window_service';
-import { DialogService } from '@mail/services/dialog_service/dialog_service';
+import { ChatWindowManagerContainer } from '@mail/components/chat_window_manager_container/chat_window_manager_container';
+import { DialogManagerContainer } from '@mail/components/dialog_manager_container/dialog_manager_container';
 import { MessagingService } from '@mail/services/messaging/messaging';
 import { SystrayService } from '@mail/services/systray_service/systray_service';
 import { DiscussWidget } from '@mail/widgets/discuss/discuss';
 
 import { serviceRegistry, action_registry } from 'web.core';
+import { registry } from '@web/core/registry';
 
-serviceRegistry.add('chat_window', ChatWindowService);
-serviceRegistry.add('dialog', DialogService);
 serviceRegistry.add('messaging', MessagingService);
 serviceRegistry.add('systray_service', SystrayService);
 
 action_registry.add('mail.widgets.discuss', DiscussWidget);
+
+registry.category('main_components').add('DialogManagerContainer', { Component: DialogManagerContainer });
+registry.category('main_components').add('ChatWindowManagerContainer', { Component: ChatWindowManagerContainer });
diff --git a/addons/mail/static/src/public/discuss_public_boot.js b/addons/mail/static/src/public/discuss_public_boot.js
index 453c1d19ae1..88c3fa69614 100644
--- a/addons/mail/static/src/public/discuss_public_boot.js
+++ b/addons/mail/static/src/public/discuss_public_boot.js
@@ -2,11 +2,9 @@
 
 import { data } from 'mail.discuss_public_channel_template';
 
-// ensure components are registered beforehand.
-import '@mail/components/dialog_manager/dialog_manager';
-import '@mail/components/discuss_public_view/discuss_public_view';
+import { DialogManagerContainer } from '@mail/components/dialog_manager_container/dialog_manager_container';
+import { DiscussPublicViewContainer } from '@mail/components/discuss_public_view_container/discuss_public_view_container';
 import { MessagingService } from '@mail/services/messaging/messaging';
-import { getMessagingComponent } from '@mail/utils/messaging_component';
 
 import { processTemplates } from '@web/core/assets';
 import { MainComponentsContainer } from '@web/core/main_components_container';
@@ -40,6 +38,12 @@ Component.env = legacyEnv;
     serviceRegistry.add('legacy_notification', makeLegacyNotificationService(Component.env));
     serviceRegistry.add('legacy_crash_manager', makeLegacyCrashManagerService(Component.env));
     serviceRegistry.add('legacy_dialog_mapping', makeLegacyDialogMappingService(Component.env));
+
+    const mainComponentsRegistry = registry.category('main_components');
+    mainComponentsRegistry.add('DiscussPublicViewContainer', { Component: DiscussPublicViewContainer });
+    // needed by the attachment viewer
+    mainComponentsRegistry.add('DialogManagerContainer', { Component: DialogManagerContainer });
+
     await legacySession.is_bound;
     Object.assign(odoo, {
         info: {
@@ -63,18 +67,11 @@ Component.env = legacyEnv;
         },
     }));
     await mount(MainComponentsContainer, document.body, { env, templates, dev: env.debug });
-    createAndMountDiscussPublicView(templates);
+    createDiscussPublicView();
 })();
 
-async function createAndMountDiscussPublicView(templates) {
+async function createDiscussPublicView() {
     const messaging = await Component.env.services.messaging.get();
-    // needed by the attachment viewer
-    const DialogManager = getMessagingComponent('DialogManager');
-    await mount(DialogManager, document.body, {
-        templates,
-        env: Component.env,
-        dev: Component.env.isDebug(),
-    });
     messaging.models['Thread'].insert(messaging.models['Thread'].convertData(data.channelData));
     const discussPublicView = messaging.models['DiscussPublicView'].create(data.discussPublicViewData);
     if (discussPublicView.shouldDisplayWelcomeViewInitially) {
@@ -82,13 +79,4 @@ async function createAndMountDiscussPublicView(templates) {
     } else {
         discussPublicView.switchToThreadView();
     }
-    const DiscussPublicView = getMessagingComponent('DiscussPublicView');
-    await mount(DiscussPublicView, document.body, {
-        templates,
-        env: Component.env,
-        dev: Component.env.isDebug(),
-        props: {
-            record: discussPublicView,
-        },
-    });
 }
diff --git a/addons/mail/static/src/services/chat_window_service/chat_window_service.js b/addons/mail/static/src/services/chat_window_service/chat_window_service.js
deleted file mode 100644
index 5017674a52f..00000000000
--- a/addons/mail/static/src/services/chat_window_service/chat_window_service.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/** @odoo-module **/
-
-// ensure component is registered beforehand.
-import '@mail/components/chat_window_manager/chat_window_manager';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
-
-import AbstractService from 'web.AbstractService';
-import { bus } from 'web.core';
-
-const { App } = owl;
-
-export const ChatWindowService = AbstractService.extend({
-    dependencies: ['messaging'],
-    /**
-     * @override {web.AbstractService}
-     */
-    start() {
-        this._super(...arguments);
-        this._listenHomeMenu();
-    },
-    /**
-     * @private
-     */
-    destroy() {
-        if (this.app) {
-            this.app.destroy();
-            this.app = undefined;
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @returns {Node}
-     */
-    _getParentNode() {
-        return document.querySelector('body');
-    },
-    /**
-     * @private
-     */
-    _listenHomeMenu() {
-        bus.on('web_client_ready', this, this._onWebClientReady.bind(this));
-    },
-    /**
-     * @private
-     */
-    async _mount() {
-        if (this.app) {
-            this.app.destroy();
-            this.app = undefined;
-        }
-        const ChatWindowManagerComponent = getMessagingComponent("ChatWindowManager");
-        this.app = new App(ChatWindowManagerComponent, {
-            templates: window.__OWL_TEMPLATES__,
-            env: owl.Component.env,
-            dev: owl.Component.env.isDebug(),
-            translateFn: owl.Component.env._t,
-            translatableAttributes: ["data-tooltip"],
-        });
-        const parentNode = this._getParentNode();
-        await this.app.mount(parentNode);
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    async _onWebClientReady() {
-        await this._mount();
-    },
-});
diff --git a/addons/mail/static/src/services/dialog_service/dialog_service.js b/addons/mail/static/src/services/dialog_service/dialog_service.js
deleted file mode 100644
index bba424f3778..00000000000
--- a/addons/mail/static/src/services/dialog_service/dialog_service.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/** @odoo-module **/
-
-// ensure component is registered beforehand.
-import '@mail/components/dialog_manager/dialog_manager';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
-
-import AbstractService from 'web.AbstractService';
-import { bus } from 'web.core';
-
-const { App } = owl;
-
-export const DialogService = AbstractService.extend({
-    dependencies: ['messaging'],
-    /**
-     * @override {web.AbstractService}
-     */
-    start() {
-        this._super(...arguments);
-        this._listenHomeMenu();
-    },
-    /**
-     * @private
-     */
-    destroy() {
-        if (this.app) {
-            this.app.destroy();
-            this.app = undefined;
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @returns {Node}
-     */
-    _getParentNode() {
-        return document.querySelector('body');
-    },
-    /**
-     * @private
-     */
-    _listenHomeMenu() {
-        bus.on('web_client_ready', this, this._onWebClientReady.bind(this));
-    },
-    /**
-     * @private
-     */
-    async _mount() {
-        if (this.app) {
-            this.app.destroy();
-            this.app = undefined;
-        }
-        const DialogManagerComponent = getMessagingComponent("DialogManager");
-        this.app = new App(DialogManagerComponent, {
-            templates: window.__OWL_TEMPLATES__,
-            env: owl.Component.env,
-            dev: owl.Component.env.isDebug(),
-            translateFn: owl.Component.env._t,
-            translatableAttributes: ["data-tooltip"],
-        });
-        const parentNode = this._getParentNode();
-        await this.app.mount(parentNode);
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    async _onWebClientReady() {
-        await this._mount();
-    }
-});
diff --git a/addons/mail/static/tests/helpers/test_utils.js b/addons/mail/static/tests/helpers/test_utils.js
index f196f8ace8c..c354fcf3647 100644
--- a/addons/mail/static/tests/helpers/test_utils.js
+++ b/addons/mail/static/tests/helpers/test_utils.js
@@ -2,12 +2,12 @@
 
 import BusService from 'bus.BusService';
 
+import { DialogManagerContainer } from '@mail/components/dialog_manager_container/dialog_manager_container';
+import { ChatWindowManagerContainer } from '@mail/components/chat_window_manager_container/chat_window_manager_container';
 import { MessagingMenuContainer } from '@mail/components/messaging_menu_container/messaging_menu_container';
 import { insertAndReplace, replace } from '@mail/model/model_field_command';
-import { ChatWindowService } from '@mail/services/chat_window_service/chat_window_service';
 import { MessagingService } from '@mail/services/messaging/messaging';
 import { makeDeferred } from '@mail/utils/deferred';
-import { DialogService } from '@mail/services/dialog_service/dialog_service';
 import { getMessagingComponent } from '@mail/utils/messaging_component';
 import { nextTick } from '@mail/utils/utils';
 import { DiscussWidget } from '@mail/widgets/discuss/discuss';
@@ -32,11 +32,7 @@ import MockServer from 'web.MockServer';
 
 const { App, Component, EventBus } = owl;
 const { afterNextRender } = App;
-const {
-    addMockEnvironment,
-    patch: legacyPatch,
-    unpatch: legacyUnpatch,
-} = mock;
+const { addMockEnvironment } = mock;
 
 const modelDefinitionsPromise = new Promise(resolve => {
     QUnit.begin(() => resolve(getModelDefinitions()));
@@ -65,42 +61,40 @@ function _createFakeDataTransfer(files) {
 
 /**
  * @private
- * @param {Object} callbacks
- * @param {function[]} callbacks.init
- * @param {function[]} callbacks.mount
- * @param {function[]} callbacks.destroy
- * @param {function[]} callbacks.return
- * @param {Object) params
- * @param {function) params.afterNextRender
+ * @param {HTMLElement} target
  */
-function _useChatWindow(callbacks, { afterNextRender }) {
-    callbacks.mount.push(async () => {
-        // trigger mounting of chat window manager
-        await afterNextRender(() => Component.env.services['chat_window']._onWebClientReady());
+async function mountChatWindowManagerContainer(target) {
+    const app = new App(ChatWindowManagerContainer, {
+        templates: window.__OWL_TEMPLATES__,
+        env: owl.Component.env,
+        dev: owl.Component.env.isDebug(),
+        translateFn: owl.Component.env._t,
+        translatableAttributes: ["data-tooltip"],
     });
-    callbacks.destroy.push(() => {
-        Component.env.services['chat_window'].destroy();
+    await app.mount(target);
+
+    registerCleanup(() => {
+        app.destroy();
     });
 }
 
 /**
  * @private
- * @param {Object} callbacks
- * @param {function[]} callbacks.init
- * @param {function[]} callbacks.mount
- * @param {function[]} callbacks.destroy
- * @param {function[]} callbacks.return
- * @param {Object) params
- * @param {function) params.afterNextRender
+ * @param {HTMLElement} target
  */
-function _useDialog(callbacks, { afterNextRender }) {
-    callbacks.mount.push(async () => {
-        // trigger mounting of dialog manager
-        await afterNextRender(() => Component.env.services['dialog']._onWebClientReady());
+async function mountDialogManagerContainer(target) {
+    const app = new App(DialogManagerContainer, {
+        templates: window.__OWL_TEMPLATES__,
+        env: owl.Component.env,
+        dev: owl.Component.env.isDebug(),
+        translateFn: owl.Component.env._t,
+        translatableAttributes: ["data-tooltip"],
+    });
+    await app.mount(target);
+
+    registerCleanup(() => {
+        app.destroy();
     });
-    callbacks.destroy.push(() => {
-        Component.env.services['dialog'].destroy();
-    })
 }
 
 //------------------------------------------------------------------------------
@@ -648,12 +642,6 @@ async function start(param0 = {}) {
         debounce: func => func,
         throttle: func => func,
     });
-    let callbacks = {
-        init: [],
-        mount: [],
-        destroy: [],
-        return: [],
-    };
     const {
         autoOpenDiscuss = false,
         discuss = {},
@@ -676,17 +664,8 @@ async function start(param0 = {}) {
     delete param0.hasTimeControl;
     delete param0.hasView;
     delete param0.target;
-    _useChatWindow(callbacks, { afterNextRender });
-    _useDialog(callbacks, { afterNextRender });
     const messagingBus = new EventBus();
-    const {
-        init: initCallbacks,
-        mount: mountCallbacks,
-        destroy: destroyCallbacks,
-        return: returnCallbacks,
-    } = callbacks;
     const { debug = false } = param0;
-    initCallbacks.forEach(callback => callback(param0));
     const testSetupDoneDeferred = makeDeferred();
     let env = {
         ...providedEnv,
@@ -722,18 +701,6 @@ async function start(param0 = {}) {
             },
             updateOption() {},
         }),
-        chat_window: ChatWindowService.extend({
-            _getParentNode() {
-                return document.querySelector(debug ? 'body' : '#qunit-fixture');
-            },
-            _listenHomeMenu: () => {},
-        }),
-        dialog: DialogService.extend({
-            _getParentNode() {
-                return document.querySelector(debug ? 'body' : '#qunit-fixture');
-            },
-            _listenHomeMenu: () => {},
-        }),
         local_storage: AbstractStorageService.extend({ storage: new RamStorage() }),
         messaging: MessagingService.extend({
             // test specific values
@@ -796,13 +763,6 @@ async function start(param0 = {}) {
     const selector = debug ? 'body' : '#qunit-fixture';
     if (hasView) {
         widget = await createView(kwargs);
-        legacyPatch(widget, {
-            destroy() {
-                destroyCallbacks.forEach(callback => callback({ widget }));
-                this._super(...arguments);
-                legacyUnpatch(widget);
-            }
-        });
     } else if (hasWebClient) {
         let serverData;
         if (!kwargs.serverData) {
@@ -843,13 +803,6 @@ async function start(param0 = {}) {
         legacyParams.env = env;
 
         widget = await createWebClient({ target: webclientTarget, serverData, mockRPC, legacyParams });
-
-        legacyPatch(widget, {
-            destroy() {
-                destroyCallbacks.forEach(callback => callback({ widget }));
-                legacyUnpatch(widget);
-            }
-        });
     } else {
         const Parent = Widget.extend({ do_push_state() {} });
         const parent = new Parent();
@@ -859,7 +812,6 @@ async function start(param0 = {}) {
         Object.assign(widget, {
             destroy() {
                 delete widget.destroy;
-                destroyCallbacks.forEach(callback => callback({ widget }));
                 parent.destroy();
             },
         });
@@ -895,7 +847,9 @@ async function start(param0 = {}) {
     }
     const { modelManager } = testEnv.services.messaging;
     registerCleanup(async() => {
-        widget.destroy();
+        if (!hasWebClient) {
+            widget.destroy();
+        }
         await modelManager.messagingInitializedPromise;
         modelManager.messaging.delete();
     });
@@ -906,17 +860,15 @@ async function start(param0 = {}) {
         await modelManager.messagingCreatedPromise;
         await modelManager.messagingInitializedPromise;
     }
-    if (mountCallbacks.length > 0) {
-        await Promise.all(mountCallbacks.map(callback => callback({ selector, widget })));
-    }
-    returnCallbacks.forEach(callback => callback(result));
     const openDiscuss = getOpenDiscuss({ afterNextRender, discuss, selector, widget });
     if (autoOpenDiscuss) {
         const discussWidget = await openDiscuss();
         result['discussWidget'] = discussWidget;
     }
-    await waitUntilEventPromise;
     const target = hasWebClient ? webclientTarget : widget.el;
+    await mountChatWindowManagerContainer(target);
+    await mountDialogManagerContainer(target);
+    await waitUntilEventPromise;
     return {
         ...result,
         afterNextRender,
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 6ec1ec82996..fc249484b7b 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
@@ -27,27 +27,21 @@ QUnit.test('[technical] messaging not created', async function (assert) {
      * Time of having no messaging is very short, almost imperceptible by user
      * on UI, but the display should not crash during this critical time period.
      */
-    assert.expect(2);
+    assert.expect(1);
 
     const messagingBeforeCreationDeferred = makeDeferred();
-    await start({
+    const { afterNextRender } = await start({
         messagingBeforeCreationDeferred,
         waitUntilMessagingCondition: 'none',
     });
-    assert.containsOnce(
-        document.body,
-        '.o_ChatWindowManager',
-        "should have chat window manager even when messaging is not yet created"
-    );
 
     // simulate messaging being created
-    messagingBeforeCreationDeferred.resolve();
-    await nextAnimationFrame();
+    await afterNextRender(() => messagingBeforeCreationDeferred.resolve());
 
     assert.containsOnce(
         document.body,
         '.o_ChatWindowManager',
-        "should still contain chat window manager after messaging has been created"
+        "should contain chat window manager after messaging has been created"
     );
 });
 
diff --git a/addons/mail/static/tests/qunit_suite_tests/components/dialog_manager_tests.js b/addons/mail/static/tests/qunit_suite_tests/components/dialog_manager_tests.js
index af9340cb3e0..945ebc35024 100644
--- a/addons/mail/static/tests/qunit_suite_tests/components/dialog_manager_tests.js
+++ b/addons/mail/static/tests/qunit_suite_tests/components/dialog_manager_tests.js
@@ -1,10 +1,7 @@
 /** @odoo-module **/
 
 import { makeDeferred } from '@mail/utils/deferred';
-import {
-    nextAnimationFrame,
-    start,
-} from '@mail/../tests/helpers/test_utils';
+import { start } from '@mail/../tests/helpers/test_utils';
 
 QUnit.module('mail', {}, function () {
 QUnit.module('components', {}, function () {
@@ -19,27 +16,21 @@ QUnit.test('[technical] messaging not created', async function (assert) {
      * Time of having no messaging is very short, almost imperceptible by user
      * on UI, but the display should not crash during this critical time period.
      */
-    assert.expect(2);
+    assert.expect(1);
 
     const messagingBeforeCreationDeferred = makeDeferred();
-    await start({
+    const { afterNextRender } = await start({
         messagingBeforeCreationDeferred,
         waitUntilMessagingCondition: 'none',
     });
-    assert.containsOnce(
-        document.body,
-        '.o_DialogManager',
-        "should have dialog manager even when messaging is not yet created"
-    );
 
     // simulate messaging being created
-    messagingBeforeCreationDeferred.resolve();
-    await nextAnimationFrame();
+    await afterNextRender(messagingBeforeCreationDeferred.resolve);
 
     assert.containsOnce(
         document.body,
         '.o_DialogManager',
-        "should still contain dialog manager after messaging has been created"
+        "should contain dialog manager after messaging has been created"
     );
 });
 
diff --git a/addons/project/__manifest__.py b/addons/project/__manifest__.py
index dc8570e9ed3..38f3689918a 100644
--- a/addons/project/__manifest__.py
+++ b/addons/project/__manifest__.py
@@ -116,9 +116,7 @@
             ('remove', 'mail/static/src/services/messaging/messaging.js'),
 
             ('remove', 'mail/static/src/components/dialog_manager/dialog_manager.js'),
-            ('remove', 'mail/static/src/services/dialog_service/dialog_service.js'),
             ('remove', 'mail/static/src/components/chat_window_manager/chat_window_manager.js'),
-            ('remove', 'mail/static/src/services/chat_window_service/chat_window_service.js'),
 
             'web/static/src/legacy/js/public/public_widget.js',
             'portal/static/src/js/portal_chatter.js',