settings: Use HTML table for "Alert Words" for better icon alignment.

"Alert Words" is one of Zulip's oldest settings UI elements, and as a
result is buggy.  This commit converts it to use our standard
progressive-table-wrapper system used for settings tables, which has
the side effect of fixing a bug that mad ethe tables look pretty bad
if one adds a very long word.

Fixes #17172.

frontend_tests/node_tests/alert_words_ui.js

@@ -136,11 +136,11 @@ run_test("remove_alert_word", (override) => {
     const remove_func = word_list.get_on_handler("click", ".remove-alert-word");
 
     const remove_alert_word = $(".remove-alert-word");
-    const list_item = $("li.alert-word-item");
+    const list_item = $("tr.alert-word-item");
     const val_item = $("span.value");
     val_item.text(i18n.t("zot"));
 
-    remove_alert_word.set_parents_result("li", list_item);
+    remove_alert_word.set_parents_result("tr", list_item);
     list_item.set_find_results(".value", val_item);
 
     const event = {

static/js/alert_words_ui.js

@@ -62,7 +62,6 @@ function add_alert_word(alert_word) {
 
 function remove_alert_word(alert_word) {
     const words_to_be_removed = [alert_word];
-
     channel.del({
         url: "/json/users/me/alert_words",
         data: {alert_words: JSON.stringify(words_to_be_removed)},
@@ -86,7 +85,7 @@ export function set_up_alert_words() {
     });
 
     $("#alert_words_list").on("click", ".remove-alert-word", (event) => {
-        const word = $(event.currentTarget).parents("li").find(".value").text();
+        const word = $(event.currentTarget).parents("tr").find(".value").text().trim();
         remove_alert_word(word);
     });
 
@@ -95,7 +94,6 @@ export function set_up_alert_words() {
         // Handle Enter (13) as "add".
         if (key === 13) {
             event.preventDefault();
-
             const word = $(event.target).val();
             add_alert_word(word);
         }

static/styles/settings.css

@@ -486,13 +486,6 @@ input[type="checkbox"] {
     border-left: 0;
 }
 
-.alert-word-information-box {
-    position: relative;
-    padding: 7px;
-    margin: 2px;
-    width: 50%;
-}
-
 .green-bg {
     background-color: hsl(120, 29%, 84%);
 }
@@ -910,7 +903,6 @@ input[type="checkbox"] {
 
     li {
         list-style-type: none;
-
         &.alert-word-item:first-child {
             background: none;
             margin-top: 8px;
@@ -918,7 +910,6 @@ input[type="checkbox"] {
     }
 
     .alert_word_listing .value {
-        display: block;
         word-wrap: break-word;
         word-break: break-all;
         white-space: normal;

static/templates/settings/alert_word_settings.hbs

@@ -27,5 +27,14 @@
             </div>
         </div>
     </form>
-    <ul id="alert_words_list"></ul>
+    <div class="progressive-table-wrapper" data-simplebar>
+        <table class="table table-condensed table-striped wrapped-table">
+            <thead>
+                <th class="active">{{t "Word" }}</th>
+                <th>{{t "Delete" }}</th>
+            </thead>
+            <tbody id="alert_words_list" class="alert_words_list required-text thick"
+              data-empty="{{t 'There are no current alert words.' }}"></tbody>
+        </table>
+    </div>
 </div>

static/templates/settings/alert_word_settings_item.hbs

@@ -1,13 +1,14 @@
 {{! Alert word in the settings page that can be removed }}
-<li class="alert-word-item" data-word='{{word}}'>
+
-    <div class="alert-word-information-box grey-box">
+<tr class="alert-word-item" data-word='{{word}}'>
+    <td>
         <div class="alert_word_listing">
             <span class="value">{{word}}</span>
         </div>
-        <div class="edit-alert-word-buttons">
+    </td>
-            <button type="submit" class="button small btn-danger remove-alert-word" title="{{t 'Delete alert word' }}" data-word="{{word}}">
+    <td>
-                <i class="fa fa-trash-o" aria-hidden="true"></i>
+        <button type="submit" class="button rounded small delete btn-danger remove-alert-word" title="{{t 'Delete alert word' }}" data-word="{{word}}">
-            </button>
+            <i class="fa fa-trash-o" aria-hidden="true"></i>
-        </div>
+        </button>
-    </div>
+    </td>
-</li>
+</tr>