From 8cc781f0c8ece64d6a40e926f5660e74aecb12d5 Mon Sep 17 00:00:00 2001
From: Ganesh Pawar <pawarg256@gmail.com>
Date: Sat, 17 Jul 2021 20:14:31 +0530
Subject: [PATCH] change_stream_info_modal: Migrate modal to dialog_widget.

The CSS changes make the description input box a more likely size for
what currently makes sense for stream descriptions.
---
 static/js/stream_edit.js                      | 25 ++++++++---
 static/styles/subscriptions.css               | 16 +++----
 .../change_stream_info_modal.hbs              | 44 +++++--------------
 3 files changed, 34 insertions(+), 51 deletions(-)

diff --git a/static/js/stream_edit.js b/static/js/stream_edit.js
index ba554fc583..45cbfe9a52 100644
--- a/static/js/stream_edit.js
+++ b/static/js/stream_edit.js
@@ -14,6 +14,7 @@ import * as browser_history from "./browser_history";
 import * as channel from "./channel";
 import * as components from "./components";
 import * as confirm_dialog from "./confirm_dialog";
+import * as dialog_widget from "./dialog_widget";
 import * as hash_util from "./hash_util";
 import {$t, $t_html} from "./i18n";
 import * as input_pill from "./input_pill";
@@ -794,14 +795,24 @@ export function initialize() {
         const stream_id = get_stream_id(e.target);
         const stream = sub_store.get(stream_id);
         const template_data = {
-            stream_id,
             stream_name: stream.name,
             stream_description: stream.description,
         };
         const change_stream_info_modal = render_change_stream_info_modal(template_data);
-        $("#change_stream_info_modal").remove();
-        $("#subscriptions_table").append(change_stream_info_modal);
-        overlays.open_modal("#change_stream_info_modal");
+        dialog_widget.launch({
+            html_heading: $t_html(
+                {defaultMessage: "Edit #{stream_name}"},
+                {stream_name: stream.name},
+            ),
+            html_body: change_stream_info_modal,
+            id: "change_stream_info_modal",
+            on_click: save_stream_info,
+            post_render: () => {
+                $("#change_stream_info_modal .dialog_submit_button")
+                    .addClass("save-button")
+                    .attr("data-stream-id", stream_id);
+            },
+        });
     });
 
     $("#subscriptions_table").on("keypress", "#change_stream_description", (e) => {
@@ -813,7 +824,7 @@ export function initialize() {
         return true;
     });
 
-    $("#subscriptions_table").on("click", "#save_stream_info", (e) => {
+    function save_stream_info(e) {
         e.preventDefault();
         e.stopPropagation();
         const sub = get_sub_for_target(e.currentTarget);
@@ -834,9 +845,9 @@ export function initialize() {
         }
 
         const status_element = $(".stream_change_property_info");
-        overlays.close_modal("#change_stream_info_modal");
+        dialog_widget.close_modal();
         settings_ui.do_settings_change(channel.patch, url, data, status_element);
-    });
+    }
 
     $("#subscriptions_table").on(
         "click",
diff --git a/static/styles/subscriptions.css b/static/styles/subscriptions.css
index 1837d52ec7..5bbf6c368b 100644
--- a/static/styles/subscriptions.css
+++ b/static/styles/subscriptions.css
@@ -1070,17 +1070,11 @@
     }
 }
 
-#change_stream_info_modal {
-    .modal-header h3 {
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    #change_stream_description {
-        width: 80%;
-        max-width: 500px;
-        box-sizing: border-box;
-    }
+#change_stream_description {
+    width: 100%;
+    height: 80px;
+    margin-bottom: 4px;
+    box-sizing: border-box;
 }
 
 #stream_privacy_modal .modal-body {
diff --git a/static/templates/stream_settings/change_stream_info_modal.hbs b/static/templates/stream_settings/change_stream_info_modal.hbs
index 50b0e93138..eacd339340 100644
--- a/static/templates/stream_settings/change_stream_info_modal.hbs
+++ b/static/templates/stream_settings/change_stream_info_modal.hbs
@@ -1,34 +1,12 @@
-<div id="change_stream_info_modal" class="modal modal-bg hide fade new-style" tabindex="-1"
-  role="dialog" aria-labelledby="change_stream_info_label" aria-hidden="true">
-    <div class="modal-header">
-        <button type="button" class="close close-change-stream-info-modal" data-dismiss="modal" aria-label="{{t 'Close' }}">
-            <span aria-hidden="true">&times;</span>
-        </button>
-        <h3 id="change_stream_info_label">
-            {{#tr}}Edit #{stream_name}{{/tr}}
-            <span class="email"></span>
-        </h3>
-    </div>
-    <div class="modal-body">
-        <div class="input-group">
-            <label for="change_stream_name">
-                {{t 'Stream name' }}
-            </label>
-            <input type="text" id="change_stream_name" value="{{ stream_name }}" />
-        </div>
-        <div class="input-group">
-            <label for="change_stream_description">
-                {{t 'Description' }}
-            </label>
-            <textarea id="change_stream_description" maxlength="1000">{{ stream_description }}</textarea>
-        </div>
-    </div>
-
-    <div class="modal-footer">
-        <button class=" button rounded close-change-stream-info-modal" data-dismiss="modal">{{t "Cancel" }}</button>
-        <button class="button rounded btn-danger save-button" id="save_stream_info"
-          tabindex="-1" data-stream-id="{{stream_id}}">
-            {{t "Save changes"}}
-        </button>
-    </div>
+<div>
+    <label for="change_stream_name">
+        {{t 'Stream name' }}
+    </label>
+    <input type="text" id="change_stream_name" value="{{ stream_name }}" />
+</div>
+<div>
+    <label for="change_stream_description">
+        {{t 'Description' }}
+    </label>
+    <textarea id="change_stream_description" maxlength="1000">{{ stream_description }}</textarea>
 </div>