RocketChat · diegolmello · Jun 15, 2021 · Jun 15, 2021
diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -144,7 +144,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.16.2"
+        versionName "4.17.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]

diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
@@ -26,4 +26,14 @@
         <item name="colorPrimaryDark">@color/splashBackground</item>
         <item name="android:navigationBarColor">@color/splashBackground</item>
     </style>
+
+    <!--  https://github.com/facebook/react-native/blob/d1ab03235cb4b93304150878d2b9057ab45bba77/ReactAndroid/src/main/res/views/modal/values/themes.xml#L5  -->
+    <style name="Theme.FullScreenDialog">
+        <item name="android:windowNoTitle">true</item>
+        <item name="android:windowIsFloating">false</item>
+        <item name="android:windowBackground">@android:color/transparent</item>
+        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+    </style>
 </resources>
diff --git a/app/actions/createChannel.js b/app/actions/createChannel.js
@@ -14,9 +14,10 @@ export function createChannelSuccess(data) {
 	};
 }
 
-export function createChannelFailure(err) {
+export function createChannelFailure(err, isTeam) {
 	return {
 		type: types.CREATE_CHANNEL.FAILURE,
-		err
+		err,
+		isTeam
 	};
 }
diff --git a/app/actions/room.js b/app/actions/room.js
@@ -14,11 +14,12 @@ export function unsubscribeRoom(rid) {
 	};
 }
 
-export function leaveRoom(rid, t) {
+export function leaveRoom(roomType, room, selected) {
 	return {
 		type: types.ROOM.LEAVE,
-		rid,
-		t
+		room,
+		roomType,
+		selected
 	};
 }
 

diff --git a/app/constants/messageTypeLoad.js b/app/constants/messageTypeLoad.js
@@ -0,0 +1,5 @@
+export const MESSAGE_TYPE_LOAD_MORE = 'load_more';
+export const MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK = 'load_previous_chunk';
+export const MESSAGE_TYPE_LOAD_NEXT_CHUNK = 'load_next_chunk';
+
+export const MESSAGE_TYPE_ANY_LOAD = [MESSAGE_TYPE_LOAD_MORE, MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK, MESSAGE_TYPE_LOAD_NEXT_CHUNK];
diff --git a/app/constants/settings.js b/app/constants/settings.js
@@ -193,5 +193,8 @@ export default {
 	},
 	Allow_Save_Media_to_Gallery: {
 		type: 'valueAsBoolean'
+	},
+	Accounts_AllowInvisibleStatusOption: {
+		type: 'valueAsString'
 	}
 };
diff --git a/app/containers/ActionSheet/Item.js b/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';
@@ -18,14 +18,22 @@ export const Item = React.memo(({ item, hide, theme }) => {
 			onPress={onPress}
 			style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]}
 			theme={theme}
+			testID={item.testID}
 		>
 			<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 +42,9 @@ Item.propTypes = {
 		title: PropTypes.string,
 		icon: PropTypes.string,
 		danger: PropTypes.bool,
-		onPress: PropTypes.func
+		onPress: PropTypes.func,
+		right: PropTypes.func,
+		testID: PropTypes.string
 	}),
 	hide: PropTypes.func,
 	theme: PropTypes.string

diff --git a/app/containers/ActionSheet/styles.js b/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
 	}
 });
diff --git a/app/containers/List/ListIcon.js b/app/containers/List/ListIcon.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
 import { withTheme } from '../../theme';
+import { ICON_SIZE } from './constants';
 
 const styles = StyleSheet.create({
 	icon: {
@@ -17,13 +18,15 @@ const ListIcon = React.memo(({
 	theme,
 	name,
 	color,
-	style
+	style,
+	testID
 }) => (
 	<View style={[styles.icon, style]}>
 		<CustomIcon
 			name={name}
 			color={color ?? themes[theme].auxiliaryText}
-			size={20}
+			size={ICON_SIZE}
+			testID={testID}
 		/>
 	</View>
 ));
@@ -32,7 +35,8 @@ ListIcon.propTypes = {
 	theme: PropTypes.string,
 	name: PropTypes.string,
 	color: PropTypes.string,
-	style: PropTypes.object
+	style: PropTypes.object,
+	testID: PropTypes.string
 };
 
 ListIcon.displayName = 'List.Icon';

diff --git a/app/containers/List/ListItem.js b/app/containers/List/ListItem.js
@@ -10,8 +10,9 @@ import sharedStyles from '../../views/Styles';
 import { withTheme } from '../../theme';
 import I18n from '../../i18n';
 import { Icon } from '.';
-import { BASE_HEIGHT, PADDING_HORIZONTAL } from './constants';
+import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
 import { withDimensions } from '../../dimensions';
+import { CustomIcon } from '../../lib/Icons';
 
 const styles = StyleSheet.create({
 	container: {
@@ -34,7 +35,15 @@ const styles = StyleSheet.create({
 		flex: 1,
 		justifyContent: 'center'
 	},
+	textAlertContainer: {
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	alertIcon: {
+		paddingLeft: 4
+	},
 	title: {
+		flexShrink: 1,
 		fontSize: 16,
 		...sharedStyles.textRegular
 	},
@@ -50,7 +59,7 @@ const styles = StyleSheet.create({
 });
 
 const Content = React.memo(({
-	title, subtitle, disabled, testID, left, right, color, theme, translateTitle, translateSubtitle, showActionIndicator, fontScale
+	title, subtitle, disabled, testID, left, right, color, theme, translateTitle, translateSubtitle, showActionIndicator, fontScale, alert
 }) => (
 	<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale }]} testID={testID}>
 		{left
@@ -61,7 +70,12 @@ const Content = React.memo(({
 			)
 			: null}
 		<View style={styles.textContainer}>
-			<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>{translateTitle ? I18n.t(title) : title}</Text>
+			<View style={styles.textAlertContainer}>
+				<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>{translateTitle ? I18n.t(title) : title}</Text>
+				{alert ? (
+					<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
+				) : null}
+			</View>
 			{subtitle
 				? <Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{translateSubtitle ? I18n.t(subtitle) : subtitle}</Text>
 				: null
@@ -123,7 +137,8 @@ Content.propTypes = {
 	translateTitle: PropTypes.bool,
 	translateSubtitle: PropTypes.bool,
 	showActionIndicator: PropTypes.bool,
-	fontScale: PropTypes.number
+	fontScale: PropTypes.number,
+	alert: PropTypes.bool
 };
 
 Content.defaultProps = {

diff --git a/app/containers/List/constants.js b/app/containers/List/constants.js
@@ -1,2 +1,3 @@
 export const PADDING_HORIZONTAL = 12;
 export const BASE_HEIGHT = 46;
+export const ICON_SIZE = 20;
diff --git a/app/containers/LoginServices.js b/app/containers/LoginServices.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-	View, StyleSheet, Text, Animated, Easing
+	View, StyleSheet, Text, Animated, Easing, Linking
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -24,6 +24,9 @@ const SERVICE_HEIGHT = 58;
 const BORDER_RADIUS = 2;
 const SERVICES_COLLAPSED_HEIGHT = 174;
 
+const LOGIN_STYPE_POPUP = 'popup';
+const LOGIN_STYPE_REDIRECT = 'redirect';
+
 const styles = StyleSheet.create({
 	serviceButton: {
 		borderRadius: BORDER_RADIUS,
@@ -122,9 +125,9 @@ class LoginServices extends React.PureComponent {
 		const endpoint = 'https://accounts.google.com/o/oauth2/auth';
 		const redirect_uri = `${ server }/_oauth/google?close`;
 		const scope = 'email';
-		const state = this.getOAuthState();
+		const state = this.getOAuthState(LOGIN_STYPE_REDIRECT);
 		const params = `?client_id=${ clientId }&redirect_uri=${ redirect_uri }&scope=${ scope }&state=${ state }&response_type=code`;
-		this.openOAuth({ url: `${ endpoint }${ params }` });
+		Linking.openURL(`${ endpoint }${ params }`);
 	}
 
 	onPressLinkedin = () => {
@@ -219,9 +222,16 @@ class LoginServices extends React.PureComponent {
 		}
 	}
 
-	getOAuthState = () => {
+	getOAuthState = (loginStyle = LOGIN_STYPE_POPUP) => {
 		const credentialToken = random(43);
-		return Base64.encodeURI(JSON.stringify({ loginStyle: 'popup', credentialToken, isCordova: true }));
+		let obj = { loginStyle, credentialToken, isCordova: true };
+		if (loginStyle === LOGIN_STYPE_REDIRECT) {
+			obj = {
+				...obj,
+				redirectUrl: 'rocketchat://auth'
+			};
+		}
+		return Base64.encodeURI(JSON.stringify(obj));
 	}
 
 	openOAuth = ({ url, ssoToken, authType = 'oauth' }) => {

diff --git a/app/containers/RoomHeader/index.js b/app/containers/RoomHeader/index.js
@@ -32,7 +32,7 @@ class RoomHeaderContainer extends Component {
 
 	shouldComponentUpdate(nextProps) {
 		const {
-			type, title, subtitle, status, statusText, connecting, connected, onPress, usersTyping, width, height
+			type, title, subtitle, status, statusText, connecting, connected, onPress, usersTyping, width, height, teamMain
 		} = this.props;
 		if (nextProps.type !== type) {
 			return true;
@@ -67,6 +67,9 @@ class RoomHeaderContainer extends Component {
 		if (nextProps.onPress !== onPress) {
 			return true;
 		}
+		if (nextProps.teamMain !== teamMain) {
+			return true;
+		}
 		return false;
 	}
 

diff --git a/app/containers/RoomTypeIcon.js b/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' : '' }`;

diff --git a/app/containers/markdown/Link.js b/app/containers/markdown/Link.js
@@ -4,19 +4,18 @@ import { Text, Clipboard } from 'react-native';
 
 import styles from './styles';
 import { themes } from '../../constants/colors';
-import openLink from '../../utils/openLink';
 import { LISTENER } from '../Toast';
 import EventEmitter from '../../utils/events';
 import I18n from '../../i18n';
 
 const Link = React.memo(({
-	children, link, theme
+	children, link, theme, onLinkPress
 }) => {
 	const handlePress = () => {
-		if (!link) {
+		if (!link || !onLinkPress) {
 			return;
 		}
-		openLink(link, theme);
+		onLinkPress(link);
 	};
 
 	const childLength = React.Children.toArray(children).filter(o => o).length;
@@ -40,7 +39,8 @@ const Link = React.memo(({
 Link.propTypes = {
 	children: PropTypes.node,
 	link: PropTypes.string,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	onLinkPress: PropTypes.func
 };
 
 export default Link;
diff --git a/app/containers/markdown/index.js b/app/containers/markdown/index.js
@@ -82,7 +82,8 @@ class Markdown extends PureComponent {
 		preview: PropTypes.bool,
 		theme: PropTypes.string,
 		testID: PropTypes.string,
-		style: PropTypes.array
+		style: PropTypes.array,
+		onLinkPress: PropTypes.func
 	};
 
 	constructor(props) {
@@ -218,11 +219,12 @@ class Markdown extends PureComponent {
 	};
 
 	renderLink = ({ children, href }) => {
-		const { theme } = this.props;
+		const { theme, onLinkPress } = this.props;
 		return (
 			<MarkdownLink
 				link={href}
 				theme={theme}
+				onLinkPress={onLinkPress}
 			>
 				{children}
 			</MarkdownLink>

diff --git a/app/containers/message/Content.js b/app/containers/message/Content.js
@@ -45,7 +45,7 @@ const Content = React.memo((props) => {
 	} else if (props.isEncrypted) {
 		content = <Text style={[styles.textInfo, { color: themes[props.theme].auxiliaryText }]}>{I18n.t('Encrypted_message')}</Text>;
 	} else {
-		const { baseUrl, user } = useContext(MessageContext);
+		const { baseUrl, user, onLinkPress } = useContext(MessageContext);
 		content = (
 			<Markdown
 				msg={props.msg}
@@ -61,6 +61,7 @@ const Content = React.memo((props) => {
 				tmid={props.tmid}
 				useRealName={props.useRealName}
 				theme={props.theme}
+				onLinkPress={onLinkPress}
 			/>
 		);
 	}