[IMPROVEMENT] Add username on status messages

app/containers/message/Content.js

@@ -6,7 +6,8 @@ import equal from 'deep-equal';
 import I18n from '../../i18n';
 import styles from './styles';
 import Markdown from '../markdown';
-import { getInfoMessage } from './utils';
+import User from './User';
+import { getInfoMessage, SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME } from './utils';
 import { themes } from '../../constants/colors';
 import MessageContext from './Context';
 import Encrypted from './Encrypted';
@@ -15,13 +16,25 @@ import { E2E_MESSAGE_TYPE } from '../../lib/encryption/constants';
 const Content = React.memo((props) => {
 	if (props.isInfo) {
 		const infoMessage = getInfoMessage({ ...props });
-		return (
+
+		const renderMessageContent = (
 			<Text
 				style={[styles.textInfo, { color: themes[props.theme].auxiliaryText }]}
 				accessibilityLabel={infoMessage}
-			>{infoMessage}
+			>
+				{infoMessage}
 			</Text>
 		);
+
+		if (SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME.includes(props.type)) {
+			return (
+				<Text>
+					<User {...props} /> {renderMessageContent}
+				</Text>
+			);
+		}
+
+		return renderMessageContent;
 	}
 
 	const isPreview = props.tmid && !props.isThreadRoom;

app/containers/message/Message.js

@@ -68,7 +68,7 @@ const Message = React.memo((props) => {
 		return (
 			<View style={[styles.container, props.style]}>
 				{thread}
-				<View style={[styles.flex, styles.center]}>
+				<View style={styles.flex}>
 					<MessageAvatar small {...props} />
 					<View
 						style={[

app/containers/message/User.js

@@ -12,6 +12,7 @@ import MessageError from './MessageError';
 import sharedStyles from '../../views/Styles';
 import messageStyles from './styles';
 import MessageContext from './Context';
+import { SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME } from './utils';
 
 const styles = StyleSheet.create({
 	container: {
@@ -24,6 +25,10 @@ const styles = StyleSheet.create({
 		lineHeight: 22,
 		...sharedStyles.textMedium
 	},
+	usernameInfoMessage: {
+		fontSize: 16,
+		...sharedStyles.textMedium
+	},
 	titleContainer: {
 		flex: 1,
 		flexDirection: 'row',
@@ -36,7 +41,7 @@ const styles = StyleSheet.create({
 });
 
 const User = React.memo(({
-	isHeader, useRealName, author, alias, ts, timeFormat, hasError, theme, navToRoomInfo, ...props
+	isHeader, useRealName, author, alias, ts, timeFormat, hasError, theme, navToRoomInfo, type, ...props
 }) => {
 	if (isHeader || hasError) {
 		const navParam = {
@@ -47,17 +52,37 @@ const User = React.memo(({
 		const username = (useRealName && author.name) || author.username;
 		const aliasUsername = alias ? (<Text style={[styles.alias, { color: themes[theme].auxiliaryText }]}> @{username}</Text>) : null;
 		const time = moment(ts).format(timeFormat);
+		const onUserPress = () => navToRoomInfo(navParam);
+		const isDisabled = author._id === user.id;
+
+		const textContent = (
+			<>
+				{alias || username}
+				{aliasUsername}
+			</>
+		);
+
+		if (SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME.includes(type)) {
+			return (
+				<Text
+					style={[styles.usernameInfoMessage, { color: themes[theme].titleText }]}
+					onPress={onUserPress}
+					disabled={isDisabled}
+				>
+					{textContent}
+				</Text>
+			);
+		}
 
 		return (
 			<View style={styles.container}>
 				<TouchableOpacity
 					style={styles.titleContainer}
-					onPress={() => navToRoomInfo(navParam)}
-					disabled={author._id === user.id}
+					onPress={onUserPress}
+					disabled={isDisabled}
 				>
 					<Text style={[styles.username, { color: themes[theme].titleText }]} numberOfLines={1}>
-						{alias || username}
-						{aliasUsername}
+						{textContent}
 					</Text>
 				</TouchableOpacity>
 				<Text style={[messageStyles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
@@ -77,7 +102,8 @@ User.propTypes = {
 	ts: PropTypes.instanceOf(Date),
 	timeFormat: PropTypes.string,
 	theme: PropTypes.string,
-	navToRoomInfo: PropTypes.func
+	navToRoomInfo: PropTypes.func,
+	type: PropTypes.string
 };
 User.displayName = 'MessageUser';
 

app/containers/message/styles.js

@@ -26,9 +26,6 @@ export default StyleSheet.create({
 	messageContentWithError: {
 		marginLeft: 0
 	},
-	center: {
-		alignItems: 'center'
-	},
 	flex: {
 		flexDirection: 'row'
 		// flex: 1

app/containers/message/utils.js

@@ -40,6 +40,24 @@ export const SYSTEM_MESSAGES = [
 	'thread-created'
 ];
 
+export const SYSTEM_MESSAGE_TYPES = {
+	MESSAGE_REMOVED: 'rm',
+	MESSAGE_PINNED: 'message_pinned',
+	MESSAGE_SNIPPETED: 'message_snippeted',
+	USER_JOINED_CHANNEL: 'uj',
+	USER_JOINED_DISCUSSION: 'ut',
+	USER_LEFT_CHANNEL: 'ul'
+};
+
+export const SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME = [
+	SYSTEM_MESSAGE_TYPES.MESSAGE_REMOVED,
+	SYSTEM_MESSAGE_TYPES.MESSAGE_PINNED,
+	SYSTEM_MESSAGE_TYPES.MESSAGE_SNIPPETED,
+	SYSTEM_MESSAGE_TYPES.USER_JOINED_CHANNEL,
+	SYSTEM_MESSAGE_TYPES.USER_JOINED_DISCUSSION,
+	SYSTEM_MESSAGE_TYPES.USER_LEFT_CHANNEL
+];
+
 export const getInfoMessage = ({
 	type, role, msg, author
 }) => {

app/i18n/locales/en.js

@@ -167,7 +167,7 @@ export default {
 	Create_Channel: 'Create Channel',
 	Create_Direct_Messages: 'Create Direct Messages',
 	Create_Discussion: 'Create Discussion',
-	Created_snippet: 'Created a snippet',
+	Created_snippet: 'created a snippet',
 	Create_a_new_workspace: 'Create a new workspace',
 	Create: 'Create',
 	Custom_Status: 'Custom Status',
@@ -247,9 +247,9 @@ export default {
 	Group_by_favorites: 'Group favorites',
 	Group_by_type: 'Group by type',
 	Hide: 'Hide',
-	Has_joined_the_channel: 'Has joined the channel',
-	Has_joined_the_conversation: 'Has joined the conversation',
-	Has_left_the_channel: 'Has left the channel',
+	Has_joined_the_channel: 'has joined the channel',
+	Has_joined_the_conversation: 'has joined the conversation',
+	Has_left_the_channel: 'has left the channel',
 	Hide_System_Messages: 'Hide System Messages',
 	Hide_type_messages: 'Hide "{{type}}" messages',
 	How_It_Works: 'How It Works',

app/i18n/locales/es-ES.js

@@ -146,7 +146,7 @@ export default {
 	Whats_the_password_for_your_certificate: '¿Cuál es la contraseña de tu cerficiado?',
 	Create_account: 'Crear una cuenta',
 	Create_Channel: 'Crear Sala',
-	Created_snippet: 'Crear snippet',
+	Created_snippet: 'crear snippet',
 	Create_a_new_workspace: 'Crear un Workspace',
 	Create: 'Crear',
 	Dark: 'Óscuro',
@@ -192,9 +192,9 @@ export default {
 	Group_by_favorites: 'Agrupar por favoritos',
 	Group_by_type: 'Agrupar por tipo',
 	Hide: 'Ocultar',
-	Has_joined_the_channel: 'Se ha unido al canal',
-	Has_joined_the_conversation: 'Se ha unido a la conversación',
-	Has_left_the_channel: 'Ha dejado el canal',
+	Has_joined_the_channel: 'se ha unido al canal',
+	Has_joined_the_conversation: 'se ha unido a la conversación',
+	Has_left_the_channel: 'ha dejado el canal',
 	In_App_And_Desktop: 'In-app and Desktop',
 	In_App_and_Desktop_Alert_info: 'Muestra un banner en la parte superior de la pantalla cuando la aplicación está abierta y muestra una notificación en el escritorio',
 	Invisible: 'Invisible',

app/i18n/locales/fr.js

@@ -163,7 +163,7 @@ export default {
 	Create_Channel: 'Créer un canal',
 	Create_Direct_Messages: 'Créer un message direct',
 	Create_Discussion: 'Créer une Discussion',
-	Created_snippet: 'Créé un extrait',
+	Created_snippet: 'créé un extrait',
 	Create_a_new_workspace: 'Créer un nouvel espace de travail',
 	Create: 'Créer',
 	Custom_Status: 'Statut Personnalisé',
@@ -225,9 +225,9 @@ export default {
 	Group_by_favorites: 'Grouper par favoris',
 	Group_by_type: 'Grouper par type',
 	Hide: 'Cacher',
-	Has_joined_the_channel: 'A rejoint le canal',
-	Has_joined_the_conversation: 'A rejoint la conversation',
-	Has_left_the_channel: 'A quitté la chaîne',
+	Has_joined_the_channel: 'a rejoint le canal',
+	Has_joined_the_conversation: 'a rejoint la conversation',
+	Has_left_the_channel: 'a quitté la chaîne',
 	Hide_System_Messages: 'Masquer les messages système',
 	Hide_type_messages: 'Masquer les messages "{{type}}"',
 	Message_HideType_uj: 'L\'utilisateur a rejoint',

app/i18n/locales/nl.js

@@ -148,7 +148,7 @@ export default {
 	Whats_the_password_for_your_certificate: 'Wat is het wachtwoord voor je certificate?',
 	Create_account: 'Maak een account',
 	Create_Channel: 'Maak een kanaal',
-	Created_snippet: 'Snippet gemaakt',
+	Created_snippet: 'snippet gemaakt',
 	Create_a_new_workspace: 'Een nieuwe workspace maken',
 	Create: 'Maken',
 	Dark: 'Donker',
@@ -197,9 +197,9 @@ export default {
 	Group_by_favorites: 'Sorteer op favorieten',
 	Group_by_type: 'Sorteer op type',
 	Hide: 'Verberg',
-	Has_joined_the_channel: 'Is bij het kanaal gekomen',
-	Has_joined_the_conversation: 'Neemt deel aan het gesprek',
-	Has_left_the_channel: 'Heeft het kanaal verlaten',
+	Has_joined_the_channel: 'is bij het kanaal gekomen',
+	Has_joined_the_conversation: 'neemt deel aan het gesprek',
+	Has_left_the_channel: 'heeft het kanaal verlaten',
 	In_App_And_Desktop: 'In-app en Desktop',
 	In_App_and_Desktop_Alert_info: 'Laat een banner bovenaan het scherm zien als de app open is en geeft een notificatie op de desktop',
 	Invisible: 'Onzichtbaar',

app/i18n/locales/pt-BR.js

@@ -167,7 +167,7 @@ export default {
 	Create_Channel: 'Criar Canal',
 	Create_Direct_Messages: 'Criar Mensagens Diretas',
 	Create_Discussion: 'Criar Discussão',
-	Created_snippet: 'Criou um snippet',
+	Created_snippet: 'criou um snippet',
 	Create_a_new_workspace: 'Criar nova área de trabalho',
 	Create: 'Criar',
 	Dark: 'Escuro',
@@ -241,9 +241,9 @@ export default {
 	Generate_New_Link: 'Gerar novo convite',
 	Group_by_favorites: 'Agrupar favoritos',
 	Group_by_type: 'Agrupar por tipo',
-	Has_joined_the_channel: 'Entrou no canal',
-	Has_joined_the_conversation: 'Entrou na conversa',
-	Has_left_the_channel: 'Saiu da conversa',
+	Has_joined_the_channel: 'entrou no canal',
+	Has_joined_the_conversation: 'entrou na conversa',
+	Has_left_the_channel: 'saiu da conversa',
 	Hide_System_Messages: 'Esconder mensagens do sistema',
 	Hide_type_messages: 'Esconder mensagens de "{{type}}"',
 	Message_HideType_uj: 'Utilizador Entrou',

app/i18n/locales/pt-PT.js

@@ -130,7 +130,7 @@ export default {
 	Permalink: 'Link permanente',
 	Create_account: 'Criar uma conta',
 	Create_Channel: 'Criar Canal',
-	Created_snippet: 'Criado um extracto',
+	Created_snippet: 'criado um extracto',
 	Create_a_new_workspace: 'Criar um novo espaço de trabalho',
 	Create: 'Criar',
 	Delete_Room_Warning: 'Apagar uma sala irá remover todas as mensagens contidas nela. Isto não pode ser desfeito.',
@@ -163,9 +163,9 @@ export default {
 	Forgot_Password: 'Esquecer Palavra-passe',
 	Group_by_favorites: 'Agrupar por favoritos',
 	Group_by_type: 'Agrupar por tipo',
-	Has_joined_the_channel: 'Entrou no canal',
-	Has_joined_the_conversation: 'Entrou na conversa',
-	Has_left_the_channel: 'Saiu do canal',
+	Has_joined_the_channel: 'entrou no canal',
+	Has_joined_the_conversation: 'entrou na conversa',
+	Has_left_the_channel: 'saiu do canal',
 	Invisible: 'Invisível',
 	Invite: 'Convidar',
 	is_a_valid_RocketChat_instance: 'é uma instância válida do Rocket.Chat',

app/i18n/locales/ru.js

@@ -167,7 +167,7 @@ export default {
 	Create_Channel: 'Создать канал',
 	Create_Direct_Messages: 'Создать личное сообщение',
 	Create_Discussion: 'Создать обсуждение',
-	Created_snippet: 'Создать сниппет',
+	Created_snippet: 'создать сниппет',
 	Create_a_new_workspace: 'Новое рабочее пространство',
 	Create: 'Создать',
 	Custom_Status: 'Персонализированный Статус',
@@ -247,9 +247,9 @@ export default {
 	Group_by_favorites: 'По избранным',
 	Group_by_type: 'По типу',
 	Hide: 'Скрыть',
-	Has_joined_the_channel: 'Присоединился к каналу',
-	Has_joined_the_conversation: 'Присоединился к беседе',
-	Has_left_the_channel: 'Покинул канал',
+	Has_joined_the_channel: 'присоединился к каналу',
+	Has_joined_the_conversation: 'присоединился к беседе',
+	Has_left_the_channel: 'покинул канал',
 	Hide_System_Messages: 'Скрыть Системные Сообщения',
 	Hide_type_messages: 'Скрыть "{{type}}" сообщения',
 	How_It_Works: 'Как Это Работает',