From 12767d5dbc7a7e2722c13a06cf2ea266d263cee1 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 12:15:41 +0800 Subject: [PATCH 01/27] integrate TextField into create infrastructure page --- .../src/Components/Inputs/TextInput/index.jsx | 9 +++++++++ .../CreateMonitor/CustomThreshold/index.jsx | 11 ++++++----- .../Infrastructure/CreateMonitor/index.jsx | 18 ++++++++++-------- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index d97d1ebac..4d648803a 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -56,6 +56,7 @@ Optional.propTypes = { const TextInput = forwardRef( ( { + id, type, value, placeholder, @@ -63,12 +64,14 @@ const TextInput = forwardRef( isOptional, optionalLabel, onChange, + onBlur, error = false, helperText = null, startAdornment = null, endAdornment = null, label = null, maxWidth = "100%", + disabled = false, }, ref ) => { @@ -87,10 +90,12 @@ const TextInput = forwardRef( {isOptional && } ); @@ -113,18 +119,21 @@ TextInput.displayName = "TextInput"; TextInput.propTypes = { type: PropTypes.string, + id: PropTypes.string.isRequired, value: PropTypes.string, placeholder: PropTypes.string, isRequired: PropTypes.bool, isOptional: PropTypes.bool, optionalLabel: PropTypes.string, onChange: PropTypes.func, + onBlur: PropTypes.func, error: PropTypes.bool, helperText: PropTypes.string, startAdornment: PropTypes.node, endAdornment: PropTypes.node, label: PropTypes.string, maxWidth: PropTypes.string, + disabled: PropTypes.bool, }; export default TextInput; diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx index 3b664eb5d..71f392d6b 100644 --- a/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx +++ b/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx @@ -1,5 +1,6 @@ import { Box, Stack, Typography } from "@mui/material"; import Field from "../../../../Components/Inputs/Field"; +import TextInput from "../../../../Components/Inputs/TextInput"; import Checkbox from "../../../../Components/Inputs/Checkbox"; import { useTheme } from "@emotion/react"; import PropTypes from "prop-types"; @@ -57,17 +58,17 @@ export const CustomThreshold = ({ justifyContent: "flex-end", }} > - + /> + { event.preventDefault(); const { value, id } = event.target; let name = appendedId ?? idMap[id] ?? id; - if (name.includes("notification-")) { name = name.replace("notification-", ""); let hasNotif = infrastructureMonitor.notifications.some( @@ -240,7 +239,7 @@ const CreateInfrastructureMonitor = () => { - { value={infrastructureMonitor.url} onBlur={handleBlur} onChange={handleChange} - error={errors["url"]} + error={errors["url"] ? true : false} + helperText={errors["url"]} /> - { onChange={handleChange} error={errors["name"]} /> - @@ -297,7 +298,8 @@ const CreateInfrastructureMonitor = () => { Customize alerts - Send a notification to user(s) when thresholds exceed a specified percentage. + Send a notification to user(s) when thresholds exceed a specified + percentage. From 48c3f05831eea25dcd217ea367e046e36efbece6 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 12:21:42 +0800 Subject: [PATCH 02/27] integrate TextInput --- Client/src/Pages/Monitors/CreateMonitor/index.jsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index 84e599322..56dfc4db2 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -11,6 +11,8 @@ import { createToast } from "../../../Utils/toastUtils"; import { logger } from "../../../Utils/Logger"; import { ConfigBox } from "../styled"; import Radio from "../../../Components/Inputs/Radio"; +import TextInput from "../../../Components/Inputs/TextInput"; +import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments"; import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; @@ -249,17 +251,19 @@ const CreateMonitor = () => { - } label={monitorTypeMaps[monitor.type].label || "URL to monitor"} https={https} placeholder={monitorTypeMaps[monitor.type].placeholder || ""} value={monitor.url} onChange={handleChange} - error={errors["url"]} + error={errors["url"] ? true : false} + helperText={errors["url"]} /> - { placeholder={monitorTypeMaps[monitor.type].namePlaceholder || ""} value={monitor.name} onChange={handleChange} - error={errors["name"]} + error={errors["name"] ? true : false} + helperText={errors["name"]} /> From a9493db5de0349c7a0323d030b55ad9e990800c4 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 12:30:41 +0800 Subject: [PATCH 03/27] integrate TextInput into login page --- .../Inputs/TextInput/Adornments/index.jsx | 9 +++++++-- Client/src/Pages/Auth/Login.jsx | 13 +++++++++---- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx index 0709b5425..686db183b 100644 --- a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx +++ b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx @@ -29,6 +29,10 @@ export const HttpAdornment = ({ https }) => { ); }; +HttpAdornment.propTypes = { + https: PropTypes.bool.isRequired, +}; + export const PasswordEndAdornment = ({ fieldType, setFieldType }) => { const theme = useTheme(); return ( @@ -55,6 +59,7 @@ export const PasswordEndAdornment = ({ fieldType, setFieldType }) => { ); }; -HttpAdornment.propTypes = { - https: PropTypes.bool.isRequired, +PasswordEndAdornment.propTypes = { + fieldType: PropTypes.string, + setFieldType: PropTypes.func, }; diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx index ece5de314..05bf6d0b9 100644 --- a/Client/src/Pages/Auth/Login.jsx +++ b/Client/src/Pages/Auth/Login.jsx @@ -7,6 +7,8 @@ import { login } from "../../Features/Auth/authSlice"; import { useDispatch, useSelector } from "react-redux"; import { createToast } from "../../Utils/toastUtils"; import { networkService } from "../../main"; +import TextInput from "../../Components/Inputs/TextInput"; +import { PasswordEndAdornment } from "../../Components/Inputs/TextInput/Adornments"; import Field from "../../Components/Inputs/Field"; import Background from "../../assets/Images/background-grid.svg?react"; import Logo from "../../assets/icons/bwu-icon.svg?react"; @@ -150,7 +152,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => { display="grid" gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }} > - { value={form.email} onInput={(e) => (e.target.value = e.target.value.toLowerCase())} onChange={onChange} - error={errors.email} + error={errors.email ? true : false} + helperText={errors.email} ref={inputRef} /> { gap: { xs: theme.spacing(12), sm: theme.spacing(16) }, }} > - { autoComplete="current-password" value={form.password} onChange={onChange} - error={errors.password} + error={errors.password ? true : false} + helperText={errors.password} ref={inputRef} + endAdornment={} /> Date: Tue, 26 Nov 2024 13:14:33 +0800 Subject: [PATCH 04/27] expose on TextInput --- Client/src/Components/Inputs/TextInput/index.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index 4d648803a..b78ca5439 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -6,6 +6,11 @@ import PropTypes from "prop-types"; const getSx = (theme, type, maxWidth) => { const sx = { maxWidth: maxWidth, + "& .MuiFormHelperText-root": { + position: "absolute", + bottom: `-${theme.spacing(12)}`, + minHeight: theme.spacing(12), + }, }; if (type === "url") { @@ -57,6 +62,7 @@ const TextInput = forwardRef( ( { id, + name, type, value, placeholder, @@ -91,6 +97,7 @@ const TextInput = forwardRef( Date: Tue, 26 Nov 2024 13:14:46 +0800 Subject: [PATCH 05/27] integrate TextInput into register page --- Client/src/Components/Check/Check.jsx | 3 +-- Client/src/Pages/Auth/Register/StepOne/index.jsx | 13 ++++++++----- Client/src/Pages/Auth/Register/StepThree/index.jsx | 11 ++++++----- Client/src/Pages/Auth/Register/StepTwo/index.jsx | 6 ++++-- 4 files changed, 19 insertions(+), 14 deletions(-) diff --git a/Client/src/Components/Check/Check.jsx b/Client/src/Components/Check/Check.jsx index 3219fec29..799fda63c 100644 --- a/Client/src/Components/Check/Check.jsx +++ b/Client/src/Components/Check/Check.jsx @@ -24,10 +24,9 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) => const theme = useTheme(); const colors = { success: theme.palette.success.main, - error: theme.palette.error.contrastText, + error: theme.palette.error.main, info: theme.palette.info.border, }; - return ( - - - - - (e.target.value = e.target.value.toLowerCase())} onChange={onChange} - error={errors.email} + error={errors.email ? true : false} + helperText={errors.email} ref={inputRef} /> Date: Tue, 26 Nov 2024 13:37:10 +0800 Subject: [PATCH 06/27] Expose flex on TextInput --- Client/src/Components/Inputs/TextInput/index.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index b78ca5439..744d036bd 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -77,6 +77,7 @@ const TextInput = forwardRef( endAdornment = null, label = null, maxWidth = "100%", + flex, disabled = false, }, ref @@ -84,7 +85,7 @@ const TextInput = forwardRef( const [fieldType, setFieldType] = useState(type); const theme = useTheme(); return ( - + Date: Tue, 26 Nov 2024 13:37:35 +0800 Subject: [PATCH 07/27] integrate TextInput into profile panel --- .../TabPanels/Account/ProfilePanel.jsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index 0875891f5..9c00f6c02 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -3,7 +3,7 @@ import { useRef, useState } from "react"; import TabPanel from "@mui/lab/TabPanel"; import { Box, Button, Divider, Stack, Typography } from "@mui/material"; import Avatar from "../../Avatar"; -import Field from "../../Inputs/Field"; +import TextInput from "../../Inputs/TextInput"; import ImageField from "../../Inputs/Image"; import { credentials, imageValidation } from "../../../Validation/validation"; import { useDispatch, useSelector } from "react-redux"; @@ -229,26 +229,30 @@ const ProfilePanel = () => { First name - Last name - @@ -261,14 +265,14 @@ const ProfilePanel = () => { This is your current email address — it cannot be changed. - logger.warn("disabled")} - // error={errors[idToName["edit-email"]]} disabled={true} + flex={1} /> From 817bbb1804445f3dc524161183e1cd3a00c05d17 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 13:56:13 +0800 Subject: [PATCH 08/27] Adjust helper text spcing, expose hidden prop --- Client/src/Components/Inputs/TextInput/index.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index 744d036bd..ec8203656 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -8,8 +8,8 @@ const getSx = (theme, type, maxWidth) => { maxWidth: maxWidth, "& .MuiFormHelperText-root": { position: "absolute", - bottom: `-${theme.spacing(12)}`, - minHeight: theme.spacing(12), + bottom: `-${theme.spacing(24)}`, + minHeight: theme.spacing(24), }, }; @@ -79,13 +79,17 @@ const TextInput = forwardRef( maxWidth = "100%", flex, disabled = false, + hidden = false, }, ref ) => { const [fieldType, setFieldType] = useState(type); const theme = useTheme(); return ( - + Date: Tue, 26 Nov 2024 13:56:36 +0800 Subject: [PATCH 09/27] integate TextInput into PasswordPanel --- .../TabPanels/Account/PasswordPanel.jsx | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx index 0ea313d6c..ae322156c 100644 --- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -3,7 +3,8 @@ import { useState } from "react"; import { useTheme } from "@emotion/react"; import { Box, Stack, Typography } from "@mui/material"; import LoadingButton from "@mui/lab/LoadingButton"; -import Field from "../../Inputs/Field"; +import { PasswordEndAdornment } from "../../Inputs/TextInput/Adornments"; +import TextInput from "../../Inputs/TextInput"; import { credentials } from "../../../Validation/validation"; import Alert from "../../Alert"; import { update } from "../../../Features/Auth/authSlice"; @@ -113,7 +114,7 @@ const PasswordPanel = () => { maxWidth={"80ch"} marginInline={"auto"} > - { > Current password - } + flex={1} /> { New password - } + flex={1} /> { Confirm new password - } + flex={1} /> {Object.keys(errors).length > 0 && ( From f81b5957e75ae564b763f4f89f39d2e689f8ca74 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 14:05:04 +0800 Subject: [PATCH 10/27] expose margin, integrate into TeamPanel --- Client/src/Components/Inputs/TextInput/index.jsx | 12 ++++++++++++ .../src/Components/TabPanels/Account/TeamPanel.jsx | 7 +++++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index ec8203656..26f051c06 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -78,6 +78,10 @@ const TextInput = forwardRef( label = null, maxWidth = "100%", flex, + marginTop, + marginRight, + marginBottom, + marginLeft, disabled = false, hidden = false, }, @@ -89,6 +93,10 @@ const TextInput = forwardRef( { onClose={closeInviteModal} theme={theme} > - { - { value={localSettings.systemEmailHost} onChange={handleChange} onBlur={handleBlur} - error={errors.systemEmailHost} + error={errors.systemEmailHost ? true : false} + helperText={errors.systemEmailHost} /> - { value={localSettings.systemEmailPort?.toString()} onChange={handleChange} onBlur={handleBlur} - error={errors.systemEmailPort} + error={errors.systemEmailPort ? true : false} + helperText={errors.systemEmailPort} /> - - { value={localSettings.systemEmailPassword} onChange={handleChange} onBlur={handleBlur} - error={errors.systemEmailPassword} + error={errors.systemEmailPassword ? true : false} + helperText={errors.systemEmailPassword} /> @@ -242,7 +249,7 @@ const AdvancedSettings = ({ isAdmin }) => { direction="row" gap={theme.spacing(10)} > - { value={localSettings.jwtTTLNum.toString()} onChange={handleChange} onBlur={handleBlur} - error={errors.jwtTTLNum} + error={errors.jwtTTLNum ? true : false} + helperText={errors.jwtTTLNum} /> { - { handleFormChange("name", event.target.value); }} - error={errors["name"]} + error={errors["name"] ? true : false} + helperText={errors["name"]} /> From 1334645567375e5c2a4f2ccb9d714a95fcfe8471 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 14:27:50 +0800 Subject: [PATCH 15/27] integrate into configure --- Client/src/Pages/Monitors/Configure/index.jsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index 22cc8618e..ba23c5634 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -14,7 +14,8 @@ import { getUptimeMonitorsByTeamId, deleteUptimeMonitor, } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice"; -import Field from "../../../Components/Inputs/Field"; +import TextInput from "../../../Components/Inputs/TextInput"; +import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments"; import PauseIcon from "../../../assets/icons/pause-icon.svg?react"; import ResumeIcon from "../../../assets/icons/resume-icon.svg?react"; import Select from "../../../Components/Inputs/Select"; @@ -343,17 +344,17 @@ const Configure = () => { - } id="monitor-url" label="URL to monitor" placeholder="google.com" value={parsedUrl?.host || monitor?.url || ""} disabled={true} - error={errors["url"]} /> - { placeholder="Google" value={monitor?.name || ""} onChange={handleChange} - error={errors["name"]} + error={errors["name"] ? true : false} + helperText={errors["name"]} /> @@ -405,7 +407,7 @@ const Configure = () => { (notification) => notification.type === "emails" ) ? ( - Date: Tue, 26 Nov 2024 14:28:38 +0800 Subject: [PATCH 16/27] finish create monitor integration --- Client/src/Pages/Monitors/CreateMonitor/index.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index 56dfc4db2..ebb812658 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -13,7 +13,6 @@ import { ConfigBox } from "../styled"; import Radio from "../../../Components/Inputs/Radio"; import TextInput from "../../../Components/Inputs/TextInput"; import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments"; -import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; import Breadcrumbs from "../../../Components/Breadcrumbs"; @@ -386,7 +385,7 @@ const CreateMonitor = () => { (notification) => notification.type === "emails" ) ? ( - Date: Tue, 26 Nov 2024 14:30:58 +0800 Subject: [PATCH 17/27] Integrate into pagespeed configure --- Client/src/Pages/PageSpeed/Configure/index.jsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index 222fa733f..757804c97 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.jsx +++ b/Client/src/Pages/PageSpeed/Configure/index.jsx @@ -14,7 +14,7 @@ import { monitorValidation } from "../../../Validation/validation"; import { createToast } from "../../../Utils/toastUtils"; import { logger } from "../../../Utils/Logger"; import { ConfigBox } from "../../Monitors/styled"; -import Field from "../../../Components/Inputs/Field"; +import TextInput from "../../../Components/Inputs/TextInput"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline"; @@ -321,17 +321,18 @@ const PageSpeedConfigure = () => { }, }} > - - { isOptional={true} value={monitor?.name || ""} onChange={handleChange} - error={errors.name} + error={errors.name ? true : false} + helperText={errors.name} /> @@ -383,7 +385,7 @@ const PageSpeedConfigure = () => { (notification) => notification.type === "emails" ) ? ( - Date: Tue, 26 Nov 2024 14:32:22 +0800 Subject: [PATCH 18/27] integrate in to create pagespeed --- .../Pages/PageSpeed/CreatePageSpeed/index.jsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index f771c3988..e6c2e2a62 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx @@ -13,6 +13,8 @@ import { createToast } from "../../../Utils/toastUtils"; import { logger } from "../../../Utils/Logger"; import { ConfigBox } from "../../Monitors/styled"; import Radio from "../../../Components/Inputs/Radio"; +import TextInput from "../../../Components/Inputs/TextInput"; +import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments"; import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; @@ -205,17 +207,18 @@ const CreatePageSpeed = () => { - } placeholder="google.com" value={monitor.url} onChange={handleChange} - error={errors["url"]} + error={errors["url"] ? true : false} + helperText={errors["url"]} /> - { placeholder="Google" value={monitor.name} onChange={handleChange} - error={errors["name"]} + error={errors["name"] ? true : false} + helperText={errors["name"]} /> @@ -315,7 +319,7 @@ const CreatePageSpeed = () => { (notification) => notification.type === "emails" ) ? ( - Date: Tue, 26 Nov 2024 14:33:45 +0800 Subject: [PATCH 19/27] integrate in to settings --- Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx | 1 - Client/src/Pages/Settings/index.jsx | 7 ++++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index e6c2e2a62..e70576ebd 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx @@ -15,7 +15,6 @@ import { ConfigBox } from "../../Monitors/styled"; import Radio from "../../../Components/Inputs/Radio"; import TextInput from "../../../Components/Inputs/TextInput"; import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments"; -import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; import Breadcrumbs from "../../../Components/Breadcrumbs"; diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx index 357014b3a..8a5e73bc3 100644 --- a/Client/src/Pages/Settings/index.jsx +++ b/Client/src/Pages/Settings/index.jsx @@ -1,6 +1,6 @@ import { useTheme } from "@emotion/react"; import { Box, Stack, Typography, Button } from "@mui/material"; -import Field from "../../Components/Inputs/Field"; +import TextInput from "../../Components/Inputs/TextInput"; import Link from "../../Components/Link"; import Select from "../../Components/Inputs/Select"; import { logger } from "../../Utils/Logger"; @@ -240,13 +240,14 @@ const Settings = ({ isAdmin }) => { - Clear all stats. This is irreversible. From 16069b47b9f62b73db02a394e2f74afdbdae2846 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 14:34:24 +0800 Subject: [PATCH 20/27] remove test route and page --- Client/src/App.jsx | 6 -- Client/src/Pages/test.jsx | 192 -------------------------------------- 2 files changed, 198 deletions(-) delete mode 100644 Client/src/Pages/test.jsx diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 62b6bd9ff..82c8203a8 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -41,7 +41,6 @@ import { logger } from "./Utils/Logger"; // Import the logger import { networkService } from "./main"; import { Infrastructure } from "./Pages/Infrastructure"; import InfrastructureDetails from "./Pages/Infrastructure/Details"; -import Test from "./Pages/test"; function App() { const AdminCheckedRegister = withAdminCheck(Register); const MonitorsWithAdminProp = withAdminProp(Monitors); @@ -90,11 +89,6 @@ function App() { path="/" element={} > - } - /> - { - const [originalValue, setOriginalValue] = useState(""); - const [originalError, setOriginalError] = useState(""); - - const [newValue, setNewValue] = useState(""); - const [newError, setNewError] = useState(""); - - const [thresholdValue, setThresholdValue] = useState(20); - const [thresholdError, setThresholdError] = useState(""); - - const [thresholdValue2, setThresholdValue2] = useState(20); - const [thresholdError2, setThresholdError2] = useState(""); - - const inputRef = useRef(null); - - useEffect(() => { - if (inputRef.current) { - inputRef.current.focus(); - } - }, []); - - const checkError = (value) => { - if (value !== "clear") { - return "This is an error"; - } - return ""; - }; - - const checkThresholdError = (value) => { - if (value !== 99) { - return "This is a threshold error"; - } - return ""; - }; - const checkThresholdError2 = (value) => { - if (value !== 99) { - return "This is a threshold error 2"; - } - return ""; - }; - - const handleOriginalValue = (e) => { - setOriginalError(checkError(e.target.value)); - setOriginalValue(e.target.value); - }; - - const handleNewValue = (e) => { - setNewError(checkError(e.target.value)); - setNewValue(e.target.value); - }; - - const handleThresholdValue = (e) => { - const parsedVal = parseInt(e.target.value); - setThresholdError(checkThresholdError(parsedVal)); - setThresholdValue(parsedVal); - }; - - const handleThresholdValue2 = (e) => { - const parsedVal = parseInt(e.target.value); - setThresholdError2(checkThresholdError2(parsedVal)); - setThresholdValue2(parsedVal); - }; - - return ( - - - This is a test page for the TextInput component. It is a rationalized Input - component. - - Type anything for an error. - Typing "clear" will clear the error for text based input - Typing "99" will clear the error for threshold based input - - - - - } - onChange={handleNewValue} - error={newError !== ""} - helperText={newError} - /> - - - } - onChange={handleNewValue} - error={newError !== ""} - helperText={newError} - ref={inputRef} - /> - - - - - - Short field for threshold. Easily show/hide error text - - - - {thresholdError} {thresholdError2} - - - ); -}; - -export default Test; From 061b450e81e64ed22a20c1d4d38a6a3ccc35e0ec Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 14:34:50 +0800 Subject: [PATCH 21/27] remove Field component --- Client/src/Components/Inputs/Field/index.css | 50 ---- Client/src/Components/Inputs/Field/index.jsx | 241 ------------------- 2 files changed, 291 deletions(-) delete mode 100644 Client/src/Components/Inputs/Field/index.css delete mode 100644 Client/src/Components/Inputs/Field/index.jsx diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css deleted file mode 100644 index 4b54a565d..000000000 --- a/Client/src/Components/Inputs/Field/index.css +++ /dev/null @@ -1,50 +0,0 @@ -.field { - min-width: var(--env-var-width-3); -} - -.field-infrastructure-alert{ - max-width: var(--env-var-width-4); -} - -.field-infrastructure-alert .MuiInputBase-root:has(input) { - /* height: var(--env-var-height-2); */ - min-width: unset; -} - -.field h3.MuiTypography-root, -.field h5.MuiTypography-root, -.field input, -.field textarea, -.field .input-error { - font-size: var(--env-var-font-size-medium); -} -.field h5.MuiTypography-root { - position: relative; - opacity: 0.8; - padding-right: var(--env-var-spacing-1-minus); -} -.field .MuiInputBase-root:has(input) { - /* height: var(--env-var-height-2); */ -} -.field .MuiInputBase-root:has(.MuiInputAdornment-root) { - padding-right: var(--env-var-spacing-1-minus); -} - -.field input { - height: 100%; - padding: 0 var(--env-var-spacing-1-minus); -} -.field .MuiInputBase-root:has(textarea) { - padding: var(--env-var-spacing-1-minus); -} - -.register-page .field .MuiOutlinedInput-root fieldset, -.register-page .field input, -.login-page .field .MuiOutlinedInput-root fieldset, -.login-page .field input, -.forgot-password-page .field .MuiOutlinedInput-root fieldset, -.forgot-password-page .field input, -.set-new-password-page .field .MuiOutlinedInput-root fieldset, -.set-new-password-page .field input { - border-radius: var(--env-var-radius-2); -} diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx deleted file mode 100644 index bbc28eac7..000000000 --- a/Client/src/Components/Inputs/Field/index.jsx +++ /dev/null @@ -1,241 +0,0 @@ -import PropTypes from "prop-types"; -import { forwardRef, useState } from "react"; -import { useTheme } from "@emotion/react"; -import { IconButton, InputAdornment, Stack, TextField, Typography } from "@mui/material"; -import VisibilityOff from "@mui/icons-material/VisibilityOff"; -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='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 - 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( - ( - { - type = "text", - id, - name, - label, - https, - isRequired, - isOptional, - optionalLabel, - autoComplete, - placeholder, - value, - onChange, - onBlur, - onInput, - error, - disabled, - hidden, - className, - hideErrorText = false, - }, - ref - ) => { - const theme = useTheme(); - - const [isVisible, setVisible] = useState(false); - - return ( - - ), - endAdornment: type === "password" && ( - - setVisible((show) => !show)} - sx={{ - color: theme.palette.border.dark, - padding: theme.spacing(1), - "&:focus-visible": { - outline: `2px solid ${theme.palette.primary.main}`, - outlineOffset: `2px`, - }, - "& .MuiTouchRipple-root": { - pointerEvents: "none", - display: "none", - }, - }} - > - {!isVisible ? : } - - - ), - }} - /> - {error && ( - - )} - - ); - } -); - -Field.displayName = "Field"; - -Field.propTypes = { - type: PropTypes.oneOf(["text", "password", "url", "email", "description", "number"]), - id: PropTypes.string.isRequired, - name: PropTypes.string, - label: PropTypes.string, - https: PropTypes.bool, - isRequired: PropTypes.bool, - isOptional: PropTypes.bool, - optionalLabel: PropTypes.string, - autoComplete: PropTypes.string, - placeholder: PropTypes.string, - value: PropTypes.string.isRequired, - onChange: PropTypes.func, - onBlur: PropTypes.func, - onInput: PropTypes.func, - error: PropTypes.string, - disabled: PropTypes.bool, - hidden: PropTypes.bool, - className: PropTypes.string, - hideErrorText: PropTypes.bool, -}; - -export default Field; From 470a1bfcfab348448ec38e4b98343635d5b173f5 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 27 Nov 2024 14:50:05 +0800 Subject: [PATCH 22/27] adjusted theme settings for color fixes --- Client/src/Components/Charts/BarChart/index.jsx | 4 +--- Client/src/Components/Label/index.jsx | 4 ++-- Client/src/Utils/Theme/constants.js | 3 +++ Client/src/Utils/Theme/darkTheme.js | 3 +++ Client/src/Utils/Theme/globalTheme.js | 3 ++- Client/src/Utils/Theme/lightTheme.js | 3 +++ 6 files changed, 14 insertions(+), 6 deletions(-) diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index 70fd66390..b1c46a9d6 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -158,9 +158,7 @@ const BarChart = ({ checks = [] }) => { width="100%" height={`${animate ? check.responseTime : 0}%`} backgroundColor={ - check.status - ? theme.palette.success.main - : theme.palette.error.contrastText + check.status ? theme.palette.success.main : theme.palette.error.main } sx={{ borderRadius: theme.spacing(1.5), diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index eb6499a31..664cfd4af 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -127,11 +127,11 @@ const StatusLabel = ({ status, text, customStyles }) => { const colors = { up: { dotColor: theme.palette.success.main, - bgColor: theme.palette.success./* dark */ contrastText, + bgColor: theme.palette.success.contrastText /* dark */, borderColor: theme.palette.success.main /* light */, }, down: { - dotColor: theme.palette.error.contrastText, + dotColor: theme.palette.error.main, bgColor: theme.palette.error.dark, borderColor: theme.palette.error.light, }, diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 0626edbaa..ed3719278 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -22,6 +22,7 @@ const paletteColors = { gray80: "#FDFCFD", gray90: "#FCFCFD", gray100: "#F4F4F4", + gray150: "#EFEFEF", gray200: "#E3E3E3", gray300: "#A2A3A3", gray500: "#838C99", @@ -205,10 +206,12 @@ const semanticColors = { light: { light: paletteColors.gray200, dark: paletteColors.gray800, + disabled: paletteColors.gray150, }, dark: { light: paletteColors.gray200, dark: paletteColors.gray750, + disabled: paletteColors.gray800, }, }, unresolved: { diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 0f4a391de..26f4ba340 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -23,6 +23,9 @@ const { } = colors; const palette = { + action: { + disabled: border.dark.disabled, + }, primary: { main: primary.main.dark }, secondary: { main: secondary.main.dark, diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 0839cd0e8..e5c60485a 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -220,7 +220,7 @@ const baseTheme = (palette) => ({ height: "var(--env-var-height-2)", fontSize: "var(--env-var-font-size-medium)", fontWeight: 400, - color: palette.text.secondary, // or any color from your palette + color: "palette.text.secondary", }, "& .MuiInputBase-input.MuiOutlinedInput-input": { padding: "0 var(--env-var-spacing-1-minus) !important", @@ -231,6 +231,7 @@ const baseTheme = (palette) => ({ "& .MuiOutlinedInput-notchedOutline": { borderRadius: 4, }, + "& .MuiFormHelperText-root": { color: palette.error.main, opacity: 0.8, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index 8bc6434c6..88e47282d 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -28,6 +28,9 @@ const { } = colors; const palette = { + action: { + disabled: border.light.disabled, + }, primary: { main: primary.main.light }, secondary: { main: secondary.main.light, From 43a5b6658e076b30d101dcedf435ce5cf8463d98 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 28 Nov 2024 10:02:00 +0800 Subject: [PATCH 23/27] undo accidental stringification --- Client/src/Utils/Theme/globalTheme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index e5c60485a..641e22582 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -220,7 +220,7 @@ const baseTheme = (palette) => ({ height: "var(--env-var-height-2)", fontSize: "var(--env-var-font-size-medium)", fontWeight: 400, - color: "palette.text.secondary", + color: palette.text.secondary, }, "& .MuiInputBase-input.MuiOutlinedInput-input": { padding: "0 var(--env-var-spacing-1-minus) !important", From 2e54e867d75b705b4d9bc1a44efaa67f7d028af8 Mon Sep 17 00:00:00 2001 From: Mend Renovate Date: Thu, 28 Nov 2024 21:58:42 +0000 Subject: [PATCH 24/27] Update dependency @reduxjs/toolkit to v2.4.0 --- Client/package-lock.json | 8 ++++---- Client/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Client/package-lock.json b/Client/package-lock.json index 80aa209c1..cd5556f8d 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -17,7 +17,7 @@ "@mui/x-charts": "^7.5.1", "@mui/x-data-grid": "7.22.3", "@mui/x-date-pickers": "7.22.3", - "@reduxjs/toolkit": "2.3.0", + "@reduxjs/toolkit": "2.4.0", "axios": "^1.7.4", "chart.js": "^4.4.3", "dayjs": "1.11.13", @@ -1686,9 +1686,9 @@ } }, "node_modules/@reduxjs/toolkit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.3.0.tgz", - "integrity": "sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.4.0.tgz", + "integrity": "sha512-wJZEuSKj14tvNfxiIiJws0tQN77/rDqucBq528ApebMIRHyWpCanJVQRxQ8WWZC19iCDKxDsGlbAir3F1layxA==", "license": "MIT", "dependencies": { "immer": "^10.0.3", diff --git a/Client/package.json b/Client/package.json index 795dd8d87..2a9da6f19 100644 --- a/Client/package.json +++ b/Client/package.json @@ -20,7 +20,7 @@ "@mui/x-charts": "^7.5.1", "@mui/x-data-grid": "7.22.3", "@mui/x-date-pickers": "7.22.3", - "@reduxjs/toolkit": "2.3.0", + "@reduxjs/toolkit": "2.4.0", "axios": "^1.7.4", "chart.js": "^4.4.3", "dayjs": "1.11.13", From 5be818f2380e5c4dae625d34cdd9aec0b532d9b8 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 29 Nov 2024 11:03:02 +0800 Subject: [PATCH 25/27] Remove Dashboard menu item, move Monitors, Pagespeed, and Infrastructure to top level of menu --- Client/src/Components/Sidebar/index.jsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index be056e011..4c274409b 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -47,15 +47,9 @@ import Folder from "../../assets/icons/folder.svg?react"; import "./index.css"; const menu = [ - { - name: "Dashboard", - icon: , - nested: [ - { name: "Monitors", path: "monitors", icon: }, - { name: "Pagespeed", path: "pagespeed", icon: }, - { name: "Infrastructure", path: "infrastructure", icon: }, - ], - }, + { name: "Monitors", path: "monitors", icon: }, + { name: "Pagespeed", path: "pagespeed", icon: }, + { name: "Infrastructure", path: "infrastructure", icon: }, { name: "Incidents", path: "incidents", icon: }, // { name: "Status pages", path: "status", icon: }, { name: "Maintenance", path: "maintenance", icon: }, From 98ab556c61629f5f0482e5cea5309ca059ed8625 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 29 Nov 2024 11:03:15 +0800 Subject: [PATCH 26/27] Remove greeting from PageSpeed page --- Client/src/Pages/PageSpeed/index.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx index 30e11b2d7..8e0f111bb 100644 --- a/Client/src/Pages/PageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/index.jsx @@ -8,7 +8,6 @@ import "./index.css"; import { useNavigate } from "react-router"; import PropTypes from "prop-types"; import Breadcrumbs from "../../Components/Breadcrumbs"; -import Greeting from "../../Utils/greeting"; import SkeletonLayout from "./skeleton"; import Card from "./card"; import { networkService } from "../../main"; @@ -82,11 +81,10 @@ const PageSpeed = ({ isAdmin }) => { - {isAdmin && (