From 52e0063debadf18f080e6d8853cb727afbae4a31 Mon Sep 17 00:00:00 2001
From: Abhishek-Balaji <abhishekb10@gmail.com>
Date: Thu, 16 Apr 2020 03:15:34 +0530
Subject: [PATCH] alert settings: Move alert word form on top and sort alert
 words.

The form for entering alert words has been moved above the list
of words.
The list of words will be presented alphabetically rather than
time of addition.
---
 frontend_tests/node_tests/alert_words_ui.js |  4 ++--
 static/js/alert_words_ui.js                 | 13 +++++++------
 static/styles/settings.scss                 |  2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend_tests/node_tests/alert_words_ui.js b/frontend_tests/node_tests/alert_words_ui.js
index ce7017b9cd..2d99fb31d6 100644
--- a/frontend_tests/node_tests/alert_words_ui.js
+++ b/frontend_tests/node_tests/alert_words_ui.js
@@ -30,9 +30,9 @@ run_test('render_alert_words_ui', () => {
     alert_words_ui.render_alert_words_ui();
 
     assert.deepEqual(appended, [
-        'stub-foo',
-        'stub-bar',
         'stub-',
+        'stub-bar',
+        'stub-foo',
     ]);
     assert(new_alert_word.is_focused());
 });
diff --git a/static/js/alert_words_ui.js b/static/js/alert_words_ui.js
index 105defd785..afbd61b8fc 100644
--- a/static/js/alert_words_ui.js
+++ b/static/js/alert_words_ui.js
@@ -2,10 +2,17 @@ const render_alert_word_settings_item = require('../templates/alert_word_setting
 
 exports.render_alert_words_ui = function () {
     const words = alert_words.get_word_list();
+    words.sort();
     const word_list = $('#alert_words_list');
 
     word_list.find('.alert-word-item').remove();
 
+    const new_alert_word_form = render_alert_word_settings_item({
+        word: '',
+        editing: true,
+    });
+    word_list.append(new_alert_word_form);
+
     for (const alert_word of words) {
         const rendered_alert_word = render_alert_word_settings_item({
             word: alert_word,
@@ -14,12 +21,6 @@ exports.render_alert_words_ui = function () {
         word_list.append(rendered_alert_word);
     }
 
-    const new_alert_word_form = render_alert_word_settings_item({
-        word: '',
-        editing: true,
-    });
-    word_list.append(new_alert_word_form);
-
     // Focus new alert word name text box.
     $('#create_alert_word_name').focus();
 };
diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index 1bd40d69d0..e7ccf23b60 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -1046,7 +1046,7 @@ input[type=checkbox].inline-block {
     list-style-type: none;
 }
 
-#alert_words_list li.alert-word-item:last-child {
+#alert_words_list li.alert-word-item:first-child {
     background: none;
     margin-top: 8px;
 }