[REF] mail, *: refactor messaging with OWL

This commit is a significant rewriting of client-side discuss, chatter,
chat window, and messaging menu using OWL. The behavior should be broadly
the same, with some slight functional changes here and there.

From a technical standpoint, the code of messaging is mainly organized in 2
main groups of modules:

- models, which are logical entities that depict the client-side state of
  messaging as a whole.
- components, which are in charge of displaying information from models.

This refactoring also introduces new JS guidelines regarding folder structure
(/static) and naming rules for JS modules.

Community PR: https://github.com/odoo/odoo/pull/39023
Enterprise PR: https://github.com/odoo/enterprise/pull/6249

Task-1914207

This PR is a collaborative work by Alexandre, Julien, Sébastien and Xavier,
with the precious help of Lucas to speed it up towards the end.

closes odoo/odoo#39023

Related: odoo/enterprise#6249
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
Co-authored-by: Alexandre Kühn <aku@odoo.com>
Co-authored-by: Julien Giannone <jgi@odoo.com>
Co-authored-by: Lucas Perais <lpe@odoo.com>
Co-authored-by: Sébastien Theys <seb@odoo.com>
Co-authored-by: Xavier Dubuc <xdu@odoo.com>

3 files changed, 237 insertions, 0 deletions

diff --git a/addons/mail_bot/static/src/components/messaging_menu/messaging_menu.js b/addons/mail_bot/static/src/components/messaging_menu/messaging_menu.js
new file mode 100644
index 00000000000..c1deec24095
--- /dev/null
+++ b/addons/mail_bot/static/src/components/messaging_menu/messaging_menu.js
@@ -0,0 +1,27 @@
+odoo.define('mail_bot/static/src/components/messaging_menu/messaging_menu,js', function (require) {
+'use strict';
+
+const components = {
+    MessagingMenu: require('mail/static/src/components/messaging_menu/messaging_menu.js'),
+};
+
+const { patch } = require('web.utils');
+
+patch(components.MessagingMenu, 'mail_bot/static/src/components/messaging_menu/messaging_menu,js', {
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onOdoobotRequestClicked() {
+        const device = this.messagingMenu.messaging.device;
+        if (!device.isMobile) {
+            this.messagingMenu.close();
+        }
+    },
+});
+
+});
diff --git a/addons/mail_bot/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail_bot/static/src/components/messaging_menu/messaging_menu.xml
new file mode 100644
index 00000000000..a6eb2cf2cd9
--- /dev/null
+++ b/addons/mail_bot/static/src/components/messaging_menu/messaging_menu.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-inherit="mail.MessagingMenu" t-inherit-mode="extension">
+        <xpath expr="//NotificationList" position="attributes">
+           <attribute name="t-on-o-odoobot-request-clicked" t-translation="off">_onOdoobotRequestClicked</attribute>
+        </xpath>
+    </t>
+</templates>
diff --git a/addons/mail_bot/static/src/components/messaging_menu/messaging_menu_tests.js b/addons/mail_bot/static/src/components/messaging_menu/messaging_menu_tests.js
new file mode 100644
index 00000000000..7bd03053699
--- /dev/null
+++ b/addons/mail_bot/static/src/components/messaging_menu/messaging_menu_tests.js
@@ -0,0 +1,202 @@
+odoo.define('mail_bot/static/src/components/messaging_menu/messaging_menu_tests.js', function (require) {
+"use strict";
+
+const {
+    afterEach: utilsAfterEach,
+    afterNextRender,
+    beforeEach: utilsBeforeEach,
+    start: utilsStart,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail_bot', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('messaging_menu', {}, function () {
+QUnit.module('messaging_menu_tests.js', {
+    beforeEach() {
+        utilsBeforeEach(this);
+
+        this.start = async params => {
+            let { widget } = await utilsStart(Object.assign({}, params, {
+                data: this.data,
+                hasMessagingMenu: true,
+            }));
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        utilsAfterEach(this);
+        if (this.widget) {
+            this.widget.destroy();
+        }
+    },
+});
+
+QUnit.test('rendering with OdooBot has a request (default)', async function (assert) {
+    assert.expect(4);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'default',
+                },
+            },
+        },
+        async mockRPC(route, args) {
+            if (args.method === 'channel_fetch_preview') {
+                return [];
+            }
+            return this._super(...arguments);
+        },
+    });
+
+    assert.ok(
+        document.querySelector('.o_MessagingMenu_counter'),
+        "should display a notification counter next to the messaging menu for OdooBot request"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_MessagingMenu_counter').textContent,
+        "1",
+        "should display a counter of '1' next to the messaging menu"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_toggler').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationRequest',
+        "should display a notification in the messaging menu"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationRequest_name').textContent.trim(),
+        'OdooBot has a request',
+        "notification should display that OdooBot has a request"
+    );
+});
+
+QUnit.test('rendering without OdooBot has a request (denied)', async function (assert) {
+    assert.expect(2);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'denied',
+                },
+            },
+        },
+        async mockRPC(route, args) {
+            if (args.method === 'channel_fetch_preview') {
+                return [];
+            }
+            return this._super(...arguments);
+        },
+    });
+
+    assert.containsNone(
+        document.body,
+        '.o_MessagingMenu_counter',
+        "should not display a notification counter next to the messaging menu"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_toggler').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_NotificationRequest',
+        "should display no notification in the messaging menu"
+    );
+});
+
+QUnit.test('rendering without OdooBot has a request (accepted)', async function (assert) {
+    assert.expect(2);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'granted',
+                },
+            },
+        },
+        async mockRPC(route, args) {
+            if (args.method === 'channel_fetch_preview') {
+                return [];
+            }
+            return this._super(...arguments);
+        },
+    });
+
+    assert.containsNone(
+        document.body,
+        '.o_MessagingMenu_counter',
+        "should not display a notification counter next to the messaging menu"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_toggler').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_NotificationRequest',
+        "should display no notification in the messaging menu"
+    );
+});
+
+QUnit.test('respond to notification prompt (denied)', async function (assert) {
+    assert.expect(3);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'default',
+                    async requestPermission() {
+                        this.permission = 'denied';
+                        return this.permission;
+                    },
+                },
+            },
+        },
+        async mockRPC(route, args) {
+            if (args.method === 'channel_fetch_preview') {
+                return [];
+            }
+            return this._super(...arguments);
+        },
+    });
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_toggler').click()
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_NotificationRequest').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.toast .o_notification_content',
+        "should display a toast notification with the deny confirmation"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessagingMenu_counter',
+        "should not display a notification counter next to the messaging menu"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_toggler').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_NotificationRequest',
+        "should display no notification in the messaging menu"
+    );
+});
+
+});
+});
+});
+
+});