recent_topics: Add filter button to show muted topics.

We don't show muted streams/topics by defualt. Only when user
turns on muted filter.

frontend_tests/node_tests/recent_topics.js

@@ -14,6 +14,11 @@ set_global('stream_data', {
             is_web_public: true,
         };
     },
+    is_muted: () => {
+        // We only test via muted topics for now.
+        // TODO: Make muted streams and test them.
+        return false;
+    },
 });
 set_global('overlays', {
     open_overlay: (opts) => {
@@ -257,6 +262,7 @@ function generate_topic_data(topic_info_array) {
             topic_url: 'https://www.example.com',
             unread_count: unread_count,
             muted: muted,
+            topic_muted: muted,
             participated: participated,
         });
     }
@@ -279,6 +285,7 @@ run_test("test_recent_topics_launch", () => {
     const expected = {
         filter_participated: false,
         filter_unread: false,
+        filter_muted: false,
         recent_topics: generate_topic_data([
             // stream_id, topic, unread_count, muted, participated
             [1, 'topic-7', 1, true, true],
@@ -337,6 +344,7 @@ run_test('test_filter_unread', () => {
     let expected =   {
         filter_participated: false,
         filter_unread: true,
+        filter_muted: false,
         recent_topics: generate_topic_data([
             // stream_id, topic, unread_count,  muted, participated
             [1, 'topic-7', 1, true, true],
@@ -436,12 +444,15 @@ run_test('test_filter_participated', () => {
     rt.set_filter('all');
 });
 
+// TODO: Add tests for filter_muted.
+
 run_test('test_search_keyword', () => {
     // TODO: Test search mechanism properly.
     // This is only intended to pass coverage currently.
     const expected =   {
         filter_participated: false,
         filter_unread: false,
+        filter_muted: false,
         recent_topics: generate_topic_data([
             // stream_id, topic, unread_count,  muted, participated
             [1, 'topic-7', 1, true, true],
@@ -548,14 +559,12 @@ run_test('basic assertions', () => {
     assert.equal(Array.from(all_topics.keys()).toString(),
                  '1:topic-7,1:topic-3,1:topic-6,1:topic-5,1:topic-4,1:topic-2,1:topic-1');
 
-    // unmute topic7
-    assert.equal(rt.update_topic_is_muted(stream1, topic7, false), true);
-
-    // mute topic7
-    assert.equal(rt.update_topic_is_muted(stream1, topic7, true), true);
-
+    // update_topic_is_muted now relies on external libraries completely
+    // so we don't need to check anythere here.
+    generate_topic_data([[1, topic1, 0, false, true]]);
+    assert.equal(rt.update_topic_is_muted(stream1, topic1), true);
     // a topic gets muted which we are not tracking
-    assert.equal(rt.update_topic_is_muted(stream1, "topic-10", true), false);
+    assert.equal(rt.update_topic_is_muted(stream1, "topic-10"), false);
 });
 
 run_test('test_reify_local_echo_message', () => {

static/js/click_handlers.js

@@ -346,6 +346,13 @@ exports.initialize = function () {
         muting_ui.mute(stream_id, topic);
     });
 
+    $('body').on('click', '.on_hover_topic_unmute', function (e) {
+        e.stopPropagation();
+        const stream_id = parseInt($(e.currentTarget).attr('data-stream-id'), 10);
+        const topic = $(e.currentTarget).attr('data-topic-name');
+        muting_ui.unmute(stream_id, topic);
+    });
+
     // RECENT TOPICS
 
     $('body').on('click', '.on_hover_topic_read', function (e) {

static/js/muting_ui.js

@@ -112,7 +112,7 @@ exports.mute = function (stream_id, topic) {
         title_text: i18n.t("Topic muted"),
         undo_button_text: i18n.t("Unmute"),
     });
-    recent_topics.update_topic_is_muted(stream_id, topic, true);
+    recent_topics.update_topic_is_muted(stream_id, topic);
 };
 
 exports.unmute = function (stream_id, topic) {
@@ -125,7 +125,7 @@ exports.unmute = function (stream_id, topic) {
     exports.rerender();
     exports.persist_unmute(stream_id, topic);
     feedback_widget.dismiss();
-    recent_topics.update_topic_is_muted(stream_id, topic, false);
+    recent_topics.update_topic_is_muted(stream_id, topic);
 };
 
 exports.toggle_mute = function (message) {

static/js/recent_topics.js

@@ -88,7 +88,9 @@ function format_topic(topic_data) {
     // We only supply the data to the topic rows and let jquery
     // display / hide them according to filters instead of
     // doing complete re-render.
-    const muted = !!muting.is_topic_muted(stream_id, topic);
+    const topic_muted = !!muting.is_topic_muted(stream_id, topic);
+    const stream_muted = stream_data.is_muted(stream_id);
+    const muted = topic_muted || stream_muted;
     const unread_count = unread.unread_topic_counter.get(stream_id, topic);
 
     // Display in most recent sender first order
@@ -112,6 +114,7 @@ function format_topic(topic_data) {
         senders: senders_info,
         count_senders: Math.max(0, all_senders.length - MAX_AVATAR),
         muted: muted,
+        topic_muted: topic_muted,
         participated: topic_data.participated,
     };
 }
@@ -149,7 +152,7 @@ function is_row_hidden(data) {
         return true;
     } else if (!participated && filters.has('participated')) {
         return true;
-    } else if (muted) {
+    } else if (muted && !filters.has('muted')) {
         return true;
     }
     return false;
@@ -196,7 +199,7 @@ exports.inplace_rerender = function (topic_key) {
     }
 };
 
-exports.update_topic_is_muted = function (stream_id, topic, is_muted) {
+exports.update_topic_is_muted = function (stream_id, topic) {
     const key = stream_id + ":" + topic;
     if (!topics.has(key)) {
         // we receive mute request for a topic we are
@@ -204,11 +207,7 @@ exports.update_topic_is_muted = function (stream_id, topic, is_muted) {
         return false;
     }
 
-    if (is_muted) {
-        get_topic_row(key).hide();
-    } else {
-        get_topic_row(key).show();
-    }
+    exports.inplace_rerender(key);
     return true;
 };
 
@@ -262,6 +261,7 @@ exports.update_filters_view = function () {
     const rendered_filters = render_recent_topics_filters({
         filter_participated: filters.has('participated'),
         filter_unread: filters.has('unread'),
+        filter_muted: filters.has('muted'),
     });
     $("#recent_filters_group").html(rendered_filters);
 
@@ -297,6 +297,7 @@ exports.complete_rerender = function () {
         recent_topics: format_all_topics(),
         filter_participated: filters.has('participated'),
         filter_unread: filters.has('unread'),
+        filter_muted: filters.has('muted'),
     });
     $('#recent_topics_table').html(rendered_body);
     exports.update_filters_view();

static/styles/zulip.scss

@@ -1128,6 +1128,7 @@ td.pointer {
 .on_hover_topic_edit,
 .always_visible_topic_edit,
 .on_hover_topic_mute,
+.on_hover_topic_unmute,
 .on_hover_topic_read {
     &:hover {
         cursor: pointer;

static/templates/recent_topic_row.hbs

@@ -10,7 +10,11 @@
         {{#if unread_count}}<span class="recent_topic_unread_count">+{{unread_count}}</span>{{/if}}
     </td>
     <td class="recent_topic_actions">
+        {{#if topic_muted}}
+        <i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Unmute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
+        {{else}}
         <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Mute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
+        {{/if}}
         <i class="fa fa-check-circle on_hover_topic_read recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Mark as read' }}" role="button" tabindex="0" aria-label="{{t 'Mark as read' }}"></i>
     </td>
     <td class='recent_topic_users'>

static/templates/recent_topics_filters.hbs

@@ -15,3 +15,11 @@
     {{/if}}
     {{t 'Participated' }}
 </button>
+<button data-filter="muted" type="button" class="btn btn-default btn-recent-filters">
+    {{#if filter_muted }}
+    <i class="fa fa-check-square-o"></i>
+    {{else}}
+    <i class="fa fa-square-o"></i>
+    {{/if}}
+    {{t 'Muted' }}
+</button>