From 7ec1b5bc9f3c26fa95a6a08b722dcac3601c3286 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Wed, 3 Jun 2026 14:57:16 -0300 Subject: [PATCH] refactor: remove unnecessary ReactElement type annotations in components - Updated multiple components to remove explicit ReactElement return type annotations, simplifying the code and improving readability. - Components affected include ThreadMetrics, ThreadMetricsFollow, ThreadMetricsParticipants, UrlPreviews, MessageAction, AttachmentsItem, DefaultAttachment, QuoteAttachment, ActionAttachmentButton, AttachmentAuthorAvatar, CollapsibleContent, Reaction, OEmbedCollapsible, OEmbedHtmlPreview, OEmbedImagePreview, OEmbedLinkPreview, OEmbedPreviewContent, OEmbedResolver, UrlAudioPreview, UrlImagePreview, UrlPreview, UrlPreviewResolver, UrlVideoPreview, MessageRoles, AllMentionNotification, MessageNotification, UnreadMessagesNotification, MessageToolbar, DatePicker, FormatSelector, Preview, TimePicker, TimezoneSelector, RoomMessage, SystemMessage, ThreadMessage, ThreadMessagePreview, RoomMessageContent, ThreadMessageContent, and ThreadMessagePreviewBody. --- apps/meteor/client/components/Emoji.tsx | 3 +-- .../client/components/FingerprintChangeModal.tsx | 3 +-- .../FingerprintChangeModalConfirmation.tsx | 8 +------- apps/meteor/client/components/GazzodownText.tsx | 4 ++-- .../GenericUpsellModal/GenericUpsellModal.tsx | 7 +++---- apps/meteor/client/components/ListSkeleton.tsx | 3 +-- apps/meteor/client/components/LocalTime.tsx | 3 +-- apps/meteor/client/components/NotFoundState.tsx | 3 +-- apps/meteor/client/components/PageSkeleton.tsx | 3 +-- apps/meteor/client/components/RawText.tsx | 5 +---- .../RoomAutoComplete/RoomAutoComplete.tsx | 4 ++-- .../RoomAutoCompleteMultiple.tsx | 8 ++++---- apps/meteor/client/components/RoomIcon/RoomIcon.tsx | 4 ++-- apps/meteor/client/components/Sidebar/ListItem.tsx | 4 ++-- .../components/Sidebar/SidebarGenericItem.tsx | 4 ++-- .../components/SidebarToggler/SidebarToggler.tsx | 3 +-- apps/meteor/client/components/Skeleton.tsx | 4 ++-- apps/meteor/client/components/TextCopy.tsx | 8 ++++---- .../TwoFactorModal/TwoFactorEmailModal.tsx | 3 +-- .../components/TwoFactorModal/TwoFactorModal.tsx | 4 +--- .../TwoFactorModal/TwoFactorPasswordModal.tsx | 3 +-- .../TwoFactorModal/TwoFactorTotpModal.tsx | 3 +-- apps/meteor/client/components/UTCClock.tsx | 3 +-- apps/meteor/client/components/UrlChangeModal.tsx | 3 +-- .../UserAndRoomAutoCompleteMultiple.tsx | 4 ++-- .../UserAutoCompleteMultipleOptions.tsx | 4 ++-- .../client/components/UserCard/UserCardAction.tsx | 6 ++---- .../client/components/UserCard/UserCardActions.tsx | 4 ++-- .../client/components/UserCard/UserCardInfo.tsx | 4 ++-- .../client/components/UserCard/UserCardRole.tsx | 4 ++-- .../client/components/UserCard/UserCardRoles.tsx | 4 ++-- .../client/components/UserCard/UserCardUsername.tsx | 4 ++-- apps/meteor/client/components/UserInfo/UserInfo.tsx | 8 ++++---- .../client/components/UserInfo/UserInfoAction.tsx | 4 ++-- .../client/components/UserInfo/UserInfoAvatar.tsx | 4 ++-- .../client/components/UserInfo/UserInfoUsername.tsx | 6 +++--- .../components/UserStatus/ReactiveUserStatus.tsx | 4 ++-- apps/meteor/client/components/UserStatusMenu.tsx | 8 ++++---- apps/meteor/client/components/WarningModal.tsx | 4 ++-- .../client/components/avatar/RoomAvatarEditor.tsx | 2 +- .../avatar/UserAvatarEditor/UserAvatarEditor.tsx | 2 +- .../connectionStatus/useReconnectCountdown.ts | 2 +- .../components/dashboards/DownloadDataButton.tsx | 4 ++-- .../client/components/dashboards/PeriodSelector.tsx | 3 +-- apps/meteor/client/components/dataView/Counter.tsx | 4 ++-- .../client/components/dataView/CounterSet.tsx | 4 ++-- apps/meteor/client/components/dataView/Growth.tsx | 4 ++-- .../components/dataView/NegativeGrowthSymbol.tsx | 4 ++-- .../components/dataView/PositiveGrowthSymbol.tsx | 4 ++-- .../components/deviceManagement/DeviceIcon.tsx | 3 +-- .../DeviceManagementTable/DeviceManagementTable.tsx | 8 ++++---- .../components/deviceManagement/LoggedOutBanner.tsx | 3 +-- .../client/components/message/IgnoredContent.tsx | 4 ++-- .../components/message/MessageCollapsible.tsx | 4 ++-- .../client/components/message/MessageHeader.tsx | 3 +-- .../components/message/MessageToolbarHolder.tsx | 3 +-- .../components/message/ReadReceiptIndicator.tsx | 3 +-- .../client/components/message/StatusIndicators.tsx | 3 +-- .../client/components/message/content/Action.tsx | 4 ++-- .../components/message/content/Attachments.tsx | 3 +-- .../components/message/content/BroadcastMetrics.tsx | 3 +-- .../message/content/DiscussionMetrics.tsx | 3 +-- .../client/components/message/content/Location.tsx | 3 +-- .../components/message/content/MessageActions.tsx | 3 +-- .../client/components/message/content/Reactions.tsx | 4 ++-- .../components/message/content/ThreadMetrics.tsx | 3 +-- .../message/content/ThreadMetricsFollow.tsx | 4 ++-- .../message/content/ThreadMetricsParticipants.tsx | 3 +-- .../components/message/content/UrlPreviews.tsx | 3 +-- .../message/content/actions/MessageAction.tsx | 3 +-- .../message/content/attachments/AttachmentsItem.tsx | 3 +-- .../content/attachments/DefaultAttachment.tsx | 4 ++-- .../message/content/attachments/QuoteAttachment.tsx | 3 +-- .../attachments/default/ActionAttachmentButton.tsx | 4 ++-- .../structure/AttachmentAuthorAvatar.tsx | 3 +-- .../content/collapsible/CollapsibleContent.tsx | 4 ++-- .../message/content/reactions/Reaction.tsx | 4 ++-- .../content/urlPreviews/OEmbedCollapsible.tsx | 4 ++-- .../content/urlPreviews/OEmbedHtmlPreview.tsx | 3 +-- .../content/urlPreviews/OEmbedImagePreview.tsx | 3 +-- .../content/urlPreviews/OEmbedLinkPreview.tsx | 3 +-- .../content/urlPreviews/OEmbedPreviewContent.tsx | 13 ++----------- .../message/content/urlPreviews/OEmbedResolver.tsx | 4 +--- .../message/content/urlPreviews/UrlAudioPreview.tsx | 3 +-- .../message/content/urlPreviews/UrlImagePreview.tsx | 3 +-- .../message/content/urlPreviews/UrlPreview.tsx | 3 +-- .../content/urlPreviews/UrlPreviewResolver.tsx | 4 +--- .../message/content/urlPreviews/UrlVideoPreview.tsx | 6 ++---- .../components/message/header/MessageRoles.tsx | 3 +-- .../message/notification/AllMentionNotification.tsx | 4 +--- .../message/notification/MessageNotification.tsx | 3 +-- .../notification/UnreadMessagesNotification.tsx | 4 +--- .../components/message/toolbar/MessageToolbar.tsx | 11 ++--------- .../Timestamp/TimestampPicker/DatePicker.tsx | 4 ++-- .../Timestamp/TimestampPicker/FormatSelector.tsx | 4 ++-- .../actions/Timestamp/TimestampPicker/Preview.tsx | 3 +-- .../Timestamp/TimestampPicker/TimePicker.tsx | 4 ++-- .../Timestamp/TimestampPicker/TimezoneSelector.tsx | 4 ++-- .../components/message/variants/RoomMessage.tsx | 4 ++-- .../components/message/variants/SystemMessage.tsx | 4 ++-- .../components/message/variants/ThreadMessage.tsx | 3 +-- .../message/variants/ThreadMessagePreview.tsx | 4 ++-- .../message/variants/room/RoomMessageContent.tsx | 3 +-- .../variants/thread/ThreadMessageContent.tsx | 3 +-- .../threadPreview/ThreadMessagePreviewBody.tsx | 3 +-- 105 files changed, 168 insertions(+), 252 deletions(-) diff --git a/apps/meteor/client/components/Emoji.tsx b/apps/meteor/client/components/Emoji.tsx index 46e36459537c6..accd2517b20e1 100644 --- a/apps/meteor/client/components/Emoji.tsx +++ b/apps/meteor/client/components/Emoji.tsx @@ -1,5 +1,4 @@ import styled from '@rocket.chat/styled'; -import type { ReactElement } from 'react'; import { getEmojiClassNameAndDataTitle } from '../lib/utils/renderEmoji'; @@ -20,7 +19,7 @@ const EmojiComponent = styled('span', ({ fillContainer: _fillContainer, ...props : ''} `; -function Emoji({ emojiHandle, className = undefined, fillContainer }: EmojiProps): ReactElement { +function Emoji({ emojiHandle, className = undefined, fillContainer }: EmojiProps) { const { className: emojiClassName, image, ...props } = getEmojiClassNameAndDataTitle(emojiHandle); return ( diff --git a/apps/meteor/client/components/FingerprintChangeModal.tsx b/apps/meteor/client/components/FingerprintChangeModal.tsx index 066d77334cf44..170451eba0233 100644 --- a/apps/meteor/client/components/FingerprintChangeModal.tsx +++ b/apps/meteor/client/components/FingerprintChangeModal.tsx @@ -1,6 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; import { ExternalLink, GenericModal } from '@rocket.chat/ui-client'; -import type { ReactElement } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { links } from '../lib/links'; @@ -11,7 +10,7 @@ type FingerprintChangeModalProps = { onClose: () => void; }; -const FingerprintChangeModal = ({ onConfirm, onCancel, onClose }: FingerprintChangeModalProps): ReactElement => { +const FingerprintChangeModal = ({ onConfirm, onCancel, onClose }: FingerprintChangeModalProps) => { const { t } = useTranslation(); return ( { +const FingerprintChangeModalConfirmation = ({ onConfirm, onCancel, onClose, newWorkspace }: FingerprintChangeModalConfirmationProps) => { const { t } = useTranslation(); return ( , 'variant' | 'children' | 'onClose' | 'onDismiss'> & { - subtitle?: string | ReactElement; - description?: string | ReactElement; + subtitle?: ReactNode; + description?: ReactNode; img: ComponentProps['src']; - imgWidth?: ComponentProps['width']; imgHeight?: ComponentProps['height']; imgAlt?: string; diff --git a/apps/meteor/client/components/ListSkeleton.tsx b/apps/meteor/client/components/ListSkeleton.tsx index 034f167bca0e8..f507ccdd42b0b 100644 --- a/apps/meteor/client/components/ListSkeleton.tsx +++ b/apps/meteor/client/components/ListSkeleton.tsx @@ -1,5 +1,4 @@ import { Box, Skeleton } from '@rocket.chat/fuselage'; -import type { ReactElement } from 'react'; import { memo, useMemo } from 'react'; const availablePercentualWidths = [47, 68, 75, 82]; @@ -8,7 +7,7 @@ type ListSkeletonProps = { listCount?: number; }; -const ListSkeleton = ({ listCount = 2 }: ListSkeletonProps): ReactElement => { +const ListSkeleton = ({ listCount = 2 }: ListSkeletonProps) => { const widths = useMemo( () => Array.from({ length: listCount }, (_, index) => `${availablePercentualWidths[index % availablePercentualWidths.length]}%`), [listCount], diff --git a/apps/meteor/client/components/LocalTime.tsx b/apps/meteor/client/components/LocalTime.tsx index be5133050e22b..ded8e707ed4cd 100644 --- a/apps/meteor/client/components/LocalTime.tsx +++ b/apps/meteor/client/components/LocalTime.tsx @@ -1,4 +1,3 @@ -import type { ReactElement } from 'react'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -8,7 +7,7 @@ type LocalTimeProps = { utcOffset: number; }; -const LocalTime = ({ utcOffset }: LocalTimeProps): ReactElement => { +const LocalTime = ({ utcOffset }: LocalTimeProps) => { const time = useUTCClock(utcOffset); const { t } = useTranslation(); diff --git a/apps/meteor/client/components/NotFoundState.tsx b/apps/meteor/client/components/NotFoundState.tsx index 47911f496b7ec..6fd3fe363807b 100644 --- a/apps/meteor/client/components/NotFoundState.tsx +++ b/apps/meteor/client/components/NotFoundState.tsx @@ -1,6 +1,5 @@ import { Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage'; import { useRouter } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; type NotFoundProps = { @@ -8,7 +7,7 @@ type NotFoundProps = { subtitle: string; }; -const NotFoundState = ({ title, subtitle }: NotFoundProps): ReactElement => { +const NotFoundState = ({ title, subtitle }: NotFoundProps) => { const { t } = useTranslation(); const router = useRouter(); diff --git a/apps/meteor/client/components/PageSkeleton.tsx b/apps/meteor/client/components/PageSkeleton.tsx index ca6b78d3c0257..19f7b682fad55 100644 --- a/apps/meteor/client/components/PageSkeleton.tsx +++ b/apps/meteor/client/components/PageSkeleton.tsx @@ -1,8 +1,7 @@ import { Box, Button, ButtonGroup, Skeleton } from '@rocket.chat/fuselage'; import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client'; -import type { ReactElement } from 'react'; -const PageSkeleton = (): ReactElement => ( +const PageSkeleton = () => ( }> diff --git a/apps/meteor/client/components/RawText.tsx b/apps/meteor/client/components/RawText.tsx index 58ae89e4d041c..975c2100761df 100644 --- a/apps/meteor/client/components/RawText.tsx +++ b/apps/meteor/client/components/RawText.tsx @@ -1,9 +1,6 @@ import DOMPurify from 'dompurify'; -import type { ReactElement } from 'react'; /** @deprecated */ -const RawText = ({ children }: { children: string }): ReactElement => ( - -); +const RawText = ({ children }: { children: string }) => ; export default RawText; diff --git a/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx b/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx index 5ebc5393b0847..e4e9472464670 100644 --- a/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx +++ b/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx @@ -6,7 +6,7 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; import { RoomAvatar } from '@rocket.chat/ui-avatar'; import { useEndpoint } from '@rocket.chat/ui-contexts'; import { keepPreviousData, useQuery } from '@tanstack/react-query'; -import type { ReactElement } from 'react'; +import type { ReactNode } from 'react'; import { forwardRef, memo, useMemo, useState } from 'react'; type LabelType = { name: string; avatarETag?: string; type: IRoom['t']; encrypted?: IRoom['encrypted'] }; @@ -19,7 +19,7 @@ const generateQuery = ( type RoomAutoCompleteProps = Omit, 'filter'> & { scope?: 'admin' | 'regular'; - renderRoomIcon?: (props: { encrypted: IRoom['encrypted']; type: IRoom['t'] }) => ReactElement | null; + renderRoomIcon?: (props: { encrypted: IRoom['encrypted']; type: IRoom['t'] }) => ReactNode; setSelectedRoom?: (room: IRoom | undefined) => void; }; diff --git a/apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx b/apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx index 401a8879e6093..99d558b72f9d5 100644 --- a/apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx +++ b/apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx @@ -3,7 +3,7 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; import { RoomAvatar } from '@rocket.chat/ui-avatar'; import { useEndpoint } from '@rocket.chat/ui-contexts'; import { keepPreviousData, useQuery } from '@tanstack/react-query'; -import type { ReactElement, ComponentProps } from 'react'; +import type { ComponentProps } from 'react'; import { memo, useMemo, useState } from 'react'; const generateQuery = ( @@ -16,7 +16,7 @@ type RoomAutoCompleteProps = Omit, 'filter'> readOnly?: boolean; }; -const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoCompleteProps): ReactElement => { +const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoCompleteProps) => { const [filter, setFilter] = useState(''); const filterDebounced = useDebouncedValue(filter, 300); const autocomplete = useEndpoint('GET', '/v1/rooms.autocomplete.channelAndPrivate'); @@ -50,7 +50,7 @@ const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoComplet filter={filter} setFilter={setFilter} multiple - renderSelected={({ selected: { value, label }, onRemove, ...props }): ReactElement => ( + renderSelected={({ selected: { value, label }, onRemove, ...props }) => ( @@ -58,7 +58,7 @@ const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoComplet )} - renderItem={({ value, label, ...props }): ReactElement => ( + renderItem={({ value, label, ...props }) => (