popover: Add "Copy mention syntax" option for non-message user popovers.

This commit replaces the "Reply mentioning user" option with "Copy mention
syntax" for user info popovers that are not opened from a message.

Clicking on "Copy mention syntax" will copy the mention syntax of user to
clipboard.

This change is done because user popovers not opened from message are not
linked to any message.

frontend_tests/node_tests/popovers.js

@@ -43,9 +43,7 @@ set_global("stream_popover", {
 
 set_global("stream_data", {});
 
-function ClipboardJS(sel) {
+const ClipboardJS = noop;
-    assert.equal(sel, ".copy_link");
-}
 
 rewiremock.proxy(() => zrequire("popovers"), {
     clipboard: ClipboardJS,
@@ -176,7 +174,9 @@ run_test("sender_hover", (override) => {
                     is_active: true,
                     is_bot: undefined,
                     is_sender_popover: true,
+                    has_message_context: true,
                     status_text: "on the beach",
+                    user_mention_syntax: "@**Alice Smith**",
                 });
                 return "content-html";
 

static/js/popovers.js

@@ -169,6 +169,7 @@ function render_user_info_popover(
     user,
     popover_element,
     is_sender_popover,
+    has_message_context,
     private_msg_class,
     template_class,
     popover_placement,
@@ -189,6 +190,7 @@ function render_user_info_popover(
     const args = {
         can_revoke_away,
         can_set_away,
+        has_message_context,
         is_active: people.is_active_user_for_popover(user.user_id),
         is_bot: user.is_bot,
         is_me,
@@ -206,6 +208,7 @@ function render_user_info_popover(
         user_time: people.get_user_time(user.user_id),
         user_type: people.get_user_type(user.user_id),
         status_text: user_status.get_status_text(user.user_id),
+        user_mention_syntax: people.get_mention_syntax(user.full_name, user.user_id),
     };
 
     if (user.is_bot) {
@@ -271,6 +274,7 @@ function show_user_info_popover_for_message(element, user, message) {
             user,
             elt,
             is_sender_popover,
+            true,
             "respond_personal_button",
             "message-info-popover",
             "right",
@@ -921,6 +925,7 @@ exports.register_click_handlers = function () {
             user,
             target,
             false,
+            false,
             "compose_private_message",
             "user_popover",
             popover_placement,
@@ -1108,6 +1113,14 @@ exports.register_click_handlers = function () {
         e.preventDefault();
     });
 
+    new ClipboardJS(".copy_mention_syntax");
+
+    $("body").on("click", ".copy_mention_syntax", (e) => {
+        exports.hide_all();
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
     (function () {
         let last_scroll = 0;
 

static/templates/user_info_popover_content.hbs

@@ -112,9 +112,19 @@
     {{/if}}
     {{#unless is_me}}
     <li>
+        {{#if has_message_context}}
         <a tabindex="0" class="mention_user">
-            <i class="fa fa-at" aria-hidden="true"></i> {{#tr this}}Reply mentioning user{{/tr}} {{#if is_sender_popover}}<span class="hotkey-hint">(@)</span>{{/if}}
+            <i class="fa fa-at" aria-hidden="true"></i>
+            {{#tr this}}Reply mentioning user{{/tr}}
+            {{#if is_sender_popover}}<span class="hotkey-hint">(@)</span>{{/if}}
         </a>
+        {{else}}
+        <a tabindex="0" class="copy_mention_syntax" data-clipboard-text="{{ user_mention_syntax }}">
+            <i class="fa fa-at" aria-hidden="true"></i>
+            {{#tr this}}Copy mention syntax{{/tr}}
+            {{#if is_sender_popover}}<span class="hotkey-hint">(@)</span>{{/if}}
+        </a>
+        {{/if}}
     </li>
     {{/unless}}
     {{#if is_me}}