paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 16:14:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

alert_words: Use banner to indicate alert words removal status.

Browse Source 
This commit converts the alert words removal status alert to a banner
component.
This commit is contained in:
Sayam Samal
2025-04-16 22:06:09 +05:30
committed by Tim Abbott
parent 4dff40a5d1
commit 3974ddf548
5 changed files with 46 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/e2e-tests/settings.test.ts
View File

@@ -280,7 +280,7 @@ async function test_your_bots_section(page: Page): Promise<void> {
await test_invalid_edit_bot_form(page); 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<void> { async function add_alert_word(page: Page, word: string): Promise<void> {
await page.click("#open-add-alert-word-modal"); await page.click("#open-add-alert-word-modal");
@@ -298,15 +298,18 @@ async function check_alert_word_added(page: Page, word: string): Promise<void> {
} }
async function get_alert_words_status_text(page: Page): Promise<string> { async function get_alert_words_status_text(page: Page): Promise<string> {
await page.waitForSelector(alert_word_status_selector, {visible: true}); await page.waitForSelector(alert_word_status_banner_selector, {visible: true});
const status_text = await common.get_text_from_selector(page, ".alert_word_status_text"); const status_text = await common.get_text_from_selector(
page,
".alert-word-status-banner .banner-label",
);
return status_text; return status_text;
} }
async function close_alert_words_status(page: Page): Promise<void> { async function close_alert_words_status(page: Page): Promise<void> {
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.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( async function test_duplicate_alert_words_cannot_be_added(

42
web/src/alert_words_ui.ts
View File

@@ -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 render_alert_word_settings_item from "../templates/settings/alert_word_settings_item.hbs";
import * as alert_words from "./alert_words.ts"; 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 channel from "./channel.ts";
import * as dialog_widget from "./dialog_widget.ts"; import * as dialog_widget from "./dialog_widget.ts";
import {$t, $t_html} from "./i18n.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; rerender_alert_words_ui = value;
} }
function update_alert_word_status(status_text: string, is_error: boolean): void { const open_alert_word_status_banner = (alert_word: string, is_error: boolean): void => {
const $alert_word_status = $("#alert_word_status"); const alert_word_status_banner: Banner = {
intent: "danger",
label: "",
buttons: [],
close_button: true,
custom_classes: "alert-word-status-banner",
};
if (is_error) { 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 { } 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); banners.open(alert_word_status_banner, $("#alert_word_status"));
$alert_word_status.show(); };
}
function add_alert_word(): void { function add_alert_word(): void {
const alert_word = $<HTMLInputElement>("input#add-alert-word-name").val()!.trim(); const alert_word = $<HTMLInputElement>("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", url: "/json/users/me/alert_words",
data: {alert_words: JSON.stringify(words_to_be_removed)}, data: {alert_words: JSON.stringify(words_to_be_removed)},
success() { success() {
update_alert_word_status( open_alert_word_status_banner(alert_word, false);
$t(
{defaultMessage: `Alert word "{alert_word}" removed successfully!`},
{alert_word},
),
false,
);
}, },
error() { 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(); const word = $(event.currentTarget).parents("tr").find(".value").text().trim();
remove_alert_word(word); 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 { export function reset(): void {

4
web/styles/settings.css
View File

@@ -554,8 +554,8 @@ input[type="checkbox"] {
margin-top: 1px; margin-top: 1px;
} }
.alert_word_status_text { .alert-word-status-banner {
overflow-wrap: anywhere; margin-bottom: 20px;
} }
.alert-notification { .alert-notification {

7
web/templates/settings/alert_word_settings.hbs
View File

@@ -14,12 +14,7 @@
<div class="settings_panel_list_header"> <div class="settings_panel_list_header">
<h3>{{t "Alert words"}}</h3> <h3>{{t "Alert words"}}</h3>
</div> </div>
<div class="alert" id="alert_word_status" role="alert"> <div class="banner-wrapper" id="alert_word_status"></div>
<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 data-simplebar-tab-index="-1"> <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
<table class="table table-striped wrapped-table"> <table class="table table-striped wrapped-table">
<thead class="table-sticky-headers"> <thead class="table-sticky-headers">

46
web/tests/alert_words_ui.test.cjs
View File

@@ -11,6 +11,7 @@ const channel = mock_esm("../src/channel");
const alert_words = zrequire("alert_words"); const alert_words = zrequire("alert_words");
const alert_words_ui = zrequire("alert_words_ui"); const alert_words_ui = zrequire("alert_words_ui");
const banners = mock_esm("../src/banners");
alert_words.initialize({ alert_words.initialize({
alert_words: ["foo", "bar"], alert_words: ["foo", "bar"],
@@ -78,45 +79,26 @@ run_test("remove_alert_word", ({override_rewire}) => {
remove_func(event); remove_func(event);
const $alert_word_status = $("#alert_word_status"); const $alert_word_status_banner = $(".alert-word-status-banner");
const $alert_word_status_text = $(".alert_word_status_text"); const $alert_word_status_banner_label = $(".alert-word-status-banner .banner-label");
$alert_word_status.set_find_results(".alert_word_status_text", $alert_word_status_text); banners.open = (banner, _container) => {
$alert_word_status_banner.addClass(`banner-${banner.intent}`);
$alert_word_status_banner_label.text(banner.label);
};
// test failure // test failure
fail_func(); fail_func();
assert.ok($alert_word_status.hasClass("alert-danger")); assert.ok($alert_word_status_banner.hasClass("banner-danger"));
assert.equal($alert_word_status_text.text(), "translated: Error removing alert word!"); assert.equal(
assert.ok($alert_word_status.visible()); $alert_word_status_banner_label.text(),
"translated: Error removing alert word!",
);
// test success // test success
success_func(); success_func();
assert.ok($alert_word_status.hasClass("alert-success")); assert.ok($alert_word_status_banner.hasClass("banner-success"));
assert.equal( assert.equal(
$alert_word_status_text.text(), $alert_word_status_banner_label.text(),
`translated: Alert word "translated: zot" removed successfully!`, `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());
}); });