[NEW] Add/Create/Remove channel on a team

app/containers/ActionSheet/Item.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
@@ -20,12 +20,19 @@ export const Item = React.memo(({ item, hide, theme }) => {
 			theme={theme}
 		>
 			<CustomIcon name={item.icon} size={20} color={item.danger ? themes[theme].dangerColor : themes[theme].bodyText} />
-			<Text
-				numberOfLines={1}
-				style={[styles.title, { color: item.danger ? themes[theme].dangerColor : themes[theme].bodyText }]}
-			>
-				{item.title}
-			</Text>
+			<View style={styles.titleContainer}>
+				<Text
+					numberOfLines={1}
+					style={[styles.title, { color: item.danger ? themes[theme].dangerColor : themes[theme].bodyText }]}
+				>
+					{item.title}
+				</Text>
+			</View>
+			{ item.right ? (
+				<View style={styles.rightContainer}>
+					{item.right ? item.right() : null}
+				</View>
+			) : null }
 		</Button>
 	);
 });
@@ -34,7 +41,8 @@ Item.propTypes = {
 		title: PropTypes.string,
 		icon: PropTypes.string,
 		danger: PropTypes.bool,
-		onPress: PropTypes.func
+		onPress: PropTypes.func,
+		right: PropTypes.func
 	}),
 	hide: PropTypes.func,
 	theme: PropTypes.string

app/containers/ActionSheet/styles.js

@@ -22,6 +22,9 @@ export default StyleSheet.create({
 	content: {
 		paddingTop: 16
 	},
+	titleContainer: {
+		flex: 1
+	},
 	title: {
 		fontSize: 16,
 		marginLeft: 16,
@@ -58,5 +61,8 @@ export default StyleSheet.create({
 		fontSize: 16,
 		...sharedStyles.textMedium,
 		...sharedStyles.textAlignCenter
+	},
+	rightContainer: {
+		paddingLeft: 12
 	}
 });

app/containers/RoomTypeIcon.js

@@ -30,6 +30,7 @@ const RoomTypeIcon = React.memo(({
 		return <Status style={[iconStyle, { color: STATUS_COLORS[status] ?? STATUS_COLORS.offline }]} size={size} status={status} />;
 	}
 
+	// TODO: move this to a separate function
 	let icon = 'channel-private';
 	if (teamMain) {
 		icon = `teams${ type === 'p' ? '-private' : '' }`;

app/i18n/locales/en.json

@@ -435,6 +435,7 @@
   "Review_app_unable_store": "Unable to open {{store}}",
   "Review_this_app": "Review this app",
   "Remove": "Remove",
+  "remove": "remove",
   "Roles": "Roles",
   "Room_actions": "Room actions",
   "Room_changed_announcement": "Room announcement changed to: {{announcement}} by {{userBy}}",
@@ -716,5 +717,14 @@
   "Read_Only_Team": "Read Only Team",
   "Broadcast_Team": "Broadcast Team",
   "creating_team": "creating team",
-  "team-name-already-exists": "A team with that name already exists"
-}
+  "team-name-already-exists": "A team with that name already exists",
+  "Add_Channel_to_Team": "Add Channel to Team",
+  "Create_New": "Create New",
+  "Add_Existing": "Add Existing",
+  "Add_Existing_Channel": "Add Existing Channel",
+  "Remove_from_Team": "Remove from Team",
+  "Auto-join": "Auto-join",
+  "Delete_Team_Room_Warning": "Woud you like to remove this channel from the team? The channel will be moved back to the workspace",
+  "Confirmation": "Confirmation",
+  "invalid-room": "Invalid room"
+}

app/lib/methods/getPermissions.js

@@ -13,6 +13,7 @@ const PERMISSIONS = [
 	'add-user-to-any-c-room',
 	'add-user-to-any-p-room',
 	'add-user-to-joined-room',
+	'add-team-channel',
 	'archive-room',
 	'auto-translate',
 	'create-invite-links',
@@ -21,11 +22,13 @@ const PERMISSIONS = [
 	'delete-p',
 	'edit-message',
 	'edit-room',
+	'edit-team-channel',
 	'force-delete-message',
 	'mute-user',
 	'pin-message',
 	'post-readonly',
 	'remove-user',
+	'remove-team-channel',
 	'set-leader',
 	'set-moderator',
 	'set-owner',
@@ -38,7 +41,9 @@ const PERMISSIONS = [
 	'view-privileged-setting',
 	'view-room-administration',
 	'view-statistics',
-	'view-user-administration'
+	'view-user-administration',
+	'view-all-teams',
+	'view-all-team-channels'
 ];
 
 export async function setPermissions() {

app/lib/rocketchat.js

@@ -95,10 +95,19 @@ const RocketChat = {
 	},
 	canOpenRoom,
 	createChannel({
-		name, users, type, readOnly, broadcast, encrypted
+		name, users, type, readOnly, broadcast, encrypted, teamId
 	}) {
-		// RC 0.51.0
-		return this.methodCallWrapper(type ? 'createPrivateGroup' : 'createChannel', name, users, readOnly, {}, { broadcast, encrypted });
+		const params = {
+			name,
+			members: users,
+			readOnly,
+			extraData: {
+				broadcast,
+				encrypted,
+				...(teamId && { teamId })
+			}
+		};
+		return this.post(type ? 'groups.create' : 'channels.create', params);
 	},
 	async getWebsocketInfo({ server }) {
 		const sdk = new RocketchatClient({ host: server, protocol: 'ddp', useSsl: useSsl(server) });
@@ -648,7 +657,8 @@ const RocketChat = {
 			avatarETag: sub.avatarETag,
 			t: sub.t,
 			encrypted: sub.encrypted,
-			lastMessage: sub.lastMessage
+			lastMessage: sub.lastMessage,
+			...(sub.teamId && { teamId: sub.teamId })
 		}));
 
 		return data;
@@ -751,6 +761,18 @@ const RocketChat = {
 		// RC 3.13.0
 		return this.post('teams.create', params);
 	},
+	addRoomsToTeam({ teamId, rooms }) {
+		// RC 3.13.0
+		return this.post('teams.addRooms', { teamId, rooms });
+	},
+	removeTeamRoom({ roomId, teamId }) {
+		// RC 3.13.0
+		return this.post('teams.removeRoom', { roomId, teamId });
+	},
+	updateTeamRoom({ roomId, isDefault }) {
+		// RC 3.13.0
+		return this.post('teams.updateRoom', { roomId, isDefault });
+	},
 	joinRoom(roomId, joinCode, type) {
 		// TODO: join code
 		// RC 0.48.0

app/presentation/RoomItem/RoomItem.js

@@ -10,6 +10,8 @@ import LastMessage from './LastMessage';
 import Title from './Title';
 import UpdatedAt from './UpdatedAt';
 import Touchable from './Touchable';
+import Tag from './Tag';
+import I18n from '../../i18n';
 
 const RoomItem = ({
 	rid,
@@ -42,13 +44,16 @@ const RoomItem = ({
 	testID,
 	swipeEnabled,
 	onPress,
+	onLongPress,
 	toggleFav,
 	toggleRead,
 	hideChannel,
-	teamMain
+	teamMain,
+	autoJoin
 }) => (
 	<Touchable
 		onPress={onPress}
+		onLongPress={onLongPress}
 		width={width}
 		favorite={favorite}
 		toggleFav={toggleFav}
@@ -88,6 +93,9 @@ const RoomItem = ({
 								hideUnreadStatus={hideUnreadStatus}
 								alert={alert}
 							/>
+							{
+								autoJoin ? <Tag name={I18n.t('Auto-join')} /> : null
+							}
 							<UpdatedAt
 								date={date}
 								theme={theme}
@@ -132,6 +140,9 @@ const RoomItem = ({
 							hideUnreadStatus={hideUnreadStatus}
 							alert={alert}
 						/>
+						{
+							autoJoin ? <Tag name={I18n.t('Auto-join')} /> : null
+						}
 						<UnreadBadge
 							unread={unread}
 							userMentions={userMentions}
@@ -181,7 +192,9 @@ RoomItem.propTypes = {
 	toggleFav: PropTypes.func,
 	toggleRead: PropTypes.func,
 	onPress: PropTypes.func,
-	hideChannel: PropTypes.func
+	onLongPress: PropTypes.func,
+	hideChannel: PropTypes.func,
+	autoJoin: PropTypes.bool
 };
 
 RoomItem.defaultProps = {

app/presentation/RoomItem/Tag.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { themes } from '../../constants/colors';
+import { useTheme } from '../../theme';
+import styles from './styles';
+
+const Tag = React.memo(({ name }) => {
+	const { theme } = useTheme();
+
+	return (
+		<View style={[styles.tagContainer, { backgroundColor: themes[theme].borderColor }]}>
+			<Text
+				style={[
+					styles.tagText, { color: themes[theme].infoText }
+				]}
+				numberOfLines={1}
+			>
+				{name}
+			</Text>
+		</View>
+	);
+});
+
+Tag.propTypes = {
+	name: PropTypes.string
+};
+
+export default Tag;