pills: Enable user avatar images for user pills.

Fixes #9842.
Enables avatar images in pills wherever user_pill.js is used.
(e.g composebox, user group settings)
Changes to search_pill.js are not made as search pills haven't been
added yet completely and search_pill.js just contains the preparatory
code right now.
No change to compose_pm_pill.js is not required as it uses
`user_pill.create_item_from_text` in its `create` function.

frontend_tests/node_tests/compose.js

@@ -70,6 +70,10 @@ zrequire('compose_pm_pill');
 zrequire('compose');
 zrequire('upload');
 
+people.small_avatar_url_for_person = function () {
+    return 'http://example.com/example.png';
+};
+
 var me = {
     email: 'me@example.com',
     user_id: 30,

frontend_tests/node_tests/compose_pm_pill.js

@@ -3,7 +3,11 @@ zrequire('input_pill');
 zrequire('user_pill');
 
 set_global('$', global.make_zjquery());
-set_global('people', {});
+set_global('people', {
+    small_avatar_url_for_person: function () {
+        return 'http://example.com/example.png';
+    },
+});
 var pills = {
     pill: {},
 };

frontend_tests/node_tests/settings_user_groups.js

@@ -25,6 +25,9 @@ set_global('user_groups', {
 set_global('ui_report', {});
 set_global('people', {
     my_current_user_id: noop,
+    small_avatar_url_for_person: function () {
+        return 'http://example.com/example.png';
+    },
 });
 set_global('page_params', {});
 

frontend_tests/node_tests/user_pill.js

@@ -1,4 +1,7 @@
 zrequire('people');
+set_global('md5', function (s) {
+    return 'md5-' + s;
+});
 zrequire('user_pill');
 
 set_global('page_params', {
@@ -25,6 +28,7 @@ var isaac_item = {
     email: 'isaac@example.com',
     display_value: 'Isaac Newton',
     user_id: isaac.user_id,
+    img_src: 'https://secure.gravatar.com/avatar/md5-isaac@example.com?d=identicon&s=50',
 };
 
 run_test('setup', () => {
@@ -67,6 +71,7 @@ run_test('append', () => {
         assert.equal(opts.email, isaac.email);
         assert.equal(opts.display_value, isaac.full_name);
         assert.equal(opts.user_id, isaac.user_id);
+        assert.equal(opts.img_src, isaac_item.img_src);
     }
 
     function fake_clear() {

static/js/user_pill.js

@@ -36,12 +36,15 @@ exports.create_item_from_email = function (email, current_items) {
         return;
     }
 
+    var avatar_url = people.small_avatar_url_for_person(user);
+
     // We must supply display_value for the widget to work.  Everything
     // else is for our own use in callbacks.
     var item = {
         display_value: user.full_name,
         user_id: user.user_id,
         email: user.email,
+        img_src: avatar_url,
     };
 
     return item;
@@ -54,11 +57,13 @@ exports.get_email_from_item = function (item) {
 exports.append_person = function (opts) {
     var person = opts.person;
     var pill_widget = opts.pill_widget;
+    var avatar_url = people.small_avatar_url_for_person(person);
 
     pill_widget.appendValidatedData({
         display_value: person.full_name,
         user_id: person.user_id,
         email: person.email,
+        img_src: avatar_url,
     });
     if (pill_widget.clear_text !== undefined) {
         pill_widget.clear_text();