mute user: Add dev-only UI to mute/unmute a user.

Since the "mute users" feature isn't complete yet,
this UI is shown only in development setups.
Ideally we should have had this commit after the whole
feature was completed and merged, but doing so makes it
difficult to test and merge subparts of the feature one by
one (which is a better workflow, while we still decide what
exactly we want this feature to do).

This commit adds a new button in the user info popover
to mute or unmute the user, and uses a confirmation
dialog while muting, because muting a user accidently can lead
to the muter losing out on a lot of information.

TODOs when making this UI visible in production-
1. Make a /help page and link to it from the confirmation
dialog and the API docs.

frontend_tests/node_tests/popovers.js

@@ -97,6 +97,7 @@ function test_ui(label, f) {
         page_params.is_admin = false;
         page_params.realm_email_address_visibility = 3;
         page_params.custom_profile_fields = [];
+        page_params.development_environment = false;
         override(popovers, "clipboard_enable", noop);
         popovers.clear_for_testing();
         popovers.register_click_handlers();
@@ -158,6 +159,8 @@ test_ui("sender_hover", (override) => {
                 assert.deepEqual(opts, {
                     can_set_away: false,
                     can_revoke_away: false,
+                    can_mute: false,
+                    can_unmute: false,
                     user_full_name: "Alice Smith",
                     user_email: "alice@example.com",
                     user_id: 42,

static/js/muting_ui.js

@@ -1,15 +1,19 @@
 import $ from "jquery";
 
+import render_confirm_mute_user from "../templates/confirm_mute_user.hbs";
 import render_muted_topic_ui_row from "../templates/muted_topic_ui_row.hbs";
 import render_topic_muted from "../templates/topic_muted.hbs";
 
 import * as channel from "./channel";
+import * as confirm_dialog from "./confirm_dialog";
 import * as feedback_widget from "./feedback_widget";
 import {$t} from "./i18n";
 import * as ListWidget from "./list_widget";
 import * as message_lists from "./message_lists";
 import * as muting from "./muting";
 import * as overlays from "./overlays";
+import * as people from "./people";
+import * as popovers from "./popovers";
 import * as recent_topics from "./recent_topics";
 import * as settings_muted_topics from "./settings_muted_topics";
 import * as stream_data from "./stream_data";
@@ -158,6 +162,40 @@ export function toggle_topic_mute(message) {
     }
 }
 
+export function mute_user(user_id) {
+    channel.post({
+        url: "/json/users/me/muted_users/" + user_id,
+        idempotent: true,
+    });
+}
+
+export function confirm_mute_user(user_id) {
+    function on_click() {
+        mute_user(user_id);
+    }
+
+    const modal_parent = $(".mute-user-modal-holder");
+    const html_body = render_confirm_mute_user({
+        user_name: people.get_full_name(user_id),
+    });
+
+    confirm_dialog.launch({
+        parent: modal_parent,
+        html_heading: $t({defaultMessage: "Mute user"}),
+        html_body,
+        html_yes_button: $t({defaultMessage: "Confirm"}),
+        on_click,
+    });
+}
+
+export function unmute_user(user_id) {
+    channel.del({
+        url: "/json/users/me/muted_users/" + user_id,
+        idempotent: true,
+    });
+}
+
 export function handle_user_updates(muted_user_ids) {
+    popovers.hide_all();
     muting.set_muted_users(muted_user_ids);
 }

static/js/popovers.js

@@ -239,9 +239,15 @@ function render_user_info_popover(
         }
     }
 
+    const is_dev = page_params.development_environment;
+    const muting_allowed = is_dev && !is_me && !user.is_bot;
+    const is_muted = muting.is_user_muted(user.user_id);
+
     const args = {
         can_revoke_away,
         can_set_away,
+        can_mute: muting_allowed && !is_muted,
+        can_unmute: muting_allowed && is_muted,
         has_message_context,
         is_active: people.is_active_user_for_popover(user.user_id),
         is_bot: user.is_bot,
@@ -1068,6 +1074,24 @@ export function register_click_handlers() {
         e.preventDefault();
     });
 
+    $("body").on("click", ".info_popover_actions .sidebar-popover-mute-user", (e) => {
+        const user_id = elem_to_user_id($(e.target).parents("ul"));
+        hide_message_info_popover();
+        hide_user_sidebar_popover();
+        e.stopPropagation();
+        e.preventDefault();
+        muting_ui.confirm_mute_user(user_id);
+    });
+
+    $("body").on("click", ".info_popover_actions .sidebar-popover-unmute-user", (e) => {
+        const user_id = elem_to_user_id($(e.target).parents("ul"));
+        hide_message_info_popover();
+        hide_user_sidebar_popover();
+        muting_ui.unmute_user(user_id);
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
     $("#user_presences").on("click", ".user-list-sidebar-menu-icon", function (e) {
         e.stopPropagation();
 

static/templates/confirm_mute_user.hbs

@@ -0,0 +1,5 @@
+<p>
+    {{#tr}}
+    Are you sure you want to mute <b>{user_name}</b>?  Messages sent by muted users will never trigger notifications, will be marked as read, and will be hidden.
+    {{/tr}}
+</p>

static/templates/user_info_popover_content.hbs

@@ -150,4 +150,21 @@
             <i class="fa fa-paper-plane" aria-hidden="true"></i> {{#tr}}View messages sent{{/tr}}
         </a>
     </li>
+
+    {{#if can_mute }}
+    <hr />
+    <li>
+        <a tabindex="0" class="sidebar-popover-mute-user">
+            <i class="fa fa-eye-slash" aria-hidden="true"></i> {{#tr}}Mute this user{{/tr}}
+        </a>
+    </li>
+    {{/if}}
+    {{#if can_unmute}}
+    <hr />
+    <li>
+        <a tabindex="0" class="sidebar-popover-unmute-user">
+            <i class="fa fa-eye" aria-hidden="true"></i> {{#tr}}Unmute this user{{/tr}}
+        </a>
+    </li>
+    {{/if}}
 </ul>

templates/zerver/app/index.html

@@ -176,6 +176,7 @@
     <div id="user-profile-modal-holder"></div>
     <div id="delete-topic-modal-holder"></div>
     <div class="left-sidebar-modal-holder"></div>
+    <div class="mute-user-modal-holder"></div>
     <div id="move-a-topic-modal-holder"></div>
 </div>
 {% endblock %}