From a41d5e58f9b958422acd508ff724c08097ea368b Mon Sep 17 00:00:00 2001
From: m-e-l-u-h-a-n <purushottam.tiwari.cd.cse19@itbhu.ac.in>
Date: Fri, 9 Jul 2021 01:45:28 +0530
Subject: [PATCH] stream settings: Improve UI for editing stream permissions.

This now is much more similar to our normal settings UI.
---
 static/js/stream_edit.js                   | 24 +++++------------
 static/styles/subscriptions.css            | 31 ++++++++++++++++++++--
 static/templates/subscription_settings.hbs |  1 +
 3 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/static/js/stream_edit.js b/static/js/stream_edit.js
index 8c297f1782..c510eb5719 100644
--- a/static/js/stream_edit.js
+++ b/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) {
diff --git a/static/styles/subscriptions.css b/static/styles/subscriptions.css
index 1b1684de9c..373a62f38a 100644
--- a/static/styles/subscriptions.css
+++ b/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 {
diff --git a/static/templates/subscription_settings.hbs b/static/templates/subscription_settings.hbs
index 0f1a16310d..66d0801827 100644
--- a/static/templates/subscription_settings.hbs
+++ b/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>