From 7a3f2bbfb5a1b5c069f82bcbc9a537a998a13186 Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubhamapadia@gmail.com>
Date: Thu, 28 Jun 2018 00:25:56 +0530
Subject: [PATCH] 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              | 4 ++++
 frontend_tests/node_tests/compose_pm_pill.js      | 6 +++++-
 frontend_tests/node_tests/settings_user_groups.js | 3 +++
 frontend_tests/node_tests/user_pill.js            | 5 +++++
 static/js/user_pill.js                            | 5 +++++
 5 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend_tests/node_tests/compose.js b/frontend_tests/node_tests/compose.js
index ca0adda445..34557ec7f4 100644
--- a/frontend_tests/node_tests/compose.js
+++ b/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,
diff --git a/frontend_tests/node_tests/compose_pm_pill.js b/frontend_tests/node_tests/compose_pm_pill.js
index d8d63db737..ab9c2e01ac 100644
--- a/frontend_tests/node_tests/compose_pm_pill.js
+++ b/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: {},
 };
diff --git a/frontend_tests/node_tests/settings_user_groups.js b/frontend_tests/node_tests/settings_user_groups.js
index c2a43c8639..24dc412d53 100644
--- a/frontend_tests/node_tests/settings_user_groups.js
+++ b/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', {});
 
diff --git a/frontend_tests/node_tests/user_pill.js b/frontend_tests/node_tests/user_pill.js
index d17993ff1b..a37ca39ed7 100644
--- a/frontend_tests/node_tests/user_pill.js
+++ b/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() {
diff --git a/static/js/user_pill.js b/static/js/user_pill.js
index c5fc271197..9b418c9a7d 100644
--- a/static/js/user_pill.js
+++ b/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();