RocketChat · diegolmello · Sep 28, 2022 · Jul 18, 2022 · Jul 20, 2022 · Jul 20, 2022
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -156,22 +156,6 @@ module.exports = {
 		__DEV__: true
 	},
 	overrides: [
-		{
-			files: ['e2e/**'],
-			globals: {
-				by: true,
-				detox: true,
-				device: true,
-				element: true,
-				expect: true,
-				waitFor: true
-			},
-			rules: {
-				'import/no-extraneous-dependencies': 0,
-				'no-await-in-loop': 0,
-				'no-restricted-syntax': 0
-			}
-		},
 		{
 			files: ['**/*.ts', '**/*.tsx'],
 			extends: [
@@ -253,6 +237,23 @@ module.exports = {
 					}
 				}
 			}
+		},
+		{
+			files: ['e2e/**'],
+			globals: {
+				by: true,
+				detox: true,
+				device: true,
+				element: true,
+				waitFor: true
+			},
+			rules: {
+				'import/no-extraneous-dependencies': 0,
+				'no-await-in-loop': 0,
+				'no-restricted-syntax': 0,
+				// TODO: remove this rule when update Detox to 20 and test if the namespace Detox is available
+				'no-undef': 1
+			}
 		}
 	]
 };
diff --git a/.gitignore b/.gitignore
@@ -66,5 +66,6 @@ artifacts
 e2e/docker/rc_test_env/docker-compose.yml
 e2e/docker/data/db
 e2e/e2e_account.js
+e2e/e2e_account.ts
 
 *.p8
diff --git a/__tests__/containers/List/__snapshots__/List.stories.storyshot b/__tests__/containers/List/__snapshots__/List.stories.storyshot
diff --git a/__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot b/__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\",\\"top\\":14},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;
+exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\",\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\",\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":2,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\"},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;
diff --git a/__tests__/containers/TextInput/__snapshots__/TextInput.stories.storyshot b/__tests__/containers/TextInput/__snapshots__/TextInput.stories.storyshot
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -147,7 +147,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.30.0"
+        versionName "4.31.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]

diff --git a/android/app/src/play/java/chat/rocket/reactnative/CustomPushNotification.java b/android/app/src/play/java/chat/rocket/reactnative/CustomPushNotification.java
@@ -1,5 +1,7 @@
 package chat.rocket.reactnative;
 
+import static com.wix.reactnativenotifications.Defs.NOTIFICATION_RECEIVED_EVENT_NAME;
+
 import android.app.Notification;
 import android.app.NotificationChannel;
 import android.app.NotificationManager;
@@ -35,8 +37,6 @@
 import java.util.Map;
 import java.util.concurrent.ExecutionException;
 
-import static com.wix.reactnativenotifications.Defs.NOTIFICATION_RECEIVED_EVENT_NAME;
-
 public class CustomPushNotification extends PushNotification {
     public static ReactApplicationContext reactApplicationContext;
     final NotificationManager notificationManager;
@@ -322,7 +322,12 @@ private void notificationReply(Notification.Builder notification, int notificati
         replyIntent.setAction(KEY_REPLY);
         replyIntent.putExtra("pushNotification", bundle);
 
-        PendingIntent replyPendingIntent = PendingIntent.getBroadcast(mContext, notificationId, replyIntent, PendingIntent.FLAG_UPDATE_CURRENT);
+        PendingIntent replyPendingIntent;
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+            replyPendingIntent = PendingIntent.getBroadcast(mContext, notificationId, replyIntent, PendingIntent.FLAG_UPDATE_CURRENT | PendingIntent.FLAG_MUTABLE);
+        } else {
+            replyPendingIntent = PendingIntent.getBroadcast(mContext, notificationId, replyIntent, PendingIntent.FLAG_UPDATE_CURRENT);
+        }
 
         RemoteInput remoteInput = new RemoteInput.Builder(KEY_REPLY)
                 .setLabel(label)
@@ -343,7 +348,7 @@ private void notificationDismiss(Notification.Builder notification, int notifica
         Intent intent = new Intent(mContext, DismissNotification.class);
         intent.putExtra(NOTIFICATION_ID, notificationId);
 
-        PendingIntent dismissPendingIntent = PendingIntent.getBroadcast(mContext, notificationId, intent, 0);
+        PendingIntent dismissPendingIntent = PendingIntent.getBroadcast(mContext, notificationId, intent, PendingIntent.FLAG_ONE_SHOT | PendingIntent.FLAG_IMMUTABLE);
 
         notification.setDeleteIntent(dismissPendingIntent);
     }

diff --git a/android/build.gradle b/android/build.gradle
@@ -13,8 +13,7 @@ buildscript {
         buildToolsVersion = "31.0.0"
         minSdkVersion = 23
         compileSdkVersion = 31
-        // TODO: Fix "android:exported" issue and target 31 again
-        targetSdkVersion = 30
+        targetSdkVersion = 31
         if (System.properties['os.arch'] == "aarch64") {
             // For M1 Users we need to use the NDK 24 which added support for aarch64
             ndkVersion = "24.0.8215888"
@@ -27,8 +26,8 @@ buildscript {
         kotlinVersion = '1.6.10'
         supportLibVersion = "28.0.0"
         libre_build = !(isPlay.toBoolean())
-        jitsi_url = isPlay ? "https://github.com/RocketChat/jitsi-maven-repository/raw/master/releases" : "https://github.com/RocketChat/jitsi-maven-repository/raw/libre/releases"
-        jitsi_version = isPlay ? "3.6.0" : "3.6.0-libre"
+        jitsi_url = "https://github.com/RocketChat/jitsi-maven-repository/raw/master/releases"
+        jitsi_version = "3.7.0"
     }
 
     repositories {

diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx
@@ -9,7 +9,7 @@ import { PADDING_HORIZONTAL } from './constants';
 
 const styles = StyleSheet.create({
 	container: {
-		paddingBottom: 12,
+		paddingVertical: 8,
 		paddingHorizontal: PADDING_HORIZONTAL
 	},
 	title: {

diff --git a/app/containers/List/ListSection.tsx b/app/containers/List/ListSection.tsx
@@ -5,7 +5,7 @@ import { Header } from '.';
 
 const styles = StyleSheet.create({
 	container: {
-		marginVertical: 16
+		marginBottom: 16
 	}
 });
 

diff --git a/app/containers/List/styles.ts b/app/containers/List/styles.ts
@@ -2,6 +2,6 @@ import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
 	contentContainerStyleFlatList: {
-		paddingVertical: 32
+		paddingVertical: 16
 	}
 });
diff --git a/app/containers/SearchBox/index.tsx b/app/containers/SearchBox/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { StyleSheet, TextInputProps, View } from 'react-native';
 
+import { useTheme } from '../../theme';
 import I18n from '../../i18n';
 import { FormTextInput } from '../TextInput';
 
@@ -14,13 +15,15 @@ const styles = StyleSheet.create({
 const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): JSX.Element => {
 	const [text, setText] = useState('');
 
+	const { colors } = useTheme();
+
 	const internalOnChangeText = useCallback(value => {
 		setText(value);
 		onChangeText?.(value);
 	}, []);
 
 	return (
-		<View testID='searchbox'>
+		<View testID='searchbox' style={{ backgroundColor: colors.backgroundColor }}>
 			<FormTextInput
 				autoCapitalize='none'
 				autoCorrect={false}

diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
 		height: 48,
 		fontSize: 16,
 		padding: 14,
-		borderWidth: StyleSheet.hairlineWidth,
+		borderWidth: 2,
 		borderRadius: 2
 	},
 	inputIconLeft: {
@@ -37,11 +37,11 @@ const styles = StyleSheet.create({
 		paddingRight: 45
 	},
 	wrap: {
-		position: 'relative'
+		position: 'relative',
+		justifyContent: 'center'
 	},
 	iconContainer: {
-		position: 'absolute',
-		top: 14
+		position: 'absolute'
 	},
 	iconLeft: {
 		left: 15
@@ -98,7 +98,7 @@ export const FormTextInput = ({
 					style={[
 						styles.input,
 						iconLeft && styles.inputIconLeft,
-						(secureTextEntry || iconRight) && styles.inputIconRight,
+						(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
 						{
 							backgroundColor: colors.backgroundColor,
 							borderColor: colors.separatorColor,

diff --git a/app/containers/TextInput/TextInput.stories.tsx b/app/containers/TextInput/TextInput.stories.tsx
@@ -27,3 +27,44 @@ export const ShortAndLong = () => (
 		</View>
 	</>
 );
+export const Icons = () => (
+	<>
+		<View style={styles.paddingHorizontal}>
+			<FormTextInput label='Right icon' placeholder='placeholder' value={item.name} iconRight={'close'} />
+			<FormTextInput label='Left icon' placeholder='placeholder' value={item.longText} iconLeft={'mail'} />
+			<FormTextInput label='Both icons' placeholder='placeholder' value={item.longText} iconLeft={'mail'} iconRight={'add'} />
+			<FormTextInput
+				label='Icon and touchable clear input'
+				placeholder='placeholder'
+				value={item.longText}
+				onClearInput={() => {}}
+			/>
+		</View>
+	</>
+);
+
+export const Multiline = () => (
+	<>
+		<View style={styles.paddingHorizontal}>
+			<FormTextInput label='Multiline text' placeholder='placeholder' multiline value={`${item.name}\n\n${item.longText}\n`} />
+		</View>
+	</>
+);
+
+export const SecureTextEntry = () => (
+	<>
+		<View style={styles.paddingHorizontal}>
+			<FormTextInput label='Secure text disabled' placeholder='placeholder' value={item.name} />
+			<FormTextInput label='Secure text enabled' placeholder='placeholder' value={item.name} secureTextEntry />
+		</View>
+	</>
+);
+
+export const Loading = () => (
+	<>
+		<View style={styles.paddingHorizontal}>
+			<FormTextInput label='Loading false' placeholder='placeholder' value={item.name} loading={false} />
+			<FormTextInput label='Loading true' placeholder='placeholder' value={item.name} loading />
+		</View>
+	</>
+);
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 	input: {
 		height: 48,
 		paddingLeft: 16,
-		borderWidth: StyleSheet.hairlineWidth,
+		borderWidth: 2,
 		borderRadius: 2,
 		alignItems: 'center',
 		flexDirection: 'row'

diff --git a/app/containers/UIKit/MultiSelect/styles.ts b/app/containers/UIKit/MultiSelect/styles.ts
@@ -35,7 +35,7 @@ export default StyleSheet.create({
 		minHeight: 48,
 		paddingHorizontal: 8,
 		paddingBottom: 0,
-		borderWidth: StyleSheet.hairlineWidth,
+		borderWidth: 2,
 		borderRadius: 2,
 		alignItems: 'center',
 		flexDirection: 'row'

diff --git a/app/containers/UIKit/Select.tsx b/app/containers/UIKit/Select.tsx
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 	viewContainer: {
 		marginBottom: 16,
 		paddingHorizontal: 16,
-		borderWidth: StyleSheet.hairlineWidth,
+		borderWidth: 2,
 		borderRadius: 2,
 		justifyContent: 'center'
 	},

diff --git a/app/containers/message/Attachments.tsx b/app/containers/message/Attachments.tsx
@@ -57,7 +57,7 @@ const AttachedActions = ({ attachment }: { attachment: IAttachment }) => {
 };
 
 const Attachments: React.FC<IMessageAttachments> = React.memo(
-	({ attachments, timeFormat, showAttachment, style, getCustomEmoji, isReply }: IMessageAttachments) => {
+	({ attachments, timeFormat, showAttachment, style, getCustomEmoji, isReply, id }: IMessageAttachments) => {
 		const { theme } = useTheme();
 
 		if (!attachments || attachments.length === 0) {
@@ -80,7 +80,15 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
 
 			if (file && file.audio_url) {
 				return (
-					<Audio key={file.audio_url} file={file} getCustomEmoji={getCustomEmoji} isReply={isReply} style={style} theme={theme} />
+					<Audio
+						key={file.audio_url}
+						file={file}
+						getCustomEmoji={getCustomEmoji}
+						isReply={isReply}
+						style={style}
+						theme={theme}
+						messageId={id}
+					/>
 				);
 			}
 
@@ -106,7 +114,7 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
 				);
 			}
 
-			return <Reply key={index} index={index} attachment={file} timeFormat={timeFormat} getCustomEmoji={getCustomEmoji} />;
+			return <Reply key={index} index={index} attachment={file} timeFormat={timeFormat} getCustomEmoji={getCustomEmoji} messageId={id} />;
 		});
 		return <>{attachmentsElements}</>;
 	},

diff --git a/app/containers/message/Audio.tsx b/app/containers/message/Audio.tsx
@@ -36,6 +36,7 @@ interface IMessageAudioProps {
 	theme: TSupportedThemes;
 	getCustomEmoji: TGetCustomEmoji;
 	scale?: number;
+	messageId: string;
 }
 
 interface IMessageAudioState {
@@ -128,7 +129,7 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 	}
 
 	async componentDidMount() {
-		const { file } = this.props;
+		const { file, messageId } = this.props;
 		const { baseUrl, user } = this.context;
 
 		let url = file.audio_url;
@@ -139,7 +140,7 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 		this.setState({ loading: true });
 		try {
 			if (url) {
-				const audio = await downloadAudioFile(`${url}?rc_uid=${user.id}&rc_token=${user.token}`, url);
+				const audio = await downloadAudioFile(`${url}?rc_uid=${user.id}&rc_token=${user.token}`, url, messageId);
 				await this.sound.loadAsync({ uri: audio });
 			}
 		} catch {

diff --git a/app/containers/message/Reply.tsx b/app/containers/message/Reply.tsx
@@ -90,6 +90,7 @@ interface IMessageReply {
 	timeFormat?: string;
 	index: number;
 	getCustomEmoji: TGetCustomEmoji;
+	messageId: string;
 }
 
 const Title = React.memo(
@@ -201,7 +202,7 @@ const Fields = React.memo(
 );
 
 const Reply = React.memo(
-	({ attachment, timeFormat, index, getCustomEmoji }: IMessageReply) => {
+	({ attachment, timeFormat, index, getCustomEmoji, messageId }: IMessageReply) => {
 		const [loading, setLoading] = useState(false);
 		const { theme } = useTheme();
 		const { baseUrl, user, jumpToMessage } = useContext(MessageContext);
@@ -256,6 +257,7 @@ const Reply = React.memo(
 							timeFormat={timeFormat}
 							style={[{ color: themes[theme].auxiliaryTintColor, fontSize: 14, marginBottom: 8 }]}
 							isReply
+							id={messageId}
 						/>
 						<UrlImage image={attachment.thumb_url} />
 						<Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />

diff --git a/app/containers/message/interfaces.ts b/app/containers/message/interfaces.ts
@@ -14,6 +14,7 @@ export interface IMessageAttachments {
 	isReply?: boolean;
 	showAttachment?: (file: IAttachment) => void;
 	getCustomEmoji: TGetCustomEmoji;
+	id: string;
 }
 
 export interface IMessageAvatar {

diff --git a/app/definitions/IProfile.ts b/app/definitions/IProfile.ts
@@ -1,7 +1,8 @@
 import React from 'react';
 
 export interface IProfileParams {
-	name: string;
+	realname?: string;
+	name?: string;
 	username: string;
 	email: string | null;
 	newPassword: string;

diff --git a/app/definitions/IUser.ts b/app/definitions/IUser.ts
@@ -110,7 +110,7 @@ export interface INotificationPreferences {
 	enableMessageParserEarlyAdoption: boolean;
 	desktopNotifications: TNotifications;
 	pushNotifications: TNotifications;
-	emailNotificationMode?: 'mentions' | 'nothing';
+	emailNotificationMode: 'mentions' | 'nothing';
 	language?: string;
 }