settings: Add frontend part for create_web_public_stream_policy.

This commit has the following changes -

- Adds dropdown for changing create_web_public_stream_policy and this
dropdown is visible only if settings.WEB_PUBLIC_STREAMS_ENABLED and
enable_spectator_access is set to True. This dropdown is live-udpated
on changing enable_spectator_access setting.

- The web-public stream option in stream creation form and stream privacy
modal is hidden if one of settings.WEB_PUBLIC_STREAMS_ENABLED or
enable_spectator_access is set to False except in stream privacy modal
when the stream is already web-public so that the user is not confused by
none of the options being selected.

- We disable the web-public stream option in stream creation form and
in stream-privacy modals of stream which are not already web-public
when the user is not allowed to create web-public streams as per
create_web_public_stream_policy setting.

- We use on_show parameter to hide or disable the options in stream-privacy
modal because we use the visible property of element to remove the bottom
border from last element in the stream-privacy choices and thus we have
to wait for the modal to be visible.

Fixes #20287.  Fixes #20296.

frontend_tests/node_tests/hotkey.js

@@ -277,6 +277,7 @@ run_test("allow normal typing when processing text", ({override}) => {
 run_test("streams", ({override}) => {
     settings_data.user_can_create_private_streams = () => true;
     settings_data.user_can_create_public_streams = () => true;
+    settings_data.user_can_create_web_public_streams = () => true;
     override(overlays, "streams_open", () => true);
     override(overlays, "is_active", () => true);
     assert_mapping("S", stream_settings_ui, "keyboard_sub");
@@ -284,6 +285,7 @@ run_test("streams", ({override}) => {
     assert_mapping("n", stream_settings_ui, "open_create_stream");
     settings_data.user_can_create_private_streams = () => false;
     settings_data.user_can_create_public_streams = () => false;
+    settings_data.user_can_create_web_public_streams = () => false;
     assert_unmapped("n");
 });
 

frontend_tests/node_tests/settings_org.js

@@ -685,6 +685,9 @@ test("set_up", ({override, mock_template}) => {
     $("#allowed_domains_label").set_parent($.create("<stub-allowed-domain-label-parent>"));
     const waiting_period_parent_elem = $.create("waiting-period-parent-stub");
     $("#id_realm_waiting_period_threshold").set_parent(waiting_period_parent_elem);
+    $("#id_realm_create_web_public_stream_policy").set_parent(
+        $.create("<stub-create-web-public-stream-policy-parent>"),
+    );
 
     // TEST set_up() here, but this mostly just allows us to
     // get access to the click handlers.

static/js/admin.js

@@ -158,6 +158,8 @@ export function build_page() {
         email_notifications_batching_period_values:
             settings_config.email_notifications_batching_period_values,
         twenty_four_hour_time_values: settings_config.twenty_four_hour_time_values,
+        create_web_public_stream_policy_values:
+            settings_config.create_web_public_stream_policy_values,
     };
 
     if (options.realm_logo_source !== "D" && options.realm_night_logo_source === "D") {

static/js/hotkey.js

@@ -746,7 +746,8 @@ export function process_hotkey(e, hotkey) {
             event_name === "n_key" &&
             overlays.streams_open() &&
             (settings_data.user_can_create_private_streams() ||
-                settings_data.user_can_create_public_streams())
+                settings_data.user_can_create_public_streams() ||
+                settings_data.user_can_create_web_public_streams())
         ) {
             stream_settings_ui.open_create_stream();
             return true;

static/js/popover_menus.js

@@ -44,7 +44,8 @@ export function initialize() {
                 render_left_sidebar_stream_setting_popover({
                     can_create_streams:
                         settings_data.user_can_create_private_streams() ||
-                        settings_data.user_can_create_public_streams(),
+                        settings_data.user_can_create_public_streams() ||
+                        settings_data.user_can_create_web_public_streams(),
                 }),
             );
             left_sidebar_stream_setting_popover_displayed = true;

static/js/settings_org.js

@@ -218,6 +218,7 @@ function get_subsection_property_elements(element) {
 const simple_dropdown_properties = [
     "realm_create_private_stream_policy",
     "realm_create_public_stream_policy",
+    "realm_create_web_public_stream_policy",
     "realm_invite_to_stream_policy",
     "realm_user_group_edit_policy",
     "realm_private_message_policy",
@@ -349,6 +350,13 @@ function set_digest_emails_weekday_visibility() {
     );
 }
 
+function set_create_web_public_stream_dropdown_visibility() {
+    change_element_block_display_property(
+        "id_realm_create_web_public_stream_policy",
+        page_params.server_web_public_streams_enabled && page_params.realm_enable_spectator_access,
+    );
+}
+
 export function populate_realm_domains(realm_domains) {
     if (!meta.loaded) {
         return;
@@ -445,6 +453,9 @@ function update_dependent_subsettings(property_name) {
             );
             set_digest_emails_weekday_visibility();
             break;
+        case "realm_enable_spectator_access":
+            set_create_web_public_stream_dropdown_visibility();
+            break;
     }
 }
 
@@ -988,6 +999,7 @@ export function build_page() {
     set_org_join_restrictions_dropdown();
     set_message_content_in_email_notifications_visiblity();
     set_digest_emails_weekday_visibility();
+    set_create_web_public_stream_dropdown_visibility();
 
     register_save_discard_widget_handlers($(".admin-realm-form"), "/json/realm", false);
 

static/js/stream_create.js

@@ -301,6 +301,7 @@ function clear_error_display() {
 export function show_new_stream_modal() {
     $("#stream-creation").removeClass("hide");
     $(".right .settings").hide();
+    stream_settings_ui.hide_or_disable_stream_privacy_options_if_required($("#stream-creation"));
 
     const add_people_container = $("#people_to_add");
     add_people_container.html(

static/js/stream_edit.js

@@ -794,6 +794,11 @@ export function initialize() {
                     change_stream_message_retention_days_block_display_property(dropdown_value);
                 });
             },
+            on_show: () => {
+                stream_settings_ui.hide_or_disable_stream_privacy_options_if_required(
+                    $("#stream_privacy_modal"),
+                );
+            },
         });
         e.preventDefault();
         e.stopPropagation();

static/js/stream_settings_ui.js

@@ -607,7 +607,8 @@ export function setup_page(callback) {
         const template_data = {
             can_create_streams:
                 settings_data.user_can_create_private_streams() ||
-                settings_data.user_can_create_public_streams(),
+                settings_data.user_can_create_public_streams() ||
+                settings_data.user_can_create_web_public_streams(),
             hide_all_streams: !should_list_all_streams(),
             max_name_length: page_params.max_stream_name_length,
             max_description_length: page_params.max_stream_description_length,
@@ -651,6 +652,7 @@ export function setup_page(callback) {
             if (
                 settings_data.user_can_create_private_streams() ||
                 settings_data.user_can_create_public_streams() ||
+                settings_data.user_can_create_web_public_streams() ||
                 page_params.realm_is_zephyr_mirror_realm
             ) {
                 open_create_stream();
@@ -986,6 +988,29 @@ export function sub_or_unsub(sub, stream_row) {
     }
 }
 
+export function hide_or_disable_stream_privacy_options_if_required(container) {
+    if (!settings_data.user_can_create_web_public_streams()) {
+        const web_public_stream_elem = container.find(
+            `input[value='${CSS.escape(
+                stream_data.stream_privacy_policy_values.web_public.code,
+            )}']`,
+        );
+        if (!web_public_stream_elem.is(":checked")) {
+            if (
+                !page_params.server_web_public_streams_enabled ||
+                !page_params.realm_enable_spectator_access
+            ) {
+                web_public_stream_elem.closest(".radio-input-parent").hide();
+                container
+                    .find(".stream-privacy-values .radio-input-parent:visible:last")
+                    .css("border-bottom", "none");
+            } else {
+                web_public_stream_elem.prop("disabled", true);
+            }
+        }
+    }
+}
+
 export function initialize() {
     $("#subscriptions_table").on("click", ".create_stream_button", (e) => {
         e.preventDefault();

static/templates/settings/organization_permissions_admin.hbs

@@ -109,6 +109,12 @@
                   is_checked=realm_enable_spectator_access
                   render_only=page_params.server_web_public_streams_enabled
                   label=admin_settings_label.realm_enable_spectator_access}}
+                <div class="input-group realm_create_web_public_stream_policy">
+                    <label for="realm_create_web_public_stream_policy" class="dropdown-title">{{t "Who can create web-public streams" }}</label>
+                    <select name="realm_create_web_public_stream_policy" id="id_realm_create_web_public_stream_policy" class="prop-element" data-setting-widget-type="number">
+                        {{> dropdown_options_widget option_values=create_web_public_stream_policy_values}}
+                    </select>
+                </div>
                 <div class="input-group">
                     <label for="realm_create_private_stream_policy" class="dropdown-title">{{t "Who can create private streams" }}</label>
                     <select name="realm_create_private_stream_policy" id="id_realm_create_private_stream_policy" class="prop-element" data-setting-widget-type="number">

static/templates/stream_settings/stream_types.hbs

@@ -1,5 +1,5 @@
 <div class="grey-box new-style">
-    <div class="input-group">
+    <div class="input-group stream-privacy-values">
         <div class="alert stream-privacy-status"></div>
         <h4>{{t 'Who can access the stream?'}}
             {{> ../help_link_widget link="/help/stream-permissions" }}