Add hideErrorText prop to CustomThreshold

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

@@ -4,9 +4,8 @@ import Checkbox from "../../../../Components/Inputs/Checkbox";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
-
 /**
- * `CustomThreshold` is a functional React component that displays a 
+ * `CustomThreshold` is a functional React component that displays a
  * group of CheckBox with a label and its correspondant threshold input field.
  *
  * @param {{ checkboxId: any; checkboxLabel: any; onCheckboxChange: any; fieldId: any; onFieldChange: any; onFieldBlur: any; alertUnit: any; infrastructureMonitor: any; errors: any; }} param0
@@ -20,64 +19,65 @@ import PropTypes from "prop-types";
  * @param {object} param0.infrastructureMonitor the form object of the create infrastrcuture monitor page
  * @param {object} param0.errors the object that holds all the errors of the form page
  * @returns A compound React component that renders the custom threshold alert section
- * 
+ *
  */
 
 export const CustomThreshold = ({
-    checkboxId,
-    checkboxLabel,
-    onCheckboxChange,
-    fieldId,		
-    onFieldChange,
-    onFieldBlur,
-    alertUnit,
-    infrastructureMonitor,
-    errors
-}) => 
-    {
-        const theme  = useTheme();
-        return (
-    <Stack
-        direction={"row"}
-        sx={{
-            width: "50%",
-            justifyContent: "space-between",
-            flexWrap: "wrap"         
-        }}
-    >
-        <Box>
-            <Checkbox
-                id={checkboxId}
-                label={checkboxLabel}
-                isChecked={infrastructureMonitor[checkboxId]}
-                onChange={onCheckboxChange}
-            />
-        </Box>
-        <Stack
-            direction={"row"}
-            sx={{
-                justifyContent: "flex-end",
-            }}
-        >
-            <Field
-                type="number"
-                className="field-infrastructure-alert"
-                id={fieldId}
-                value={infrastructureMonitor[fieldId]}
-                onBlur={onFieldBlur}
-                onChange={onFieldChange}
-                error={errors[fieldId]}
-                disabled={!infrastructureMonitor[checkboxId]}
-            ></Field>
-            <Typography
-                component="p"
-                m={theme.spacing(3)}
-            >
-                {alertUnit}
-            </Typography>
-        </Stack>
-    </Stack>
-)}
+	checkboxId,
+	checkboxLabel,
+	onCheckboxChange,
+	fieldId,
+	onFieldChange,
+	onFieldBlur,
+	alertUnit,
+	infrastructureMonitor,
+	errors,
+}) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction={"row"}
+			sx={{
+				width: "50%",
+				justifyContent: "space-between",
+				flexWrap: "wrap",
+			}}
+		>
+			<Box>
+				<Checkbox
+					id={checkboxId}
+					label={checkboxLabel}
+					isChecked={infrastructureMonitor[checkboxId]}
+					onChange={onCheckboxChange}
+				/>
+			</Box>
+			<Stack
+				direction={"row"}
+				sx={{
+					justifyContent: "flex-end",
+				}}
+			>
+				<Field
+					type="number"
+					className="field-infrastructure-alert"
+					id={fieldId}
+					value={infrastructureMonitor[fieldId]}
+					onBlur={onFieldBlur}
+					onChange={onFieldChange}
+					error={errors[fieldId]}
+					disabled={!infrastructureMonitor[checkboxId]}
+					hideErrorText={true}
+				></Field>
+				<Typography
+					component="p"
+					m={theme.spacing(3)}
+				>
+					{alertUnit}
+				</Typography>
+			</Stack>
+		</Stack>
+	);
+};
 
 CustomThreshold.propTypes = {
 	checkboxId: PropTypes.string.isRequired,
@@ -89,4 +89,4 @@ CustomThreshold.propTypes = {
 	alertUnit: PropTypes.string.isRequired,
 	infrastructureMonitor: PropTypes.object.isRequired,
 	errors: PropTypes.object.isRequired,
-};
+};