stream_settings: Add live update code for can-remove-subscribers-group.

This commit adds code to live update the UI element for
can_remove_subscribers_group setting.

frontend_tests/node_tests/stream_data.js

@@ -48,6 +48,14 @@ const admins_group = {
     direct_subgroup_ids: new Set([]),
 };
 
+const moderators_group = {
+    name: "Members",
+    id: 2,
+    members: new Set([2]),
+    is_system_group: true,
+    direct_subgroup_ids: new Set([1]),
+};
+
 function test(label, f) {
     run_test(label, (helpers) => {
         page_params.is_admin = false;
@@ -57,7 +65,7 @@ function test(label, f) {
         people.add_active_user(me);
         people.initialize_current_user(me.user_id);
         stream_data.clear_subscriptions();
-        user_groups.initialize({realm_user_groups: [admins_group]});
+        user_groups.initialize({realm_user_groups: [admins_group, moderators_group]});
         f(helpers);
     });
 }
@@ -450,10 +458,12 @@ test("stream_settings", () => {
     });
     stream_data.update_stream_post_policy(sub, 1);
     stream_data.update_message_retention_setting(sub, -1);
+    stream_data.update_can_remove_subscribers_group_id(sub, moderators_group.id);
     assert.equal(sub.invite_only, false);
     assert.equal(sub.history_public_to_subscribers, false);
     assert.equal(sub.stream_post_policy, stream_data.stream_post_policy_values.everyone.code);
     assert.equal(sub.message_retention_days, -1);
+    assert.equal(sub.can_remove_subscribers_group_id, moderators_group.id);
 
     // For guest user only retrieve subscribed streams
     sub_rows = stream_settings_data.get_updated_unsorted_subs();

frontend_tests/node_tests/stream_events.js

@@ -243,6 +243,17 @@ test("update_property", ({override}) => {
         assert.equal(args.sub.stream_id, stream_id);
         assert.equal(args.val, 20);
     }
+
+    // Test stream can_remove_subscribers_group_id change event
+    {
+        const stub = make_stub();
+        override(stream_settings_ui, "update_can_remove_subscribers_group_id", stub.f);
+        stream_events.update_property(stream_id, "can_remove_subscribers_group_id", 3);
+        assert.equal(stub.num_calls, 1);
+        const args = stub.get_args("sub", "val");
+        assert.equal(args.sub.stream_id, stream_id);
+        assert.equal(args.val, 3);
+    }
 });
 
 test("marked_unsubscribed (code coverage)", () => {

static/js/stream_data.js

@@ -462,6 +462,10 @@ export function update_message_retention_setting(sub, message_retention_days) {
     sub.message_retention_days = message_retention_days;
 }
 
+export function update_can_remove_subscribers_group_id(sub, can_remove_subscribers_group_id) {
+    sub.can_remove_subscribers_group_id = can_remove_subscribers_group_id;
+}
+
 export function receives_notifications(stream_id, notification_name) {
     const sub = sub_store.get(stream_id);
     if (sub === undefined) {

static/js/stream_edit_subscribers.js

@@ -2,6 +2,7 @@ import $ from "jquery";
 
 import render_unsubscribe_private_stream_modal from "../templates/confirm_dialog/confirm_unsubscribe_private_stream.hbs";
 import render_stream_member_list_entry from "../templates/stream_settings/stream_member_list_entry.hbs";
+import render_stream_members from "../templates/stream_settings/stream_members.hbs";
 import render_stream_subscription_request_result from "../templates/stream_settings/stream_subscription_request_result.hbs";
 
 import * as add_subscribers_pill from "./add_subscribers_pill";
@@ -15,6 +16,7 @@ import * as peer_data from "./peer_data";
 import * as people from "./people";
 import * as settings_data from "./settings_data";
 import * as stream_data from "./stream_data";
+import * as stream_settings_containers from "./stream_settings_containers";
 import * as sub_store from "./sub_store";
 import * as subscriber_api from "./subscriber_api";
 import * as ui from "./ui";
@@ -308,6 +310,43 @@ function update_subscribers_list_widget(subscriber_ids) {
     subscribers_list_widget.replace_list_data(users);
 }
 
+export function rerender_subscribers_list(sub) {
+    if (!hash_util.is_editing_stream(sub.stream_id)) {
+        blueslip.info("ignoring subscription for stream that is no longer being edited");
+        return;
+    }
+
+    if (sub.stream_id !== current_stream_id) {
+        // This should never happen if the prior check works correctly.
+        blueslip.error("current_stream_id does not match sub.stream_id for some reason");
+        return;
+    }
+
+    if (!stream_data.can_view_subscribers(sub)) {
+        return;
+    }
+
+    const user_ids = peer_data.get_subscribers(sub.stream_id);
+    const user_can_remove_subscribers = stream_data.can_unsubscribe_others(sub);
+    const $parent_container = stream_settings_containers
+        .get_edit_container(sub)
+        .find(".edit_subscribers_for_stream");
+
+    $parent_container.html(
+        render_stream_members({
+            can_access_subscribers: true,
+            can_remove_subscribers: user_can_remove_subscribers,
+            render_subscribers: sub.render_subscribers,
+        }),
+    );
+    subscribers_list_widget = make_list_widget({
+        $parent_container,
+        name: "stream_subscribers",
+        user_ids,
+        user_can_remove_subscribers,
+    });
+}
+
 export function initialize() {
     add_subscribers_pill.set_up_handlers({
         get_pill_widget: () => pill_widget,

static/js/stream_events.js

@@ -90,6 +90,9 @@ export function update_property(stream_id, property, value, other_values) {
         case "message_retention_days":
             stream_settings_ui.update_message_retention_setting(sub, value);
             break;
+        case "can_remove_subscribers_group_id":
+            stream_settings_ui.update_can_remove_subscribers_group_id(sub, value);
+            break;
         default:
             blueslip.warn("Unexpected subscription property type", {
                 property,

static/js/stream_settings_ui.js

@@ -241,6 +241,12 @@ export function update_message_retention_setting(sub, new_value) {
     stream_ui_updates.update_setting_element(sub, "message_retention_days");
 }
 
+export function update_can_remove_subscribers_group_id(sub, new_value) {
+    stream_data.update_can_remove_subscribers_group_id(sub, new_value);
+    stream_ui_updates.update_setting_element(sub, "can_remove_subscribers_group_id");
+    stream_edit_subscribers.rerender_subscribers_list(sub);
+}
+
 export function set_color(stream_id, color) {
     const sub = sub_store.get(stream_id);
     stream_edit.set_stream_property(sub, "color", color);