user_groups: Do not show "role:" prefix for system groups.

Instead of showing the actual names like "role:everyone",
"role:moderators", etc. for system groups, we show
"Everyone", "Moderators", etc. for system user group in
pills, typeaheads and popovers.

Though system groups are not shown in typeahead as of
this commit, we update the typeahead code as well to
not conside "role:" prefix while matching with the
query as we would soon show system groups in typeahead
when we would add new UI for group-based settings.

Previously, only "role:everyone" group was shown as
"Everyone" in popover and pills but for other system
groups their original names for shown and this commit
changes that behavior to be same for all system groups.

The original display_name field for
settings_config.system_user_groups_list objects, which
was used for dropdown widgets, is also renamed so that
we can use display_name field for the names to be used
in other places.

web/src/pill_typeahead.ts

@@ -22,7 +22,7 @@ function person_matcher(query: string, item: UserPillData): boolean {
 }
 
 function group_matcher(query: string, item: UserGroupPillData): boolean {
-    return typeahead_helper.query_matches_name(query, item);
+    return typeahead_helper.query_matches_group_name(query, item);
 }
 
 type TypeaheadItem = UserGroupPillData | StreamPillData | UserPillData;

web/src/settings_config.ts

@@ -921,34 +921,42 @@ export const desktop_icon_count_display_values = {
 export const system_user_groups_list = [
     {
         name: "role:internet",
+        dropdown_option_name: $t({defaultMessage: "Everyone on the internet"}),
         display_name: $t({defaultMessage: "Everyone on the internet"}),
     },
     {
         name: "role:everyone",
-        display_name: $t({defaultMessage: "Admins, moderators, members and guests"}),
+        dropdown_option_name: $t({defaultMessage: "Admins, moderators, members and guests"}),
+        display_name: $t({defaultMessage: "Everyone"}),
     },
     {
         name: "role:members",
-        display_name: $t({defaultMessage: "Admins, moderators and members"}),
+        dropdown_option_name: $t({defaultMessage: "Admins, moderators and members"}),
+        display_name: $t({defaultMessage: "Members"}),
     },
     {
         name: "role:fullmembers",
-        display_name: $t({defaultMessage: "Admins, moderators and full members"}),
+        dropdown_option_name: $t({defaultMessage: "Admins, moderators and full members"}),
+        display_name: $t({defaultMessage: "Full members"}),
     },
     {
         name: "role:moderators",
-        display_name: $t({defaultMessage: "Admins and moderators"}),
+        dropdown_option_name: $t({defaultMessage: "Admins and moderators"}),
+        display_name: $t({defaultMessage: "Moderators"}),
     },
     {
         name: "role:administrators",
-        display_name: $t({defaultMessage: "Admins"}),
+        dropdown_option_name: $t({defaultMessage: "Admins"}),
+        display_name: $t({defaultMessage: "Administrators"}),
     },
     {
         name: "role:owners",
+        dropdown_option_name: $t({defaultMessage: "Owners"}),
         display_name: $t({defaultMessage: "Owners"}),
     },
     {
         name: "role:nobody",
+        dropdown_option_name: $t({defaultMessage: "Nobody"}),
         display_name: $t({defaultMessage: "Nobody"}),
     },
 ];

web/src/typeahead_helper.ts

@@ -22,6 +22,7 @@ import * as stream_list_sort from "./stream_list_sort";
 import type {StreamPill, StreamPillData} from "./stream_pill";
 import type {StreamSubscription} from "./sub_store";
 import type {UserGroupPill, UserGroupPillData} from "./user_group_pill";
+import * as user_groups from "./user_groups";
 import type {UserPill, UserPillData} from "./user_pill";
 import * as user_status from "./user_status";
 import type {UserStatusEmojiInfo} from "./user_status";
@@ -155,7 +156,7 @@ export function render_person(person: UserPillData | UserOrMentionPillData): str
 
 export function render_user_group(user_group: {name: string; description: string}): string {
     return render_typeahead_item({
-        primary: user_group.name,
+        primary: user_groups.get_display_group_name(user_group.name),
         secondary: user_group.description,
         is_user_group: true,
     });
@@ -670,3 +671,11 @@ export function query_matches_name(
 ): boolean {
     return typeahead.query_matches_string_in_order(query, user_group_or_stream.name, " ");
 }
+
+export function query_matches_group_name(query: string, user_group: UserGroupPillData): boolean {
+    return typeahead.query_matches_string_in_order(
+        query,
+        user_groups.get_display_group_name(user_group.name),
+        "",
+    );
+}

web/src/user_group_pill.ts

@@ -22,7 +22,10 @@ export function display_pill(group: UserGroup): string {
     const group_members = get_group_members(group);
     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.length},
+        {
+            group_name: user_groups.get_display_group_name(group.name),
+            group_size: group_members.length,
+        },
     );
 }
 

web/src/user_group_popover.ts

@@ -93,7 +93,7 @@ export function toggle_user_group_info_popover(
                 }
                 user_group_popover_instance = instance;
                 const args = {
-                    group_name: user_groups.get_display_group_name(group),
+                    group_name: user_groups.get_display_group_name(group.name),
                     group_description: group.description,
                     members: sort_group_members(
                         fetch_group_members([...user_groups.get_recursive_group_members(group)]),

web/src/user_groups.ts

@@ -440,7 +440,7 @@ export function get_realm_user_groups_for_dropdown_list_widget(
 
         const display_name = settings_config.system_user_groups_list.find(
             (system_group) => system_group.name === group.name,
-        )!.display_name;
+        )!.dropdown_option_name;
 
         return {
             name: get_display_name_for_system_group_option(setting_name, display_name),
@@ -449,14 +449,14 @@ export function get_realm_user_groups_for_dropdown_list_widget(
     });
 }
 
-// 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;
+export function get_display_group_name(group_name: string): string {
+    const group = settings_config.system_user_groups_list.find(
+        (system_group) => system_group.name === group_name,
+    );
+
+    if (group === undefined) {
+        return group_name;
+    }
+
+    return group.display_name;
 }

web/tests/user_groups.test.js

@@ -528,7 +528,7 @@ run_test("get_realm_user_groups_for_dropdown_list_widget", () => {
 
 run_test("get_display_group_name", () => {
     const admins = {
-        name: "Admins",
+        name: "role:administrators",
         description: "foo",
         id: 1,
         members: new Set([1]),
@@ -542,7 +542,19 @@ run_test("get_display_group_name", () => {
         is_system_group: false,
         direct_subgroup_ids: new Set([1]),
     };
+    const students = {
+        name: "Students",
+        id: 3,
+        members: new Set([1, 3]),
+        is_system_group: false,
+        direct_subgroup_ids: new Set([]),
+    };
 
-    assert.equal(user_groups.get_display_group_name(admins), "Admins");
-    assert.equal(user_groups.get_display_group_name(all), "translated: Everyone");
+    user_groups.initialize({
+        realm_user_groups: [admins, all, students],
+    });
+
+    assert.equal(user_groups.get_display_group_name(admins.name), "translated: Administrators");
+    assert.equal(user_groups.get_display_group_name(all.name), "translated: Everyone");
+    assert.equal(user_groups.get_display_group_name(students.name), "Students");
 });