[MM-60405] Crossteam search

app/components/team_list/index.test.tsx

@@ -0,0 +1,61 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {fireEvent, renderWithEverything} from '@test/intl-test-helper';
+import TestHelper from '@test/test_helper';
+
+import TeamList from './index';
+
+import type Database from '@nozbe/watermelondb/Database';
+import type TeamModel from '@typings/database/models/servers/team';
+
+describe('TeamList', () => {
+    let database: Database;
+    beforeAll(async () => {
+        const server = await TestHelper.setupServerDatabase();
+        database = server.database;
+    });
+    const teams = [
+        {id: 'team1', displayName: 'Team 1'} as TeamModel,
+        {id: 'team2', displayName: 'Team 2'} as TeamModel,
+    ];
+
+    it('should call onPress when a team is pressed', () => {
+        const onPress = jest.fn();
+        const {getByText} = renderWithEverything(
+            <TeamList
+                teams={teams}
+                onPress={onPress}
+            />,
+            {database},
+        );
+        fireEvent.press(getByText('Team 1'));
+        expect(onPress).toHaveBeenCalledWith('team1');
+    });
+
+    it('should render loading component when loading is true', () => {
+        const {getByTestId} = renderWithEverything(
+            <TeamList
+                teams={teams}
+                onPress={jest.fn()}
+                loading={true}
+            />,
+            {database},
+        );
+        expect(getByTestId('team_list.loading')).toBeTruthy();
+    });
+
+    it('should render separator after the first item when separatorAfterFirstItem is true', () => {
+        const {getByTestId} = renderWithEverything(
+            <TeamList
+                teams={teams}
+                onPress={jest.fn()}
+                separatorAfterFirstItem={true}
+            />,
+            {database},
+        );
+        expect(getByTestId('team_list.separator')).toBeTruthy();
+    });
+});

app/components/team_list/index.tsx

@@ -3,10 +3,12 @@
 
 import {BottomSheetFlatList} from '@gorhom/bottom-sheet';
 import React, {useCallback, useMemo} from 'react';
-import {type ListRenderItemInfo, StyleSheet, View} from 'react-native';
+import {type ListRenderItemInfo, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler'; // Keep the FlatList from gesture handler so it works well with bottom sheet
 
 import Loading from '@components/loading';
+import {useTheme} from '@context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 import TeamListItem from './team_list_item';
 
@@ -23,15 +25,23 @@ type Props = {
     testID?: string;
     textColor?: string;
     type?: BottomSheetList;
+    hideIcon?: boolean;
+    separatorAfterFirstItem?: boolean;
 }
 
-const styles = StyleSheet.create({
-    container: {
-        flexGrow: 1,
-    },
-    contentContainer: {
-        marginBottom: 4,
-    },
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return {
+        container: {
+            flexGrow: 1,
+        },
+        contentContainer: {
+            marginBottom: 4,
+        },
+        separator: {
+            height: 1,
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
+        },
+    };
 });
 
 const keyExtractor = (item: TeamModel) => item.id;
@@ -47,25 +57,40 @@ export default function TeamList({
     testID,
     textColor,
     type = 'FlatList',
+    hideIcon = false,
+    separatorAfterFirstItem = false,
 }: Props) {
     const List = useMemo(() => (type === 'FlatList' ? FlatList : BottomSheetFlatList), [type]);
+    const theme = useTheme();
+    const styles = getStyleSheet(theme);
 
-    const renderTeam = useCallback(({item: t}: ListRenderItemInfo<Team|TeamModel>) => {
-        return (
+    const renderTeam = useCallback(({item: t, index: i}: ListRenderItemInfo<Team|TeamModel>) => {
+        let teamListItem = (
             <TeamListItem
                 onPress={onPress}
                 team={t}
                 textColor={textColor}
                 iconBackgroundColor={iconBackgroundColor}
                 iconTextColor={iconTextColor}
                 selectedTeamId={selectedTeamId}
+                hideIcon={hideIcon}
             />
         );
-    }, [textColor, iconTextColor, iconBackgroundColor, onPress, selectedTeamId]);
+        if (separatorAfterFirstItem && i === 0) {
+            teamListItem = (<>
+                {teamListItem}
+                <View
+                    style={styles.separator}
+                    testID='team_list.separator'
+                />
+            </>);
+        }
+        return teamListItem;
+    }, [textColor, iconTextColor, iconBackgroundColor, onPress, selectedTeamId, hideIcon, separatorAfterFirstItem, styles.separator]);
 
     let footer;
     if (loading) {
-        footer = (<Loading/>);
+        footer = (<Loading testID='team_list.loading'/>);
     }
 
     return (

app/components/team_list/team_list_item/team_list_item.test.tsx

@@ -0,0 +1,57 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {renderWithIntlAndTheme, fireEvent} from '@test/intl-test-helper';
+
+import TeamListItem from './team_list_item';
+
+import type TeamModel from '@typings/database/models/servers/team';
+
+describe('TeamListItem', () => {
+    const team = {
+        id: 'team_id',
+        displayName: 'Team Display Name',
+        lastTeamIconUpdatedAt: 0,
+    } as TeamModel;
+    const iconTestId = `team_sidebar.team_list.team_list_item.${team.id}.team_icon`;
+
+    it('should call onPress when pressed', () => {
+        const onPressMock = jest.fn();
+        const {getByText} = renderWithIntlAndTheme(
+            <TeamListItem
+                team={team}
+                onPress={onPressMock}
+            />,
+        );
+
+        fireEvent.press(getByText('Team Display Name'));
+
+        expect(onPressMock).toHaveBeenCalledWith('team_id');
+    });
+
+    it('should render TeamIcon when hideIcon is false', () => {
+        const {getByTestId} = renderWithIntlAndTheme(
+            <TeamListItem
+                team={team}
+                onPress={jest.fn()}
+                hideIcon={false}
+            />,
+        );
+
+        expect(getByTestId(iconTestId)).toBeTruthy();
+    });
+
+    it('should not render TeamIcon when hideIcon is true', () => {
+        const {queryByTestId} = renderWithIntlAndTheme(
+            <TeamListItem
+                team={team}
+                onPress={jest.fn()}
+                hideIcon={true}
+            />,
+        );
+
+        expect(queryByTestId(iconTestId)).toBeNull();
+    });
+});

app/components/team_list/team_list_item/team_list_item.tsx

@@ -20,6 +20,7 @@ type Props = {
     iconBackgroundColor?: string;
     selectedTeamId?: string;
     onPress: (teamId: string) => void;
+    hideIcon?: boolean;
 }
 
 export const ITEM_HEIGHT = 56;
@@ -50,7 +51,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     };
 });
 
-export default function TeamListItem({team, textColor, iconTextColor, iconBackgroundColor, selectedTeamId, onPress}: Props) {
+export default function TeamListItem({team, textColor, iconTextColor, iconBackgroundColor, selectedTeamId, onPress, hideIcon}: Props) {
     const theme = useTheme();
     const styles = getStyleSheet(theme);
 
@@ -68,17 +69,19 @@ export default function TeamListItem({team, textColor, iconTextColor, iconBackgr
             type='opacity'
             style={styles.touchable}
         >
-            <View style={styles.icon_container}>
-                <TeamIcon
-                    id={team.id}
-                    displayName={displayName}
-                    lastIconUpdate={lastTeamIconUpdateAt}
-                    selected={false}
-                    textColor={iconTextColor || theme.centerChannelColor}
-                    backgroundColor={iconBackgroundColor || changeOpacity(theme.centerChannelColor, 0.16)}
-                    testID={`${teamListItemTestId}.team_icon`}
-                />
-            </View>
+            {!hideIcon &&
+                <View style={styles.icon_container}>
+                    <TeamIcon
+                        id={team.id}
+                        displayName={displayName}
+                        lastIconUpdate={lastTeamIconUpdateAt}
+                        selected={false}
+                        textColor={iconTextColor || theme.centerChannelColor}
+                        backgroundColor={iconBackgroundColor || changeOpacity(theme.centerChannelColor, 0.16)}
+                        testID={`${teamListItemTestId}.team_icon`}
+                    />
+                </View>
+            }
             <Text
                 style={[styles.text, Boolean(textColor) && {color: textColor}]}
                 numberOfLines={1}

app/constants/index.ts

@@ -35,6 +35,7 @@ import ServerErrors from './server_errors';
 import SnackBar from './snack_bar';
 import Sso from './sso';
 import SupportedServer from './supported_server';
+import Team from './team';
 import Tutorial from './tutorial';
 import View from './view';
 import WebsocketEvents from './websocket';
@@ -74,6 +75,7 @@ export {
     SnackBar,
     Sso,
     SupportedServer,
+    Team,
     Tutorial,
     View,
     WebsocketEvents,

app/constants/team.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export const ALL_TEAMS_ID = '';
+
+export default {
+    ALL_TEAMS_ID,
+};

app/screens/home/search/bottom_sheet_team_list.tsx

@@ -1,9 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
+import {useIntl} from 'react-intl';
 
 import TeamList from '@components/team_list';
+import {ALL_TEAMS_ID} from '@constants/team';
 import {useIsTablet} from '@hooks/device';
 import BottomSheetContent from '@screens/bottom_sheet/content';
 import {dismissBottomSheet} from '@screens/navigation';
@@ -15,9 +17,11 @@ type Props = {
     teamId: string;
     setTeamId: (teamId: string) => void;
     title: string;
+    crossTeamSearchEnabled: boolean;
 }
 
-export default function BottomSheetTeamList({teams, title, setTeamId, teamId}: Props) {
+export default function BottomSheetTeamList({teams, title, setTeamId, teamId, crossTeamSearchEnabled}: Props) {
+    const intl = useIntl();
     const isTablet = useIsTablet();
     const showTitle = !isTablet && Boolean(teams.length);
 
@@ -26,6 +30,14 @@ export default function BottomSheetTeamList({teams, title, setTeamId, teamId}: P
         dismissBottomSheet();
     }, [setTeamId]);
 
+    const teamList = useMemo(() => {
+        const list = [...teams];
+        if (crossTeamSearchEnabled) {
+            list.unshift({id: ALL_TEAMS_ID, displayName: intl.formatMessage({id: 'mobile.search.team.all_teams', defaultMessage: 'All teams'})} as TeamModel);
+        }
+        return list;
+    }, [teams, crossTeamSearchEnabled, intl]);
+
     return (
         <BottomSheetContent
             showButton={false}
@@ -35,10 +47,12 @@ export default function BottomSheetTeamList({teams, title, setTeamId, teamId}: P
         >
             <TeamList
                 selectedTeamId={teamId}
-                teams={teams}
+                teams={teamList}
                 onPress={onPress}
                 testID='search.select_team_slide_up.team_list'
                 type={isTablet ? 'FlatList' : 'BottomSheetFlatList'}
+                hideIcon={true}
+                separatorAfterFirstItem={crossTeamSearchEnabled}
             />
         </BottomSheetContent>
     );

app/screens/home/search/index.tsx

@@ -4,7 +4,7 @@
 import {withDatabase, withObservables} from '@nozbe/watermelondb/react';
 import compose from 'lodash/fp/compose';
 
-import {observeCurrentTeamId} from '@queries/servers/system';
+import {observeConfigBooleanValue, observeCurrentTeamId} from '@queries/servers/system';
 import {queryJoinedTeams} from '@queries/servers/team';
 
 import SearchScreen from './search';
@@ -16,6 +16,7 @@ const enhance = withObservables([], ({database}: WithDatabaseArgs) => {
     return {
         teamId: currentTeamId,
         teams: queryJoinedTeams(database).observe(),
+        crossTeamSearchEnabled: observeConfigBooleanValue(database, 'FeatureFlagExperimentalCrossTeamSearch'),
     };
 });
 

app/screens/home/search/initial/index.tsx

@@ -5,6 +5,7 @@ import compose from 'lodash/fp/compose';
 import {of as of$} from 'rxjs';
 import {switchMap, distinctUntilChanged} from 'rxjs/operators';
 
+import {observeConfigBooleanValue} from '@queries/servers/system';
 import {observeTeam, queryTeamSearchHistoryByTeamId} from '@queries/servers/team';
 
 import Initial from './initial';
@@ -22,6 +23,7 @@ const enhance = withObservables(['teamId'], ({database, teamId}: EnhanceProps) =
             switchMap((t) => of$(t?.displayName || '')),
             distinctUntilChanged(),
         ),
+        crossTeamSearchEnabled: observeConfigBooleanValue(database, 'FeatureFlagExperimentalCrossTeamSearch'),
     };
 });