[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, 199 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/thread_viewer/thread_viewer.js b/addons/mail/static/src/components/thread_viewer/thread_viewer.js
new file mode 100644
index 00000000000..98c3c6edfb6
--- /dev/null
+++ b/addons/mail/static/src/components/thread_viewer/thread_viewer.js
@@ -0,0 +1,199 @@
+odoo.define('mail/static/src/components/thread_viewer/thread_viewer.js', function (require) {
+'use strict';
+
+const components = {
+    Composer: require('mail/static/src/components/composer/composer.js'),
+    MessageList: require('mail/static/src/components/message_list/message_list.js'),
+};
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class ThreadViewer extends Component {
+
+    /**
+     * @param {...any} args
+     */
+    constructor(...args) {
+        super(...args);
+        useStore((...args) => this._useStoreSelector(...args));
+        /**
+         * Reference of the composer. Useful to set focus on composer when
+         * thread has the focus.
+         */
+        this._composerRef = useRef('composer');
+        /**
+         * Reference of the message list. Useful to determine scroll positions.
+         */
+        this._messageListRef = useRef('messageList');
+    }
+
+    mounted() {
+        this._update();
+    }
+
+    patched() {
+        this._update();
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Focus the thread. If it has a composer, focus it.
+     */
+    focus() {
+        if (!this._composerRef.comp) {
+            return;
+        }
+        this._composerRef.comp.focus();
+    }
+
+    /**
+     * Focusout the thread.
+     */
+    focusout() {
+        if (!this._composerRef.comp) {
+            return;
+        }
+        this._composerRef.comp.focusout();
+    }
+
+    /**
+     * Get the scroll position in the message list.
+     *
+     * @returns {integer|undefined}
+     */
+    getScrollTop() {
+        if (!this._messageListRef.comp) {
+            return undefined;
+        }
+        return this._messageListRef.comp.getScrollTop();
+    }
+
+    /**
+     * @returns {mail.thread_viewer}
+     */
+    get threadViewer() {
+        return this.env.models['mail.thread_viewer'].get(this.props.threadViewerLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when thread component is mounted or patched.
+     *
+     * @private
+     */
+    async _update() {
+        const messageList = this._messageListRef.comp;
+        this.trigger('o-rendered');
+        /**
+         * Control panel may offset scrolling position of message list due to
+         * height of buttons. To prevent this, control panel re-render is
+         * triggered before message list. Correct way should be to adjust
+         * scroll positions after everything has been rendered, but OWL doesn't
+         * have such an API for the moment.
+         */
+        if (messageList) {
+            messageList.adjustFromComponentHints();
+        }
+    }
+
+    /**
+     * Returns data selected from the store.
+     *
+     * @private
+     * @param {Object} props
+     * @returns {Object}
+     */
+    _useStoreSelector(props) {
+        const threadViewer = this.env.models['mail.thread_viewer'].get(props.threadViewerLocalId);
+        const thread = threadViewer ? threadViewer.thread : undefined;
+        const threadCache = threadViewer ? threadViewer.threadCache : undefined;
+        return {
+            isDeviceMobile: this.env.messaging.device.isMobile,
+            thread: thread ? thread.__state : undefined,
+            threadCache: threadCache ? threadCache.__state : undefined,
+            threadViewer: threadViewer ? threadViewer.__state : undefined,
+        };
+    }
+
+}
+
+Object.assign(ThreadViewer, {
+    components,
+    defaultProps: {
+        composerAttachmentsDetailsMode: 'auto',
+        hasComposer: false,
+        hasMessageCheckbox: false,
+        hasSquashCloseMessages: false,
+        haveMessagesAuthorRedirect: false,
+        haveMessagesMarkAsReadIcon: false,
+        haveMessagesReplyIcon: false,
+        order: 'asc',
+        showComposerAttachmentsExtensions: true,
+        showComposerAttachmentsFilenames: true,
+    },
+    props: {
+        composerAttachmentsDetailsMode: {
+            type: String,
+            validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop),
+        },
+        hasComposer: Boolean,
+        hasComposerCurrentPartnerAvatar: {
+            type: Boolean,
+            optional: true,
+        },
+        hasComposerSendButton: {
+            type: Boolean,
+            optional: true,
+        },
+        /**
+         * If set, determines whether the composer should display status of
+         * members typing on related thread. When this prop is not provided,
+         * it defaults to composer component default value.
+         */
+        hasComposerThreadTyping: {
+            type: Boolean,
+            optional: true,
+        },
+        hasMessageCheckbox: Boolean,
+        hasSquashCloseMessages: Boolean,
+        haveMessagesAuthorRedirect: Boolean,
+        haveMessagesMarkAsReadIcon: Boolean,
+        haveMessagesReplyIcon: Boolean,
+        /**
+         * Set the initial scroll position of message list on mount. Note that
+         * this prop is not directly passed to message list as props because
+         * it may compute scroll top without composer, and then composer may alter
+         * them on mount. To solve this issue, thread handles setting initial scroll
+         * positions, so that this is always done after composer has been mounted.
+         * (child `mounted()` are called before parent `mounted()`)
+         */
+        messageListInitialScrollTop: {
+            type: Number,
+            optional: true
+        },
+        order: {
+            type: String,
+            validate: prop => ['asc', 'desc'].includes(prop),
+        },
+        selectedMessageLocalId: {
+            type: String,
+            optional: true,
+        },
+        showComposerAttachmentsExtensions: Boolean,
+        showComposerAttachmentsFilenames: Boolean,
+        threadViewerLocalId: String,
+    },
+    template: 'mail.ThreadViewer',
+});
+
+return ThreadViewer;
+
+});