From 3974ddf5483817e25d18f72d0fecad77160c0be0 Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Wed, 16 Apr 2025 22:06:09 +0530 Subject: [PATCH] alert_words: Use banner to indicate alert words removal status. This commit converts the alert words removal status alert to a banner component. --- web/e2e-tests/settings.test.ts | 13 ++++-- web/src/alert_words_ui.ts | 42 ++++++++--------- web/styles/settings.css | 4 +- .../settings/alert_word_settings.hbs | 7 +-- web/tests/alert_words_ui.test.cjs | 46 ++++++------------- 5 files changed, 46 insertions(+), 66 deletions(-) diff --git a/web/e2e-tests/settings.test.ts b/web/e2e-tests/settings.test.ts index 1c33e402e1..58fc2733f7 100644 --- a/web/e2e-tests/settings.test.ts +++ b/web/e2e-tests/settings.test.ts @@ -280,7 +280,7 @@ async function test_your_bots_section(page: Page): Promise { await test_invalid_edit_bot_form(page); } -const alert_word_status_selector = "#alert_word_status"; +const alert_word_status_banner_selector = ".alert-word-status-banner"; async function add_alert_word(page: Page, word: string): Promise { await page.click("#open-add-alert-word-modal"); @@ -298,15 +298,18 @@ async function check_alert_word_added(page: Page, word: string): Promise { } async function get_alert_words_status_text(page: Page): Promise { - await page.waitForSelector(alert_word_status_selector, {visible: true}); - const status_text = await common.get_text_from_selector(page, ".alert_word_status_text"); + await page.waitForSelector(alert_word_status_banner_selector, {visible: true}); + const status_text = await common.get_text_from_selector( + page, + ".alert-word-status-banner .banner-label", + ); return status_text; } async function close_alert_words_status(page: Page): Promise { - const status_close_button = ".close-alert-word-status"; + const status_close_button = ".alert-word-status-banner .banner-close-button"; await page.click(status_close_button); - await page.waitForSelector(alert_word_status_selector, {hidden: true}); + assert.ok((await page.$(alert_word_status_banner_selector)) === null); } async function test_duplicate_alert_words_cannot_be_added( diff --git a/web/src/alert_words_ui.ts b/web/src/alert_words_ui.ts index 39b15da6b4..2a7e50dcf7 100644 --- a/web/src/alert_words_ui.ts +++ b/web/src/alert_words_ui.ts @@ -4,6 +4,8 @@ import render_add_alert_word from "../templates/settings/add_alert_word.hbs"; import render_alert_word_settings_item from "../templates/settings/alert_word_settings_item.hbs"; import * as alert_words from "./alert_words.ts"; +import * as banners from "./banners.ts"; +import type {Banner} from "./banners.ts"; import * as channel from "./channel.ts"; import * as dialog_widget from "./dialog_widget.ts"; import {$t, $t_html} from "./i18n.ts"; @@ -39,16 +41,26 @@ export function rewire_rerender_alert_words_ui(value: typeof rerender_alert_word rerender_alert_words_ui = value; } -function update_alert_word_status(status_text: string, is_error: boolean): void { - const $alert_word_status = $("#alert_word_status"); +const open_alert_word_status_banner = (alert_word: string, is_error: boolean): void => { + const alert_word_status_banner: Banner = { + intent: "danger", + label: "", + buttons: [], + close_button: true, + custom_classes: "alert-word-status-banner", + }; if (is_error) { - $alert_word_status.removeClass("alert-success").addClass("alert-danger"); + alert_word_status_banner.label = $t({defaultMessage: "Error removing alert word!"}); + alert_word_status_banner.intent = "danger"; } else { - $alert_word_status.removeClass("alert-danger").addClass("alert-success"); + alert_word_status_banner.label = $t( + {defaultMessage: `Alert word "{alert_word}" removed successfully!`}, + {alert_word}, + ); + alert_word_status_banner.intent = "success"; } - $alert_word_status.find(".alert_word_status_text").text(status_text); - $alert_word_status.show(); -} + banners.open(alert_word_status_banner, $("#alert_word_status")); +}; function add_alert_word(): void { const alert_word = $("input#add-alert-word-name").val()!.trim(); @@ -74,16 +86,10 @@ function remove_alert_word(alert_word: string): void { url: "/json/users/me/alert_words", data: {alert_words: JSON.stringify(words_to_be_removed)}, success() { - update_alert_word_status( - $t( - {defaultMessage: `Alert word "{alert_word}" removed successfully!`}, - {alert_word}, - ), - false, - ); + open_alert_word_status_banner(alert_word, false); }, error() { - update_alert_word_status($t({defaultMessage: "Error removing alert word!"}), true); + open_alert_word_status_banner(alert_word, true); }, }); } @@ -131,12 +137,6 @@ export function set_up_alert_words(): void { const word = $(event.currentTarget).parents("tr").find(".value").text().trim(); remove_alert_word(word); }); - - $("#alert-word-settings").on("click", ".close-alert-word-status", (event) => { - event.preventDefault(); - const $alert = $(event.currentTarget).parents(".alert"); - $alert.hide(); - }); } export function reset(): void { diff --git a/web/styles/settings.css b/web/styles/settings.css index 8b3810bc0b..edcfd6938e 100644 --- a/web/styles/settings.css +++ b/web/styles/settings.css @@ -554,8 +554,8 @@ input[type="checkbox"] { margin-top: 1px; } -.alert_word_status_text { - overflow-wrap: anywhere; +.alert-word-status-banner { + margin-bottom: 20px; } .alert-notification { diff --git a/web/templates/settings/alert_word_settings.hbs b/web/templates/settings/alert_word_settings.hbs index 0a4d94deea..3e2e24c5db 100644 --- a/web/templates/settings/alert_word_settings.hbs +++ b/web/templates/settings/alert_word_settings.hbs @@ -14,12 +14,7 @@

{{t "Alert words"}}

- +
diff --git a/web/tests/alert_words_ui.test.cjs b/web/tests/alert_words_ui.test.cjs index 870b763021..eb3184a3c2 100644 --- a/web/tests/alert_words_ui.test.cjs +++ b/web/tests/alert_words_ui.test.cjs @@ -11,6 +11,7 @@ const channel = mock_esm("../src/channel"); const alert_words = zrequire("alert_words"); const alert_words_ui = zrequire("alert_words_ui"); +const banners = mock_esm("../src/banners"); alert_words.initialize({ alert_words: ["foo", "bar"], @@ -78,45 +79,26 @@ run_test("remove_alert_word", ({override_rewire}) => { remove_func(event); - const $alert_word_status = $("#alert_word_status"); - const $alert_word_status_text = $(".alert_word_status_text"); - $alert_word_status.set_find_results(".alert_word_status_text", $alert_word_status_text); + const $alert_word_status_banner = $(".alert-word-status-banner"); + const $alert_word_status_banner_label = $(".alert-word-status-banner .banner-label"); + banners.open = (banner, _container) => { + $alert_word_status_banner.addClass(`banner-${banner.intent}`); + $alert_word_status_banner_label.text(banner.label); + }; // test failure fail_func(); - assert.ok($alert_word_status.hasClass("alert-danger")); - assert.equal($alert_word_status_text.text(), "translated: Error removing alert word!"); - assert.ok($alert_word_status.visible()); + assert.ok($alert_word_status_banner.hasClass("banner-danger")); + assert.equal( + $alert_word_status_banner_label.text(), + "translated: Error removing alert word!", + ); // test success success_func(); - assert.ok($alert_word_status.hasClass("alert-success")); + assert.ok($alert_word_status_banner.hasClass("banner-success")); assert.equal( - $alert_word_status_text.text(), + $alert_word_status_banner_label.text(), `translated: Alert word "translated: zot" removed successfully!`, ); - assert.ok($alert_word_status.visible()); -}); - -run_test("close_status_message", ({override_rewire}) => { - override_rewire(alert_words_ui, "rerender_alert_words_ui", noop); - alert_words_ui.set_up_alert_words(); - - const $alert_word_settings = $("#alert-word-settings"); - const close = $alert_word_settings.get_on_handler("click", ".close-alert-word-status"); - - const $alert = $(".alert"); - const $close_button = $(".close-alert-word-status"); - $close_button.set_parents_result(".alert", $alert); - - $alert.show(); - - const event = { - preventDefault() {}, - currentTarget: ".close-alert-word-status", - }; - - assert.ok($alert.visible()); - close(event); - assert.ok(!$alert.visible()); });