[FIX] Input without label and email ordering missing on Omnichannel Agents page (#19414)

* [FIX] Input without label and sorting by e-mail isn't working.

* [FIX] Fixing title to get from i18n.

Co-authored-by: Renato Becker <renato.augusto.becker@gmail.com>

client/omnichannel/agents/AgentsPage.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Box } from '@rocket.chat/fuselage';
+import { Button, Box, Field } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import { UserAutoComplete } from '../../components/basic/AutoComplete';
@@ -27,8 +27,13 @@ function AddAgent({ reload, ...props }) {
 		setUsername();
 	});
 	return <Box display='flex' alignItems='center' {...props}>
-		<UserAutoComplete value={username} onChange={setUsername}/>
-		<Button disabled={!username} onClick={handleSave} mis='x8' primary>{t('Add')}</Button>
+		<Field>
+			<Field.Label>{t('Username')}</Field.Label>
+			<Field.Row>
+				<UserAutoComplete value={username} onChange={setUsername}/>
+				<Button disabled={!username} onClick={handleSave} mis='x8' primary>{t('Add')}</Button>
+			</Field.Row>
+		</Field>
 	</Box>;
 }
 

client/omnichannel/agents/AgentsRoute.js

@@ -151,7 +151,7 @@ function AgentsRoute() {
 	const header = useMemo(() => [
 		<GenericTable.HeaderCell key={'name'} direction={sort[1]} active={sort[0] === 'name'} onClick={onHeaderClick} sort='name' w='x200'>{t('Name')}</GenericTable.HeaderCell>,
 		mediaQuery && <GenericTable.HeaderCell key={'username'} direction={sort[1]} active={sort[0] === 'username'} onClick={onHeaderClick} sort='username' w='x140'>{t('Username')}</GenericTable.HeaderCell>,
-		<GenericTable.HeaderCell key={'email'} direction={sort[1]} active={sort[0] === 'emails.adress'} onClick={onHeaderClick} sort='emails.address' w='x120'>{t('Email')}</GenericTable.HeaderCell>,
+		<GenericTable.HeaderCell key={'email'} direction={sort[1]} active={sort[0] === 'emails.address'} onClick={onHeaderClick} sort='emails.address' w='x120'>{t('Email')}</GenericTable.HeaderCell>,
 		<GenericTable.HeaderCell key={'status'} direction={sort[1]} active={sort[0] === 'status'} onClick={onHeaderClick} sort='status' w='x120'>{t('Livechat_status')}</GenericTable.HeaderCell>,
 		<GenericTable.HeaderCell key={'remove'} w='x40'>{t('Remove')}</GenericTable.HeaderCell>,
 	].filter(Boolean), [sort, onHeaderClick, t, mediaQuery]);
@@ -211,7 +211,7 @@ function AgentsRoute() {
 		reload={reload}
 		header={header}
 		renderRow={renderRow}
-		title={'Agents'}>
+		title={t('Agents')}>
 		<EditAgentsTab />
 	</AgentsPage>;
 }