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

1 files changed, 545 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/attachment/attachment_tests.js b/addons/mail/static/src/components/attachment/attachment_tests.js
new file mode 100644
index 00000000000..224a80a30e7
--- /dev/null
+++ b/addons/mail/static/src/components/attachment/attachment_tests.js
@@ -0,0 +1,545 @@
+odoo.define('mail/static/src/components/attachment/attachment_tests.js', function (require) {
+'use strict';
+
+const components = {
+    Attachment: require('mail/static/src/components/attachment/attachment.js'),
+};
+const {
+    afterEach: utilsAfterEach,
+    beforeEach: utilsBeforeEach,
+    start: utilsStart,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('attachment', {}, function () {
+QUnit.module('attachment_tests.js', {
+    beforeEach() {
+        utilsBeforeEach(this);
+
+        this.createAttachmentComponent = async (attachment, otherProps) => {
+            const AttachmentComponent = components.Attachment;
+            AttachmentComponent.env = this.env;
+            this.component = new AttachmentComponent(null, Object.assign({
+                attachmentLocalId: attachment.localId,
+            }, otherProps));
+            await this.component.mount(this.widget.el);
+        };
+
+        this.start = async params => {
+            if (this.widget) {
+                this.widget.destroy();
+            }
+            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();
+        }
+        if (this.widget) {
+            this.widget.destroy();
+        }
+        this.env = undefined;
+        delete components.Attachment.env;
+    },
+});
+
+QUnit.test('simplest layout', async function (assert) {
+    assert.expect(8);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'none',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: false,
+        showFilename: false,
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Attachment').length,
+        1,
+        "should have attachment component in DOM"
+    );
+    const attachmentEl = document.querySelector('.o_Attachment');
+    assert.strictEqual(
+        attachmentEl.dataset.attachmentLocalId,
+        this.env.models['mail.attachment'].find(attachment => attachment.id === 750).localId,
+        "attachment component should be linked to attachment store model"
+    );
+    assert.strictEqual(
+        attachmentEl.title,
+        "test.txt",
+        "attachment should have filename as title attribute"
+    );
+    assert.strictEqual(
+        attachmentEl.querySelectorAll(`:scope .o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    const attachmentImage = document.querySelector(`.o_Attachment_image`);
+    assert.ok(
+        attachmentImage.classList.contains('o_image'),
+        "attachment should have o_image classname (required for mimetype.scss style)"
+    );
+    assert.strictEqual(
+        attachmentImage.dataset.mimetype,
+        'text/plain',
+        "attachment should have data-mimetype set (required for mimetype.scss style)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        0,
+        "attachment should not have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        0,
+        "attachment should not have an aside part"
+    );
+});
+
+QUnit.test('simplest layout + deletable', async function (assert) {
+    assert.expect(6);
+
+    await this.start({
+        async mockRPC(route, args) {
+            if (route.includes('web/image/750')) {
+                assert.ok(
+                    route.includes('/160x160'),
+                    "should fetch image with 160x160 pixels ratio");
+                assert.step('fetch_image');
+                return;
+            }
+            return this._super(...arguments);
+        },
+    });
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'none',
+        isDownloadable: false,
+        isEditable: true,
+        showExtension: false,
+        showFilename: false
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Attachment').length,
+        1,
+        "should have attachment component in DOM"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        0,
+        "attachment should not have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        1,
+        "attachment should have an aside part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItem`).length,
+        1,
+        "attachment should have only one aside item"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItemUnlink`).length,
+        1,
+        "attachment should have a delete button"
+    );
+});
+
+QUnit.test('simplest layout + downloadable', async function (assert) {
+    assert.expect(6);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'none',
+        isDownloadable: true,
+        isEditable: false,
+        showExtension: false,
+        showFilename: false
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Attachment').length,
+        1,
+        "should have attachment component in DOM"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        0,
+        "attachment should not have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        1,
+        "attachment should have an aside part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItem`).length,
+        1,
+        "attachment should have only one aside item"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItemDownload`).length,
+        1,
+        "attachment should have a download button"
+    );
+});
+
+QUnit.test('simplest layout + deletable + downloadable', async function (assert) {
+    assert.expect(8);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'none',
+        isDownloadable: true,
+        isEditable: true,
+        showExtension: false,
+        showFilename: false
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Attachment').length,
+        1,
+        "should have attachment component in DOM"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        0,
+        "attachment should not have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        1,
+        "attachment should have an aside part"
+    );
+    assert.ok(
+        document.querySelector(`.o_Attachment_aside`).classList.contains('o-has-multiple-action'),
+        "attachment aside should contain multiple actions"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItem`).length,
+        2,
+        "attachment should have only two aside items"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItemDownload`).length,
+        1,
+        "attachment should have a download button"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItemUnlink`).length,
+        1,
+        "attachment should have a delete button"
+    );
+});
+
+QUnit.test('layout with card details', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: false,
+        showFilename: false
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        0,
+        "attachment should not have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        0,
+        "attachment should not have an aside part"
+    );
+});
+
+QUnit.test('layout with card details and filename', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: false,
+        showFilename: true
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        1,
+        "attachment should have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_filename`).length,
+        1,
+        "attachment should not have its filename shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_extension`).length,
+        0,
+        "attachment should have its extension shown"
+    );
+});
+
+QUnit.test('layout with card details and extension', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: true,
+        showFilename: false
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        1,
+        "attachment should have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_filename`).length,
+        0,
+        "attachment should not have its filename shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_extension`).length,
+        1,
+        "attachment should have its extension shown"
+    );
+});
+
+QUnit.test('layout with card details and filename and extension', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: true,
+        showFilename: true
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        1,
+        "attachment should have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_filename`).length,
+        1,
+        "attachment should have its filename shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_extension`).length,
+        1,
+        "attachment should have its extension shown"
+    );
+});
+
+QUnit.test('simplest layout with hover details and filename and extension', async function (assert) {
+    assert.expect(8);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'hover',
+        isDownloadable: true,
+        isEditable: true,
+        showExtension: true,
+        showFilename: true
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Attachment_details:not(.o_Attachment_imageOverlayDetails)
+        `).length,
+        0,
+        "attachment should not have a details part directly"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_imageOverlayDetails`).length,
+        1,
+        "attachment should have a details part in the overlay"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_imageOverlay`).length,
+        1,
+        "attachment should have an image overlay part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_filename`).length,
+        1,
+        "attachment should have its filename shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_extension`).length,
+        1,
+        "attachment should have its extension shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_actions`).length,
+        1,
+        "attachment should have an actions part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        0,
+        "attachment should not have an aside element"
+    );
+});
+
+QUnit.test('auto layout with image', async function (assert) {
+    assert.expect(7);
+
+    await this.start({
+        async mockRPC(route, args) {
+            if (route.includes('web/image/750')) {
+                return;
+            }
+            return this._super(...arguments);
+        },
+    });
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.png",
+        id: 750,
+        mimetype: 'image/png',
+        name: "test.png",
+    });
+
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'auto',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: true,
+        showFilename: true
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Attachment_details:not(.o_Attachment_imageOverlayDetails)
+        `).length,
+        0,
+        "attachment should not have a details part directly"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_imageOverlayDetails`).length,
+        1,
+        "attachment should have a details part in the overlay"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_imageOverlay`).length,
+        1,
+        "attachment should have an image overlay part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_filename`).length,
+        1,
+        "attachment should have its filename shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_extension`).length,
+        1,
+        "attachment should have its extension shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        0,
+        "attachment should not have an aside element"
+    );
+});
+
+});
+});
+});
+
+});