fix: Multi-step modals closing unexpectedly (#33178)

Co-authored-by: Douglas Fabris <[email protected]>
RocketChat · Aug 28, 2024 · 87a59e0 · 87a59e0
1 parent 4baf1e4
commit 87a59e0
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 52 deletions.
diff --git a/.changeset/wise-avocados-taste.md 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
@@ -111,7 +111,7 @@ const GenericModal = ({
 					{tagline && <Modal.Tagline>{tagline}</Modal.Tagline>}
 					<Modal.Title id={`${genericModalId}-title`}>{title ?? t('Are_you_sure')}</Modal.Title>
 				</Modal.HeaderText>
-				<Modal.Close aria-label={t('Close')} onClick={handleCloseButtonClick} />
+				{onClose && <Modal.Close aria-label={t('Close')} onClick={handleCloseButtonClick} />}
 			</Modal.Header>
 			<Modal.Content fontScale='p2'>{children}</Modal.Content>
 			<Modal.Footer justifyContent={dontAskAgain ? 'space-between' : 'end'}>

diff --git 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<typeof GenericModal>) => {
-	const t = useTranslation();
-
-	return (
-		<GenericModal
-			{...props}
-			variant='warning'
-			onClose={onClose}
-			title={<Skeleton width='50%' />}
-			confirmText={t('Cancel')}
-			onConfirm={onClose}
-		>
-			<Skeleton width='full' />
-		</GenericModal>
-	);
-};
+const GenericModalSkeleton = (props: ComponentProps<typeof GenericModal>) => (
+	<GenericModal {...props} icon={null} title={<Skeleton width='50%' />}>
+		<Skeleton width='full' />
+	</GenericModal>
+);
 
 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
@@ -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 (
-			<GenericModal title={t('Read_by')} onConfirm={onClose} onClose={onClose}>
-				<Skeleton type='rect' w='full' h='x120' />
-			</GenericModal>
-		);
+		return <GenericModalSkeleton />;
 	}
 
 	const readReceipts = readReceiptsResult.data;

diff --git 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 <GenericModalSkeleton onClose={onClose} />;
+		return <GenericModalSkeleton />;
 	}
 
 	return <BaseConvertToChannelModal onClose={onClose} onCancel={onCancel} onConfirm={onConfirm} rooms={value?.rooms} />;

diff --git 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 (
-			<GenericModal variant='warning' onClose={onCancel} onConfirm={onCancel} title={<Skeleton width='50%' />} confirmText={t('Cancel')}>
-				<Skeleton width='full' />
-			</GenericModal>
-		);
+		return <GenericModalSkeleton />;
 	}
 	return <DeleteTeamModal onCancel={onCancel} onConfirm={onConfirm} rooms={data?.rooms || []} />;
 };

diff --git 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 (
-			<GenericModal variant='warning' onClose={onCancel} onConfirm={onCancel} title={<Skeleton width='50%' />} confirmText={t('Cancel')}>
-				<Skeleton width='full' />
-			</GenericModal>
-		);
+		return <GenericModalSkeleton />;
 	}
 
 	return <LeaveTeamModal onCancel={onCancel} onConfirm={onConfirm} rooms={data?.rooms || []} />;

diff --git a/apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersModal.js b/apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersModal.js
@@ -1,28 +1,21 @@
-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';
 
 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 {
 		user: { username },
 	} = userDataFetch?.value;
 
 	if (phase === AsyncStatePhase.LOADING) {
-		return (
-			<GenericModal variant='warning' onClose={onClose} title={<Skeleton width='50%' />} confirmText={t('Cancel')} onConfirm={onClose}>
-				<Skeleton width='full' />
-			</GenericModal>
-		);
+		return <GenericModalSkeleton />;
 	}
 
 	return <BaseRemoveUsersModal onClose={onClose} username={username} onCancel={onCancel} onConfirm={onConfirm} rooms={value?.rooms} />;