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

diff --git a/addons/mail_bot/static/src/components/notification_request/notification_request.js b/addons/mail_bot/static/src/components/notification_request/notification_request.js
new file mode 100644
index 00000000000..ef9639c688b
--- /dev/null
+++ b/addons/mail_bot/static/src/components/notification_request/notification_request.js
@@ -0,0 +1,90 @@
+odoo.define('mail_bot/static/src/components/notification_request/notification_request.js', function (require) {
+'use strict';
+
+const components = {
+    PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'),
+};
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class NotificationRequest extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useStore(props => {
+            return {
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                partnerRoot: this.env.messaging.partnerRoot
+                    ? this.env.messaging.partnerRoot.__state
+                    : undefined,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {string}
+     */
+    getHeaderText() {
+        return _.str.sprintf(
+            this.env._t("%s has a request"),
+            this.env.messaging.partnerRoot.nameOrDisplayName
+        );
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Handle the response of the user when prompted whether push notifications
+     * are granted or denied.
+     *
+     * @private
+     * @param {string} value
+     */
+    _handleResponseNotificationPermission(value) {
+        // manually force recompute because the permission is not in the store
+        this.env.messaging.messagingMenu.update();
+        if (value !== 'granted') {
+            this.env.services['bus_service'].sendNotification(
+                this.env._t("Permission denied"),
+                this.env._t("Odoo will not have the permission to send native notifications on this device.")
+            );
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClick() {
+        const windowNotification = this.env.browser.Notification;
+        const def = windowNotification && windowNotification.requestPermission();
+        if (def) {
+            def.then(this._handleResponseNotificationPermission.bind(this));
+        }
+        this.trigger('o-odoobot-request-clicked');
+    }
+
+}
+
+Object.assign(NotificationRequest, {
+    components,
+    props: {},
+    template: 'mail_bot.NotificationRequest',
+});
+
+return NotificationRequest;
+
+});
diff --git a/addons/mail_bot/static/src/components/notification_request/notification_request.scss b/addons/mail_bot/static/src/components/notification_request/notification_request.scss
new file mode 100644
index 00000000000..8d4b38db848
--- /dev/null
+++ b/addons/mail_bot/static/src/components/notification_request/notification_request.scss
@@ -0,0 +1,73 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_NotificationRequest {
+    @include o-mail-notification-list-item-layout();
+}
+
+.o_NotificationRequest_content {
+    @include o-mail-notification-list-item-content-layout();
+}
+
+.o_NotificationRequest_core {
+    @include o-mail-notification-list-item-core-layout();
+}
+
+.o_NotificationRequest_coreItem {
+    @include o-mail-notification-list-item-core-item-layout();
+}
+
+.o_NotificationRequest_header {
+    @include o-mail-notification-list-item-header-layout();
+}
+
+.o_NotificationRequest_image {
+    @include o-mail-notification-list-item-image-layout();
+}
+
+.o_NotificationRequest_imageContainer {
+    @include o-mail-notification-list-item-image-container-layout();
+}
+
+.o_NotificationRequest_inlineText {
+    @include o-mail-notification-list-item-inline-text-layout();
+}
+
+.o_NotificationRequest_name {
+    @include o-mail-notification-list-item-name-layout();
+}
+
+.o_NotificationRequest_partnerImStatusIcon {
+    @include o-mail-notification-list-item-partner-im-status-icon-layout();
+}
+
+.o_NotificationRequest_sidebar {
+    @include o-mail-notification-list-item-sidebar-layout();
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_NotificationRequest {
+    @include o-mail-notification-list-item-style();
+
+    &:hover {
+        .o_NotificationRequest_partnerImStatusIcon {
+            @include o-mail-notification-list-item-hover-partner-im-status-icon-style();
+        }
+    }
+}
+
+.o_NotificationRequest_core {
+    @include o-mail-notification-list-item-core-style();
+}
+
+.o_NotificationRequest_name {
+    @include o-mail-notification-list-item-bold-style();
+}
+
+.o_NotificationRequest_partnerImStatusIcon {
+    @include o-mail-notification-list-item-partner-im-status-icon-style();
+}
diff --git a/addons/mail_bot/static/src/components/notification_request/notification_request.xml b/addons/mail_bot/static/src/components/notification_request/notification_request.xml
new file mode 100644
index 00000000000..10b22bac2cd
--- /dev/null
+++ b/addons/mail_bot/static/src/components/notification_request/notification_request.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail_bot.NotificationRequest" owl="1">
+        <div class="o_NotificationRequest" t-on-click="_onClick">
+            <div class="o_NotificationRequest_sidebar">
+                <div class="o_NotificationRequest_imageContainer o_NotificationRequest_sidebarItem">
+                    <img class="o_NotificationRequest_image rounded-circle" src="/mail/static/src/img/odoobot.png" alt="Avatar of OdooBot"/>
+                    <PartnerImStatusIcon
+                        class="o_NotificationRequest_partnerImStatusIcon"
+                        t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"
+                        partnerLocalId="env.messaging.partnerRoot.localId"
+                    />
+                </div>
+            </div>
+            <div class="o_NotificationRequest_content">
+                <div class="o_NotificationRequest_header">
+                    <span class="o_NotificationRequest_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
+                        <t t-esc="getHeaderText()"/>
+                    </span>
+                </div>
+                <div class="o_NotificationRequest_core">
+                    <span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText">
+                        Enable desktop notifications to chat.
+                    </span>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>