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

apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/AddExistingModal.tsx

@@ -0,0 +1,95 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import {
+	Box,
+	Button,
+	Field,
+	FieldLabel,
+	Modal,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+	ModalFooterControllers,
+	ModalHeader,
+	ModalTitle,
+} from '@rocket.chat/fuselage';
+import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { memo, useCallback } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import RoomsAvailableForTeamsAutoComplete from './RoomsAvailableForTeamsAutoComplete';
+
+type AddExistingModalFormData = {
+	rooms: IRoom['_id'][];
+};
+
+export type AddExistingModalProps = {
+	teamId: string;
+	onClose: () => void;
+	reload?: () => void;
+};
+
+// TODO: Use GenericModal instead of Modal
+const AddExistingModal = ({ teamId, onClose, reload }: AddExistingModalProps) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const addRoomEndpoint = useEndpoint('POST', '/v1/teams.addRooms');
+
+	const {
+		control,
+		formState: { isDirty },
+		handleSubmit,
+	} = useForm<AddExistingModalFormData>({ defaultValues: { rooms: [] } });
+
+	const handleAddChannels = useCallback(
+		async ({ rooms }: AddExistingModalFormData) => {
+			try {
+				await addRoomEndpoint({
+					rooms,
+					teamId,
+				});
+
+				dispatchToastMessage({ type: 'success', message: t('Channels_added') });
+				reload?.();
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				onClose();
+			}
+		},
+		[addRoomEndpoint, teamId, onClose, dispatchToastMessage, reload, t],
+	);
+
+	return (
+		<Modal
+			aria-label={t('Team_Add_existing_channels')}
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleAddChannels)} {...props} />}
+		>
+			<ModalHeader>
+				<ModalTitle>{t('Team_Add_existing_channels')}</ModalTitle>
+				<ModalClose onClick={onClose} />
+			</ModalHeader>
+			<ModalContent>
+				<Field marginBlockEnd={24}>
+					<FieldLabel>{t('Channels')}</FieldLabel>
+					<Controller
+						control={control}
+						name='rooms'
+						render={({ field: { value, onChange } }) => <RoomsAvailableForTeamsAutoComplete value={value} onChange={onChange} />}
+					/>
+				</Field>
+			</ModalContent>
+			<ModalFooter>
+				<ModalFooterControllers>
+					<Button onClick={onClose}>{t('Cancel')}</Button>
+					<Button disabled={!isDirty} type='submit' primary>
+						{t('Add')}
+					</Button>
+				</ModalFooterControllers>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default memo(AddExistingModal);

apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/RoomsAvailableForTeamsAutoComplete.tsx

@@ -0,0 +1,69 @@
+import { AutoComplete, Box, Option, Chip } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import type { ComponentProps } from 'react';
+import { memo, useMemo, useState } from 'react';
+
+import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
+
+export type RoomsAvailableForTeamsAutoCompleteProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'>;
+
+const RoomsAvailableForTeamsAutoComplete = ({ value, onChange, ...props }: RoomsAvailableForTeamsAutoCompleteProps) => {
+	const [filter, setFilter] = useState('');
+	const debouncedFilter = useDebouncedValue(filter, 1000);
+
+	const roomsAvailableForTeamsAutoCompleteEndpoint = useEndpoint('GET', '/v1/rooms.autocomplete.availableForTeams');
+
+	const { data } = useQuery({
+		queryKey: ['roomsAvailableForTeamsAutoComplete', debouncedFilter],
+		queryFn: async () => roomsAvailableForTeamsAutoCompleteEndpoint({ name: debouncedFilter }),
+		placeholderData: keepPreviousData,
+	});
+
+	const options = useMemo(() => {
+		if (!data) {
+			return [];
+		}
+
+		return data.items.map((room) => ({
+			value: room._id,
+			label: {
+				name: roomCoordinator.getRoomName(room.t, { _id: room._id, name: room.name, fname: room.fname, prid: room.prid }),
+				type: room.t,
+				avatarETag: room.avatarETag,
+			},
+		}));
+	}, [data]);
+
+	return (
+		<AutoComplete
+			{...props}
+			multiple
+			value={value}
+			onChange={onChange}
+			filter={filter}
+			setFilter={setFilter}
+			renderSelected={({ selected: { value, label }, onRemove }) => (
+				<Chip key={value} height='x20' value={value} onClick={onRemove} marginBlock={2} marginInlineEnd={4}>
+					<RoomAvatar size='x20' room={{ ...label, type: label?.type || 'c', _id: value }} />
+					<Box is='span' margin='none' marginInlineStart={4}>
+						{label.name}
+					</Box>
+				</Chip>
+			)}
+			renderItem={({ value, label, ...props }) => (
+				<Option
+					key={value}
+					{...props}
+					label={label.name}
+					avatar={<RoomAvatar room={{ _id: value, type: label.type, avatarETag: label.avatarETag }} size='x20' />}
+				/>
+			)}
+			options={options}
+		/>
+	);
+};
+
+export default memo(RoomsAvailableForTeamsAutoComplete);

apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/index.ts

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