snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/ChannelDeletionTable.tsx

@@ -0,0 +1,76 @@
+import type { IRoom, Serialized } from '@rocket.chat/core-typings';
+import { Box, CheckBox } from '@rocket.chat/fuselage';
+import { GenericTable, GenericTableHeaderCell, GenericTableBody, GenericTableHeader, useSort } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import ChannelDeletionTableRow from './ChannelDeletionTableRow';
+
+export type ChannelDeletionTableProps = {
+	rooms: Serialized<IRoom>[];
+	onToggleAllRooms: () => void;
+	onChangeRoomSelection: (room: Serialized<IRoom>) => void;
+	selectedRooms: { [key: string]: Serialized<IRoom> };
+};
+
+const ChannelDeletionTable = ({ rooms, onChangeRoomSelection, selectedRooms, onToggleAllRooms }: ChannelDeletionTableProps) => {
+	const { t } = useTranslation();
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'usersCount'>('name');
+
+	const selectedRoomsLength = Object.values(selectedRooms).filter(Boolean).length;
+
+	const getSortedChannels = () => {
+		if (rooms) {
+			const sortedRooms = [...rooms];
+			if (sortBy === 'name') {
+				sortedRooms.sort((a, b) => (a.name && b.name ? a.name.localeCompare(b.name) : 0));
+			}
+			if (sortBy === 'usersCount') {
+				sortedRooms.sort((a, b) => a.usersCount - b.usersCount);
+			}
+			if (sortDirection === 'desc') {
+				return sortedRooms?.reverse();
+			}
+			return sortedRooms;
+		}
+	};
+
+	const sortedRooms = getSortedChannels();
+
+	const checked = rooms.length === selectedRoomsLength;
+	const indeterminate = rooms.length > selectedRoomsLength && selectedRoomsLength > 0;
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='name' sort='name' onClick={setSort} direction={sortDirection} active={sortBy === 'name'}>
+				<CheckBox indeterminate={indeterminate} checked={checked} onChange={onToggleAllRooms} />
+				<Box marginInline={8}>{t('Channel_name')}</Box>
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='usersCount'
+				sort='usersCount'
+				onClick={setSort}
+				direction={sortDirection}
+				active={sortBy === 'usersCount'}
+			>
+				<Box width='100%' textAlign='end'>
+					{t('Members')}
+				</Box>
+			</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<Box display='flex' flexDirection='column' height='x200' marginBlockStart={24}>
+			<GenericTable>
+				<GenericTableHeader>{headers}</GenericTableHeader>
+				<GenericTableBody>
+					{sortedRooms?.map((room) => (
+						<ChannelDeletionTableRow room={room} key={room._id} onChange={onChangeRoomSelection} selected={!!selectedRooms[room._id]} />
+					))}
+				</GenericTableBody>
+			</GenericTable>
+		</Box>
+	);
+};
+
+export default ChannelDeletionTable;

apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/ChannelDeletionTableRow.tsx

@@ -0,0 +1,34 @@
+import type { IRoom, Serialized } from '@rocket.chat/core-typings';
+import { CheckBox, Margins } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
+
+import { RoomIcon } from '../../../../../../components/RoomIcon';
+
+export type ChannelDeletionTableRowProps = {
+	room: Serialized<IRoom>;
+	onChange: (room: Serialized<IRoom>) => void;
+	selected: boolean;
+};
+
+const ChannelDeletionTableRow = ({ room, onChange, selected }: ChannelDeletionTableRowProps) => {
+	const { name, fname, usersCount } = room;
+	const handleChange = useStableCallback(() => onChange(room));
+
+	return (
+		<GenericTableRow action>
+			<GenericTableCell maxWidth='x300' withTruncatedText>
+				<CheckBox checked={selected} onChange={handleChange} />
+				<Margins inline='x8'>
+					<RoomIcon room={room} />
+					{fname ?? name}
+				</Margins>
+			</GenericTableCell>
+			<GenericTableCell align='end' withTruncatedText>
+				{usersCount}
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default ChannelDeletionTableRow;

apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/index.ts

@@ -0,0 +1 @@
+export { default } from './ChannelDeletionTable';

apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamChannels.tsx

@@ -0,0 +1,55 @@
+import type { IRoom, Serialized } from '@rocket.chat/core-typings';
+import { Box } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import ChannelDeletionTable from './ChannelDeletionTable';
+
+export type DeleteTeamChannelsProps = {
+	rooms: Serialized<IRoom>[];
+	onCancel: () => void;
+	selectedRooms: { [key: string]: Serialized<IRoom> };
+	onToggleAllRooms: () => void;
+	onConfirm: () => void;
+	onChangeRoomSelection: (room: Serialized<IRoom>) => void;
+};
+
+const DeleteTeamChannels = ({
+	rooms,
+	onCancel,
+	selectedRooms,
+	onToggleAllRooms,
+	onConfirm,
+	onChangeRoomSelection,
+}: DeleteTeamChannelsProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<GenericModal
+			variant='warning'
+			title={t('Teams_about_the_channels')}
+			onConfirm={onConfirm}
+			onCancel={onCancel}
+			onClose={onCancel}
+			confirmText={t('Continue')}
+		>
+			<Box withRichContent marginBlockEnd={16}>
+				<Box is='span' color='status-font-on-danger' fontWeight='bold'>
+					{t('Team_Delete_Channel_modal_content_danger')}{' '}
+				</Box>
+				{t('Teams_delete_team_Warning')}
+			</Box>
+			<Box>
+				{t('Teams_delete_team_choose_channels')} {t('Teams_delete_team_public_notice')}
+			</Box>
+			<ChannelDeletionTable
+				rooms={rooms}
+				onToggleAllRooms={onToggleAllRooms}
+				onChangeRoomSelection={onChangeRoomSelection}
+				selectedRooms={selectedRooms}
+			/>
+		</GenericModal>
+	);
+};
+
+export default DeleteTeamChannels;

apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamConfirmation.tsx

@@ -0,0 +1,50 @@
+import type { IRoom, Serialized } from '@rocket.chat/core-typings';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import RoomLinkList from './RoomLinkList';
+
+export type DeleteTeamConfirmationProps = {
+	deletedRooms: { [key: string]: Serialized<IRoom> };
+	keptRooms: { [key: string]: Serialized<IRoom> };
+	onConfirm: (roomsToDelete: IRoom['_id'][]) => void;
+	onReturn?: () => void;
+	onCancel: () => void;
+};
+
+const DeleteTeamConfirmation = ({ deletedRooms, keptRooms, onConfirm, onReturn, onCancel }: DeleteTeamConfirmationProps) => {
+	const { t } = useTranslation();
+	const roomIds = Object.values(deletedRooms).map(({ _id }) => _id);
+
+	return (
+		<GenericModal
+			variant='danger'
+			title={t('Delete_roomType', { roomType: 'team' })}
+			onConfirm={() => onConfirm(roomIds)}
+			onCancel={onReturn}
+			confirmText={t('Yes_delete_it')}
+			cancelText={t('Back')}
+			onClose={onCancel}
+		>
+			<p>{t('Delete_roomType_description', { roomType: 'team' })}</p>
+			{!!Object.values(deletedRooms).length && (
+				<>
+					<br />
+					<p>
+						{t('Teams_deleted_channels')} <RoomLinkList rooms={deletedRooms} />
+					</p>
+				</>
+			)}
+			{!!Object.values(keptRooms).length && (
+				<>
+					<br />
+					<p>
+						{t('Teams_kept_channels')} <RoomLinkList rooms={keptRooms} />
+					</p>
+				</>
+			)}
+		</GenericModal>
+	);
+};
+
+export default DeleteTeamConfirmation;

apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModal.stories.tsx

@@ -0,0 +1,89 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import DeleteTeamModal from '.';
+import DeleteTeamChannels from './DeleteTeamChannels';
+import DeleteTeamConfirmation from './DeleteTeamConfirmation';
+
+export default {
+	component: DeleteTeamModal,
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof DeleteTeamModal>;
+
+export const Default: StoryObj<typeof DeleteTeamModal> = {
+	name: 'DeleteTeamModal',
+
+	args: {
+		teamId: '123',
+		onConfirm: action('onConfirm'),
+		onCancel: action('onCancel'),
+	},
+};
+
+export const ChannelsStep: StoryObj<typeof DeleteTeamChannels> = {
+	render: (args) => <DeleteTeamChannels {...args} />,
+
+	args: {
+		rooms: Array.from({ length: 15 }).map((_, i) => ({
+			_id: `${i}`,
+			fname: `Room #${i}`,
+			name: `room-${i}`,
+			usersCount: 10 * i,
+			type: 'p',
+			t: 'p',
+			msgs: 10,
+			u: {
+				_id: 'user',
+			},
+			autoTranslateLanguage: 'english',
+			_updatedAt: '2022-02-02 09:00',
+		})),
+		selectedRooms: {},
+		onConfirm: action('onConfirm'),
+		onCancel: action('onCancel'),
+		onChangeRoomSelection: action('onChangeRoomSelection'),
+		onToggleAllRooms: action('onToggleAllRooms'),
+	},
+};
+
+export const ConfirmationStep: StoryObj<typeof DeleteTeamConfirmation> = {
+	render: (args) => <DeleteTeamConfirmation {...args} />,
+
+	args: {
+		deletedRooms: {
+			test123: {
+				_id: `123`,
+				fname: `Room 123`,
+				name: `room-123`,
+				usersCount: 10,
+				t: 'p',
+				msgs: 10,
+				u: {
+					_id: 'user',
+				},
+				autoTranslateLanguage: 'english',
+				_updatedAt: '2022-02-02 09:00',
+			},
+		},
+		keptRooms: {
+			test123: {
+				_id: `123`,
+				fname: `Room 123`,
+				name: `room-123`,
+				usersCount: 10,
+				t: 'p',
+				msgs: 10,
+				u: {
+					_id: 'user',
+				},
+				autoTranslateLanguage: 'english',
+				_updatedAt: '2022-02-02 09:00',
+			},
+		},
+		onConfirm: async (_roomsToDelete) => action('onConfirm'),
+		onCancel: action('onCancel'),
+		onReturn: action('onReturn'),
+	},
+};

apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModal.tsx

@@ -0,0 +1,71 @@
+import type { IRoom, Serialized } from '@rocket.chat/core-typings';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useState } from 'react';
+
+import DeleteTeamChannels from './DeleteTeamChannels';
+import DeleteTeamConfirmation from './DeleteTeamConfirmation';
+
+const STEPS = { LIST_ROOMS: 'LIST_ROOMS', CONFIRM_DELETE: 'CONFIRM_DELETE' };
+
+export type DeleteTeamModalProps = {
+	onCancel: () => void;
+	onConfirm: (roomsToDelete: IRoom['_id'][]) => void;
+	rooms: Serialized<IRoom>[];
+};
+
+const DeleteTeamModal = ({ onCancel, onConfirm, rooms }: DeleteTeamModalProps) => {
+	const hasRooms = rooms && rooms.length > 0;
+
+	const [step, setStep] = useState(hasRooms ? STEPS.LIST_ROOMS : STEPS.CONFIRM_DELETE);
+	const [deletedRooms, setDeletedRooms] = useState<{ [key: string]: Serialized<IRoom> }>({});
+	const [keptRooms, setKeptRooms] = useState<{ [key: string]: Serialized<IRoom> }>({});
+
+	const onChangeRoomSelection = useStableCallback((room: Serialized<IRoom>) => {
+		if (deletedRooms[room._id]) {
+			setDeletedRooms((deletedRooms) => {
+				delete deletedRooms[room._id];
+				return { ...deletedRooms };
+			});
+			return;
+		}
+		setDeletedRooms((deletedRooms) => ({ ...deletedRooms, [room._id]: room }));
+	});
+
+	const onToggleAllRooms = useStableCallback(() => {
+		if (Object.values(deletedRooms).filter(Boolean).length === 0) {
+			return setDeletedRooms(Object.fromEntries(rooms.map((room) => [room._id, room])));
+		}
+		setDeletedRooms({});
+	});
+
+	const onSelectRooms = useStableCallback(() => {
+		const keptRooms = Object.fromEntries(rooms.filter((room) => !deletedRooms[room._id]).map((room) => [room._id, room]));
+		setKeptRooms(keptRooms);
+		setStep(STEPS.CONFIRM_DELETE);
+	});
+
+	if (step === STEPS.CONFIRM_DELETE) {
+		return (
+			<DeleteTeamConfirmation
+				onConfirm={onConfirm}
+				onReturn={hasRooms ? () => setStep(STEPS.LIST_ROOMS) : undefined}
+				onCancel={onCancel}
+				deletedRooms={deletedRooms}
+				keptRooms={keptRooms}
+			/>
+		);
+	}
+
+	return (
+		<DeleteTeamChannels
+			rooms={rooms}
+			onCancel={onCancel}
+			selectedRooms={deletedRooms}
+			onToggleAllRooms={onToggleAllRooms}
+			onConfirm={onSelectRooms}
+			onChangeRoomSelection={onChangeRoomSelection}
+		/>
+	);
+};
+
+export default DeleteTeamModal;

apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModalWithRooms.tsx

@@ -0,0 +1,29 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { GenericModalSkeleton } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import DeleteTeamModal from './DeleteTeamModal';
+
+export type DeleteTeamModalWithRoomsProps = {
+	teamId: string;
+	onConfirm: (roomsToDelete: IRoom['_id'][]) => void;
+	onCancel: () => void;
+};
+
+const DeleteTeamModalWithRooms = ({ teamId, onConfirm, onCancel }: DeleteTeamModalWithRoomsProps) => {
+	const query = useMemo(() => ({ teamId }), [teamId]);
+	const getTeamsListRooms = useEndpoint('GET', '/v1/teams.listRooms');
+	const { data, isLoading } = useQuery({
+		queryKey: ['getTeamsListRooms', query],
+		queryFn: async () => getTeamsListRooms(query),
+	});
+
+	if (isLoading) {
+		return <GenericModalSkeleton />;
+	}
+	return <DeleteTeamModal onCancel={onCancel} onConfirm={onConfirm} rooms={data?.rooms || []} />;
+};
+
+export default DeleteTeamModalWithRooms;

apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/RoomLinkList.tsx

@@ -0,0 +1,27 @@
+import type { Serialized, IRoom } from '@rocket.chat/core-typings';
+import { Fragment } from 'react';
+
+import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
+
+export type RoomLinkListProps = { rooms: { [key: string]: Serialized<IRoom> } };
+
+const RoomLinkList = ({ rooms }: RoomLinkListProps) => {
+	const roomsArray = Object.values(rooms);
+
+	return (
+		<>
+			{roomsArray.map((room, i) => {
+				const roomLink = roomCoordinator.getRouteLink(room.t, room);
+
+				return (
+					<Fragment key={i}>
+						<a href={roomLink || undefined}>#{room.fname ?? room.name}</a>
+						{i === roomsArray.length - 1 ? '.' : ', '}
+					</Fragment>
+				);
+			})}
+		</>
+	);
+};
+
+export default RoomLinkList;

apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/index.ts

@@ -0,0 +1 @@
+export { default } from './DeleteTeamModalWithRooms';