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

5 files changed, 558 insertions, 0 deletions

diff --git a/addons/sms/static/src/components/message/message.xml b/addons/sms/static/src/components/message/message.xml
new file mode 100644
index 00000000000..b8b6a18d94a
--- /dev/null
+++ b/addons/sms/static/src/components/message/message.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-inherit="mail.Message" t-inherit-mode="extension">
+        <xpath expr="//*[@name='failureIcon']" position="replace">
+            <t t-if="message.message_type === 'sms'">
+                <i class="o_Message_notificationIcon fa fa-mobile"/> SMS
+            </t>
+            <t t-else="">$0</t>
+        </xpath>
+
+        <xpath expr="//*[@name='notificationIcon']" position="replace">
+            <t t-if="message.message_type === 'sms'">
+                <i class="o_Message_notificationIcon fa fa-mobile"/> SMS
+            </t>
+            <t t-else="">$0</t>
+        </xpath>
+    </t>
+
+</templates>
diff --git a/addons/sms/static/src/components/message/message_tests.js b/addons/sms/static/src/components/message/message_tests.js
new file mode 100644
index 00000000000..4c26191a5b3
--- /dev/null
+++ b/addons/sms/static/src/components/message/message_tests.js
@@ -0,0 +1,187 @@
+odoo.define('sms/static/src/components/message/message_tests.js', function (require) {
+'use strict';
+
+const components = {
+    Message: require('mail/static/src/components/message/message.js'),
+};
+const {
+    afterEach: utilsAfterEach,
+    afterNextRender,
+    beforeEach: utilsBeforeEach,
+    start: utilsStart,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+
+QUnit.module('sms', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('message', {}, function () {
+QUnit.module('message_tests.js', {
+    beforeEach() {
+        utilsBeforeEach(this);
+
+        this.createMessageComponent = async message => {
+            const MessageComponent = components.Message;
+            MessageComponent.env = this.env;
+            this.component = new MessageComponent(null, {
+                messageLocalId: message.localId,
+            });
+            delete MessageComponent.env;
+            await this.component.mount(this.widget.el);
+        };
+
+        this.start = async params => {
+            let { env, widget } = await utilsStart(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        utilsAfterEach(this);
+        if (this.component) {
+            // The component must be destroyed before the widget, because the
+            // widget might destroy the models before destroying the component,
+            // and the Message component is relying on messaging.
+            this.component.destroy();
+        }
+        if (this.widget) {
+            this.widget.destroy();
+        }
+        this.env = undefined;
+    },
+});
+
+QUnit.test('Notification Sent', async function (assert) {
+    assert.expect(9);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 10,
+        message_type: 'sms',
+        notifications: [['insert', {
+            id: 11,
+            notification_status: 'sent',
+            notification_type: 'sms',
+            partner: [['insert', { id: 12, name: "Someone" }]],
+        }]],
+    });
+    await this.createMessageComponent(message);
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a message component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_notificationIconContainer',
+        "should display the notification icon container"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_notificationIcon',
+        "should display the notification icon"
+    );
+    assert.hasClass(
+        document.querySelector('.o_Message_notificationIcon'),
+        'fa-mobile',
+        "icon should represent sms"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_Message_notificationIconContainer').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationPopover',
+        "notification popover should be open"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationPopover_notificationIcon',
+        "popover should have one icon"
+    );
+    assert.hasClass(
+        document.querySelector('.o_NotificationPopover_notificationIcon'),
+        'fa-check',
+        "popover should have the sent icon"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationPopover_notificationPartnerName',
+        "popover should have the partner name"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationPopover_notificationPartnerName').textContent.trim(),
+        "Someone",
+        "partner name should be correct"
+    );
+});
+
+QUnit.test('Notification Error', async function (assert) {
+    assert.expect(8);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action,
+            'sms.sms_resend_action',
+            "action should be the one to resend sms"
+        );
+        assert.strictEqual(
+            payload.options.additional_context.default_mail_message_id,
+            10,
+            "action should have correct message id"
+        );
+    });
+
+    await this.start({ env: { bus } });
+    const message = this.env.models['mail.message'].create({
+        id: 10,
+        message_type: 'sms',
+        notifications: [['insert', {
+            id: 11,
+            notification_status: 'exception',
+            notification_type: 'sms',
+        }]],
+    });
+    await this.createMessageComponent(message);
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a message component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_notificationIconContainer',
+        "should display the notification icon container"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_notificationIcon',
+        "should display the notification icon"
+    );
+    assert.hasClass(
+        document.querySelector('.o_Message_notificationIcon'),
+        'fa-mobile',
+        "icon should represent sms"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_Message_notificationIconContainer').click();
+    });
+    assert.verifySteps(
+        ['do_action'],
+        "should do an action to display the resend sms dialog"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/sms/static/src/components/notification_group/notification_group.js b/addons/sms/static/src/components/notification_group/notification_group.js
new file mode 100644
index 00000000000..053fedc5bd2
--- /dev/null
+++ b/addons/sms/static/src/components/notification_group/notification_group.js
@@ -0,0 +1,27 @@
+odoo.define('sms/static/src/components/notification_group/notification_group.js', function (require) {
+'use strict';
+
+const components = {
+    NotificationGroup: require('mail/static/src/components/notification_group/notification_group.js'),
+};
+
+const { patch } = require('web.utils');
+
+patch(components.NotificationGroup, 'sms/static/src/components/notification_group/notification_group.js', {
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    image() {
+        if (this.group.notification_type === 'sms') {
+            return '/sms/static/img/sms_failure.svg';
+        }
+        return this._super(...arguments);
+    },
+});
+
+});
diff --git a/addons/sms/static/src/components/notification_group/notification_group.xml b/addons/sms/static/src/components/notification_group/notification_group.xml
new file mode 100644
index 00000000000..c5f5a8db5dc
--- /dev/null
+++ b/addons/sms/static/src/components/notification_group/notification_group.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-inherit="mail.NotificationGroup" t-inherit-mode="extension">
+        <xpath expr="//*[hasclass('o_NotificationGroup_inlineText')]" position="inside">
+            <t t-if="group.notification_type === 'sms'">
+                An error occurred when sending an SMS.
+            </t>
+        </xpath>
+    </t>
+
+</templates>
diff --git a/addons/sms/static/src/components/notification_list/notification_list_notification_group_tests.js b/addons/sms/static/src/components/notification_list/notification_list_notification_group_tests.js
new file mode 100644
index 00000000000..5f46f57d3ef
--- /dev/null
+++ b/addons/sms/static/src/components/notification_list/notification_list_notification_group_tests.js
@@ -0,0 +1,312 @@
+odoo.define('sms/static/src/components/notification_list/notification_list_notification_group_tests.js', function (require) {
+'use strict';
+
+const components = {
+    NotificationList: require('mail/static/src/components/notification_list/notification_list.js'),
+};
+
+const {
+    afterEach: utilsAfterEach,
+    afterNextRender,
+    beforeEach: utilsBeforeEach,
+    start: utilsStart,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+
+QUnit.module('sms', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('notification_list', {}, function () {
+QUnit.module('notification_list_notification_group_tests.js', {
+    beforeEach() {
+        utilsBeforeEach(this);
+
+        /**
+         * @param {Object} param0
+         * @param {string} [param0.filter='all']
+         */
+        this.createNotificationListComponent = async ({ filter = 'all' } = {}) => {
+            const NotificationListComponent = components.NotificationList;
+            NotificationListComponent.env = this.env;
+            this.component = new NotificationListComponent(null, { filter });
+            await afterNextRender(() => this.component.mount(this.widget.el));
+        };
+
+        this.start = async params => {
+            let { env, widget } = await utilsStart(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        utilsAfterEach(this);
+        if (this.component) {
+            this.component.destroy();
+            this.component = undefined;
+        }
+        if (this.widget) {
+            this.widget.destroy();
+            this.widget = undefined;
+        }
+        this.env = undefined;
+        delete components.NotificationList.env;
+    },
+});
+
+QUnit.test('mark as read', async function (assert) {
+    assert.expect(6);
+
+    this.data.initMessaging.mail_failures = [{
+        date: moment.utc().format("YYYY-MM-DD HH:mm:ss"),
+        id: 11,
+        message_type: 'sms',
+        model: 'mail.channel',
+        notifications: [{
+            failure_type: 'sms_credit',
+            id: 21,
+            notification_status: 'exception',
+            notification_type: 'sms',
+            partner_id: [41, "Someone"],
+        }],
+        res_id: 31,
+        res_model_name: "Channel",
+    }];
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action,
+            'sms.sms_cancel_action',
+            "action should be the one to cancel sms"
+        );
+        assert.strictEqual(
+            payload.options.additional_context.default_model,
+            'mail.channel',
+            "action should have the group model as default_model"
+        );
+        assert.strictEqual(
+            payload.options.additional_context.unread_counter,
+            1,
+            "action should have the group notification length as unread_counter"
+        );
+    });
+
+    await this.start({ env: { bus } });
+    await this.createNotificationListComponent();
+
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup_markAsRead',
+        "should have 1 mark as read button"
+    );
+
+    document.querySelector('.o_NotificationGroup_markAsRead').click();
+    assert.verifySteps(
+        ['do_action'],
+        "should do an action to display the cancel sms dialog"
+    );
+});
+
+QUnit.test('notifications grouped by notification_type', async function (assert) {
+    assert.expect(11);
+
+    this.data.initMessaging.mail_failures = [{
+        date: moment.utc().format("YYYY-MM-DD HH:mm:ss"),
+        id: 11,
+        message_type: 'email', // key element of this test: different type
+        model: 'res.partner', // key element of this test: same model (and not `mail.channel``)
+        notifications: [{
+            failure_type: 'SMTP',
+            id: 21,
+            notification_status: 'exception',
+            notification_type: 'email', // key element of this test: different type
+            partner_id: [41, "Someone"],
+        }],
+        res_id: 31, // key element of this test: same res_id
+        res_model_name: "Partner",
+    }, {
+        date: moment.utc().format("YYYY-MM-DD HH:mm:ss"),
+        id: 12,
+        message_type: 'sms', // key element of this test: different type
+        model: 'res.partner', // key element of this test: same model (and not `mail.channel``)
+        notifications: [{
+            failure_type: 'sms_credit',
+            id: 22,
+            notification_status: 'exception',
+            notification_type: 'sms', // key element of this test: different type
+            partner_id: [42, "Someone else"],
+        }],
+        res_id: 31, // key element of this test: same res_id
+        res_model_name: "Partner",
+    }];
+
+    await this.start();
+    await this.createNotificationListComponent();
+
+    assert.containsN(
+        document.body,
+        '.o_NotificationGroup',
+        2,
+        "should have 2 notifications group"
+    );
+    const groups = document.querySelectorAll('.o_NotificationGroup');
+    assert.containsOnce(
+        groups[0],
+        '.o_NotificationGroup_name',
+        "should have 1 group name in first group"
+    );
+    assert.strictEqual(
+        groups[0].querySelector('.o_NotificationGroup_name').textContent,
+        "Partner",
+        "should have model name as group name"
+    );
+    assert.containsOnce(
+        groups[0],
+        '.o_NotificationGroup_counter',
+        "should have 1 group counter in first group"
+    );
+    assert.strictEqual(
+        groups[0].querySelector('.o_NotificationGroup_counter').textContent.trim(),
+        "(1)",
+        "should have 1 notification in first group"
+    );
+    assert.strictEqual(
+        groups[0].querySelector('.o_NotificationGroup_inlineText').textContent.trim(),
+        "An error occurred when sending an email.",
+        "should have the group text corresponding to email"
+    );
+    assert.containsOnce(
+        groups[1],
+        '.o_NotificationGroup_name',
+        "should have 1 group name in second group"
+    );
+    assert.strictEqual(
+        groups[1].querySelector('.o_NotificationGroup_name').textContent,
+        "Partner",
+        "should have second model name as group name"
+    );
+    assert.containsOnce(
+        groups[1],
+        '.o_NotificationGroup_counter',
+        "should have 1 group counter in second group"
+    );
+    assert.strictEqual(
+        groups[1].querySelector('.o_NotificationGroup_counter').textContent.trim(),
+        "(1)",
+        "should have 1 notification in second group"
+    );
+    assert.strictEqual(
+        groups[1].querySelector('.o_NotificationGroup_inlineText').textContent.trim(),
+        "An error occurred when sending an SMS.",
+        "should have the group text corresponding to sms"
+    );
+});
+
+QUnit.test('grouped notifications by document model', async function (assert) {
+    // If all failures linked to a document model refers to different documents,
+    // a single notification should group all failures that are linked to this
+    // document model.
+    assert.expect(12);
+
+    this.data.initMessaging.mail_failures = [{
+        date: moment.utc().format("YYYY-MM-DD HH:mm:ss"),
+        id: 11,
+        message_type: 'sms',
+        model: 'res.partner', // key element of this test: same model
+        notifications: [{
+            failure_type: 'sms_credit',
+            id: 21,
+            notification_status: 'exception',
+            notification_type: 'sms',
+            partner_id: [41, "Someone"],
+        }],
+        res_id: 31, // key element of this test: a different res_id
+        res_model_name: "Partner",
+    }, {
+        date: moment.utc().format("YYYY-MM-DD HH:mm:ss"),
+        id: 12,
+        message_type: 'sms',
+        model: 'res.partner', // key element of this test: same model
+        notifications: [{
+            failure_type: 'sms_credit',
+            id: 22,
+            notification_status: 'exception',
+            notification_type: 'sms',
+            partner_id: [42, "Someone else"],
+        }],
+        res_id: 32, // key element of this test: a different res_id
+        res_model_name: "Partner",
+    }];
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action.name,
+            "SMS Failures",
+            "action should have 'SMS Failures' as name",
+        );
+        assert.strictEqual(
+            payload.action.type,
+            'ir.actions.act_window',
+            "action should have the type act_window"
+        );
+        assert.strictEqual(
+            payload.action.view_mode,
+            'kanban,list,form',
+            "action should have 'kanban,list,form' as view_mode"
+        );
+        assert.strictEqual(
+            JSON.stringify(payload.action.views),
+            JSON.stringify([[false, 'kanban'], [false, 'list'], [false, 'form']]),
+            "action should have correct views"
+        );
+        assert.strictEqual(
+            payload.action.target,
+            'current',
+            "action should have 'current' as target"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'res.partner',
+            "action should have the group model as res_model"
+        );
+        assert.strictEqual(
+            JSON.stringify(payload.action.domain),
+            JSON.stringify([['message_has_sms_error', '=', true]]),
+            "action should have 'message_has_sms_error' as domain"
+        );
+    });
+
+    await this.start({ env: { bus } });
+    await this.createNotificationListComponent();
+
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup',
+        "should have 1 notification group"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup_counter',
+        "should have 1 group counter"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationGroup_counter').textContent.trim(),
+        "(2)",
+        "should have 2 notifications in the group"
+    );
+
+    document.querySelector('.o_NotificationGroup').click();
+    assert.verifySteps(
+        ['do_action'],
+        "should do an action to display the related records"
+    );
+});
+
+});
+});
+});
+
+});