stream_settings: Add UI element for can-remove-subscribers-group setting.

This commit adds dropdown-list-widget element in "General" section of
stream settings for can-remove-subscribers-group setting. For now we
only show role-based system groups as the options.

static/js/settings_org.js

@@ -553,6 +553,8 @@ export function get_widget_for_dropdown_list_settings(property_name) {
             return signup_notifications_stream_widget;
         case "realm_default_code_block_language":
             return default_code_language_widget;
+        case "can_remove_subscribers_group_id":
+            return stream_edit.can_remove_subscribers_group_widget;
         default:
             blueslip.error("No dropdown list widget for property: " + property_name);
             return null;
@@ -592,6 +594,7 @@ export function discard_property_element_changes(elem, for_realm_default_setting
         case "realm_notifications_stream_id":
         case "realm_signup_notifications_stream_id":
         case "realm_default_code_block_language":
+        case "can_remove_subscribers_group_id":
             set_dropdown_list_widget_setting_value(property_name, property_value);
             break;
         case "realm_default_language":
@@ -875,6 +878,7 @@ export function check_property_changed(elem, for_realm_default_settings, sub) {
         case "realm_notifications_stream_id":
         case "realm_signup_notifications_stream_id":
         case "realm_default_code_block_language":
+        case "can_remove_subscribers_group_id":
             proposed_val = get_dropdown_list_widget_setting_value($elem, false);
             break;
         case "email_notifications_batching_period_seconds":

static/js/stream_edit.js

@@ -14,6 +14,7 @@ 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 {DropdownListWidget} from "./dropdown_list_widget";
 import * as hash_util from "./hash_util";
 import {$t, $t_html} from "./i18n";
 import * as keydown_util from "./keydown_util";
@@ -32,11 +33,13 @@ import * as stream_ui_updates from "./stream_ui_updates";
 import * as sub_store from "./sub_store";
 import * as ui from "./ui";
 import * as ui_report from "./ui_report";
+import * as user_groups from "./user_groups";
 import {user_settings} from "./user_settings";
 import * as util from "./util";
 
 export let toggler;
 export let select_tab = "personal_settings";
+export let can_remove_subscribers_group_widget = null;
 
 function setup_subscriptions_stream_hash(sub) {
     const hash = hash_util.stream_edit_url(sub);
@@ -201,6 +204,22 @@ export function show_settings_for(node) {
         return false;
     });
 
+    const opts = {
+        widget_name: "can_remove_subscribers_group_id",
+        data: user_groups.get_realm_user_groups_for_dropdown_list_widget(true, true),
+        default_text: $t({defaultMessage: "No user groups"}),
+        include_current_item: false,
+        value: sub.can_remove_subscribers_group_id,
+        on_update() {
+            settings_org.save_discard_widget_status_handler(
+                $("#stream_permission_settings"),
+                false,
+                slim_sub,
+            );
+        },
+    };
+    can_remove_subscribers_group_widget = new DropdownListWidget(opts);
+
     const html = render_stream_settings({
         sub,
         notification_settings,
@@ -231,6 +250,7 @@ export function show_settings_for(node) {
     show_subscription_settings(sub);
     settings_org.set_message_retention_setting_dropdown(sub);
     stream_ui_updates.enable_or_disable_permission_settings_in_edit_panel(sub);
+    can_remove_subscribers_group_widget.setup();
 }
 
 export function setup_stream_settings(node) {
@@ -617,10 +637,18 @@ export function initialize() {
         e.preventDefault();
         e.stopPropagation();
 
+        if ($(e.target).hasClass("no-input-change-detection")) {
+            // This is to prevent input changes detection in elements
+            // within a subsection whose changes should not affect the
+            // visibility of the discard button
+            return false;
+        }
+
         const stream_id = get_stream_id(e.target);
         const sub = sub_store.get(stream_id);
         const $subsection = $(e.target).closest(".settings-subsection-parent");
         settings_org.save_discard_widget_status_handler($subsection, false, sub);
+        return true;
     });
 
     $("#manage_streams_container").on(

static/js/stream_ui_updates.js

@@ -134,7 +134,7 @@ export function enable_or_disable_permission_settings_in_edit_panel(sub) {
 
     const $general_settings_container = $stream_settings.find($("#stream_permission_settings"));
     $general_settings_container
-        .find("input, select")
+        .find("input, select, button")
         .prop("disabled", !sub.can_change_stream_permissions);
 
     if (!sub.can_change_stream_permissions) {

static/styles/subscriptions.css

@@ -994,6 +994,22 @@ div.settings-radio-input-parent {
     select.stream_post_policy_setting {
         margin-bottom: 10px;
     }
+
+    .dropdown-list-widget {
+        .dropdown-toggle {
+            margin-bottom: 10px;
+            width: 325px;
+        }
+
+        ul.dropdown-menu {
+            width: 325px;
+
+            input {
+                /* 325 - 2* (9px (margin) + 1px (border) + 6px (padding)) */
+                width: 293px;
+            }
+        }
+    }
 }
 
 #change_user_group_description,

static/templates/stream_settings/stream_types.hbs

@@ -40,6 +40,17 @@
     </select>
 </div>
 
+{{#if is_stream_edit}}
+<div class="input-group new-style">
+    <label class="dropdown-title">{{t 'Who can unsubscribe others from this stream?'}}
+    </label>
+    {{> ../settings/dropdown_list_widget
+      widget_name="can_remove_subscribers_group_id"
+      list_placeholder=(t 'Filter roles')
+      value_type="number" }}
+</div>
+{{/if}}
+
 {{#if (or is_owner is_stream_edit)}}
 <div>
     <div class="input-group inline-block message-retention-setting-group time-limit-setting">