From 87a59e0352c25f45c07b9b1d719d6ef7b9852763 Mon Sep 17 00:00:00 2001 From: "dionisio-bot[bot]" <117394943+dionisio-bot[bot]@users.noreply.github.com> Date: Wed, 28 Aug 2024 17:41:20 +0000 Subject: [PATCH] fix: Multi-step modals closing unexpectedly (#33178) Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com> --- .changeset/wise-avocados-taste.md | 5 +++++ .../components/GenericModal/GenericModal.tsx | 2 +- .../GenericModal/GenericModalSkeleton.tsx | 22 +++++-------------- .../ReadReceiptsModal/ReadReceiptsModal.tsx | 8 ++----- .../ConvertToChannelModal.tsx | 2 +- .../DeleteTeam/DeleteTeamModalWithRooms.tsx | 12 +++------- .../info/LeaveTeam/LeaveTeamWithData.tsx | 12 +++------- .../RemoveUsersModal/RemoveUsersModal.js | 11 ++-------- 8 files changed, 22 insertions(+), 52 deletions(-) create mode 100644 .changeset/wise-avocados-taste.md diff --git a/.changeset/wise-avocados-taste.md b/.changeset/wise-avocados-taste.md new file mode 100644 index 000000000000..c4c9bce010b8 --- /dev/null +++ b/.changeset/wise-avocados-taste.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Fixes an issue where multi-step modals were closing unexpectedly diff --git a/apps/meteor/client/components/GenericModal/GenericModal.tsx b/apps/meteor/client/components/GenericModal/GenericModal.tsx index d371e1ff4ef2..5d025e05827d 100644 --- a/apps/meteor/client/components/GenericModal/GenericModal.tsx +++ b/apps/meteor/client/components/GenericModal/GenericModal.tsx @@ -111,7 +111,7 @@ const GenericModal = ({ {tagline && {tagline}} {title ?? t('Are_you_sure')} - + {onClose && } {children} diff --git a/apps/meteor/client/components/GenericModal/GenericModalSkeleton.tsx b/apps/meteor/client/components/GenericModal/GenericModalSkeleton.tsx index d56cbdd26a67..2dcdf3b3578c 100644 --- a/apps/meteor/client/components/GenericModal/GenericModalSkeleton.tsx +++ b/apps/meteor/client/components/GenericModal/GenericModalSkeleton.tsx @@ -1,25 +1,13 @@ import { Skeleton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React from 'react'; import GenericModal from './GenericModal'; -const GenericModalSkeleton = ({ onClose, ...props }: ComponentProps) => { - const t = useTranslation(); - - return ( - } - confirmText={t('Cancel')} - onConfirm={onClose} - > - - - ); -}; +const GenericModalSkeleton = (props: ComponentProps) => ( + }> + + +); export default GenericModalSkeleton; diff --git a/apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.tsx b/apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.tsx index c4da16264646..ca033c2dcb0d 100644 --- a/apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.tsx +++ b/apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptsModal.tsx @@ -1,11 +1,11 @@ import type { IMessage, ReadReceipt } from '@rocket.chat/core-typings'; -import { Skeleton } from '@rocket.chat/fuselage'; import { useMethod, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; import type { ReactElement } from 'react'; import React, { useEffect } from 'react'; import GenericModal from '../../../../components/GenericModal'; +import GenericModalSkeleton from '../../../../components/GenericModal/GenericModalSkeleton'; import ReadReceiptRow from './ReadReceiptRow'; type ReadReceiptsModalProps = { @@ -29,11 +29,7 @@ const ReadReceiptsModal = ({ messageId, onClose }: ReadReceiptsModalProps): Reac }, [dispatchToastMessage, t, onClose, readReceiptsResult.isError, readReceiptsResult.error]); if (readReceiptsResult.isLoading || readReceiptsResult.isError) { - return ( - - - - ); + return ; } const readReceipts = readReceiptsResult.data; diff --git a/apps/meteor/client/views/teams/ConvertToChannelModal/ConvertToChannelModal.tsx b/apps/meteor/client/views/teams/ConvertToChannelModal/ConvertToChannelModal.tsx index c29f6c0ec586..3efcdb89690f 100644 --- a/apps/meteor/client/views/teams/ConvertToChannelModal/ConvertToChannelModal.tsx +++ b/apps/meteor/client/views/teams/ConvertToChannelModal/ConvertToChannelModal.tsx @@ -20,7 +20,7 @@ const ConvertToChannelModal = ({ onClose, onCancel, onConfirm, teamId, userId }: }); if (phase === AsyncStatePhase.LOADING) { - return ; + return ; } return ; diff --git a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModalWithRooms.tsx b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModalWithRooms.tsx index 5226a3602c0f..1375ec532c91 100644 --- a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModalWithRooms.tsx +++ b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModalWithRooms.tsx @@ -1,11 +1,10 @@ import type { IRoom } from '@rocket.chat/core-typings'; -import { Skeleton } from '@rocket.chat/fuselage'; -import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts'; +import { useEndpoint } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; -import GenericModal from '../../../../../components/GenericModal'; +import GenericModalSkeleton from '../../../../../components/GenericModal/GenericModalSkeleton'; import DeleteTeamModal from './DeleteTeamModal'; type DeleteTeamModalWithRoomsProps = { @@ -15,17 +14,12 @@ type DeleteTeamModalWithRoomsProps = { }; const DeleteTeamModalWithRooms = ({ teamId, onConfirm, onCancel }: DeleteTeamModalWithRoomsProps): ReactElement => { - const t = useTranslation(); const query = useMemo(() => ({ teamId }), [teamId]); const getTeamsListRooms = useEndpoint('GET', '/v1/teams.listRooms'); const { data, isLoading } = useQuery(['getTeamsListRooms', query], async () => getTeamsListRooms(query)); if (isLoading) { - return ( - } confirmText={t('Cancel')}> - - - ); + return ; } return ; }; diff --git a/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamWithData.tsx b/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamWithData.tsx index 9bab0acc3d86..58f98705d2bb 100644 --- a/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamWithData.tsx +++ b/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamWithData.tsx @@ -1,11 +1,10 @@ import type { ITeam } from '@rocket.chat/core-typings'; -import { Skeleton } from '@rocket.chat/fuselage'; -import { useUserId, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts'; +import { useUserId, useEndpoint } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; import type { ReactElement } from 'react'; import React from 'react'; -import GenericModal from '../../../../../components/GenericModal'; +import GenericModalSkeleton from '../../../../../components/GenericModal/GenericModalSkeleton'; import LeaveTeamModal from './LeaveTeamModal/LeaveTeamModal'; type LeaveTeamWithDataProps = { @@ -15,7 +14,6 @@ type LeaveTeamWithDataProps = { }; const LeaveTeamWithData = ({ teamId, onCancel, onConfirm }: LeaveTeamWithDataProps): ReactElement => { - const t = useTranslation(); const userId = useUserId(); if (!userId) { @@ -26,11 +24,7 @@ const LeaveTeamWithData = ({ teamId, onCancel, onConfirm }: LeaveTeamWithDataPro const { data, isLoading } = useQuery(['teams.listRoomsOfUser'], () => getRoomsOfUser({ teamId, userId })); if (isLoading) { - return ( - } confirmText={t('Cancel')}> - - - ); + return ; } return ; diff --git a/apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersModal.js b/apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersModal.js index 76a38b680692..f85d5434c1d1 100644 --- a/apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersModal.js +++ b/apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersModal.js @@ -1,8 +1,6 @@ -import { Skeleton } from '@rocket.chat/fuselage'; -import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; -import GenericModal from '../../../../../components/GenericModal'; +import GenericModalSkeleton from '../../../../../components/GenericModal/GenericModalSkeleton'; import { useEndpointData } from '../../../../../hooks/useEndpointData'; import { AsyncStatePhase } from '../../../../../lib/asyncState'; import BaseRemoveUsersModal from './BaseRemoveUsersModal'; @@ -10,7 +8,6 @@ import BaseRemoveUsersModal from './BaseRemoveUsersModal'; const initialData = { user: { username: '' } }; const RemoveUsersModal = ({ teamId, userId, onClose, onCancel, onConfirm }) => { - const t = useTranslation(); const { value, phase } = useEndpointData('/v1/teams.listRoomsOfUser', { params: useMemo(() => ({ teamId, userId }), [teamId, userId]) }); const userDataFetch = useEndpointData('/v1/users.info', { params: useMemo(() => ({ userId }), [userId]), initialValue: initialData }); const { @@ -18,11 +15,7 @@ const RemoveUsersModal = ({ teamId, userId, onClose, onCancel, onConfirm }) => { } = userDataFetch?.value; if (phase === AsyncStatePhase.LOADING) { - return ( - } confirmText={t('Cancel')} onConfirm={onClose}> - - - ); + return ; } return ;