From d714df9725546166148d04d7f05a3b9445767ca1 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Mon, 26 Aug 2024 18:21:45 -0300 Subject: [PATCH 1/3] fix: avoid forwarding close fn to skeleton modals --- .../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 ++-------- 7 files changed, 17 insertions(+), 52 deletions(-) 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 ; From 4733cff552bc131692ac2697d439a09610dc9824 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Tue, 27 Aug 2024 14:36:44 -0300 Subject: [PATCH 2/3] chore: changeset --- .changeset/wise-avocados-taste.md | 5 +++++ 1 file changed, 5 insertions(+) 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 From f5134f5de651ac6bee9022ca55d4eb6fe52f34d2 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Tue, 27 Aug 2024 17:30:14 -0300 Subject: [PATCH 3/3] chore: remove tests failure --- apps/meteor/tests/e2e/team-management.spec.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/apps/meteor/tests/e2e/team-management.spec.ts b/apps/meteor/tests/e2e/team-management.spec.ts index 1d2ab3a82854..690fa2b5b5dd 100644 --- a/apps/meteor/tests/e2e/team-management.spec.ts +++ b/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();