paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 05:23:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose: Refactor functions for handling max length limits.

Browse Source 
Refactors `check_overflow_text` and `validate_message_length` functions.
This commit ensures that there won't be any change in the existing UI
of the compose box with the refactoring of the above functions.
This commit is contained in:
opmkumar
2024-12-04 07:46:52 +05:30
committed by Tim Abbott
parent 7c53e8c90b
commit 88727862b4
9 changed files with 74 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/compose.js
View File

@@ -132,7 +132,7 @@ export function clear_compose_box() {
}
$("textarea#compose-textarea").val("").trigger("focus");
compose_ui.compose_textarea_typeahead?.hide();
compose_validate.check_overflow_text();
compose_validate.check_overflow_text($("#send_message_form"));
compose_validate.clear_topic_resolved_warning();
drafts.set_compose_draft_id(undefined);
compose_ui.autosize_textarea($("textarea#compose-textarea"));

4
web/src/compose_actions.ts
View File

@@ -132,7 +132,7 @@ function clear_box(): void {
compose_state.set_recipient_edited_manually(false);
compose_state.set_is_content_unedited_restored_draft(false);
clear_textarea();
compose_validate.check_overflow_text();
compose_validate.check_overflow_text($("#send_message_form"));
drafts.set_compose_draft_id(undefined);
$("textarea#compose-textarea").toggleClass("invalid", false);
compose_ui.autosize_textarea($("textarea#compose-textarea"));
@@ -377,7 +377,7 @@ export let start = (raw_opts: ComposeActionsStartOpts): void => {
$(".compose_control_button_container:has(.add-poll)").addClass("disabled-on-hover");
// If we were provided with message content, we might need to
// display that it's too long.
compose_validate.check_overflow_text();
compose_validate.check_overflow_text($("#send_message_form"));
}
// This has to happen after we insert the content, so that the next "input" event
// is from user input.

2
web/src/compose_setup.js
View File

@@ -70,7 +70,7 @@ export function initialize() {
$("textarea#compose-textarea").on("input propertychange", () => {
compose_validate.warn_if_topic_resolved(false);
const compose_text_length = compose_validate.check_overflow_text();
const compose_text_length = compose_validate.check_overflow_text($("#send_message_form"));
if (compose_text_length !== 0 && $("textarea#compose-textarea").hasClass("invalid")) {
$("textarea#compose-textarea").toggleClass("invalid", false);
}

19
web/src/compose_validate.ts
View File

@@ -717,15 +717,16 @@ function validate_private_message(): boolean {
return true;
}
export function check_overflow_text(): number {
export function check_overflow_text($container: JQuery): number {
// This function is called when typing every character in the
// compose box, so it's important that it not doing anything
// expensive.
const $textarea = $("textarea#compose-textarea");
const text = compose_state.message_content();
const $textarea = $container.find<HTMLTextAreaElement>(".message-textarea");
// Match the behavior of compose_state.message_content of trimming trailing whitespace
const text = $textarea.val()!.trimEnd();
const max_length = realm.max_message_length;
const remaining_characters = max_length - text.length;
const $indicator = $("#compose-limit-indicator");
const $indicator = $container.find(".message-limit-indicator");
if (text.length > max_length) {
$indicator.addClass("over_limit");
@@ -755,9 +756,11 @@ export function check_overflow_text(): number {
return text.length;
}
export function validate_message_length(): boolean {
const $textarea = $("textarea#compose-textarea");
if (compose_state.message_content().length > realm.max_message_length) {
export function validate_message_length($container: JQuery): boolean {
const $textarea = $container.find<HTMLTextAreaElement>(".message-textarea");
// Match the behavior of compose_state.message_content of trimming trailing whitespace
const text = $textarea.val()!.trimEnd();
if (text.length > realm.max_message_length) {
$textarea.addClass("flash");
setTimeout(() => $textarea.removeClass("flash"), 1500);
return false;
@@ -783,7 +786,7 @@ export function validate(scheduling_message: boolean): boolean {
);
return false;
}
if (!validate_message_length()) {
if (!validate_message_length($("#send_message_form"))) {
return false;
}

2
web/src/composebox_typeahead.ts
View File

@@ -362,7 +362,7 @@ function handle_keydown(
if (should_enter_send(e)) {
e.preventDefault();
if (
compose_validate.validate_message_length() &&
compose_validate.validate_message_length($("#send_message_form")) &&
!$(".message-send-controls").hasClass("disabled-message-send-controls")
) {
on_enter_send();

2
web/templates/compose.hbs
View File

@@ -70,7 +70,7 @@
</div>
<div class="messagebox">
<div id="message-content-container" class="surround-formatting-buttons-row">
<textarea class="new_message_textarea" name="content" id='compose-textarea' placeholder="{{t 'Compose your message here' }}" tabindex="0" aria-label="{{t 'Compose your message here...' }}"></textarea>
<textarea class="new_message_textarea message-textarea" name="content" id='compose-textarea' placeholder="{{t 'Compose your message here' }}" tabindex="0" aria-label="{{t 'Compose your message here...' }}"></textarea>
<div id="preview-message-area-container">
<div class="scrolling_list preview_message_area" data-simplebar data-simplebar-tab-index="-1" id="preview_message_area" style="display:none;">
<div class="markdown_preview_spinner"></div>

13
web/tests/compose.test.cjs
View File

@@ -178,6 +178,12 @@ test_ui("send_message_success", ({override, override_rewire}) => {
reify_message_id_checked = true;
});
const $elem = $("#send_message_form");
const $textarea = $("textarea#compose-textarea");
const $indicator = $("#compose-limit-indicator");
$elem.set_find_results(".message-textarea", $textarea);
$elem.set_find_results(".message-limit-indicator", $indicator);
override(
onboarding_steps,
"ONE_TIME_NOTICES_TO_DISPLAY",
@@ -239,6 +245,11 @@ test_ui("send_message", ({override, override_rewire, mock_template}) => {
mock_banners();
MockDate.set(new Date(fake_now * 1000));
override_rewire(drafts, "sync_count", noop);
const $elem = $("#send_message_form");
const $textarea = $("textarea#compose-textarea");
const $indicator = $("#compose-limit-indicator");
$elem.set_find_results(".message-textarea", $textarea);
$elem.set_find_results(".message-limit-indicator", $indicator);
// This is the common setup stuff for all of the four tests.
let stub_state;
@@ -422,6 +433,7 @@ test_ui("enter_with_preview_open", ({override, override_rewire}) => {
override_rewire(compose, "send_message", () => {
send_message_called = true;
});
$("#send_message_form").set_find_results(".message-textarea", $("textarea#compose-textarea"));
compose.enter_with_preview_open();
assert.ok(!$("#compose .undo_markdown_preview").visible());
assert.ok(!$("#compose .preview_message_area").visible());
@@ -448,6 +460,7 @@ test_ui("finish", ({override, override_rewire}) => {
override_rewire(compose_banner, "clear_message_sent_banners", noop);
override(document, "to_$", () => $("document-stub"));
$("#send_message_form").set_find_results(".message-textarea", $("textarea#compose-textarea"));
let show_button_spinner_called = false;
override(loading, "show_button_spinner", ($spinner) => {
assert.equal($spinner.selector, ".compose-submit-button .loader");

24
web/tests/compose_actions.test.cjs
View File

@@ -140,6 +140,12 @@ test("start", ({override, override_rewire, mock_template}) => {
override_rewire(compose_actions, "complete_starting_tasks", noop);
override_rewire(compose_actions, "blur_compose_inputs", noop);
override_rewire(compose_actions, "clear_textarea", noop);
const $elem = $("#send_message_form");
const $textarea = $("textarea#compose-textarea");
const $indicator = $("#compose-limit-indicator");
$elem.set_find_results(".message-textarea", $textarea);
$elem.set_find_results(".message-limit-indicator", $indicator);
override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);
override_rewire(compose_recipient, "check_posting_policy_for_compose_box", noop);
mock_template("inline_decorated_stream_name.hbs", false, noop);
@@ -281,6 +287,12 @@ test("respond_to_message", ({override, override_rewire, mock_template}) => {
mock_banners();
override_rewire(compose_actions, "complete_starting_tasks", noop);
override_rewire(compose_actions, "clear_textarea", noop);
const $elem = $("#send_message_form");
const $textarea = $("textarea#compose-textarea");
const $indicator = $("#compose-limit-indicator");
$elem.set_find_results(".message-textarea", $textarea);
$elem.set_find_results(".message-limit-indicator", $indicator);
override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);
override_rewire(compose_recipient, "check_posting_policy_for_compose_box", noop);
override_private_message_recipient({override});
@@ -336,6 +348,12 @@ test("reply_with_mention", ({override, override_rewire, mock_template}) => {
override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);
override_rewire(compose_actions, "complete_starting_tasks", noop);
override_rewire(compose_actions, "clear_textarea", noop);
const $elem = $("#send_message_form");
const $textarea = $("textarea#compose-textarea");
const $indicator = $("#compose-limit-indicator");
$elem.set_find_results(".message-textarea", $textarea);
$elem.set_find_results(".message-limit-indicator", $indicator);
override_private_message_recipient({override});
override_rewire(compose_recipient, "check_posting_policy_for_compose_box", noop);
mock_template("inline_decorated_stream_name.hbs", false, noop);
@@ -390,6 +408,12 @@ test("reply_with_mention", ({override, override_rewire, mock_template}) => {
test("quote_and_reply", ({disallow, override, override_rewire}) => {
override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);
override_rewire(compose_reply, "selection_within_message_id", () => undefined);
const $elem = $("#send_message_form");
const $textarea = $("textarea#compose-textarea");
const $indicator = $("#compose-limit-indicator");
$elem.set_find_results(".message-textarea", $textarea);
$elem.set_find_results(".message-limit-indicator", $indicator);
override(realm, "realm_direct_message_permission_group", nobody.id);
override(realm, "realm_direct_message_initiator_group", everyone.id);

25
web/tests/compose_validate.test.cjs
View File

@@ -188,6 +188,7 @@ test_ui("validate", ({mock_template, override}) => {
pm_recipient_error_rendered = true;
return "<banner-stub>";
});
$("#send_message_form").set_find_results(".message-textarea", $("textarea#compose-textarea"));
assert.ok(!compose_validate.validate());
assert.ok(pm_recipient_error_rendered);
@@ -229,6 +230,7 @@ test_ui("validate", ({mock_template, override}) => {
initialize_pm_pill();
add_content_to_compose_box();
compose_state.private_message_recipient("welcome-bot@example.com");
$("#send_message_form").set_find_results(".message-textarea", $("textarea#compose-textarea"));
assert.ok(compose_validate.validate());
let zephyr_error_rendered = false;
@@ -263,6 +265,7 @@ test_ui("validate", ({mock_template, override}) => {
zephyr_checked = true;
return true;
};
$("#send_message_form").set_find_results(".message-textarea", $("textarea#compose-textarea"));
assert.ok(!compose_validate.validate());
assert.ok(zephyr_checked);
assert.ok(zephyr_error_rendered);
@@ -280,6 +283,7 @@ test_ui("validate", ({mock_template, override}) => {
empty_stream_error_rendered = true;
return "<banner-stub>";
});
$("#send_message_form").set_find_results(".message-textarea", $("textarea#compose-textarea"));
assert.ok(!compose_validate.validate());
assert.ok(empty_stream_error_rendered);
@@ -433,6 +437,7 @@ test_ui("validate_stream_message", ({override, override_rewire, mock_template})
stream_data.add_sub(special_sub);
compose_state.set_stream_id(special_sub.stream_id);
$("#send_message_form").set_find_results(".message-textarea", $("textarea#compose-textarea"));
assert.ok(compose_validate.validate());
assert.ok(!$("#compose-all-everyone").visible());
@@ -496,6 +501,7 @@ test_ui("test_validate_stream_message_post_policy_admin_only", ({mock_template,
banner_rendered = true;
return "<banner-stub>";
});
$("#send_message_form").set_find_results(".message-textarea", $("textarea#compose-textarea"));
assert.ok(!compose_validate.validate());
assert.ok(banner_rendered);
@@ -541,6 +547,7 @@ test_ui("test_validate_stream_message_post_policy_moderators_only", ({mock_templ
banner_rendered = true;
return "<banner-stub>";
});
$("#send_message_form").set_find_results(".message-textarea", $("textarea#compose-textarea"));
assert.ok(!compose_validate.validate());
assert.ok(banner_rendered);
// Reset error message.
@@ -579,6 +586,10 @@ test_ui(
banner_rendered = true;
return "<banner-stub>";
});
$("#send_message_form").set_find_results(
".message-textarea",
$("textarea#compose-textarea"),
);
assert.ok(!compose_validate.validate());
assert.ok(banner_rendered);
},
@@ -587,8 +598,12 @@ test_ui(
test_ui("test_check_overflow_text", ({mock_template, override}) => {
override(realm, "max_message_length", 10000);
const $textarea = $("textarea#compose-textarea");
const $indicator = $("#compose-limit-indicator");
const $elem = $("#send_message_form");
const $textarea = $(".message-textarea");
const $indicator = $(".message-limit-indicator");
stub_message_row($textarea);
$elem.set_find_results(".message-textarea", $textarea);
$elem.set_find_results(".message-limit-indicator", $indicator);
// Indicator should show red colored text
let limit_indicator_html;
@@ -596,7 +611,7 @@ test_ui("test_check_overflow_text", ({mock_template, override}) => {
limit_indicator_html = html;
});
$textarea.val("a".repeat(10000 + 1));
compose_validate.check_overflow_text();
compose_validate.check_overflow_text($elem);
assert.ok($indicator.hasClass("over_limit"));
assert.equal(limit_indicator_html, "-1\n");
assert.ok($textarea.hasClass("over_limit"));
@@ -604,7 +619,7 @@ test_ui("test_check_overflow_text", ({mock_template, override}) => {
// Indicator should show orange colored text
$textarea.val("a".repeat(9100));
compose_validate.check_overflow_text();
compose_validate.check_overflow_text($elem);
assert.ok(!$indicator.hasClass("over_limit"));
assert.equal(limit_indicator_html, "900\n");
assert.ok(!$textarea.hasClass("over_limit"));
@@ -612,7 +627,7 @@ test_ui("test_check_overflow_text", ({mock_template, override}) => {
// Indicator must be empty
$textarea.val("a".repeat(9100 - 1));
compose_validate.check_overflow_text();
compose_validate.check_overflow_text($elem);
assert.ok(!$indicator.hasClass("over_limit"));
assert.equal($indicator.text(), "");
assert.ok(!$textarea.hasClass("over_limit"));