From f20ad60f2255a9ebba9bb1a75f0ad0e51156a6e2 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Fri, 29 Nov 2024 14:06:59 -0500 Subject: [PATCH] feat: adding height to inputs --- Client/src/Components/Inputs/Search/index.jsx | 2 +- .../Infrastructure/components/Menu/index.jsx | 114 ++++++++---------- Client/src/Pages/Infrastructure/index.jsx | 11 +- Client/src/Utils/Theme/globalTheme.js | 4 +- 4 files changed, 54 insertions(+), 77 deletions(-) diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx index 9044f7c0d..100b826b4 100644 --- a/Client/src/Components/Inputs/Search/index.jsx +++ b/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, }} diff --git a/Client/src/Pages/Infrastructure/components/Menu/index.jsx b/Client/src/Pages/Infrastructure/components/Menu/index.jsx index 4bf3cb209..edc1568ed 100644 --- a/Client/src/Pages/Infrastructure/components/Menu/index.jsx +++ b/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 ? ( { "" )} */} - openDetails(actions.id)}>Details - {/* TODO - pass monitor id to Incidents page */} - {/* openDetails(monitor.id)}>Details + {/* + Incidents. Necessary? + { e.stopPropagation(); navigate(`/incidents/${actions.id}`); @@ -171,7 +137,9 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => { > Incidents */} - {/* {isAdmin && ( + {/* + Configure. Necessary? + {isAdmin && ( { e.stopPropagation(); @@ -182,7 +150,9 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => { Configure )} */} - {/* {isAdmin && ( + {/* + Clone. Necessary? + {isAdmin && ( { e.stopPropagation(); @@ -192,7 +162,26 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => { Clone )} */} - {/* {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 && ( { 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, diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index 0c7af0718..4e2b15238 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/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}`); } diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 71bb65324..04d8e1c80 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/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, },