settings: Disable spectator access setting when server setting is False.

We disable the enable_spectator_access setting when the server level
setting, WEB_PUBLIC_STREAMS_ENABLED setting is set to False.

This commit adds a new argument is_disabled to settings_checkbox which
is used to disable the checkbox and set the color of label accordingly.

This commit also adds a help-link besides the label pointing to
"/help/web-public-streams" which is shown irrespective of the
setting being enabled or disabled.

Fixes #20417.

static/js/admin.js

@@ -160,6 +160,7 @@ export function build_page() {
         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,
+        disable_enable_spectator_access_setting: !page_params.server_web_public_streams_enabled,
     };
 
     if (options.realm_logo_source !== "D" && options.realm_night_logo_source === "D") {

static/styles/dark_theme.css

@@ -1140,6 +1140,14 @@ body.dark-theme {
             color: hsl(236, 15%, 70%);
         }
     }
+
+    /* Originally the icon inherits the color of label, but when the setting
+    is disabled, the color of the label is changed and thus the icon becomes
+    too light. So, we set the color explicitly to original color of label to
+    keep the color of the icon same even when the setting is disabled. */
+    #id_realm_enable_spectator_access_label a {
+        color: hsl(236, 33%, 90%);
+    }
 }
 
 @supports (-moz-appearance: none) {

static/styles/settings.css

@@ -380,6 +380,14 @@ td .button {
     .hidden-email {
         font-style: italic;
     }
+
+    /* Originally the icon inherits the color of label, but when the setting
+    is disabled, the color of the label is changed and thus the icon becomes
+    too light. So, we set the color explicitly to original color of label to
+    keep the color of the icon same even when the setting is disabled. */
+    #id_realm_enable_spectator_access_label a {
+        color: hsl(0, 0%, 20%);
+    }
 }
 
 #admin-user-list,

static/templates/settings/organization_permissions_admin.hbs

@@ -107,7 +107,9 @@
                   setting_name="realm_enable_spectator_access"
                   prefix="id_"
                   is_checked=realm_enable_spectator_access
-                  label=admin_settings_label.realm_enable_spectator_access}}
+                  label=admin_settings_label.realm_enable_spectator_access
+                  is_disabled=disable_enable_spectator_access_setting
+                  help_link="help/web-public-streams"}}
                 <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">

static/templates/settings/settings_checkbox.hbs

@@ -1,8 +1,8 @@
 {{#unless (eq render_only false)}}
-<div class="input-group">
+<div class="input-group {{#if is_disabled}}control-label-disabled{{/if}}">
     <label class="checkbox">
         <input type="checkbox" class="{{setting_name}} inline-block setting-widget prop-element" name="{{setting_name}}" data-setting-widget-type="boolean"
-          id="{{prefix}}{{setting_name}}" {{#if is_checked}}checked="checked"{{/if}} />
+          id="{{prefix}}{{setting_name}}" {{#if is_checked}}checked="checked"{{/if}} {{#if is_disabled}}disabled{{/if}} />
         <span></span>
     </label>
     <label for="{{prefix}}{{setting_name}}" class="inline {{setting_name}}_label" id="{{prefix}}{{setting_name}}_label">