integrate TextField into create infrastructure page

Client/src/Components/Inputs/TextInput/index.jsx

@@ -56,6 +56,7 @@ Optional.propTypes = {
 const TextInput = forwardRef(
 	(
 		{
+			id,
 			type,
 			value,
 			placeholder,
@@ -63,12 +64,14 @@ const TextInput = forwardRef(
 			isOptional,
 			optionalLabel,
 			onChange,
+			onBlur,
 			error = false,
 			helperText = null,
 			startAdornment = null,
 			endAdornment = null,
 			label = null,
 			maxWidth = "100%",
+			disabled = false,
 		},
 		ref
 	) => {
@@ -87,10 +90,12 @@ const TextInput = forwardRef(
 					{isOptional && <Optional optionalLabel={optionalLabel} />}
 				</Typography>
 				<TextField
+					id={id}
 					type={fieldType}
 					value={value}
 					placeholder={placeholder}
 					onChange={onChange}
+					onBlur={onBlur}
 					error={error}
 					helperText={helperText}
 					inputRef={ref}
@@ -103,6 +108,7 @@ const TextInput = forwardRef(
 								: null,
 						},
 					}}
+					disabled={disabled}
 				/>
 			</Stack>
 		);
@@ -113,18 +119,21 @@ TextInput.displayName = "TextInput";
 
 TextInput.propTypes = {
 	type: PropTypes.string,
+	id: PropTypes.string.isRequired,
 	value: PropTypes.string,
 	placeholder: PropTypes.string,
 	isRequired: PropTypes.bool,
 	isOptional: PropTypes.bool,
 	optionalLabel: PropTypes.string,
 	onChange: PropTypes.func,
+	onBlur: PropTypes.func,
 	error: PropTypes.bool,
 	helperText: PropTypes.string,
 	startAdornment: PropTypes.node,
 	endAdornment: PropTypes.node,
 	label: PropTypes.string,
 	maxWidth: PropTypes.string,
+	disabled: PropTypes.bool,
 };
 
 export default TextInput;

Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx

@@ -1,5 +1,6 @@
 import { Box, Stack, Typography } from "@mui/material";
 import Field from "../../../../Components/Inputs/Field";
+import TextInput from "../../../../Components/Inputs/TextInput";
 import Checkbox from "../../../../Components/Inputs/Checkbox";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
@@ -57,17 +58,17 @@ export const CustomThreshold = ({
 					justifyContent: "flex-end",
 				}}
 			>
-				<Field
+				<TextInput
+					maxWidth="var(--env-var-width-4)"
 					type="number"
-					className="field-infrastructure-alert"
 					id={fieldId}
 					value={infrastructureMonitor[fieldId]}
 					onBlur={onFieldBlur}
 					onChange={onFieldChange}
-					error={errors[fieldId]}
+					error={errors[fieldId] ? true : false}
 					disabled={!infrastructureMonitor[checkboxId]}
-					hideErrorText={true}
-				></Field>
+				/>
+
 				<Typography
 					component="p"
 					m={theme.spacing(3)}

Client/src/Pages/Infrastructure/CreateMonitor/index.jsx

@@ -10,9 +10,9 @@ import {
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import { createToast } from "../../../Utils/toastUtils";
-import { logger } from "../../../Utils/Logger";
 import { ConfigBox } from "../../Monitors/styled";
 import Field from "../../../Components/Inputs/Field";
+import TextInput from "../../../Components/Inputs/TextInput";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -93,7 +93,6 @@ const CreateInfrastructureMonitor = () => {
 		event.preventDefault();
 		const { value, id } = event.target;
 		let name = appendedId ?? idMap[id] ?? id;
-
 		if (name.includes("notification-")) {
 			name = name.replace("notification-", "");
 			let hasNotif = infrastructureMonitor.notifications.some(
@@ -240,7 +239,7 @@ const CreateInfrastructureMonitor = () => {
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(15)}>
-						<Field
+						<TextInput
 							type="text"
 							id="url"
 							label="Server URL"
@@ -248,9 +247,10 @@ const CreateInfrastructureMonitor = () => {
 							value={infrastructureMonitor.url}
 							onBlur={handleBlur}
 							onChange={handleChange}
-							error={errors["url"]}
+							error={errors["url"] ? true : false}
+							helperText={errors["url"]}
 						/>
-						<Field
+						<TextInput
 							type="text"
 							id="name"
 							label="Friendly name"
@@ -260,14 +260,15 @@ const CreateInfrastructureMonitor = () => {
 							onChange={handleChange}
 							error={errors["name"]}
 						/>
-						<Field
+						<TextInput
 							type="text"
 							id="secret"
 							label="Authorization secret"
 							value={infrastructureMonitor.secret}
 							onBlur={handleBlur}
 							onChange={handleChange}
-							error={errors["secret"]}
+							error={errors["secret"] ? true : false}
+							helperText={errors["secret"]}
 						/>
 					</Stack>
 				</ConfigBox>
@@ -297,7 +298,8 @@ const CreateInfrastructureMonitor = () => {
 					<Box>
 						<Typography component="h2">Customize alerts</Typography>
 						<Typography component="p">
-							Send a notification to user(s) when thresholds exceed a specified percentage.
+							Send a notification to user(s) when thresholds exceed a specified
+							percentage.
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(6)}>