muting: Add stream_id to markup for mute settings.

We also prefer `attr` over `data` (it's more greppable).

frontend_tests/node_tests/settings_muting.js

@@ -39,12 +39,12 @@ run_test('settings', () => {
     };
 
     var data_called = 0;
-    tr_html.data = function (opts) {
-        if (opts === 'stream') {
+    tr_html.attr = function (opts) {
+        if (opts === 'data-stream-id') {
             data_called += 1;
-            return 'frontend';
+            return frontend.stream_id;
         }
-        if (opts === 'topic') {
+        if (opts === 'data-topic') {
             data_called += 1;
             return 'js';
         }

frontend_tests/node_tests/templates.js

@@ -1547,7 +1547,8 @@ run_test('user_profile_modal', () => {
 run_test('muted_topic_ui_row', () => {
     var args = {
         stream: 'Verona',
-        topic: 'Verona2',
+        stream_id: 99,
+        topic: 'pizza',
     };
 
     var html = '<table id="muted-topics-table">';
@@ -1556,8 +1557,8 @@ run_test('muted_topic_ui_row', () => {
     html += '</tbody>';
     html += '</table>';
 
-    assert.equal($(html).find("tr").data("stream"), "Verona");
-    assert.equal($(html).find("tr").data("topic"), "Verona2");
+    assert.equal($(html).find("tr").attr("data-stream-id"), 99);
+    assert.equal($(html).find("tr").attr("data-topic"), "pizza");
 });
 
 run_test('embedded_bot_config_item', () => {

static/js/muting_ui.js

@@ -159,8 +159,24 @@ exports.update_muted_topics = function (muted_topics) {
 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]});
+    _.each(muted_topics, function (tup) {
+        var stream = tup[0];
+        var topic = tup[1];
+
+        var stream_id = stream_data.get_stream_id(stream);
+
+        if (!stream_id) {
+            blueslip.warn('Unknown stream in set_up_muted_topics_ui: ' + stream);
+            return;
+        }
+
+        var template_data = {
+            stream: stream,
+            stream_id: stream_id,
+            topic: topic,
+        };
+
+        var row = templates.render('muted_topic_ui_row', template_data);
         muted_topics_table.append(row);
     });
 };

static/js/settings_muting.js

@@ -5,17 +5,11 @@ var exports = {};
 exports.set_up = function () {
     $('body').on('click', '.settings-unmute-topic', function (e) {
         var $row = $(this).closest("tr");
-        var stream = $row.data("stream");
-        var topic = $row.data("topic");
+        var stream_id = $row.attr("data-stream-id");
+        var topic = $row.attr("data-topic");
 
         e.stopImmediatePropagation();
 
-        var stream_id = stream_data.get_stream_id(stream);
-
-        if (!stream_id) {
-            return;
-        }
-
         muting_ui.unmute(stream_id, topic);
         $row.remove();
     });

static/templates/muted_topic_ui_row.handlebars

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

tools/test-js-with-node

@@ -66,7 +66,7 @@ enforce_fully_covered = {
     'static/js/search_util.js',
     # Removed because we're migrating code from uncovered other settings pages to here.
     # 'static/js/settings_ui.js',
-    # 'static/js/settings_muting.js',
+    'static/js/settings_muting.js',
     'static/js/settings_user_groups.js',
     'static/js/stream_data.js',
     'static/js/stream_events.js',