Add warning banner if moving topic or multiple messages to a pre-exis…

…ting conversation. #31151 Only show the warning banner if submit button is enabled and the number of messages being moved are more than one. Fixes: #31151
zulip · Aug 6, 2024 · e96f452 · e96f452
1 parent a88445a
commit e96f452
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/web/src/stream_popover.js b/web/src/stream_popover.js
@@ -3,12 +3,14 @@ import $ from "jquery";
 import assert from "minimalistic-assert";
 
 import render_inline_decorated_stream_name from "../templates/inline_decorated_stream_name.hbs";
+import render_message_moving_warning_banner from "../templates/modal_banner/message_moving_warning_banner.hbs";
 import render_move_topic_to_stream from "../templates/move_topic_to_stream.hbs";
 import render_left_sidebar_stream_actions_popover from "../templates/popovers/left_sidebar/left_sidebar_stream_actions_popover.hbs";
 
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
 import * as compose_actions from "./compose_actions";
+import * as compose_banner from "./compose_banner";
 import * as composebox_typeahead from "./composebox_typeahead";
 import * as dialog_widget from "./dialog_widget";
 import * as dropdown_widget from "./dropdown_widget";
@@ -566,9 +568,33 @@ export async function build_move_topic_to_stream_popover(
         event.stopPropagation();
     }
 
+    function update_warning_banner() {
+        let propagate_mode = $("#move_topic_modal select.message_edit_topic_propagate").val();
+        let submit_button_disabled = $("#move_topic_modal .dialog_submit_button")[0].disabled;
+        if (!submit_button_disabled && propagate_mode != "change_one") {
+            $("#move_topic_modal .move_topic_form_warning_container").html(render_message_moving_warning_banner({
+                banner_type: compose_banner.WARNING,
+                hide_close_button: true,
+                classname: "message_moving_warning_banner",
+            }));   
+        } else {
+            $("#move_topic_modal .move_topic_form_warning_container").html("");
+        }
+    }
+
     function move_topic_post_render() {
         $("#move_topic_modal .dialog_submit_button").prop("disabled", true);
 
+        new MutationObserver(function(mutations){
+            update_warning_banner();
+        }).observe($("#move_topic_modal .dialog_submit_button")[0], {
+            attributes: true,
+        });
+
+        $("#move_topic_modal select.message_edit_topic_propagate")[0]?.addEventListener("change", function(){
+            update_warning_banner();
+        })
+
         const $topic_input = $("#move_topic_form .move_messages_edit_topic");
         move_topic_to_stream_topic_typeahead = composebox_typeahead.initialize_topic_edit_typeahead(
             $topic_input,

diff --git a/web/templates/modal_banner/message_moving_warning_banner.hbs b/web/templates/modal_banner/message_moving_warning_banner.hbs
@@ -0,0 +1,7 @@
+{{#> modal_banner }}
+    <p class="banner_message">
+        {{#tr}}
+            You are moving messages to a topic that already exists. Messages from these topics will be combined.
+        {{/tr}}
+    </p>
+{{/modal_banner}}
diff --git a/web/templates/move_topic_to_stream.hbs b/web/templates/move_topic_to_stream.hbs
@@ -2,11 +2,12 @@
 <p class="white-space-preserve-wrap">{{#tr}}Move all messages in <strong>{topic_name}</strong>{{/tr}} to:</p>
 {{/unless}}
 <form class="new-style" id="move_topic_form">
+    <div class="move_topic_form_warning_container"></div>
     {{#if only_topic_edit }}
     <p>{{t "Rename topic to:" }}</p>
     {{else if from_message_actions_popover}}
     <p>{{t "Move messages to:" }}</p>
-    {{/if}}
+    {{/if}}    
     <div class="topic_stream_edit_header">
         {{#unless only_topic_edit}}
         {{> dropdown_widget_wrapper widget_name="move_topic_to_stream"}}

diff --git a/zulip b/zulip