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

@@ -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",

static/styles/subscriptions.css

@@ -1070,18 +1070,12 @@
     }
 }
 
-#change_stream_info_modal {
-    .modal-header h3 {
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
 #change_stream_description {
-        width: 80%;
-        max-width: 500px;
+    width: 100%;
+    height: 80px;
+    margin-bottom: 4px;
     box-sizing: border-box;
 }
-}
 
 #stream_privacy_modal .modal-body {
     .grey-box {

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">
+<div>
     <label for="change_stream_name">
         {{t 'Stream name' }}
     </label>
     <input type="text" id="change_stream_name" value="{{ stream_name }}" />
 </div>
-        <div class="input-group">
+<div>
     <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>