Regression: Extension List panel UI not aligned with designs (#24645)

client/views/admin/settings/groups/voip/AssignAgentButton.tsx

@@ -0,0 +1,27 @@
+import { Table, Icon, Button } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import React, { FC } from 'react';
+
+import { useSetModal } from '../../../../../contexts/ModalContext';
+import { useTranslation } from '../../../../../contexts/TranslationContext';
+import AssignAgentModal from './AssignAgentModal';
+
+const AssignAgentButton: FC<{ extension: string; reload: () => void }> = ({ extension, reload }) => {
+	const t = useTranslation();
+	const setModal = useSetModal();
+
+	const handleAssociation = useMutableCallback((e) => {
+		e.stopPropagation();
+		setModal(<AssignAgentModal existingExtension={extension} closeModal={(): void => setModal()} reload={reload} />);
+	});
+
+	return (
+		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
+			<Button small ghost title={t('Associate_Agent')} onClick={handleAssociation}>
+				<Icon name='user-plus' size='x20' mie='x4' />
+			</Button>
+		</Table.Cell>
+	);
+};
+
+export default AssignAgentButton;

client/views/admin/settings/groups/voip/AssignAgentModal.tsx

@@ -11,12 +11,13 @@ import { useEndpointData } from '../../../../../hooks/useEndpointData';
 type AssignAgentModalParams = {
 	closeModal: () => void;
 	reload: () => void;
+	existingExtension?: string;
 };
 
-const AssignAgentModal: FC<AssignAgentModalParams> = ({ closeModal, reload }) => {
+const AssignAgentModal: FC<AssignAgentModalParams> = ({ existingExtension, closeModal, reload }) => {
 	const t = useTranslation();
 	const [agent, setAgent] = useState('');
-	const [extension, setExtension] = useState('');
+	const [extension, setExtension] = useState(existingExtension || '');
 	const query = useMemo(() => ({ type: 'available' as const, userId: agent }), [agent]);
 
 	const assignAgent = useEndpoint('POST', 'omnichannel/agent/extension');

client/views/admin/settings/groups/voip/RemoveAgentButton.tsx

@@ -17,7 +17,7 @@ const RemoveAgentButton: FC<{ username: string; reload: () => void }> = ({ usern
 	const handleRemoveClick = useMutableCallback(async () => {
 		try {
 			await removeAgent({ username });
-		} catch (error) {
+		} catch (error: any) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}
 		reload();
@@ -29,7 +29,7 @@ const RemoveAgentButton: FC<{ username: string; reload: () => void }> = ({ usern
 			try {
 				await handleRemoveClick();
 				dispatchToastMessage({ type: 'success', message: t('Agent_removed') });
-			} catch (error) {
+			} catch (error: any) {
 				dispatchToastMessage({ type: 'error', message: error });
 			}
 			setModal();
@@ -48,7 +48,7 @@ const RemoveAgentButton: FC<{ username: string; reload: () => void }> = ({ usern
 
 	return (
 		<Table.Cell fontScale='p2' color='hint' withTruncatedText>
-			<Button small ghost title={t('Remove')} onClick={handleDelete}>
+			<Button small ghost title={t('Remove_Association')} onClick={handleDelete}>
 				<Icon name='trash' size='x16' />
 			</Button>
 		</Table.Cell>

client/views/admin/settings/groups/voip/VoipExtensionsPage.tsx

@@ -4,9 +4,11 @@ import React, { FC, useMemo, useCallback, useState } from 'react';
 
 import GenericTable from '../../../../../components/GenericTable';
 import Page from '../../../../../components/Page';
+import UserAvatar from '../../../../../components/avatar/UserAvatar';
 import { useSetModal } from '../../../../../contexts/ModalContext';
 import { useTranslation } from '../../../../../contexts/TranslationContext';
 import { useEndpointData } from '../../../../../hooks/useEndpointData';
+import AssignAgentButton from './AssignAgentButton';
 import AssignAgentModal from './AssignAgentModal';
 import RemoveAgentButton from './RemoveAgentButton';
 
@@ -51,10 +53,25 @@ const VoipExtensionsPage: FC = () => {
 	);
 
 	const renderRow = useCallback(
-		({ _id, extension, username, state, queues }) => (
+		({ _id, extension, username, name, state, queues }) => (
 			<Table.Row key={_id} tabIndex={0}>
 				<Table.Cell withTruncatedText>{extension}</Table.Cell>
-				<Table.Cell withTruncatedText>{username || t('Unassigned')}</Table.Cell>
+				<Table.Cell withTruncatedText>
+					{username ? (
+						<Box display='flex' alignItems='center'>
+							<UserAvatar size={'x28'} username={username} />
+							<Box display='flex' mi='x8'>
+								<Box display='flex' flexDirection='column' alignSelf='center'>
+									<Box fontScale='p2m' color='default'>
+										{name || username}
+									</Box>
+								</Box>
+							</Box>
+						</Box>
+					) : (
+						t('Free')
+					)}
+				</Table.Cell>
 				<Table.Cell withTruncatedText>{state}</Table.Cell>
 				<Table.Cell withTruncatedText maxHeight='x36'>
 					<Box display='flex' flexDirection='row' alignItems='center' title={queues?.join(', ')}>
@@ -69,7 +86,7 @@ const VoipExtensionsPage: FC = () => {
 						{queues?.length > 2 && `+${(queues.length - 2).toString()}`}
 					</Box>
 				</Table.Cell>
-				{username ? <RemoveAgentButton username={username} reload={reload} /> : null}
+				{username ? <RemoveAgentButton username={username} reload={reload} /> : <AssignAgentButton extension={extension} reload={reload} />}
 			</Table.Row>
 		),
 		[reload, t],

definition/IVoipExtension.ts

@@ -18,6 +18,7 @@ export interface IVoipExtensionWithAgentInfo extends IVoipExtensionBase {
 	queues?: string[];
 	userId?: IUser['_id'];
 	username?: IUser['username'];
+	name?: IUser['name'];
 }
 
 export const isIVoipExtensionBase = (obj: any): obj is IVoipExtensionBase =>

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -3552,6 +3552,7 @@
   "Reload_Pages": "Reload Pages",
   "Remove": "Remove",
   "Remove_Admin": "Remove Admin",
+  "Remove_Association": "Remove Association",
   "Remove_as_leader": "Remove as leader",
   "Remove_as_moderator": "Remove as moderator",
   "Remove_as_owner": "Remove as owner",

server/services/omnichannel-voip/service.ts

@@ -361,13 +361,15 @@ export class OmnichannelVoipService extends ServiceClassInternal implements IOmn
 			extension: 1,
 			_id: 1,
 			username: 1,
+			name: 1,
 		});
 
 		return (extensions as unknown as IVoipExtensionBase[]).map((ext) => {
 			const user = allocatedExtensions.find((ex) => ex.extension === ext.extension);
 			return {
 				userId: user?._id,
 				username: user?.username,
+				name: user?.name,
 				queues: this.getQueuesForExt(ext.extension, summary),
 				...ext,
 			};