From 4d14ba41ba208f246c56b155d513e22eef47ef99 Mon Sep 17 00:00:00 2001
From: Rohitt Vashishtha <aero31aero@gmail.com>
Date: Tue, 19 May 2020 10:31:53 +0530
Subject: [PATCH] dropdown-list-widget: Properly handle disabled state.

We wrap the [reset] anchor tag in a button so that we can set 'disabled'
attribute on it. We change the styles to hide the [reset] button and the
pencil icon when the widget is disabled.

We also need to call `e.preventDefault()` in the event handler since now
the anchor tag behaves as a button.
---
 frontend_tests/node_tests/dropdown_list_widget.js  |  2 +-
 frontend_tests/node_tests/settings_org.js          |  4 ++--
 static/js/dropdown_list_widget.js                  |  7 ++++---
 static/styles/settings.scss                        | 13 +++++++++++++
 static/templates/settings/dropdown_list_widget.hbs |  6 +++---
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/frontend_tests/node_tests/dropdown_list_widget.js b/frontend_tests/node_tests/dropdown_list_widget.js
index 396c5ea8ff..d3adb3352a 100644
--- a/frontend_tests/node_tests/dropdown_list_widget.js
+++ b/frontend_tests/node_tests/dropdown_list_widget.js
@@ -14,7 +14,7 @@ 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);
+    input_group.set_find_results('.dropdown_list_reset_button:not([disabled])', reset_button);
     $(`#${name}_widget #${name}_name`).closest = () => input_group;
     const $widget = $(`#${name}_widget #${name}_name`);
     return {reset_button, $widget};
diff --git a/frontend_tests/node_tests/settings_org.js b/frontend_tests/node_tests/settings_org.js
index 1478db07fc..ac14ce9893 100644
--- a/frontend_tests/node_tests/settings_org.js
+++ b/frontend_tests/node_tests/settings_org.js
@@ -947,7 +947,7 @@ run_test('misc', () => {
     page_params.is_admin = false;
 
     const stub_notification_disable_parent = $.create('<stub notification_disable parent');
-    stub_notification_disable_parent.set_find_results('.dropdown_list_reset_button',
+    stub_notification_disable_parent.set_find_results('.dropdown_list_reset_button:not([disabled])',
                                                       $.create('<disable link>'));
 
     page_params.realm_name_changes_disabled = false;
@@ -1027,7 +1027,7 @@ run_test('misc', () => {
                              '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>'));
+    dropdown_list_parent.set_find_results('.dropdown_list_reset_button:not([disabled])', $.create('<disable button>'));
     widget_settings.forEach(name => {
         const elem = $.create(`#${name}_widget #${name}_name`);
         elem.closest = () => {
diff --git a/static/js/dropdown_list_widget.js b/static/js/dropdown_list_widget.js
index 64353301a9..da5360006e 100644
--- a/static/js/dropdown_list_widget.js
+++ b/static/js/dropdown_list_widget.js
@@ -25,7 +25,7 @@ const DropdownListWidget = function (opts) {
         if (!value || value === opts.null_value) {
             elem.text(opts.default_text);
             elem.addClass("text-warning");
-            elem.closest('.input-group').find('.dropdown_list_reset_button').hide();
+            elem.closest('.input-group').find('.dropdown_list_reset_button:not([disabled])').hide();
             return;
         }
 
@@ -34,7 +34,7 @@ const DropdownListWidget = function (opts) {
         const text = opts.render_text(item.name);
         elem.text(text);
         elem.removeClass('text-warning');
-        elem.closest('.input-group').find('.dropdown_list_reset_button').show();
+        elem.closest('.input-group').find('.dropdown_list_reset_button:not([disabled])').show();
     };
 
     const update = (value) => {
@@ -55,8 +55,9 @@ const DropdownListWidget = function (opts) {
             const value = $(this).attr('data-value');
             update(value);
         });
-        $(`#${opts.container_id} .dropdown_list_reset_button`).click(function () {
+        $(`#${opts.container_id} .dropdown_list_reset_button`).click(function (e) {
             update(opts.null_value);
+            e.preventDefault();
         });
     };
 
diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index 240835c091..ea05085599 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -1676,6 +1676,19 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
 .dropdown-list-widget {
     button {
         margin: 0px 5px;
+
+        &.dropdown_list_reset_button {
+            // Prevent night mode from overriding background.
+            background: unset !important;
+            border: none;
+
+            &:disabled {
+                display: none;
+            }
+        }
+        &:disabled i {
+            display: none;
+        }
     }
 
     .dropdown-search > input[type=text] {
diff --git a/static/templates/settings/dropdown_list_widget.hbs b/static/templates/settings/dropdown_list_widget.hbs
index 7aa45fa02b..7acdd1fef7 100644
--- a/static/templates/settings/dropdown_list_widget.hbs
+++ b/static/templates/settings/dropdown_list_widget.hbs
@@ -15,7 +15,7 @@
             </ul>
         </span>
     </label>
-    {{#if is_admin }}
-    <a class="dropdown_list_reset_button">{{reset_button_text}}</a>
-    {{/if}}
+    <button class="button small dropdown_list_reset_button">
+        <a>{{reset_button_text}}</a>
+    </button>
 </div>