From 86160a103d30f29cfd1dd7949fd3ac08d88b197b Mon Sep 17 00:00:00 2001 From: karenvicent Date: Sun, 13 Jul 2025 20:23:10 -0400 Subject: [PATCH 1/4] feat(forms): standardized label-to-input spacing in forms via new FieldWrapper component --- client/src/Components/ConfigBox/index.jsx | 7 ++- .../Components/Inputs/FieldWrapper/index.jsx | 51 +++++++++++++++++++ client/src/Components/Inputs/Radio/index.jsx | 21 +++++++- client/src/Components/Inputs/Search/index.jsx | 31 +++++++---- client/src/Components/Inputs/Select/index.jsx | 41 +++++++++------ .../src/Components/Inputs/TextInput/index.jsx | 51 ++++++++++++------- .../Components/NotificationConfig/index.jsx | 21 +++++++- .../Components/CustomThreshold/index.jsx | 19 ++++--- .../src/Pages/Infrastructure/Create/index.jsx | 11 ++-- client/src/Pages/Settings/SettingsEmail.jsx | 14 ++--- 10 files changed, 196 insertions(+), 71 deletions(-) create mode 100644 client/src/Components/Inputs/FieldWrapper/index.jsx diff --git a/client/src/Components/ConfigBox/index.jsx b/client/src/Components/ConfigBox/index.jsx index 44ae38472..e26e49e8d 100644 --- a/client/src/Components/ConfigBox/index.jsx +++ b/client/src/Components/ConfigBox/index.jsx @@ -4,15 +4,14 @@ const ConfigBox = styled(Stack)(({ theme }) => ({ display: "flex", flexDirection: "row", justifyContent: "space-between", - gap: theme.spacing(20), backgroundColor: theme.palette.primary.main, border: 1, borderStyle: "solid", borderColor: theme.palette.primary.lowContrast, borderRadius: theme.spacing(2), "& > *": { - paddingTop: theme.spacing(12), - paddingBottom: theme.spacing(18), + paddingTop: theme.spacing(15), + paddingBottom: theme.spacing(15), }, "& > div:first-of-type": { flex: 0.7, @@ -25,7 +24,7 @@ const ConfigBox = styled(Stack)(({ theme }) => ({ "& > div:last-of-type": { flex: 1, paddingRight: theme.spacing(20), - paddingLeft: theme.spacing(18), + paddingLeft: theme.spacing(20), }, "& h1, & h2": { color: theme.palette.primary.contrastTextSecondary, diff --git a/client/src/Components/Inputs/FieldWrapper/index.jsx b/client/src/Components/Inputs/FieldWrapper/index.jsx new file mode 100644 index 000000000..cc5061af8 --- /dev/null +++ b/client/src/Components/Inputs/FieldWrapper/index.jsx @@ -0,0 +1,51 @@ +import { Stack, Typography } from "@mui/material"; +import PropTypes from "prop-types"; +import { useTheme } from "@emotion/react"; + +const DEFAULT_GAP = 6; +const FieldWrapper = ({ + label, + children, + gap, + labelMb, + labelFontWeight = 500, + labelVariant = "h3", + labelSx = {}, + sx = {}, +}) => { + const theme = useTheme(); + return ( + + {label && ( + + {label} + + )} + {children} + + ); +}; + +FieldWrapper.propTypes = { + label: PropTypes.node, + children: PropTypes.node.isRequired, + gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]), + labelMb: PropTypes.number, + labelFontWeight: PropTypes.number, + labelVariant: PropTypes.string, + labelSx: PropTypes.object, + sx: PropTypes.object, +}; + +export default FieldWrapper; diff --git a/client/src/Components/Inputs/Radio/index.jsx b/client/src/Components/Inputs/Radio/index.jsx index 646b38e93..4c687de1e 100644 --- a/client/src/Components/Inputs/Radio/index.jsx +++ b/client/src/Components/Inputs/Radio/index.jsx @@ -24,7 +24,17 @@ import "./index.css"; * @returns {JSX.Element} - The rendered Radio component. */ -const Radio = ({ name, checked, value, id, size, title, desc, onChange }) => { +const Radio = ({ + name, + checked, + value, + id, + size, + title, + desc, + onChange, + labelSpacing, +}) => { const theme = useTheme(); return ( @@ -53,7 +63,14 @@ const Radio = ({ name, checked, value, id, size, title, desc, onChange }) => { onChange={onChange} label={ <> - {title} + + {title} + { ); }; -//TODO keep search state inside of component +//TODO keep search state inside of component. const Search = ({ label, id, @@ -68,6 +69,12 @@ const Search = ({ startAdornment, endAdornment, onBlur, + //FieldWrapper's props + gap, + labelMb, + labelFontWeight, + labelVariant, + labelSx = {}, }) => { const theme = useTheme(); const { t } = useTranslation(); @@ -139,15 +146,17 @@ const Search = ({ getOptionLabel={(option) => option[filteredBy]} isOptionEqualToValue={(option, value) => option._id === value._id} // Compare by unique identifier renderInput={(params) => ( - - - {label} - + )} - + )} filterOptions={(options, { inputValue }) => { if (inputValue.trim() === "" && multiple && isAdorned) { diff --git a/client/src/Components/Inputs/Select/index.jsx b/client/src/Components/Inputs/Select/index.jsx index 679a5b3b5..a438b6bb2 100644 --- a/client/src/Components/Inputs/Select/index.jsx +++ b/client/src/Components/Inputs/Select/index.jsx @@ -2,6 +2,7 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; +import FieldWrapper from "../FieldWrapper"; import "./index.css"; @@ -50,8 +51,14 @@ const Select = ({ onBlur, sx, name = "", - labelControlSpacing = 2, + labelControlSpacing = 6, maxWidth, + //FieldWrapper's props + labelMb, + labelFontWeight, + labelVariant, + labelSx = {}, + fieldWrapperSx = {}, }) => { const theme = useTheme(); const itemStyles = { @@ -69,20 +76,17 @@ const Select = ({ }; return ( - - {label && ( - - {label} - - )} { @@ -151,7 +162,7 @@ const Select = ({ ))} - + ); }; diff --git a/client/src/Components/Inputs/TextInput/index.jsx b/client/src/Components/Inputs/TextInput/index.jsx index bb2df5d21..469791704 100644 --- a/client/src/Components/Inputs/TextInput/index.jsx +++ b/client/src/Components/Inputs/TextInput/index.jsx @@ -2,6 +2,7 @@ import { Stack, TextField, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import { forwardRef, useState, cloneElement } from "react"; import PropTypes from "prop-types"; +import FieldWrapper from "../FieldWrapper"; const getSx = (theme, type, maxWidth) => { const sx = { @@ -85,31 +86,43 @@ const TextInput = forwardRef( marginLeft, disabled = false, hidden = false, + //FieldWrapper's props + gap, + labelMb, + labelFontWeight, + labelVariant, + labelSx = {}, + sx = {}, }, ref ) => { const [fieldType, setFieldType] = useState(type); const theme = useTheme(); + const labelContent = label && ( + <> + {label} + {isRequired && } + {isOptional && } + + ); return ( - + ); } ); diff --git a/client/src/Components/NotificationConfig/index.jsx b/client/src/Components/NotificationConfig/index.jsx index d3707eae4..c37889eff 100644 --- a/client/src/Components/NotificationConfig/index.jsx +++ b/client/src/Components/NotificationConfig/index.jsx @@ -10,7 +10,18 @@ import { useState, useEffect } from "react"; import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; -const NotificationConfig = ({ notifications, setMonitor, setNotifications }) => { +const NotificationConfig = ({ + notifications, + setMonitor, + setNotifications, + //FieldWrapper's props + gap, + labelMb, + labelFontWeight, + labelVariant, + labelSx = {}, + sx = {}, +}) => { // Local state const [notificationsSearch, setNotificationsSearch] = useState(""); const [selectedNotifications, setSelectedNotifications] = useState([]); @@ -66,6 +77,14 @@ const NotificationConfig = ({ notifications, setMonitor, setNotifications }) => handleChange={(value) => { handleSearch(value); }} + labelMb={labelMb} + labelVariant={labelVariant} + labelFontWeight={labelFontWeight} + labelSx={labelSx} + gap={gap} + sx={{ + ...sx, + }} /> - + { /> - + { disabled={!isCreate} /> {isCreate && ( - - {t("infrastructureProtocol")} + - + )} - {t("settingsPage.emailSettings.labelHost")} - {t("settingsPage.emailSettings.labelPort")} - {t("settingsPage.emailSettings.labelUser")} - {t("settingsPage.emailSettings.labelAddress")} {(isEmailPasswordSet === false || emailPasswordHasBeenReset === true) && ( - {t("settingsPage.emailSettings.labelPassword")} )} - {t("settingsPage.emailSettings.labelTLSServername")} - {t("settingsPage.emailSettings.labelConnectionHost")} Date: Tue, 15 Jul 2025 14:39:41 -0400 Subject: [PATCH 2/4] feat: apply styleOverrides for MuiSelect in base theme --- client/src/Utils/Theme/globalTheme.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/client/src/Utils/Theme/globalTheme.js b/client/src/Utils/Theme/globalTheme.js index eb827a907..3f061f340 100644 --- a/client/src/Utils/Theme/globalTheme.js +++ b/client/src/Utils/Theme/globalTheme.js @@ -553,6 +553,13 @@ const baseTheme = (palette) => ({ "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: theme.palette.primary.lowContrast, }, + "& .MuiSelect-select": { + padding: "0 13px", + minHeight: "34px", + display: "flex", + alignItems: "center", + lineHeight: 1, + }, }), }, }, From 55e9c740318edb6d71e2eddfcdb7a8404cefc77d Mon Sep 17 00:00:00 2001 From: Br0wnHammer Date: Wed, 16 Jul 2025 12:29:18 +0530 Subject: [PATCH 3/4] Fix: Page State Reset in Infra --- client/src/Pages/Infrastructure/Monitors/index.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/src/Pages/Infrastructure/Monitors/index.jsx b/client/src/Pages/Infrastructure/Monitors/index.jsx index e0f5c642b..6feb933db 100644 --- a/client/src/Pages/Infrastructure/Monitors/index.jsx +++ b/client/src/Pages/Infrastructure/Monitors/index.jsx @@ -11,7 +11,7 @@ import Filter from "./Components/Filters"; import SearchComponent from "../../Uptime/Monitors/Components/SearchComponent"; // Utils import { useTheme } from "@emotion/react"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useIsAdmin } from "../../../Hooks/useIsAdmin"; import { useTranslation } from "react-i18next"; import { useFetchMonitorsByTeamId } from "../../../Hooks/monitorHooks"; @@ -58,6 +58,12 @@ const InfrastructureMonitors = () => { setPage(0); }; + useEffect(() => { + if (isSearching) { + setPage(0); + } + }, [isSearching]); + const handleReset = () => { setSelectedStatus(undefined); setToFilterStatus(undefined); From 1cee10842eb63910f097b9c816867c4abe890ee6 Mon Sep 17 00:00:00 2001 From: karenvicent Date: Wed, 16 Jul 2025 10:36:52 -0400 Subject: [PATCH 4/4] apply style to MuiSelect in globalTheme --- client/src/Utils/Theme/globalTheme.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/client/src/Utils/Theme/globalTheme.js b/client/src/Utils/Theme/globalTheme.js index 3f061f340..5866e517f 100644 --- a/client/src/Utils/Theme/globalTheme.js +++ b/client/src/Utils/Theme/globalTheme.js @@ -553,13 +553,11 @@ const baseTheme = (palette) => ({ "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: theme.palette.primary.lowContrast, }, - "& .MuiSelect-select": { - padding: "0 13px", - minHeight: "34px", - display: "flex", - alignItems: "center", - lineHeight: 1, - }, + padding: "0 13px", + minHeight: "34px", + display: "flex", + alignItems: "center", + lineHeight: 1, }), }, },