compose: Add banner when topic is moved and recipient is updated.

This commit adds the INFO compose banner for new channel/topic when the
recipient is updated when topic is moved.

fixes: #33445.

web/src/compose_banner.ts

@@ -37,6 +37,7 @@ export const CLASSNAMES = {
     ...MESSAGE_SENT_CLASSNAMES,
     non_interleaved_view_messages_fading: "non_interleaved_view_messages_fading",
     interleaved_view_messages_fading: "interleaved_view_messages_fading",
+    topic_is_moved: "topic_is_moved",
     // unmute topic notifications are styled like warnings but have distinct behaviour
     unmute_topic_notification: "unmute_topic_notification warning-style",
     // warnings

web/src/compose_recipient.ts

@@ -114,6 +114,10 @@ export function update_on_recipient_change(): void {
     drafts.update_compose_draft_count();
     check_posting_policy_for_compose_box();
     compose_validate.validate_and_update_send_button_status();
+
+    // Clear the topic moved banner when the recipient
+    // is changed or compose box is closed.
+    compose_validate.clear_topic_moved_info();
 }
 
 export let check_posting_policy_for_compose_box = (): void => {

web/src/compose_state.ts

@@ -18,6 +18,7 @@ let preview_render_count = 0;
 // the narrow and the user should still be able to see the banner once after
 // performing these actions
 let recipient_viewed_topic_resolved_banner = false;
+let recipient_viewed_topic_moved_banner = false;
 let recipient_guest_ids_for_dm_warning: number[] = [];
 
 export function set_recipient_edited_manually(flag: boolean): void {
@@ -60,6 +61,14 @@ export function has_recipient_viewed_topic_resolved_banner(): boolean {
     return recipient_viewed_topic_resolved_banner;
 }
 
+export function set_recipient_viewed_topic_moved_banner(flag: boolean): void {
+    recipient_viewed_topic_moved_banner = flag;
+}
+
+export function has_recipient_viewed_topic_moved_banner(): boolean {
+    return recipient_viewed_topic_moved_banner;
+}
+
 export function set_recipient_guest_ids_for_dm_warning(guest_ids: number[]): void {
     recipient_guest_ids_for_dm_warning = guest_ids;
 }

web/src/compose_validate.ts

@@ -9,6 +9,7 @@ import render_guest_in_dm_recipient_warning from "../templates/compose_banner/gu
 import render_not_subscribed_warning from "../templates/compose_banner/not_subscribed_warning.hbs";
 import render_private_stream_warning from "../templates/compose_banner/private_stream_warning.hbs";
 import render_stream_wildcard_warning from "../templates/compose_banner/stream_wildcard_warning.hbs";
+import render_topic_moved_banner from "../templates/compose_banner/topic_moved_banner.hbs";
 import render_wildcard_mention_not_allowed_error from "../templates/compose_banner/wildcard_mention_not_allowed_error.hbs";
 import render_compose_limit_indicator from "../templates/compose_limit_indicator.hbs";
 
@@ -17,6 +18,7 @@ import * as compose_banner from "./compose_banner.ts";
 import * as compose_pm_pill from "./compose_pm_pill.ts";
 import * as compose_state from "./compose_state.ts";
 import * as compose_ui from "./compose_ui.ts";
+import * as hash_util from "./hash_util.ts";
 import {$t} from "./i18n.ts";
 import * as message_store from "./message_store.ts";
 import * as message_util from "./message_util.ts";
@@ -454,6 +456,63 @@ export function warn_if_topic_resolved(topic_changed: boolean): void {
     }
 }
 
+export function clear_topic_moved_info(): void {
+    compose_state.set_recipient_viewed_topic_moved_banner(false);
+    $(`#compose_banners .${CSS.escape(compose_banner.CLASSNAMES.topic_is_moved)}`).remove();
+}
+
+export function inform_if_topic_is_moved(orig_topic: string, old_stream_id: number): void {
+    const stream_id = compose_state.stream_id();
+    if (stream_id === undefined) {
+        return;
+    }
+    const message_content = compose_state.message_content();
+    const sub = stream_data.get_sub_by_id(stream_id);
+    const topic_name = compose_state.topic();
+    if (sub && message_content !== "") {
+        const old_stream = stream_data.get_sub_by_id(old_stream_id);
+        if (!old_stream) {
+            return;
+        }
+
+        let is_empty_string_topic;
+        if (orig_topic !== "") {
+            is_empty_string_topic = false;
+        } else {
+            is_empty_string_topic = true;
+        }
+        const narrow_url = hash_util.by_stream_topic_url(old_stream_id, orig_topic);
+        const context = {
+            banner_type: compose_banner.INFO,
+            stream_id: sub.stream_id,
+            topic_name,
+            narrow_url,
+            orig_topic,
+            old_stream: old_stream.name,
+            classname: compose_banner.CLASSNAMES.topic_is_moved,
+            show_colored_icon: false,
+            is_empty_string_topic,
+        };
+        const new_row_html = render_topic_moved_banner(context);
+
+        if (compose_state.has_recipient_viewed_topic_moved_banner()) {
+            // Replace any existing banner of this type to avoid showing
+            // two banners if a conversation is moved twice in quick succession.
+            clear_topic_moved_info();
+        }
+
+        const appended = compose_banner.append_compose_banner_to_banner_list(
+            $(new_row_html),
+            $("#compose_banners"),
+        );
+        if (appended) {
+            compose_state.set_recipient_viewed_topic_moved_banner(true);
+        }
+    } else {
+        clear_topic_moved_info();
+    }
+}
+
 export function warn_if_in_search_view(): void {
     const filter = narrow_state.filter();
     if (filter && !filter.supports_collapsing_recipients()) {

web/src/message_events.ts

@@ -549,6 +549,7 @@ export function update_messages(events: UpdateMessageEvent[]): void {
                 }
 
                 compose_validate.warn_if_topic_resolved(true);
+                compose_validate.inform_if_topic_is_moved(orig_topic, old_stream_id);
                 compose_fade.set_focused_recipient("stream");
             }
 

web/templates/compose_banner/topic_moved_banner.hbs

@@ -0,0 +1,12 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#tr}}
+            The topic you were composing to (<z-link></z-link>) was moved, and the destination for your message has been updated to its new location.
+            {{#*inline "z-link"~}}
+                <a class="above_compose_banner_action_link" href="{{narrow_url}}">
+                    {{~> ../inline_topic_link_label channel_name=old_stream topic_display_name=orig_topic is_empty_string_topic=is_empty_string_topic~}}
+                </a>
+            {{~/inline}}
+        {{/tr}}
+    </p>
+{{/compose_banner}}

web/templates/inline_topic_link_label.hbs

@@ -0,0 +1,13 @@
+{{#if is_empty_string_topic}}
+<span class="stream-topic">
+    {{~!-- squash whitespace --~}}
+    #{{channel_name}} &gt; <em class="empty-topic-display">{{t "general chat"}}</em>
+    {{~!-- squash whitespace --~}}
+</span>
+{{~else}}
+<span class="stream-topic">
+    {{~!-- squash whitespace --~}}
+    #{{channel_name}} &gt; {{topic_display_name}}
+    {{~!-- squash whitespace --~}}
+</span>
+{{~/if}}