chore: Merge 4.57.0 into master (#6107)

CONTRIBUTING.md

@@ -4,10 +4,10 @@ Great to have you here! Here are a few ways you can help make this project bette
 
 ## Setting up a development environment
 
-Refer to [React Native environment setup](https://reactnative.dev/docs/environment-setup) to make sure everything is up and running.
-Follow the `React Native CLI Quickstart` section as we don't support Expo managed flow.
+Refer to [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment) to make sure everything is up and running.
 
 *Note: you'll need a MacOS to run iOS apps*
+*Note: We don't support Expo managed flow*
 
 ### How to run
 
@@ -78,7 +78,8 @@ We use [Jest](https://jestjs.io/) and [Storybook](https://storybook.js.org/) on
 
 Storybook is a tool for developing UI Components and has some plugins to make Jest generate snapshots of them.
 
-[On the root of the project](https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/develop/index.js#L24), comment everything leaving only the last import to Storybook left  and refresh your project.
+To open the Storybook, run yarn `storybook:start`, and then use `yarn android` or `yarn ios` to launch it on your desired platform.
+
 You'll see some tests like this:
 
 <img src="https://user-images.githubusercontent.com/804994/89677725-56393200-d8c4-11ea-84b0-213be1d24e98.png" width="350" />
@@ -103,8 +104,6 @@ We use [Detox](https://github.com/wix/Detox) framework to end-to-end test our ap
 
 As soon as your changes are ready, you can open a Pull Request.
 
-The title of your PR should be descriptive, including either [NEW], [IMPROVEMENT] or [FIX] at the beginning, e.g. [FIX] App crashing on startup.
-
-You may share working results prior to finishing, please include [WIP] in the title. This way anyone can look at your code: you can ask for help within the PR if you don't know how to solve a problem.
+Refer to [Pull request's tags](https://developer.rocket.chat/docs/pull-requests-tags) to write a good PR title.
 
-Your PR is automatically inspected by various tools, check their response and try to improve your code accordingly. Requests that fail to build or have wrong coding style won't be merged.
+Open your PR as draft before asking for review. Your PR is automatically inspected by various tools, check their response and try to improve your code accordingly. Requests that fail to build or have wrong coding style won't be merged.

android/app/src/main/res/values/styles.xml

@@ -2,7 +2,6 @@
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <item name="android:colorEdgeEffect">#aaaaaa</item>
         <item name="colorPrimaryDark">@color/splashBackground</item>
-        <item name="android:navigationBarColor">@color/splashBackground</item>
         <item name="android:forceDarkAllowed">false</item>
         <!-- RN 0.68.2 -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item> 

app/AppContainer.tsx

@@ -17,6 +17,7 @@ import MasterDetailStack from './stacks/MasterDetailStack';
 import ShareExtensionStack from './stacks/ShareExtensionStack';
 import { ThemeContext } from './theme';
 import { setCurrentScreen } from './lib/methods/helpers/log';
+import { themes } from './lib/constants';
 
 const createStackNavigator = createNativeStackNavigator;
 
@@ -59,7 +60,7 @@ const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: bool
 				}
 				Navigation.routeNameRef.current = currentRouteName;
 			}}>
-			<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none' }}>
+			<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none', navigationBarColor: themes[theme].surfaceLight }}>
 				{root === RootEnum.ROOT_LOADING || root === RootEnum.ROOT_LOADING_SHARE_EXTENSION ? (
 					<Stack.Screen name='AuthLoading' component={AuthLoadingView} />
 				) : null}

app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx

@@ -12,24 +12,25 @@ import { useActionSheet } from '../Provider';
 
 const styles = StyleSheet.create({
 	subtitleText: {
-		fontSize: 14,
 		...sharedStyles.textRegular,
-		marginBottom: 10
+		fontSize: 16,
+		lineHeight: 24
 	},
 	buttonSeparator: {
-		marginRight: 8
+		marginRight: 12
 	},
 	footerButtonsContainer: {
 		flexDirection: 'row',
 		paddingTop: 16
 	},
 	titleContainerText: {
+		...sharedStyles.textBold,
 		fontSize: 16,
-		...sharedStyles.textSemibold
+		lineHeight: 24
 	},
 	titleContainer: {
 		paddingRight: 80,
-		marginBottom: 16,
+		marginBottom: 12,
 		flexDirection: 'row',
 		alignItems: 'center'
 	}
@@ -53,8 +54,8 @@ const FooterButtons = ({
 					styles.buttonSeparator,
 					{ flex: 1, backgroundColor: cancelBackgroundColor || colors.buttonBackgroundSecondaryDefault }
 				]}
-				color={colors.backdropColor}
 				title={cancelTitle}
+				color={colors.buttonFontSecondary}
 				onPress={cancelAction}
 				testID={`${testID}-cancel`}
 			/>
@@ -120,7 +121,6 @@ const ActionSheetContentWithInputAndSubmit = ({
 				<FormTextInput
 					key={inputConfig.key}
 					value={inputValues[index]}
-					placeholder={inputConfig.placeholder}
 					onChangeText={value => handleInputChange(value, index)}
 					onSubmitEditing={() => {
 						if (index < inputs.length - 1) {
@@ -143,17 +143,18 @@ const ActionSheetContentWithInputAndSubmit = ({
 		return (
 			<FormTextInput
 				value={inputValues[0]}
-				placeholder={placeholder}
 				onChangeText={value => handleInputChange(value, 0)}
 				onSubmitEditing={() => {
 					setTimeout(() => {
 						hideActionSheet();
 					}, 100);
 					if (inputValues[0]) onSubmit(inputValues[0]);
 				}}
+				accessibilityLabel={placeholder}
 				testID={`${testID}-input`}
 				secureTextEntry={secureTextEntry}
 				bottomSheet={isIOS}
+				containerStyle={{ marginTop: 12, marginBottom: 36 }}
 			/>
 		);
 	};
@@ -164,9 +165,9 @@ const ActionSheetContentWithInputAndSubmit = ({
 	return (
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<>
-				<View style={styles.titleContainer}>
+				<View accessible accessibilityLabel={title} style={styles.titleContainer}>
 					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
-					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>{title}</Text>
+					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 12 : 0 }]}>{title}</Text>
 				</View>
 				{description ? <Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</Text> : null}
 				{customText}

app/containers/Avatar/Avatar.tsx

@@ -4,10 +4,12 @@ import FastImage from 'react-native-fast-image';
 import Touchable from 'react-native-platform-touchable';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
+import Emoji from '../markdown/components/emoji/Emoji';
 import { getAvatarURL } from '../../lib/methods/helpers/getAvatarUrl';
 import { SubscriptionType } from '../../definitions';
-import Emoji from '../markdown/Emoji';
 import { IAvatar } from './interfaces';
+import MarkdownContext from '../markdown/contexts/MarkdownContext';
+import I18n from '../../i18n';
 
 const Avatar = React.memo(
 	({
@@ -31,12 +33,14 @@ const Avatar = React.memo(
 		type = SubscriptionType.DIRECT,
 		avatarExternalProviderUrl,
 		roomAvatarExternalProviderUrl,
-		cdnPrefix
+		cdnPrefix,
+		accessibilityLabel
 	}: IAvatar) => {
 		if ((!text && !avatar && !emoji && !rid) || !server) {
 			return null;
 		}
 
+		const avatarAccessibilityLabel = accessibilityLabel ?? I18n.t('Avatar_Photo', { username: text });
 		const avatarStyle = {
 			width: size,
 			height: size,
@@ -45,7 +49,14 @@ const Avatar = React.memo(
 
 		let image;
 		if (emoji) {
-			image = <Emoji getCustomEmoji={getCustomEmoji} isMessageContainsOnlyEmoji literal={emoji} style={avatarStyle} />;
+			image = (
+				<MarkdownContext.Provider
+					value={{
+						getCustomEmoji
+					}}>
+					<Emoji block={{ type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: emoji }, shortCode: emoji }} style={avatarStyle} />
+				</MarkdownContext.Provider>
+			);
 		} else {
 			let uri = avatar;
 			if (!isStatic) {
@@ -80,11 +91,19 @@ const Avatar = React.memo(
 		}
 
 		if (onPress) {
-			image = <Touchable onPress={onPress}>{image}</Touchable>;
+			image = (
+				<Touchable accessibilityLabel={avatarAccessibilityLabel} onPress={onPress}>
+					{image}
+				</Touchable>
+			);
 		}
 
 		return (
-			<View style={[avatarStyle, style]} testID='avatar'>
+			<View
+				accessible
+				accessibilityLabel={!onPress ? avatarAccessibilityLabel : undefined}
+				style={[avatarStyle, style]}
+				testID='avatar'>
 				{image}
 				{children}
 			</View>

app/containers/Avatar/AvatarContainer.tsx

@@ -19,7 +19,8 @@ const AvatarContainer = ({
 	onPress,
 	getCustomEmoji,
 	isStatic,
-	rid
+	rid,
+	accessibilityLabel
 }: IAvatar): React.ReactElement => {
 	const server = useSelector((state: IApplicationState) => state.server.server);
 	const serverVersion = useSelector((state: IApplicationState) => state.server.version);
@@ -66,6 +67,7 @@ const AvatarContainer = ({
 			avatarETag={avatarETag}
 			serverVersion={serverVersion}
 			cdnPrefix={cdnPrefix}
+			accessibilityLabel={accessibilityLabel}
 		/>
 	);
 };

app/containers/Avatar/AvatarWithEdit.tsx

@@ -13,7 +13,7 @@ import sharedStyles from '../../views/Styles';
 
 const styles = StyleSheet.create({
 	editAvatarButton: {
-		marginTop: 8,
+		marginTop: 16,
 		paddingVertical: 8,
 		paddingHorizontal: 12,
 		marginBottom: 0,
@@ -67,6 +67,7 @@ const AvatarWithEdit = ({
 			/>
 			{handleEdit && serverVersion && compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.6.0') ? (
 				<Button
+					accessibilityLabel={I18n.t('Edit_Room_Photo')}
 					title={I18n.t('Edit')}
 					type='secondary'
 					onPress={handleEdit}

app/containers/Avatar/interfaces.ts

@@ -25,4 +25,5 @@ export interface IAvatar {
 	avatarExternalProviderUrl?: string;
 	roomAvatarExternalProviderUrl?: string;
 	cdnPrefix?: string;
+	accessibilityLabel?: string;
 }

app/containers/Check.tsx

@@ -8,8 +8,7 @@ import { useTheme } from '../theme';
 const styles = StyleSheet.create({
 	icon: {
 		width: 22,
-		height: 22,
-		marginHorizontal: 15
+		height: 22
 	}
 });
 

app/containers/CollapsibleText/index.tsx

@@ -3,8 +3,8 @@ import { TextStyle, Text, StyleSheet } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
 import { useTheme } from '../../theme';
-import { previewFormatText } from '../markdown/previewFormatText';
 import I18n from '../../i18n';
+import { previewFormatText } from '../../lib/helpers/previewFormatText';
 
 interface ICollapsibleText {
 	msg?: string;
@@ -67,15 +67,13 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 				} else {
 					setShowTruncated(false);
 				}
-			}}
-		>
+			}}>
 			{m}
 			{truncatedText ? (
 				<Text
 					testID='collapsible-text-show-less'
 					onPress={() => setShowTruncated(true)}
-					style={[styles.textInfo, { color: colors.fontHint }]}
-				>
+					style={[styles.textInfo, { color: colors.fontHint }]}>
 					{` ${I18n.t('Show_less')}`}
 				</Text>
 			) : null}

app/containers/MessageComposer/MessageComposer.tsx

@@ -71,7 +71,8 @@ export const MessageComposer = ({
 		closeEmojiKeyboard,
 		closeSearchEmojiKeyboard,
 		setTrackingViewHeight,
-		setAlsoSendThreadToChannel
+		setAlsoSendThreadToChannel,
+		setAutocompleteParams
 	} = useMessageComposerApi();
 	const recordingAudio = useRecordingAudio();
 	useKeyboardListener(trackingViewRef);
@@ -147,6 +148,9 @@ export const MessageComposer = ({
 			}
 		}
 
+		// Hide autocomplete
+		setAutocompleteParams({ text: '', type: null, params: '' });
+
 		// Text message
 		onSendMessage?.(textFromInput, alsoSendThreadToChannel);
 	};