Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Regression: Add select message to system message and thread preview and allow select on legacy template #25251

Merged
merged 5 commits into from
Apr 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
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
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
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
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