upstream-rocketchat/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateTeamModal.tsx

import {
	Box,
	Button,
	Icon,
	Modal,
	Accordion,
	AccordionItem,
	ModalHeader,
	ModalTitle,
	ModalClose,
	ModalContent,
	ModalFooter,
	ModalFooterControllers,
} from '@rocket.chat/fuselage';
import { TextInput, ToggleSwitch, Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage-forms';
import {
	useEndpoint,
	usePermission,
	usePermissionWithScopedRoles,
	useSetting,
	useToastMessageDispatch,
	useTranslation,
} from '@rocket.chat/ui-contexts';
import type { ComponentProps } from 'react';
import { useId, memo, useEffect, useMemo } from 'react';
import { Controller, useForm } from 'react-hook-form';

import { useEncryptedRoomDescription } from './useEncryptedRoomDescription';
import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple';
import { useCreateChannelTypePermission } from '../../../hooks/useCreateChannelTypePermission';
import { useGoToRoom } from '../../../views/room/hooks/useGoToRoom';

type CreateTeamModalInputs = {
	name: string;
	topic: string;
	isPrivate: boolean;
	readOnly: boolean;
	encrypted: boolean;
	broadcast: boolean;
	members?: string[];
};

export type CreateTeamModalProps = { onClose: () => void; onSuccess?: (rid: string) => void | Promise<void> };

const CreateTeamModal = ({ onClose, onSuccess }: CreateTeamModalProps) => {
	const t = useTranslation();
	const e2eEnabled = useSetting('E2E_Enable');
	const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms') && e2eEnabled;
	const e2eEnforcedForPrivate = Boolean(useSetting('E2E_Force_Encryption_For_Private_Rooms')) && Boolean(e2eEnabled);
	const namesValidation = useSetting('UTF8_Channel_Names_Validation');
	const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars');
	const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']);

	const dispatchToastMessage = useToastMessageDispatch();
	const canCreateTeam = usePermission('create-team');

	const checkTeamNameExists = useEndpoint('GET', '/v1/rooms.nameExists');
	const createTeamAction = useEndpoint('POST', '/v1/teams.create');

	const teamNameRegex = useMemo(() => {
		if (allowSpecialNames) {
			return null;
		}

		return new RegExp(`^${namesValidation}$`);
	}, [allowSpecialNames, namesValidation]);

	const canOnlyCreateOneType = useCreateChannelTypePermission();

	const validateTeamName = async (name: string): Promise<string | undefined> => {
		if (!name) {
			return;
		}

		if (teamNameRegex && !teamNameRegex?.test(name)) {
			return t('Name_cannot_have_special_characters');
		}

		const { exists } = await checkTeamNameExists({ roomName: name });
		if (exists) {
			return t('Teams_Errors_Already_exists', { name });
		}
	};

	const {
		control,
		handleSubmit,
		setValue,
		watch,
		formState: { errors, isSubmitting },
	} = useForm<CreateTeamModalInputs>({
		defaultValues: {
			name: '',
			topic: '',
			isPrivate: canOnlyCreateOneType ? canOnlyCreateOneType === 'p' : true,
			readOnly: false,
			encrypted: Boolean(e2eEnforcedForPrivate || e2eEnabledForPrivateByDefault),
			broadcast: false,
			members: [],
		},
	});

	const { isPrivate, broadcast, readOnly, encrypted } = watch();

	useEffect(() => {
		if (!isPrivate) {
			setValue('encrypted', false);
		} else if (e2eEnforcedForPrivate) {
			setValue('encrypted', true);
		}

		setValue('readOnly', broadcast);
	}, [watch, setValue, broadcast, isPrivate, e2eEnforcedForPrivate]);

	const readOnlyDisabled = broadcast || !canSetReadOnly;
	const canChangeEncrypted = isPrivate && e2eEnabled && !e2eEnforcedForPrivate;
	const getEncryptedHint = useEncryptedRoomDescription('team');

	const goToRoom = useGoToRoom();

	const handleCreateTeam = async ({
		name,
		members,
		isPrivate,
		readOnly,
		topic,
		broadcast,
		encrypted,
	}: CreateTeamModalInputs): Promise<void> => {
		const params = {
			name,
			members,
			type: isPrivate ? 1 : 0,
			room: {
				readOnly,
				extraData: {
					topic,
					broadcast,
					encrypted,
				},
			},
		};

		try {
			const { team } = await createTeamAction(params);
			dispatchToastMessage({ type: 'success', message: t('Team_has_been_created') });
			goToRoom(team.roomId);
			void onSuccess?.(team.roomId);
			onClose();
		} catch (error) {
			dispatchToastMessage({ type: 'error', message: error });
		}
	};

	const createTeamFormId = useId();

	return (
		<Modal
			aria-labelledby={`${createTeamFormId}-title`}
			wrapperFunction={(props: ComponentProps<typeof Box>) => (
				<Box is='form' id={createTeamFormId} onSubmit={handleSubmit(handleCreateTeam)} {...props} />
			)}
		>
			<ModalHeader>
				<ModalTitle id={`${createTeamFormId}-title`}>{t('Teams_New_Title')}</ModalTitle>
				<ModalClose title={t('Close')} onClick={onClose} tabIndex={-1} />
			</ModalHeader>
			<ModalContent marginBlockEnd={2}>
				<Box fontScale='p2' marginBlockEnd={16}>
					{t('Teams_new_description')}
				</Box>
				<FieldGroup marginBlockEnd={24}>
					<Field>
						<FieldLabel required>{t('Teams_New_Name_Label')}</FieldLabel>
						<FieldRow>
							<Controller
								control={control}
								name='name'
								rules={{
									required: t('Required_field', { field: t('Name') }),
									validate: (value) => validateTeamName(value),
								}}
								render={({ field }) => (
									<TextInput
										{...field}
										endAddon={<Icon size='x20' name={isPrivate ? 'team-lock' : 'team'} />}
										error={errors.name?.message}
										aria-required='true'
									/>
								)}
							/>
						</FieldRow>
						{errors?.name && <FieldError>{errors.name.message}</FieldError>}
						{!allowSpecialNames && <FieldHint>{t('No_spaces_or_special_characters')}</FieldHint>}
					</Field>
					<Field>
						<FieldLabel>{t('Topic')}</FieldLabel>
						<FieldRow>
							<Controller control={control} name='topic' render={({ field }) => <TextInput {...field} />} />
						</FieldRow>
						<FieldRow>
							<FieldHint>{t('Displayed_next_to_name')}</FieldHint>
						</FieldRow>
					</Field>
					<Field>
						<FieldLabel>{t('Teams_New_Add_members_Label')}</FieldLabel>
						<Controller
							control={control}
							name='members'
							render={({ field: { onChange, value } }) => (
								<UserAutoCompleteMultiple value={value} onChange={onChange} placeholder={t('Add_people')} />
							)}
						/>
					</Field>
					<Field>
						<FieldRow>
							<FieldLabel>{t('Teams_New_Private_Label')}</FieldLabel>
							<Controller
								control={control}
								name='isPrivate'
								render={({ field: { onChange, value, ref } }) => (
									<ToggleSwitch
										onChange={onChange}
										checked={canOnlyCreateOneType ? canOnlyCreateOneType === 'p' : value}
										disabled={!!canOnlyCreateOneType}
										ref={ref}
									/>
								)}
							/>
						</FieldRow>
						<FieldHint>{isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')}</FieldHint>
					</Field>
				</FieldGroup>
				<Accordion>
					<AccordionItem title={t('Advanced_settings')}>
						<FieldGroup>
							<Box is='h5' fontScale='h5' color='titles-labels'>
								{t('Security_and_permissions')}
							</Box>
							<Field>
								<FieldRow>
									<FieldLabel>{t('Teams_New_Encrypted_Label')}</FieldLabel>
									<Controller
										control={control}
										name='encrypted'
										render={({ field: { onChange, value, ref } }) => (
											<ToggleSwitch disabled={!canChangeEncrypted} onChange={onChange} checked={value} ref={ref} />
										)}
									/>
								</FieldRow>
								<FieldHint>{getEncryptedHint({ isPrivate, encrypted })}</FieldHint>
							</Field>
							<Field>
								<FieldRow>
									<FieldLabel>{t('Teams_New_Read_only_Label')}</FieldLabel>
									<Controller
										control={control}
										name='readOnly'
										render={({ field: { onChange, value, ref } }) => (
											<ToggleSwitch disabled={readOnlyDisabled} onChange={onChange} checked={value} ref={ref} />
										)}
									/>
								</FieldRow>
								<FieldHint>
									{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'team' }) : t('Anyone_can_send_new_messages')}
								</FieldHint>
							</Field>
							<Field>
								<FieldRow>
									<FieldLabel>{t('Teams_New_Broadcast_Label')}</FieldLabel>
									<Controller
										control={control}
										name='broadcast'
										render={({ field: { onChange, value, ref } }) => <ToggleSwitch onChange={onChange} checked={value} ref={ref} />}
									/>
								</FieldRow>
								{broadcast && <FieldHint>{t('Teams_New_Broadcast_Description')}</FieldHint>}
							</Field>
						</FieldGroup>
					</AccordionItem>
				</Accordion>
			</ModalContent>
			<ModalFooter>
				<ModalFooterControllers>
					<Button onClick={onClose}>{t('Cancel')}</Button>
					<Button disabled={!canCreateTeam} loading={isSubmitting} type='submit' primary>
						{t('Create')}
					</Button>
				</ModalFooterControllers>
			</ModalFooter>
		</Modal>
	);
};

export default memo(CreateTeamModal);