chore: Use named components instead of Field.* (RocketChat#37228)

Author: tassoevan

apps/meteor/client/views/admin/import/NewImportPage.tsx

@@ -1,4 +1,19 @@
-import { Box, Button, ButtonGroup, Callout, Chip, Field, Margins, Select, InputBox, TextInput, UrlInput } from '@rocket.chat/fuselage';
+import {
+	Box,
+	Button,
+	ButtonGroup,
+	Callout,
+	Chip,
+	Field,
+	Margins,
+	Select,
+	InputBox,
+	TextInput,
+	UrlInput,
+	FieldLabel,
+	FieldRow,
+	FieldHint,
+} from '@rocket.chat/fuselage';
 import { useSafely } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useToastMessageDispatch, useRouter, useRouteParameter, useSetting, useEndpoint } from '@rocket.chat/ui-contexts';
@@ -201,10 +216,10 @@ function NewImportPage() {
 				<Box marginInline='auto' marginBlock='neg-x24' width='full' maxWidth='x580'>
 					<Margins block='x24'>
 						<Field>
-							<Field.Label alignSelf='stretch' htmlFor={importerKeySelectId}>
+							<FieldLabel alignSelf='stretch' htmlFor={importerKeySelectId}>
 								{t('Import_Type')}
-							</Field.Label>
-							<Field.Row>
+							</FieldLabel>
+							<FieldRow>
 								<Select
 									id={importerKeySelectId}
 									value={importerKey}
@@ -213,21 +228,21 @@ function NewImportPage() {
 									onChange={handleImporterKeyChange}
 									options={options}
 								/>
-							</Field.Row>
+							</FieldRow>
 							{importer && (
-								<Field.Hint>
+								<FieldHint>
 									{importer.key === 'csv'
 										? t('Importer_From_Description_CSV')
 										: t('Importer_From_Description', { from: t(importer.name as TranslationKey) })}
-								</Field.Hint>
+								</FieldHint>
 							)}
 						</Field>
 						{importer && (
 							<Field>
-								<Field.Label alignSelf='stretch' htmlFor={fileTypeSelectId}>
+								<FieldLabel alignSelf='stretch' htmlFor={fileTypeSelectId}>
 									{t('File_Type')}
-								</Field.Label>
-								<Field.Row>
+								</FieldLabel>
+								<FieldRow>
 									<Select
 										id={fileTypeSelectId}
 										value={fileType}
@@ -240,7 +255,7 @@ function NewImportPage() {
 											['path', t('Server_File_Path')],
 										]}
 									/>
-								</Field.Row>
+								</FieldRow>
 							</Field>
 						)}
 						{importer && (
@@ -259,42 +274,42 @@ function NewImportPage() {
 											</Callout>
 										)}
 										<Field>
-											<Field.Label alignSelf='stretch' htmlFor={fileSourceInputId}>
+											<FieldLabel alignSelf='stretch' htmlFor={fileSourceInputId}>
 												{t('Importer_Source_File')}
-											</Field.Label>
-											<Field.Row>
+											</FieldLabel>
+											<FieldRow>
 												<InputBox type='file' id={fileSourceInputId} onChange={handleImportFileChange} />
-											</Field.Row>
+											</FieldRow>
 											{files?.length > 0 && (
-												<Field.Row>
+												<FieldRow>
 													{files.map((file, i) => (
 														<Chip key={i} onClick={handleFileUploadChipClick(file)}>
 															{file.name}
 														</Chip>
 													))}
-												</Field.Row>
+												</FieldRow>
 											)}
 										</Field>
 									</>
 								)}
 								{fileType === 'url' && (
 									<Field>
-										<Field.Label alignSelf='stretch' htmlFor={fileSourceInputId}>
+										<FieldLabel alignSelf='stretch' htmlFor={fileSourceInputId}>
 											{t('File_URL')}
-										</Field.Label>
-										<Field.Row>
+										</FieldLabel>
+										<FieldRow>
 											<UrlInput id={fileSourceInputId} value={fileUrl} onChange={handleFileUrlChange} />
-										</Field.Row>
+										</FieldRow>
 									</Field>
 								)}
 								{fileType === 'path' && (
 									<Field>
-										<Field.Label alignSelf='stretch' htmlFor={fileSourceInputId}>
+										<FieldLabel alignSelf='stretch' htmlFor={fileSourceInputId}>
 											{t('File_Path')}
-										</Field.Label>
-										<Field.Row>
+										</FieldLabel>
+										<FieldRow>
 											<TextInput id={fileSourceInputId} value={filePath} onChange={handleFilePathChange} />
-										</Field.Row>
+										</FieldRow>
 									</Field>
 								)}
 							</>