streams: Correctly disable adding subscribers while creating streams.

This commit disables the field used for adding other subscribers
in stream creation box for users who are not allowed to add
other users to streams because of realm level setting
"Who can add users to  streams".

Fixes #24900.

web/src/stream_create.js

@@ -15,6 +15,7 @@ import * as settings_data from "./settings_data";
 import * as stream_create_subscribers from "./stream_create_subscribers";
 import * as stream_data from "./stream_data";
 import * as stream_settings_ui from "./stream_settings_ui";
+import * as stream_ui_updates from "./stream_ui_updates";
 import * as ui_report from "./ui_report";
 import {parse_html} from "./ui_util";
 
@@ -360,6 +361,15 @@ export function show_new_stream_modal() {
             });
         }
     }
+    const $add_subscribers_container = $(
+        "#stream_creation_form .subscriber_list_settings",
+    ).expectOne();
+
+    stream_ui_updates.enable_or_disable_add_subscribers_elements(
+        $add_subscribers_container,
+        settings_data.user_can_subscribe_other_users(),
+        true,
+    );
 
     // set default state for "announce stream" option.
     update_announce_stream_state();

web/src/stream_ui_updates.js

@@ -282,7 +282,11 @@ export function update_setting_element(sub, setting_name) {
     settings_org.discard_property_element_changes($elem, false, sub);
 }
 
-export function enable_or_disable_add_subscribers_elements($container_elem, enable_elem) {
+export function enable_or_disable_add_subscribers_elements(
+    $container_elem,
+    enable_elem,
+    stream_creation = false,
+) {
     const $input_element = $container_elem.find(".input").expectOne();
     const $add_subscribers_button = $container_elem
         .find('button[name="add_subscriber"]')
@@ -298,4 +302,19 @@ export function enable_or_disable_add_subscribers_elements($container_elem, enab
     } else {
         $container_elem.find(".add_subscribers_container").addClass("add_subscribers_disabled");
     }
+
+    if (stream_creation) {
+        const $subscribe_all_users_button = $container_elem.find("button.add_all_users_to_stream");
+        $subscribe_all_users_button.prop("disabled", !enable_elem);
+
+        if (enable_elem) {
+            $container_elem
+                .find(".add_all_users_to_stream_btn_container")
+                .removeClass("add_subscribers_disabled");
+        } else {
+            $container_elem
+                .find(".add_all_users_to_stream_btn_container")
+                .addClass("add_subscribers_disabled");
+        }
+    }
 }

web/src/tippyjs.js

@@ -647,6 +647,18 @@ export function initialize() {
             instance.destroy();
         },
     });
+
+    delegate("body", {
+        target: ["#stream_creation_form .add_subscribers_disabled"],
+        content: $t({
+            defaultMessage:
+                "You do not have permission to add other users to streams in this organization.",
+        }),
+        appendTo: () => document.body,
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
 }
 
 export function show_copied_confirmation($copy_button) {

web/templates/stream_settings/new_stream_users.hbs

@@ -1,10 +1,15 @@
-<div class="subscriber_list_add float-left">
-    {{> add_subscribers_form}}
-</div>
-<br />
+<div class="subscriber_list_settings">
+    <div class="subscriber_list_add float-left">
+        {{> add_subscribers_form}}
+    </div>
+    <br />
 
-{{t "Do you want to add everyone?"}}
-<button class="add_all_users_to_stream small button rounded sea-green">{{t 'Add all users'}}</button>
+
+    {{t "Do you want to add everyone?"}}
+    <span class="add_all_users_to_stream_btn_container">
+        <button class="add_all_users_to_stream small button rounded sea-green">{{t 'Add all users'}}</button>
+    </span>
+</div>
 
 <div class="create_stream_subscriber_list_header">
     <h4 class="stream_setting_subsection_title">{{t 'Subscribers' }}</h4>