Skip to content

Commit

Permalink
[FIX] Add select message to system message, thread preview and allow …
Browse files Browse the repository at this point in the history 
…select on legacy template (#25251)

* feat: add export message to system message and thread preview

* fix: enable select on export message at legacy message template

* Update apps/meteor/client/views/room/contextualBar/ExportMessages/MailExportForm.tsx

* chore: update fuselage

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
Co-authored-by: gabriellsh <gabriel.henriques@rocket.chat>
Co-authored-by: dougfabris <devfabris@gmail.com>
  • Loading branch information
@ggazzo @gabriellsh @dougfabris
4 people authored Apr 21, 2022
1 parent 1d94d60 commit cb416bb
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 31 deletions.
12 changes: 10 additions & 2 deletions apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
MessageSystemName,
MessageSystemTimestamp,
MessageSystemBlock,
CheckBox,
MessageUsername,
} from '@rocket.chat/fuselage';
import React, { FC, memo } from 'react';
Expand All @@ -21,6 +22,7 @@ import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
import { UserPresence } from '../../../../lib/presence';
import { useMessageActions, useMessageRunActionLink } from '../../contexts/MessageContext';
import { useMessageListShowRealName, useMessageListShowUsername } from '../contexts/MessageListContext';
import { useIsSelecting, useToggleSelect, useIsSelectedMessage, useCountSelected } from '../contexts/SelectedMessagesContext';

export const MessageSystem: FC<{ message: IMessage }> = ({ message }) => {
const t = useTranslation();
Expand All @@ -36,10 +38,16 @@ export const MessageSystem: FC<{ message: IMessage }> = ({ message }) => {

const messageType = MessageTypes.getType(message);

const isSelecting = useIsSelecting();
const toggleSelected = useToggleSelect(message._id);
const isSelected = useIsSelectedMessage(message._id);
useCountSelected();

return (
<MessageSystemTemplate>
<MessageSystemTemplate onClick={isSelecting ? toggleSelected : undefined} isSelected={isSelected} data-qa-selected={isSelected}>
<MessageSystemLeftContainer>
<UserAvatar username={message.u.username} size='x18' />
{!isSelecting && <UserAvatar username={message.u.username} size='x18' />}
{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
</MessageSystemLeftContainer>
<MessageSystemContainer>
<MessageSystemBlock>
Expand Down
19 changes: 16 additions & 3 deletions apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ import {
ThreadMessageOrigin,
ThreadMessageBody,
ThreadMessageUnfollow,
CheckBox,
} from '@rocket.chat/fuselage';
import React, { FC } from 'react';

import UserAvatar from '../../../../components/avatar/UserAvatar';
import { useTranslation } from '../../../../contexts/TranslationContext';
import { AsyncStatePhase } from '../../../../lib/asyncState';
import { useMessageActions } from '../../contexts/MessageContext';
import { useIsSelecting, useToggleSelect, useIsSelectedMessage, useCountSelected } from '../contexts/SelectedMessagesContext';
import { useMessageBody } from '../hooks/useMessageBody';
import { useParentMessage } from '../hooks/useParentMessage';

Expand All @@ -27,8 +29,18 @@ export const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boo
const body = useMessageBody(parentMessage.value);
const t = useTranslation();

const isSelecting = useIsSelecting();
const toggleSelected = useToggleSelect(message._id);
const isSelected = useIsSelectedMessage(message._id);
useCountSelected();

return (
<ThreadMessageTemplate {...props}>
<ThreadMessageTemplate
{...props}
onClick={isSelecting ? toggleSelected : undefined}
isSelected={isSelected}
data-qa-selected={isSelected}
>
{!sequential && (
<ThreadMessageRow>
<ThreadMessageLeftContainer>
Expand All @@ -40,9 +52,10 @@ export const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boo
</ThreadMessageContainer>
</ThreadMessageRow>
)}
<ThreadMessageRow onClick={!message.ignored ? openThread(message.tmid, message._id) : undefined}>
<ThreadMessageRow onClick={!message.ignored && !isSelecting ? openThread(message.tmid, message._id) : undefined}>
<ThreadMessageLeftContainer>
<UserAvatar username={message.u.username} size='x18' />
{!isSelecting && <UserAvatar username={message.u.username} size='x18' />}
{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
</ThreadMessageLeftContainer>
<ThreadMessageContainer>
<ThreadMessageBody>{message.ignored ? t('Message_Ignored') : message.msg}</ThreadMessageBody>
Expand Down
27 changes: 23 additions & 4 deletions apps/meteor/client/views/room/contextualBar/ExportMessages/MailExportForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useUserRoom } from '../../../../contexts/UserContext';
import { useForm } from '../../../../hooks/useForm';
import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
import { SelectedMessageContext, useCountSelected } from '../../MessageList/contexts/SelectedMessagesContext';
import { useMessages } from '../../MessageList/hooks/useMessages';

type MailExportFormValues = {
dateFrom: string;
Expand All @@ -35,12 +36,13 @@ const MailExportForm: FC<MailExportFormProps> = ({ onCancel, rid }) => {
const room = useUserRoom(rid);
const roomName = room?.t && roomCoordinator.getRoomName(room.t, room);

const [selectedMessages, setSelected] = useState([]);
const [errorMessage, setErrorMessage] = useState<string>();

const messages = selectedMessageStore ? selectedMessageStore.getSelectedMessages() : selectedMessages;
const messages = selectedMessageStore.getSelectedMessages();
const count = useCountSelected();

const messageList = useMessages({ rid });

const { values, handlers } = useForm({
dateFrom: '',
dateTo: '',
Expand All @@ -54,7 +56,6 @@ const MailExportForm: FC<MailExportFormProps> = ({ onCancel, rid }) => {
const { toUsers, additionalEmails, subject } = values as MailExportFormValues;

const clearSelection = useMutableCallback(() => {
setSelected([]);
selectedMessageStore.clearStore();
});

Expand All @@ -65,10 +66,28 @@ const MailExportForm: FC<MailExportFormProps> = ({ onCancel, rid }) => {
};
}, [selectedMessageStore]);

// TODO: chapter day frontend - after 5.0 remove
useEffect(() => {
const $root = $(`#chat-window-${rid}`);

$('.messages-box', $root).addClass('selectable');

const handler = function (this: any): void {
selectedMessageStore.toggle(this.id);
this.classList.toggle('selected');
};

$('.messages-box .message', $root).on('click', handler);

return () => {
$('.messages-box', $root).removeClass('selectable');
$('.messages-box .message', $root).off('click', handler).filter('.selected').removeClass('selected');
};
}, [rid, messageList]);

const { handleToUsers, handleAdditionalEmails, handleSubject } = handlers;

const onChangeUsers = useMutableCallback((value, action) => {
console.log(value, action);
if (!action) {
if (toUsers.includes(value)) {
return;
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@
"@rocket.chat/core-typings": "workspace:^",
"@rocket.chat/css-in-js": "~0.31.9",
"@rocket.chat/emitter": "~0.31.9",
"@rocket.chat/fuselage": "0.32.0-dev.9",
"@rocket.chat/fuselage": "next",
"@rocket.chat/fuselage-hooks": "~0.31.9",
"@rocket.chat/fuselage-polyfills": "~0.31.9",
"@rocket.chat/fuselage-tokens": "~0.31.9",
Expand Down
90 changes: 69 additions & 21 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3405,7 +3405,20 @@ __metadata:
languageName: node
linkType: hard

"@rocket.chat/css-in-js@npm:~0.31.10-dev.1, @rocket.chat/css-in-js@npm:~0.31.10-dev.4":
"@rocket.chat/css-in-js@npm:~0.31.10-dev.12":
version: 0.31.10-dev.12
resolution: "@rocket.chat/css-in-js@npm:0.31.10-dev.12"
dependencies:
"@emotion/hash": ^0.8.0
"@rocket.chat/css-supports": ~0.31.10-dev.12
"@rocket.chat/memo": ~0.31.10-dev.12
"@rocket.chat/stylis-logical-props-middleware": ~0.31.10-dev.12
stylis: ~4.0.13
checksum: 4a08b27a3aa10f6496534681a49d17e542b7659b58a5d2c88be2416b5ef36d65e18b1ecefd444956dd5842f79dc32eb6233f70ea4c98c859b263b2f7fe6872ba
languageName: node
linkType: hard

"@rocket.chat/css-in-js@npm:~0.31.10-dev.4":
version: 0.31.10-dev.4
resolution: "@rocket.chat/css-in-js@npm:0.31.10-dev.4"
dependencies:
Expand All @@ -3427,7 +3440,16 @@ __metadata:
languageName: node
linkType: hard

"@rocket.chat/css-supports@npm:~0.31.10-dev.1, @rocket.chat/css-supports@npm:~0.31.10-dev.4":
"@rocket.chat/css-supports@npm:~0.31.10-dev.12":
version: 0.31.10-dev.12
resolution: "@rocket.chat/css-supports@npm:0.31.10-dev.12"
dependencies:
"@rocket.chat/memo": ~0.31.10-dev.12
checksum: 53b31194b6580252b6e129be11fd4eaacd6d79d4ac59a071f8a9cbdefeb824075caba9da562b4a853b38857ed90c5464994a53646bdd429b573825f285c4d71d
languageName: node
linkType: hard

"@rocket.chat/css-supports@npm:~0.31.10-dev.4":
version: 0.31.10-dev.4
resolution: "@rocket.chat/css-supports@npm:0.31.10-dev.4"
dependencies:
Expand Down Expand Up @@ -3502,7 +3524,14 @@ __metadata:
languageName: node
linkType: hard

"@rocket.chat/fuselage-tokens@npm:~0.31.10-dev.1, @rocket.chat/fuselage-tokens@npm:~0.31.10-dev.4":
"@rocket.chat/fuselage-tokens@npm:~0.31.10-dev.12":
version: 0.31.10-dev.12
resolution: "@rocket.chat/fuselage-tokens@npm:0.31.10-dev.12"
checksum: 35fa1120466ea649b9fe06fe1c386b74d8b190b3c75ae444e8e97ea454f55b61e8c3271f1e3d6e595620e863606d655ce40ad4e5c5801e60a667c69068579c40
languageName: node
linkType: hard

"@rocket.chat/fuselage-tokens@npm:~0.31.10-dev.4":
version: 0.31.10-dev.4
resolution: "@rocket.chat/fuselage-tokens@npm:0.31.10-dev.4"
checksum: 45c25d80dbd8b547ec6fc430aeeffcf43c6ad217efd4defc074bdf4af72e98296fbec5d0985fbc4f97400c763003a56da639d660c1126efdc4ab6442170d55b6
Expand All @@ -3527,14 +3556,14 @@ __metadata:
languageName: node
linkType: hard

"@rocket.chat/fuselage@npm:0.32.0-dev.9":
version: 0.32.0-dev.9
resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.9"
"@rocket.chat/fuselage@npm:^0.31.9":
version: 0.31.9
resolution: "@rocket.chat/fuselage@npm:0.31.9"
dependencies:
"@rocket.chat/css-in-js": ~0.31.10-dev.1
"@rocket.chat/css-supports": ~0.31.10-dev.1
"@rocket.chat/fuselage-tokens": ~0.31.10-dev.1
"@rocket.chat/memo": ~0.31.10-dev.1
"@rocket.chat/css-in-js": ^0.31.9
"@rocket.chat/css-supports": ^0.31.9
"@rocket.chat/fuselage-tokens": ^0.31.9
"@rocket.chat/memo": ^0.31.9
invariant: ^2.2.4
react-keyed-flatten-children: ^1.3.0
peerDependencies:
Expand All @@ -3544,18 +3573,18 @@ __metadata:
react: ^17.0.2
react-dom: ^17.0.2
react-virtuoso: 1.2.4
checksum: dd6362b760c1320deb34fb362777aba1d4413f70f4190fe807b6edb84992fb81fe488ec05160dbb4102e46c638b763e48382b355c45a890b6b30566b6df93ee8
checksum: a6391bae88f46ccbdab3023fc4a312cc1b0b17c4f739dd83c0aaf1c9f304020878d19009f58da1e69fe0c6fe29c8ac839dca7983523e3e82b1193dc1dc9fe3ac
languageName: node
linkType: hard

"@rocket.chat/fuselage@npm:^0.31.9":
version: 0.31.9
resolution: "@rocket.chat/fuselage@npm:0.31.9"
"@rocket.chat/fuselage@npm:next":
version: 0.32.0-dev.20
resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.20"
dependencies:
"@rocket.chat/css-in-js": ^0.31.9
"@rocket.chat/css-supports": ^0.31.9
"@rocket.chat/fuselage-tokens": ^0.31.9
"@rocket.chat/memo": ^0.31.9
"@rocket.chat/css-in-js": ~0.31.10-dev.12
"@rocket.chat/css-supports": ~0.31.10-dev.12
"@rocket.chat/fuselage-tokens": ~0.31.10-dev.12
"@rocket.chat/memo": ~0.31.10-dev.12
invariant: ^2.2.4
react-keyed-flatten-children: ^1.3.0
peerDependencies:
Expand All @@ -3565,7 +3594,7 @@ __metadata:
react: ^17.0.2
react-dom: ^17.0.2
react-virtuoso: 1.2.4
checksum: a6391bae88f46ccbdab3023fc4a312cc1b0b17c4f739dd83c0aaf1c9f304020878d19009f58da1e69fe0c6fe29c8ac839dca7983523e3e82b1193dc1dc9fe3ac
checksum: b474fcc5fedab6a4e2b9622f24515db82c8add854b5485b7c7d10cae8cb27a82cf6940ba102f2862d339944f677884a9daba2468670a597573b69fbda88a7765
languageName: node
linkType: hard

Expand Down Expand Up @@ -3665,7 +3694,14 @@ __metadata:
languageName: node
linkType: hard

"@rocket.chat/memo@npm:~0.31.10-dev.1, @rocket.chat/memo@npm:~0.31.10-dev.4":
"@rocket.chat/memo@npm:~0.31.10-dev.12":
version: 0.31.10-dev.12
resolution: "@rocket.chat/memo@npm:0.31.10-dev.12"
checksum: 82c3f5f6f0abdc5f99f54ed9d1d031da9bf83322c60b0b7a73b7d2282d2d75f82b6f87ee8e69cf83b4f7090a618020ef4f4a0723b7e75a5ae0dcf29cb4767ba3
languageName: node
linkType: hard

"@rocket.chat/memo@npm:~0.31.10-dev.4":
version: 0.31.10-dev.4
resolution: "@rocket.chat/memo@npm:0.31.10-dev.4"
checksum: a075d1fa2ceab82b50f987f91a63650b1897e496a0cfa15de74722263377d24ffc153a0b7fe70aab3d7924be21b447087495eeea9f667420487c803fc73339de
Expand Down Expand Up @@ -3704,7 +3740,7 @@ __metadata:
"@rocket.chat/css-in-js": ~0.31.9
"@rocket.chat/emitter": ~0.31.9
"@rocket.chat/eslint-config": ^0.4.0
"@rocket.chat/fuselage": 0.32.0-dev.9
"@rocket.chat/fuselage": next
"@rocket.chat/fuselage-hooks": ~0.31.9
"@rocket.chat/fuselage-polyfills": ~0.31.9
"@rocket.chat/fuselage-tokens": ~0.31.9
Expand Down Expand Up @@ -4072,6 +4108,18 @@ __metadata:
languageName: node
linkType: hard

"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.10-dev.12":
version: 0.31.10-dev.12
resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.10-dev.12"
dependencies:
"@rocket.chat/css-supports": ~0.31.10-dev.12
tslib: ^2.3.1
peerDependencies:
stylis: 4.0.10
checksum: 93ca6ade79895196f23171828660f0b326c066c9b1bf7920dde978c8b3ec9f69b82213f74d944ed8e2b7358f3ecdc9bf20e4cc4a7dcff9fa79d8ddbce3c7238a
languageName: node
linkType: hard

"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.10-dev.4":
version: 0.31.10-dev.4
resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.10-dev.4"
Expand Down

0 comments on commit cb416bb

Please sign in to comment.