composebox_typeahead: Add user groups to PM recipient typeahead.

When a user group is selected, we add PM pills for each user in the
group instead of creating a PM pill for the user group.

Fixes #9971.

frontend_tests/node_tests/composebox_typeahead.js

@@ -1,4 +1,5 @@
 set_global('i18n', global.stub_i18n);
+zrequire('dict');
 zrequire('compose_state');
 zrequire('ui_util');
 zrequire('pm_conversations');
@@ -13,6 +14,7 @@ zrequire('stream_data');
 zrequire('user_pill');
 zrequire('compose_pm_pill');
 zrequire('composebox_typeahead');
+zrequire('recent_senders');
 set_global('md5', function (s) {
     return 'md5-' + s;
 });
@@ -23,6 +25,9 @@ set_global('topic_data', {
 var ct = composebox_typeahead;
 var noop = function () {};
 
+set_global('blueslip', {});
+blueslip.warn = noop;
+
 var emoji_stadium = {
     emoji_name: 'stadium',
     emoji_url: 'TBD',
@@ -163,7 +168,7 @@ var hamletcharacters = {
     name: "hamletcharacters",
     id: 1,
     description: "Characters of Hamlet",
-    members: [],
+    members: [100, 104],
 };
 
 var backend = {
@@ -470,7 +475,7 @@ run_test('initialize', () => {
     $('#private_message_recipient').typeahead = function (options) {
         // This should match the users added at the beginning of this test file.
         var actual_value = options.source();
-        var expected_value = [hamlet, othello, cordelia, lear];
+        var expected_value = [hamlet, othello, cordelia, lear, hamletcharacters, backend];
         assert.deepEqual(actual_value, expected_value);
 
         // Even though the items passed to .highlighter() are the full
@@ -531,7 +536,7 @@ run_test('initialize', () => {
         // A literal match at the beginning of an element puts it at the top.
         options.query = 'co';  // Matches everything ("x@zulip.COm")
         actual_value = options.sorter([othello, deactivated_user, cordelia]);
-        expected_value = [cordelia, deactivated_user, othello];
+        expected_value = [cordelia, othello, deactivated_user];
         assert.deepEqual(actual_value, expected_value);
 
         options.query = 'non-existing-user';
@@ -571,6 +576,29 @@ run_test('initialize', () => {
         actual_value = options.updater(othello, click_event);
         assert.equal(appended_name, 'Othello, the Moor of Venice');
 
+        var appended_names = [];
+        people.get_person_from_user_id = function (user_id) {
+            var users = {100: hamlet, 104: lear};
+            return users[user_id];
+        };
+        people.my_current_email = function () {
+            return 'hamlet@zulip.com';
+        };
+        compose_pm_pill.set_from_typeahead = function (item) {
+            appended_names.push(item.full_name);
+        };
+
+        var cleared = false;
+        function fake_clear() {
+            cleared = true;
+        }
+        compose_pm_pill.widget = {clear_text: fake_clear};
+
+        options.query = 'hamletchar';
+        options.updater(hamletcharacters, event);
+        assert.deepEqual(appended_names, ['King Lear']);
+        assert(cleared);
+
         pm_recipient_typeahead_called = true;
     };
 

static/js/composebox_typeahead.js

@@ -609,23 +609,44 @@ exports.initialize = function () {
     });
 
     $("#private_message_recipient").typeahead({
-        source: compose_pm_pill.get_typeahead_items,
+        source: function () {
+            var people = compose_pm_pill.get_typeahead_items();
+            var groups = user_groups.get_realm_user_groups();
+            return people.concat(groups);
+        },
         items: 5,
         dropup: true,
         fixed: true,
         highlighter: function (item) {
-            return typeahead_helper.render_person(item);
+            return typeahead_helper.render_person_or_user_group(item);
         },
         matcher: function (item) {
-            return query_matches_person(this.query, item);
+            return query_matches_person_or_user_group(this.query, item);
         },
         sorter: function (matches) {
-            // var current_stream = compose_state.stream_name();
-            return typeahead_helper.sort_recipientbox_typeahead(
-                this.query, matches, "");
+            return typeahead_helper.sort_people_and_user_groups(this.query, matches);
         },
         updater: function (item) {
-            compose_pm_pill.set_from_typeahead(item);
+            if (user_groups.is_user_group(item)) {
+                _.chain(item.members.keys())
+                    .map(function (user_id) {
+                        return people.get_person_from_user_id(user_id);
+                    }).filter(function (user) {
+                        // filter out inserted users and current user from pill insertion
+                        var inserted_users = user_pill.get_user_ids(compose_pm_pill.widget);
+                        var current_user = people.is_current_user(user.email);
+                        return inserted_users.indexOf(user.user_id) === -1 && !current_user;
+                    }).each(function (user) {
+                        compose_pm_pill.set_from_typeahead(user);
+                    });
+                // clear input pill in the event no pills were added
+                var pill_widget = compose_pm_pill.widget;
+                if (pill_widget.clear_text !== undefined) {
+                    pill_widget.clear_text();
+                }
+            } else {
+                compose_pm_pill.set_from_typeahead(item);
+            }
         },
         stopAdvance: true, // Do not advance to the next field on a tab or enter
     });