[NEW] Add Teams to Directory (#3181)

* Added Teams to DirectoryView

* Fix icon

* Minor tweaks

* add tests

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/i18n/locales/en.json

@@ -332,6 +332,7 @@
   "My_servers": "My servers",
   "N_people_reacted": "{{n}} people reacted",
   "N_users": "{{n}} users",
+  "N_channels": "{{n}} channels",
   "name": "name",
   "Name": "Name",
   "Navigation_history": "Navigation history",

app/lib/rocketchat.js

@@ -798,6 +798,10 @@ const RocketChat = {
 		// RC 3.13.0
 		return this.sdk.get('teams.listRoomsOfUser', { teamId, userId });
 	},
+	getTeamInfo({ teamId }) {
+		// RC 3.13.0
+		return this.sdk.get('teams.info', { teamId });
+	},
 	convertChannelToTeam({ rid, name, type }) {
 		const params = {
 			...(type === 'c'

app/presentation/DirectoryItem/index.js

@@ -18,7 +18,7 @@ const DirectoryItemLabel = React.memo(({ text, theme }) => {
 });
 
 const DirectoryItem = ({
-	title, description, avatar, onPress, testID, style, rightLabel, type, rid, theme
+	title, description, avatar, onPress, testID, style, rightLabel, type, rid, theme, teamMain
 }) => (
 	<Touch
 		onPress={onPress}
@@ -36,7 +36,7 @@ const DirectoryItem = ({
 			/>
 			<View style={styles.directoryItemTextContainer}>
 				<View style={styles.directoryItemTextTitle}>
-					<RoomTypeIcon type={type} theme={theme} />
+					<RoomTypeIcon type={type} teamMain={teamMain} theme={theme} />
 					<Text style={[styles.directoryItemName, { color: themes[theme].titleText }]} numberOfLines={1}>{title}</Text>
 				</View>
 				{ description ? <Text style={[styles.directoryItemUsername, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{description}</Text> : null }
@@ -56,7 +56,8 @@ DirectoryItem.propTypes = {
 	style: PropTypes.any,
 	rightLabel: PropTypes.string,
 	rid: PropTypes.string,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	teamMain: PropTypes.bool
 };
 
 DirectoryItemLabel.propTypes = {

app/views/DirectoryView/Options.js

@@ -64,6 +64,11 @@ export default class DirectoryOptions extends PureComponent {
 			icon = 'channel-public';
 		}
 
+		if (itemType === 'teams') {
+			text = 'Teams';
+			icon = 'teams';
+		}
+
 		return (
 			<Touch
 				onPress={() => changeType(itemType)}
@@ -105,6 +110,7 @@ export default class DirectoryOptions extends PureComponent {
 					</Touch>
 					{this.renderItem('channels')}
 					{this.renderItem('users')}
+					{this.renderItem('teams')}
 					{isFederationEnabled
 						? (
 							<>

app/views/DirectoryView/index.js

@@ -121,6 +121,8 @@ class DirectoryView extends React.Component {
 			logEvent(events.DIRECTORY_SEARCH_USERS);
 		} else if (type === 'channels') {
 			logEvent(events.DIRECTORY_SEARCH_CHANNELS);
+		} else if (type === 'teams') {
+			logEvent(events.DIRECTORY_SEARCH_TEAMS);
 		}
 	}
 
@@ -149,17 +151,34 @@ class DirectoryView extends React.Component {
 			if (result.success) {
 				this.goRoom({ rid: result.room._id, name: item.username, t: 'd' });
 			}
-		} else {
+		} else if (['p', 'c'].includes(item.t) && !item.teamMain) {
 			const { room } = await RocketChat.getRoomInfo(item._id);
 			this.goRoom({
 				rid: item._id, name: item.name, joinCodeRequired: room.joinCodeRequired, t: 'c', search: true
 			});
+		} else {
+			this.goRoom({
+				rid: item._id, name: item.name, t: item.t, search: true, teamMain: item.teamMain, teamId: item.teamId
+			});
 		}
 	}
 
 	renderHeader = () => {
 		const { type } = this.state;
 		const { theme } = this.props;
+		let text = 'Users';
+		let icon = 'user';
+
+		if (type === 'channels') {
+			text = 'Channels';
+			icon = 'channel-public';
+		}
+
+		if (type === 'teams') {
+			text = 'Teams';
+			icon = 'teams';
+		}
+
 		return (
 			<>
 				<SearchBox
@@ -174,8 +193,8 @@ class DirectoryView extends React.Component {
 					theme={theme}
 				>
 					<View style={[sharedStyles.separatorVertical, styles.toggleDropdownContainer, { borderColor: themes[theme].separatorColor }]}>
-						<CustomIcon style={[styles.toggleDropdownIcon, { color: themes[theme].tintColor }]} size={20} name={type === 'users' ? 'user' : 'channel-public'} />
+						<CustomIcon style={[styles.toggleDropdownIcon, { color: themes[theme].tintColor }]} size={20} name={icon} />
-						<Text style={[styles.toggleDropdownText, { color: themes[theme].tintColor }]}>{type === 'users' ? I18n.t('Users') : I18n.t('Channels')}</Text>
+						<Text style={[styles.toggleDropdownText, { color: themes[theme].tintColor }]}>{I18n.t(text)}</Text>
 						<CustomIcon name='chevron-down' size={20} style={[styles.toggleDropdownArrow, { color: themes[theme].auxiliaryTintColor }]} />
 					</View>
 				</Touch>
@@ -217,12 +236,25 @@ class DirectoryView extends React.Component {
 				/>
 			);
 		}
+
+		if (type === 'teams') {
+			return (
+				<DirectoryItem
+					avatar={item.name}
+					description={item.name}
+					rightLabel={I18n.t('N_channels', { n: item.roomsCount })}
+					type={item.t}
+					teamMain={item.teamMain}
+					{...commonProps}
+				/>
+			);
+		}
 		return (
 			<DirectoryItem
 				avatar={item.name}
 				description={item.topic}
 				rightLabel={I18n.t('N_users', { n: item.usersCount })}
-				type='c'
+				type={item.t}
 				{...commonProps}
 			/>
 		);

e2e/tests/assorted/09-joinfromdirectory.spec.js

@@ -32,16 +32,24 @@ describe('Join room from directory', () => {
 			await navigateToRoom(data.channels.detoxpublic.name);
 		})
 
-		it('should back and tap directory', async() => {
+		it('should search user and navigate', async() => {
 			await tapBack();
 			await element(by.id('rooms-list-view-directory')).tap();	
-		})
+			await waitFor(element(by.id('directory-view'))).toExist().withTimeout(2000);
-
-		it('should search user and navigate', async() => {
 			await element(by.id('directory-view-dropdown')).tap();	
 			await element(by.label('Users')).tap();
 			await element(by.label('Search by')).tap();	
 			await navigateToRoom(data.users.alternate.username);
 		})
+
+		it('should search user and navigate', async() => {
+			await tapBack();
+			await element(by.id('rooms-list-view-directory')).tap();
+			await waitFor(element(by.id('directory-view'))).toExist().withTimeout(2000);
+			await element(by.id('directory-view-dropdown')).tap();	
+			await element(by.label('Teams')).tap();
+			await element(by.label('Search by')).tap();	
+			await navigateToRoom(data.teams.private.name);
+		})
 	});
 });