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 zulip#12834.

frontend_tests/node_tests/compose_ui.js

@@ -1,4 +1,6 @@
 zrequire('compose_ui');
+zrequire('people');
+zrequire('user_status');
 
 set_global('document', {
     execCommand: function () { return false; },
@@ -7,6 +9,20 @@ set_global('document', {
 set_global('$', global.make_zjquery());
 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 +165,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), "Compose your message here");
+
+    opts.stream = "all";
+    assert.equal(compose_ui.compute_placeholder_text(opts), "Message #all");
+
+    opts.topic = "Test";
+    assert.equal(compose_ui.compute_placeholder_text(opts), "Message #all > Test");
+
+    // PM Narrows
+    opts = {
+        message_type: 'private',
+        stream: '',
+        topic: '',
+        private_message_recipient: '',
+    };
+    assert.equal(compose_ui.compute_placeholder_text(opts), "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), "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), "Message Alice");
+
+    // Group PM
+    opts.private_message_recipient = 'alice@zulip.com,bob@zulip.com';
+    assert.equal(compose_ui.compute_placeholder_text(opts), "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,60 @@ exports.replace_syntax = function (old_syntax, new_syntax, textarea) {
     }));
 };
 
+exports.compute_placeholder_text = function (opts) {
+    var placeholder_text;
+
+    if (opts.message_type === 'private') {
+        if (opts.private_message_recipient) {
+            var recipient_list = opts.private_message_recipient.split(",");
+
+            if (recipient_list.length > 1) {
+                var recipient_names = [];
+                var num_users = 0;
+
+                recipient_list.forEach(recipient => {
+                    var user = people.get_by_email(recipient);
+                    recipient_names[num_users] = user.full_name;
+                    num_users = num_users + 1;
+                });
+
+                placeholder_text = "Message ";
+
+                recipient_names.forEach(recipient_name => {
+                    num_users = num_users - 1;
+                    if (num_users > 0) {
+                        placeholder_text += recipient_name + ", ";
+                    } else {
+                        placeholder_text += recipient_name;
+                    }
+                });
+            } else {
+                var user = people.get_by_email(recipient_list[0]);
+                var recipient_name = user.full_name;
+                var status = user_status.get_status_text(user.user_id);
+
+                if (status) {
+                    placeholder_text = "Message " + recipient_name + " (" + status + ")";
+                } else {
+                    placeholder_text = "Message " + recipient_name;
+                }
+            }
+        } else {
+            placeholder_text = "Compose your message here";
+        }
+    } else if (opts.message_type === 'stream') {
+        if (opts.topic) {
+            placeholder_text = "Message #" + opts.stream + " > " + opts.topic;
+        } else if (opts.stream) {
+            placeholder_text = "Message #" + opts.stream;
+        } else {
+            placeholder_text = "Compose your message here";
+        }
+    }
+
+    return placeholder_text;
+};
+
 return exports;
 
 }());