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

4 files changed, 513 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/follower/follower.js b/addons/mail/static/src/components/follower/follower.js
new file mode 100644
index 00000000000..f446c098914
--- /dev/null
+++ b/addons/mail/static/src/components/follower/follower.js
@@ -0,0 +1,81 @@
+odoo.define('mail/static/src/components/follower/follower.js', function (require) {
+'use strict';
+
+const components = {
+    FollowerSubtypeList: require('mail/static/src/components/follower_subtype_list/follower_subtype_list.js'),
+};
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class Follower extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useStore(props => {
+            const follower = this.env.models['mail.follower'].get(props.followerLocalId);
+            return [follower ? follower.__state : undefined];
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.follower}
+     */
+    get follower() {
+        return this.env.models['mail.follower'].get(this.props.followerLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickDetails(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.env.messaging.openDocument({
+            id: this.follower.resId,
+            model: this.follower.resModel,
+        });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickEdit(ev) {
+        ev.preventDefault();
+        this.follower.showSubtypes();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickRemove(ev) {
+        this.follower.remove();
+    }
+
+}
+
+Object.assign(Follower, {
+    components,
+    props: {
+        followerLocalId: String,
+    },
+    template: 'mail.Follower',
+});
+
+return Follower;
+
+});
diff --git a/addons/mail/static/src/components/follower/follower.scss b/addons/mail/static/src/components/follower/follower.scss
new file mode 100644
index 00000000000..509a119fb61
--- /dev/null
+++ b/addons/mail/static/src/components/follower/follower.scss
@@ -0,0 +1,55 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Follower {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    padding: map-get($spacers, 0);
+}
+
+.o_Follower_avatar {
+    width: 24px;
+    height: 24px;
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_Follower_details {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    padding-left: map-get($spacers, 3);
+    padding-right: map-get($spacers, 3);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_Follower_avatar {
+    border-radius: 50%;
+}
+
+.o_Follower_button {
+    border-radius: 0;
+
+    &:hover {
+        background: gray('400');
+        color: $black;
+    }
+}
+
+.o_Follower_details {
+    color: gray('700');
+
+    &:hover {
+        background: gray('400');
+        color: $black;
+    }
+
+    &.o-inactive {
+        opacity: 0.25;
+        font-style: italic;
+    }
+}
diff --git a/addons/mail/static/src/components/follower/follower.xml b/addons/mail/static/src/components/follower/follower.xml
new file mode 100644
index 00000000000..26a26ece3f9
--- /dev/null
+++ b/addons/mail/static/src/components/follower/follower.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Follower" owl="1">
+        <div class="o_Follower">
+            <t t-if="follower">
+                <a class="o_Follower_details" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
+                    <img class="o_Follower_avatar" t-attf-src="/web/image/{{ follower.resModel }}/{{ follower.resId }}/image_128" alt="Avatar"/>
+                    <span class="o_Follower_name" t-esc="follower.name"/>
+                </a>
+                <t t-if="follower.isEditable">
+                    <button class="btn btn-icon o_Follower_button o_Follower_editButton" title="Edit subscription" t-on-click="_onClickEdit">
+                        <i class="fa fa-pencil"/>
+                    </button>
+                    <button class="btn btn-icon o_Follower_button o_Follower_removeButton" title="Remove this follower" t-on-click="_onClickRemove">
+                        <i class="fa fa-remove"/>
+                    </button>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/follower/follower_tests.js b/addons/mail/static/src/components/follower/follower_tests.js
new file mode 100644
index 00000000000..87e09dda2df
--- /dev/null
+++ b/addons/mail/static/src/components/follower/follower_tests.js
@@ -0,0 +1,354 @@
+odoo.define('mail/static/src/components/follower/follower_tests.js', function (require) {
+'use strict';
+
+const components = {
+    Follower: require('mail/static/src/components/follower/follower.js'),
+};
+const {
+    afterEach: utilsAfterEach,
+    afterNextRender,
+    beforeEach: utilsBeforeEach,
+    start: utilsStart,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('follower', {}, function () {
+QUnit.module('follower_tests.js', {
+    beforeEach() {
+        utilsBeforeEach(this);
+
+        this.createFollowerComponent = async (follower) => {
+            const FollowerComponent = components.Follower;
+            FollowerComponent.env = this.env;
+            this.component = new FollowerComponent(null, { followerLocalId: follower.localId });
+            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) {
+            this.component.destroy();
+            this.component = undefined;
+        }
+        if (this.widget) {
+            this.widget.destroy();
+            this.widget = undefined;
+        }
+        this.env = undefined;
+        delete components.Follower.env;
+    },
+});
+
+QUnit.test('base rendering not editable', async function (assert) {
+    assert.expect(5);
+
+    await this.start({
+        async mockRPC(route, args) {
+            if (route === '/web/image/mail.channel/1/image_128') {
+                return;
+            }
+            return this._super(...arguments);
+        },
+    });
+
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = await this.env.models['mail.follower'].create({
+        channel: [['insert', { id: 1, model: 'mail.channel', name: "François Perusse" }]],
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: false,
+    });
+    await this.createFollowerComponent(follower);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_details',
+        "should display a details part"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_avatar',
+        "should display the avatar of the follower"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_name',
+        "should display the name of the follower"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Follower_button',
+        "should have no button as follower is not editable"
+    );
+});
+
+QUnit.test('base rendering editable', async function (assert) {
+    assert.expect(6);
+
+    await this.start({
+        async mockRPC(route, args) {
+            if (route === 'web/image/mail.channel/1/image_128') {
+                return;
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = await this.env.models['mail.follower'].create({
+        channel: [['insert', { id: 1, model: 'mail.channel', name: "François Perusse" }]],
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+    });
+    await this.createFollowerComponent(follower);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_details',
+        "should display a details part"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_avatar',
+        "should display the avatar of the follower"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_name',
+        "should display the name of the follower"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_editButton',
+        "should have an edit button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_removeButton',
+        "should have a remove button"
+    );
+});
+
+QUnit.test('click on channel follower details', async function (assert) {
+    assert.expect(7);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action.res_id,
+            1,
+            "The redirect action should redirect to the right res id (1)"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'mail.channel',
+            "The redirect action should redirect to the right res model (mail.channel)"
+        );
+        assert.strictEqual(
+            payload.action.type,
+            "ir.actions.act_window",
+            "The redirect action should be of type 'ir.actions.act_window'"
+        );
+    });
+
+    await this.start({
+        env: { bus },
+        async mockRPC(route, args) {
+            if (route === 'web/image/mail.channel/1/image_128') {
+                return;
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = await this.env.models['mail.follower'].create({
+        channel: [['insert', { id: 1, model: 'mail.channel', name: "channel" }]],
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+    });
+    await this.createFollowerComponent(follower);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_details',
+        "should display a details part"
+    );
+
+    document.querySelector('.o_Follower_details').click();
+    assert.verifySteps(
+        ['do_action'],
+        "clicking on channel should redirect to channel form view"
+    );
+});
+
+QUnit.test('click on partner follower details', async function (assert) {
+    assert.expect(7);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action.res_id,
+            3,
+            "The redirect action should redirect to the right res id (3)"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'res.partner',
+            "The redirect action should redirect to the right res model (res.partner)"
+        );
+        assert.strictEqual(
+            payload.action.type,
+            "ir.actions.act_window",
+            "The redirect action should be of type 'ir.actions.act_window'"
+        );
+    });
+
+    await this.start({
+        env: { bus },
+        async mockRPC(route, args) {
+            if (route === 'web/image/res.partner/3/image_128') {
+                return;
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = await this.env.models['mail.follower'].create({
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+        partner: [['insert', {
+            email: "bla@bla.bla",
+            id: this.env.session.partner_id,
+            name: "François Perusse",
+        }]],
+    });
+    await this.createFollowerComponent(follower);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_details',
+        "should display a details part"
+    );
+
+    document.querySelector('.o_Follower_details').click();
+    assert.verifySteps(
+        ['do_action'],
+        "clicking on follower should redirect to partner form view"
+    );
+});
+
+QUnit.test('click on edit follower', async function (assert) {
+    assert.expect(5);
+
+    await this.start({
+        hasDialog: true,
+        async mockRPC(route, args) {
+            if (route === 'web/image/res.partner/3/image_128') {
+                return;
+            }
+            if (route.includes('/mail/read_subscription_data')) {
+                assert.step('fetch_subtypes');
+                return [{
+                    default: true,
+                    followed: true,
+                    internal: false,
+                    id: 1,
+                    name: "Dummy test",
+                    res_model: 'res.partner'
+                }];
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = await this.env.models['mail.follower'].create({
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+        partner: [['insert', {
+            email: "bla@bla.bla",
+            id: this.env.session.partner_id,
+            name: "François Perusse",
+        }]],
+    });
+    await this.createFollowerComponent(follower);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_editButton',
+        "should display an edit button"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_Follower_editButton').click());
+    assert.verifySteps(
+        ['fetch_subtypes'],
+        "clicking on edit follower should fetch subtypes"
+    );
+
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtypeList',
+        "A dialog allowing to edit follower subtypes should have been created"
+    );
+});
+
+});
+});
+});
+
+});