Merge branch 'develop' into fix/room-loadhistory

apps/meteor/client/apps/gameCenter/GameCenter.tsx

@@ -1,7 +1,7 @@
 import type { IExternalComponent } from '@rocket.chat/apps-engine/definition/externalComponent';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useState } from 'react';
-import type { ReactElement } from 'react';
+import type { MouseEvent, ReactElement } from 'react';
 
 import GameCenterContainer from './GameCenterContainer';
 import GameCenterList from './GameCenterList';
@@ -18,12 +18,12 @@ const GameCenter = (): ReactElement => {
 
 	const result = useExternalComponentsQuery();
 
-	const handleClose = useEffectEvent((e) => {
+	const handleClose = useEffectEvent((e: MouseEvent) => {
 		preventSyntheticEvent(e);
 		closeTab();
 	});
 
-	const handleBack = useEffectEvent((e) => {
+	const handleBack = useEffectEvent((e: MouseEvent) => {
 		setOpenedGame(undefined);
 		preventSyntheticEvent(e);
 	});

apps/meteor/client/components/avatar/RoomAvatarEditor.tsx

@@ -24,7 +24,7 @@ const RoomAvatarEditor = ({ disabled = false, room, roomAvatar, onChangeAvatar }
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	const handleChangeAvatar = useEffectEvent(async (file) => {
+	const handleChangeAvatar = useEffectEvent(async (file: File) => {
 		const reader = new FileReader();
 		reader.readAsDataURL(file);
 		reader.onloadend = async (): Promise<void> => {

apps/meteor/client/hooks/useClipboardWithToast.ts

@@ -9,6 +9,6 @@ export default function useClipboardWithToast(text: string): UseClipboardReturn
 
 	return useClipboard(text, {
 		onCopySuccess: useEffectEvent(() => dispatchToastMessage({ type: 'success', message: t('Copied') })),
-		onCopyError: useEffectEvent((e) => dispatchToastMessage({ type: 'error', message: e })),
+		onCopyError: useEffectEvent((e?: Error) => dispatchToastMessage({ type: 'error', message: e })),
 	});
 }

apps/meteor/client/hooks/usePreventPropagation.ts

@@ -2,7 +2,7 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { UIEvent } from 'react';
 
 export const usePreventPropagation = (fn?: (e: UIEvent) => void): ((e: UIEvent) => void) => {
-	const preventClickPropagation = useEffectEvent((e): void => {
+	const preventClickPropagation = useEffectEvent((e: UIEvent): void => {
 		e.stopPropagation();
 		fn?.(e);
 	});

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

@@ -1,7 +1,12 @@
 import { useHasLicenseModule } from '../../hooks/useHasLicenseModule';
 import AutoCompleteTagsMultiple from '../tags/AutoCompleteTagsMultiple';
 
-type CurrentChatTagsProps = { value: Array<{ value: string; label: string }>; handler: any; department?: string; viewAll?: boolean };
+type CurrentChatTagsProps = {
+	value: Array<{ value: string; label: string }>;
+	handler: (value: { label: string; value: string }[]) => void;
+	department?: string;
+	viewAll?: boolean;
+};
 
 const CurrentChatTags = ({ value, handler, department, viewAll }: CurrentChatTagsProps) => {
 	const hasLicense = useHasLicenseModule('livechat-enterprise');
@@ -10,7 +15,14 @@ const CurrentChatTags = ({ value, handler, department, viewAll }: CurrentChatTag
 		return null;
 	}
 
-	return <AutoCompleteTagsMultiple onChange={handler} value={value} department={department} viewAll={viewAll} />;
+	return (
+		<AutoCompleteTagsMultiple
+			onChange={handler as any} // FIXME: any
+			value={value}
+			department={department}
+			viewAll={viewAll}
+		/>
+	);
 };
 
 export default CurrentChatTags;

apps/meteor/client/omnichannel/businessHours/useRemoveBusinessHour.tsx

@@ -12,7 +12,7 @@ export const useRemoveBusinessHour = () => {
 	const removeBusinessHour = useMethod('livechat:removeBusinessHour');
 	const queryClient = useQueryClient();
 
-	const handleRemove = useEffectEvent((_id, type) => {
+	const handleRemove = useEffectEvent((_id: string, type: string) => {
 		const onDeleteBusinessHour = async () => {
 			try {
 				await removeBusinessHour(_id, type);

apps/meteor/client/omnichannel/cannedResponses/CannedResponsesTable.tsx

@@ -64,7 +64,7 @@ const CannedResponsesTable = () => {
 
 	const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/canned-responses/new'));
 
-	const onRowClick = useEffectEvent((id, scope) => (): void => {
+	const onRowClick = useEffectEvent((id: string, scope: string) => (): void => {
 		if (scope === 'global' && isMonitor && !isManager) {
 			return dispatchToastMessage({
 				type: 'error',

apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx

@@ -31,7 +31,7 @@ type CannedResponseListProps = {
 	type: string;
 	setType: Dispatch<SetStateAction<string>>;
 	isRoomOverMacLimit: boolean;
-	onClickItem: (data: any) => void;
+	onClickItem: (data: any) => void; // FIXME: fix typings
 	onClickCreate: (e: MouseEvent<HTMLOrSVGElement>) => void;
 	onClickUse: (e: MouseEvent<HTMLOrSVGElement>, text: string) => void;
 	reload: () => void;

apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx

@@ -1,3 +1,4 @@
+import type { IOmnichannelCannedResponse, ILivechatDepartment } from '@rocket.chat/core-typings';
 import { useDebouncedValue, useLocalStorage, useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useRouter } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent, MouseEvent } from 'react';
@@ -38,18 +39,24 @@ export const WrapCannedResponseList = () => {
 	);
 	const { phase, items, itemCount } = useRecordList(cannedList);
 
-	const onClickItem = useEffectEvent((data) => {
-		const { _id: context } = data;
-
-		router.navigate({
-			name: router.getRouteName() ?? 'live',
-			params: {
-				id: room._id,
-				tab: 'canned-responses',
-				context,
+	const onClickItem = useEffectEvent(
+		(
+			data: IOmnichannelCannedResponse & {
+				departmentName: ILivechatDepartment['name'];
 			},
-		});
-	});
+		) => {
+			const { _id: context } = data;
+
+			router.navigate({
+				name: router.getRouteName() ?? 'live',
+				params: {
+					id: room._id,
+					tab: 'canned-responses',
+					context,
+				},
+			});
+		},
+	);
 
 	const composer = useChat()?.composer;
 

apps/meteor/client/omnichannel/cannedResponses/useRemoveCannedResponse.tsx

@@ -14,7 +14,7 @@ export const useRemoveCannedResponse = () => {
 	const dispatchToastMessage = useToastMessageDispatch();
 	const removeCannedResponse = useMethod('removeCannedResponse');
 
-	const handleDelete = useEffectEvent((id) => {
+	const handleDelete = useEffectEvent((id: string) => {
 		const onDeleteCannedResponse: () => Promise<void> = async () => {
 			try {
 				await removeCannedResponse(id);

apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx

@@ -24,7 +24,7 @@ type AgentsTableProps = {
 export const AgentsTable = memo(({ data, sortBy, sortDirection, setSort }: AgentsTableProps) => {
 	const { t } = useTranslation();
 
-	const onHeaderClick = useEffectEvent((id) => {
+	const onHeaderClick = useEffectEvent((id: 'name' | 'total') => {
 		setSort(id, sortDirection === 'asc' ? 'desc' : 'asc');
 	});
 

apps/meteor/client/omnichannel/slaPolicies/RemoveSlaButton.tsx

@@ -1,6 +1,7 @@
 import { IconButton } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useRoute, useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import GenericModal from '../../components/GenericModal';
@@ -14,7 +15,7 @@ const RemoveSlaButton = ({ _id, reload }: { _id: string; reload: () => void }) =
 
 	const removeSLA = useEndpoint('DELETE', `/v1/livechat/sla/:slaId`, { slaId: _id });
 
-	const handleDelete = useEffectEvent((e) => {
+	const handleDelete = useEffectEvent((e: MouseEvent) => {
 		e.stopPropagation();
 		const onDeleteAgent = async (): Promise<void> => {
 			try {

apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx

@@ -56,7 +56,7 @@ const SlaTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
 	}, [reload, refetch]);
 
 	const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/sla-policies/new'));
-	const onRowClick = useEffectEvent((id) => () => router.navigate(`/omnichannel/sla-policies/edit/${id}`));
+	const onRowClick = useEffectEvent((id: string) => () => router.navigate(`/omnichannel/sla-policies/edit/${id}`));
 
 	const headers = (
 		<>

apps/meteor/client/omnichannel/tags/TagsTable.tsx

@@ -27,7 +27,7 @@ const TagsTable = () => {
 	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
 	const { sortBy, sortDirection, setSort } = useSort<'name' | 'description'>('name');
 
-	const onRowClick = useEffectEvent((id) => router.navigate(`/omnichannel/tags/edit/${id}`));
+	const onRowClick = useEffectEvent((id: string) => router.navigate(`/omnichannel/tags/edit/${id}`));
 	const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/tags/new'));
 	const handleDeleteTag = useRemoveTag();
 

apps/meteor/client/omnichannel/tags/useRemoveTag.tsx

@@ -13,7 +13,7 @@ export const useRemoveTag = () => {
 	const queryClient = useQueryClient();
 	const router = useRouter();
 
-	const handleDeleteTag = useEffectEvent((tagId) => {
+	const handleDeleteTag = useEffectEvent((tagId: string) => {
 		const handleDelete = async () => {
 			try {
 				await removeTag(tagId);

apps/meteor/client/omnichannel/units/UnitEdit.tsx

@@ -34,6 +34,19 @@ import { AsyncStatePhase } from '../../hooks/useAsyncState';
 import { useDepartmentsByUnitsList } from '../../views/hooks/useDepartmentsByUnitsList';
 import { useMonitorsList } from '../../views/hooks/useMonitorsList';
 
+type UnitEditFormData = {
+	name: string;
+	visibility: string;
+	departments: {
+		value: string;
+		label: string;
+	}[];
+	monitors: {
+		value: string;
+		label: string;
+	}[];
+};
+
 type UnitEditProps = {
 	unitData?: Serialized<IOmnichannelBusinessUnit>;
 	unitMonitors?: Serialized<ILivechatUnitMonitor>[];
@@ -97,7 +110,7 @@ const UnitEdit = ({ unitData, unitMonitors, unitDepartments }: UnitEditProps) =>
 		formState: { errors, isDirty },
 		handleSubmit,
 		watch,
-	} = useForm({
+	} = useForm<UnitEditFormData>({
 		mode: 'onBlur',
 		values: {
 			name: unitData?.name || '',
@@ -127,7 +140,7 @@ const UnitEdit = ({ unitData, unitMonitors, unitDepartments }: UnitEditProps) =>
 		return [...mappedMonitorsItems, ...pending];
 	}, [monitors, monitorsItems]);
 
-	const handleSave = useEffectEvent(async ({ name, visibility }) => {
+	const handleSave = useEffectEvent(async ({ name, visibility }: UnitEditFormData) => {
 		const departmentsData = departments.map((department) => ({ departmentId: department.value }));
 
 		const monitorsData = monitors.map((monitor) => ({

apps/meteor/client/omnichannel/units/UnitsTable.tsx

@@ -51,7 +51,7 @@ const UnitsTable = () => {
 	const queryHasChanged = defaultQuery !== hashKey([query]);
 
 	const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/units/new'));
-	const onRowClick = useEffectEvent((id) => () => router.navigate(`/omnichannel/units/edit/${id}`));
+	const onRowClick = useEffectEvent((id: string) => () => router.navigate(`/omnichannel/units/edit/${id}`));
 	const handleDelete = useRemoveUnit();
 
 	const headers = (

apps/meteor/client/omnichannel/units/useRemoveUnit.tsx

@@ -13,7 +13,7 @@ export const useRemoveUnit = () => {
 	const queryClient = useQueryClient();
 	const removeUnit = useMethod('livechat:removeUnit');
 
-	const handleDelete = useEffectEvent((id) => {
+	const handleDelete = useEffectEvent((id: string) => {
 		const onDeleteAgent = async () => {
 			try {
 				await removeUnit(id);

apps/meteor/client/sidebar/Item/Condensed.tsx

@@ -1,7 +1,7 @@
 import { IconButton, Sidebar } from '@rocket.chat/fuselage';
 import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
-import type { ReactElement } from 'react';
+import type { ReactElement, UIEvent } from 'react';
 import { memo, useState } from 'react';
 
 type CondensedProps = {
@@ -24,8 +24,8 @@ const Condensed = ({ icon, title = '', avatar, actions, href, unread, menu, badg
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
 
-	const handleMenu = useEffectEvent((e) => {
-		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
+	const handleMenu = useEffectEvent((e: UIEvent<HTMLElement>) => {
+		setMenuVisibility(e.currentTarget.offsetWidth > 0 && Boolean(menu));
 	});
 	const handleMenuEvent = {
 		[isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu,

apps/meteor/client/sidebar/Item/Extended.tsx

@@ -1,7 +1,7 @@
 import { Sidebar, IconButton } from '@rocket.chat/fuselage';
 import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
-import type { ReactNode } from 'react';
+import type { ReactNode, UIEvent } from 'react';
 import { memo, useState } from 'react';
 
 import { useShortTimeAgo } from '../../hooks/useTimeAgo';
@@ -45,8 +45,8 @@ const Extended = ({
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
 
-	const handleMenu = useEffectEvent((e) => {
-		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
+	const handleMenu = useEffectEvent((e: UIEvent<HTMLElement>) => {
+		setMenuVisibility(e.currentTarget.offsetWidth > 0 && Boolean(menu));
 	});
 
 	const handleMenuEvent = {

apps/meteor/client/sidebar/Item/Medium.tsx

@@ -1,6 +1,6 @@
 import { Sidebar, IconButton } from '@rocket.chat/fuselage';
 import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import type { ReactNode } from 'react';
+import type { ReactNode, UIEvent } from 'react';
 import { memo, useState } from 'react';
 
 type MediumProps = {
@@ -22,8 +22,8 @@ const Medium = ({ icon, title = '', avatar, actions, href, badges, unread, menu,
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
 
-	const handleMenu = useEffectEvent((e) => {
-		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
+	const handleMenu = useEffectEvent((e: UIEvent<HTMLElement>) => {
+		setMenuVisibility(e.currentTarget.offsetWidth > 0 && Boolean(menu));
 	});
 	const handleMenuEvent = {
 		[isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu,

apps/meteor/client/sidebar/search/SearchList.tsx

@@ -6,7 +6,7 @@ import { escapeRegExp } from '@rocket.chat/string-helpers';
 import { useUserPreference, useUserSubscriptions, useSetting, useTranslation, useMethod } from '@rocket.chat/ui-contexts';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
-import type { ReactElement, MutableRefObject, SetStateAction, Dispatch, FormEventHandler, Ref, MouseEventHandler } from 'react';
+import type { ReactElement, MutableRefObject, SetStateAction, Dispatch, FormEventHandler, Ref, MouseEventHandler, FormEvent } from 'react';
 import { forwardRef, useState, useMemo, useEffect, useRef } from 'react';
 import type { VirtuosoHandle } from 'react-virtuoso';
 import { Virtuoso } from 'react-virtuoso';
@@ -166,7 +166,7 @@ const useSearchItems = (filterText: string): UseQueryResult<(ISubscription & IRo
 
 const useInput = (initial: string): { value: string; onChange: FormEventHandler; setValue: Dispatch<SetStateAction<string>> } => {
 	const [value, setValue] = useState(initial);
-	const onChange = useEffectEvent((e) => {
+	const onChange = useEffectEvent((e: FormEvent<HTMLInputElement>) => {
 		setValue(e.currentTarget.value);
 	});
 	return { value, onChange, setValue };
@@ -231,7 +231,7 @@ const SearchList = forwardRef(function SearchList({ onClose }: SearchListProps,
 		[avatarTemplate, extended, items, useRealName, sideBarItemTemplate, sidebarViewMode, t],
 	);
 
-	const changeSelection = useEffectEvent((dir) => {
+	const changeSelection = useEffectEvent((dir: 'up' | 'down') => {
 		let nextSelectedElement = null;
 
 		if (dir === 'up') {

apps/meteor/client/sidebar/sections/OmnichannelSection.tsx

@@ -23,7 +23,7 @@ const OmnichannelSection = () => {
 	const queueListRoute = useRoute('livechat-queue');
 	const isWorkspaceOverMacLimit = useIsOverMacLimit();
 
-	const handleRoute = useEffectEvent((route) => {
+	const handleRoute = useEffectEvent((route: string) => {
 		sidebar.toggle();
 
 		switch (route) {

apps/meteor/client/sidebarv2/Item/Condensed.tsx

@@ -1,7 +1,7 @@
 import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
 import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
-import type { HTMLAttributes, ReactElement } from 'react';
+import type { HTMLAttributes, ReactElement, UIEvent } from 'react';
 import { memo, useState } from 'react';
 
 type CondensedProps = {
@@ -24,8 +24,8 @@ const Condensed = ({ icon, title, avatar, actions, unread, menu, badges, ...prop
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
 
-	const handleMenu = useEffectEvent((e) => {
-		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
+	const handleMenu = useEffectEvent((e: UIEvent<HTMLDivElement>) => {
+		setMenuVisibility(e.currentTarget.offsetWidth > 0 && Boolean(menu));
 	});
 	const handleMenuEvent = {
 		[isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu,