user_group: Show display_name instead of name for direct subgroups.

For a system group, we were showing it's name, e.g. `role:members` when
we want to show it's display_name instead i.e `Members` in the user
group popover.

Fixes https://chat.zulip.org/#narrow/channel/9-issues/topic/system.20group.20subgroup.20display.20in.20group.20popovers/near/1986632

web/src/user_groups.ts

@@ -375,6 +375,13 @@ export function get_direct_subgroups_of_group(target_user_group: UserGroup): Use
     return direct_subgroups;
 }
 
+export function convert_name_to_display_name_for_groups(user_groups: UserGroup[]): UserGroup[] {
+    return user_groups.map((user_group) => ({
+        ...user_group,
+        name: get_display_group_name(user_group.name),
+    }));
+}
+
 export function is_user_in_group(
     user_group_id: number,
     user_id: number,