[IMPROVEMENT] Add username on status messages (#2553)

* 1689 - missing user name for status messages

* 1689 - missing user name for status messages. Fixed broken e2e test "should pin message".

* Minor tweak

* Remove center style

* Small refactor on User

* Remove toLowerCase

* Update tests

Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Dave Koo 2020-12-01 11:26:03 -08:00 committed by GitHub
parent 274f50ca6e
commit b0b9d62a91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 371 additions and 380 deletions

View File

@ -17387,14 +17387,9 @@ exports[`Storyshots Message list message 1`] = `
</View>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -33641,14 +33636,9 @@ exports[`Storyshots Message list message 1`] = `
</View>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -33875,14 +33865,9 @@ exports[`Storyshots Message list message 1`] = `
</View>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -34109,14 +34094,9 @@ exports[`Storyshots Message list message 1`] = `
</View>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -34343,14 +34323,9 @@ exports[`Storyshots Message list message 1`] = `
</View>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -34577,14 +34552,9 @@ exports[`Storyshots Message list message 1`] = `
</View>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -34811,14 +34781,9 @@ exports[`Storyshots Message list message 1`] = `
</View>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -35045,14 +35010,9 @@ exports[`Storyshots Message list message 1`] = `
</View>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -35598,14 +35558,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -35746,14 +35701,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -35894,14 +35844,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -36147,14 +36092,9 @@ exports[`Storyshots Message list message 1`] = `
</View>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -36295,14 +36235,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -36443,14 +36378,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -36591,14 +36521,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -41972,14 +41897,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -42061,6 +41981,28 @@ exports[`Storyshots Message list message 1`] = `
]
}
>
<Text>
<Text
disabled={false}
onPress={[Function]}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"textAlign": "left",
},
Object {
"color": "#0d0e12",
},
]
}
>
diego.mello
</Text>
<Text
accessibilityLabel="Message removed"
style={
@ -42081,6 +42023,7 @@ exports[`Storyshots Message list message 1`] = `
>
Message removed
</Text>
</Text>
</View>
</View>
</View>
@ -42139,14 +42082,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -42228,8 +42166,30 @@ exports[`Storyshots Message list message 1`] = `
]
}
>
<Text>
<Text
accessibilityLabel="Has joined the channel"
disabled={false}
onPress={[Function]}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"textAlign": "left",
},
Object {
"color": "#0d0e12",
},
]
}
>
diego.mello
</Text>
<Text
accessibilityLabel="has joined the channel"
style={
Array [
Object {
@ -42246,7 +42206,8 @@ exports[`Storyshots Message list message 1`] = `
]
}
>
Has joined the channel
has joined the channel
</Text>
</Text>
</View>
</View>
@ -42306,14 +42267,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -42473,14 +42429,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -42562,6 +42513,28 @@ exports[`Storyshots Message list message 1`] = `
]
}
>
<Text>
<Text
disabled={false}
onPress={[Function]}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"textAlign": "left",
},
Object {
"color": "#0d0e12",
},
]
}
>
diego.mello
</Text>
<Text
accessibilityLabel="Message pinned"
style={
@ -42582,6 +42555,7 @@ exports[`Storyshots Message list message 1`] = `
>
Message pinned
</Text>
</Text>
</View>
</View>
</View>
@ -42640,14 +42614,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -42729,8 +42698,30 @@ exports[`Storyshots Message list message 1`] = `
]
}
>
<Text>
<Text
accessibilityLabel="Has left the channel"
disabled={false}
onPress={[Function]}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"textAlign": "left",
},
Object {
"color": "#0d0e12",
},
]
}
>
diego.mello
</Text>
<Text
accessibilityLabel="has left the channel"
style={
Array [
Object {
@ -42747,7 +42738,8 @@ exports[`Storyshots Message list message 1`] = `
]
}
>
Has left the channel
has left the channel
</Text>
</Text>
</View>
</View>
@ -42807,14 +42799,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -42974,14 +42961,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -43141,14 +43123,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -43308,14 +43285,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -43475,14 +43447,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -43642,14 +43609,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -43809,14 +43771,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -43976,14 +43933,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -44143,14 +44095,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -44310,14 +44257,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View
@ -44477,14 +44419,9 @@ exports[`Storyshots Message list message 1`] = `
>
<View
style={
Array [
Object {
"flexDirection": "row",
},
Object {
"alignItems": "center",
},
]
}
}
>
<View

View File

@ -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;

View File

@ -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={[

View File

@ -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';

View File

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

View File

@ -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
}) => {

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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: 'Как Это Работает',

View File

@ -233,7 +233,7 @@ describe('Room screen', () => {
await pinMessage('pin')
await waitFor(element(by.label(`${ data.random }pin`)).atIndex(0)).toBeVisible().withTimeout(2000);
await waitFor(element(by.label('Message pinned')).atIndex(0)).toBeVisible().withTimeout(2000);
await waitFor(element(by.label(`${ data.users.regular.username } Message pinned`)).atIndex(0)).toBeVisible().withTimeout(2000);
await element(by.label(`${ data.random }pin`)).atIndex(0).longPress();
await waitFor(element(by.id('action-sheet'))).toExist().withTimeout(1000);
await expect(element(by.id('action-sheet-handle'))).toBeVisible();