user_card_popover: Show popover on all .messagebox user mention.

Show user card popover for scheduled messages overlay, compose box
preview, message edit preview, message edit history.

`.messagebox` was chosen as the selector since that was the nearest
parent class that was common for all of the above.

`@all` does not have a popover and that's why it will have the same
pointer as its parent element. We also introduce a new class called
`.user-mention-all` for managing css rules specific to that mention.

web/src/markdown.ts

@@ -200,13 +200,13 @@ function parse_with_options(
                 let classes;
                 let display_text;
                 if (silently) {
-                    classes = "user-mention silent";
+                    classes = "user-mention channel-wildcard-mention silent";
                     display_text = mention;
                 } else {
                     // Stream Wildcard mention
                     mentioned_stream_wildcard = true;
                     display_text = "@" + mention;
-                    classes = "user-mention";
+                    classes = "user-mention channel-wildcard-mention";
                 }
 
                 return `<span class="${classes}" data-user-id="*">${_.escape(display_text)}</span>`;
@@ -334,8 +334,8 @@ function parse_with_options(
         silencedMentionHandler(quote: string): string {
             // Silence quoted personal and stream wildcard mentions.
             quote = quote.replaceAll(
-                /(<span class="user-mention)(" data-user-id="(\d+|\*)">)@/g,
-                "$1 silent$2",
+                /(<span class="user-mention( channel-wildcard-mention)?)(" data-user-id="(\d+|\*)">)@/g,
+                "$1 silent$3",
             );
 
             // Silence quoted topic wildcard mentions.

web/src/user_card_popover.js

@@ -580,6 +580,10 @@ function register_click_handlers() {
         toggle_user_card_popover_for_message(this, user, message.sender_id, true);
     });
 
+    // Note: Message feeds and drafts have their own direct event listeners
+    // that run before this one and call stopPropagation.
+    $("body").on("click", ".messagebox .user-mention", unsaved_message_user_mention_event_handler);
+
     $("body").on("click", ".user-card-popover-actions .narrow_to_private_messages", (e) => {
         const user_id = elem_to_user_id($(e.target).parents("ul"));
         const email = people.get_by_user_id(user_id).email;

web/styles/rendered_markdown.css

@@ -173,6 +173,9 @@
     }
 
     .user-mention {
+        /* We have to explicitly mention this for compose box preview
+           where cursor is set to not-allowed */
+        cursor: pointer;
         color: var(--color-text-other-mention);
         background-color: var(--color-background-text-direct-mention);
 
@@ -186,6 +189,12 @@
         }
     }
 
+    /* We show the same cursor as the parent element for `@all`
+       mention */
+    .user-mention-all {
+        cursor: inherit;
+    }
+
     .user-mention[data-user-id="*"],
     .user-group-mention,
     .topic-mention {

web/tests/markdown.test.js

@@ -441,17 +441,17 @@ test("marked", () => {
         {
             input: "Stream Wildcard mention: @**all**\nStream Wildcard silent mention: @_**all**",
             expected:
-                '<p>Stream Wildcard mention: <span class="user-mention" data-user-id="*">@all</span><br>\nStream Wildcard silent mention: <span class="user-mention silent" data-user-id="*">all</span></p>',
+                '<p>Stream Wildcard mention: <span class="user-mention channel-wildcard-mention" data-user-id="*">@all</span><br>\nStream Wildcard silent mention: <span class="user-mention channel-wildcard-mention silent" data-user-id="*">all</span></p>',
         },
         {
             input: "> Stream Wildcard mention in quote: @**all**\n\n> Another stream wildcard mention in quote: @_**all**",
             expected:
-                '<blockquote>\n<p>Stream Wildcard mention in quote: <span class="user-mention silent" data-user-id="*">all</span></p>\n</blockquote>\n<blockquote>\n<p>Another stream wildcard mention in quote: <span class="user-mention silent" data-user-id="*">all</span></p>\n</blockquote>',
+                '<blockquote>\n<p>Stream Wildcard mention in quote: <span class="user-mention channel-wildcard-mention silent" data-user-id="*">all</span></p>\n</blockquote>\n<blockquote>\n<p>Another stream wildcard mention in quote: <span class="user-mention channel-wildcard-mention silent" data-user-id="*">all</span></p>\n</blockquote>',
         },
         {
             input: "```quote\nStream Wildcard mention in quote: @**all**\n```\n\n```quote\nAnother stream wildcard mention in quote: @_**all**\n```",
             expected:
-                '<blockquote>\n<p>Stream Wildcard mention in quote: <span class="user-mention silent" data-user-id="*">all</span></p>\n</blockquote>\n<blockquote>\n<p>Another stream wildcard mention in quote: <span class="user-mention silent" data-user-id="*">all</span></p>\n</blockquote>',
+                '<blockquote>\n<p>Stream Wildcard mention in quote: <span class="user-mention channel-wildcard-mention silent" data-user-id="*">all</span></p>\n</blockquote>\n<blockquote>\n<p>Another stream wildcard mention in quote: <span class="user-mention channel-wildcard-mention silent" data-user-id="*">all</span></p>\n</blockquote>',
         },
         {
             input: "Topic Wildcard mention: @**topic**\nTopic Wildcard silent mention: @_**topic**",

zerver/lib/markdown/__init__.py

@@ -1928,6 +1928,8 @@ class UserMentionPattern(CompiledInlineProcessor):
             text = f"@{name}"
             if topic_wildcard:
                 el.set("class", "topic-mention")
+            elif stream_wildcard:
+                el.set("class", "user-mention channel-wildcard-mention")
             else:
                 el.set("class", "user-mention")
             if silent:

zerver/tests/test_markdown.py

@@ -2140,7 +2140,7 @@ class MarkdownMentionTest(ZulipTestCase):
             rendering_result = render_message_markdown(msg, content)
             self.assertEqual(
                 rendering_result.rendered_content,
-                f'<p><span class="user-mention" data-user-id="*">@{stream_wildcard}</span> test</p>',
+                f'<p><span class="user-mention channel-wildcard-mention" data-user-id="*">@{stream_wildcard}</span> test</p>',
             )
             self.assertFalse(rendering_result.mentions_topic_wildcard)
             self.assertTrue(rendering_result.mentions_stream_wildcard)
@@ -2363,7 +2363,7 @@ class MarkdownMentionTest(ZulipTestCase):
             rendering_result = render_message_markdown(msg, content)
             self.assertEqual(
                 rendering_result.rendered_content,
-                f'<p><span class="user-mention silent" data-user-id="*">{wildcard}</span></p>',
+                f'<p><span class="user-mention channel-wildcard-mention silent" data-user-id="*">{wildcard}</span></p>',
             )
             self.assertFalse(rendering_result.mentions_stream_wildcard)
 
@@ -2566,7 +2566,7 @@ class MarkdownMentionTest(ZulipTestCase):
         def assert_silent_mention(content: str, wildcard: str) -> None:
             expected = (
                 "<blockquote>\n<p>"
-                f'<span class="user-mention silent" data-user-id="*">{wildcard}</span>'
+                f'<span class="user-mention channel-wildcard-mention silent" data-user-id="*">{wildcard}</span>'
                 "</p>\n</blockquote>"
             )
             rendering_result = render_message_markdown(message, content)