diff --git a/apps/meteor/client/components/AutoCompleteDepartment.js b/apps/meteor/client/components/AutoCompleteDepartment.js deleted file mode 100644 index 29759443c7b80..0000000000000 --- a/apps/meteor/client/components/AutoCompleteDepartment.js +++ /dev/null @@ -1,73 +0,0 @@ -// Cannot convert this file to ts because PaginatedSelectFiltered is not typed yet -// Next release we'll add required types and convert this file, since a new -// fuselage release is OoS of this regression -import { PaginatedSelectFiltered } from '@rocket.chat/fuselage'; -import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; -import { useTranslation } from '@rocket.chat/ui-contexts'; -import React, { memo, useMemo, useState } from 'react'; - -import { useRecordList } from '../hooks/lists/useRecordList'; -import { AsyncStatePhase } from '../hooks/useAsyncState'; -import { useDepartmentsList } from './Omnichannel/hooks/useDepartmentsList'; - -const AutoCompleteDepartment = (props) => { - const { value, excludeDepartmentId, onlyMyDepartments = false, onChange = () => {}, haveAll = false, haveNone = false } = props; - - const t = useTranslation(); - const [departmentsFilter, setDepartmentsFilter] = useState(''); - - const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500); - - const { itemsList: departmentsList, loadMoreItems: loadMoreDepartments } = useDepartmentsList( - useMemo( - () => ({ - filter: debouncedDepartmentsFilter, - onlyMyDepartments, - haveAll, - haveNone, - excludeDepartmentId, - }), - [debouncedDepartmentsFilter, onlyMyDepartments, haveAll, haveNone, excludeDepartmentId], - ), - ); - - const { phase: departmentsPhase, items: departmentsItems, itemCount: departmentsTotal } = useRecordList(departmentsList); - - const sortedByName = departmentsItems.sort((a, b) => { - if (a.value.value === 'all') { - return -1; - } - - if (a.name > b.name) { - return 1; - } - if (a.name < b.name) { - return -1; - } - - return 0; - }); - - const findValue = value !== undefined && value !== null ? value : ''; - const department = sortedByName.find( - (dep) => dep._id === (typeof findValue !== 'object' && findValue ? findValue : findValue.value), - )?.value; - - return ( - {} : (start) => loadMoreDepartments(start, Math.min(50, departmentsTotal)) - } - /> - ); -}; - -export default memo(AutoCompleteDepartment); diff --git a/apps/meteor/client/components/AutoCompleteDepartment.tsx b/apps/meteor/client/components/AutoCompleteDepartment.tsx new file mode 100644 index 0000000000000..78cf107f13b06 --- /dev/null +++ b/apps/meteor/client/components/AutoCompleteDepartment.tsx @@ -0,0 +1,93 @@ +import { PaginatedSelectFiltered } from '@rocket.chat/fuselage'; +import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; +import { useTranslation } from '@rocket.chat/ui-contexts'; +import React, { memo, ReactElement, useMemo, useState } from 'react'; + +import { useRecordList } from '../hooks/lists/useRecordList'; +import { AsyncStatePhase } from '../hooks/useAsyncState'; +import { useDepartmentsList } from './Omnichannel/hooks/useDepartmentsList'; + +type AutoCompleteDepartmentProps = { + value?: { value: string; label: string } | string; + onChange: (value: string) => void; + excludeDepartmentId?: string; + onlyMyDepartments?: boolean; + haveAll?: boolean; + haveNone?: boolean; +}; + +const AutoCompleteDepartment = ({ + value, + excludeDepartmentId, + onlyMyDepartments, + onChange, + haveAll, + haveNone, +}: AutoCompleteDepartmentProps): ReactElement | null => { + const t = useTranslation(); + const [departmentsFilter, setDepartmentsFilter] = useState(''); + + const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500); + + const { itemsList: departmentsList, loadMoreItems: loadMoreDepartments } = useDepartmentsList( + useMemo( + () => ({ + filter: debouncedDepartmentsFilter, + onlyMyDepartments, + haveAll, + haveNone, + excludeDepartmentId, + }), + [debouncedDepartmentsFilter, onlyMyDepartments, haveAll, haveNone, excludeDepartmentId], + ), + ); + + const { phase: departmentsPhase, items: departmentsItems, itemCount: departmentsTotal } = useRecordList(departmentsList); + + const sortedByName = useMemo( + () => + departmentsItems.sort((a, b) => { + if (a.value.value === 'all') { + return -1; + } + + if (a.name > b.name) { + return 1; + } + if (a.name < b.name) { + return -1; + } + + return 0; + }), + [departmentsItems], + ); + + const department = useMemo(() => { + const valueFound = typeof value === 'string' ? value : value?.value || ''; + return sortedByName.find((dep) => dep.value.value === valueFound)?.value; + }, [sortedByName, value]); + + return ( + void} + // TODO: Fix typing on fuselage + // Workaround for options wrong typing + options={sortedByName as any} + placeholder={t('Select_an_option')} + data-qa='autocomplete-department' + endReached={ + departmentsPhase === AsyncStatePhase.LOADING + ? (): void => undefined + : (start): void => loadMoreDepartments(start, Math.min(50, departmentsTotal)) + } + /> + ); +}; + +export default memo(AutoCompleteDepartment); diff --git a/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx b/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx index 074e3031ca888..0419bda84731c 100644 --- a/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx +++ b/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx @@ -47,7 +47,7 @@ const EmailInboxForm = ({ inboxData }: { inboxData?: IEmailInboxPayload }): Reac email: inboxData?.email, description: inboxData?.description, senderInfo: inboxData?.senderInfo, - department: inboxData?.department, + department: inboxData?.department || '', // SMTP smtpServer: inboxData?.smtp.server, smtpPort: inboxData?.smtp.port ?? 587, diff --git a/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx b/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx index ba5f94b656036..11a5df1f42dfb 100644 --- a/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx +++ b/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx @@ -74,7 +74,7 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, customFields, setCu guest, servedBy, status, - ...(department?.value && department.value !== 'all' && { department: department.value }), + department: department?.value && department.value !== 'all' ? department.value : '', from: from && moment(new Date(from)).utc().format('YYYY-MM-DDTHH:mm:ss'), to: to && moment(new Date(to)).utc().format('YYYY-MM-DDTHH:mm:ss'), tags: tags.map((tag) => tag.label), @@ -149,7 +149,7 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, customFields, setCu - + {EETagsComponent && ( diff --git a/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx b/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx index 00c49783d23a3..a47663dc1a86c 100644 --- a/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx +++ b/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx @@ -58,7 +58,7 @@ export const QueueListFilter: QueueListFilterPropsType = ({ setFilter, ...props - + diff --git a/apps/meteor/ee/client/omnichannel/cannedResponses/components/cannedResponseForm.tsx b/apps/meteor/ee/client/omnichannel/cannedResponses/components/cannedResponseForm.tsx index f7d03493b4a85..10325606008b2 100644 --- a/apps/meteor/ee/client/omnichannel/cannedResponses/components/cannedResponseForm.tsx +++ b/apps/meteor/ee/client/omnichannel/cannedResponses/components/cannedResponseForm.tsx @@ -75,7 +75,6 @@ const CannedResponseForm: FC<{ {...(isMonitor && { onlyMyDepartments: isMonitor })} value={departmentId} onChange={handleDepartmentId} - error={errors.departmentId} /> {errors.departmentId}