- set error as null instead of delete it

- customize checkbox to pass in element as label
- adjust checkbox posion to appear align top with string within the element label based on review feedback
- remove the checkbox margin setting instead of comment out

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

@@ -39,6 +39,7 @@ const Checkbox = ({
 }) => {
 	const sizes = { small: "14px", medium: "16px", large: "18px" };
 	const theme = useTheme();
+	const checkBoxPosition = typeof label === "string" ? {} : { pb: "65px" };
 
 	return (
 		<FormControlLabel
@@ -65,11 +66,11 @@ const Checkbox = ({
 			sx={{
 				borderRadius: theme.shape.borderRadius,
 				p: theme.spacing(2.5),
-				//m: theme.spacing(-2.5),
 				"& .MuiButtonBase-root": {
 					width: theme.spacing(10),
 					p: 0,
 					mr: theme.spacing(6),
+					...checkBoxPosition,
 				},
 				"&:not(:has(.Mui-disabled)):hover": {
 					backgroundColor: theme.palette.background.accent,
@@ -85,7 +86,7 @@ const Checkbox = ({
 
 Checkbox.propTypes = {
 	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
 	size: PropTypes.oneOf(["small", "medium", "large"]),
 	isChecked: PropTypes.bool.isRequired,
 	value: PropTypes.string,

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

@@ -29,15 +29,15 @@ const CreateInfrastructureMonitor = () => {
 		cpu: false,
 		usage_cpu: "",
 		memory: false,
-		usage_memory: "",		
+		usage_memory: "",
 		disk: false,
-		usage_disk: "",				
+		usage_disk: "",
 		secret: "",
 	});
 
 	const MS_PER_MINUTE = 60000;
-	const THRESHOLD_FIELD_PREFIX = "usage_"
-	const HARDWARE_MONITOR_TYPES = ["cpu","memory","disk"]
+	const THRESHOLD_FIELD_PREFIX = "usage_";
+	const HARDWARE_MONITOR_TYPES = ["cpu", "memory", "disk"];
 	const { user, authToken } = useSelector((state) => state.auth);
 	const monitorState = useSelector((state) => state.infrastructureMonitor);
 	const dispatch = useDispatch();
@@ -50,8 +50,9 @@ const CreateInfrastructureMonitor = () => {
 
 	const [errors, setErrors] = useState({});
 
-	const alertErrKeyLen = Object.keys(errors)
-							.filter(k => k.startsWith(THRESHOLD_FIELD_PREFIX)).length
+	const alertErrKeyLen = Object.keys(errors).filter((k) =>
+		k.startsWith(THRESHOLD_FIELD_PREFIX)
+	).length;
 
 	const handleCustomAlertCheckChange = (event) => {
 		const { value, id } = event.target;
@@ -62,14 +63,14 @@ const CreateInfrastructureMonitor = () => {
 			return {
 				...prev,
 				...newState,
-				[THRESHOLD_FIELD_PREFIX+ id]: newState[id]
-					? prev[THRESHOLD_FIELD_PREFIX+ id]
+				[THRESHOLD_FIELD_PREFIX + id]: newState[id]
+					? prev[THRESHOLD_FIELD_PREFIX + id]
 					: "",
 			};
 		});
 		// Remove the error if unchecked
 		setErrors((prev) => {
-			return buildErrors(prev, [THRESHOLD_FIELD_PREFIX+ id]);
+			return buildErrors(prev, [THRESHOLD_FIELD_PREFIX + id]);
 		});
 	};
 
@@ -134,7 +135,7 @@ const CreateInfrastructureMonitor = () => {
 				if (form[k]) thresholds[k] = form[k];
 				delete form[k];
 				delete form[k.substring(THRESHOLD_FIELD_PREFIX.length)];
-			});	
+			});
 
 		form = {
 			...form,
@@ -193,6 +194,25 @@ const CreateInfrastructureMonitor = () => {
 		{ _id: 600, name: "10 minutes" },
 	];
 
+	const NOTIFY_MULTIPLE_EMAIL_LABEL = (
+		<Box>
+			<Typography mb={theme.spacing(4)}>
+				Also notify via email to multiple addresses (coming soon)
+			</Typography>
+			<Field
+				id="notify-email-list"
+				type="text"
+				placeholder="name@gmail.com"
+				value=""
+				onChange={() => logger.warn("disabled")}
+				onBlur={handleBlur}
+			/>
+			<Typography mt={theme.spacing(4)}>
+				You can separate multiple emails with a comma
+			</Typography>
+		</Box>
+	);
+
 	return (
 		<Box className="create-infrastructure-monitor">
 			<Breadcrumbs
@@ -289,26 +309,13 @@ const CreateInfrastructureMonitor = () => {
 						/>
 						<Checkbox
 							id="notify-email"
-							label="Also notify via email to multiple addresses (coming soon)"
+							label={NOTIFY_MULTIPLE_EMAIL_LABEL}
 							isChecked={false}
 							value=""
 							onChange={() => logger.warn("disabled")}
 							onBlur={handleBlur}
 							isDisabled={true}
 						/>
-						<Box mx={theme.spacing(16)}>
-							<Field
-								id="notify-email-list"
-								type="text"
-								placeholder="name@gmail.com"
-								value=""
-								onChange={() => logger.warn("disabled")}
-								onBlur={handleBlur}
-							/>
-							<Typography mt={theme.spacing(4)}>
-								You can separate multiple emails with a comma
-							</Typography>
-						</Box>
 					</Stack>
 				</ConfigBox>
 

Client/src/Validation/error.js

@@ -29,13 +29,13 @@ const hasValidationErrors = (form, validation, setErrors) => {
 			}
 			// Handle conditionally usage number required cases
 			if (!form.cpu || (form.cpu && form.usage_cpu)) {
-				delete newErrors["usage_cpu"];
+				newErrors["usage_cpu"] = null;
 			}
 			if (!form.memory || (form.memory && form.usage_memory)) {
-				delete newErrors["usage_memory"];
+				newErrors["usage_memory"] = null;
 			}
 			if (!form.disk || (form.disk && form.usage_disk)) {
-				delete newErrors["usage_disk"];
+				newErrors["usage_disk"] = null;
 			}
 		});
 		if (Object.keys(newErrors).length > 0) {