From a3adb80a6eebe4842481fee39a19e77ad43aed80 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 21 Nov 2024 12:15:12 +0800
Subject: [PATCH 1/5] add className to list of class names instead of turning
 off default classes, add hideErrorText prop to hide errors for thresholds

---
 Client/src/Components/Inputs/Field/index.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index d1eab532d..eb8251c03 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -46,7 +46,8 @@ const Field = forwardRef(
 			error,
 			disabled,
 			hidden,
-			className
+			className,
+			hideErrorText = false,
 		},
 		ref
 	) => {
@@ -57,7 +58,7 @@ const Field = forwardRef(
 		return (
 			<Stack
 				gap={theme.spacing(2)}
-				className={`${className ?? `field field-${type}`}`}
+				className={`${className} field field-${type}`}
 				sx={{
 					"& fieldset": {
 						borderColor: theme.palette.border.dark,
@@ -186,11 +187,11 @@ const Field = forwardRef(
 						),
 					}}
 				/>
-				{ error && (
+				{error && (
 					<Typography
 						component="span"
 						className="input-error"
-						hidden={className? true: false}						
+						hidden={hideErrorText}
 						color={theme.palette.error.main}
 						mt={theme.spacing(2)}
 						sx={{
@@ -225,7 +226,8 @@ Field.propTypes = {
 	error: PropTypes.string,
 	disabled: PropTypes.bool,
 	hidden: PropTypes.bool,
-	className: PropTypes.string
+	className: PropTypes.string,
+	showErrorText: PropTypes.bool,
 };
 
 export default Field;

From 36d2a0aa85da8592721c46919d71ba73d9c4518c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 21 Nov 2024 12:16:14 +0800
Subject: [PATCH 2/5] set min-width to 0 for infrascructure input fields to
 override default min-width rather than turning off class entirely

---
 Client/src/Components/Inputs/Field/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css
index 33196b3b9..f669847fc 100644
--- a/Client/src/Components/Inputs/Field/index.css
+++ b/Client/src/Components/Inputs/Field/index.css
@@ -3,6 +3,7 @@
 }
 
 .field-infrastructure-alert {
+	min-width: 0;
 	max-width: var(--env-var-width-4);
 }
 

From 692c79024c0902989f02ea98bfc5ba8df23f0c18 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 21 Nov 2024 12:16:46 +0800
Subject: [PATCH 3/5] Add hideErrorText prop to CustomThreshold

---
 .../CreateMonitor/CustomThreshold/index.jsx   | 116 +++++++++---------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx
index 3cdde1bdb..3b664eb5d 100644
--- a/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx
+++ b/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,
-};
\ No newline at end of file
+};

From 992565ff7c152611d8e5916f885607c9f2e56abd Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 21 Nov 2024 12:25:23 +0800
Subject: [PATCH 4/5] update JSdoc

---
 Client/src/Components/Inputs/Field/index.jsx | 40 ++++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index eb8251c03..760547e4f 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -7,23 +7,31 @@ import Visibility from "@mui/icons-material/Visibility";
 import "./index.css";
 
 /**
+ * Field component for rendering various types of input fields with customizable properties
+ *
  * @param {Object} props
- * @param {string} [props.type] - Type of input field (e.g., 'text', 'password').
- * @param {string} props.id - ID of the input field.
- * @param {string} props.name - Name of the input field.
- * @param {string} [props.label] - Label for the input field.
- * @param {boolean} [props.https] - Indicates if it should display http or https.
- * @param {boolean} [props.isRequired] - Indicates if the field is required, will display a red asterisk.
- * @param {boolean} [props.isOptional] - Indicates if the field is optional, will display optional text.
- * @param {string} [props.optionalLabel] - Optional label for the input field.
- * @param {string} [props.autoComplete] - Autocomplete value for the input field.
+ * @param {string} [props.type='text'] - Type of input field (text, password, url, email, description, number).
+ * @param {string} props.id - Unique identifier for the input field.
+ * @param {string} props.name - Name attribute for the input field.
+ * @param {string} [props.label] - Label text displayed above the input field.
+ * @param {boolean} [props.https=true] - For URL type, determines whether to show https:// or http://.
+ * @param {boolean} [props.isRequired=false] - Displays a red asterisk if the field is required.
+ * @param {boolean} [props.isOptional=false] - Displays an optional label next to the field.
+ * @param {string} [props.optionalLabel='(optional)'] - Custom text for optional label.
+ * @param {string} [props.autoComplete] - Autocomplete attribute for the input.
  * @param {string} [props.placeholder] - Placeholder text for the input field.
- * @param {string} props.value - Value of the input field.
- * @param {function} props.onChange - Function called on input change.
- * @param {string} [props.error] - Error message to display for the input field.
- * @param {boolean} [props.disabled] - Indicates if the input field is disabled.
- * @param {boolean} [props.hidden] - Indicates if the input field is hidden.
- * @param {React.Ref} [ref] - Ref forwarded to the underlying `TextField` component. Allows for direct interactions such as focusing.
+ * @param {string} props.value - Current value of the input field.
+ * @param {function} props.onChange - Callback function triggered on input value change.
+ * @param {function} [props.onBlur] - Callback function triggered when input loses focus.
+ * @param {function} [props.onInput] - Callback function triggered on input event.
+ * @param {string} [props.error] - Error message to display below the input field.
+ * @param {boolean} [props.disabled=false] - Disables the input field if true.
+ * @param {boolean} [props.hidden=false] - Hides the entire input field if true.
+ * @param {string} [props.className] - Additional CSS class names for the input container.
+ * @param {boolean} [props.hideErrorText=false] - Hides the error message if true.
+ * @param {React.Ref} [ref] - Ref forwarded to the underlying TextField component.
+ *
+ * @returns {React.ReactElement} Rendered input field component
  */
 
 const Field = forwardRef(
@@ -227,7 +235,7 @@ Field.propTypes = {
 	disabled: PropTypes.bool,
 	hidden: PropTypes.bool,
 	className: PropTypes.string,
-	showErrorText: PropTypes.bool,
+	hideErrorText: PropTypes.bool,
 };
 
 export default Field;

From b8d391060d2c9e610a293eb0a777089630726411 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 09:18:15 +0800
Subject: [PATCH 5/5] min-width 0 -> min-width unset, correct class name order

---
 Client/src/Components/Inputs/Field/index.css | 2 +-
 Client/src/Components/Inputs/Field/index.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css
index f669847fc..8279a79ab 100644
--- a/Client/src/Components/Inputs/Field/index.css
+++ b/Client/src/Components/Inputs/Field/index.css
@@ -3,7 +3,7 @@
 }
 
 .field-infrastructure-alert {
-	min-width: 0;
+	min-width: unset;
 	max-width: var(--env-var-width-4);
 }
 
diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index 760547e4f..bbc28eac7 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -66,7 +66,7 @@ const Field = forwardRef(
 		return (
 			<Stack
 				gap={theme.spacing(2)}
-				className={`${className} field field-${type}`}
+				className={`field field-${type} ${className}`}
 				sx={{
 					"& fieldset": {
 						borderColor: theme.palette.border.dark,