diff --git a/apps/meteor/client/components/RoomAutoComplete/Avatar.tsx b/apps/meteor/client/components/RoomAutoComplete/Avatar.tsx deleted file mode 100644 index 1437c4ebbe89..000000000000 --- a/apps/meteor/client/components/RoomAutoComplete/Avatar.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Options } from '@rocket.chat/fuselage'; -import { RoomAvatar } from '@rocket.chat/ui-avatar'; -import type { FC } from 'react'; -import React from 'react'; - -type AvatarProps = { - value: string; - type: string; - avatarETag?: string; -}; - -const Avatar: FC = ({ value, type, avatarETag, ...props }) => ( - -); - -export default Avatar; diff --git a/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx b/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx index 39fbf9577776..10bea7cc0b60 100644 --- a/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx +++ b/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, 'filter'>; +type RoomAutoCompleteProps = Omit, '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 } }) => ( <> - + {label?.name} )} - renderItem={({ value, label, ...props }): ReactElement => ( -