From 17a77f49bcd811e3b0bce054713e723d3b32e3d0 Mon Sep 17 00:00:00 2001
From: Saubhagya Patel <patelsaubhagya0144@gmail.com>
Date: Thu, 21 Nov 2024 11:00:51 +0530
Subject: [PATCH] popovers: Refactor the Move messages and Move topic modals.

This commit refactors the move messages and move topic modals
to follow standard patterns from other modals (e.g. the invite user
modal).

Fixes #32168.
---
 web/src/stream_popover.js              |  2 ++
 web/styles/popovers.css                | 15 ++++++---
 web/styles/zulip.css                   |  6 ----
 web/templates/move_topic_to_stream.hbs | 44 ++++++++++++++++++++------
 4 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/web/src/stream_popover.js b/web/src/stream_popover.js
index 48c5407327..2289046fbf 100644
--- a/web/src/stream_popover.js
+++ b/web/src/stream_popover.js
@@ -343,9 +343,11 @@ export async function build_move_topic_to_stream_popover(
     message,
 ) {
     const current_stream_name = sub_store.maybe_get_stream_name(current_stream_id);
+    const stream = sub_store.get(current_stream_id);
     const args = {
         topic_name,
         current_stream_id,
+        stream,
         notify_new_thread: message_edit.notify_new_thread_default,
         notify_old_thread: message_edit.notify_old_thread_default,
         from_message_actions_popover: message !== undefined,
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 3fc646e95e..e4177d631b 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -882,14 +882,12 @@ ul.popover-group-menu-member-list {
 
     #move_topic_to_stream_widget_wrapper {
         display: flex;
-        margin-bottom: 10px;
 
         .dropdown-widget-button {
             outline: none;
             /* 24px at 16px/1em */
             line-height: 1.5em;
-            width: auto;
-            max-width: 206px;
+            width: 50%;
         }
 
         .dropdown_widget_value {
@@ -917,12 +915,19 @@ ul.popover-group-menu-member-list {
     }
 
     .move_messages_edit_topic {
-        margin-bottom: 10px;
+        margin-bottom: unset;
+        box-sizing: border-box;
+        width: 100%;
+        height: auto;
+    }
+
+    .message_edit_topic_propagate {
+        width: 100%;
     }
 
     .topic_stream_edit_header {
         display: flex;
-        flex-wrap: wrap;
+        flex-flow: column wrap;
         justify-content: flex-start;
 
         #select_stream_id {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index e75cdf6994..eb40db4541 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -935,12 +935,6 @@ div.focused-message-list {
     outline: none;
 }
 
-#move_topic_modal select {
-    width: auto;
-    margin-bottom: 10px;
-    max-width: 100%;
-}
-
 .topic_move_breadcrumb_messages {
     margin: 0 5px 5px 0;
     align-self: center;
diff --git a/web/templates/move_topic_to_stream.hbs b/web/templates/move_topic_to_stream.hbs
index dd064a7a15..e631987a18 100644
--- a/web/templates/move_topic_to_stream.hbs
+++ b/web/templates/move_topic_to_stream.hbs
@@ -1,26 +1,50 @@
 {{#unless (or from_message_actions_popover only_topic_edit)}}
-<p class="white-space-preserve-wrap">{{#tr}}Move all messages in <strong>{topic_name}</strong>{{/tr}} to:</p>
+<p>
+    {{#tr}}
+    You are moving all messages from <z-stream></z-stream>
+    {{#*inline "z-stream"}}<b>{{> inline_decorated_stream_name stream=stream show_colored_icon=true}}</b>{{/inline}}
+    {{/tr}}
+    <i class="fa fa-angle-right" aria-hidden="true"></i>
+    {{#tr}}<b>{topic_name}.</b>{{/tr}}
+</p>
 {{/unless}}
 <form id="move_topic_form">
     {{#if only_topic_edit }}
     <p>{{t "Rename topic to:" }}</p>
     {{else if from_message_actions_popover}}
-    <p>{{t "Move messages to:" }}</p>
+    <p>
+        {{#tr}}
+        You are moving messages from <z-stream></z-stream>
+        {{#*inline "z-stream"}}<b>{{> inline_decorated_stream_name stream=stream show_colored_icon=true}}</b>{{/inline}}
+        {{/tr}}
+        <i class="fa fa-angle-right" aria-hidden="true"></i>
+        {{#tr}}<b>{topic_name}.</b>{{/tr}}
+    </p>
     {{/if}}
     <div class="topic_stream_edit_header">
         {{#unless only_topic_edit}}
-        {{> dropdown_widget_wrapper widget_name="move_topic_to_stream"}}
-        <i class="fa fa-angle-right" aria-hidden="true"></i>
+        <div class="input-group">
+            <label class="modal-field-label">New channel</label>
+            {{> dropdown_widget_wrapper widget_name="move_topic_to_stream"}}
+        </div>
         {{/unless}}
-        <input name="new_topic_name" type="text" class="move_messages_edit_topic modal_text_input" autocomplete="off" value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} />
+        <div class="input-group">
+            {{#unless only_topic_edit}}
+            <label for="move-topic-new-topic-name" class="modal-field-label">New topic</label>
+            {{/unless}}
+            <input id="move-topic-new-topic-name" name="new_topic_name" type="text" class="move_messages_edit_topic modal_text_input" autocomplete="off" value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} />
+        </div>
         <input name="old_topic_name" type="hidden" value="{{topic_name}}" />
         <input name="current_stream_id" type="hidden" value="{{current_stream_id}}" />
         {{#if from_message_actions_popover}}
-        <select class="message_edit_topic_propagate modal_select bootstrap-focus-style">
-            <option value="change_one" {{#if (eq message_placement "last")}}selected{{/if}}> {{t "Move only this message" }}</option>
-            <option value="change_later" {{#if (eq message_placement "intermediate")}}selected{{/if}}> {{t "Move this and all following messages in this topic" }}</option>
-            <option value="change_all" {{#if (eq message_placement "first")}}selected{{/if}}> {{t "Move all messages in this topic" }}</option>
-        </select>
+        <div class="input-group">
+            <label for="move-topic-select-propagation-mode">{{t "Which messages should be moved?"}}</label>
+            <select id="move-topic-select-propagation-mode" class="message_edit_topic_propagate modal_select bootstrap-focus-style">
+                <option value="change_one" {{#if (eq message_placement "last")}}selected{{/if}}> {{t "Move only this message" }}</option>
+                <option value="change_later" {{#if (eq message_placement "intermediate")}}selected{{/if}}> {{t "Move this and all following messages in this topic" }}</option>
+                <option value="change_all" {{#if (eq message_placement "first")}}selected{{/if}}> {{t "Move all messages in this topic" }}</option>
+            </select>
+        </div>
         {{/if}}
         <div class="topic_move_breadcrumb_messages">
             <label class="checkbox">