Chore: Rewrite AutoCompleteDepartment to TypeScript (#27198)

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 (
+		<PaginatedSelectFiltered
+			withTitle
+			value={department}
+			onChange={onChange}
+			filter={departmentsFilter}
+			// Workaround for setFilter weird typing
+			setFilter={setDepartmentsFilter as (value: string | number | undefined) => 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);

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,

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
 			<Box display='flex' marginBlockStart='x8' flexGrow={1} flexDirection='column'>
 				<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
 					<Label mb='x4'>{t('Department')}</Label>
-					<AutoCompleteDepartment haveAll value={department} onChange={handleDepartment} label={t('All')} onlyMyDepartments />
+					<AutoCompleteDepartment haveAll value={department} onChange={handleDepartment} onlyMyDepartments />
 				</Box>
 			</Box>
 			{EETagsComponent && (

apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx

@@ -58,7 +58,7 @@ export const QueueListFilter: QueueListFilterPropsType = ({ setFilter, ...props
 				</Box>
 				<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
 					<Label mb='x4'>{t('Department')}</Label>
-					<AutoCompleteDepartment haveAll value={department} onChange={handleDepartment} label={t('All')} onlyMyDepartments />
+					<AutoCompleteDepartment haveAll value={department} onChange={handleDepartment} onlyMyDepartments />
 				</Box>
 			</Box>
 		</Box>

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}
 							/>
 							<Field.Error>{errors.departmentId}</Field.Error>
 						</Field>