Chore: Rewrite AutoCompleteDepartment to TypeScript

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;
+};
+
+export 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 !== 'object' ? 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

@@ -19,7 +19,7 @@ import React, { useCallback, ReactElement } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 
 import { validateEmail } from '../../../../lib/emailValidator';
-import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment';
+import { AutoCompleteDepartment } from '../../../components/AutoCompleteDepartment';
 import GenericModal from '../../../components/GenericModal';
 import Page from '../../../components/Page';
 
@@ -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/analytics/AnalyticsPage.js

@@ -2,7 +2,7 @@ import { Box, Select, Margins, Field, Label } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo, useState, useEffect } from 'react';
 
-import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment';
+import { AutoCompleteDepartment } from '../../../components/AutoCompleteDepartment';
 import Page from '../../../components/Page';
 import AgentOverview from './AgentOverview';
 import DateRangePicker from './DateRangePicker';

apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx

@@ -5,7 +5,7 @@ import moment from 'moment';
 import React, { Dispatch, FC, SetStateAction, useEffect } from 'react';
 
 import AutoCompleteAgent from '../../../components/AutoCompleteAgent';
-import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment';
+import { AutoCompleteDepartment } from '../../../components/AutoCompleteDepartment';
 import GenericModal from '../../../components/GenericModal';
 import { useFormsSubscription } from '../additionalForms';
 import Label from './Label';
@@ -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

@@ -4,7 +4,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { Dispatch, FC, SetStateAction, useEffect } from 'react';
 
 import AutoCompleteAgent from '../../../components/AutoCompleteAgent';
-import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment';
+import { AutoCompleteDepartment } from '../../../components/AutoCompleteDepartment';
 
 type QueueListFilterPropsType = FC<{
 	setFilter: Dispatch<SetStateAction<any>>;
@@ -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/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js

@@ -3,7 +3,7 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useRef, useState, useMemo, useEffect } from 'react';
 
-import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment';
+import { AutoCompleteDepartment } from '../../../components/AutoCompleteDepartment';
 import Page from '../../../components/Page';
 import { getDateRange } from '../../../lib/utils/getDateRange';
 import Label from '../components/Label';

apps/meteor/ee/client/omnichannel/additionalForms/register.ts

@@ -1,6 +1,6 @@
 import { useMemo, lazy, LazyExoticComponent } from 'react';
 
-import type AutoCompleteDepartment from '../../../../client/components/AutoCompleteDepartment';
+import type { AutoCompleteDepartment } from '../../../../client/components/AutoCompleteDepartment';
 import { registerForm } from '../../../../client/views/omnichannel/additionalForms';
 import { hasLicense } from '../../../app/license/client';
 import type CurrentChatTags from '../tags/CurrentChatTags';

apps/meteor/ee/client/omnichannel/cannedResponses/components/cannedResponseForm.tsx

@@ -3,7 +3,7 @@ import { Box, Field, TextInput } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
-import AutoCompleteDepartment from '../../../../../client/components/AutoCompleteDepartment';
+import { AutoCompleteDepartment } from '../../../../../client/components/AutoCompleteDepartment';
 import Tags from '../../../../../client/components/Omnichannel/Tags';
 import MarkdownTextEditor from '../../components/CannedResponse/MarkdownTextEditor';
 import PreviewText from '../../components/CannedResponse/modals/CreateCannedResponse/PreviewText';
@@ -75,7 +75,6 @@ const CannedResponseForm: FC<{
 								{...(isMonitor && { onlyMyDepartments: isMonitor })}
 								value={departmentId}
 								onChange={handleDepartmentId}
-								error={errors.departmentId}
 							/>
 							<Field.Error>{errors.departmentId}</Field.Error>
 						</Field>