Add UI for seeing all muted topics in settings page.

Fixes #2322.

frontend_tests/node_tests/templates.js

@@ -43,6 +43,7 @@ function render(template_name, args) {
         'bot-settings',
         'alert-word-settings',
         'attachments-settings',
+        'muted-topics-settings',
         'ui-settings',
     ]);
 }());
@@ -966,6 +967,22 @@ function render(template_name, args) {
     assert.equal(a.text().trim(), 'Narrow to private messages with Hamlet');
 }());
 
+(function muted_topic_ui_row() {
+    var args = {
+        stream: 'Verona',
+        topic: 'Verona2',
+    };
+
+    var html = '<table id="muted-topics-table">';
+    html += '<tbody>';
+    html += render('muted_topic_ui_row', args);
+    html += '</tbody>';
+    html += '</table>';
+
+    assert.equal($(html).find("tr").data("stream"), "Verona");
+    assert.equal($(html).find("tr").data("topic"), "Verona2");
+}());
+
 // By the end of this test, we should have compiled all our templates.  Ideally,
 // we will also have exercised them to some degree, but that's a little trickier
 // to enforce.

static/js/muting_ui.js

@@ -129,6 +129,15 @@ exports.update_muted_topics = function (muted_topics) {
     unread_ui.update_unread_counts();
 };
 
+exports.set_up_muted_topics_ui = function (muted_topics) {
+    var muted_topics_table = $("#muted_topics_table tbody");
+    muted_topics_table.empty();
+    _.each(muted_topics, function (list) {
+        var row = templates.render('muted_topic_ui_row', {stream: list[0], topic: list[1]});
+        muted_topics_table.append(row);
+    });
+};
+
 $(function () {
     exports.update_muted_topics(page_params.muted_topics);
 });

static/js/popovers.js

@@ -269,6 +269,7 @@ exports.topic_ops = {
         muting_ui.mute_topic(stream, topic);
         muting_ui.persist_and_rerender();
         muting_ui.notify_with_undo_option(stream, topic);
+        muting_ui.set_up_muted_topics_ui(muting.get_muted_topics());
     },
     // we don't run a unmute_notif function because it isn't an issue as much
     // if someone accidentally unmutes a stream rather than if they mute it
@@ -277,6 +278,7 @@ exports.topic_ops = {
         popovers.hide_topic_sidebar_popover();
         muting_ui.unmute_topic(stream, topic);
         muting_ui.persist_and_rerender();
+        muting_ui.set_up_muted_topics_ui(muting.get_muted_topics());
     },
 };
 

static/js/settings.js

@@ -837,6 +837,20 @@ function _setup_page() {
             },
         });
     });
+
+    $(function () {
+        $('body').on('click', '.settings-unmute-topic', function (e) {
+            var $row = $(this).closest("tr");
+            var stream = $row.data("stream");
+            var topic = $row.data("topic");
+
+            popovers.topic_ops.unmute(stream, topic);
+            $row.remove();
+            e.stopImmediatePropagation();
+        });
+
+        muting_ui.set_up_muted_topics_ui(muting.get_muted_topics());
+    });
 }
 
 function _update_page() {

static/styles/settings.css

@@ -789,3 +789,13 @@ input[type=text]#settings_search {
 #administration #submit-add-alias {
     width: 75px;
 }
+
+#muted_topics_table {
+    margin-bottom: 0px;
+    width: 90%;
+    margin: 0 auto;
+}
+
+#muted_topics_table tbody {
+    border-bottom: none;
+}

static/templates/muted_topic_ui_row.handlebars

@@ -0,0 +1,5 @@
+<tr data-stream="{{stream}}" data-topic="{{topic}}">
+  <td>{{stream}}</td>
+  <td>{{topic}}</td>
+  <td><a class="settings-unmute-topic">Unmute</a></td>
+</tr>

static/templates/settings/muted-topics-settings.handlebars

@@ -0,0 +1,14 @@
+<div id="muted-topic-settings" class="settings-section" data-name="muted-topics">
+  <div class="settings-section-title">
+    <i class="icon-vector-eye-close settings-section-icon"></i>
+    {{t "Muted topics" }}
+  </div>
+  <table id="muted_topics_table" class="table">
+    <thead>
+      <th>Stream</th>
+      <th>Topic</th>
+      <th>Actions</th>
+    </thead>
+    <tbody></tbody>
+  </table>
+</div>

static/templates/settings_tab.handlebars

@@ -13,5 +13,7 @@
 
     {{ partial "attachments-settings" }}
 
+    {{ partial "muted-topics-settings" }}
+
     {{ partial "ui-settings" }}
 </div>

templates/zerver/settings_overlay.html

@@ -32,6 +32,10 @@
           <div class="icon icon-vector-paper-clip"></div>
           <div class="text">{{ _('Uploaded files') }}</div>
         </li>
+        <li tabindex="1" data-section="muted-topics">
+          <div class="icon icon-vector-eye-close"></div>
+          <div class="text">{{ _('Muted topics') }}</div>
+        </li>
         <li tabindex="1" data-section="zulip-labs">
           <i class="icon icon-vector-beaker"></i>
           <div class="text">{{ _('Zulip labs') }}</div>