MM-44122, MM-54124: Group Info/Mentions bottom sheet and invite group members to channel

app/actions/remote/groups.ts

@@ -36,7 +36,7 @@ export const fetchGroupsForAutocomplete = async (serverUrl: string, query: strin
     }
 };
 
-export const fetchGroupsByNames = async (serverUrl: string, names: string[], fetchOnly = false) => {
+export const fetchGroupsByNames = async (serverUrl: string, names: string[], fetchOnly = false, includeMemberCount = false) => {
     try {
         const {operator, database} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
         const license = await getLicense(database);
@@ -48,7 +48,7 @@ export const fetchGroupsByNames = async (serverUrl: string, names: string[], fet
         const promises: Array <Promise<Group[]>> = [];
 
         names.forEach((name) => {
-            promises.push(client.getGroups({query: name}));
+            promises.push(client.getGroups({query: name, includeMemberCount}));
         });
 
         const groups = (await Promise.all(promises)).flat();

app/actions/remote/user.ts

@@ -522,6 +522,32 @@ export const fetchProfiles = async (serverUrl: string, page = 0, perPage: number
     }
 };
 
+export const fetchProfilesInGroup = async (serverUrl: string, groupId: string, page = 0, perPage: number = General.PROFILE_CHUNK_SIZE, sort = '', options: any = {}, fetchOnly = false) => {
+    try {
+        const client = NetworkManager.getClient(serverUrl);
+        const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
+
+        const users = await client.getProfilesInGroup(groupId, {page, per_page: perPage, sort, ...options});
+
+        if (!fetchOnly) {
+            const currentUserId = await getCurrentUserId(database);
+            const toStore = removeUserFromList(currentUserId, users);
+            if (toStore.length) {
+                await operator.handleUsers({
+                    users: toStore,
+                    prepareRecordsOnly: false,
+                });
+            }
+        }
+
+        return {users};
+    } catch (error) {
+        logDebug('error on fetchProfilesInGroup', getFullErrorMessage(error));
+        forceLogoutIfNecessary(serverUrl, error);
+        return {error};
+    }
+};
+
 export const fetchProfilesInTeam = async (serverUrl: string, teamId: string, page = 0, perPage: number = General.PROFILE_CHUNK_SIZE, sort = '', options: any = {}, fetchOnly = false) => {
     try {
         const client = NetworkManager.getClient(serverUrl);

app/client/rest/users.ts

@@ -27,6 +27,7 @@ export interface ClientUsersMix {
     getProfilesNotInTeam: (teamId: string, groupConstrained: boolean, page?: number, perPage?: number) => Promise<UserProfile[]>;
     getProfilesWithoutTeam: (page?: number, perPage?: number, options?: Record<string, any>) => Promise<UserProfile[]>;
     getProfilesInChannel: (channelId: string, options?: GetUsersOptions) => Promise<UserProfile[]>;
+    getProfilesInGroup: (groupId: string, options?: GetUsersOptions) => Promise<UserProfile[]>;
     getProfilesInGroupChannels: (channelsIds: string[]) => Promise<{[x: string]: UserProfile[]}>;
     getProfilesNotInChannel: (teamId: string, channelId: string, groupConstrained: boolean, page?: number, perPage?: number) => Promise<UserProfile[]>;
     getMe: () => Promise<UserProfile>;
@@ -262,6 +263,16 @@ const ClientUsers = <TBase extends Constructor<ClientBase>>(superclass: TBase) =
         );
     };
 
+    getProfilesInGroup = async (groupId: string, options: GetUsersOptions = {page: 0, per_page: PER_PAGE_DEFAULT}) => {
+        this.analytics?.trackAPI('api_profiles_get_in_group', {in_group: groupId});
+
+        const queryStringObj = {in_group: groupId, ...options};
+        return this.doFetch(
+            `${this.getUsersRoute()}${buildQueryString(queryStringObj)}`,
+            {method: 'get'},
+        );
+    };
+
     getProfilesInGroupChannels = async (channelsIds: string[]) => {
         this.analytics?.trackAPI('api_profiles_get_in_group_channels', {channelsIds});
 

app/components/autocomplete/at_mention_item/index.tsx

@@ -27,6 +27,7 @@ const AtMentionItem = ({
             user={user}
             testID={testID}
             onUserPress={completeMention}
+            padding={0}
         />
     );
 };

app/components/markdown/at_mention/at_mention.tsx

@@ -106,6 +106,20 @@ const AtMention = ({
         openAsBottomSheet({screen, title, theme, closeButtonId, props});
     };
 
+    const openGroupInfo = () => {
+        if (!group?.name) {
+            return;
+        }
+
+        const screen = Screens.GROUP_INFO;
+        const title = intl.formatMessage({id: 'mobile.routes.group_info', defaultMessage: 'Profile'});
+        const closeButtonId = 'close-group-info';
+        const props = {closeButtonId, location, groupName: group.name};
+
+        Keyboard.dismiss();
+        openAsBottomSheet({screen, title, theme, closeButtonId, props});
+    };
+
     const handleLongPress = useCallback(() => {
         if (managedConfig?.copyAndPasteProtection !== 'true') {
             const renderContent = () => {
@@ -154,7 +168,6 @@ const AtMention = ({
     const mentionTextStyle: StyleProp<TextStyle> = [];
 
     let backgroundColor;
-    let canPress = false;
     let highlighted;
     let isMention = false;
     let mention;
@@ -174,12 +187,12 @@ const AtMention = ({
         highlighted = userMentionKeys.some((item) => item.key.includes(user.username));
         mention = displayUsername(user, user.locale, teammateNameDisplay);
         isMention = true;
-        canPress = true;
+        onPress = openUserProfile;
     } else if (group?.name) {
         mention = group.name;
         highlighted = groupMemberships.some((gm) => gm.groupId === group.id);
         isMention = true;
-        canPress = false;
+        onPress = openGroupInfo;
     } else {
         const pattern = new RegExp(/\b(all|channel|here)(?:\.\B|_\b|\b)/, 'i');
         const mentionMatch = pattern.exec(mentionName);
@@ -194,9 +207,9 @@ const AtMention = ({
         }
     }
 
-    if (canPress) {
+    if (onPress) {
         onLongPress = handleLongPress;
-        onPress = (isSearchResult ? onPostPress : openUserProfile);
+        onPress = isSearchResult ? onPostPress : onPress;
     }
 
     if (suffix) {

app/components/post_list/post/body/acknowledgements/users_list/user_list_item.tsx

@@ -66,7 +66,7 @@ const UserListItem = ({
 
     return (
         <UserItem
-            FooterComponent={
+            footer={
                 <FormattedRelativeTime
                     value={userAcknowledgement}
                     timezone={timezone}
@@ -75,7 +75,7 @@ const UserListItem = ({
             }
             containerStyle={style.container}
             onUserPress={handleUserPress}
-            size={40}
+            spacing={'spacious'}
             user={user}
         />
     );

app/components/search/index.tsx

@@ -4,9 +4,22 @@
 /* eslint-disable react/prop-types */
 // We disable the prop types check here as forwardRef & typescript has a bug
 
+import {useBottomSheet} from '@gorhom/bottom-sheet';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {type ActivityIndicatorProps, Keyboard, Platform, type StyleProp, TextInput, type TextInputProps, type TextStyle, type TouchableOpacityProps, type ViewStyle} from 'react-native';
+import {
+    type ActivityIndicatorProps,
+    Keyboard,
+    Platform,
+    type StyleProp,
+    TextInput,
+    type TextInputProps,
+    type TextStyle,
+    type TouchableOpacityProps,
+    type ViewStyle,
+    type NativeSyntheticEvent,
+    type TextInputFocusEventData,
+} from 'react-native';
 import {SearchBar} from 'react-native-elements';
 
 import CompassIcon from '@components/compass_icon';
@@ -192,3 +205,32 @@ const Search = forwardRef<SearchRef, SearchProps>((props: SearchProps, ref) => {
 Search.displayName = 'SeachBar';
 
 export default Search;
+
+/**
+ * Auto expand bottom sheet on-focus
+ */
+export const BottomSheetSearch = ({onFocus, ...props}: SearchProps) => {
+    const {expand} = useBottomSheet();
+
+    const handleOnFocus = useCallback((event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        expand();
+        onFocus?.(event);
+    }, [onFocus, expand]);
+
+    return (
+        <Search
+            onFocus={handleOnFocus}
+            {...props}
+        />
+    );
+};
+
+export const useSearchTerm = () => {
+    const [term, setTerm] = useState('');
+
+    const clear = useCallback(() => {
+        setTerm('');
+    }, []);
+
+    return [term, setTerm, {clear}] as const;
+};

app/components/selected_users/index.tsx

@@ -15,6 +15,8 @@ import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 import SelectedUser from './selected_user';
 
+import type {GroupModel} from '@app/database/models/server';
+
 type Props = {
 
     /**
@@ -45,7 +47,7 @@ type Props = {
     /**
      * An object mapping user ids to a falsey value indicating whether or not they have been selected.
      */
-    selectedIds: {[id: string]: UserProfile};
+    selectedIds: {[id: string]: UserProfile | Group | GroupModel | false};
 
     /**
      * callback to set the value of showToast
@@ -163,28 +165,28 @@ export default function SelectedUsers({
 
     const users = useMemo(() => {
         const u = [];
-        for (const id of Object.keys(selectedIds)) {
-            if (!selectedIds[id]) {
+        for (const [id, item] of Object.entries(selectedIds)) {
+            if (!item) {
                 continue;
             }
 
-            u.push(
-                <SelectedUser
-                    key={id}
-                    user={selectedIds[id]}
-                    teammateNameDisplay={teammateNameDisplay}
-                    onRemove={onRemove}
-                    testID={`${testID}.selected_user`}
-                />,
-            );
+            if ('username' in item) {
+                u.push(
+                    <SelectedUser
+                        key={id}
+                        user={item}
+                        teammateNameDisplay={teammateNameDisplay}
+                        onRemove={onRemove}
+                        testID={`${testID}.selected_user`}
+                    />,
+                );
+            }
         }
         return u;
     }, [selectedIds, teammateNameDisplay, onRemove]);
 
     const totalPanelHeight = useDerivedValue(() => (
-        isVisible ?
-            usersChipsHeight.value + SCROLL_MARGIN_BOTTOM + SCROLL_MARGIN_TOP + BUTTON_HEIGHT :
-            0
+        isVisible ? usersChipsHeight.value + SCROLL_MARGIN_BOTTOM + SCROLL_MARGIN_TOP + BUTTON_HEIGHT : 0
     ), [isVisible]);
 
     const handlePress = useCallback(() => {