From eda1ee555b176c2cc54f72ebee5cff17d016a360 Mon Sep 17 00:00:00 2001
From: Ujjawal Modi <umodi2003@gmail.com>
Date: Mon, 8 May 2023 12:36:12 +0530
Subject: [PATCH] streams: Properly disable add subscriber container for
 existing streams.

Earlier the field used for adding subscribers to existing
streams was not properly disabled.

This commit properly disables the field and also adds a new function
for enabling and disabling add subscribers container.
---
 web/src/stream_ui_updates.js | 30 +++++++++++++++++++++---------
 web/styles/subscriptions.css | 14 ++++++++++++++
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/web/src/stream_ui_updates.js b/web/src/stream_ui_updates.js
index b4719eaab3..390e908e0f 100644
--- a/web/src/stream_ui_updates.js
+++ b/web/src/stream_ui_updates.js
@@ -233,7 +233,7 @@ export function update_add_subscriptions_elements(sub) {
     }
 
     // We are only concerned with the Subscribers tab for editing streams.
-    const $add_subscribers_container = $(".edit_subscribers_for_stream .add_subscribers_container");
+    const $add_subscribers_container = $(".edit_subscribers_for_stream .subscriber_list_settings");
 
     if (page_params.is_guest || page_params.realm_is_zephyr_mirror_realm) {
         // For guest users, we just hide the add_subscribers feature.
@@ -249,15 +249,9 @@ export function update_add_subscriptions_elements(sub) {
         .expectOne();
     const allow_user_to_add_subs = sub.can_add_subscribers;
 
-    if (allow_user_to_add_subs) {
-        $input_element.prop("disabled", false);
-        $button_element.prop("disabled", false);
-        $button_element.css("pointer-events", "");
-        $input_element.popover("destroy");
-    } else {
-        $input_element.prop("disabled", true);
-        $button_element.prop("disabled", true);
+    enable_or_disable_add_subscribers_elements($add_subscribers_container, allow_user_to_add_subs);
 
+    if (!allow_user_to_add_subs) {
         initialize_disable_btn_hint_popover(
             $add_subscribers_container,
             $input_element,
@@ -275,3 +269,21 @@ export function update_setting_element(sub, setting_name) {
     const $elem = $(`#id_${CSS.escape(setting_name)}`);
     settings_org.discard_property_element_changes($elem, false, sub);
 }
+
+export function enable_or_disable_add_subscribers_elements($container_elem, enable_elem) {
+    const $input_element = $container_elem.find(".input").expectOne();
+    const $add_subscribers_button = $container_elem
+        .find('button[name="add_subscriber"]')
+        .expectOne();
+
+    $input_element.prop("contenteditable", enable_elem);
+    $add_subscribers_button.prop("disabled", !enable_elem);
+
+    if (enable_elem) {
+        $add_subscribers_button.css("pointer-events", "");
+        $input_element.popover("destroy");
+        $container_elem.find(".add_subscribers_container").removeClass("add_subscribers_disabled");
+    } else {
+        $container_elem.find(".add_subscribers_container").addClass("add_subscribers_disabled");
+    }
+}
diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index ddc0976673..6fa30f2a2b 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -677,6 +677,20 @@ h4.user_group_setting_subsection_title {
     color: hsl(0deg 0% 67%);
 }
 
+.subscriber_list_settings {
+    .add_subscribers_disabled {
+        cursor: not-allowed;
+
+        .pill-container {
+            cursor: not-allowed;
+        }
+    }
+
+    & button[disabled] {
+        pointer-events: none;
+    }
+}
+
 #groups_overlay,
 #subscription_overlay {
     #user-group-creation,