dropdown-list-widget: Use null-value when no value is specified.

Previously, we tried to read the value from page_params, which was just
a hack to make the calling code look cleaner. We now remove that hack
and thus, our dependency on page_params existing. Now, if the caller
does not specify a default value, we'll use the null-value.

This also creates a new init() function to cleanly wrap the code that
makes changes to the opts passed to the widget.

frontend_tests/node_tests/dropdown_list_widget.js

@@ -10,6 +10,16 @@ const _list_render = {
 };
 set_global('list_render', _list_render);
 
+const setup_zjquery_data = (name) => {
+    $.clear_all_elements();
+    const input_group = $(".input_group");
+    const reset_button = $('.dropdown_list_reset_button');
+    input_group.set_find_results('.dropdown_list_reset_button', reset_button);
+    $(`#${name}_widget #${name}_name`).closest = () => input_group;
+    const $widget = $(`#${name}_widget #${name}_name`);
+    return {reset_button, $widget};
+};
+
 run_test('basic_functions', () => {
     let updated_value;
     const opts = {
@@ -21,11 +31,7 @@ run_test('basic_functions', () => {
         render_text: (text) => `rendered: ${text}`,
     };
 
-    const input_group = $(".input_group");
-    const reset_button = $('.dropdown_list_reset_button');
-    input_group.set_find_results('.dropdown_list_reset_button', reset_button);
-    $("#my_setting_widget #my_setting_name").closest = () => input_group;
-    const $widget = $("#my_setting_widget #my_setting_name");
+    const {reset_button, $widget} = setup_zjquery_data(opts.widget_name);
 
     const widget = dropdown_list_widget(opts);
 
@@ -45,3 +51,18 @@ run_test('basic_functions', () => {
     assert.equal(updated_value, null);
     assert(!reset_button.visible());
 });
+
+run_test('no_default_value', () => {
+    const opts = {
+        widget_name: 'my_setting',
+        data: ['one', 'two', 'three'].map(x => ({name: x, value: x})),
+        default_text: i18n.t("not set"),
+        render_text: (text) => `rendered: ${text}`,
+        null_value: 'null-value',
+    };
+
+    blueslip.expect('warn', 'dropdown-list-widget: Called without a default value; using null value');
+    setup_zjquery_data(opts.widget_name);
+    const widget = dropdown_list_widget(opts);
+    assert.equal(widget.value(), 'null-value');
+});

frontend_tests/node_tests/settings_org.js

@@ -1035,6 +1035,8 @@ run_test('misc', () => {
         };
     });
 
+    // We do not define any settings we need in page_params yet, but we don't need to for this test.
+    blueslip.expect('warn', 'dropdown-list-widget: Called without a default value; using null value', 3);
     settings_org.init_dropdown_widgets();
 
     let setting_name = 'realm_notifications_stream_id';

static/js/dropdown_list_widget.js

@@ -1,12 +1,19 @@
 const DropdownListWidget = function (opts) {
-    opts = Object.assign({
-        null_value: null,
-        render_text: (item_name) => item_name,
-        on_update: () => {},
-    }, opts);
-    opts.container_id = `${opts.widget_name}_widget`;
-    opts.value_id = `id_${opts.widget_name}`;
-    opts.value = opts.value || page_params[opts.widget_name];
+    const init = () => {
+        // Run basic sanity checks on opts, and set up sane defaults.
+        opts = Object.assign({
+            null_value: null,
+            render_text: (item_name) => item_name,
+            on_update: () => {},
+        }, opts);
+        opts.container_id = `${opts.widget_name}_widget`;
+        opts.value_id = `id_${opts.widget_name}`;
+        if (opts.value === undefined) {
+            opts.value = opts.null_value;
+            blueslip.warn('dropdown-list-widget: Called without a default value; using null value');
+        }
+    };
+    init();
 
     const render_dropdown_list = require("../templates/settings/dropdown_list.hbs");
 

static/js/settings_org.js

@@ -566,10 +566,16 @@ exports.init_dropdown_widgets = () => {
         null_value: -1,
     };
     exports.notifications_stream_widget = dropdown_list_widget(
-        Object.assign({widget_name: 'realm_notifications_stream_id'},
+        Object.assign({
+            widget_name: 'realm_notifications_stream_id',
+            value: page_params.realm_notifications_stream_id,
+        },
                       notification_stream_options));
     exports.signup_notifications_stream_widget = dropdown_list_widget(
-        Object.assign({widget_name: 'realm_signup_notifications_stream_id'},
+        Object.assign({
+            widget_name: 'realm_signup_notifications_stream_id',
+            value: page_params.realm_signup_notifications_stream_id,
+        },
                       notification_stream_options));
     exports.default_code_language_widget = dropdown_list_widget({
         widget_name: 'realm_default_code_block_language',
@@ -579,6 +585,7 @@ exports.init_dropdown_widgets = () => {
                 value: x,
             };
         }),
+        value: page_params.realm_default_code_block_language,
         on_update: () => {
             exports.save_discard_widget_status_handler($(`#org-other-settings`));
         },