messages: Allow moving a topic to another stream.

This completes the implementation of support for moving a topic to
another stream by adding a basic UI for it.

Fixes #6427, which was previously the most-upvoted issue request in
Zulip.

There are likely to be a bunch of follow-up UI improvements on top of
this change to fully flesh out the feature.

static/js/message_edit.js

@@ -854,4 +854,30 @@ exports.handle_narrow_deactivated = function () {
     }
 };
 
+exports.move_topic_containing_message_to_stream =
+    function (message_id, new_stream_id, new_topic_name) {
+        const request = {
+            stream_id: new_stream_id,
+            propagate_mode: 'change_all',
+            topic: new_topic_name,
+        };
+        channel.patch({
+            url: '/json/messages/' + message_id,
+            data: request,
+            success: function () {
+                // The main UI will update via receiving the event
+                // from server_events.js.
+                // TODO: This should probably remove a spinner and
+                // close the modal.
+            },
+            error: function (xhr) {
+                ui_report.error(i18n.t("Error moving the topic"), xhr,
+                                $("#home-error"));
+                // The fadeTo method used by ui_report.message doesn't work
+                // on this. Hence we fadeOut it here.
+                setTimeout(() => { $("#home-error").fadeOut('slow'); }, 4000);
+            },
+        });
+    };
+
 window.message_edit = exports;

static/js/stream_popover.js

@@ -4,6 +4,7 @@ const render_starred_messages_sidebar_actions = require('../templates/starred_me
 const render_stream_sidebar_actions = require('../templates/stream_sidebar_actions.hbs');
 const render_topic_sidebar_actions = require('../templates/topic_sidebar_actions.hbs');
 const render_unstar_messages_modal = require("../templates/unstar_messages_modal.hbs");
+const render_move_topic_to_stream = require("../templates/move_topic_to_stream.hbs");
 
 // We handle stream popovers and topic popovers in this
 // module.  Both are popped up from the left sidebar.
@@ -262,6 +263,25 @@ function build_starred_messages_popover(e) {
 
 }
 
+function build_move_topic_to_stream_popover(e, current_stream_id, topic_name) {
+    // TODO: Add support for keyboard-alphabet navigation. Some orgs
+    // many streams and scrolling can be a painful process in that
+    // case.
+    //
+    // NOTE: Private streams are also included in this list.  We
+    // likely will make it possible to move messages to/from private
+    // streams in the future.
+    const available_streams = stream_data.subscribed_subs()
+        .filter(s => s.stream_id !== current_stream_id);
+    const args = { available_streams, topic_name, current_stream_id };
+
+    exports.hide_topic_popover();
+
+    $("#move-a-topic-modal-holder").html(render_move_topic_to_stream(args));
+    $('#move_topic_modal').modal('show');
+    e.stopPropagation();
+}
+
 exports.register_click_handlers = function () {
     $('#stream_filters').on('click', '.stream-sidebar-menu-icon', function (e) {
         e.stopPropagation();
@@ -500,6 +520,80 @@ exports.register_topic_handlers = function () {
 
         e.stopPropagation();
     });
+
+    $('body').on('click', '.sidebar-popover-move-topic-messages', function (e) {
+        const topic_row = $(e.currentTarget);
+        const stream_id = parseInt(topic_row.attr('data-stream-id'), 10);
+        const topic_name = topic_row.attr('data-topic-name');
+        build_move_topic_to_stream_popover(e, stream_id, topic_name);
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
+    $('body').on('click', '#topic_stream_edit_form_error .send-status-close', function () {
+        $("#topic_stream_edit_form_error").hide();
+    });
+
+    $('body').on('click', '#do_move_topic_button', function (e) {
+        const params = $('#move_topic_form').serializeArray().reduce(function (obj, item) {
+            obj[item.name] = item.value;
+            return obj;
+        }, {});
+
+        const {old_topic_name, select_stream_id} = params;
+        let {current_stream_id, new_topic_name} = params;
+        current_stream_id = parseInt(current_stream_id, 10);
+
+        // The API endpoint for editing messages to change their
+        // content, topic, or stream requires a message ID.
+        //
+        // Because we don't have full data in the browser client, it's
+        // possible that we might display a topic in the left sidebar
+        // (and thus expose the UI for moving its topic to another
+        // stream) without having a message ID that is definitely
+        // within the topic.  (The comments in stream_topic_history.js
+        // discuss the tricky issues around message deletion that are
+        // involved here).
+        //
+        // To ensure this option works reliably at a small latency
+        // cost for a rare operation, we just ask the server for the
+        // latest message ID in the topic.
+        const data = {
+            anchor: 'newest',
+            num_before: 1,
+            num_after: 0,
+            narrow: JSON.stringify(
+                [{operator: "stream", operand: current_stream_id},
+                 {operator: "topic", operand: old_topic_name}]
+            ),
+        };
+
+        channel.get({
+            url: '/json/messages',
+            data: data,
+            idempotent: true,
+            success: function (data) {
+                const message_id = data.messages[0].id;
+
+                if (old_topic_name.trim() === new_topic_name.trim()) {
+                    // We use `undefined` to tell the server that
+                    // there has been no change in the topic name.
+                    new_topic_name = undefined;
+                }
+
+                if (old_topic_name && select_stream_id) {
+                    message_edit.move_topic_containing_message_to_stream(
+                        message_id, select_stream_id, new_topic_name);
+                    $('#move_topic_modal').modal('hide');
+                }
+            },
+            error: function (xhr) {
+                $("#topic_stream_edit_form_error .error-msg").text(xhr.responseJSON.msg);
+                $("#topic_stream_edit_form_error").show();
+            },
+        });
+        e.preventDefault();
+    });
 };
 
 window.stream_popover = exports;

static/styles/popovers.scss

@@ -97,6 +97,11 @@ ul {
     &.remind_me_popover .remind_icon {
         text-align: center;
     }
+
+    &.topic-move_popover {
+        max-height: 200px;
+        overflow-y: auto;
+    }
 }
 
 .user_popover {
@@ -352,3 +357,8 @@ ul {
     opacity: 0.8;
     padding: 2px 0px 3px 0px;
 }
+
+#topic_stream_edit_form_error {
+    background-color: hsla(0, 70%, 87%, 0.7);
+    color: hsl(0, 100%, 50%);
+}

static/styles/zulip.scss

@@ -2562,6 +2562,10 @@ div.topic_edit_spinner .loading_indicator_spinner {
     opacity: 0.75;
 }
 
+select.inline_select_topic_edit {
+    margin: 0;
+}
+
 // Hide the up and down arrows in the Flatpickr datepicker year
 .flatpickr-months .numInputWrapper span {
     display: none;

static/templates/move_topic_to_stream.hbs

@@ -0,0 +1,31 @@
+<div id="move_topic_modal" class="modal modal-bg hide fade new-style" tabindex="-1" role="dialog" aria-labelledby="move_topic_modal_label" aria-hidden="true">
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
+        <h3 id="move_topic_modal_label">{{t "Move a topic to stream" }} </h3>
+    </div>
+    <div class="modal-body">
+        <p>{{#tr this}}Do you want to move all messages in <strong>__topic_name__</strong> to another stream?{{/tr}}</p>
+        <form id="move_topic_form">
+            <div id="topic_stream_edit_form_error" class="alert">
+                <span class="send-status-close">&times;</span>
+                <span class="error-msg"></span>
+            </div>
+            <select name="select_stream_id" class="inline_select_topic_edit" id="select_stream_id">
+                <option value="">{{t "Select a stream" }}</option>
+                {{#each available_streams}}
+                <option value="{{ this.stream_id }}">#{{this.name}}</option>
+                {{/each}}
+            </select>
+            <input name="new_topic_name" type="text" class="inline_topic_edit" value="{{topic_name}}">
+            <input name="old_topic_name" type="hidden" class="inline_topic_edit" value="{{topic_name}}">
+            <input name="current_stream_id" type="hidden" value="{{current_stream_id}}">
+        </form>
+        <div class="topic_edit_spinner"></div>
+    </div>
+    <div class="modal-footer">
+        <button class="button" data-dismiss="modal">{{t "Cancel" }}</button>
+        <button class="button btn-danger rounded" id="do_move_topic_button">
+            {{t "Move topic" }}
+        </button>
+    </div>
+</div>

static/templates/topic_sidebar_actions.hbs

@@ -40,4 +40,13 @@
     </li>
     {{/if}}
 
+    {{#if is_admin}}
+    <li>
+        <a class="sidebar-popover-move-topic-messages" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
+            <i class="fa fa-arrows" aria-hidden="true"></i>
+            {{#tr this}}Move <b>__topic_name__</b> to another stream.{{/tr}}
+        </a>
+    </li>
+    {{/if}}
+
 </ul>

templates/zerver/app/index.html

@@ -173,5 +173,6 @@
     <div class='notifications top-right'></div>
     <div id="delete-topic-modal-holder"></div>
     <div class="left-sidebar-modal-holder"></div>
+    <div id="move-a-topic-modal-holder"></div>
 </div>
 {% endblock %}

templates/zerver/help/rename-a-topic.md

@@ -1,6 +1,8 @@
 # Rename a topic
 
-By default, any user can rename any topic.
+By default, any user can rename any topic within a stream, and
+organization administrators can additionally move topics from one
+stream to another.
 
 Organization administrators can
 [turn off community topic editing](/help/community-topic-edits), or turn off
@@ -8,7 +10,7 @@ message editing entirely. See the
 [guide to message and topic editing](/help/configure-message-editing-and-deletion)
 for the details on when topic editing is allowed.
 
-### Rename a topic
+## Rename a topic
 
 {start_tabs}
 
@@ -26,3 +28,26 @@ for the details on when topic editing is allowed.
 1. Click **Save**.
 
 {end_tabs}
+
+<br />
+
+## Move a topic to another stream
+
+{!admin-only.md!}
+
+Organization administrators can move a topic from one public stream to
+another.
+
+{start_tabs}
+
+{!stream-actions.md!}
+
+1. Select **Move <topic name\> to another stream**.
+
+1. Select the destination stream for the topic from the streams dropdown list.
+
+1. (Optional) Change the topic.
+
+1. Click **Move topic**.
+
+{end_tabs}