compose: Update placeholder text depending on the narrow.

Change the `compose-textarea` placeholder text depending on the
stream/topic or PM recipients that the message will be sent to.

Resolves #12834.

frontend_tests/node_tests/compose_ui.js

@@ -1,12 +1,29 @@
 zrequire('compose_ui');
+zrequire('people');
+zrequire('user_status');
 
 set_global('document', {
     execCommand: function () { return false; },
 });
 
 set_global('$', global.make_zjquery());
+set_global('i18n', global.stub_i18n);
 set_global('blueslip', {});
 
+var alice = {
+    email: 'alice@zulip.com',
+    user_id: 101,
+    full_name: 'Alice',
+};
+var bob = {
+    email: 'bob@zulip.com',
+    user_id: 102,
+    full_name: 'Bob',
+};
+
+global.people.add_in_realm(alice);
+global.people.add_in_realm(bob);
+
 var noop = function () {};
 
 function make_textbox(s) {
@@ -149,3 +166,48 @@ run_test('replace_syntax', () => {
     compose_ui.replace_syntax('Bca', '$$\pi$$');
     assert.equal($('#compose-textarea').val(), 'A$$\pi$$Bc');
 });
+
+run_test('compute_placeholder_text', () => {
+    var opts = {
+        message_type: 'stream',
+        stream: '',
+        topic: '',
+        private_message_recipient: '',
+    };
+
+    // Stream narrows
+    assert.equal(compose_ui.compute_placeholder_text(opts), i18n.t("Compose your message here"));
+
+    opts.stream = "all";
+    assert.equal(compose_ui.compute_placeholder_text(opts), i18n.t("Message #all"));
+
+    opts.topic = "Test";
+    assert.equal(compose_ui.compute_placeholder_text(opts), i18n.t("Message #all > Test"));
+
+    // PM Narrows
+    opts = {
+        message_type: 'private',
+        stream: '',
+        topic: '',
+        private_message_recipient: '',
+    };
+    assert.equal(compose_ui.compute_placeholder_text(opts), i18n.t("Compose your message here"));
+
+    opts.private_message_recipient = 'bob@zulip.com';
+    user_status.set_status_text({
+        user_id: bob.user_id,
+        status_text: 'out to lunch',
+    });
+    assert.equal(compose_ui.compute_placeholder_text(opts), i18n.t("Message Bob (out to lunch)"));
+
+    opts.private_message_recipient = 'alice@zulip.com';
+    user_status.set_status_text({
+        user_id: alice.user_id,
+        status_text: '',
+    });
+    assert.equal(compose_ui.compute_placeholder_text(opts), i18n.t("Message Alice"));
+
+    // Group PM
+    opts.private_message_recipient = 'alice@zulip.com,bob@zulip.com';
+    assert.equal(compose_ui.compute_placeholder_text(opts), i18n.t("Message Alice, Bob"));
+});

static/js/compose.js

@@ -1074,6 +1074,16 @@ exports.initialize = function () {
         })
     );
 
+    $("#compose-textarea").focus(function () {
+        var opts = {
+            message_type: compose_state.get_message_type(),
+            stream: $('#stream_message_recipient_stream').val(),
+            topic: $('#stream_message_recipient_topic').val(),
+            private_message_recipient: compose_pm_pill.get_emails(),
+        };
+        compose_actions.update_placeholder_text(opts);
+    });
+
     if (page_params.narrow !== undefined) {
         if (page_params.narrow_topic !== undefined) {
             compose_actions.start("stream", {topic: page_params.narrow_topic});

static/js/compose_actions.js

@@ -131,6 +131,7 @@ exports.complete_starting_tasks = function (msg_type, opts) {
     exports.decorate_stream_bar(opts.stream);
     $(document).trigger($.Event('compose_started.zulip', opts));
     resize.resize_bottom_whitespace();
+    exports.update_placeholder_text(opts);
 };
 
 // In an attempt to decrease mixing, make the composebox's
@@ -196,6 +197,11 @@ function same_recipient_as_before(msg_type, opts) {
               opts.private_message_recipient === compose_state.recipient());
 }
 
+exports.update_placeholder_text = function (opts) {
+    var placeholder_text = compose_ui.compute_placeholder_text(opts);
+    $('#compose-textarea').attr('placeholder', placeholder_text);
+};
+
 exports.start = function (msg_type, opts) {
     exports.autosize_message_content();
 

static/js/compose_ui.js

@@ -76,6 +76,42 @@ exports.replace_syntax = function (old_syntax, new_syntax, textarea) {
     }));
 };
 
+exports.compute_placeholder_text = function (opts) {
+    // Computes clear placeholder text for the compose box, depending
+    // on what heading values have already been filled out.
+    if (opts.message_type === 'stream') {
+        if (opts.topic) {
+            return i18n.t("Message #__stream_name__ > __topic_name__",
+                          {stream_name: opts.stream,
+                           topic_name: opts.topic});
+        } else if (opts.stream) {
+            return i18n.t("Message #__stream_name__", {stream_name: opts.stream});
+        }
+    }
+
+    // For Private Messages
+    if (opts.private_message_recipient) {
+        var recipient_list = opts.private_message_recipient.split(",");
+        var recipient_names = _.map(recipient_list, (recipient) => {
+            var user = people.get_by_email(recipient);
+            return user.full_name;
+        }).join(", ");
+
+        if (recipient_list.length === 1) {
+            // If it's a single user, display status text if available
+            var user = people.get_by_email(recipient_list[0]);
+            var status = user_status.get_status_text(user.user_id);
+            if (status) {
+                return i18n.t("Message __recipient_name__ (__recipient_status__)",
+                              {recipient_name: recipient_names,
+                               recipient_status: status});
+            }
+        }
+        return i18n.t("Message __recipient_names__", {recipient_names: recipient_names});
+    }
+    return i18n.t("Compose your message here");
+};
+
 return exports;
 
 }());