stream settings: Improve UI for editing stream permissions.

This now is much more similar to our normal settings UI.

static/js/stream_edit.js

@@ -642,11 +642,11 @@ function get_message_retention_days_from_sub(sub) {
 function change_stream_privacy(e) {
     e.stopPropagation();
 
-    const stream_id = $(e.target).data("stream-id");
-    const sub = sub_store.get(stream_id);
     const data = {};
-    const stream_privacy_status = $(".stream-privacy-status");
-    stream_privacy_status.hide();
+    const stream_id = $(e.target).data("stream-id");
+    const url = "/json/streams/" + stream_id;
+    const status_element = $(".stream_permission_change_info");
+    const sub = sub_store.get(stream_id);
 
     const privacy_setting = $("#stream_privacy_modal input[name=privacy]:checked").val();
     const stream_post_policy = Number.parseInt(
@@ -696,25 +696,13 @@ function change_stream_privacy(e) {
         data.message_retention_days = JSON.stringify(message_retention_days);
     }
 
-    $(".stream_change_property_info").hide();
+    overlays.close_modal("#stream_privacy_modal");
 
     if (Object.keys(data).length === 0) {
-        overlays.close_modal("#stream_privacy_modal");
         return;
     }
 
-    channel.patch({
-        url: "/json/streams/" + stream_id,
-        data,
-        success() {
-            overlays.close_modal("#stream_privacy_modal");
-            // The rest will be done by update stream event we will get.
-        },
-        error(xhr) {
-            ui_report.error($t_html({defaultMessage: "Failed"}), xhr, stream_privacy_status);
-            $("#change-stream-privacy-button").text($t({defaultMessage: "Try again"}));
-        },
-    });
+    settings_ui.do_settings_change(channel.patch, url, data, status_element);
 }
 
 export function archive_stream(stream_id, alert_element, stream_row) {

static/styles/subscriptions.css

@@ -844,8 +844,7 @@
         }
     }
 
-    .stream-header,
-    .stream_setting_subsection_header {
+    .stream-header {
         white-space: nowrap;
 
         .stream-name {
@@ -911,6 +910,20 @@
         }
     }
 
+    .stream_setting_subsection_header {
+        display: flex;
+
+        .stream_permission_change_info {
+            margin: 12px auto 0 3px;
+        }
+
+        .button-group {
+            display: inline;
+            margin-left: auto;
+            align-self: center;
+        }
+    }
+
     .checkmark {
         display: none;
         margin-left: 5px;
@@ -1056,6 +1069,12 @@
     }
 }
 
+#stream_privacy_modal .modal-body {
+    .grey-box {
+        margin-bottom: 20px;
+    }
+}
+
 @media (width < $lg_min) {
     .subscriptions-container {
         max-width: 95%;
@@ -1192,6 +1211,14 @@
             }
         }
     }
+
+    #subscription_overlay .stream_setting_subsection_header {
+        display: block;
+
+        .stream_permission_change_info {
+            margin: 12px auto 0 3px;
+        }
+    }
 }
 
 #stream-creation #invites-warning-modal .modal-footer {

static/templates/subscription_settings.hbs

@@ -42,6 +42,7 @@
                     {{t "Stream permissions" }}
                 </h3>
                 {{#if can_change_stream_permissions}}
+                <div class="stream_permission_change_info alert-notification"></div>
                 <div class="button-group">
                     <a class="change-stream-privacy button rounded small btn-warning" role="button">
                         <i class="fa fa-pencil" aria-hidden="true"></i>