feat: adding height to inputs

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

@@ -161,7 +161,7 @@ const Search = ({
 				},
 			}}
 			sx={{
-				height: 34,
+				/* 	height: 34,*/
 				"&.MuiAutocomplete-root .MuiAutocomplete-input": { p: 0 },
 				...sx,
 			}}

Client/src/Pages/Infrastructure/components/Menu/index.jsx

@@ -1,59 +1,39 @@
 /* TODO I basically copied and pasted this component from the actionsMenu. Check how we can make it reusable */
 
 import { useRef, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { createToast } from "../../../../Utils/toastUtils";
-/* import { logger } from "../../../Utils/Logger"; */
 import { IconButton, Menu, MenuItem } from "@mui/material";
-import {
-	deleteUptimeMonitor,
-	/* 	pauseUptimeMonitor, */
-	getUptimeMonitorsByTeamId,
-} from "../../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Settings from "../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import Dialog from "../../../../Components/Dialog";
 import { networkService } from "../../../../Utils/NetworkService.js";
 
+/**
+ * InfrastructureMenu Component
+ * Provides a dropdown menu for managing infrastructure monitors.
+ *
+ * @param {Object} props - The component props.
+ * @param {Object} props.monitor - The monitor object containing details about the infrastructure monitor.
+ * @param {string} props.monitor.id - Unique ID of the monitor.
+ * @param {string} [props.monitor.url] - URL associated with the monitor.
+ * @param {string} props.monitor.type - Type of monitor (e.g., uptime, infrastructure).
+ * @param {boolean} props.monitor.isActive - Indicates if the monitor is currently active.
+ * @param {boolean} props.isAdmin - Whether the user has admin privileges.
+ * @param {Function} props.updateCallback - Callback to trigger when the monitor data is updated.
+ * @returns {JSX.Element} The rendered component.
+ */
 const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
-	/* const [anchorEl, setAnchorEl] = useState(null);
-	const [actions, setActions] = useState({}); */
-	const actions = { id: monitor.id, url: monitor.url };
 	const anchor = useRef(null);
 	const [isOpen, setIsOpen] = useState(false);
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
-	const dispatch = useDispatch();
 	const theme = useTheme();
 	const authState = useSelector((state) => state.auth);
 	const authToken = authState.authToken;
 	const { isLoading } = useSelector((state) => state.uptimeMonitors);
 
-	/* const handlePause = async () => {
-		try {
-			const action = await dispatch(
-				pauseUptimeMonitor({ authToken, monitorId: monitor._id })
-			);
-			if (pauseUptimeMonitor.fulfilled.match(action)) {
-				updateCallback();
-				const state = action?.payload?.data.isActive === false ? "paused" : "resumed";
-				createToast({ body: `Monitor ${state} successfully.` });
-			} else {
-				throw new Error(action?.error?.message ?? "Failed to pause monitor.");
-			}
-		} catch (error) {
-			logger.error("Error pausing monitor:", monitor._id, error);
-			createToast({ body: "Failed to pause monitor." });
-		}
-	}; */
-
-	/* TODO 
-1) Clean component
-2) Rerender after removing
-3) Add padding to inputs (I took of their height)
- */
-
 	const openMenu = (e) => {
 		e.stopPropagation();
 		setIsOpen(true);
@@ -80,32 +60,17 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 
 	const handleRemove = async () => {
 		try {
-			/* TODO not working, dont know why */
-			const result = await networkService.deleteMonitorById({
+			await networkService.deleteMonitorById({
 				authToken,
-				monitorId: actions.id,
+				monitorId: monitor.id,
 			});
-			console.log(result);
-			/* Toast success */
+			createToast({ body: "Monitor deleted successfully." });
 		} catch (error) {
-			console.log(error);
-			/* Toast error */
+			createToast({ body: "Failed to delete monitor." });
 		} finally {
 			setIsDialogOpen(false);
 			updateCallback();
 		}
-		/* let monitor = { _id: actions.id };
-		const action = await dispatch(
-			deleteUptimeMonitor({ authToken: authState.authToken, monitor })
-		);
-		if (action.meta.requestStatus === "fulfilled") {
-			setIsOpen(false); // close modal
-			dispatch(getUptimeMonitorsByTeamId(authState.authToken));
-			updateCallback();
-			createToast({ body: "Monitor deleted successfully." });
-		} else {
-			createToast({ body: "Failed to delete monitor." });
-		} */
 	};
 
 	return (
@@ -145,7 +110,7 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 				}}
 			>
 				{/*
-        Open sit action. Not necessary for infrastructure?
+        Open site action. Not necessary for infrastructure?
 
         {actions.url !== null ? (
 					<MenuItem
@@ -161,9 +126,10 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 					""
 				)} 
          */}
-				<MenuItem onClick={() => openDetails(actions.id)}>Details</MenuItem>
-				{/* TODO - pass monitor id to Incidents page */}
-				{/* <MenuItem
+				<MenuItem onClick={() => openDetails(monitor.id)}>Details</MenuItem>
+				{/* 
+        Incidents. Necessary?
+        <MenuItem
 					onClick={(e) => {
 						e.stopPropagation();
 						navigate(`/incidents/${actions.id}`);
@@ -171,7 +137,9 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 				>
 					Incidents
 				</MenuItem> */}
-				{/* {isAdmin && (
+				{/* 
+        Configure. Necessary?
+        {isAdmin && (
 					<MenuItem
 						onClick={(e) => {
 							e.stopPropagation();
@@ -182,7 +150,9 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 						Configure
 					</MenuItem>
 				)} */}
-				{/* {isAdmin && (
+				{/* 
+        Clone. Necessary?
+        {isAdmin && (
 					<MenuItem
 						onClick={(e) => {
 							e.stopPropagation();
@@ -192,7 +162,26 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 						Clone
 					</MenuItem>
 				)} */}
-				{/* {isAdmin && (
+				{/* 
+        Pause. Necessary?
+      const handlePause = async () => {
+		try {
+			const action = await dispatch(
+				pauseUptimeMonitor({ authToken, monitorId: monitor._id })
+			);
+			if (pauseUptimeMonitor.fulfilled.match(action)) {
+				updateCallback();
+				const state = action?.payload?.data.isActive === false ? "paused" : "resumed";
+				createToast({ body: `Monitor ${state} successfully.` });
+			} else {
+				throw new Error(action?.error?.message ?? "Failed to pause monitor.");
+			}
+		} catch (error) {
+			logger.error("Error pausing monitor:", monitor._id, error);
+			createToast({ body: "Failed to pause monitor." });
+		}
+	};
+        {isAdmin && (
 					<MenuItem
 						onClick={(e) => {
 							e.stopPropagation();
@@ -211,7 +200,6 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 				description="Once deleted, this monitor cannot be retrieved."
 				onCancel={cancelRemove}
 				confirmationButtonLabel="Delete"
-				/* Do we need stop propagation? */
 				onConfirm={handleRemove}
 				isLoading={isLoading}
 				modelTitle="modal-delete-monitor"
@@ -223,7 +211,7 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 
 InfrastructureMenu.propTypes = {
 	monitor: PropTypes.shape({
-		_id: PropTypes.string,
+		id: PropTypes.string,
 		url: PropTypes.string,
 		type: PropTypes.string,
 		isActive: PropTypes.bool,

Client/src/Pages/Infrastructure/index.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { /* useDispatch, */ useSelector } from "react-redux";
 import { useTheme } from "@emotion/react";
@@ -27,7 +27,6 @@ import { Pagination } from "./components/TablePagination";
 import { networkService } from "../../Utils/NetworkService.js";
 import CustomGauge from "../../Components/Charts/CustomGauge/index.jsx";
 import Host from "../Monitors/Home/host.jsx";
-import ActionsMenu from "../Monitors/Home/actionsMenu.jsx";
 import { useIsAdmin } from "../../Hooks/useIsAdmin.js";
 import { InfrastructureMenu } from "./components/Menu";
 
@@ -138,14 +137,6 @@ function Infrastructure() {
 		disk: monitor?.checks[0]?.disk[0]?.usage_percent * 100,
 	}));
 
-	/* 
-	TODO
-Clean component (actions component)
-Add padding to inputs (I took of their height)
-Add toast
-
-	*/
-
 	function openDetails(id) {
 		navigate(`/infrastructure/${id}`);
 	}

Client/src/Utils/Theme/globalTheme.js

@@ -206,13 +206,11 @@ const baseTheme = (palette) => ({
 						borderRadius: theme.shape.borderRadius,
 					},
 					"& .MuiInputBase-input": {
+						padding: ".75em",
 						fontSize: "var(--env-var-font-size-medium)",
 						fontWeight: 400,
 						color: palette.text.secondary,
 					},
-					"& .MuiInputBase-input.MuiOutlinedInput-input": {
-						padding: "0 var(--env-var-spacing-1-minus) !important",
-					},
 					"& .MuiOutlinedInput-root": {
 						borderRadius: 4,
 					},