From 424127012f61c4ec0d69fb14a30cdc050dbf813d Mon Sep 17 00:00:00 2001
From: varunvaruns9 <varunsinghs2021@gmail.com>
Date: Tue, 18 Dec 2018 19:39:51 +0530
Subject: [PATCH] message_list_view: Add highlight for user group mentions.

Add green highlight to mentions of user groups the current user
is a member of.

Fixes part of #11026.
---
 static/js/message_list_view.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/static/js/message_list_view.js b/static/js/message_list_view.js
index f187a00e4f..18ec5e044d 100644
--- a/static/js/message_list_view.js
+++ b/static/js/message_list_view.js
@@ -41,6 +41,16 @@ function get_user_id_for_mention_button(elem) {
     return;
 }
 
+function get_user_group_id_for_mention_button(elem) {
+    var user_group_id = $(elem).attr('data-user-group-id');
+
+    if (user_group_id) {
+        return user_group_id;
+    }
+
+    return;
+}
+
 function same_day(earlier_msg, later_msg) {
     if (earlier_msg === undefined || later_msg === undefined) {
         return false;
@@ -459,8 +469,6 @@ MessageListView.prototype = {
             if (user_id === "*" || people.is_my_user_id(user_id)) {
                 // Either a wildcard mention or us, so mark it.
                 $(this).addClass('user-mention-me');
-                // TODO: We should probably also mark user groups
-                // you're with the user-mention-me tag.
             }
             if (user_id && user_id !== "*" && !$(this).find(".highlight").length) {
                 // If it's a mention of a specific user, edit the
@@ -471,6 +479,15 @@ MessageListView.prototype = {
             }
         });
 
+        row.find('.user-group-mention').each(function () {
+            var user_group_id = get_user_group_id_for_mention_button(this);
+            var my_user_id = people.my_current_user_id();
+            // Mark user group you're a member of.
+            if (user_groups.is_member_of(user_group_id, my_user_id)) {
+                $(this).addClass('user-mention-me');
+            }
+        });
+
         // Display emoji (including realm emoji) as text if
         // page_params.emojiset is 'text'.
         if (page_params.emojiset === 'text') {