review

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

@@ -7,6 +7,7 @@ type UserAvatarProps = Omit<BaseAvatarProps, 'url' | 'title'> & {
 	username: string;
 	etag?: string;
 	url?: string;
+	title?: string;
 };
 
 const UserAvatar: FC<UserAvatarProps> = ({ username, etag, ...rest }) => {

apps/meteor/client/views/omnichannel/agents/AgentEditWithData.tsx

@@ -34,7 +34,9 @@ const AgentEditWithData: FC<AgentEditWithDataProps> = ({ uid, reload }) => {
 		return <Box mbs='x16'>{t('User_not_found')}</Box>;
 	}
 
-	return <AgentEdit uid={uid} data={data} userDepartments={userDepartments} availableDepartments={availableDepartments} reset={reload} />;
+	return (
+		<AgentEdit uid={uid} data={data.user} userDepartments={userDepartments} availableDepartments={availableDepartments} reset={reload} />
+	);
 };
 
 export default AgentEditWithData;

apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx

@@ -1,45 +1,44 @@
 import { Box, Margins, ButtonGroup } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { memo } from 'react';
-import { useSubscription } from 'use-subscription';
+import React, { memo, ReactElement } from 'react';
 
 import { FormSkeleton } from '../../../components/Skeleton';
 import { UserStatus } from '../../../components/UserStatus';
 import VerticalBar from '../../../components/VerticalBar';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../hooks/useEndpointData';
 import UserInfo from '../../room/contextualBar/UserInfo';
-import { formsSubscription } from '../additionalForms';
+import { useFormsSubscription } from '../additionalForms';
 import AgentInfoAction from './AgentInfoAction';
 
 type AgentInfoProps = {
 	uid: string;
+	children?: ReactElement;
 };
 
 export const AgentInfo = memo<AgentInfoProps>(function AgentInfo({ uid, children, ...props }) {
 	const t = useTranslation();
-	const { value: data, phase: state, error } = useEndpointData(`livechat/users/agent/${uid}`);
-	const eeForms = useSubscription(formsSubscription);
+	const result = useEndpointData(`livechat/users/agent/${uid}`);
 
-	const { useMaxChatsPerAgentDisplay = (): void => {} } = eeForms;
+	const { useMaxChatsPerAgentDisplay } = useFormsSubscription();
 
-	const MaxChats = useMaxChatsPerAgentDisplay();
+	const MaxChats = useMaxChatsPerAgentDisplay?.();
 
-	if (state === AsyncStatePhase.LOADING) {
+	if (result.phase === AsyncStatePhase.LOADING) {
 		return <FormSkeleton />;
 	}
 
-	if (error || !data || !data.user) {
+	if (result.phase === AsyncStatePhase.REJECTED) {
 		return <Box mbs='x16'>{t('User_not_found')}</Box>;
 	}
 
-	const { user } = data;
+	const { user } = result.value;
 	const { username, statusLivechat, status: userStatus } = user;
 
 	return (
 		<VerticalBar.ScrollableContent p='x24' {...props}>
 			<Box alignSelf='center'>
-				<UserInfo.Avatar size={'x332'} username={username} />
+				<UserInfo.Avatar size='x332' username={username} />
 			</Box>
 
 			<ButtonGroup mi='neg-x4' flexShrink={0} flexWrap='nowrap' withTruncatedText justifyContent='center'>

apps/meteor/client/views/omnichannel/agents/AgentsPage.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Key, ReactElement } from 'react';
+import React, { FC, Key, ReactNode, ReactElement } from 'react';
 
 import FilterByText from '../../../components/FilterByText';
 import GenericTable from '../../../components/GenericTable';
@@ -8,12 +8,11 @@ import AddAgent from './AddAgent';
 type AgentPageProps = {
 	reload: () => void;
 	data: any;
-	header: string;
+	header: ReactNode;
 	setParams: (params: any) => void;
 	params: any;
 	title: string;
 	renderRow: (props: { _id?: Key }) => ReactElement;
-	onChange: (filter: { text: string }) => void;
 };
 
 const AgentsPage: FC<AgentPageProps> = ({ data, reload, header, setParams, params, title, renderRow, children }) => (

apps/meteor/client/views/omnichannel/agents/AgentsRoute.tsx

@@ -2,9 +2,10 @@ import { Box, Table } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMediaQuery, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { PaginatedRequest } from '@rocket.chat/rest-typings';
 import { useRouteParameter, useRoute, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useMemo, useCallback, useState, FC } from 'react';
+import React, { useMemo, useCallback, useState, FC, ReactElement } from 'react';
 
 import GenericTable from '../../../components/GenericTable';
+import { useSort } from '../../../components/GenericTable/hooks/useSort';
 import VerticalBar from '../../../components/VerticalBar';
 import UserAvatar from '../../../components/avatar/UserAvatar';
 import { useEndpointData } from '../../../hooks/useEndpointData';
@@ -15,9 +16,20 @@ import AgentInfoActions from './AgentInfoActions';
 import AgentsPage from './AgentsPage';
 import RemoveAgentButton from './RemoveAgentButton';
 
-const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);
-
-const useQuery = ({ text, itemsPerPage, current }, [column, direction]): PaginatedRequest<{ text: string }> =>
+const sortDir = (sortDir: 'asc' | 'desc'): 1 | -1 => (sortDir === 'asc' ? 1 : -1);
+
+const useQuery = (
+	{
+		text,
+		itemsPerPage,
+		current,
+	}: {
+		text: string;
+		itemsPerPage: number;
+		current: number;
+	},
+	[column, direction]: [string, 'asc' | 'desc'],
+): PaginatedRequest<{ text: string }> =>
 	useMemo(
 		() => ({
 			fields: JSON.stringify({ name: 1, username: 1, emails: 1, avatarETag: 1 }),
@@ -37,25 +49,30 @@ const AgentsRoute: FC = () => {
 	const canViewAgents = usePermission('manage-livechat-agents');
 
 	const [params, setParams] = useState({ text: '', current: 0, itemsPerPage: 25 });
-	const [sort, setSort] = useState(['name', 'asc']);
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address' | 'statusLivechat'>('name');
 
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');
 
 	const debouncedParams = useDebouncedValue(params, 500);
-	const debouncedSort = useDebouncedValue(sort, 500);
+	const debouncedSort = useDebouncedValue([sortBy, sortDirection], 500) as [
+		'name' | 'username' | 'emails.address' | 'statusLivechat',
+		'asc' | 'desc',
+	];
 	const query = useQuery(debouncedParams, debouncedSort);
 	const agentsRoute = useRoute('omnichannel-agents');
 	const context = useRouteParameter('context');
 	const id = useRouteParameter('id');
 
-	const onHeaderClick = useMutableCallback((id) => {
-		const [sortBy, sortDirection] = sort;
+	if (!id) {
+		throw new Error('Agent id is required');
+	}
 
+	const onHeaderClick = useMutableCallback((id) => {
 		if (sortBy === id) {
-			setSort([id, sortDirection === 'asc' ? 'desc' : 'asc']);
+			setSort(id, sortDirection === 'asc' ? 'desc' : 'asc');
 			return;
 		}
-		setSort([id, 'asc']);
+		setSort(id, 'asc');
 	});
 
 	const onRowClick = useMutableCallback(
@@ -71,14 +88,14 @@ const AgentsRoute: FC = () => {
 	const header = useMemo(
 		() =>
 			[
-				<GenericTable.HeaderCell key={'name'} direction={sort[1]} active={sort[0] === 'name'} onClick={onHeaderClick} sort='name'>
+				<GenericTable.HeaderCell key={'name'} direction={sortDirection} active={sortBy === 'name'} onClick={onHeaderClick} sort='name'>
 					{t('Name')}
 				</GenericTable.HeaderCell>,
 				mediaQuery && (
 					<GenericTable.HeaderCell
 						key={'username'}
-						direction={sort[1]}
-						active={sort[0] === 'username'}
+						direction={sortDirection}
+						active={sortBy === 'username'}
 						onClick={onHeaderClick}
 						sort='username'
 					>
@@ -87,17 +104,17 @@ const AgentsRoute: FC = () => {
 				),
 				<GenericTable.HeaderCell
 					key={'email'}
-					direction={sort[1]}
-					active={sort[0] === 'emails.address'}
+					direction={sortDirection}
+					active={sortBy === 'emails.address'}
 					onClick={onHeaderClick}
 					sort='emails.address'
 				>
 					{t('Email')}
 				</GenericTable.HeaderCell>,
 				<GenericTable.HeaderCell
 					key={'status'}
-					direction={sort[1]}
-					active={sort[0] === 'statusLivechat'}
+					direction={sortDirection}
+					active={sortBy === 'statusLivechat'}
 					onClick={onHeaderClick}
 					sort='statusLivechat'
 				>
@@ -107,8 +124,8 @@ const AgentsRoute: FC = () => {
 					{t('Remove')}
 				</GenericTable.HeaderCell>,
 			].filter(Boolean),
-		[sort, onHeaderClick, t, mediaQuery],
-	);
+		[sortDirection, sortBy, onHeaderClick, t, mediaQuery],
+	) as ReactElement[];
 
 	const renderRow = useCallback(
 		({ emails, _id, username, name, avatarETag, statusLivechat }) => (
@@ -147,9 +164,9 @@ const AgentsRoute: FC = () => {
 		[mediaQuery, reload, onRowClick, t],
 	);
 
-	const EditAgentsTab = useCallback(() => {
+	const EditAgentsTab = useCallback((): ReactElement => {
 		if (!context) {
-			return '';
+			return <></>;
 		}
 		const handleVerticalBarCloseButtonClick = () => {
 			agentsRoute.push({});
@@ -166,7 +183,7 @@ const AgentsRoute: FC = () => {
 				{context === 'edit' && <AgentEditWithData uid={id} reload={reload} />}
 				{context === 'info' && (
 					<AgentInfo uid={id}>
-						<AgentInfoActions id={id} reload={reload} />
+						<AgentInfoActions reload={reload} />
 					</AgentInfo>
 				)}
 			</VerticalBar>
@@ -178,17 +195,7 @@ const AgentsRoute: FC = () => {
 	}
 
 	return (
-		<AgentsPage
-			setParams={setParams}
-			params={params}
-			onHeaderClick={onHeaderClick}
-			data={data}
-			useQuery={useQuery}
-			reload={reload}
-			header={header}
-			renderRow={renderRow}
-			title={t('Agents')}
-		>
+		<AgentsPage setParams={setParams} params={params} data={data} reload={reload} header={header} renderRow={renderRow} title={t('Agents')}>
 			<EditAgentsTab />
 		</AgentsPage>
 	);

apps/meteor/definition/methods/omnichannel.ts

@@ -4,7 +4,6 @@ declare module '@rocket.chat/ui-contexts' {
 	// eslint-disable-next-line @typescript-eslint/interface-name-prefix
 	interface ServerMethods {
 		'livechat:addMonitor': (...args: any[]) => any;
-		'livechat:changeLivechatStatus': (...args: any[]) => any;
 		'livechat:closeRoom': (...args: any[]) => any;
 		'livechat:discardTranscript': (...args: any[]) => any;
 
@@ -39,7 +38,6 @@ declare module '@rocket.chat/ui-contexts' {
 		'livechat:returnAsInquiry': (...args: any[]) => any;
 		'livechat:sendTranscript': (...args: any[]) => any;
 		'livechat:transfer': (...args: any[]) => any;
-		'livechat:saveAgentInfo': (...args: any[]) => any;
 		'livechat:saveAppearance': (...args: any[]) => any;
 		'livechat:saveBusinessHour': (...args: any[]) => any;
 		'livechat:saveCustomField': (...args: any[]) => any;

packages/rest-typings/src/v1/omnichannel.ts

@@ -142,12 +142,32 @@ export type OmnichannelEndpoints = {
 		}>;
 	};
 
-	'livechat/users/:type/:_id': {
-		GET: () => { user: ILivechatAgent[] };
+	'livechat/users/manger/:_id': {
+		GET: (
+			params: PaginatedRequest<{
+				text: string;
+			}>,
+		) => { user: ILivechatAgent };
+		DELETE: () => { success: boolean };
+	};
+
+	'livechat/users/manager': {
+		GET: (params: PaginatedRequest<{ text?: string }>) => PaginatedResult<{
+			users: ILivechatAgent[];
+		}>;
+		POST: (params: { username: string }) => { success: boolean };
+	};
+
+	'livechat/users/agent/:_id': {
+		GET: (
+			params: PaginatedRequest<{
+				text: string;
+			}>,
+		) => { user: ILivechatAgent };
 		DELETE: () => { success: boolean };
 	};
 
-	'livechat/users/:type': {
+	'livechat/users/agent': {
 		GET: (params: PaginatedRequest<{ text?: string }>) => PaginatedResult<{
 			users: ILivechatAgent[];
 		}>;

packages/ui-contexts/src/ServerContext/methods.ts

@@ -123,6 +123,8 @@ export interface ServerMethods {
 	'getRoomById': (rid: IRoom['_id']) => IRoom;
 	'getReadReceipts': GetReadReceiptsMethod;
 	'checkRegistrationSecretURL': (hash: string) => boolean;
+	'livechat:changeLivechatStatus': (params: { status: string; agentId: string }) => unknown;
+	'livechat:saveAgentInfo': (_id: string, agentData: unknown, agentDepartments: unknown) => unknown;
 }
 
 export type ServerMethodName = keyof ServerMethods;