Chore: Convert apps/meteor/client/components/UserAutoComplete

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx

@@ -94,7 +94,7 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 									value={parentRoom}
 									onChange={handleParentRoom}
 									placeholder={t('Discussion_target_channel_description')}
-									disabled={defaultParentRoom}
+									disabled={Boolean(defaultParentRoom)}
 								/>
 							)}
 						</Field.Row>

apps/meteor/client/components/Omnichannel/modals/ForwardChatModal.tsx

@@ -109,9 +109,8 @@ const ForwardChatModal = ({
 					<Field.Row>
 						<UserAutoComplete
 							conditions={conditions}
-							flexGrow={1}
 							placeholder={t('Username')}
-							onChange={(value: string): void => {
+							onChange={(value: any): void => {
 								setValue('username', value);
 							}}
 							value={getValues().username}

apps/meteor/client/components/RoomAutoComplete/Avatar.tsx

@@ -0,0 +1,16 @@
+import { Options } from '@rocket.chat/fuselage';
+import React, { ReactElement } from 'react';
+
+import RoomAvatar from '../avatar/RoomAvatar';
+
+type AvatarProps = {
+	value: string;
+	type: string;
+	avatarETag?: string | undefined;
+};
+
+const Avatar = ({ value, type, avatarETag, ...props }: AvatarProps): ReactElement => (
+	<RoomAvatar size={Options.AvatarSize} room={{ t: type, type, _id: value, avatarETag }} {...props} />
+);
+
+export default Avatar;

apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.js → apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx

@@ -1,26 +1,32 @@
 import { AutoComplete, Option, Box } from '@rocket.chat/fuselage';
-import React, { memo, useMemo, useState } from 'react';
+import React, { ComponentProps, memo, ReactElement, useMemo, useState } from 'react';
 
 import { useEndpointData } from '../../hooks/useEndpointData';
 import RoomAvatar from '../avatar/RoomAvatar';
 import Avatar from './Avatar';
 
-const query = (term = '') => ({ selector: JSON.stringify({ name: term }) });
+const query = (
+	term = '',
+): {
+	selector: string;
+} => ({ selector: JSON.stringify({ name: term }) });
 
-const RoomAutoComplete = (props) => {
+type RoomAutoCompleteProps = Omit<ComponentProps<typeof AutoComplete>, 'value' | 'filter'> & {
+	value: any;
+};
+
+const RoomAutoComplete = (props: RoomAutoCompleteProps): ReactElement => {
 	const [filter, setFilter] = useState('');
 	const { value: data } = useEndpointData(
 		'rooms.autocomplete.channelAndPrivate',
 		useMemo(() => query(filter), [filter]),
 	);
 	const options = useMemo(
 		() =>
-			(data &&
-				data.items.map(({ name, _id, avatarETag, t }) => ({
-					value: _id,
-					label: { name, avatarETag, type: t },
-				}))) ||
-			[],
+			data?.items.map(({ name, _id, avatarETag, t }) => ({
+				value: _id,
+				label: { name, avatarETag, type: t },
+			})) || [],
 		[data],
 	);
 
@@ -29,7 +35,7 @@ const RoomAutoComplete = (props) => {
 			{...props}
 			filter={filter}
 			setFilter={setFilter}
-			renderSelected={({ value, label }) => (
+			renderSelected={({ value, label }): ReactElement => (
 				<>
 					<Box margin='none' mi='x2'>
 						<RoomAvatar size='x20' room={{ type: label?.type || 'c', _id: value, ...label }} />{' '}
@@ -39,10 +45,10 @@ const RoomAutoComplete = (props) => {
 					</Box>
 				</>
 			)}
-			renderItem={({ value, label, ...props }) => (
+			renderItem={({ value, label, ...props }): ReactElement => (
 				<Option key={value} {...props} label={label.name} avatar={<Avatar value={value} {...label} />} />
 			)}
-			options={options}
+			options={options.map((option) => ({ value: option.value, label: option.label.name || '' }))}
 		/>
 	);
 };

apps/meteor/client/components/UserAutoComplete/UserAutoComplete.js → apps/meteor/client/components/UserAutoComplete/UserAutoComplete.tsx

@@ -1,13 +1,26 @@
 import { AutoComplete, Option, Box, Chip, Options } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useMemo, useState } from 'react';
+import React, { ComponentProps, memo, MouseEventHandler, ReactElement, useMemo, useState } from 'react';
 
 import { useEndpointData } from '../../hooks/useEndpointData';
 import UserAvatar from '../avatar/UserAvatar';
 
-const query = (term = '', conditions = {}) => ({ selector: JSON.stringify({ term, conditions }) });
+const query = (
+	term = '',
+	conditions = {},
+): {
+	selector: string;
+} => ({ selector: JSON.stringify({ term, conditions }) });
 
-const UserAutoComplete = (props) => {
+type UserAutoCompleteProps = Omit<ComponentProps<typeof AutoComplete>, 'value' | 'filter'> &
+	Omit<ComponentProps<typeof Option>, 'value'> & {
+		conditions?: { [key: string]: unknown };
+		onChange?: MouseEventHandler<HTMLButtonElement>;
+		value: any;
+		filter?: string;
+	};
+
+const UserAutoComplete = ({ value, ...props }: UserAutoCompleteProps): ReactElement => {
 	const { conditions = {} } = props;
 	const [filter, setFilter] = useState('');
 	const debouncedFilter = useDebouncedValue(filter, 1000);
@@ -17,28 +30,29 @@ const UserAutoComplete = (props) => {
 		useMemo(() => query(debouncedFilter, conditions), [filter]),
 	);
 
-	const options = useMemo(() => (data && data.items.map((user) => ({ value: user.username, label: user.name }))) || [], [data]);
+	const options = useMemo(() => data?.items.map((user) => ({ value: user.username, label: user.name || '' })) || [], [data]);
 
 	return (
 		<AutoComplete
 			{...props}
+			value={value}
 			filter={filter}
 			setFilter={setFilter}
-			renderSelected={({ value, label }) => {
+			renderSelected={({ value, label }): ReactElement => {
 				if (!value) {
-					return '';
+					undefined;
 				}
 
 				return (
-					<Chip height='x20' value={value} onClick={() => props.onChange()} mie='x4'>
+					<Chip height='x20' value={value} onClick={props.onChange} mie='x4'>
 						<UserAvatar size='x20' username={value} />
 						<Box verticalAlign='middle' is='span' margin='none' mi='x4'>
 							{label}
 						</Box>
 					</Chip>
 				);
 			}}
-			renderItem={({ value, ...props }) => (
+			renderItem={({ value, ...props }): ReactElement => (
 				<Option key={value} avatar={<UserAvatar size={Options.AvatarSize} username={value} />} {...props} />
 			)}
 			options={options}

apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRolePage.tsx

@@ -39,7 +39,7 @@ const UsersInRolePage = ({ role }: { role: IRole }): ReactElement => {
 			setUser(undefined);
 			reload.current?.();
 		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
+			dispatchToastMessage({ type: 'error', message: String(error) });
 		}
 	});
 
@@ -51,6 +51,8 @@ const UsersInRolePage = ({ role }: { role: IRole }): ReactElement => {
 		return setUser(user);
 	});
 
+	const handleChange = (value: any): void => setRid(value);
+
 	return (
 		<Page>
 			<Page.Header title={`${t('Users_in_role')} "${description || name}"`}>
@@ -65,7 +67,7 @@ const UsersInRolePage = ({ role }: { role: IRole }): ReactElement => {
 							<Field mbe='x4'>
 								<Field.Label>{t('Choose_a_room')}</Field.Label>
 								<Field.Row>
-									<RoomAutoComplete value={rid} onChange={setRid} placeholder={t('User')} />
+									<RoomAutoComplete value={rid} onChange={handleChange} placeholder={t('User')} />
 								</Field.Row>
 							</Field>
 						)}

apps/meteor/client/views/omnichannel/managers/AddManager.tsx

@@ -23,12 +23,15 @@ const AddManager = ({ reload }: { reload: () => void }): ReactElement => {
 		reload();
 		setUsername('');
 	});
+
+	const handleChange = (value: any): void => setUsername(value);
+
 	return (
 		<Box display='flex' alignItems='center' pi='x24'>
 			<Field>
 				<Field.Label>{t('Username')}</Field.Label>
 				<Field.Row>
-					<UserAutoComplete value={username} onChange={setUsername} />
+					<UserAutoComplete value={username} onChange={handleChange} />
 					<Button disabled={!username} onClick={handleSave} mis='x8' primary>
 						{t('Add')}
 					</Button>