feat: Added business unit field to edit department page

.changeset/large-islands-behave.md

@@ -0,0 +1,10 @@
+---
+'@rocket.chat/model-typings': minor
+'@rocket.chat/core-typings': minor
+'@rocket.chat/rest-typings': minor
+'@rocket.chat/models': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Adds a new "Unit" field to the create/edit department page, allowing users to specify a business unit when creating or editing a department.

apps/meteor/client/components/Omnichannel/hooks/useUnitsList.ts

@@ -1,15 +1,17 @@
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useScrollableRecordList } from '../../../hooks/lists/useScrollableRecordList';
 import { useComponentDidUpdate } from '../../../hooks/useComponentDidUpdate';
 import { RecordList } from '../../../lib/lists/RecordList';
 
 type UnitsListOptions = {
 	text: string;
+	haveNone?: boolean;
 };
 
-type UnitOption = { value: string; label: string; _id: string };
+export type UnitOption = { value: string; label: string; _id: string };
 
 export const useUnitsList = (
 	options: UnitsListOptions,
@@ -19,6 +21,8 @@ export const useUnitsList = (
 	reload: () => void;
 	loadMoreItems: (start: number, end: number) => void;
 } => {
+	const { t } = useTranslation();
+	const { haveNone = false } = options;
 	const [itemsList, setItemsList] = useState(() => new RecordList<UnitOption>());
 	const reload = useCallback(() => setItemsList(new RecordList<UnitOption>()), []);
 
@@ -44,12 +48,19 @@ export const useUnitsList = (
 				value: u._id,
 			}));
 
+			haveNone &&
+				items.unshift({
+					_id: '',
+					label: t('None'),
+					value: '',
+				});
+
 			return {
 				items,
-				itemCount: total,
+				itemCount: haveNone ? total + 1 : total,
 			};
 		},
-		[getUnits, text],
+		[getUnits, haveNone, t, text],
 	);
 
 	const { loadMoreItems, initialItemCount } = useScrollableRecordList(itemsList, fetchData, 25);

apps/meteor/client/omnichannel/additionalForms/AutoCompleteUnit.tsx

@@ -0,0 +1,68 @@
+import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { UnitOption } from '../../components/Omnichannel/hooks/useUnitsList';
+import { useUnitsList } from '../../components/Omnichannel/hooks/useUnitsList';
+import { useRecordList } from '../../hooks/lists/useRecordList';
+import { AsyncStatePhase } from '../../lib/asyncState';
+import type { RecordList } from '../../lib/lists/RecordList';
+
+type AutoCompleteUnitProps = {
+	disabled?: boolean;
+	value: string | undefined;
+	error?: string;
+	placeholder?: string;
+	haveNone?: boolean;
+	onChange: (value: string) => void;
+	onLoadItems?: (list: RecordList<UnitOption>) => void;
+};
+
+const AutoCompleteUnit = ({
+	value,
+	disabled = false,
+	error,
+	placeholder,
+	haveNone,
+	onChange,
+	onLoadItems = () => undefined,
+}: AutoCompleteUnitProps) => {
+	const { t } = useTranslation();
+	const [unitsFilter, setUnitsFilter] = useState<string>('');
+
+	const debouncedUnitFilter = useDebouncedValue(unitsFilter, 500);
+
+	const { itemsList, loadMoreItems: loadMoreUnits } = useUnitsList(
+		useMemo(() => ({ text: debouncedUnitFilter, haveNone }), [debouncedUnitFilter, haveNone]),
+	);
+	const { phase: unitsPhase, itemCount: unitsTotal, items: unitsList } = useRecordList(itemsList);
+
+	const handleLoadItems = useEffectEvent(onLoadItems);
+
+	useEffect(() => {
+		handleLoadItems(itemsList);
+	}, [handleLoadItems, unitsTotal, itemsList]);
+
+	return (
+		<PaginatedSelectFiltered
+			data-qa='autocomplete-unit'
+			error={error}
+			filter={unitsFilter}
+			flexGrow={0}
+			flexShrink={0}
+			disabled={disabled}
+			onChange={onChange}
+			options={unitsList}
+			placeholder={placeholder || t('Select_an_option')}
+			setFilter={setUnitsFilter as (value: string | number | undefined) => void}
+			value={value}
+			width='100%'
+			endReached={
+				unitsPhase === AsyncStatePhase.LOADING ? (): void => undefined : (start): void => loadMoreUnits(start, Math.min(50, unitsTotal))
+			}
+		/>
+	);
+};
+
+export default AutoCompleteUnit;

apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import AutoCompleteAgent from '../../../../components/AutoCompleteAgent';
 import { useEndpointAction } from '../../../../hooks/useEndpointAction';
-import type { IDepartmentAgent } from '../EditDepartment';
+import type { IDepartmentAgent } from '../definitions';
 
 function AddAgent({ agentList, onAdd }: { agentList: IDepartmentAgent[]; onAdd: (agent: IDepartmentAgent) => void }) {
 	const { t } = useTranslation();

apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx

@@ -4,14 +4,14 @@ import type { UseFormRegister } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable';
-import type { FormValues, IDepartmentAgent } from '../EditDepartment';
+import type { EditDepartmentFormData, IDepartmentAgent } from '../definitions';
 import AgentAvatar from './AgentAvatar';
 import RemoveAgentButton from './RemoveAgentButton';
 
 type AgentRowProps = {
 	agent: IDepartmentAgent;
 	index: number;
-	register: UseFormRegister<FormValues>;
+	register: UseFormRegister<EditDepartmentFormData>;
 	onRemove: (agentId: string) => void;
 };
 

apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx

@@ -6,13 +6,13 @@ import { useTranslation } from 'react-i18next';
 
 import { GenericTable, GenericTableBody, GenericTableHeader, GenericTableHeaderCell } from '../../../../components/GenericTable';
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
-import type { FormValues } from '../EditDepartment';
+import type { EditDepartmentFormData } from '../definitions';
 import AddAgent from './AddAgent';
 import AgentRow from './AgentRow';
 
 type DepartmentAgentsTableProps = {
-	control: Control<FormValues>;
-	register: UseFormRegister<FormValues>;
+	control: Control<EditDepartmentFormData>;
+	register: UseFormRegister<EditDepartmentFormData>;
 };
 
 function DepartmentAgentsTable({ control, register }: DepartmentAgentsTableProps) {