user_group_pill: Hardcode `Everyone` in display name.

For system groups, the directive is that we should use the description
as the display name. But in case of `role:everyone`, the description is
`Admins, moderators, members and guests`, while for the
`user_group_pill`, we want to display a simpler and succinct message:
`Everyone`. We've only hardcoded this for user_group_pill since we don't
want to display the name as `Everyone` anywhere else yet.

We've also exposed a method called `get_display_group_name` which will
be used in later commits to get the group display name.

web/src/user_group_pill.ts

@@ -18,7 +18,7 @@ export type UserGroupPillData = UserGroup & {
 
 function display_pill(group: UserGroup): string {
     const group_members = user_groups.get_recursive_group_members(group);
-    return `${group.name}: ${group_members.size} users`;
+    return `${user_groups.get_display_group_name(group)}: ${group_members.size} users`;
 }
 
 export function create_item_from_group_name(

web/src/user_groups.ts

@@ -325,3 +325,15 @@ export function get_realm_user_groups_for_dropdown_list_widget(
 
     return [...system_user_groups, ...user_groups_excluding_system_groups];
 }
+
+// Group name for user-facing display. For settings, we already use
+// description strings for system groups. But those description strings
+// might not be suitable for every case, e.g. we want the name for
+// `role:everyone` to be `Everyone` instead of
+// `Admins, moderators, members and guests` from `settings_config`.
+// Right now, we only change the name for `role:everyone`, that's why
+// we don't store the values in a structured way like
+// `settings_config` yet.
+export function get_display_group_name(user_group: UserGroup): string {
+    return user_group.name === "role:everyone" ? $t({defaultMessage: "Everyone"}) : user_group.name;
+}

web/tests/user_group_pill.test.js

@@ -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: everyone.name + ": 5 users",
+    display_value: "translated: Everyone: 5 users",
 };
 
 const groups = [admins, testers, everyone];

web/tests/user_groups.test.js

@@ -470,3 +470,24 @@ run_test("get_realm_user_groups_for_dropdown_list_widget", () => {
         },
     );
 });
+
+run_test("get_display_group_name", () => {
+    const admins = {
+        name: "Admins",
+        description: "foo",
+        id: 1,
+        members: new Set([1]),
+        is_system_group: false,
+        direct_subgroup_ids: new Set([4]),
+    };
+    const all = {
+        name: "role:everyone",
+        id: 2,
+        members: new Set([2, 3]),
+        is_system_group: false,
+        direct_subgroup_ids: new Set([1]),
+    };
+
+    assert.equal(user_groups.get_display_group_name(admins), "Admins");
+    assert.equal(user_groups.get_display_group_name(all), "translated: Everyone");
+});