From 4f63378e7f9e1fe15fdd61cfd5a728587aa142c4 Mon Sep 17 00:00:00 2001
From: Andrew McAfee <amcafee11171@gmail.com>
Date: Sat, 23 Oct 2021 15:14:11 +0000
Subject: [PATCH] settings: Add UI option for custom notification batching
 period.

PR #19576 added a settings option for selecting a notification batching
period. We want to extend that UI option with the ability to select
a custom period.

Tweaked by tabbott to have the natural model that picking a value
present in the dropdown live-updates to remove the custom input,
rather than only having the custom input disappear on reload.

Fixes #19713.
---
 static/js/settings_config.ts                  |  4 ++
 static/js/settings_notifications.js           | 56 ++++++++++++++++---
 .../settings/notification_settings.hbs        | 19 +++++--
 3 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/static/js/settings_config.ts b/static/js/settings_config.ts
index 94c6b325bc..ffae076772 100644
--- a/static/js/settings_config.ts
+++ b/static/js/settings_config.ts
@@ -563,6 +563,10 @@ export const email_notifications_batching_period_values = [
         value: 60 * 60 * 24 * 7,
         description: $t({defaultMessage: "1 week"}),
     },
+    {
+        value: "custom_period",
+        description: $t({defaultMessage: "N minutes"}),
+    },
 ];
 
 const email_message_notification_settings = [
diff --git a/static/js/settings_notifications.js b/static/js/settings_notifications.js
index a461529f8a..3015aaae43 100644
--- a/static/js/settings_notifications.js
+++ b/static/js/settings_notifications.js
@@ -65,10 +65,30 @@ function update_desktop_icon_count_display(settings_panel) {
     }
 }
 
+function set_notification_batching_ui(container, setting_seconds, force_custom) {
+    const select_elem = container.find(".setting_email_notifications_batching_period_seconds");
+    const edit_elem = container.find(".email_notification_batching_period_edit_minutes");
+    const valid_period_values = settings_config.email_notifications_batching_period_values.map(
+        (x) => x.value,
+    );
+
+    // We display the custom widget if either the user just selected
+    // custom_period, or the current value cannot be represented with
+    // the existing set of values.
+    if (force_custom || !valid_period_values.includes(setting_seconds)) {
+        const setting_minutes = setting_seconds / 60;
+        select_elem.val("custom_period");
+        edit_elem.val(setting_minutes);
+        edit_elem.parent().show();
+    } else {
+        select_elem.val(setting_seconds);
+        edit_elem.parent().hide();
+    }
+}
+
 export function set_enable_digest_emails_visibility(settings_panel) {
     const container = $(settings_panel.container);
     const for_realm_settings = settings_panel.for_realm_settings;
-
     if (page_params.realm_digest_emails_enabled) {
         if (for_realm_settings) {
             container.find(".other_email_notifications").show();
@@ -123,10 +143,8 @@ export function set_up(settings_panel) {
         }
     });
 
-    const email_notifications_batching_period_dropdown = container.find(
-        ".setting_email_notifications_batching_period_seconds",
-    );
-    email_notifications_batching_period_dropdown.val(
+    set_notification_batching_ui(
+        container,
         settings_object.email_notifications_batching_period_seconds,
     );
 
@@ -148,10 +166,29 @@ export function set_up(settings_panel) {
             stream_edit.stream_setting_changed(e, true);
             return;
         }
-        const setting_name = input_elem.attr("name");
+        let setting_name = input_elem.attr("name");
+        let setting_value = settings_org.get_input_element_value(this);
+
+        if (setting_name === "email_notifications_batching_period_seconds") {
+            if (input_elem.val() === "custom_period") {
+                set_notification_batching_ui(
+                    container,
+                    settings_object.email_notifications_batching_period_seconds,
+                    true,
+                );
+                return;
+            }
+            set_notification_batching_ui(container, setting_value);
+        } else if (setting_name === "email_notification_batching_period_edit_minutes") {
+            // This field is in minutes, but the actual setting is seconds
+            setting_value = setting_value * 60;
+            set_notification_batching_ui(container, setting_value);
+            setting_name = "email_notifications_batching_period_seconds";
+        }
+
         change_notification_setting(
             setting_name,
-            settings_org.get_input_element_value(this),
+            setting_value,
             input_elem.closest(".subsection-parent").find(".alert-notification"),
         );
     });
@@ -187,8 +224,11 @@ export function update_page(settings_panel) {
                 update_desktop_icon_count_display(settings_panel);
                 break;
             }
-            case "notification_sound":
             case "email_notifications_batching_period_seconds": {
+                set_notification_batching_ui(container, settings_object[setting]);
+                break;
+            }
+            case "notification_sound": {
                 container.find(`.setting_${CSS.escape(setting)}`).val(settings_object[setting]);
                 break;
             }
diff --git a/static/templates/settings/notification_settings.hbs b/static/templates/settings/notification_settings.hbs
index b71b56ff18..79c427cf24 100644
--- a/static/templates/settings/notification_settings.hbs
+++ b/static/templates/settings/notification_settings.hbs
@@ -119,16 +119,27 @@
             {{> settings_save_discard_widget section_name="email-message-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
 
-        <label for="email_notifications_batching_period">
-            {{t "Delay before sending message notification emails" }}
-        </label>
+        <div class="input-group form-horizontal">
 
-        <div class="input-group">
+            <label for="email_notifications_batching_period">
+                {{t "Delay before sending message notification emails" }}
+            </label>
             <select name="email_notifications_batching_period_seconds" class="setting_email_notifications_batching_period_seconds prop-element" data-setting-widget-type="number">
                 {{#each email_notifications_batching_period_values}}
                 <option value="{{ this.value }}">{{ this.description }}</option>
                 {{/each}}
             </select>
+            <div class="dependent-inline-block">
+                <label for="email_notification_batching_period_edit_minutes" class="inline-block">
+                    {{t 'N' }}:
+                </label>
+                <input type="text"
+                  name="email_notification_batching_period_edit_minutes"
+                  class="email_notification_batching_period_edit_minutes admin-realm-time-limit-input prop-element"
+                  data-setting-widget-type="number"
+                  autocomplete="off"
+                  value="{{ email_notifications_batching_period_seconds }}"/>
+            </div>
         </div>
 
         {{#each notification_settings.email_message_notification_settings}}