stream-settings: Fix live update of subscribers UI.

Changes done here are -

- Previously the pill input, "Add" button and tooltip shown
when user did not have permission were not live updated when
updating can_add_subscribers_group and can_subscribe_group
stream level settings or can_add_subscribers_group realm
level setting. This commit fixes that.

- Also, when the UI was live updated to give user permission
to subscribe others, "Add" button was enabled even when
input was empty. This is also fixed in this commit.

web/src/server_events_dispatch.js

@@ -76,6 +76,8 @@ import * as stream_data from "./stream_data.ts";
 import * as stream_events from "./stream_events.ts";
 import * as stream_list from "./stream_list.ts";
 import * as stream_list_sort from "./stream_list_sort.ts";
+import * as stream_settings_components from "./stream_settings_components.ts";
+import * as stream_settings_data from "./stream_settings_data.ts";
 import * as stream_settings_ui from "./stream_settings_ui.ts";
 import * as stream_topic_history from "./stream_topic_history.ts";
 import * as stream_ui_updates from "./stream_ui_updates.ts";
@@ -362,6 +364,20 @@ export function dispatch_normal_event(event) {
                                 if (key === "plan_type") {
                                     gear_menu.rerender();
                                 }
+
+                                if (
+                                    key === "can_add_subscribers_group" &&
+                                    overlays.streams_open()
+                                ) {
+                                    const active_stream_id =
+                                        stream_settings_components.get_active_data().id;
+                                    if (active_stream_id !== undefined) {
+                                        const slim_sub = sub_store.get(active_stream_id);
+                                        const sub =
+                                            stream_settings_data.get_sub_for_settings(slim_sub);
+                                        stream_ui_updates.update_add_subscriptions_elements(sub);
+                                    }
+                                }
                             }
                             if (event.data.authentication_methods !== undefined) {
                                 settings_org.populate_auth_methods(

web/src/stream_events.ts

@@ -31,11 +31,13 @@ import * as stream_data from "./stream_data.ts";
 import * as stream_list from "./stream_list.ts";
 import * as stream_muting from "./stream_muting.ts";
 import * as stream_settings_api from "./stream_settings_api.ts";
+import * as stream_settings_data from "./stream_settings_data.ts";
 import * as stream_settings_ui from "./stream_settings_ui.ts";
 import {
     type UpdatableStreamProperties,
     stream_permission_group_settings_schema,
 } from "./stream_types.ts";
+import * as stream_ui_updates from "./stream_ui_updates.ts";
 import * as sub_store from "./sub_store.ts";
 import type {StreamSubscription} from "./sub_store.ts";
 import {group_setting_value_schema} from "./types.ts";
@@ -110,6 +112,10 @@ export function update_property<P extends keyof UpdatableStreamProperties>(
         if (property === "can_subscribe_group" || property === "can_add_subscribers_group") {
             stream_settings_ui.update_subscription_elements(sub);
         }
+        if (property === "can_administer_channel_group") {
+            const settings_sub = stream_settings_data.get_sub_for_settings(sub);
+            stream_ui_updates.update_add_subscriptions_elements(settings_sub);
+        }
         user_group_edit.update_stream_setting_in_permissions_panel(
             stream_permission_group_settings_schema.parse(property),
             group_setting_value_schema.parse(value),

web/src/stream_settings_ui.ts

@@ -237,13 +237,15 @@ export function update_subscribers_ui(sub: StreamSubscription): void {
     message_view_header.maybe_rerender_title_area_for_stream(sub.stream_id);
 }
 
-export function update_subscription_elements(sub: StreamSubscription): void {
+export function update_subscription_elements(slim_sub: StreamSubscription): void {
     if (!overlays.streams_open()) {
         return;
     }
 
-    update_left_panel_row(sub);
-    stream_ui_updates.update_settings_button_for_sub(sub);
+    update_left_panel_row(slim_sub);
+    stream_ui_updates.update_settings_button_for_sub(slim_sub);
+    const sub = stream_settings_data.get_sub_for_settings(slim_sub);
+    stream_ui_updates.update_add_subscriptions_elements(sub);
 }
 
 export function add_sub_to_table(sub: StreamSubscription): void {

web/src/stream_ui_updates.ts

@@ -503,7 +503,9 @@ export function enable_or_disable_add_subscribers_elements(
 
     if (!stream_creation) {
         const $add_subscribers_button = $container_elem.find(".add-subscriber-button").expectOne();
-        $add_subscribers_button.prop("disabled", !enable_elem);
+        const input_empty =
+            $container_elem.find(".pill").length === 0 && $input_element.text().length === 0;
+        $add_subscribers_button.prop("disabled", !enable_elem || input_empty);
         if (enable_elem) {
             $add_subscribers_button.css("pointer-events", "");
         }

web/tests/dispatch.test.cjs

@@ -77,6 +77,8 @@ const settings_users = mock_esm("../src/settings_users");
 const sidebar_ui = mock_esm("../src/sidebar_ui");
 const stream_data = mock_esm("../src/stream_data");
 const stream_list = mock_esm("../src/stream_list");
+const stream_settings_components = mock_esm("../src/stream_settings_components");
+const stream_settings_data = mock_esm("../src/stream_settings_data");
 const stream_settings_ui = mock_esm("../src/stream_settings_ui");
 const stream_list_sort = mock_esm("../src/stream_list_sort");
 const stream_topic_history = mock_esm("../src/stream_topic_history");
@@ -607,6 +609,19 @@ run_test("realm settings", ({override}) => {
     });
     override(settings_org, "populate_auth_methods", noop);
     override(user_group_edit, "update_realm_setting_in_permissions_panel", noop);
+    override(overlays, "streams_open", () => true);
+    override(stream_settings_components, "get_active_data", () => ({
+        id: events.test_streams.devel.stream_id,
+    }));
+    override(stream_settings_data, "get_sub_for_settings", () => ({
+        ...events.test_streams.devel,
+        can_add_subscribers: false,
+    }));
+    let add_subscribers_element_updated = false;
+    override(stream_ui_updates, "update_add_subscriptions_elements", (sub) => {
+        assert.deepEqual(sub, {...events.test_streams.devel, can_add_subscribers: false});
+        add_subscribers_element_updated = true;
+    });
     dispatch(event);
     assert_same(realm.realm_create_multiuse_invite_group, 3);
     assert_same(realm.realm_allow_message_editing, true);
@@ -626,6 +641,7 @@ run_test("realm settings", ({override}) => {
     assert_same(realm.realm_upload_quota_mib, 50000);
     assert_same(realm.max_file_upload_size_mib, 1024);
     assert_same(update_stream_privacy_choices_called, true);
+    assert_same(add_subscribers_element_updated, true);
 
     event = event_fixtures.realm__update_dict__icon;
     override(realm_icon, "rerender", noop);

web/tests/stream_events.test.cjs

@@ -19,6 +19,7 @@ const stream_color_events = mock_esm("../src/stream_color_events");
 const stream_list = mock_esm("../src/stream_list");
 const stream_muting = mock_esm("../src/stream_muting");
 const stream_settings_api = mock_esm("../src/stream_settings_api");
+const stream_settings_data = mock_esm("../src/stream_settings_data");
 const onboarding_steps = mock_esm("../src/onboarding_steps");
 const stream_settings_ui = mock_esm("../src/stream_settings_ui", {
     update_settings_for_subscribed: noop,
@@ -290,6 +291,10 @@ test("update_property", ({override}) => {
     {
         const stub = make_stub();
         override(stream_settings_ui, "update_stream_permission_group_setting", stub.f);
+        override(stream_settings_data, "get_sub_for_settings", () => ({
+            can_add_subscribers: false,
+            ...sub,
+        }));
         stream_events.update_property(stream_id, "can_administer_channel_group", 3);
         assert.equal(stub.num_calls, 1);
         const args = stub.get_args("setting_name", "sub", "val");