message_edit_history: Add UI for seeing topic edits.

Users can previously see only message content edits, this will enable
them to see topic edits too in the same section, fixes #3731.

Fixes #3731.

frontend_tests/node_tests/templates.js

@@ -936,6 +936,54 @@ run_test('message_edit_history', () => {
                  "1468132659\n        Let\'s go to lunchdinner!\n        Edited by Alice");
 });
 
+run_test('message_and_topic_edit_history', () => {
+    var message = {
+        content: "Let's go to lunch!",
+        edit_history: [
+            {
+                body_to_render: "<p>Let's go to " +
+                                    "<span class='highlight_text_deleted'>lunch</span>" +
+                                    "<span class='highlight_text_inserted'>dinner</span>" +
+                                "!</p>",
+                new_topic: 'Lunch',
+                prev_topic: 'Dinner',
+                topic_edited: true,
+                timestamp: 1468132659,
+                edited_by: 'Alice',
+                posted_or_edited: "Edited by",
+            },
+        ],
+    };
+    var html = "<div>" + render('message_edit_history', {
+        edited_messages: message.edit_history,
+    }) + "</div>";
+    var edited_message = $(html).find("div.messagebox-content");
+    assert.equal(edited_message.text().trim(),
+                 "1468132659\n        Topic: Lunch Dinner\n        Let\'s go to lunchdinner!\n        Edited by Alice");
+});
+
+run_test('topic_edit_history', () => {
+    var message = {
+        content: "Let's go to lunch!",
+        edit_history: [
+            {
+                prev_topic: 'Dinner',
+                new_topic: 'Lunch',
+                topic_edited: true,
+                timestamp: 1468132659,
+                edited_by: 'Alice',
+                posted_or_edited: "Topic edited by",
+            },
+        ],
+    };
+    var html = "<div>" + render('message_edit_history', {
+        edited_messages: message.edit_history,
+    }) + "</div>";
+    var edited_message = $(html).find("div.messagebox-content");
+    assert.equal(edited_message.text().trim(),
+                 "1468132659\n        Topic: Lunch Dinner\n        Topic edited by Alice");
+});
+
 run_test('message_reaction', () => {
     var args = {
         class: 'message_reaction',

frontend_tests/node_tests/util.js

@@ -133,6 +133,10 @@ run_test('get_edit_event_orig_topic', () => {
     assert.equal(util.get_edit_event_orig_topic({orig_subject: 'lunch'}), 'lunch');
 });
 
+run_test('get_edit_event_prev_topic', () => {
+    assert.equal(util.get_edit_event_prev_topic({prev_subject: 'dinner'}), 'dinner');
+});
+
 run_test('is_mobile', () => {
     global.window.navigator = { userAgent: "Android" };
     assert(util.is_mobile());

static/js/message_edit.js

@@ -550,34 +550,42 @@ exports.show_history = function (message) {
         url: "/json/messages/" + message.id + "/history",
         data: {message_id: JSON.stringify(message.id)},
         success: function (data) {
-            // For now, we ignore topic edits
             var content_edit_history = [];
             var prev_timestamp;
             _.each(data.message_history, function (msg, index) {
-                if (index !== 0 && !msg.prev_content) {
-                    // Skip topic edits
-                    return;
-                }
-
                 // Format timestamp nicely for display
                 var timestamp = timerender.get_full_time(msg.timestamp);
                 var item = {
                     timestamp: moment(timestamp).format("h:mm A"),
                     display_date: moment(timestamp).format("MMMM D, YYYY"),
                 };
+                if (msg.user_id) {
+                    var person = people.get_person_from_user_id(msg.user_id);
+                    item.edited_by = person.full_name;
+                }
+
                 if (index === 0) {
                     item.posted_or_edited = "Posted by";
                     item.body_to_render = msg.rendered_content;
                     prev_timestamp = timestamp;
                     item.show_date_row = true;
-                } else {
+                } else if (msg.prev_topic && msg.prev_content) {
+                    item.posted_or_edited = "Edited by";
+                    item.body_to_render = msg.content_html_diff;
+                    item.show_date_row = !moment(timestamp).isSame(prev_timestamp, 'day');
+                    item.topic_edited = true;
+                    item.prev_topic = msg.prev_topic;
+                    item.new_topic = msg.topic;
+                } else if (msg.prev_topic) {
+                    item.posted_or_edited = "Topic edited by";
+                    item.topic_edited = true;
+                    item.prev_topic = msg.prev_topic;
+                    item.new_topic = msg.topic;
+                } else {
+                    // just a content edit
                     item.posted_or_edited = "Edited by";
                     item.body_to_render = msg.content_html_diff;
                     item.show_date_row = !moment(timestamp).isSame(prev_timestamp, 'day');
-                }
-                if (msg.user_id) {
-                    var person = people.get_person_from_user_id(msg.user_id);
-                    item.edited_by = person.full_name;
                 }
 
                 content_edit_history.push(item);

static/js/popovers.js

@@ -399,7 +399,8 @@ exports.toggle_actions_popover = function (element, id) {
                 muting.is_topic_muted(message.stream_id, topic);
 
         var should_display_edit_history_option = _.any(message.edit_history, function (entry) {
-            return entry.prev_content !== undefined;
+            var prev_topic = util.get_edit_event_prev_topic(entry);
+            return entry.prev_content !== undefined || prev_topic !== undefined;
         }) && page_params.realm_allow_edit_history;
 
         // Disabling this for /me messages is a temporary workaround

static/js/util.js

@@ -337,6 +337,10 @@ exports.get_edit_event_orig_topic = function (obj) {
     return obj.orig_subject;
 };
 
+exports.get_edit_event_prev_topic = function (obj) {
+    return obj.prev_subject;
+};
+
 exports.is_topic_synonym = function (operator) {
     return operator === 'subject';
 };

static/templates/message_edit_history.handlebars

@@ -6,7 +6,12 @@
     {{/if}}
     <div class="messagebox-content">
         <div class="message_top_line"><span class="message_time">{{ timestamp }}</span></div>
+        {{#if topic_edited}}
+        <div class="message_content message_edit_history_content"><p>Topic: <span class="highlight_text_inserted">{{ new_topic }}</span> <span class="highlight_text_deleted">{{ prev_topic }}</span></p></div>
+        {{/if}}
+        {{#if body_to_render}}
         <div class="message_content message_edit_history_content">{{{ body_to_render }}}</div>
+        {{/if}}
         <div class="message_author"><div class="author_details">{{ posted_or_edited }} {{ edited_by }}</div></div>
     </div>
     <hr/>