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; }