From cb416bb2a7e76784ad6129e2b6dd3af807682bd9 Mon Sep 17 00:00:00 2001 From: Filipe Marins Date: Wed, 20 Apr 2022 22:10:16 -0300 Subject: [PATCH] [FIX] Add select message to system message, thread preview and allow 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 Co-authored-by: gabriellsh Co-authored-by: dougfabris --- .../MessageList/components/MessageSystem.tsx | 12 ++- .../components/ThreadMessagePreview.tsx | 19 +++- .../ExportMessages/MailExportForm.tsx | 27 +++++- apps/meteor/package.json | 2 +- yarn.lock | 90 ++++++++++++++----- 5 files changed, 119 insertions(+), 31 deletions(-) diff --git a/apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx b/apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx index 2a1089556181..e6d9bf36038b 100644 --- a/apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx +++ b/apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx @@ -7,6 +7,7 @@ import { MessageSystemName, MessageSystemTimestamp, MessageSystemBlock, + CheckBox, MessageUsername, } from '@rocket.chat/fuselage'; import React, { FC, memo } from 'react'; @@ -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(); @@ -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 ( - + - + {!isSelecting && } + {isSelecting && } diff --git a/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx b/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx index f6f0d3a23daa..3ad7dce8d73a 100644 --- a/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx +++ b/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx @@ -9,6 +9,7 @@ import { ThreadMessageOrigin, ThreadMessageBody, ThreadMessageUnfollow, + CheckBox, } from '@rocket.chat/fuselage'; import React, { FC } from 'react'; @@ -16,6 +17,7 @@ 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'; @@ -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 ( - + {!sequential && ( @@ -40,9 +52,10 @@ export const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boo )} - + - + {!isSelecting && } + {isSelecting && } {message.ignored ? t('Message_Ignored') : message.msg} diff --git a/apps/meteor/client/views/room/contextualBar/ExportMessages/MailExportForm.tsx b/apps/meteor/client/views/room/contextualBar/ExportMessages/MailExportForm.tsx index b3691623a2d0..85c3a5aa8257 100644 --- a/apps/meteor/client/views/room/contextualBar/ExportMessages/MailExportForm.tsx +++ b/apps/meteor/client/views/room/contextualBar/ExportMessages/MailExportForm.tsx @@ -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; @@ -35,12 +36,13 @@ const MailExportForm: FC = ({ onCancel, rid }) => { const room = useUserRoom(rid); const roomName = room?.t && roomCoordinator.getRoomName(room.t, room); - const [selectedMessages, setSelected] = useState([]); const [errorMessage, setErrorMessage] = useState(); - const messages = selectedMessageStore ? selectedMessageStore.getSelectedMessages() : selectedMessages; + const messages = selectedMessageStore.getSelectedMessages(); const count = useCountSelected(); + const messageList = useMessages({ rid }); + const { values, handlers } = useForm({ dateFrom: '', dateTo: '', @@ -54,7 +56,6 @@ const MailExportForm: FC = ({ onCancel, rid }) => { const { toUsers, additionalEmails, subject } = values as MailExportFormValues; const clearSelection = useMutableCallback(() => { - setSelected([]); selectedMessageStore.clearStore(); }); @@ -65,10 +66,28 @@ const MailExportForm: FC = ({ 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; diff --git a/apps/meteor/package.json b/apps/meteor/package.json index 8f5e4d327096..60703dfd5e73 100644 --- a/apps/meteor/package.json +++ b/apps/meteor/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 69f47f52dcf3..69d0486af277 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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: @@ -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: @@ -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 @@ -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: @@ -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: @@ -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 @@ -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 @@ -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 @@ -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"