Compose: Refine the check_overflow_text function

Fixes: zulip#28706

This commit optimization in compose_validate.js manages cases where text.length exceeds max_length, displaying exceeded messages and negative exceeded characters, and tooltip message is updated to 'Maximum message length: 10000 characters.’This simplification enhances clarity by displaying only the remaining characters.

web/src/compose_validate.js

@@ -767,10 +767,9 @@ export function check_overflow_text() {
         compose_banner.show_error_message(
             $t(
                 {
-                    defaultMessage:
-                        "Message length exceeded by {exceeded_chars} characters.",
+                    defaultMessage: "Message length exceeded by {exceeded_chars} characters.",
                 },
-                { exceeded_chars: Math.abs(remainingCharacters)},
+                {exceeded_chars: Math.abs(remainingCharacters)},
             ),
             compose_banner.CLASSNAMES.message_too_long,
             $("#compose_banners"),

web/tests/compose.test.js

@@ -1,35 +1,35 @@
 "use strict";
 
-const { strict: assert } = require("assert");
+const {strict: assert} = require("assert");
 
 const MockDate = require("mockdate");
 
-const { mock_stream_header_colorblock } = require("./lib/compose");
-const { mock_banners } = require("./lib/compose_banner");
-const { $t } = require("./lib/i18n");
-const { mock_esm, set_global, zrequire } = require("./lib/namespace");
-const { run_test, noop } = require("./lib/test");
+const {mock_stream_header_colorblock} = require("./lib/compose");
+const {mock_banners} = require("./lib/compose_banner");
+const {$t} = require("./lib/i18n");
+const {mock_esm, set_global, zrequire} = require("./lib/namespace");
+const {run_test, noop} = require("./lib/test");
 const $ = require("./lib/zjquery");
-const { page_params, user_settings } = require("./lib/zpage_params");
+const {page_params, user_settings} = require("./lib/zpage_params");
 
 const settings_config = zrequire("settings_config");
 
 set_global("document", {
-    querySelector() { },
+    querySelector() {},
 });
 set_global("navigator", {});
 set_global(
     "ResizeObserver",
     class ResizeObserver {
-        observe() { }
+        observe() {}
     },
 );
 
 const fake_now = 555;
 
 const autosize = noop;
 autosize.update = noop;
-mock_esm("autosize", { default: autosize });
+mock_esm("autosize", {default: autosize});
 
 const channel = mock_esm("../src/channel");
 const compose_actions = mock_esm("../src/compose_actions", {
@@ -60,7 +60,6 @@ const compose_setup = zrequire("compose_setup");
 const echo = zrequire("echo");
 const people = zrequire("people");
 const stream_data = zrequire("stream_data");
-const compose_validate = zrequire("compose_validate");
 
 function reset_jquery() {
     // Avoid leaks.
@@ -121,15 +120,15 @@ function test_ui(label, f) {
     run_test(label, f);
 }
 
-function initialize_handlers({ override }) {
-    override(page_params, "realm_available_video_chat_providers", { disabled: { id: 0 } });
+function initialize_handlers({override}) {
+    override(page_params, "realm_available_video_chat_providers", {disabled: {id: 0}});
     override(page_params, "realm_video_chat_provider", 0);
     override(upload, "feature_check", noop);
     override(resize, "watch_manual_resize", noop);
     compose_setup.initialize();
 }
 
-test_ui("send_message_success", ({ override, override_rewire }) => {
+test_ui("send_message_success", ({override, override_rewire}) => {
     mock_banners();
 
     function reset() {
@@ -172,7 +171,7 @@ test_ui("send_message_success", ({ override, override_rewire }) => {
         stream_id: 1,
         topic: "test",
     };
-    let data = { id: 12, automatic_new_visibility_policy: 2 };
+    let data = {id: 12, automatic_new_visibility_policy: 2};
     compose.send_message_success(request, data);
 
     assert.equal($("textarea#compose-textarea").val(), "");
@@ -196,7 +195,7 @@ test_ui("send_message_success", ({ override, override_rewire }) => {
         stream_id: 2,
         topic: "test",
     };
-    data = { id: 12 };
+    data = {id: 12};
     compose.send_message_success(request, data);
 
     assert.equal($("textarea#compose-textarea").val(), "");
@@ -205,7 +204,7 @@ test_ui("send_message_success", ({ override, override_rewire }) => {
     assert.ok(reify_message_id_checked);
 });
 
-test_ui("send_message", ({ override, override_rewire, mock_template }) => {
+test_ui("send_message", ({override, override_rewire, mock_template}) => {
     mock_banners();
     MockDate.set(new Date(fake_now * 1000));
 
@@ -356,7 +355,7 @@ test_ui("send_message", ({ override, override_rewire, mock_template }) => {
     })();
 });
 
-test_ui("enter_with_preview_open", ({ override, override_rewire }) => {
+test_ui("enter_with_preview_open", ({override, override_rewire}) => {
     mock_banners();
     $("textarea#compose-textarea").toggleClass = noop;
     mock_stream_header_colorblock();
@@ -407,7 +406,7 @@ test_ui("enter_with_preview_open", ({ override, override_rewire }) => {
     compose.enter_with_preview_open();
 });
 
-test_ui("finish", ({ override, override_rewire }) => {
+test_ui("finish", ({override, override_rewire}) => {
     mock_banners();
     mock_stream_header_colorblock();
 
@@ -469,7 +468,7 @@ test_ui("finish", ({ override, override_rewire }) => {
     })();
 });
 
-test_ui("initialize", ({ override }) => {
+test_ui("initialize", ({override}) => {
     let compose_actions_expected_opts;
     let compose_actions_start_checked;
 
@@ -483,7 +482,7 @@ test_ui("initialize", ({ override }) => {
     // normal workflow of the function. All the tests for the on functions are
     // done in subsequent tests directly below this test.
 
-    override(page_params, "realm_available_video_chat_providers", { disabled: { id: 0 } });
+    override(page_params, "realm_available_video_chat_providers", {disabled: {id: 0}});
     override(page_params, "realm_video_chat_provider", 0);
 
     let resize_watch_manual_resize_checked = false;
@@ -526,7 +525,7 @@ test_ui("initialize", ({ override }) => {
         page_params.narrow_topic = "testing";
 
         reset_jquery();
-        set_up_compose_start_mock({ topic: "testing" });
+        set_up_compose_start_mock({topic: "testing"});
 
         compose_setup.initialize();
 
@@ -544,9 +543,9 @@ test_ui("initialize", ({ override }) => {
     })();
 });
 
-test_ui("update_fade", ({ override, override_rewire }) => {
+test_ui("update_fade", ({override, override_rewire}) => {
     mock_banners();
-    initialize_handlers({ override });
+    initialize_handlers({override});
 
     let set_focused_recipient_checked = false;
     let update_all_called = false;
@@ -580,8 +579,8 @@ test_ui("update_fade", ({ override, override_rewire }) => {
     assert.ok(update_narrow_to_recipient_visibility_called);
 });
 
-test_ui("trigger_submit_compose_form", ({ override, override_rewire }) => {
-    initialize_handlers({ override });
+test_ui("trigger_submit_compose_form", ({override, override_rewire}) => {
+    initialize_handlers({override});
 
     let prevent_default_checked = false;
     let compose_finish_checked = false;
@@ -602,10 +601,10 @@ test_ui("trigger_submit_compose_form", ({ override, override_rewire }) => {
     assert.ok(compose_finish_checked);
 });
 
-test_ui("on_events", ({ override, override_rewire }) => {
+test_ui("on_events", ({override, override_rewire}) => {
     mock_stream_header_colorblock();
 
-    initialize_handlers({ override });
+    initialize_handlers({override});
 
     override(rendered_markdown, "update_elements", noop);
 
@@ -777,7 +776,7 @@ test_ui("on_events", ({ override, override_rewire }) => {
     })();
 });
 
-test_ui("create_message_object", ({ override, override_rewire }) => {
+test_ui("create_message_object", ({override, override_rewire}) => {
     mock_stream_header_colorblock();
     mock_banners();
 
@@ -805,7 +804,7 @@ test_ui("create_message_object", ({ override, override_rewire }) => {
     assert.deepEqual(message.to, [alice.email, bob.email]);
 });
 
-test_ui("DM policy disabled", ({ override, override_rewire }) => {
+test_ui("DM policy disabled", ({override, override_rewire}) => {
     // Disable dms in the organisation
     override(
         page_params,
@@ -826,30 +825,30 @@ test_ui("DM policy disabled", ({ override, override_rewire }) => {
     assert.ok(reply_disabled);
 });
 
-test_ui("narrow_button_titles", ({ override }) => {
+test_ui("narrow_button_titles", ({override}) => {
     override(narrow_state, "pm_ids_string", () => "31");
     override(narrow_state, "is_message_feed_visible", () => true);
     compose_closed_ui.update_buttons_for_private();
     assert.equal(
         $("#new_conversation_button").text(),
-        $t({ defaultMessage: "Start new conversation" }),
+        $t({defaultMessage: "Start new conversation"}),
     );
     assert.equal(
         $("#new_direct_message_button").text(),
-        $t({ defaultMessage: "New direct message" }),
+        $t({defaultMessage: "New direct message"}),
     );
 
     compose_closed_ui.update_buttons_for_stream_views();
     assert.equal(
         $("#new_conversation_button").text(),
-        $t({ defaultMessage: "Start new conversation" }),
+        $t({defaultMessage: "Start new conversation"}),
     );
     assert.equal(
         $("#new_direct_message_button").text(),
-        $t({ defaultMessage: "New direct message" }),
+        $t({defaultMessage: "New direct message"}),
     );
 });
 
 run_test("reset MockDate", () => {
     MockDate.reset();
-});
+});