settings: Simplify settings_list_widget interface.

We move more common code into settings_lsit_widget for cleaner code
in settings_org.js.

frontend_tests/node_tests/settings_org.js

@@ -56,6 +56,12 @@ const _realm_logo = {
     build_realm_logo_widget: noop,
 };
 
+const _list_render = {
+    create: () => {
+        return { init: noop };
+    },
+};
+
 set_global('channel', _channel);
 set_global('csrf_token', 'token-stub');
 set_global('FormData', _FormData);
@@ -66,6 +72,7 @@ set_global('page_params', _page_params);
 set_global('realm_icon', _realm_icon);
 set_global('realm_logo', _realm_logo);
 set_global('ui_report', _ui_report);
+set_global('list_render', _list_render);
 
 const settings_config = zrequire('settings_config');
 const settings_bots = zrequire('settings_bots');
@@ -788,13 +795,13 @@ run_test('set_up', () => {
         upload_realm_icon = f;
     };
 
-    settings_org.init_dropdown_widgets();
+    const settings_list_widget_backup = settings_list_widget;
-    const stub_notif_stream_render = settings_org.notifications_stream_widget.render;
+    settings_list_widget = () => {  // eslint-disable-line no-native-reassign
-    settings_org.notifications_stream_widget.render = noop;
+        return {
-    const stub_signup_notif_render = settings_org.signup_notifications_stream_widget.render;
+            render: noop,
-    settings_org.signup_notifications_stream_widget.render = noop;
+            update: noop,
-    const stub_language_render = settings_org.default_code_language_widget.render;
+        };
-    settings_org.default_code_language_widget.render = noop;
+    };
     $("#id_realm_message_content_edit_limit_minutes").set_parent($.create('<stub edit limit parent>'));
     $("#id_realm_message_content_delete_limit_minutes").set_parent($.create('<stub delete limit parent>'));
     $("#message_content_in_email_notifications_label").set_parent($.create('<stub in-content setting checkbox>'));
@@ -831,9 +838,7 @@ run_test('set_up', () => {
     test_parse_time_limit();
     test_discard_changes_button(discard_changes);
 
-    settings_org.notifications_stream_widget.render = stub_notif_stream_render;
+    settings_list_widget = settings_list_widget_backup;  // eslint-disable-line no-native-reassign
-    settings_org.signup_notifications_stream_widget.render = stub_signup_notif_render;
-    settings_org.default_code_language_widget.render = stub_language_render;
 });
 
 run_test('test get_organization_settings_options', () => {
@@ -1014,6 +1019,20 @@ run_test('misc', () => {
         arr.push({name: "some_stream", stream_id: 42});
         return arr;
     };
+
+    // Set stubs for settings_list_widget:
+    const widget_settings = ['realm_notifications_stream_id',
+                             'realm_signup_notifications_stream_id',
+                             'realm_default_code_block_language'];
+    const dropdown_list_parent = $.create(`<list parent>`);
+    dropdown_list_parent.set_find_results('.dropdown_list_reset_button', $.create('<disable button>'));
+    widget_settings.forEach(name => {
+        const elem = $.create(`#${name}_widget #${name}_name`);
+        elem.closest = () => {
+            return dropdown_list_parent;
+        };
+    });
+
     settings_org.init_dropdown_widgets();
 
     let setting_name = 'realm_notifications_stream_id';

frontend_tests/zjsunit/zblueslip.js

@@ -117,5 +117,9 @@ exports.make_zblueslip = function () {
         return () => {};
     };
 
+    lib.preview_node = (node) => {
+        return 'node:' + node;
+    };
+
     return lib;
 };

static/js/settings_list_widget.js

@@ -8,31 +8,6 @@ const DropdownListWidget = function (opts) {
 
     const render_dropdown_list = require("../templates/settings/dropdown_list.hbs");
 
-    const setup = () => {
-        // populate the dropdown
-        const dropdown_list_body = $(`#${opts.container_id} .dropdown-list-body`).expectOne();
-        const search_input = $(`#${opts.container_id} .dropdown-search > input[type=text]`);
-        list_render.create(dropdown_list_body, opts.data, {
-            name: `${opts.setting_name}_list`,
-            modifier: function (item) {
-                return render_dropdown_list({ item: item });
-            },
-            filter: {
-                element: search_input,
-                predicate: function (item, value) {
-                    return item.name.toLowerCase().includes(value);
-                },
-            },
-        });
-        $(`#${opts.container_id} .dropdown-search`).click(function (e) {
-            e.stopPropagation();
-        });
-
-        $(`#${opts.container_id} .dropdown-toggle`).click(function () {
-            search_input.val("").trigger("input");
-        });
-    };
-
     const render = (value) => {
         $(`#${opts.container_id} #${opts.value_id}`).data("value", value);
 
@@ -76,6 +51,35 @@ const DropdownListWidget = function (opts) {
         });
     };
 
+    const setup = () => {
+        // populate the dropdown
+        const dropdown_list_body = $(`#${opts.container_id} .dropdown-list-body`).expectOne();
+        const search_input = $(`#${opts.container_id} .dropdown-search > input[type=text]`);
+
+        list_render.create(dropdown_list_body, opts.data, {
+            name: `${opts.setting_name}_list`,
+            modifier: function (item) {
+                return render_dropdown_list({ item: item });
+            },
+            filter: {
+                element: search_input,
+                predicate: function (item, value) {
+                    return item.name.toLowerCase().includes(value);
+                },
+            },
+        });
+        $(`#${opts.container_id} .dropdown-search`).click(function (e) {
+            e.stopPropagation();
+        });
+
+        $(`#${opts.container_id} .dropdown-toggle`).click(function () {
+            search_input.val("").trigger("input");
+        });
+
+        render(page_params[opts.setting_name]);
+        register_event_handlers();
+    };
+
     const value = () => {
         let val = $(`#${opts.container_id} #${opts.value_id}`).data('value');
         if (val === null) {
@@ -84,10 +88,11 @@ const DropdownListWidget = function (opts) {
         return val;
     };
 
+    // Run setup() automatically on initialization.
+    setup();
+
     return {
-        setup,
         render,
-        register_event_handlers,
         value,
     };
 };

static/js/settings_org.js

@@ -562,18 +562,8 @@ exports.build_page = function () {
 
     loading.make_indicator($('#admin_page_auth_methods_loading_indicator'));
 
-    // Populate notifications stream modal
+    // Initialize all the dropdown list widgets.
-    if (page_params.is_admin) {
     exports.init_dropdown_widgets();
-        exports.default_code_language_widget.setup();
-        exports.notifications_stream_widget.setup();
-        exports.signup_notifications_stream_widget.setup();
-    }
-    exports.default_code_language_widget.render(page_params.realm_default_code_block_language);
-    exports.notifications_stream_widget.render(page_params.realm_notifications_stream_id);
-    exports.signup_notifications_stream_widget.render(
-        page_params.realm_signup_notifications_stream_id);
-
     // Populate realm domains
     exports.populate_realm_domains(page_params.realm_domains);
 
@@ -921,10 +911,6 @@ exports.build_page = function () {
         });
     });
 
-    exports.default_code_language_widget.register_event_handlers();
-    exports.notifications_stream_widget.register_event_handlers();
-    exports.signup_notifications_stream_widget.register_event_handlers();
-
     function upload_realm_icon(file_input) {
         const form_data = new FormData();