From cab0f9c219df69bc8efd15c55ae19a7a9a72acab Mon Sep 17 00:00:00 2001
From: Anders Kaseorg <anders@zulip.com>
Date: Wed, 13 Oct 2021 15:48:32 -0700
Subject: [PATCH] people: Fix small avatar URL generation.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
---
 frontend_tests/node_tests/composebox_typeahead.js |  2 +-
 frontend_tests/node_tests/people.js               | 13 ++++++++-----
 frontend_tests/node_tests/user_pill.js            |  2 +-
 static/js/people.js                               |  5 +++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend_tests/node_tests/composebox_typeahead.js b/frontend_tests/node_tests/composebox_typeahead.js
index 8751a13c7c..be21a2be97 100644
--- a/frontend_tests/node_tests/composebox_typeahead.js
+++ b/frontend_tests/node_tests/composebox_typeahead.js
@@ -879,7 +879,7 @@ test("initialize", ({override, mock_template}) => {
         actual_value = options.highlighter.call(fake_this, othello);
         expected_value =
             `        <span class="user_circle_empty user_circle"></span>\n` +
-            `        <img class="typeahead-image" src="/avatar/${othello.user_id}&amp;s&#x3D;50" />\n` +
+            `        <img class="typeahead-image" src="http://zulip.zulipdev.com/avatar/${othello.user_id}?s&#x3D;50" />\n` +
             `<strong>Othello, the Moor of Venice</strong>&nbsp;&nbsp;\n` +
             `<small class="autocomplete_secondary">othello@zulip.com</small>\n`;
         assert.equal(actual_value, expected_value);
diff --git a/frontend_tests/node_tests/people.js b/frontend_tests/node_tests/people.js
index f835870ba0..59780d012e 100644
--- a/frontend_tests/node_tests/people.js
+++ b/frontend_tests/node_tests/people.js
@@ -171,7 +171,7 @@ const charles = {
     email: "charles@example.com",
     user_id: 301,
     full_name: "Charles Dickens",
-    avatar_url: "charles.com/foo.png",
+    avatar_url: "http://charles.com/foo.png",
     is_guest: false,
 };
 
@@ -710,7 +710,7 @@ test_people("message_methods", () => {
     muted_users.add_muted_user(30);
     assert.deepEqual(people.sender_info_for_recent_topics_row([30]), [
         {
-            avatar_url_small: "/avatar/30&s=50",
+            avatar_url_small: "http://zulip.zulipdev.com/avatar/30?s=50",
             is_muted: true,
             email: "me@example.com",
             full_name: me.full_name,
@@ -732,7 +732,7 @@ test_people("message_methods", () => {
     assert.equal(people.pm_with_url(message), "#narrow/pm-with/301,302-group");
     assert.equal(people.pm_perma_link(message), "#narrow/pm-with/30,301,302-group");
     assert.equal(people.pm_reply_to(message), "Athens@example.com,charles@example.com");
-    assert.equal(people.small_avatar_url(message), "charles.com/foo.png&s=50");
+    assert.equal(people.small_avatar_url(message), "http://charles.com/foo.png?s=50");
 
     message = {
         type: "private",
@@ -742,7 +742,7 @@ test_people("message_methods", () => {
     assert.equal(people.pm_with_url(message), "#narrow/pm-with/302-athens");
     assert.equal(people.pm_perma_link(message), "#narrow/pm-with/30,302-pm");
     assert.equal(people.pm_reply_to(message), "Athens@example.com");
-    assert.equal(people.small_avatar_url(message), "legacy.png&s=50");
+    assert.equal(people.small_avatar_url(message), "http://zulip.zulipdev.com/legacy.png?s=50");
 
     message = {
         avatar_url: undefined,
@@ -767,7 +767,10 @@ test_people("message_methods", () => {
     message = {
         sender_id: ashton.user_id,
     };
-    assert.equal(people.small_avatar_url(message), `/avatar/${ashton.user_id}&s=50`);
+    assert.equal(
+        people.small_avatar_url(message),
+        `http://zulip.zulipdev.com/avatar/${ashton.user_id}?s=50`,
+    );
 
     message = {
         type: "private",
diff --git a/frontend_tests/node_tests/user_pill.js b/frontend_tests/node_tests/user_pill.js
index 05f1b5b07d..380ac31d42 100644
--- a/frontend_tests/node_tests/user_pill.js
+++ b/frontend_tests/node_tests/user_pill.js
@@ -33,7 +33,7 @@ const isaac_item = {
     type: "user",
     user_id: isaac.user_id,
     deactivated: false,
-    img_src: `/avatar/${isaac.user_id}&s=50`,
+    img_src: `http://zulip.zulipdev.com/avatar/${isaac.user_id}?s=50`,
 };
 
 let pill_widget = {};
diff --git a/static/js/people.js b/static/js/people.js
index 49b3c85257..e349d7805c 100644
--- a/static/js/people.js
+++ b/static/js/people.js
@@ -619,8 +619,9 @@ export function exclude_me_from_string(user_ids_string) {
 }
 
 export function format_small_avatar_url(raw_url) {
-    const url = raw_url + "&s=50";
-    return url;
+    const url = new URL(raw_url, location);
+    url.search += (url.search ? "&" : "") + "s=50";
+    return url.href;
 }
 
 export function sender_is_bot(message) {