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

Author: dougfabris

.changeset/wise-avocados-taste.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where multi-step modals were closing unexpectedly

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'}>

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;

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;

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} />;

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 || []} />;
 };

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 || []} />;

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} />;

apps/meteor/tests/e2e/team-management.spec.ts

@@ -116,7 +116,6 @@ test.describe.serial('teams-management', () => {
 	});
 
 	test('should remove user1 from targetTeamNonPrivate', async () => {
-		test.fail();
 		await poHomeTeam.sidenav.openChat(targetTeamNonPrivate);
 		await poHomeTeam.tabs.kebab.click({ force: true });
 		await poHomeTeam.tabs.btnTeamMembers.click();
@@ -130,7 +129,6 @@ test.describe.serial('teams-management', () => {
 	});
 
 	test('should delete targetTeamNonPrivate', async () => {
-		test.fail();
 		await poHomeTeam.sidenav.openChat(targetTeamNonPrivate);
 		await poHomeTeam.tabs.btnRoomInfo.click();
 		await poHomeTeam.tabs.room.btnDelete.click();
@@ -142,7 +140,6 @@ test.describe.serial('teams-management', () => {
 	});
 
 	test('should user1 leave from targetTeam', async ({ browser }) => {
-		test.fail();
 		const user1Page = await browser.newPage({ storageState: Users.user1.state });
 		const user1Channel = new HomeTeam(user1Page);
 		await user1Page.goto(`/group/${targetTeam}`);
@@ -163,7 +160,6 @@ test.describe.serial('teams-management', () => {
 	});
 
 	test('should convert team into a channel', async ({ page }) => {
-		test.fail();
 		await poHomeTeam.sidenav.openChat(targetTeam);
 		await poHomeTeam.tabs.btnRoomInfo.click();
 		await poHomeTeam.tabs.room.btnMore.click();