fix: merge components

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

@@ -3,34 +3,49 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
-import type { ReactElement, ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
-import Avatar from './Avatar';
-
 const generateQuery = (
 	term = '',
 ): {
 	selector: string;
 } => ({ selector: JSON.stringify({ name: term }) });
 
-type RoomAutoCompleteProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'>;
+type RoomAutoCompleteProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'> & { scope?: 'admin' | 'regular' };
+
+const AVATAR_SIZE = 'x20';
 
-const RoomAutoComplete = ({ value, onChange, ...props }: RoomAutoCompleteProps): ReactElement => {
+const ROOM_AUTOCOMPLETE_PARAMS = {
+	admin: {
+		endpoint: '/v1/rooms.autocomplete.adminRooms',
+		key: 'roomsAutoCompleteAdmin',
+	},
+	regular: {
+		endpoint: '/v1/rooms.autocomplete.channelAndPrivate',
+		key: 'roomsAutoCompleteRegular',
+	},
+} as const;
+
+const RoomAutoComplete = ({ value, onChange, scope = 'regular', ...props }: RoomAutoCompleteProps) => {
 	const [filter, setFilter] = useState('');
 	const filterDebounced = useDebouncedValue(filter, 300);
-	const autocomplete = useEndpoint('GET', '/v1/rooms.autocomplete.channelAndPrivate');
+	const roomsAutoCompleteEndpoint = useEndpoint('GET', ROOM_AUTOCOMPLETE_PARAMS[scope].endpoint);
 
-	const result = useQuery(['rooms.autocomplete.channelAndPrivate', filterDebounced], () => autocomplete(generateQuery(filterDebounced)), {
-		keepPreviousData: true,
-	});
+	const result = useQuery(
+		[ROOM_AUTOCOMPLETE_PARAMS[scope].key, filterDebounced],
+		() => roomsAutoCompleteEndpoint(generateQuery(filterDebounced)),
+		{
+			keepPreviousData: true,
+		},
+	);
 
 	const options = useMemo(
 		() =>
 			result.isSuccess
-				? result.data.items.map(({ name, _id, avatarETag, t }) => ({
+				? result.data.items.map(({ name, fname, _id, avatarETag, t }) => ({
 						value: _id,
-						label: { name, avatarETag, type: t },
+						label: { name: fname || name, avatarETag, type: t },
 				  }))
 				: [],
 		[result.data?.items, result.isSuccess],
@@ -43,18 +58,18 @@ const RoomAutoComplete = ({ value, onChange, ...props }: RoomAutoCompleteProps):
 			onChange={onChange}
 			filter={filter}
 			setFilter={setFilter}
-			renderSelected={({ selected: { value, label } }): ReactElement => (
+			renderSelected={({ selected: { value, label } }) => (
 				<>
 					<Box margin='none' mi={2}>
-						<RoomAvatar size='x20' room={{ type: label?.type || 'c', _id: value, ...label }} />
+						<RoomAvatar size={AVATAR_SIZE} room={{ type: label?.type || 'c', _id: value, ...label }} />
 					</Box>
 					<Box margin='none' mi={2}>
 						{label?.name}
 					</Box>
 				</>
 			)}
-			renderItem={({ value, label, ...props }): ReactElement => (
-				<Option key={value} {...props} label={label.name} avatar={<Avatar value={value} {...label} />} />
+			renderItem={({ value, label, ...props }) => (
+				<Option {...props} label={label.name} avatar={<RoomAvatar size={AVATAR_SIZE} room={{ _id: value, ...label }} />} />
 			)}
 			options={options}
 		/>

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

@@ -6,8 +6,8 @@ import type { ReactElement } from 'react';
 import React, { useRef } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 
-import AdminRoomAutoComplete from '../../../../components/AdminRoomAutoComplete';
 import { Page, PageHeader, PageContent } from '../../../../components/Page';
+import RoomAutoComplete from '../../../../components/RoomAutoComplete';
 import UserAutoCompleteMultiple from '../../../../components/UserAutoCompleteMultiple';
 import UsersInRoleTable from './UsersInRoleTable';
 
@@ -77,7 +77,7 @@ const UsersInRolePage = ({ role }: { role: IRole }): ReactElement => {
 										control={control}
 										name='rid'
 										render={({ field: { onChange, value } }): ReactElement => (
-											<AdminRoomAutoComplete value={value} onChange={onChange} placeholder={t('User')} />
+											<RoomAutoComplete scope='admin' value={value} onChange={onChange} placeholder={t('User')} />
 										)}
 									/>
 								</FieldRow>

apps/meteor/ee/client/views/audit/components/tabs/RoomsTab.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { UseFormReturn } from 'react-hook-form';
 import { useController } from 'react-hook-form';
 
-import RoomAutoComplete from '../../../../../../client/components/AdminRoomAutoComplete/AdminRoomAutoComplete';
+import RoomAutoComplete from '../../../../../../client/components/RoomAutoComplete';
 import type { AuditFields } from '../../hooks/useAuditForm';
 
 type RoomsTabProps = {
@@ -21,6 +21,7 @@ const RoomsTab = ({ form: { control } }: RoomsTabProps) => {
 			<FieldLabel>{t('Channel_name')}</FieldLabel>
 			<FieldRow>
 				<RoomAutoComplete
+					scope='admin'
 					value={ridField.value}
 					error={!!ridFieldState.error}
 					placeholder={t('Channel_Name_Placeholder')}