paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-13 10:26:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

alert word: Convert inline form to modal.

Browse Source
This commit is contained in:
Ganesh Pawar
2022-07-21 09:54:16 +05:30
committed by Tim Abbott
parent d48075de58
commit e758ec400b
7 changed files with 83 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend_tests/node_tests/alert_words_ui.js
View File

@@ -20,7 +20,6 @@ const noop = () => {};
run_test("rerender_alert_words_ui", ({mock_template}) => { run_test("rerender_alert_words_ui", ({mock_template}) => {
let list_widget_create_called = false; let list_widget_create_called = false;
alert_words_ui.reset(); alert_words_ui.reset();
assert.ok(!$("#create_alert_word_name").is_focused());
const ListWidget = mock_esm("../../static/js/list_widget", { const ListWidget = mock_esm("../../static/js/list_widget", {
modifier: noop, modifier: noop,
create: (container, words, opts) => { create: (container, words, opts) => {
@@ -42,91 +41,6 @@ run_test("rerender_alert_words_ui", ({mock_template}) => {
alert_words_ui.set_up_alert_words(); alert_words_ui.set_up_alert_words();
assert.equal(alert_words_ui.loaded, true); assert.equal(alert_words_ui.loaded, true);
assert.equal(list_widget_create_called, true); assert.equal(list_widget_create_called, true);
assert.ok($("#create_alert_word_name").is_focused());
});
run_test("add_alert_word", ({override_rewire}) => {
override_rewire(alert_words_ui, "rerender_alert_words_ui", () => {}); // we've already tested this above
alert_words_ui.set_up_alert_words();
const $create_form = $("#create_alert_word_form");
const add_func = $create_form.get_on_handler("click", "#create_alert_word_button");
const $new_alert_word = $("#create_alert_word_name");
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);
// add '' as alert word
add_func();
assert.equal($new_alert_word.val(), "");
assert.ok($alert_word_status.hasClass("alert-danger"));
assert.equal($alert_word_status_text.text(), "translated: Alert word can't be empty!");
assert.ok($alert_word_status.visible());
// add 'foo' as alert word (existing word)
$new_alert_word.val("foo");
add_func();
assert.ok($alert_word_status.hasClass("alert-danger"));
assert.equal($alert_word_status_text.text(), "translated: Alert word already exists!");
assert.ok($alert_word_status.visible());
// add 'zot' as alert word (new word)
$new_alert_word.val("zot");
let success_func;
let fail_func;
channel.post = (opts) => {
assert.equal(opts.url, "/json/users/me/alert_words");
assert.deepEqual(opts.data, {alert_words: '["zot"]'});
success_func = opts.success;
fail_func = opts.error;
};
add_func();
// test failure
fail_func();
assert.ok($alert_word_status.hasClass("alert-danger"));
assert.equal($alert_word_status_text.text(), "translated: Error adding alert word!");
assert.ok($alert_word_status.visible());
// test success
success_func();
assert.ok($alert_word_status.hasClass("alert-success"));
assert.equal(
$alert_word_status_text.text(),
'translated: Alert word "zot" added successfully!',
);
assert.ok($alert_word_status.visible());
});
run_test("add_alert_word_keypress", ({override_rewire}) => {
override_rewire(alert_words_ui, "rerender_alert_words_ui", () => {});
alert_words_ui.set_up_alert_words();
const $create_form = $("#create_alert_word_form");
const keypress_func = $create_form.get_on_handler("keypress", "#create_alert_word_name");
const $new_alert_word = $("#create_alert_word_name");
$new_alert_word.val("zot");
const event = {
preventDefault: () => {},
key: "Enter",
target: "#create_alert_word_name",
};
let called = false;
channel.post = (opts) => {
assert.deepEqual(opts.data, {alert_words: '["zot"]'});
called = true;
};
keypress_func(event);
assert.ok(called);
}); });
run_test("remove_alert_word", ({override_rewire}) => { run_test("remove_alert_word", ({override_rewire}) => {

34
frontend_tests/puppeteer_tests/settings.ts
View File

@@ -241,8 +241,13 @@ async function test_your_bots_section(page: Page): Promise<void> {
const alert_word_status_selector = "#alert_word_status"; const alert_word_status_selector = "#alert_word_status";
async function add_alert_word(page: Page, word: string): Promise<void> { async function add_alert_word(page: Page, word: string): Promise<void> {
await page.type("#create_alert_word_name", word); await page.click("#open-add-alert-word-modal");
await page.click("#create_alert_word_button"); await common.wait_for_micromodal_to_open(page);
await page.type("#add-alert-word-name", word);
await page.click("#add-alert-word .dialog_submit_button");
await common.wait_for_micromodal_to_close(page);
} }
async function check_alert_word_added(page: Page, word: string): Promise<void> { async function check_alert_word_added(page: Page, word: string): Promise<void> {
@@ -262,23 +267,23 @@ async function close_alert_words_status(page: Page): Promise<void> {
await page.waitForSelector(alert_word_status_selector, {hidden: true}); await page.waitForSelector(alert_word_status_selector, {hidden: true});
} }
async function test_and_close_alert_word_added_successfully_status(
page: Page,
word: string,
): Promise<void> {
const status_text = await get_alert_words_status_text(page);
assert.strictEqual(status_text, `Alert word "${word}" added successfully!`);
await close_alert_words_status(page);
}
async function test_duplicate_alert_words_cannot_be_added( async function test_duplicate_alert_words_cannot_be_added(
page: Page, page: Page,
duplicate_word: string, duplicate_word: string,
): Promise<void> { ): Promise<void> {
await add_alert_word(page, duplicate_word); await page.click("#open-add-alert-word-modal");
const status_text = await get_alert_words_status_text(page); await common.wait_for_micromodal_to_open(page);
await page.type("#add-alert-word-name", duplicate_word);
await page.click("#add-alert-word .dialog_submit_button");
const alert_word_status_selector = "#dialog_error";
await page.waitForSelector(alert_word_status_selector, {visible: true});
const status_text = await common.get_text_from_selector(page, alert_word_status_selector);
assert.strictEqual(status_text, "Alert word already exists!"); assert.strictEqual(status_text, "Alert word already exists!");
await close_alert_words_status(page);
await page.click("#add-alert-word .dialog_cancel_button");
await common.wait_for_micromodal_to_close(page);
} }
async function delete_alert_word(page: Page, word: string): Promise<void> { async function delete_alert_word(page: Page, word: string): Promise<void> {
@@ -298,7 +303,6 @@ async function test_alert_words_section(page: Page): Promise<void> {
await page.click('[data-section="alert-words"]'); await page.click('[data-section="alert-words"]');
const word = "puppeteer"; const word = "puppeteer";
await add_alert_word(page, word); await add_alert_word(page, word);
await test_and_close_alert_word_added_successfully_status(page, word);
await check_alert_word_added(page, word); await check_alert_word_added(page, word);
await test_duplicate_alert_words_cannot_be_added(page, word); await test_duplicate_alert_words_cannot_be_added(page, word);
await test_alert_word_deletion(page, word); await test_alert_word_deletion(page, word);

88
static/js/alert_words_ui.js
View File

@@ -1,11 +1,14 @@
import $ from "jquery"; import $ from "jquery";
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"; import * as alert_words from "./alert_words";
import * as channel from "./channel"; import * as channel from "./channel";
import {$t} from "./i18n"; import * as dialog_widget from "./dialog_widget";
import {$t, $t_html} from "./i18n";
import * as ListWidget from "./list_widget"; import * as ListWidget from "./list_widget";
import * as ui_report from "./ui_report";
export let loaded = false; export let loaded = false;
@@ -26,9 +29,6 @@ export function rerender_alert_words_ui() {
$parent_container: $("#alert-word-settings"), $parent_container: $("#alert-word-settings"),
$simplebar_container: $("#alert-word-settings .progressive-table-wrapper"), $simplebar_container: $("#alert-word-settings .progressive-table-wrapper"),
}); });
// Focus new alert word name text box.
$("#create_alert_word_name").trigger("focus");
} }
function update_alert_word_status(status_text, is_error) { function update_alert_word_status(status_text, is_error) {
@@ -42,33 +42,25 @@ function update_alert_word_status(status_text, is_error) {
$alert_word_status.show(); $alert_word_status.show();
} }
function add_alert_word(alert_word) { function add_alert_word(e) {
alert_word = alert_word.trim(); e.preventDefault();
if (alert_word === "") { e.stopPropagation();
update_alert_word_status($t({defaultMessage: "Alert word can't be empty!"}), true);
return; const alert_word = $("#add-alert-word-name").val().trim();
} else if (alert_words.has_alert_word(alert_word)) {
update_alert_word_status($t({defaultMessage: "Alert word already exists!"}), true); if (alert_words.has_alert_word(alert_word)) {
ui_report.client_error(
$t({defaultMessage: "Alert word already exists!"}),
$("#dialog_error"),
);
dialog_widget.hide_dialog_spinner();
return; return;
} }
const words_to_be_added = [alert_word]; const words_to_be_added = [alert_word];
channel.post({ const data = {alert_words: JSON.stringify(words_to_be_added)};
url: "/json/users/me/alert_words", dialog_widget.submit_api_request(channel.post, "/json/users/me/alert_words", data);
data: {alert_words: JSON.stringify(words_to_be_added)},
success() {
const message = $t(
{defaultMessage: 'Alert word "{word}" added successfully!'},
{word: words_to_be_added[0]},
);
update_alert_word_status(message, false);
$("#create_alert_word_name").val("");
},
error() {
update_alert_word_status($t({defaultMessage: "Error adding alert word!"}), true);
},
});
} }
function remove_alert_word(alert_word) { function remove_alert_word(alert_word) {
@@ -88,14 +80,43 @@ function remove_alert_word(alert_word) {
}); });
} }
export function show_add_alert_word_modal() {
const html_body = render_add_alert_word();
function add_alert_word_post_render() {
const $add_user_group_input_element = $("#add-alert-word-name");
const $add_user_group_submit_button = $("#add-alert-word .dialog_submit_button");
$add_user_group_submit_button.prop("disabled", true);
$add_user_group_input_element.on("input", () => {
$add_user_group_submit_button.prop(
"disabled",
$add_user_group_input_element.val().trim() === "",
);
});
}
dialog_widget.launch({
html_heading: $t_html({defaultMessage: "Add a new alert word"}),
html_body,
html_submit_button: $t_html({defaultMessage: "Add"}),
help_link: "/help/pm-mention-alert-notifications#alert-words",
form_id: "add-alert-word-form",
id: "add-alert-word",
loading_spinner: true,
on_click: add_alert_word,
on_shown: () => $("#add-alert-word-name").trigger("focus"),
post_render: add_alert_word_post_render,
});
}
export function set_up_alert_words() { export function set_up_alert_words() {
// The settings page must be rendered before this function gets called. // The settings page must be rendered before this function gets called.
loaded = true; loaded = true;
rerender_alert_words_ui(); rerender_alert_words_ui();
$("#create_alert_word_form").on("click", "#create_alert_word_button", () => { $("#open-add-alert-word-modal").on("click", () => {
const word = $("#create_alert_word_name").val(); show_add_alert_word_modal();
add_alert_word(word);
}); });
$("#alert-words-table").on("click", ".remove-alert-word", (event) => { $("#alert-words-table").on("click", ".remove-alert-word", (event) => {
@@ -103,15 +124,6 @@ export function set_up_alert_words() {
remove_alert_word(word); remove_alert_word(word);
}); });
$("#create_alert_word_form").on("keypress", "#create_alert_word_name", (event) => {
// Handle Enter as "add".
if (event.key === "Enter") {
event.preventDefault();
const word = $(event.target).val();
add_alert_word(word);
}
});
$("#alert-word-settings").on("click", ".close-alert-word-status", (event) => { $("#alert-word-settings").on("click", ".close-alert-word-status", (event) => {
event.preventDefault(); event.preventDefault();
const $alert = $(event.currentTarget).parents(".alert"); const $alert = $(event.currentTarget).parents(".alert");

8
static/styles/settings.css
View File

@@ -600,13 +600,11 @@ input[type="checkbox"] {
} }
.add-new-emoji-box, .add-new-emoji-box,
.add-new-alert-word-box,
.add-new-export-box { .add-new-export-box {
margin-bottom: 20px; margin-bottom: 20px;
} }
.add-new-emoji-box .new-emoji-form, .add-new-emoji-box .new-emoji-form,
.add-new-alert-word-box .new-alert-word-form,
.add-new-export-box { .add-new-export-box {
margin: 10px 0; margin: 10px 0;
} }
@@ -833,6 +831,12 @@ input[type="checkbox"] {
} }
} }
#add-alert-word {
form {
margin-bottom: 4px;
}
}
.admin-linkifier-form, .admin-linkifier-form,
.admin-playground-form { .admin-playground-form {
label { label {

4
static/templates/settings/add_alert_word.hbs Normal file
View File

@@ -0,0 +1,4 @@
<form id="add-alert-word-form" class="form-horizontal">
<label for="add-alert-word-name">{{t "Alert word" }}</label>
<input type="text" name="alert-word-name" id="add-alert-word-name" class="required" maxlength=100 placeholder="{{t 'Alert word' }}" value="" />
</form>

16
static/templates/settings/alert_word_settings.hbs
View File

@@ -10,23 +10,9 @@
</button> </button>
<span class="alert_word_status_text"></span> <span class="alert_word_status_text"></span>
</div> </div>
<form id="create_alert_word_form" class="form-horizontal"> <button class="button rounded sea-green" id="open-add-alert-word-modal" type="button">
<div class="add-new-alert-word-box grey-box">
<div class="new-alert-word-form">
<h4 class="new-alert-word-section-title settings-section-title no-padding">{{t "Add a new alert word"}}</h4>
<div class="new-alert-word-form">
<div class="input-group">
<label for="create_alert_word_name">{{t "New alert word" }}</label>
<input type="text" name="alert_word_name" id="create_alert_word_name" class="required"
maxlength=100 placeholder="{{t 'Alert word' }}" value="" />
</div>
<button class="button rounded sea-green add-alert-word" id="create_alert_word_button" type="button">
{{t 'Add alert word'}} {{t 'Add alert word'}}
</button> </button>
</div>
</div>
</div>
</form>
<div class="settings_panel_list_header"> <div class="settings_panel_list_header">
<h3>{{t "Alert words"}}</h3> <h3>{{t "Alert words"}}</h3>

1
tools/test-js-with-node
View File

@@ -50,6 +50,7 @@ EXEMPT_FILES = make_set(
"static/js/add_subscribers_pill.js", "static/js/add_subscribers_pill.js",
"static/js/admin.js", "static/js/admin.js",
"static/js/alert_popup.ts", "static/js/alert_popup.ts",
"static/js/alert_words_ui.js",
"static/js/archive.js", "static/js/archive.js",
"static/js/attachments_ui.js", "static/js/attachments_ui.js",
"static/js/avatar.js", "static/js/avatar.js",