settings: Add UI for realm-level defaults of display settings.

This commit adds a new module settings_defaults.js which calls
the functions in settings_display passing appropriate container
element and settings object as parameters.
We also add one more parameter for_realm_settings to some of the
functions in settings_dislay to differentiate between the user
and realm-level settings.

static/js/admin.js

@@ -6,6 +6,7 @@ import render_settings_organization_settings_tip from "../templates/settings/org
 import {$t, language_list} from "./i18n";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
+import {realm_user_settings_defaults} from "./realm_user_settings_defaults";
 import * as settings from "./settings";
 import * as settings_bots from "./settings_bots";
 import * as settings_config from "./settings_config";
@@ -123,6 +124,12 @@ export function build_page() {
         can_edit_user_groups: settings_data.user_can_edit_user_groups(),
         policy_values: settings_config.common_policy_values,
         ...settings_org.get_organization_settings_options(),
+        demote_inactive_streams_values: settings_config.demote_inactive_streams_values,
+        color_scheme_values: settings_config.color_scheme_values,
+        default_view_values: settings_config.default_view_values,
+        settings_object: realm_user_settings_defaults,
+        display_settings: settings_config.get_all_display_settings(),
+        settings_label: settings_config.display_settings_labels,
     };
 
     if (options.realm_logo_source !== "D" && options.realm_night_logo_source === "D") {

static/js/settings_display.js

@@ -38,10 +38,14 @@ function change_display_setting(data, container, url, status_element, success_ms
     settings_ui.do_settings_change(channel.patch, url, data, $status_el, opts);
 }
 
-export function set_up(container, settings_object) {
+export function set_up(container, settings_object, for_realm_settings) {
     meta.loaded = true;
-    const language_modal_elem = "#user_default_language_modal";
-    const patch_url = "/json/settings";
+    let language_modal_elem = "#user_default_language_modal";
+    let patch_url = "/json/settings";
+    if (for_realm_settings) {
+        language_modal_elem = "#realm_default_language_modal";
+        patch_url = "/json/realm/user_settings_defaults";
+    }
 
     container.find(".display-settings-status").hide();
 
@@ -90,41 +94,48 @@ export function set_up(container, settings_object) {
         });
     }
 
-    $(language_modal_elem)
-        .find(".language")
-        .on("click", (e) => {
+    if (!for_realm_settings) {
+        $(language_modal_elem)
+            .find(".language")
+            .on("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                overlays.close_modal(language_modal_elem);
+
+                const $link = $(e.target).closest("a[data-code]");
+                const setting_value = $link.attr("data-code");
+                const data = {default_language: setting_value};
+
+                const new_language = $link.attr("data-name");
+                container.find(".default_language_name").text(new_language);
+
+                change_display_setting(
+                    data,
+                    container,
+                    patch_url,
+                    ".language-settings-status",
+                    $t_html(
+                        {
+                            defaultMessage:
+                                "Saved. Please <z-link>reload</z-link> for the change to take effect.",
+                        },
+                        {"z-link": (content_html) => `<a class='reload_link'>${content_html}</a>`},
+                    ),
+                    true,
+                );
+            });
+
+        container.find(".setting_default_language").on("click", (e) => {
             e.preventDefault();
             e.stopPropagation();
-            overlays.close_modal(language_modal_elem);
-
-            const $link = $(e.target).closest("a[data-code]");
-            const setting_value = $link.attr("data-code");
-            const data = {default_language: setting_value};
-
-            const new_language = $link.attr("data-name");
-            container.find(".default_language_name").text(new_language);
-
-            change_display_setting(
-                data,
-                container,
-                patch_url,
-                ".language-settings-status",
-                $t_html(
-                    {
-                        defaultMessage:
-                            "Saved. Please <z-link>reload</z-link> for the change to take effect.",
-                    },
-                    {"z-link": (content_html) => `<a class='reload_link'>${content_html}</a>`},
-                ),
-                true,
-            );
+            overlays.open_modal(language_modal_elem);
         });
 
-    container.find(".setting_default_language").on("click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        overlays.open_modal(language_modal_elem);
-    });
+        container.find(".setting_twenty_four_hour_time").on("change", function () {
+            const data = {twenty_four_hour_time: this.value};
+            change_display_setting(data, container, patch_url, ".time-settings-status");
+        });
+    }
 
     container.find(".setting_demote_inactive_streams").on("change", function () {
         const data = {demote_inactive_streams: this.value};
@@ -145,11 +156,6 @@ export function set_up(container, settings_object) {
         window.location.reload();
     });
 
-    container.find(".setting_twenty_four_hour_time").on("change", function () {
-        const data = {twenty_four_hour_time: this.value};
-        change_display_setting(data, container, patch_url, ".time-settings-status");
-    });
-
     container.find(".setting_emojiset_choice").on("click", function () {
         const data = {emojiset: $(this).val()};
         const current_emojiset = settings_object.emojiset;

static/js/settings_realm_user_settings_defaults.js

@@ -0,0 +1,9 @@
+import $ from "jquery";
+
+import {realm_user_settings_defaults} from "./realm_user_settings_defaults";
+import * as settings_display from "./settings_display";
+
+export function set_up() {
+    const container = $("#realm-user-default-settings");
+    settings_display.set_up(container, realm_user_settings_defaults, true);
+}

static/js/settings_sections.js

@@ -16,6 +16,7 @@ import * as settings_notifications from "./settings_notifications";
 import * as settings_org from "./settings_org";
 import * as settings_playgrounds from "./settings_playgrounds";
 import * as settings_profile_fields from "./settings_profile_fields";
+import * as settings_realm_user_settings_defaults from "./settings_realm_user_settings_defaults";
 import * as settings_streams from "./settings_streams";
 import * as settings_user_groups from "./settings_user_groups";
 import * as settings_users from "./settings_users";
@@ -54,7 +55,7 @@ export function initialize() {
     // personal
     load_func_dict.set("your-account", settings_account.set_up);
     load_func_dict.set("display-settings", () => {
-        settings_display.set_up($("#user-display-settings"), user_settings);
+        settings_display.set_up($("#user-display-settings"), user_settings, false);
     });
     load_func_dict.set("notifications", settings_notifications.set_up);
     load_func_dict.set("your-bots", settings_bots.set_up);
@@ -75,6 +76,10 @@ export function initialize() {
     load_func_dict.set("user-groups-admin", settings_user_groups.set_up);
     load_func_dict.set("profile-field-settings", settings_profile_fields.set_up);
     load_func_dict.set("data-exports-admin", settings_exports.set_up);
+    load_func_dict.set(
+        "organization-level-user-defaults",
+        settings_realm_user_settings_defaults.set_up,
+    );
 }
 
 export function load_settings_section(section) {

static/templates/settings/admin_tab.hbs

@@ -9,6 +9,8 @@
 
 {{> organization_permissions_admin }}
 
+{{> organization_user_settings_defaults }}
+
 {{> emoji_settings_admin }}
 
 {{> user_list_admin }}

static/templates/settings/organization_user_settings_defaults.hbs

@@ -0,0 +1,6 @@
+<div id="realm-user-default-settings" class="settings-section" data-name="organization-level-user-defaults">
+    <div class="tip">
+        {{t "Configure the default personal preference settings for new users joining your organization." }}
+    </div>
+    {{> display_settings prefix="realm_" for_realm_settings=true}}
+</div>

static/templates/settings_overlay.hbs

@@ -75,6 +75,13 @@
                     <i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.' }}"></i>
                     {{/unless}}
                 </li>
+                <li class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-level-user-defaults">
+                    <i class="icon fa fa-cog" aria-hidden="true"></i>
+                    <div class="text">{{t "Default user settings" }}</div>
+                    {{#unless is_admin}}
+                    <i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.' }}"></i>
+                    {{/unless}}
+                </li>
                 <li tabindex="0" data-section="emoji-settings">
                     <i class="icon fa fa-smile-o" aria-hidden="true"></i>
                     <div class="text">{{t "Custom emoji" }}</div>

tools/test-js-with-node

@@ -142,6 +142,7 @@ EXEMPT_FILES = {
     "static/js/settings_org.js",
     "static/js/settings_panel_menu.js",
     "static/js/settings_profile_fields.js",
+    "static/js/settings_realm_user_settings_defaults.js",
     "static/js/settings_sections.js",
     "static/js/settings_streams.js",
     "static/js/settings_toggle.js",