[Gekidou] Autocomplete Group Member Count (#6460)

* Adds member_count to groups table

* Handles member count

* Adds elipsis

* UX Feedback, 2:1 displayName:name

* Removes space

app/actions/remote/groups.ts

@@ -13,7 +13,7 @@ export const fetchGroupsForAutocomplete = async (serverUrl: string, query: strin
     try {
         const {operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
         const client: Client = NetworkManager.getClient(serverUrl);
-        const response = await client.getGroups(query);
+        const response = await client.getGroups({query, includeMemberCount: true});
 
         return operator.handleGroups({groups: response, prepareRecordsOnly: fetchOnly});
     } catch (error) {
@@ -30,7 +30,7 @@ export const fetchGroupsByNames = async (serverUrl: string, names: string[], fet
         const promises: Array <Promise<Group[]>> = [];
 
         names.forEach((name) => {
-            promises.push(client.getGroups(name));
+            promises.push(client.getGroups({query: name}));
         });
 
         const groups = (await Promise.all(promises)).flat();

app/client/rest/groups.ts

@@ -6,7 +6,7 @@ import {buildQueryString} from '@utils/helpers';
 import {PER_PAGE_DEFAULT} from './constants';
 
 export interface ClientGroupsMix {
-    getGroups: (query?: string, filterAllowReference?: boolean, page?: number, perPage?: number, since?: number) => Promise<Group[]>;
+    getGroups: (params: {query?: string; filterAllowReference?: boolean; page?: number; perPage?: number; since?: number; includeMemberCount?: boolean}) => Promise<Group[]>;
     getAllGroupsAssociatedToChannel: (channelId: string, filterAllowReference?: boolean) => Promise<{groups: Group[]; total_group_count: number}>;
     getAllGroupsAssociatedToMembership: (userId: string, filterAllowReference?: boolean) => Promise<Group[]>;
     getAllGroupsAssociatedToTeam: (teamId: string, filterAllowReference?: boolean) => Promise<{groups: Group[]; total_group_count: number}>;
@@ -16,16 +16,27 @@ export interface ClientGroupsMix {
 }
 
 const ClientGroups = (superclass: any) => class extends superclass {
-    getGroups = async (query = '', filterAllowReference = true, page = 0, perPage = PER_PAGE_DEFAULT, since = 0) => {
+    getGroups = async ({query = '', filterAllowReference = true, page = 0, perPage = PER_PAGE_DEFAULT, since = 0, includeMemberCount = false}) => {
         return this.doFetch(
-            `${this.urlVersion}/groups${buildQueryString({q: query, filter_allow_reference: filterAllowReference, page, per_page: perPage, since})}`,
+            `${this.urlVersion}/groups${buildQueryString({
+                q: query,
+                filter_allow_reference: filterAllowReference,
+                page,
+                per_page: perPage,
+                since,
+                include_member_count: includeMemberCount,
+            })}`,
             {method: 'get'},
         );
     };
 
     getAllGroupsAssociatedToChannel = async (channelId: string, filterAllowReference = false) => {
         return this.doFetch(
-            `${this.urlVersion}/channels/${channelId}/groups${buildQueryString({paginate: false, filter_allow_reference: filterAllowReference})}`,
+            `${this.urlVersion}/channels/${channelId}/groups${buildQueryString({
+                paginate: false,
+                filter_allow_reference: filterAllowReference,
+                include_member_count: true,
+            })}`,
             {method: 'get'},
         );
     };

app/components/autocomplete/at_mention/at_mention.tsx

@@ -319,6 +319,7 @@ const AtMention = ({
                 key={`autocomplete-group-${item.name}`}
                 name={item.name}
                 displayName={item.displayName}
+                memberCount={item.memberCount}
                 onPress={completeMention}
                 testID='autocomplete.group_mention_item'
             />

app/components/autocomplete/at_mention_group/at_mention_group.tsx

@@ -44,21 +44,34 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
         },
         rowDisplayName: {
             color: theme.centerChannelColor,
-            flexShrink: 5,
+            flexShrink: 1,
             ...typography('Body', 200),
         },
         rowName: {
             ...typography('Body', 200),
             color: changeOpacity(theme.centerChannelColor, 0.64),
-            flexShrink: 1,
+            flexShrink: 2,
             marginLeft: 2,
         },
+        rowTag: {
+            ...typography('Heading', 25),
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
+            color: changeOpacity(theme.centerChannelColor, 0.64),
+            marginLeft: 'auto',
+            width: 20,
+            borderRadius: 4,
+            overflow: 'hidden',
+            marginTop: 2,
+            paddingHorizontal: 4,
+            textAlign: 'center',
+        },
     };
 });
 
 type Props = {
     name: string;
     displayName: string;
+    memberCount: number;
     onPress: (handle: string) => void;
     testID?: string;
 }
@@ -67,6 +80,7 @@ const GroupMentionItem = ({
     onPress,
     name,
     displayName,
+    memberCount,
     testID,
 }: Props) => {
     const insets = useSafeAreaInsets();
@@ -100,16 +114,22 @@ const GroupMentionItem = ({
                 <Text
                     style={style.rowDisplayName}
                     testID={`${groupMentionItemTestId}.display_name`}
+                    numberOfLines={1}
                 >
                     {`${displayName} `}
                 </Text>
                 <Text
                     style={style.rowName}
                     testID={`${groupMentionItemTestId}.name`}
+                    numberOfLines={1}
                 >
                     {`@${name}`}
                 </Text>
             </View>
+            <Text
+                numberOfLines={1}
+                style={style.rowTag}
+            >{`${memberCount >= 100 ? '99+' : memberCount}`}</Text>
         </TouchableWithFeedback>
     );
 };