From 23f2d44c6d8a0c81ac3aea63244a40227640dcf3 Mon Sep 17 00:00:00 2001
From: Ujjawal Modi <umodi2003@gmail.com>
Date: Mon, 21 Nov 2022 02:42:05 +0530
Subject: [PATCH] settings: Improve success feedback for deleting alert words

We add the alert word that was removed to the banner text, and also
reorder a bit for clearer UI.

Fixes #22813
---
 frontend_tests/node_tests/alert_words_ui.js       |  5 ++++-
 frontend_tests/puppeteer_tests/settings.ts        |  2 +-
 static/js/alert_words_ui.js                       |  5 ++++-
 static/templates/settings/alert_word_settings.hbs | 12 ++++++------
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend_tests/node_tests/alert_words_ui.js b/frontend_tests/node_tests/alert_words_ui.js
index ee35311acb..a1a797133e 100644
--- a/frontend_tests/node_tests/alert_words_ui.js
+++ b/frontend_tests/node_tests/alert_words_ui.js
@@ -86,7 +86,10 @@ run_test("remove_alert_word", ({override_rewire}) => {
     // test success
     success_func();
     assert.ok($alert_word_status.hasClass("alert-success"));
-    assert.equal($alert_word_status_text.text(), "translated: Alert word removed successfully!");
+    assert.equal(
+        $alert_word_status_text.text(),
+        `translated: Alert word "translated: zot" removed successfully!`,
+    );
     assert.ok($alert_word_status.visible());
 });
 
diff --git a/frontend_tests/puppeteer_tests/settings.ts b/frontend_tests/puppeteer_tests/settings.ts
index 5ca4307f13..77258f3398 100644
--- a/frontend_tests/puppeteer_tests/settings.ts
+++ b/frontend_tests/puppeteer_tests/settings.ts
@@ -322,7 +322,7 @@ async function delete_alert_word(page: Page, word: string): Promise<void> {
 async function test_alert_word_deletion(page: Page, word: string): Promise<void> {
     await delete_alert_word(page, word);
     const status_text = await get_alert_words_status_text(page);
-    assert.strictEqual(status_text, "Alert word removed successfully!");
+    assert.strictEqual(status_text, `Alert word "${word}" removed successfully!`);
     await close_alert_words_status(page);
 }
 
diff --git a/static/js/alert_words_ui.js b/static/js/alert_words_ui.js
index e88a063809..3f237ea802 100644
--- a/static/js/alert_words_ui.js
+++ b/static/js/alert_words_ui.js
@@ -70,7 +70,10 @@ function remove_alert_word(alert_word) {
         data: {alert_words: JSON.stringify(words_to_be_removed)},
         success() {
             update_alert_word_status(
-                $t({defaultMessage: "Alert word removed successfully!"}),
+                $t(
+                    {defaultMessage: `Alert word "{alert_word}" removed successfully!`},
+                    {alert_word},
+                ),
                 false,
             );
         },
diff --git a/static/templates/settings/alert_word_settings.hbs b/static/templates/settings/alert_word_settings.hbs
index 706dfbe020..4a7f428889 100644
--- a/static/templates/settings/alert_word_settings.hbs
+++ b/static/templates/settings/alert_word_settings.hbs
@@ -4,12 +4,6 @@
             {{t "Alert words allow you to be notified as if you were @-mentioned when certain words or phrases are used in Zulip. Alert words are not case sensitive."}}
         </p>
     </form>
-    <div class="alert" id="alert_word_status" role="alert">
-        <button type="button" class="close close-alert-word-status" aria-label="{{t 'Close' }}">
-            <span aria-hidden="true">&times;</span>
-        </button>
-        <span class="alert_word_status_text"></span>
-    </div>
     <button class="button rounded sea-green" id="open-add-alert-word-modal" type="button">
         {{t 'Add alert word'}}
     </button>
@@ -17,6 +11,12 @@
     <div class="settings_panel_list_header">
         <h3>{{t "Alert words"}}</h3>
     </div>
+    <div class="alert" id="alert_word_status" role="alert">
+        <button type="button" class="close close-alert-word-status" aria-label="{{t 'Close' }}">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        <span class="alert_word_status_text"></span>
+    </div>
     <div class="progressive-table-wrapper" data-simplebar>
         <table class="table table-condensed table-striped wrapped-table">
             <thead class="table-sticky-headers">