Merge pull request #1173 from bluewave-labs/fix/fe/field-refactor

Fix/fe/field refactor

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(
@@ -46,7 +54,8 @@ const Field = forwardRef(
 			error,
 			disabled,
 			hidden,
-			className
+			className,
+			hideErrorText = false,
 		},
 		ref
 	) => {
@@ -190,7 +199,7 @@ const Field = forwardRef(
 					<Typography
 						component="span"
 						className="input-error"
-						hidden={className ? true : false}
+						hidden={hideErrorText}
 						color={theme.palette.error.main}
 						mt={theme.spacing(2)}
 						sx={{
@@ -225,7 +234,8 @@ Field.propTypes = {
 	error: PropTypes.string,
 	disabled: PropTypes.bool,
 	hidden: PropTypes.bool,
-	className: PropTypes.string
+	className: PropTypes.string,
+	hideErrorText: PropTypes.bool,
 };
 
 export default Field;

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,
-};
+};