apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: Display Avatar Preference not hiding avatars on messages (#27072)

Browse Source 
Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
pull/28430/head^2
Nishant Patel 3 years ago committed by GitHub
parent 8db691d730
commit 13569f5475
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 105 additions and 41 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 15
      apps/meteor/client/components/message/variants/RoomMessage.tsx
  2. 5
      apps/meteor/client/components/message/variants/SystemMessage.tsx
  3. 5
      apps/meteor/client/components/message/variants/ThreadMessage.tsx
  4. 8
      apps/meteor/client/components/message/variants/ThreadMessagePreview.spec.tsx
  5. 5
      apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx
  6. 21
      apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx
  7. 7
      apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesVerticalBar.tsx
  8. 7
      apps/meteor/client/views/room/MessageList/MessageList.tsx
  9. 6
      apps/meteor/client/views/room/components/contextualBar/MessageListTab.tsx
  10. 14
      apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx
  11. 10
      apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
  12. 18
      apps/meteor/ee/client/views/audit/components/AuditMessageList.tsx
  13. 25
      apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx

15
apps/meteor/client/components/message/variants/RoomMessage.tsx
Unescape View File

@ -24,6 +24,7 @@ import RoomMessageContent from './room/RoomMessageContent';
type RoomMessageProps = {
message: IMessage & { ignored?: boolean };
showUserAvatar: boolean;
sequential: boolean;
unread: boolean;
mention: boolean;
@ -33,7 +34,17 @@ type RoomMessageProps = {
searchText?: string;
};
const RoomMessage = ({ message, sequential, all, mention, unread, context, ignoredUser, searchText }: RoomMessageProps): ReactElement => {
const RoomMessage = ({
message,
showUserAvatar,
sequential,
all,
mention,
unread,
context,
ignoredUser,
searchText,
}: RoomMessageProps): ReactElement => {
const uid = useUserId();
const editing = useIsMessageHighlight(message._id);
const [displayIgnoredMessage, toggleDisplayIgnoredMessage] = useToggle(false);
@ -68,7 +79,7 @@ const RoomMessage = ({ message, sequential, all, mention, unread, context, ignor
aria-busy={message.temp}
>
<MessageLeftContainer>
{!sequential && message.u.username && !selecting && (
{!sequential && message.u.username && !selecting && showUserAvatar && (
<UserAvatar
url={message.avatar}
username={message.u.username}

5
apps/meteor/client/components/message/variants/SystemMessage.tsx
Unescape View File

@ -36,9 +36,10 @@ import { useMessageListShowRealName, useMessageListShowUsername } from '../list/
type SystemMessageProps = {
message: IMessage;
showUserAvatar: boolean;
};
const SystemMessage = ({ message }: SystemMessageProps): ReactElement => {
const SystemMessage = ({ message, showUserAvatar }: SystemMessageProps): ReactElement => {
const t = useTranslation();
const formatTime = useFormatTime();
const formatDateAndTime = useFormatDateAndTime();
@ -65,7 +66,7 @@ const SystemMessage = ({ message }: SystemMessageProps): ReactElement => {
data-system-message-type={message.t}
>
<MessageSystemLeftContainer>
{!isSelecting && <UserAvatar username={message.u.username} size='x18' />}
{!isSelecting && showUserAvatar && <UserAvatar username={message.u.username} size='x18' />}
{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
</MessageSystemLeftContainer>
<MessageSystemContainer>

5
apps/meteor/client/components/message/variants/ThreadMessage.tsx
Unescape View File

@ -19,9 +19,10 @@ type ThreadMessageProps = {
message: IThreadMessage | IThreadMainMessage;
unread: boolean;
sequential: boolean;
showUserAvatar: boolean;
};
const ThreadMessage = ({ message, sequential, unread }: ThreadMessageProps): ReactElement => {
const ThreadMessage = ({ message, sequential, unread, showUserAvatar }: ThreadMessageProps): ReactElement => {
const uid = useUserId();
const editing = useIsMessageHighlight(message._id);
const [ignored, toggleIgnoring] = useToggle((message as { ignored?: boolean }).ignored);
@ -47,7 +48,7 @@ const ThreadMessage = ({ message, sequential, unread }: ThreadMessageProps): Rea
data-qa-type='message'
>
<MessageLeftContainer>
{!sequential && message.u.username && (
{!sequential && message.u.username && showUserAvatar && (
<UserAvatar
url={message.avatar}
username={message.u.username}

8
apps/meteor/client/components/message/variants/ThreadMessagePreview.spec.tsx
Unescape View File

@ -48,7 +48,7 @@ describe('ThreadMessagePreview', () => {
it('should render the message when exists', () => {
const ThreadMessagePreview = loadMock();
render(<ThreadMessagePreview message={fakeMessage} sequential={true} />, { wrapper: ProvidersMock });
render(<ThreadMessagePreview message={fakeMessage} sequential={true} showUserAvatar={true} />, { wrapper: ProvidersMock });
expect(screen.getByText(fakeMessage.msg)).to.exist;
});
@ -57,7 +57,7 @@ describe('ThreadMessagePreview', () => {
const ThreadMessagePreview = loadMock();
const message = { ...fakeMessage, ignored: true };
render(<ThreadMessagePreview message={message} sequential={true} />, { wrapper: ProvidersMock });
render(<ThreadMessagePreview message={message} sequential={true} showUserAvatar={true} />, { wrapper: ProvidersMock });
expect(screen.getByText('Message_Ignored')).to.exist;
});
@ -71,7 +71,7 @@ describe('ThreadMessagePreview', () => {
},
});
render(<ThreadMessagePreview message={fakeMessage} sequential={false} />, { wrapper: ProvidersMock });
render(<ThreadMessagePreview message={fakeMessage} sequential={false} showUserAvatar={true} />, { wrapper: ProvidersMock });
expect(screen.getByText('Parent Message')).to.exist;
});
@ -92,7 +92,7 @@ describe('ThreadMessagePreview', () => {
},
});
render(<ThreadMessagePreview message={fakeMessage} sequential={false} />, { wrapper: ProvidersMock });
render(<ThreadMessagePreview message={fakeMessage} sequential={false} showUserAvatar={true} />, { wrapper: ProvidersMock });
expect(screen.getByText('System Message')).to.exist;
});

5
apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx
Unescape View File

@ -33,10 +33,11 @@ import ThreadMessagePreviewBody from './threadPreview/ThreadMessagePreviewBody';
type ThreadMessagePreviewProps = {
message: IThreadMessage;
showUserAvatar: boolean;
sequential: boolean;
};
const ThreadMessagePreview = ({ message, sequential, ...props }: ThreadMessagePreviewProps): ReactElement => {
const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }: ThreadMessagePreviewProps): ReactElement => {
const parentMessage = useParentMessage(message.tmid);
const translated = useShowTranslated(message);
@ -94,7 +95,7 @@ const ThreadMessagePreview = ({ message, sequential, ...props }: ThreadMessagePr
)}
<ThreadMessageRow onClick={!isSelecting ? () => goToThread({ rid: message.rid, tmid: message.tmid, msg: message._id }) : undefined}>
<ThreadMessageLeftContainer>
{!isSelecting && <UserAvatar username={message.u.username} size='x18' />}
{!isSelecting && showUserAvatar && <UserAvatar username={message.u.username} size='x18' />}
{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
</ThreadMessageLeftContainer>
<ThreadMessageContainer>

21
apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx
Unescape View File

@ -34,7 +34,8 @@ const ContactHistoryMessage: FC<{
message: IMessage;
sequential: boolean;
isNewDay: boolean;
}> = ({ message, sequential, isNewDay }) => {
showUserAvatar: boolean;
}> = ({ message, sequential, isNewDay, showUserAvatar }) => {
const format = useFormatDate();
const formatTime = useFormatTime();
@ -45,13 +46,15 @@ const ContactHistoryMessage: FC<{
return (
<MessageSystem>
<MessageSystemLeftContainer>
<UserAvatar
url={message.avatar}
username={message.u.username}
size={'x18'}
onClick={chat?.userCard.open(message.u.username)}
style={{ cursor: 'pointer' }}
/>
{showUserAvatar && (
<UserAvatar
url={message.avatar}
username={message.u.username}
size={'x18'}
onClick={chat?.userCard.open(message.u.username)}
style={{ cursor: 'pointer' }}
/>
)}
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
@ -71,7 +74,7 @@ const ContactHistoryMessage: FC<{
{isNewDay && <MessageDivider>{format(message.ts)}</MessageDivider>}
<MessageTemplate isPending={message.temp} sequential={sequential} role='listitem' data-qa='chat-history-message'>
<MessageLeftContainer>
{!sequential && message.u.username && (
{!sequential && message.u.username && showUserAvatar && (
<UserAvatar
url={message.avatar}
username={message.u.username}

7
apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesVerticalBar.tsx
Unescape View File

@ -1,5 +1,5 @@
import { Box, Icon, Margins, States, StatesIcon, StatesSubtitle, StatesTitle, TextInput, Throbber } from '@rocket.chat/fuselage';
import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
import { useSetting, useTranslation, useUserPreference } from '@rocket.chat/ui-contexts';
import type { ChangeEvent, Dispatch, ReactElement, SetStateAction } from 'react';
import React, { useMemo, useState } from 'react';
import { Virtuoso } from 'react-virtuoso';
@ -24,6 +24,7 @@ const ContactHistoryMessagesVerticalBar = ({
}): ReactElement => {
const [text, setText] = useState('');
const t = useTranslation();
const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');
const { itemsList: messageList, loadMoreItems } = useHistoryMessageList(
useMemo(() => ({ roomId: chatId, filter: text }), [chatId, text]),
);
@ -99,7 +100,9 @@ const ContactHistoryMessagesVerticalBar = ({
const lastMessage = messages[index - 1];
const isSequential = isMessageSequential(data, lastMessage, messageGroupingPeriod);
const isNewDay = isMessageNewDay(data, lastMessage);
return <ContactHistoryMessage message={data} sequential={isSequential} isNewDay={isNewDay} />;
return (
<ContactHistoryMessage message={data} sequential={isSequential} isNewDay={isNewDay} showUserAvatar={showUserAvatar} />
);
}}
/>
)}

7
apps/meteor/client/views/room/MessageList/MessageList.tsx
Unescape View File

@ -1,7 +1,7 @@
import type { IRoom } from '@rocket.chat/core-typings';
import { isThreadMessage } from '@rocket.chat/core-typings';
import { MessageDivider } from '@rocket.chat/fuselage';
import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
import { useSetting, useTranslation, useUserPreference } from '@rocket.chat/ui-contexts';
import type { ReactElement, ComponentProps } from 'react';
import React, { Fragment, memo } from 'react';
@ -27,6 +27,7 @@ export const MessageList = ({ rid, scrollMessageList }: MessageListProps): React
const t = useTranslation();
const messages = useMessages({ rid });
const subscription = useRoomSubscription();
const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');
const messageGroupingPeriod = Number(useSetting('Message_GroupingPeriod'));
const formatDate = useFormatDate();
@ -61,6 +62,7 @@ export const MessageList = ({ rid, scrollMessageList }: MessageListProps): React
{visible && (
<RoomMessage
message={message}
showUserAvatar={showUserAvatar}
sequential={shouldShowAsSequential}
unread={unread}
mention={mention}
@ -77,10 +79,11 @@ export const MessageList = ({ rid, scrollMessageList }: MessageListProps): React
data-sequential={sequential}
sequential={shouldShowAsSequential}
message={message}
showUserAvatar={showUserAvatar}
/>
)}
{system && <SystemMessage message={message} />}
{system && <SystemMessage showUserAvatar={showUserAvatar} message={message} />}
</Fragment>
);
})}

6
apps/meteor/client/views/room/components/contextualBar/MessageListTab.tsx
Unescape View File

@ -1,7 +1,7 @@
import type { IMessage } from '@rocket.chat/core-typings';
import type { Icon } from '@rocket.chat/fuselage';
import { Box, MessageDivider, Throbber } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import { useTranslation, useUserPreference } from '@rocket.chat/ui-contexts';
import type { UseQueryResult } from '@tanstack/react-query';
import type { ReactElement, ComponentProps, ReactNode } from 'react';
import React, { useCallback } from 'react';
@ -36,6 +36,7 @@ type MessageListTabProps = {
const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryResult }: MessageListTabProps): ReactElement => {
const t = useTranslation();
const formatDate = useFormatDate();
const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');
const closeTabBar = useTabBarClose();
const handleTabBarCloseButtonClick = useCallback(() => {
@ -96,7 +97,7 @@ const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryRes
)}
{system ? (
<SystemMessage message={message} />
<SystemMessage message={message} showUserAvatar={showUserAvatar} />
) : (
<RoomMessage
message={message}
@ -105,6 +106,7 @@ const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryRes
mention={mention}
all={all}
context={context}
showUserAvatar={showUserAvatar}
/>
)}
</>

14
apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx
Unescape View File

@ -1,5 +1,5 @@
import { Box, MessageDivider } from '@rocket.chat/fuselage';
import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
import { useSetting, useTranslation, useUserPreference } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { Fragment, memo, useState } from 'react';
import { Virtuoso } from 'react-virtuoso';
@ -23,15 +23,14 @@ type MessageSearchProps = {
};
const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactElement => {
const t = useTranslation();
const formatDate = useFormatDate();
const pageSize = useSetting<number>('PageSize') ?? 10;
const [limit, setLimit] = useState(pageSize);
const messageSearchQuery = useMessageSearchQuery({ searchText, limit, globalSearch });
const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');
const subscription = useRoomSubscription();
const formatDate = useFormatDate();
const t = useTranslation();
const messageSearchQuery = useMessageSearchQuery({ searchText, limit, globalSearch });
return (
<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} flexBasis={0}>
@ -73,7 +72,7 @@ const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactE
)}
{system ? (
<SystemMessage message={message} />
<SystemMessage message={message} showUserAvatar={showUserAvatar} />
) : (
<RoomMessage
message={message}
@ -83,6 +82,7 @@ const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactE
all={all}
context='search'
searchText={searchText}
showUserAvatar={showUserAvatar}
/>
)}
</Fragment>

10
apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
Unescape View File

@ -60,6 +60,7 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen
const listRef = useMergedRefs<HTMLElement | null>(listScrollRef, listJumpRef);
const hideUsernames = useUserPreference<boolean>('hideUsernames');
const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');
const subscription = useRoomSubscription();
const formatDate = useFormatDate();
@ -101,9 +102,14 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen
)}
<li>
{system ? (
<SystemMessage message={message} />
<SystemMessage message={message} showUserAvatar={showUserAvatar} />
) : (
<ThreadMessage message={message} sequential={shouldShowAsSequential} unread={firstUnread} />
<ThreadMessage
message={message}
sequential={shouldShowAsSequential}
unread={firstUnread}
showUserAvatar={showUserAvatar}
/>
)}
</li>
</Fragment>

18
apps/meteor/ee/client/views/audit/components/AuditMessageList.tsx
Unescape View File

@ -1,5 +1,6 @@
import type { IMessage } from '@rocket.chat/core-typings';
import { MessageDivider } from '@rocket.chat/fuselage';
import { useUserPreference } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { Fragment, memo } from 'react';
@ -15,6 +16,7 @@ type AuditMessageListProps = {
export const AuditMessageList = ({ messages }: AuditMessageListProps): ReactElement => {
const formatDate = useFormatDate();
const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');
return (
<>
@ -26,9 +28,19 @@ export const AuditMessageList = ({ messages }: AuditMessageListProps): ReactElem
<Fragment key={message._id}>
{newDay && <MessageDivider>{formatDate(message.ts)}</MessageDivider>}
{!system && <RoomMessage message={message} sequential={false} unread={false} mention={false} all={false} ignoredUser={false} />}
{system && <SystemMessage message={message} />}
{!system && (
<RoomMessage
message={message}
sequential={false}
unread={false}
mention={false}
all={false}
ignoredUser={false}
showUserAvatar={showUserAvatar}
/>
)}
{system && <SystemMessage message={message} showUserAvatar={showUserAvatar} />}
</Fragment>
);
})}

25
apps/meteor/tests/unit/client/views/room/MessageList/Message.spec.tsx
Unescape View File

@ -52,13 +52,33 @@ const RoomMessage = proxyquire.noCallThru().load('../../../../../../client/compo
describe('Message', () => {
it('should show normal message', () => {
render(<RoomMessage message={baseMessage} sequential={false} all={false} mention={false} unread={false} ignoredUser={false} />);
render(
<RoomMessage
message={baseMessage}
sequential={false}
all={false}
mention={false}
unread={false}
ignoredUser={false}
showUserAvatar={true}
/>,
);
expect(screen.getByText(baseMessage.msg)).to.exist;
});
it('should show ignored message', () => {
render(<RoomMessage message={baseMessage} sequential={false} all={false} mention={false} unread={false} ignoredUser={true} />);
render(
<RoomMessage
message={baseMessage}
sequential={false}
all={false}
mention={false}
unread={false}
ignoredUser={true}
showUserAvatar={true}
/>,
);
expect(screen.getByText('message ignored')).to.exist;
});
@ -72,6 +92,7 @@ describe('Message', () => {
mention={false}
unread={false}
ignoredUser={false}
showUserAvatar={true}
/>,
);

Write Preview
Loading…
Cancel
Save