From e9166fe6f72aac871156d85e8bbe9ee0c2515a55 Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Fri, 12 Jul 2024 00:54:30 +0000
Subject: [PATCH] user_group_pill: Internationalize display_pill string.

---
 web/src/user_group_pill.ts        | 6 +++++-
 web/tests/user_group_pill.test.js | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/user_group_pill.ts b/web/src/user_group_pill.ts
index 8c38b86479..89ba603734 100644
--- a/web/src/user_group_pill.ts
+++ b/web/src/user_group_pill.ts
@@ -1,3 +1,4 @@
+import {$t_html} from "./i18n";
 import type {InputPillContainer, InputPillItem} from "./input_pill";
 import type {CombinedPillContainer, CombinedPillItem} from "./typeahead_helper";
 import type {UserGroup} from "./user_groups";
@@ -18,7 +19,10 @@ export type UserGroupPillData = UserGroup & {
 
 function display_pill(group: UserGroup): string {
     const group_members = user_groups.get_recursive_group_members(group);
-    return `${user_groups.get_display_group_name(group)}: ${group_members.size} users`;
+    return $t_html(
+        {defaultMessage: "{group_name}: {group_size, plural, one {# user} other {# users}}"},
+        {group_name: user_groups.get_display_group_name(group), group_size: group_members.size},
+    );
 }
 
 export function create_item_from_group_name(
diff --git a/web/tests/user_group_pill.test.js b/web/tests/user_group_pill.test.js
index 31cc06b462..150ea6a295 100644
--- a/web/tests/user_group_pill.test.js
+++ b/web/tests/user_group_pill.test.js
@@ -32,13 +32,13 @@ const admins_pill = {
     group_id: admins.id,
     group_name: admins.name,
     type: "user_group",
-    display_value: admins.name + ": " + admins.members.length + " users",
+    display_value: "translated HTML: " + admins.name + ": " + admins.members.length + " users",
 };
 const testers_pill = {
     group_id: testers.id,
     group_name: testers.name,
     type: "user_group",
-    display_value: testers.name + ": " + testers.members.length + " users",
+    display_value: "translated HTML: " + testers.name + ": " + testers.members.length + " users",
 };
 const everyone_pill = {
     group_id: everyone.id,
@@ -47,7 +47,7 @@ const everyone_pill = {
     // While we can programmatically set the user count below,
     // calculating it would almost mimic the entire display function
     // here, reducing the usefulness of the test.
-    display_value: "translated: Everyone: 5 users",
+    display_value: "translated HTML: translated: Everyone: 5 users",
 };
 
 const groups = [admins, testers, everyone];