[FIX] mail: Add a mark as read option on systray message dropdown

- 'Mark as Read' icon will be shown by moving the mouse over the message
- if it's channel then make it Mark as Seen
- if it's inbox notification then mark all message as read
- The inbox notification icon has been changed

This commit is related to task ID 1817646

addons/mail/static/src/js/systray.js

@@ -24,6 +24,7 @@ var MessagingMenu = Widget.extend({
         "click .o_filter_button": "on_click_filter_button",
         "click .o_new_message": "on_click_new_message",
         "click .o_mail_channel_preview": "_onClickChannel",
+        "click .o_mail_channel_mark_read":"_onClickMarkRead",
     },
     init: function () {
         this._super.apply(this, arguments);
@@ -149,6 +150,26 @@ var MessagingMenu = Widget.extend({
             }
         }
     },
+    /**
+     * When a channel Mark As Read button is clicked on, we want mark message as read
+     *
+     * @private
+     * @param {MouseEvent} event
+     */
+    _onClickMarkRead: function (ev) {
+        ev.stopPropagation();
+        var channelID = $(ev.currentTarget).data('channel_id'),
+            channel = this.call('chat_manager', 'getChannel', channelID);
+        //Mark only static  channel's messages as read and clear notification
+        if (channelID === 'channel_inbox') {
+            var resID = $(ev.currentTarget).data('res_id');
+            var model = $(ev.currentTarget).data('model');
+            var domain = [['model', '=', model], ['res_id', '=', resID]];
+            this.call('chat_manager', 'markAllAsRead', channel, domain);
+        } else {
+            this.call('chat_manager', 'markChannelAsSeen', channel);
+        }
+    },
 });
 
 /**

addons/mail/static/src/scss/discuss.scss

@@ -336,6 +336,9 @@
         .o_channel_name {
             color: $headings-color;
         }
+        .o_discuss_icon {
+            opacity: 1;
+        }
     }
     &:not(:last-child) {
         border-bottom: 1px solid $gray-lighter-darker;
@@ -373,12 +376,15 @@
             }
         }
         .o_last_message_preview {
-            width: 100%;
+            width: 94%;
             max-height: 20px;
             color: $o-main-color-muted;
             @include o-text-overflow;
         }
     }
+    .o_discuss_icon {
+        opacity: 0;
+    }
     &.o_channel_unread {
         background-color: transparent;
         &:hover {

addons/mail/static/src/xml/discuss.xml

@@ -235,6 +235,7 @@
                     </t>
                     <t t-raw="channel.last_message_preview"/>
                 </div>
+                <span t-att-data-channel_id="channel.id" t-att-data-res_id="channel.res_id" t-att-data-model="channel.model" title="Mark as Read" class="o_discuss_icon  o_mail_channel_mark_read fa fa-check" t-if="channel.unread_counter"/>
             </div>
         </div>
     </t>

addons/mail/static/tests/systray_tests.js

@@ -324,4 +324,52 @@ QUnit.test('messaging menu widget: no crash when clicking on inbox notification
     }
 });
 
+QUnit.test("messaging menu widget: messaging menu with 1 message", function ( assert ) {
+    assert.expect(5);
+
+    var records = [{
+        "channel_ids": ['channel_inbox'],
+        "res_id": 126,
+        'is_needaction': true,
+        "module_icon": "/crm/static/description/icon.png",
+        "date": "2018-04-05 06:37:26",
+        "subject": "Re: Interest in your Graphic Design Project",
+        "model": "crm.lead",
+        "body": "<span>Testing Messaging</span>"
+    }];
+
+    var messagingMenu = new systray.MessagingMenu();
+    testUtils.addMockEnvironment(messagingMenu, {
+        services: [ChatManager, createBusService()],
+        mockRPC: function (route, args) {
+            if (args.method === "message_fetch") {
+                return $.when(records);
+            }
+            return this._super(route, args);
+        },
+    });
+
+    messagingMenu.appendTo($('#qunit-fixture'));
+    messagingMenu.$('.dropdown-toggle').click();
+    assert.ok(messagingMenu.$el.hasClass('o_mail_navbar_item'),
+        'should be the instance of widget');
+    assert.strictEqual(messagingMenu.$el.hasClass("open"), true,
+        'MessagingMenu should be open');
+    assert.strictEqual(messagingMenu.$('.o_channel_unread').length, 1,
+        "should have one unread message for channel");
+    assert.strictEqual(messagingMenu.$('.o_mail_channel_mark_read').length, 1,
+        "should have mark as read icon");
+    testUtils.intercept(messagingMenu, 'call_service', function (event) {
+        if (event.data.method === 'markAllAsRead') {
+            assert.deepEqual(
+                event.data.args[1],
+                [["model", "=" , "crm.lead"], ["res_id", "=" ,126]],
+                "The message has been read"
+            );
+        }
+    });
+    messagingMenu.$(".o_mail_channel_mark_read").click();
+    messagingMenu.destroy();
+});
+
 });
\ No newline at end of file