Merge branch 'develop' into feat.new-audio-player

app/containers/CustomIcon/mappedIcons.js

@@ -1,5 +1,9 @@
 export const mappedIcons = {
+	'arrow-forward': 59841,
 	'status-disabled': 59837,
+	'arrow-right': 59838,
+	'text-format': 59839,
+	'code-block': 59840,
 	'lamp-bulb': 59836,
 	'phone-in': 59835,
 	'basketball': 59776,

app/containers/HeaderButton/HeaderButtonItem.tsx

@@ -39,10 +39,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Item = ({ title, iconName, onPress, testID, badge, color, ...props }: IHeaderButtonItem): React.ReactElement => {
+const Item = ({ title, iconName, onPress, testID, badge, color, disabled, ...props }: IHeaderButtonItem): React.ReactElement => {
 	const { colors } = useTheme();
 	return (
-		<PlatformPressable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
+		<PlatformPressable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} disabled={disabled} style={styles.container}>
 			<>
 				{iconName ? (
 					<CustomIcon name={iconName} size={24} color={color || colors.headerTintColor} {...props} />

app/containers/MessageActions/index.tsx

@@ -17,7 +17,7 @@ import Header, { HEADER_HEIGHT, IHeader } from './Header';
 import events from '../../lib/methods/helpers/log/events';
 import { IApplicationState, IEmoji, ILoggedUser, TAnyMessageModel, TSubscriptionModel } from '../../definitions';
 import { getPermalinkMessage } from '../../lib/methods';
-import { getRoomTitle, getUidDirectMessage, hasPermission } from '../../lib/methods/helpers';
+import { compareServerVersion, getRoomTitle, getUidDirectMessage, hasPermission } from '../../lib/methods/helpers';
 import { Services } from '../../lib/services';
 
 export interface IMessageActionsProps {
@@ -30,6 +30,7 @@ export interface IMessageActionsProps {
 	replyInit: (message: TAnyMessageModel, mention: boolean) => void;
 	isMasterDetail: boolean;
 	isReadOnly: boolean;
+	serverVersion?: string | null;
 	Message_AllowDeleting?: boolean;
 	Message_AllowDeleting_BlockDeleteInMinutes?: number;
 	Message_AllowEditing?: boolean;
@@ -74,7 +75,8 @@ const MessageActions = React.memo(
 				forceDeleteMessagePermission,
 				deleteOwnMessagePermission,
 				pinMessagePermission,
-				createDirectMessagePermission
+				createDirectMessagePermission,
+				serverVersion
 			},
 			ref
 		) => {
@@ -188,6 +190,15 @@ const MessageActions = React.memo(
 				}
 			};
 
+			const handleShareMessage = (message: TAnyMessageModel) => {
+				const params = { message };
+				if (isMasterDetail) {
+					Navigation.navigate('ModalStackNavigator', { screen: 'ForwardMessageView', params });
+				} else {
+					Navigation.navigate('NewMessageStackNavigator', { screen: 'ForwardMessageView', params });
+				}
+			};
+
 			const handleUnread = async (message: TAnyMessageModel) => {
 				logEvent(events.ROOM_MSG_ACTION_UNREAD);
 				const { id: messageId, ts } = message;
@@ -389,6 +400,14 @@ const MessageActions = React.memo(
 					onPress: () => handleCreateDiscussion(message)
 				});
 
+				if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.2.0') && !videoConfBlock) {
+					options.push({
+						title: I18n.t('Forward'),
+						icon: 'arrow-forward',
+						onPress: () => handleShareMessage(message)
+					});
+				}
+
 				// Permalink
 				options.push({
 					title: I18n.t('Get_link'),
@@ -508,6 +527,7 @@ const MessageActions = React.memo(
 );
 const mapStateToProps = (state: IApplicationState) => ({
 	server: state.server.server,
+	serverVersion: state.server.version,
 	Message_AllowDeleting: state.settings.Message_AllowDeleting as boolean,
 	Message_AllowDeleting_BlockDeleteInMinutes: state.settings.Message_AllowDeleting_BlockDeleteInMinutes as number,
 	Message_AllowEditing: state.settings.Message_AllowEditing as boolean,

app/containers/StatusBar.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { StatusBar as StatusBarRN } from 'react-native';
 
 import { useTheme } from '../theme';
+import { isAndroid } from '../lib/methods/helpers';
 
 const supportedStyles = {
 	'light-content': 'light-content',
@@ -23,7 +24,9 @@ const StatusBar = React.memo(({ barStyle, backgroundColor }: IStatusBar) => {
 				barStyle = 'dark-content';
 			}
 		}
+		if (isAndroid) {
 			StatusBarRN.setBackgroundColor(backgroundColor ?? colors.headerBackground);
+		}
 		StatusBarRN.setBarStyle(barStyle, true);
 	}, [theme, barStyle, backgroundColor]);
 

app/containers/UIKit/MultiSelect/Chips.tsx

@@ -31,6 +31,7 @@ const Chip = ({ item, onSelect, style }: IChip) => {
 			onPress={() => onSelect(item)}
 			style={[styles.chip, { backgroundColor: colors.auxiliaryBackground }, style]}
 			background={Touchable.Ripple(colors.bannerBackground)}
+			testID={`multi-select-chip-${item.value}`}
 		>
 			<>
 				{item.imageUrl ? <FastImage style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}

app/containers/UIKit/MultiSelect/Items.tsx

@@ -13,13 +13,13 @@ import { CustomIcon } from '../../CustomIcon';
 
 interface IItem {
 	item: IItemData;
-	selected?: string;
+	selected: boolean;
 	onSelect: Function;
 }
 
 interface IItems {
 	items: IItemData[];
-	selected: string[];
+	selected: IItemData[];
 	onSelect: Function;
 }
 
@@ -54,7 +54,7 @@ const Items = ({ items, selected, onSelect }: IItems) => (
 		keyboardShouldPersistTaps='always'
 		ItemSeparatorComponent={List.Separator}
 		keyExtractor={keyExtractor}
-		renderItem={({ item }) => <Item item={item} onSelect={onSelect} selected={selected.find(s => s === item.value)} />}
+		renderItem={({ item }) => <Item item={item} onSelect={onSelect} selected={!!selected.find(s => s.value === item.value)} />}
 	/>
 );
 

app/containers/UIKit/MultiSelect/MultiSelectContent.tsx

@@ -17,16 +17,16 @@ interface IMultiSelectContentProps {
 	options?: IItemData[];
 	multiselect: boolean;
 	select: React.Dispatch<any>;
-	onChange: Function;
+	onChange: ({ value }: { value: string[] }) => void;
 	setCurrentValue: React.Dispatch<React.SetStateAction<string>>;
 	onHide: Function;
-	selectedItems: string[];
+	selectedItems: IItemData[];
 }
 
 export const MultiSelectContent = React.memo(
 	({ onSearch, options, multiselect, select, onChange, setCurrentValue, onHide, selectedItems }: IMultiSelectContentProps) => {
 		const { colors } = useTheme();
-		const [selected, setSelected] = useState<string[]>(Array.isArray(selectedItems) ? selectedItems : []);
+		const [selected, setSelected] = useState<IItemData[]>(Array.isArray(selectedItems) ? selectedItems : []);
 		const [items, setItems] = useState<IItemData[] | undefined>(options);
 		const { hideActionSheet } = useActionSheet();
 
@@ -37,14 +37,14 @@ export const MultiSelectContent = React.memo(
 			} = item;
 			if (multiselect) {
 				let newSelect = [];
-				if (!selected.includes(value)) {
+				if (!selected.find(s => s.value === value)) {
-					newSelect = [...selected, value];
+					newSelect = [...selected, item];
 				} else {
-					newSelect = selected.filter((s: any) => s !== value);
+					newSelect = selected.filter((s: any) => s.value !== value);
 				}
 				setSelected(newSelect);
 				select(newSelect);
-				onChange({ value: newSelect });
+				onChange({ value: newSelect.map(s => s.value) });
 			} else {
 				onChange({ value });
 				setCurrentValue(text);

app/containers/UIKit/MultiSelect/index.tsx

@@ -17,13 +17,21 @@ export interface IItemData {
 	imageUrl?: string;
 }
 
+interface IMultiSelectWithMultiSelect extends IMultiSelect {
+	multiselect: true;
+	onChange: ({ value }: { value: string[] }) => void;
+}
+
+interface IMultiSelectWithoutMultiSelect extends IMultiSelect {
+	multiselect?: false;
+	onChange: ({ value }: { value: any }) => void;
+}
+
 interface IMultiSelect {
 	options?: IItemData[];
-	onChange: Function;
 	placeholder?: IText;
 	context?: BlockContext;
 	loading?: boolean;
-	multiselect?: boolean;
 	onSearch?: (keyword: string) => IItemData[] | Promise<IItemData[] | undefined>;
 	onClose?: () => void;
 	inputStyle?: TextStyle;
@@ -46,9 +54,9 @@ export const MultiSelect = React.memo(
 		disabled,
 		inputStyle,
 		innerInputStyle
-	}: IMultiSelect) => {
+	}: IMultiSelectWithMultiSelect | IMultiSelectWithoutMultiSelect) => {
 		const { colors } = useTheme();
-		const [selected, select] = useState<string[]>(Array.isArray(values) ? values : []);
+		const [selected, select] = useState<IItemData[]>(Array.isArray(values) ? values : []);
 		const [currentValue, setCurrentValue] = useState('');
 
 		const { showActionSheet, hideActionSheet } = useActionSheet();
@@ -57,7 +65,7 @@ export const MultiSelect = React.memo(
 			if (Array.isArray(values)) {
 				select(values);
 			}
-		}, [values]);
+		}, []);
 
 		useEffect(() => {
 			if (values && values.length && !multiselect) {
@@ -95,13 +103,13 @@ export const MultiSelect = React.memo(
 			} = item;
 			if (multiselect) {
 				let newSelect = [];
-				if (!selected.includes(value)) {
+				if (!selected.find(s => s.value === value)) {
-					newSelect = [...selected, value];
+					newSelect = [...selected, item];
 				} else {
-					newSelect = selected.filter((s: any) => s !== value);
+					newSelect = selected.filter((s: any) => s.value !== value);
 				}
 				select(newSelect);
-				onChange({ value: newSelect });
+				onChange({ value: newSelect.map(s => s.value) });
 			} else {
 				onChange({ value });
 				setCurrentValue(text);
@@ -119,12 +127,10 @@ export const MultiSelect = React.memo(
 		);
 
 		if (context === BlockContext.FORM) {
-			const items: any = options.filter((option: any) => selected.includes(option.value));
-
 			button = (
 				<Input onPress={onShow} loading={loading} disabled={disabled} inputStyle={inputStyle} innerInputStyle={innerInputStyle}>
-					{items.length ? (
+					{selected.length ? (
-						<Chips items={items} onSelect={(item: any) => (disabled ? {} : onSelect(item))} />
+						<Chips items={selected} onSelect={(item: any) => (disabled ? {} : onSelect(item))} />
 					) : (
 						<Text style={[styles.pickerText, { color: colors.auxiliaryText }]}>{placeholder.text}</Text>
 					)}

app/containers/UIKit/UiKitMessage.stories.tsx

@@ -220,36 +220,37 @@ export const SectionMultiSelect = () =>
 			},
 			accessory: {
 				type: 'multi_static_select',
+				appId: 'app-id',
+				blockId: 'block-id',
+				actionId: 'action-id',
+				initialValue: ['option_1', 'option_2'],
 				options: [
 					{
+						value: 'option_1',
 						text: {
 							type: 'plain_text',
-							text: 'button'
+							text: 'lorem ipsum 🚀',
-						},
+							emoji: true
-						value: 1
+						}
-					},
+					},
-					{
+					{
-						text: {
+						value: 'option_2',
-							type: 'plain_text',
+						text: {
-							text: 'opt 1'
+							type: 'plain_text',
-						},
+							text: 'lorem ipsum 🚀',
-						value: 2
+							emoji: true
-					},
+						}
-					{
+					}
-						text: {
+				],
-							type: 'plain_text',
+				placeholder: {
-							text: 'opt 2'
+					type: 'plain_text',
-						},
+					text: 'Select an item'
-						value: 3
+				},
-					},
+				label: {
-					{
+					type: 'plain_text',
-						text: {
+					text: 'Label',
-							type: 'plain_text',
+					emoji: true
-							text: 'opt 3'
-						},
-						value: 4
 				}
-				]
 			}
 		}
 	]);

app/containers/UIKit/index.tsx

@@ -138,7 +138,8 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 
 	multiStaticSelect(element: IElement, context: BlockContext) {
 		const [{ loading, value }, action] = useBlockContext(element, context);
-		return <MultiSelect {...element} value={value} onChange={action} context={context} loading={loading} multiselect />;
+		const valueFiltered = element.options?.filter(option => value.includes(option.value));
+		return <MultiSelect {...element} value={valueFiltered} onChange={action} context={context} loading={loading} multiselect />;
 	}
 
 	staticSelect(element: IElement, context: BlockContext) {

app/containers/message/Audio copy.tsx

@@ -309,7 +309,10 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 	};
 
 	onPress = () => {
-		const { cached } = this.state;
+		const { cached, loading } = this.state;
+		if (loading) {
+			return;
+		}
 		if (cached) {
 			this.togglePlayPause();
 			return;

app/containers/message/Image.tsx

@@ -156,7 +156,6 @@ const ImageContainer = React.memo(
 
 		if (imageCached.description) {
 			return (
-				<Button disabled={isReply} onPress={onPress}>
 				<View>
 					<Markdown
 						msg={imageCached.description}
@@ -165,9 +164,10 @@ const ImageContainer = React.memo(
 						getCustomEmoji={getCustomEmoji}
 						theme={theme}
 					/>
+					<Button disabled={isReply} onPress={onPress}>
 						<MessageImage imgUri={img} cached={cached} loading={loading} />
-					</View>
 					</Button>
+				</View>
 			);
 		}
 

app/containers/message/Message.tsx

@@ -22,6 +22,19 @@ import { useTheme } from '../../theme';
 import RightIcons from './Components/RightIcons';
 
 const MessageInner = React.memo((props: IMessageInner) => {
+	if (props.isPreview) {
+		return (
+			<>
+				<User {...props} />
+				<>
+					<Content {...props} />
+					<Attachments {...props} />
+				</>
+				<Urls {...props} />
+			</>
+		);
+	}
+
 	if (props.type === 'discussion-created') {
 		return (
 			<>

app/containers/message/Preview.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Message from './index';
+import { useAppSelector } from '../../lib/hooks';
+import { getUserSelector } from '../../selectors/login';
+import { TAnyMessageModel, TGetCustomEmoji } from '../../definitions';
+
+const MessagePreview = ({ message }: { message: TAnyMessageModel }) => {
+	const { user, baseUrl, Message_TimeFormat, customEmojis, useRealName } = useAppSelector(state => ({
+		user: getUserSelector(state),
+		baseUrl: state.server.server,
+		Message_TimeFormat: state.settings.Message_TimeFormat as string,
+		customEmojis: state.customEmojis,
+		useRealName: state.settings.UI_Use_Real_Name as boolean
+	}));
+
+	const getCustomEmoji: TGetCustomEmoji = name => {
+		const emoji = customEmojis[name];
+		return emoji ?? null;
+	};
+	return (
+		<Message
+			item={message}
+			user={user}
+			rid={message.rid}
+			baseUrl={baseUrl}
+			getCustomEmoji={getCustomEmoji}
+			timeFormat={Message_TimeFormat}
+			useRealName={useRealName}
+			isPreview
+		/>
+	);
+};
+
+export default MessagePreview;

app/containers/message/Video.tsx

@@ -127,7 +127,7 @@ const Video = React.memo(
 
 		const handleAutoDownload = async () => {
 			const isAutoDownloadEnabled = fetchAutoDownloadEnabled('videoPreferenceDownload');
-			if (isAutoDownloadEnabled) {
+			if (isAutoDownloadEnabled && file.video_type && isTypeSupported(file.video_type)) {
 				await handleDownload();
 				return;
 			}
@@ -159,7 +159,7 @@ const Video = React.memo(
 				showAttachment(videoCached);
 				return;
 			}
-			if (!loading && !cached) {
+			if (!loading && !cached && file.video_type && isTypeSupported(file.video_type)) {
 				handleDownload();
 				return;
 			}

app/containers/message/index.tsx

@@ -28,7 +28,7 @@ interface IMessageContainerProps {
 	baseUrl: string;
 	Message_GroupingPeriod?: number;
 	isReadReceiptEnabled?: boolean;
-	isThreadRoom: boolean;
+	isThreadRoom?: boolean;
 	isSystemMessage?: boolean;
 	useRealName?: boolean;
 	autoTranslateRoom?: boolean;
@@ -46,9 +46,9 @@ interface IMessageContainerProps {
 	replyBroadcast?: (item: TAnyMessageModel) => void;
 	reactionInit?: (item: TAnyMessageModel) => void;
 	fetchThreadName?: (tmid: string, id: string) => Promise<string | undefined>;
-	showAttachment: (file: IAttachment) => void;
+	showAttachment?: (file: IAttachment) => void;
 	onReactionLongPress?: (item: TAnyMessageModel) => void;
-	navToRoomInfo: (navParam: IRoomInfoParam) => void;
+	navToRoomInfo?: (navParam: IRoomInfoParam) => void;
 	handleEnterCall?: () => void;
 	blockAction?: (params: { actionId: string; appId: string; value: string; blockId: string; rid: string; mid: string }) => void;
 	onAnswerButtonPress?: (message: string, tmid?: string, tshow?: boolean) => void;
@@ -56,8 +56,9 @@ interface IMessageContainerProps {
 	toggleFollowThread?: (isFollowingThread: boolean, tmid?: string) => Promise<void>;
 	jumpToMessage?: (link: string) => void;
 	onPress?: () => void;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	closeEmojiAndAction?: (action?: Function, params?: any) => void;
+	isPreview?: boolean;
 }
 
 interface IMessageContainerState {
@@ -336,7 +337,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 			isReadReceiptEnabled,
 			autoTranslateRoom,
 			autoTranslateLanguage,
-			navToRoomInfo,
+			navToRoomInfo = () => {},
 			getCustomEmoji,
 			isThreadRoom,
 			handleEnterCall,
@@ -345,7 +346,8 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 			threadBadgeColor,
 			toggleFollowThread,
 			jumpToMessage,
-			highlighted
+			highlighted,
+			isPreview
 		} = this.props;
 		const {
 			id,
@@ -449,7 +451,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 					isHeader={this.isHeader}
 					isThreadReply={this.isThreadReply}
 					isThreadSequential={this.isThreadSequential}
-					isThreadRoom={isThreadRoom}
+					isThreadRoom={!!isThreadRoom}
 					isInfo={this.isInfo}
 					isTemp={this.isTemp}
 					isEncrypted={this.isEncrypted}
@@ -462,6 +464,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 					highlighted={highlighted}
 					comment={comment}
 					isTranslated={isTranslated}
+					isPreview={isPreview}
 				/>
 			</MessageContext.Provider>
 		);

app/containers/message/interfaces.ts

@@ -108,6 +108,7 @@ export interface IMessageInner
 	type: MessageType;
 	blocks: [];
 	urls?: IUrl[];
+	isPreview?: boolean;
 }
 
 export interface IMessage extends IMessageRepliedThread, IMessageInner, IMessageAvatar {

app/definitions/ILoggedUser.ts

@@ -22,6 +22,8 @@ export interface ILoggedUser {
 	isFromWebView?: boolean;
 	enableMessageParserEarlyAdoption: boolean;
 	alsoSendThreadToChannel: 'default' | 'always' | 'never';
+	bio?: string;
+	nickname?: string;
 }
 
 export interface ILoggedUserResultFromServer

app/definitions/IProfile.ts

@@ -7,6 +7,8 @@ export interface IProfileParams {
 	email: string | null;
 	newPassword: string;
 	currentPassword: string;
+	bio?: string;
+	nickname?: string;
 }
 
 export interface IAvatarButton {

app/definitions/rest/v1/chat.ts

@@ -82,4 +82,10 @@ export type ChatEndpoints = {
 	'chat.getMessageReadReceipts': {
 		GET: (params: { messageId: string }) => { receipts: IReadReceipts[] };
 	};
+	'chat.postMessage': {
+		POST: (params: { roomId: string; text: string }) => {
+			message: IMessage;
+			success: boolean;
+		};
+	};
 };

app/i18n/locales/en.json

@@ -733,8 +733,14 @@
   "Wi_Fi": "Wi-Fi",
   "Off": "Off",
   "Audio": "Audio",
+  "Forward_message": "Forward message",
+  "Person_or_channel": "Person or channel",
+  "Select": "Select",
+  "Nickname": "Nickname",
+  "Bio":"Bio",
   "decline": "Decline",
   "accept": "Accept",
   "Incoming_call_from": "Incoming call from",
-  "Call_started": "Call started"
+  "Call_started": "Call started",
+  "Message_has_been_shared":"Message has been shared"
 }

app/i18n/locales/pt-BR.json

@@ -723,5 +723,11 @@
   "decline": "Recusar",
   "accept": "Aceitar",
   "Incoming_call_from": "Chamada recebida de",
-  "Call_started": "Chamada Iniciada"
+  "Call_started": "Chamada Iniciada",
+  "Forward_message": "Encaminhar mensagem",
+  "Person_or_channel": "Pessoa ou canal",
+  "Select": "Selecionar",
+  "Nickname": "Apelido",
+  "Bio": "Biografia",
+  "Message_has_been_shared":"Menssagem foi compartilhada"
 }

app/lib/database/model/servers/User.js

@@ -29,4 +29,8 @@ export default class User extends Model {
 	@field('is_from_webview') isFromWebView;
 
 	@field('enable_message_parser_early_adoption') enableMessageParserEarlyAdoption;
+
+	@field('nickname') nickname;
+
+	@field('bio') bio;
 }

app/lib/database/model/servers/migrations.js

@@ -103,6 +103,18 @@ export default schemaMigrations({
 					columns: [{ name: 'enable_message_parser_early_adoption', type: 'boolean', isOptional: true }]
 				})
 			]
+		},
+		{
+			toVersion: 13,
+			steps: [
+				addColumns({
+					table: 'users',
+					columns: [
+						{ name: 'nickname', type: 'string', isOptional: true },
+						{ name: 'bio', type: 'string', isOptional: true }
+					]
+				})
+			]
 		}
 	]
 });

app/lib/database/schema/servers.js

@@ -1,7 +1,7 @@
 import { appSchema, tableSchema } from '@nozbe/watermelondb';
 
 export default appSchema({
-	version: 12,
+	version: 13,
 	tables: [
 		tableSchema({
 			name: 'users',
@@ -17,7 +17,9 @@ export default appSchema({
 				{ name: 'show_message_in_main_thread', type: 'boolean', isOptional: true },
 				{ name: 'avatar_etag', type: 'string', isOptional: true },
 				{ name: 'is_from_webview', type: 'boolean', isOptional: true },
-				{ name: 'enable_message_parser_early_adoption', type: 'boolean', isOptional: true }
+				{ name: 'enable_message_parser_early_adoption', type: 'boolean', isOptional: true },
+				{ name: 'nickname', type: 'string', isOptional: true },
+				{ name: 'bio', type: 'string', isOptional: true }
 			]
 		}),
 		tableSchema({

app/lib/methods/search.ts

@@ -4,14 +4,19 @@ import { sanitizeLikeString, slugifyLikeString } from '../database/utils';
 import database from '../database/index';
 import { store as reduxStore } from '../store/auxStore';
 import { spotlight } from '../services/restApi';
-import { ISearch, ISearchLocal, IUserMessage, SubscriptionType } from '../../definitions';
+import { ISearch, ISearchLocal, IUserMessage, SubscriptionType, TSubscriptionModel } from '../../definitions';
-import { isGroupChat } from './helpers';
+import { isGroupChat, isReadOnly } from './helpers';
 
 export type TSearch = ISearchLocal | IUserMessage | ISearch;
 
 let debounce: null | ((reason: string) => void) = null;
 
-export const localSearchSubscription = async ({ text = '', filterUsers = true, filterRooms = true }): Promise<ISearchLocal[]> => {
+export const localSearchSubscription = async ({
+	text = '',
+	filterUsers = true,
+	filterRooms = true,
+	filterMessagingAllowed = false
+}): Promise<ISearchLocal[]> => {
 	const searchText = text.trim();
 	const db = database.active;
 	const likeString = sanitizeLikeString(searchText);
@@ -39,6 +44,17 @@ export const localSearchSubscription = async ({ text = '', filterUsers = true, f
 		subscriptions = subscriptions.filter(item => item.t !== 'd' || isGroupChat(item));
 	}
 
+	if (filterMessagingAllowed) {
+		const username = reduxStore.getState().login.user.username as string;
+		const filteredSubscriptions = await Promise.all(
+			subscriptions.map(async item => {
+				const isItemReadOnly = await isReadOnly(item, username);
+				return isItemReadOnly ? null : item;
+			})
+		);
+		subscriptions = filteredSubscriptions.filter(item => item !== null) as TSubscriptionModel[];
+	}
+
 	const search = subscriptions.slice(0, 7).map(item => ({
 		_id: item._id,
 		rid: item.rid,

app/lib/methods/subscriptions/rooms.ts

@@ -309,6 +309,12 @@ export default function subscribeRooms() {
 			if (unset?.avatarETag) {
 				store.dispatch(setUser({ avatarETag: '' }));
 			}
+			if (diff?.bio) {
+				store.dispatch(setUser({ bio: diff.bio }));
+			}
+			if (diff?.nickname) {
+				store.dispatch(setUser({ nickname: diff.nickname }));
+			}
 		}
 		if (/subscriptions/.test(ev)) {
 			if (type === 'removed') {

app/lib/services/connect.ts

@@ -304,7 +304,9 @@ async function login(credentials: ICredentials, isFromWebView = false): Promise<
 			isFromWebView,
 			showMessageInMainThread,
 			enableMessageParserEarlyAdoption,
-			alsoSendThreadToChannel: result.me.settings?.preferences?.alsoSendThreadToChannel
+			alsoSendThreadToChannel: result.me.settings?.preferences?.alsoSendThreadToChannel,
+			bio: result.me.bio,
+			nickname: result.me.nickname
 		};
 		return user;
 	}

app/lib/services/restApi.ts

@@ -7,7 +7,9 @@ import {
 	SubscriptionType,
 	IUser,
 	IAvatarSuggestion,
-	IProfileParams
+	IProfileParams,
+	RoomType,
+	IServerRoom
 } from '../../definitions';
 import { ISpotlight } from '../../definitions/ISpotlight';
 import { TEAM_TYPE } from '../../definitions/ITeam';
@@ -334,6 +336,9 @@ export const getRoomInfo = (roomId: string) =>
 	// RC 0.72.0
 	sdk.get('rooms.info', { roomId });
 
+export const getRoomByTypeAndName = (roomType: RoomType, roomName: string): Promise<IServerRoom> =>
+	sdk.methodCallWrapper('getRoomByTypeAndName', roomType, roomName);
+
 export const getVisitorInfo = (visitorId: string) =>
 	// RC 2.3.0
 	sdk.get('livechat/visitors.info', { visitorId });
@@ -964,5 +969,7 @@ export const deleteOwnAccount = (password: string, confirmRelinquish = false): a
 	// RC 0.67.0
 	sdk.post('users.deleteOwnAccount', { password, confirmRelinquish });
 
+export const postMessage = (roomId: string, text: string) => sdk.post('chat.postMessage', { roomId, text });
+
 export const notifyUser = (type: string, params: Record<string, any>): Promise<boolean> =>
 	sdk.methodCall('stream-notify-user', type, params);

app/sagas/login.js

@@ -171,7 +171,9 @@ const handleLoginSuccess = function* handleLoginSuccess({ user }) {
 			roles: user.roles,
 			isFromWebView: user.isFromWebView,
 			showMessageInMainThread: user.showMessageInMainThread,
-			avatarETag: user.avatarETag
+			avatarETag: user.avatarETag,
+			bio: user.bio,
+			nickname: user.nickname
 		};
 		yield serversDB.action(async () => {
 			try {

app/sagas/selectServer.js

@@ -94,7 +94,9 @@ const handleSelectServer = function* handleSelectServer({ server, version, fetch
 					status: userRecord.status,
 					statusText: userRecord.statusText,
 					roles: userRecord.roles,
-					avatarETag: userRecord.avatarETag
+					avatarETag: userRecord.avatarETag,
+					bio: userRecord.bio,
+					nickname: userRecord.nickname
 				};
 			} catch {
 				// search credentials on shared credentials (Experimental/Official)

app/stacks/InsideStack.tsx

@@ -64,6 +64,7 @@ import JitsiMeetView from '../views/JitsiMeetView';
 import StatusView from '../views/StatusView';
 import ShareView from '../views/ShareView';
 import CreateDiscussionView from '../views/CreateDiscussionView';
+import ForwardMessageView from '../views/ForwardMessageView';
 import QueueListView from '../ee/omnichannel/views/QueueListView';
 import AddChannelTeamView from '../views/AddChannelTeamView';
 import AddExistingChannelView from '../views/AddExistingChannelView';
@@ -259,6 +260,7 @@ const NewMessageStackNavigator = () => {
 			<NewMessageStack.Screen name='CreateChannelView' component={CreateChannelView} />
 			{/* @ts-ignore */}
 			<NewMessageStack.Screen name='CreateDiscussionView' component={CreateDiscussionView} />
+			<NewMessageStack.Screen name='ForwardMessageView' component={ForwardMessageView} />
 		</NewMessageStack.Navigator>
 	);
 };

app/stacks/MasterDetailStack/index.tsx

@@ -27,6 +27,7 @@ import AutoTranslateView from '../../views/AutoTranslateView';
 import DirectoryView from '../../views/DirectoryView';
 import NotificationPrefView from '../../views/NotificationPreferencesView';
 import ForwardLivechatView from '../../views/ForwardLivechatView';
+import ForwardMessageView from '../../views/ForwardMessageView';
 import CloseLivechatView from '../../views/CloseLivechatView';
 import CannedResponsesListView from '../../views/CannedResponsesListView';
 import CannedResponseDetail from '../../views/CannedResponseDetail';
@@ -142,6 +143,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				/>
 				<ModalStack.Screen name='QueueListView' component={QueueListView} />
 				<ModalStack.Screen name='NotificationPrefView' component={NotificationPrefView} />
+				<ModalStack.Screen name='ForwardMessageView' component={ForwardMessageView} />
 				{/* @ts-ignore */}
 				<ModalStack.Screen name='ForwardLivechatView' component={ForwardLivechatView} />
 				{/* @ts-ignore */}

app/stacks/MasterDetailStack/types.ts

@@ -4,7 +4,7 @@ import { TServerModel, TThreadModel } from '../../definitions';
 import { IAttachment } from '../../definitions/IAttachment';
 import { ILivechatDepartment } from '../../definitions/ILivechatDepartment';
 import { ILivechatTag } from '../../definitions/ILivechatTag';
-import { IMessage } from '../../definitions/IMessage';
+import { IMessage, TAnyMessageModel } from '../../definitions/IMessage';
 import { ISubscription, SubscriptionType, TSubscriptionModel } from '../../definitions/ISubscription';
 import { TChangeAvatarViewContext } from '../../definitions/TChangeAvatarViewContext';
 
@@ -118,6 +118,12 @@ export type ModalStackParamList = {
 		rid: string;
 		room: ISubscription;
 	};
+	ForwardMessageView: {
+		message: TAnyMessageModel;
+	};
+	ForwardLivechatView: {
+		rid: string;
+	};
 	CloseLivechatView: {
 		rid: string;
 		departmentId?: string;

app/stacks/types.ts

@@ -246,6 +246,9 @@ export type NewMessageStackParamList = {
 		message: IMessage;
 		showCloseModal: boolean;
 	};
+	ForwardMessageView: {
+		message: TAnyMessageModel;
+	};
 };
 
 export type E2ESaveYourPasswordStackParamList = {

app/views/CreateDiscussionView/interfaces.ts

@@ -39,7 +39,7 @@ export interface ICreateDiscussionViewSelectChannel {
 	token: string;
 	userId: string;
 	initial: object;
-	onChannelSelect: Function;
+	onChannelSelect: ({ value }: { value: any }) => void;
 	blockUnauthenticatedAccess: boolean;
 	serverVersion: string;
 }
@@ -49,7 +49,7 @@ export interface ICreateDiscussionViewSelectUsers {
 	token: string;
 	userId: string;
 	selected: any[];
-	onUserSelect: Function;
+	onUserSelect: ({ value }: { value: string[] }) => void;
 	blockUnauthenticatedAccess: boolean;
 	serverVersion: string;
 }

app/views/DirectoryView/index.tsx

@@ -27,6 +27,7 @@ import { IApplicationState, IServerRoom, IUser, SubscriptionType } from '../../d
 import styles from './styles';
 import Options from './Options';
 import { Services } from '../../lib/services';
+import { getSubscriptionByRoomId } from '../../lib/database/services/Subscription';
 
 interface IDirectoryViewProps {
 	navigation: CompositeNavigationProp<
@@ -163,13 +164,20 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 			if (result.success) {
 				this.goRoom({ rid: result.room._id, name: item.username, t: SubscriptionType.DIRECT });
 			}
-		} else if (['p', 'c'].includes(item.t) && !item.teamMain) {
+			return;
-			const result = await Services.getRoomInfo(item._id);
+		}
-			if (result.success) {
+		const subscription = await getSubscriptionByRoomId(item._id);
+		if (subscription) {
+			this.goRoom(subscription);
+			return;
+		}
+		if (['p', 'c'].includes(item.t) && !item.teamMain) {
+			const result = await Services.getRoomByTypeAndName(item.t, item.name || item.fname);
+			if (result) {
 				this.goRoom({
 					rid: item._id,
 					name: item.name,
-					joinCodeRequired: result.room.joinCodeRequired,
+					joinCodeRequired: result.joinCodeRequired,
 					t: item.t as SubscriptionType,
 					search: true
 				});

app/views/ForwardMessageView/SelectPersonOrChannel.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import { Text, View } from 'react-native';
+import { BlockContext } from '@rocket.chat/ui-kit';
+
+import { getAvatarURL } from '../../lib/methods/helpers/getAvatarUrl';
+import I18n from '../../i18n';
+import { MultiSelect } from '../../containers/UIKit/MultiSelect';
+import styles from './styles';
+import { IForwardMessageViewSelectRoom } from './interfaces';
+import { ISearchLocal } from '../../definitions';
+import { localSearchSubscription } from '../../lib/methods';
+import { getRoomAvatar, getRoomTitle } from '../../lib/methods/helpers';
+import { useTheme } from '../../theme';
+
+const SelectPersonOrChannel = ({
+	server,
+	token,
+	userId,
+	onRoomSelect,
+	blockUnauthenticatedAccess,
+	serverVersion
+}: IForwardMessageViewSelectRoom): React.ReactElement => {
+	const [rooms, setRooms] = useState<ISearchLocal[]>([]);
+	const { colors } = useTheme();
+
+	const getRooms = async (keyword = '') => {
+		try {
+			const res = await localSearchSubscription({ text: keyword, filterMessagingAllowed: true });
+			setRooms(res);
+			return res.map(item => ({
+				value: item.rid,
+				text: { text: getRoomTitle(item) },
+				imageUrl: getAvatar(item)
+			}));
+		} catch {
+			// do nothing
+		}
+	};
+
+	useEffect(() => {
+		getRooms('');
+	}, []);
+
+	const getAvatar = (item: ISearchLocal) =>
+		getAvatarURL({
+			text: getRoomAvatar(item),
+			type: item.t,
+			userId,
+			token,
+			server,
+			avatarETag: item.avatarETag,
+			rid: item.rid,
+			blockUnauthenticatedAccess,
+			serverVersion
+		});
+
+	return (
+		<View style={styles.inputContainer}>
+			<Text style={[styles.label, { color: colors.bodyText }]}>{I18n.t('Person_or_channel')}</Text>
+			<MultiSelect
+				onSearch={getRooms}
+				onChange={onRoomSelect}
+				options={rooms.map(room => ({
+					value: room.rid,
+					text: { text: getRoomTitle(room) },
+					imageUrl: getAvatar(room)
+				}))}
+				placeholder={{ text: `${I18n.t('Select')}` }}
+				context={BlockContext.FORM}
+				multiselect
+			/>
+		</View>
+	);
+};
+
+export default SelectPersonOrChannel;

app/views/ForwardMessageView/index.tsx

@@ -0,0 +1,104 @@
+import React, { useLayoutEffect, useState } from 'react';
+import { Alert, ScrollView, View } from 'react-native';
+import { StackNavigationOptions } from '@react-navigation/stack';
+import { RouteProp, StackActions, useNavigation, useRoute } from '@react-navigation/native';
+
+import { getPermalinkMessage } from '../../lib/methods';
+import KeyboardView from '../../containers/KeyboardView';
+import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
+import I18n from '../../i18n';
+import * as HeaderButton from '../../containers/HeaderButton';
+import StatusBar from '../../containers/StatusBar';
+import { useTheme } from '../../theme';
+import { getUserSelector } from '../../selectors/login';
+import SafeAreaView from '../../containers/SafeAreaView';
+import styles from './styles';
+import SelectPersonOrChannel from './SelectPersonOrChannel';
+import { useAppSelector } from '../../lib/hooks';
+import { NewMessageStackParamList } from '../../stacks/types';
+import { postMessage } from '../../lib/services/restApi';
+import MessagePreview from '../../containers/message/Preview';
+import EventEmitter from '../../lib/methods/helpers/events';
+import { LISTENER } from '../../containers/Toast';
+
+const ForwardMessageView = () => {
+	const [rooms, setRooms] = useState<string[]>([]);
+	const [sending, setSending] = useState(false);
+	const navigation = useNavigation();
+	const { colors } = useTheme();
+
+	const {
+		params: { message }
+	} = useRoute<RouteProp<NewMessageStackParamList, 'ForwardMessageView'>>();
+
+	const { blockUnauthenticatedAccess, server, serverVersion, user } = useAppSelector(state => ({
+		user: getUserSelector(state),
+		server: state.server.server,
+		blockUnauthenticatedAccess: !!state.settings.Accounts_AvatarBlockUnauthenticatedAccess ?? true,
+		serverVersion: state.server.version as string
+	}));
+
+	useLayoutEffect(() => {
+		const isSendButtonEnabled = rooms.length && !sending;
+		navigation.setOptions({
+			title: I18n.t('Forward_message'),
+			headerRight: () => (
+				<HeaderButton.Container>
+					<HeaderButton.Item
+						title={I18n.t('Send')}
+						color={isSendButtonEnabled ? colors.actionTintColor : colors.headerTintColor}
+						disabled={!isSendButtonEnabled}
+						onPress={handlePostMessage}
+						testID='forward-message-view-send'
+					/>
+				</HeaderButton.Container>
+			),
+			headerLeft: () => <HeaderButton.CloseModal />
+		} as StackNavigationOptions);
+	}, [rooms.length, navigation, sending]);
+
+	const handlePostMessage = async () => {
+		setSending(true);
+		const permalink = await getPermalinkMessage(message);
+		const msg = `[ ](${permalink})\n`;
+		try {
+			await Promise.all(rooms.map(roomId => postMessage(roomId, msg)));
+			EventEmitter.emit(LISTENER, { message: I18n.t('Message_has_been_shared') });
+			navigation.dispatch(StackActions.pop());
+		} catch (e: any) {
+			Alert.alert(I18n.t('Oops'), e.message);
+		}
+		setSending(false);
+	};
+
+	const selectRooms = ({ value }: { value: string[] }) => {
+		setRooms(value);
+	};
+
+	return (
+		<KeyboardView
+			style={{ backgroundColor: colors.auxiliaryBackground }}
+			contentContainerStyle={styles.container}
+			keyboardVerticalOffset={128}
+		>
+			<StatusBar />
+			<SafeAreaView testID='forward-message-view' style={styles.container}>
+				<ScrollView {...scrollPersistTaps}>
+					<SelectPersonOrChannel
+						server={server}
+						userId={user.id}
+						token={user.token}
+						onRoomSelect={selectRooms}
+						blockUnauthenticatedAccess={blockUnauthenticatedAccess}
+						serverVersion={serverVersion}
+					/>
+					<View pointerEvents='none' style={[styles.messageContainer, { backgroundColor: colors.backgroundColor }]}>
+						<MessagePreview message={message} />
+					</View>
+				</ScrollView>
+			</SafeAreaView>
+		</KeyboardView>
+	);
+};
+
+export default ForwardMessageView;

app/views/ForwardMessageView/interfaces.ts

@@ -0,0 +1,14 @@
+export interface IForwardMessageViewSelectRoom {
+	server: string;
+	token: string;
+	userId: string;
+	onRoomSelect: ({ value }: { value: string[] }) => void;
+	blockUnauthenticatedAccess: boolean;
+	serverVersion: string;
+}
+
+export interface IForwardMessageViewSearchResult {
+	value: string;
+	text: { text: string };
+	imageUrl: string;
+}

app/views/ForwardMessageView/styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+
+import sharedStyles from '../Styles';
+
+export default StyleSheet.create({
+	container: {
+		flex: 1
+	},
+	inputContainer: {
+		marginTop: 16,
+		paddingHorizontal: 16,
+		marginBottom: 8
+	},
+	label: {
+		marginBottom: 4,
+		fontSize: 14,
+		...sharedStyles.textMedium
+	},
+	messageContainer: {
+		paddingVertical: 8
+	}
+});

app/views/LivechatEditView.tsx

@@ -90,6 +90,11 @@ const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewP
 	const [tagParam, setTags] = useState(livechat?.tags || []);
 	const [tagParamSelected, setTagParamSelected] = useState(livechat?.tags || []);
 
+	const tagOptions = tagParam.map((tag: string) => ({ text: { text: tag }, value: tag }));
+	const tagValues = Array.isArray(tagParamSelected)
+		? tagOptions.filter((option: any) => tagParamSelected.includes(option.value))
+		: [];
+
 	useEffect(() => {
 		const arr = [...tagParam, ...availableUserTags];
 		const uniqueArray = arr.filter((val, i) => arr.indexOf(val) === i);
@@ -254,12 +259,12 @@ const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewP
 
 					<Text style={[styles.label, { color: themes[theme!].titleText }]}>{I18n.t('Tags')}</Text>
 					<MultiSelect
-						options={tagParam.map((tag: string) => ({ text: { text: tag }, value: tag }))}
+						options={tagOptions}
 						onChange={({ value }: { value: string[] }) => {
 							setTagParamSelected([...value]);
 						}}
 						placeholder={{ text: I18n.t('Tags') }}
-						value={tagParamSelected}
+						value={tagValues}
 						context={BlockContext.FORM}
 						multiselect
 						disabled={!editLivechatRoomCustomFieldsPermission}

app/views/ProfileView/index.tsx

@@ -11,7 +11,7 @@ import Touch from '../../containers/Touch';
 import KeyboardView from '../../containers/KeyboardView';
 import sharedStyles from '../Styles';
 import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
-import { showErrorAlert, showConfirmationAlert } from '../../lib/methods/helpers';
+import { showErrorAlert, showConfirmationAlert, compareServerVersion } from '../../lib/methods/helpers';
 import { LISTENER } from '../../containers/Toast';
 import EventEmitter from '../../lib/methods/helpers/events';
 import { FormTextInput } from '../../containers/TextInput';
@@ -36,6 +36,10 @@ import { withActionSheet, IActionSheetProvider } from '../../containers/ActionSh
 import { DeleteAccountActionSheetContent } from './components/DeleteAccountActionSheetContent';
 import ActionSheetContentWithInputAndSubmit from '../../containers/ActionSheet/ActionSheetContentWithInputAndSubmit';
 
+// https://github.com/RocketChat/Rocket.Chat/blob/174c28d40b3d5a52023ee2dca2e81dd77ff33fa5/apps/meteor/app/lib/server/functions/saveUser.js#L24-L25
+const MAX_BIO_LENGTH = 260;
+const MAX_NICKNAME_LENGTH = 120;
+
 interface IProfileViewProps extends IActionSheetProvider, IBaseScreen<ProfileStackParamList, 'ProfileView'> {
 	user: IUser;
 	baseUrl: string;
@@ -48,6 +52,7 @@ interface IProfileViewProps extends IActionSheetProvider, IBaseScreen<ProfileSta
 	theme: TSupportedThemes;
 	Accounts_AllowDeleteOwnAccount: boolean;
 	isMasterDetail: boolean;
+	serverVersion: string;
 }
 
 interface IProfileViewState {
@@ -55,6 +60,8 @@ interface IProfileViewState {
 	name: string;
 	username: string;
 	email: string | null;
+	bio?: string;
+	nickname?: string;
 	newPassword: string | null;
 	currentPassword: string | null;
 	customFields: {
@@ -69,9 +76,11 @@ interface IProfileViewState {
 class ProfileView extends React.Component<IProfileViewProps, IProfileViewState> {
 	private name?: TextInput | null;
 	private username?: TextInput | null;
-	private email?: TextInput;
+	private email?: TextInput | null;
-	private avatarUrl?: TextInput;
+	private avatarUrl?: TextInput | null;
-	private newPassword?: TextInput;
+	private newPassword?: TextInput | null;
+	private nickname?: TextInput | null;
+	private bio?: TextInput | null;
 
 	setHeader = () => {
 		const { navigation, isMasterDetail } = this.props;
@@ -98,6 +107,8 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 		name: '',
 		username: '',
 		email: '',
+		bio: '',
+		nickname: '',
 		newPassword: '',
 		currentPassword: '',
 		customFields: {},
@@ -123,7 +134,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 
 	init = (user?: IUser) => {
 		const { user: userProps } = this.props;
-		const { name, username, emails, customFields } = user || userProps;
+		const { name, username, emails, customFields, bio, nickname } = user || userProps;
 
 		this.setState({
 			name: name as string,
@@ -131,12 +142,14 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 			email: emails ? emails[0].address : null,
 			newPassword: null,
 			currentPassword: null,
-			customFields: customFields || {}
+			customFields: customFields || {},
+			bio,
+			nickname
 		});
 	};
 
 	formIsChanged = () => {
-		const { name, username, email, newPassword, customFields } = this.state;
+		const { name, username, email, newPassword, customFields, bio, nickname } = this.state;
 		const { user } = this.props;
 		let customFieldsChanged = false;
 
@@ -152,6 +165,8 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 		return !(
 			user.name === name &&
 			user.username === username &&
+			user.bio === bio &&
+			user.nickname === nickname &&
 			!newPassword &&
 			user.emails &&
 			user.emails[0].address === email &&
@@ -168,7 +183,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 
 		this.setState({ saving: true });
 
-		const { name, username, email, newPassword, currentPassword, customFields, twoFactorCode } = this.state;
+		const { name, username, email, newPassword, currentPassword, customFields, twoFactorCode, bio, nickname } = this.state;
 		const { user, dispatch } = this.props;
 		const params = {} as IProfileParams;
 
@@ -187,6 +202,14 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 			params.email = email;
 		}
 
+		if (user.bio !== bio) {
+			params.bio = bio;
+		}
+
+		if (user.nickname !== nickname) {
+			params.nickname = nickname;
+		}
+
 		// newPassword
 		if (newPassword) {
 			params.newPassword = newPassword;
@@ -400,7 +423,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 	};
 
 	render() {
-		const { name, username, email, newPassword, customFields, saving } = this.state;
+		const { name, username, email, newPassword, customFields, saving, nickname, bio } = this.state;
 		const {
 			user,
 			theme,
@@ -410,7 +433,8 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 			Accounts_AllowUserAvatarChange,
 			Accounts_AllowUsernameChange,
 			Accounts_CustomFields,
-			Accounts_AllowDeleteOwnAccount
+			Accounts_AllowDeleteOwnAccount,
+			serverVersion
 		} = this.props;
 
 		return (
@@ -431,9 +455,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 						<FormTextInput
 							editable={Accounts_AllowRealNameChange}
 							inputStyle={[!Accounts_AllowRealNameChange && styles.disabled]}
-							inputRef={e => {
+							inputRef={e => (this.name = e)}
-								this.name = e;
-							}}
 							label={I18n.t('Name')}
 							placeholder={I18n.t('Name')}
 							value={name}
@@ -446,9 +468,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 						<FormTextInput
 							editable={Accounts_AllowUsernameChange}
 							inputStyle={[!Accounts_AllowUsernameChange && styles.disabled]}
-							inputRef={e => {
+							inputRef={e => (this.username = e)}
-								this.username = e;
-							}}
 							label={I18n.t('Username')}
 							placeholder={I18n.t('Username')}
 							value={username}
@@ -461,28 +481,48 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 						<FormTextInput
 							editable={Accounts_AllowEmailChange}
 							inputStyle={[!Accounts_AllowEmailChange && styles.disabled]}
-							inputRef={e => {
+							inputRef={e => (this.email = e)}
-								if (e) {
-									this.email = e;
-								}
-							}}
 							label={I18n.t('Email')}
 							placeholder={I18n.t('Email')}
 							value={email || undefined}
 							onChangeText={value => this.setState({ email: value })}
 							onSubmitEditing={() => {
-								this.newPassword?.focus();
+								this.nickname?.focus();
 							}}
 							testID='profile-view-email'
 						/>
+						{compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.5.0') ? (
+							<FormTextInput
+								inputRef={e => (this.nickname = e)}
+								label={I18n.t('Nickname')}
+								value={nickname}
+								onChangeText={value => this.setState({ nickname: value })}
+								onSubmitEditing={() => {
+									this.bio?.focus();
+								}}
+								testID='profile-view-nickname'
+								maxLength={MAX_NICKNAME_LENGTH}
+							/>
+						) : null}
+						{compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.1.0') ? (
+							<FormTextInput
+								inputRef={e => (this.bio = e)}
+								label={I18n.t('Bio')}
+								inputStyle={styles.inputBio}
+								multiline
+								maxLength={MAX_BIO_LENGTH}
+								value={bio}
+								onChangeText={value => this.setState({ bio: value })}
+								onSubmitEditing={() => {
+									this.newPassword?.focus();
+								}}
+								testID='profile-view-bio'
+							/>
+						) : null}
 						<FormTextInput
 							editable={Accounts_AllowPasswordChange}
 							inputStyle={[!Accounts_AllowPasswordChange && styles.disabled]}
-							inputRef={e => {
+							inputRef={e => (this.newPassword = e)}
-								if (e) {
-									this.newPassword = e;
-								}
-							}}
 							label={I18n.t('New_Password')}
 							placeholder={I18n.t('New_Password')}
 							value={newPassword || undefined}
@@ -539,6 +579,7 @@ const mapStateToProps = (state: IApplicationState) => ({
 	Accounts_AllowUsernameChange: state.settings.Accounts_AllowUsernameChange as boolean,
 	Accounts_CustomFields: state.settings.Accounts_CustomFields as string,
 	baseUrl: state.server.server,
+	serverVersion: state.server.version,
 	Accounts_AllowDeleteOwnAccount: state.settings.Accounts_AllowDeleteOwnAccount as boolean
 });
 

app/views/ProfileView/styles.ts

@@ -22,5 +22,9 @@ export default StyleSheet.create({
 		marginRight: 15,
 		marginBottom: 15,
 		borderRadius: 4
+	},
+	inputBio: {
+		height: 100,
+		textAlignVertical: 'top'
 	}
 });

app/views/RoomInfoEditView/index.tsx

@@ -78,6 +78,11 @@ interface IRoomInfoEditViewProps extends IBaseScreen<ChatsStackParamList | Modal
 	deleteTeamPermission: string[];
 }
 
+const MESSAGE_TYPE_VALUES = MessageTypeValues.map(m => ({
+	value: m.value,
+	text: { text: I18n.t('Hide_type_messages', { type: I18n.t(m.text) }) }
+}));
+
 class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfoEditViewState> {
 	randomValue = random(15);
 	private querySubscription: Subscription | undefined;
@@ -447,15 +452,16 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 			return null;
 		}
 
+		const values = Array.isArray(systemMessages)
+			? MESSAGE_TYPE_VALUES.filter((option: any) => systemMessages.includes(option.value))
+			: [];
+
 		return (
 			<MultiSelect
-				options={MessageTypeValues.map(m => ({
+				options={MESSAGE_TYPE_VALUES}
-					value: m.value,
+				onChange={({ value }) => this.setState({ systemMessages: value })}
-					text: { text: I18n.t('Hide_type_messages', { type: I18n.t(m.text) }) }
-				}))}
-				onChange={({ value }: { value: boolean }) => this.setState({ systemMessages: value })}
 				placeholder={{ text: I18n.t('Hide_System_Messages') }}
-				value={systemMessages as string[]}
+				value={values}
 				context={BlockContext.FORM}
 				multiselect
 			/>

app/views/UserNotificationPreferencesView/ListPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 import * as List from '../../containers/List';
@@ -21,7 +21,7 @@ type TKey = 'desktopNotifications' | 'pushNotifications' | 'emailNotificationMod
 interface IBaseParams {
 	preference: TKey;
 	value: string;
-	onChangeValue: (param: { [key: string]: string }, onError: () => void) => void;
+	onChangeValue: (param: { [key: string]: string }) => void;
 }
 
 const ListPicker = ({
@@ -36,17 +36,14 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
-	const [option, setOption] = useState(
+	const option = value ? OPTIONS[preference].find(option => option.value === value) : OPTIONS[preference][0];
-		value ? OPTIONS[preference].find(option => option.value === value) : OPTIONS[preference][0]
-	);
 
 	const getOptions = () =>
 		OPTIONS[preference].map(i => ({
 			title: I18n.t(i.label, { defaultValue: i.label }),
 			onPress: () => {
 				hideActionSheet();
-				onChangeValue({ [preference]: i.value.toString() }, () => setOption(option));
+				onChangeValue({ [preference]: i.value.toString() });
-				setOption(i);
 			},
 			right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
 		}));

app/views/UserNotificationPreferencesView/index.tsx

@@ -44,18 +44,17 @@ const UserNotificationPreferencesView = () => {
 		getPreferences();
 	}, [userId]);
 
-	const onValueChangePicker = async (param: { [key: string]: string }, onError: () => void) => {
+	const onValueChangePicker = async (param: { [key: string]: string }) => {
+		const previousPreferences = preferences;
 		try {
+			setPreferences({ ...previousPreferences, ...param });
 			const result = await Services.setUserPreferences(userId, param);
-			if (result.success) {
+			if (!result.success) {
-				const {
+				setPreferences(previousPreferences);
-					user: { settings }
-				} = result;
-				setPreferences(settings.preferences);
 			}
 		} catch (error) {
+			setPreferences(previousPreferences);
 			log(error);
-			onError();
 		}
 	};
 

e2e/tests/assorted/03-profile.spec.ts

@@ -10,6 +10,12 @@ async function waitForToast() {
 	await sleep(600);
 }
 
+async function dismissKeyboardAndScrollUp() {
+	await element(by.id('profile-view-list')).swipe('down');
+	await sleep(300);
+	await element(by.id('profile-view-list')).swipe('up');
+}
+
 describe('Profile screen', () => {
 	let textMatcher: TTextMatcher;
 	let user: ITestUser;
@@ -74,23 +80,27 @@ describe('Profile screen', () => {
 		it('should change name and username', async () => {
 			await element(by.id('profile-view-name')).replaceText(`${user.username}new`);
 			await element(by.id('profile-view-username')).replaceText(`${user.username}new`);
-			// dismiss keyboard
+			await dismissKeyboardAndScrollUp();
-			await element(by.id('profile-view-list')).swipe('down');
+			await element(by.id('profile-view-submit')).tap();
+			await waitForToast();
+		});
+
+		it('should change nickname and bio', async () => {
+			await element(by.id('profile-view-nickname')).replaceText(`nickname-${user.username}`);
+			await element(by.id('profile-view-bio')).replaceText(`bio-${user.username}`);
+			await dismissKeyboardAndScrollUp();
 			await element(by.id('profile-view-submit')).tap();
 			await waitForToast();
 		});
 
 		it('should change email and password', async () => {
-			await element(by.id('profile-view-list')).swipe('up');
+			await element(by.id('profile-view-list')).swipe('down');
 			await waitFor(element(by.id('profile-view-email')))
 				.toBeVisible()
 				.withTimeout(2000);
 			await element(by.id('profile-view-email')).replaceText(`mobile+profileChangesNew${random()}@rocket.chat`);
-			// dismiss keyboard
+			await dismissKeyboardAndScrollUp();
-			await element(by.id('profile-view-list')).swipe('down');
 			await element(by.id('profile-view-new-password')).replaceText(`${user.password}new`);
-			// dismiss keyboard
-			await element(by.id('profile-view-list')).swipe('down');
 			await waitFor(element(by.id('profile-view-submit')))
 				.toExist()
 				.withTimeout(2000);

e2e/tests/room/04-discussion.spec.ts

@@ -31,6 +31,7 @@ describe('Discussion', () => {
 	});
 
 	it('should create discussion from NewMessageView', async () => {
+		const selectUser = 'rocket.cat';
 		await waitFor(element(by.id('rooms-list-view-create-channel')))
 			.toExist()
 			.withTimeout(2000);
@@ -53,6 +54,30 @@ describe('Discussion', () => {
 			.withTimeout(10000);
 		await element(by.id(`multi-select-item-${room}`)).tap();
 		await element(by.id('multi-select-discussion-name')).replaceText(discussionFromNewMessage);
+		await element(by[textMatcher]('Select users...')).tap();
+		await element(by.id('multi-select-search')).replaceText(`${selectUser}`);
+		await waitFor(element(by.id(`multi-select-item-${selectUser}`)))
+			.toExist()
+			.withTimeout(10000);
+		await element(by.id(`multi-select-item-${selectUser}`)).tap();
+		await sleep(300);
+		// checking if the chip was placed properly
+		await waitFor(element(by.id(`multi-select-chip-${selectUser}`)))
+			.toExist()
+			.withTimeout(10000);
+		// should keep the same chip even when the user does a new research
+		await element(by.id('multi-select-search')).replaceText(`user`);
+		await waitFor(element(by.id(`multi-select-item-${selectUser}`)))
+			.not.toExist()
+			.withTimeout(10000);
+		await waitFor(element(by.id(`multi-select-chip-${selectUser}`)))
+			.toExist()
+			.withTimeout(10000);
+		await sleep(500);
+		await element(by.id('multi-select-search')).tapReturnKey();
+		await sleep(500);
+		// removing the rocket.cat from the users
+		await element(by.id(`multi-select-chip-${selectUser}`)).tap();
 		await waitFor(element(by.id('create-discussion-submit')))
 			.toExist()
 			.withTimeout(10000);

e2e/tests/room/11-sharemessage.spec.ts

@@ -0,0 +1,93 @@
+import { device, waitFor, element, by, expect } from 'detox';
+
+import {
+	navigateToLogin,
+	login,
+	sleep,
+	platformTypes,
+	TTextMatcher,
+	tapBack,
+	navigateToRoom,
+	mockMessage
+} from '../../helpers/app';
+import { createRandomRoom, createRandomUser, ITestUser } from '../../helpers/data_setup';
+
+describe('Forward a message with another user', () => {
+	let user: ITestUser;
+	let otherUser: ITestUser;
+	let room: string;
+	let textMatcher: TTextMatcher;
+	let messageToUser: string;
+	let messageToRoom: string;
+
+	beforeAll(async () => {
+		user = await createRandomUser();
+		otherUser = await createRandomUser();
+		({ name: room } = await createRandomRoom(user));
+		await device.launchApp({ permissions: { notifications: 'YES' }, delete: true });
+		({ textMatcher } = platformTypes[device.getPlatform()]);
+		await navigateToLogin();
+		await login(user.username, user.password);
+	});
+
+	describe('Usage', () => {
+		describe('Start a DM with other user', () => {
+			it('should create a DM', async () => {
+				await navigateToRoom(otherUser.username);
+			});
+			it('should send a message and back to Rooms List View', async () => {
+				messageToUser = await mockMessage('Hello user');
+				await tapBack();
+			});
+		});
+		describe('Forward a message from room to the otherUser', () => {
+			it('should navigate to room and send a message', async () => {
+				await navigateToRoom(room);
+				messageToRoom = await mockMessage('Hello room');
+				await sleep(300);
+			});
+			it('should open the action sheet and tap Forward', async () => {
+				await waitFor(element(by[textMatcher](messageToRoom)).atIndex(0))
+					.toBeVisible()
+					.withTimeout(2000);
+				await element(by[textMatcher](messageToRoom)).atIndex(0).longPress();
+				await waitFor(element(by.id('action-sheet')))
+					.toExist()
+					.withTimeout(2000);
+				await expect(element(by.id('action-sheet-handle'))).toBeVisible();
+				await element(by.id('action-sheet-handle')).swipe('up', 'fast', 0.5);
+				await element(by[textMatcher]('Forward')).atIndex(0).tap();
+				await sleep(300);
+			});
+			it('should forward the message', async () => {
+				await waitFor(element(by.id('forward-message-view')))
+					.toBeVisible()
+					.withTimeout(2000);
+				await element(by[textMatcher]('Select')).tap();
+				await sleep(300);
+				await element(by.id('multi-select-search')).replaceText(`${otherUser.username}`);
+				await waitFor(element(by.id(`multi-select-item-${otherUser.username.toLowerCase()}`)))
+					.toExist()
+					.withTimeout(10000);
+				await element(by.id(`multi-select-item-${otherUser.username.toLowerCase()}`)).tap();
+				await element(by.id('multi-select-search')).tapReturnKey();
+				await sleep(300);
+				await waitFor(element(by.id('forward-message-view-send')))
+					.toBeVisible()
+					.withTimeout(10000);
+				await element(by.id('forward-message-view-send')).tap();
+				await sleep(300);
+			});
+			it('should go to otherUser DM and verify if exist both messages', async () => {
+				await tapBack();
+				await navigateToRoom(otherUser.username);
+				await waitFor(element(by[textMatcher](messageToUser)))
+					.toExist()
+					.withTimeout(2000);
+				await waitFor(element(by[textMatcher](messageToRoom)))
+					.toExist()
+					.withTimeout(2000);
+			});
+		});
+	});
+});