From b547981bfd46bad2d18373effda6da328417aaae Mon Sep 17 00:00:00 2001 From: Mend Renovate Date: Fri, 28 Feb 2025 19:40:40 +0000 Subject: [PATCH 01/77] Update dependency eslint-plugin-react-hooks to v5.2.0 --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 432f710eb..0322ce4c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11412,9 +11412,9 @@ } }, "node_modules/eslint-plugin-react-hooks": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0.tgz", - "integrity": "sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz", + "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==", "dev": true, "license": "MIT", "engines": { From 831cf8cde5d829941832e6604b7e674a80fb09fa Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 28 Feb 2025 13:49:38 -0800 Subject: [PATCH 02/77] add light color for chatBot background --- src/Utils/Theme/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 36ab0a0f4..cd2b2e316 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -282,7 +282,7 @@ const newSemanticColors = { }, chatbot: { background: { - light: "#112B2B", + light: newColors.gray200, dark: "#112B2B", }, textAccent: { From d88ebdaff3726e8219ef3ca1b0a60861a1c2b10b Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 28 Feb 2025 13:50:02 -0800 Subject: [PATCH 03/77] add theme switcher --- .../Status/Components/ControlsHeader/index.jsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx b/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx index 9eacf9b36..f534e73b3 100644 --- a/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx +++ b/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx @@ -2,7 +2,7 @@ import { Box, Stack, Typography, Button } from "@mui/material"; import Image from "../../../../../Components/Image"; import SettingsIcon from "../../../../../assets/icons/settings-bold.svg?react"; - +import ThemeSwitch from "../../../../../Components/ThemeSwitch"; //Utils import { useTheme } from "@mui/material/styles"; import { useNavigate } from "react-router-dom"; @@ -76,6 +76,7 @@ Controls.propTypes = { const ControlsHeader = ({ statusPage, + isPublic, isDeleting, isDeleteOpen, setIsDeleteOpen, @@ -105,7 +106,16 @@ const ControlsHeader = ({ maxHeight={"50px"} base64={statusPage?.logo?.data} /> - {statusPage?.companyName} + + {statusPage?.companyName} + + {isPublic && } ); }; @@ -121,6 +132,7 @@ const ControlsHeader = ({ ControlsHeader.propTypes = { url: PropTypes.string, statusPage: PropTypes.object, + isPublic: PropTypes.bool, isDeleting: PropTypes.bool, isDeleteOpen: PropTypes.bool.isRequired, setIsDeleteOpen: PropTypes.func.isRequired, From 5ff7e212133c4a3a60cdf8e2392e391ca4e4602c Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 28 Feb 2025 13:50:28 -0800 Subject: [PATCH 04/77] add useEffect hook to set theme to dark, restore to original mode on exit --- src/Features/UI/uiSlice.js | 4 +- .../DistributedUptimeStatus/Status/index.jsx | 37 +++++++++++++++++-- 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/src/Features/UI/uiSlice.js b/src/Features/UI/uiSlice.js index 5731307ec..ebafdbbf6 100644 --- a/src/Features/UI/uiSlice.js +++ b/src/Features/UI/uiSlice.js @@ -53,8 +53,8 @@ const uiSlice = createSlice({ state.timezone = action.payload.timezone; }, setLanguage(state, action) { - state.language = action.payload; - }, + state.language = action.payload; + }, }, }); diff --git a/src/Pages/DistributedUptimeStatus/Status/index.jsx b/src/Pages/DistributedUptimeStatus/Status/index.jsx index fa5069eae..033174b0c 100644 --- a/src/Pages/DistributedUptimeStatus/Status/index.jsx +++ b/src/Pages/DistributedUptimeStatus/Status/index.jsx @@ -18,10 +18,11 @@ import InfoBox from "../../../Components/InfoBox"; import StatusHeader from "../../DistributedUptime/Details/Components/StatusHeader"; import MonitorsList from "./Components/MonitorsList"; import { RowContainer } from "../../../Components/StandardContainer"; +import ThemeSwitch from "../../../Components/ThemeSwitch"; //Utils import { useTheme } from "@mui/material/styles"; -import { useState, useRef } from "react"; +import { useState, useEffect, useRef } from "react"; import { useParams } from "react-router-dom"; import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails"; import { useDUStatusPageFetchByUrl } from "./Hooks/useDUStatusPageFetchByUrl"; @@ -31,6 +32,8 @@ import SubHeader from "../../../Components/Subheader"; import { safelyParseFloat } from "../../../Utils/utils"; import { useNavigate, useLocation } from "react-router-dom"; import { useTranslation } from "react-i18next"; +import { useSelector, useDispatch } from "react-redux"; +import { setMode } from "../../../Features/UI/uiSlice"; // Responsive import { useMediaQuery } from "@mui/material"; @@ -40,8 +43,12 @@ const DistributedUptimeStatus = () => { const location = useLocation(); const { t } = useTranslation(); const isPublic = location.pathname.startsWith("/status/distributed/public"); - const elementToCapture = useRef(null); + + // Redux state + const mode = useSelector((state) => state.ui.mode); + const originalModeRef = useRef(null); + // Local State const [dateRange, setDateRange] = useState("day"); const [isDeleteOpen, setIsDeleteOpen] = useState(false); @@ -50,6 +57,7 @@ const DistributedUptimeStatus = () => { const theme = useTheme(); const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); const navigate = useNavigate(); + const dispatch = useDispatch(); const [ statusPageIsLoading, @@ -85,6 +93,28 @@ const DistributedUptimeStatus = () => { }; } + // Default to dark mode + useEffect(() => { + const cleanup = () => { + if (originalModeRef.current === null) { + originalModeRef.current = mode; + } + + if (isPublic) { + dispatch(setMode(originalModeRef.current)); + } + }; + + if (isPublic) { + dispatch(setMode("dark")); + } + + window.addEventListener("beforeunload", cleanup); + return () => { + window.removeEventListener("beforeunload", cleanup); + }; + }, [dispatch, isPublic]); + // Done loading, a status page doesn't exist if (!statusPageIsLoading && typeof statusPage === "undefined") { return ( @@ -158,9 +188,10 @@ const DistributedUptimeStatus = () => { }} > {!isPublic && } + Date: Fri, 28 Feb 2025 14:31:58 -0800 Subject: [PATCH 05/77] add pagination --- .../Monitors/Hooks/useSubscribeToMonitors.jsx | 8 +++---- .../DistributedUptime/Monitors/index.jsx | 24 ++++++++++++++++++- src/Pages/StatusPage/StatusPages/index.jsx | 1 + 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx b/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx index 7c60b6ca2..7c498d753 100644 --- a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx +++ b/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx @@ -5,7 +5,7 @@ import { useTheme } from "@emotion/react"; import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils"; import { createToast } from "../../../../Utils/toastUtils"; -const useSubscribeToMonitors = () => { +const useSubscribeToMonitors = (page, rowsPerPage) => { // Redux const { user } = useSelector((state) => state.auth); @@ -25,8 +25,8 @@ const useSubscribeToMonitors = () => { teamId: user.teamId, limit: 25, types: ["distributed_http"], - page: 0, - rowsPerPage: 10, + page, + rowsPerPage, filter: null, field: null, order: null, @@ -56,7 +56,7 @@ const useSubscribeToMonitors = () => { }); setNetworkError(true); } - }, [user, getMonitorWithPercentage, theme, isLoading]); + }, [user, getMonitorWithPercentage, theme, isLoading, page, rowsPerPage]); return [isLoading, networkError, monitors, monitorsSummary, filteredMonitors]; }; export { useSubscribeToMonitors }; diff --git a/src/Pages/DistributedUptime/Monitors/index.jsx b/src/Pages/DistributedUptime/Monitors/index.jsx index 2111ddca3..41e21130d 100644 --- a/src/Pages/DistributedUptime/Monitors/index.jsx +++ b/src/Pages/DistributedUptime/Monitors/index.jsx @@ -3,10 +3,12 @@ import { Stack, Typography } from "@mui/material"; import Breadcrumbs from "../../../Components/Breadcrumbs"; import CreateMonitorHeader from "../../../Components/MonitorCreateHeader"; import MonitorTable from "./Components/MonitorTable"; +import Pagination from "../../../Components/Table/TablePagination"; import Fallback from "../../../Components/Fallback"; import GenericFallback from "../../../Components/GenericFallback"; // Utils +import { useState } from "react"; import { useTheme } from "@mui/material/styles"; import { useIsAdmin } from "../../../Hooks/useIsAdmin"; import { useSubscribeToMonitors } from "./Hooks/useSubscribeToMonitors"; @@ -16,11 +18,23 @@ const BREADCRUMBS = [{ name: `Distributed Uptime`, path: "/distributed-uptime" } const DistributedUptimeMonitors = () => { // Local state + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(10); + // Utils const theme = useTheme(); const isAdmin = useIsAdmin(); const [isLoading, networkError, monitors, monitorsSummary, filteredMonitors] = - useSubscribeToMonitors(); + useSubscribeToMonitors(page, rowsPerPage); + // Handlers + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(event.target.value); + setPage(0); + }; if (isLoading) { return ; @@ -69,6 +83,14 @@ const DistributedUptimeMonitors = () => { isLoading={isLoading} monitors={filteredMonitors} /> + ); }; diff --git a/src/Pages/StatusPage/StatusPages/index.jsx b/src/Pages/StatusPage/StatusPages/index.jsx index 9027467a4..54a41f850 100644 --- a/src/Pages/StatusPage/StatusPages/index.jsx +++ b/src/Pages/StatusPage/StatusPages/index.jsx @@ -51,6 +51,7 @@ const StatusPages = () => { /> ); } + return ( From 947f5ff773310ae76ba694f08d543a08c2822d09 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 08:10:16 +0530 Subject: [PATCH 06/77] Added a new HOC in status bar in order to make sure it works on both the resolution, high and low. --- .../Charts/StatusPageBarChart/index.jsx | 35 +++++++++++-------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx index 5acf4c3d6..46e8ae2a1 100644 --- a/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/src/Components/Charts/StatusPageBarChart/index.jsx @@ -24,6 +24,21 @@ const StatusPageBarChart = ({ checks = [] }) => { checks = [...checks, ...placeholders]; } + const BarBox = ({ width, height, backgroundColor, borderRadius, children }) => ( + + {children} + + ); + return ( { /* TODO what is the purpose of this box? */ // CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars // even if there are less than 25 checks - ) : ( { }, }} > - { transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)", }} /> - + ) )} From 4ccc36acc28aae741b2e9eab8103cf6182407f5d Mon Sep 17 00:00:00 2001 From: Aryaman Kumar Sharma Date: Sat, 1 Mar 2025 10:21:39 +0530 Subject: [PATCH 07/77] Fix: Infrastructure Details Page Design --- src/Components/Charts/CustomGauge/index.jsx | 8 ++-- src/Components/StatBox/index.jsx | 7 ++-- .../Details/Components/GaugeBoxes/Gauge.jsx | 38 +++++++++++++++---- .../Details/Hooks/useHardwareUtils.jsx | 1 + src/Pages/Infrastructure/Details/index.jsx | 2 +- src/Utils/Theme/constants.js | 9 +++++ 6 files changed, 50 insertions(+), 15 deletions(-) diff --git a/src/Components/Charts/CustomGauge/index.jsx b/src/Components/Charts/CustomGauge/index.jsx index d29663004..5c8481898 100644 --- a/src/Components/Charts/CustomGauge/index.jsx +++ b/src/Components/Charts/CustomGauge/index.jsx @@ -62,6 +62,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold = className="radial-chart" width={radius} height={radius} + sx={{ backgroundColor: theme.palette.accent.baseBackground, borderRadius: "50%" }} > {`${progressWithinRange.toFixed(1)}%`} diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx index 3c91e1aae..71e01b4da 100644 --- a/src/Components/StatBox/index.jsx +++ b/src/Components/StatBox/index.jsx @@ -3,6 +3,7 @@ import Image from "../Image"; import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils"; +import { lighten } from "@mui/material/styles"; /** * StatBox Component @@ -50,7 +51,7 @@ const StatBox = ({ borderColor: theme.palette[themeColor].lowContrast, } : { - background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`, + background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`, borderColor: theme.palette.primary.lowContrast, }; @@ -62,7 +63,7 @@ const StatBox = ({ color: theme.palette.primary.contrastTextSecondary, }; - const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15 }; + const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15, fontWeight: 600}; const detailTextStyles = gradient ? { color: theme.palette[themeColor].contrastText, @@ -120,7 +121,7 @@ const StatBox = ({ )} {heading} - {subHeading} + {subHeading} ); diff --git a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx index b1202682d..3adf0066b 100644 --- a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx +++ b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx @@ -9,6 +9,17 @@ import PropTypes from "prop-types"; const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => { const theme = useTheme(); + const boxStyle = { + borderRadius: 2, + backgroundColor: theme.palette.tertiary.main, + width: "40%", + mb: 2, + mt: 2, + pr: 4, + textAlign: 'right', + fontWeight: 600 + } + return ( gap={theme.spacing(2)} alignItems="center" > - - {heading} + + + {heading} + {metricOne} - {valueOne} + {valueOne} {metricTwo} - {valueTwo} + {valueTwo} diff --git a/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx b/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx index bc540dfe3..1752533d0 100644 --- a/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx +++ b/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx @@ -64,6 +64,7 @@ const useHardwareUtils = () => { return ( <> {Number(MB.toFixed(0))} + {space ? " " : ""} MB ); diff --git a/src/Pages/Infrastructure/Details/index.jsx b/src/Pages/Infrastructure/Details/index.jsx index f686fa9ff..fc704b444 100644 --- a/src/Pages/Infrastructure/Details/index.jsx +++ b/src/Pages/Infrastructure/Details/index.jsx @@ -62,7 +62,7 @@ const InfrastructureDetails = () => { monitor={monitor} /> - No check history for htis monitor yet. + No check history for this monitor yet. ); diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 36ab0a0f4..7397e6f5a 100644 --- a/src/Utils/Theme/constants.js +++ b/src/Utils/Theme/constants.js @@ -94,6 +94,7 @@ const newColors = { blueGray600: "#344054", blueGray800: "#1C2130", blueBlueWave: "#1570EF", + lightBlueWave: "#CDE2FF", /* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */ green100: "#67cd78", green200: "#4B9B77", @@ -138,6 +139,14 @@ const newSemanticColors = { light: newColors.offWhite, dark: newColors.offWhite, }, + base: { + light: newColors.lightBlueWave, + dark: newColors.lightBlueWave, + }, + baseBackground: { + light: paletteColors.white, + dark: newColors.offBlack, + } }, primary: { main: { From 3632e1d1824477c0afc47cd3ce9ea91d3ad8656f Mon Sep 17 00:00:00 2001 From: Aryaman Sharma Date: Sat, 1 Mar 2025 10:30:51 +0530 Subject: [PATCH 08/77] Fix: Infrastructure Details Page Design --- src/Components/StatBox/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx index 71e01b4da..ab0411a68 100644 --- a/src/Components/StatBox/index.jsx +++ b/src/Components/StatBox/index.jsx @@ -3,7 +3,6 @@ import Image from "../Image"; import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils"; -import { lighten } from "@mui/material/styles"; /** * StatBox Component From 4820c1ee8a4fd1a92ac5847a8d8bc5ec6238405b Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 21:56:21 +0530 Subject: [PATCH 09/77] FIX-1848 made changes in the contents tab in the status page. --- .../Create/Components/Tabs/Content.jsx | 31 ++++++++----------- .../Create/Components/Tabs/SectionStack.jsx | 22 +++++++++++++ 2 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx diff --git a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx index 8eda4fe0a..6adf3cca9 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx @@ -1,13 +1,13 @@ // Components -import { Stack, Typography, Button } from "@mui/material"; +import { Stack, Typography } from "@mui/material"; import { TabPanel } from "@mui/lab"; -import ConfigBox from "../../../../../Components/ConfigBox"; import MonitorList from "../MonitorList"; import Search from "../../../../../Components/Inputs/Search"; import Checkbox from "../../../../../Components/Inputs/Checkbox"; // Utils import { useState } from "react"; import { useTheme } from "@emotion/react"; +import SectionStack from "./SectionStack"; const Content = ({ tabValue, form, @@ -34,14 +34,10 @@ const Content = ({ return ( - - - Status page servers - - You can add any number of servers that you monitor to your status page. You - can also reorder them for the best viewing experience. - - + - {" "} - - - Features - Show more details on the status page - - + + + - + diff --git a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx new file mode 100644 index 000000000..2eacf5ea5 --- /dev/null +++ b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx @@ -0,0 +1,22 @@ +import { Stack, Typography } from "@mui/material"; +import ConfigBox from "../../../../../Components/ConfigBox"; +import PropTypes from "prop-types"; + +// This can be used to add any extra/additional section/stacks on top of existing sections on the tab +const SectionStack = ({ title, description, children }) => ( + + + {title} + {description} + + {children} + +); + +SectionStack.propTypes = { + title: PropTypes.string.isRequired, // Title must be a string and is required + description: PropTypes.string.isRequired, // Description must be a string and is required + children: PropTypes.node.isRequired, +}; + +export default SectionStack; From b6726fba542256d6569a134f90f6a1ae75ef1979 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 22:34:33 +0530 Subject: [PATCH 10/77] FIX-1848 removed the unwanted box element as it does not serve any purpose. --- src/Pages/StatusPage/Create/Components/Tabs/Content.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx index 6adf3cca9..3a95a07b0 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx @@ -91,7 +91,6 @@ const Content = ({ - ); }; From d123bed87518c144c7eac0bc72ceb8034fcd3cef Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Sat, 1 Mar 2025 22:43:35 +0530 Subject: [PATCH 11/77] FIX-1848 minor theme fixes. --- .../Create/Components/Tabs/SectionStack.jsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx index 2eacf5ea5..9708d8a85 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx @@ -1,17 +1,21 @@ import { Stack, Typography } from "@mui/material"; import ConfigBox from "../../../../../Components/ConfigBox"; import PropTypes from "prop-types"; +import { useTheme } from "@emotion/react"; // This can be used to add any extra/additional section/stacks on top of existing sections on the tab -const SectionStack = ({ title, description, children }) => ( - - - {title} - {description} - - {children} - -); +const SectionStack = ({ title, description, children }) => { + const theme = useTheme(); + return ( + + + {title} + {description} + + {children} + + ); +}; SectionStack.propTypes = { title: PropTypes.string.isRequired, // Title must be a string and is required From 7eea24a63ef96b4a11f5f4c1357bdb6a996474fc Mon Sep 17 00:00:00 2001 From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com> Date: Sat, 1 Mar 2025 15:46:47 -0500 Subject: [PATCH 12/77] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 68216c880..5505f72fe 100644 --- a/README.md +++ b/README.md @@ -107,7 +107,7 @@ If you have any questions, suggestions or comments, please use our [Discord chan ## 🤝 Contributing -We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 3700+ stars and attracted 45+ contributors from around the globe. +We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 4.4K+ stars and attracted 50+ contributors from around the globe. Our repo is starred by employees from **Google, Microsoft, Intel, Cisco, Tencent, Electronic Arts, ByteDance, JP Morgan Chase, Deloitte, Accenture, Foxconn, Broadcom, China Telecom, Barclays, Capgemini, Wipro, Cloudflare, Dassault Systèmes and NEC**, so don’t hold back — jump in, contribute and learn with us! From a72d0029a1c670d64be6b397c847d9b21bc8b57f Mon Sep 17 00:00:00 2001 From: cihatata Date: Sun, 2 Mar 2025 02:21:24 +0300 Subject: [PATCH 13/77] feat: 1665 language selection from settings --- src/Features/Settings/settingsSlice.js | 1 + src/Pages/Settings/index.jsx | 127 ++++++++++++++----------- src/locales/gb.json | 44 ++++++++- src/locales/tr.json | 45 ++++++++- 4 files changed, 159 insertions(+), 58 deletions(-) diff --git a/src/Features/Settings/settingsSlice.js b/src/Features/Settings/settingsSlice.js index a3d96ea0e..78bd81c08 100644 --- a/src/Features/Settings/settingsSlice.js +++ b/src/Features/Settings/settingsSlice.js @@ -34,6 +34,7 @@ export const updateAppSettings = createAsyncThunk( const parsedSettings = { apiBaseUrl: settings.apiBaseUrl, logLevel: settings.logLevel, + language: settings.language, clientHost: settings.clientHost, jwtSecret: settings.jwtSecret, dbType: settings.dbType, diff --git a/src/Pages/Settings/index.jsx b/src/Pages/Settings/index.jsx index 04b8658dc..c33042772 100644 --- a/src/Pages/Settings/index.jsx +++ b/src/Pages/Settings/index.jsx @@ -27,19 +27,24 @@ import { setTimezone, setMode, setDistributedUptimeEnabled, + setLanguage, } from "../../Features/UI/uiSlice"; import timezones from "../../Utils/timezones.json"; import { useState, useEffect } from "react"; import { networkService } from "../../main"; import { settingsValidation } from "../../Validation/validation"; +import { updateAppSettings } from "../../Features/Settings/settingsSlice"; +import { useTranslation } from "react-i18next"; // Constants const SECONDS_PER_DAY = 86400; const Settings = () => { const theme = useTheme(); + const { t, i18n } = useTranslation(); const isAdmin = useIsAdmin(); const { user } = useSelector((state) => state.auth); + const { language } = useSelector((state) => state.ui); const { checkTTL } = user; const { isLoading } = useSelector((state) => state.uptimeMonitors); const { isLoading: authIsLoading } = useSelector((state) => state.auth); @@ -119,10 +124,13 @@ const Settings = () => { }); const updatedUser = { ...user, checkTTL: form.ttl }; const action = await dispatch(update({ localData: updatedUser })); + const settingsAction = await dispatch( + updateAppSettings({ settings: { language: language } }) + ); - if (action.payload.success) { + if (action.payload.success && settingsAction.payload.success) { createToast({ - body: "Settings saved successfully", + body: t("settingsSuccessSaved"), }); } else { if (action.payload) { @@ -139,7 +147,7 @@ const Settings = () => { } } catch (error) { console.log(error); - createToast({ body: "Failed to save settings" }); + createToast({ body: t("settingsFailedToSave") }); } finally { setChecksIsLoading(false); } @@ -147,18 +155,16 @@ const Settings = () => { const handleClearStats = async () => { try { - const action = await dispatch( - deleteMonitorChecksByTeamId({ teamId: user.teamId }) - ); + const action = await dispatch(deleteMonitorChecksByTeamId({ teamId: user.teamId })); if (deleteMonitorChecksByTeamId.fulfilled.match(action)) { - createToast({ body: "Stats cleared successfully" }); + createToast({ body: t("settingsStatsCleared") }); } else { - createToast({ body: "Failed to clear stats" }); + createToast({ body: t("settingsFailedToClearStats") }); } } catch (error) { logger.error(error); - createToast({ body: "Failed to clear stats" }); + createToast({ body: t("settingsFailedToClearStats") }); } finally { setIsOpen(deleteStatsMonitorsInitState); } @@ -168,13 +174,13 @@ const Settings = () => { try { const action = await dispatch(addDemoMonitors()); if (addDemoMonitors.fulfilled.match(action)) { - createToast({ body: "Successfully added demo monitors" }); + createToast({ body: t("settingsDemoMonitorsAdded") }); } else { - createToast({ body: "Failed to add demo monitors" }); + createToast({ body: t("settingsFailedToAddDemoMonitors") }); } } catch (error) { logger.error(error); - createToast({ Body: "Failed to add demo monitors" }); + createToast({ Body: t("settingsFailedToAddDemoMonitors") }); } }; @@ -182,18 +188,20 @@ const Settings = () => { try { const action = await dispatch(deleteAllMonitors()); if (deleteAllMonitors.fulfilled.match(action)) { - createToast({ body: "Successfully deleted all monitors" }); + createToast({ body: t("settingsMonitorsDeleted") }); } else { - createToast({ body: "Failed to add demo monitors" }); + createToast({ body: t("settingsFailedToDeleteMonitors") }); } } catch (error) { logger.error(error); - createToast({ Body: "Failed to delete all monitors" }); + createToast({ Body: t("settingsFailedToDeleteMonitors") }); } finally { setIsOpen(deleteStatsMonitorsInitState); } }; + const languages = Object.keys(i18n.options.resources || {}); + return ( { > - General settings + {t("settingsGeneralSettings")} - Display timezone- The timezone of - the dashboard you publicly display. + {t("settingsDisplayTimezone")}- {t("settingsDisplayTimezoneDescription")} { + dispatch(setMode(e.target.value)); + }} + items={[ + { _id: "light", name: "Light" }, + { _id: "dark", name: "Dark" }, + ]} + > {isAdmin && ( - Distributed uptime + {t("settingsDistributedUptime")} - Enable/disable distributed uptime monitoring. + {t("settingsDistributedUptimeDescription")} @@ -266,31 +283,30 @@ const Settings = () => { dispatch(setDistributedUptimeEnabled(e.target.checked)); }} /> - {distributedUptimeEnabled === true ? "Enabled" : "Disabled"} + {distributedUptimeEnabled === true ? t("settingsEnabled") : t("settingsDisabled")} )} {isAdmin && ( - History and monitoring + {t("settingsHistoryAndMonitoring")} - Define here for how long you want to keep the data. You can also remove - all past data. + {t("settingsHistoryAndMonitoringDescription")} - Clear all stats. This is irreversible. + {t("settingsClearAllStats")} setIsOpen(deleteStatsMonitorsInitState)} - confirmationButtonLabel="Yes, clear all stats" + confirmationButtonLabel={t("settingsClearAllStatsDialogConfirm")} onConfirm={handleClearStats} isLoading={isLoading || authIsLoading || checksIsLoading} /> @@ -318,14 +334,14 @@ const Settings = () => { {isAdmin && ( - Demo monitors + {t("settingsDemoMonitors")} - Here you can add and remove demo monitors. + {t("settingsDemoMonitorsDescription")} - Add demo monitors + {t("settingsAddDemoMonitors")} - Remove all monitors + {t("settingsRemoveAllMonitors")} setIsOpen(deleteStatsMonitorsInitState)} - confirmationButtonLabel="Yes, clear all monitors" + confirmationButtonLabel={t("settingsRemoveAllMonitorsDialogConfirm")} onConfirm={handleDeleteAllMonitors} isLoading={isLoading || authIsLoading || checksIsLoading} /> @@ -365,10 +381,9 @@ const Settings = () => { {isAdmin && ( - Wallet + {t("settingsWallet")} - Connect your wallet here. This is required for the Distributed Uptime - monitor to connect to multiple nodes globally. + {t("settingsWalletDescription")} @@ -385,12 +400,12 @@ const Settings = () => { - About + {t("settingsAbout")} Checkmate {version} - Developed by Bluewave Labs. + {t("settingsDevelopedBy")} { sx={{ px: theme.spacing(12), mt: theme.spacing(20) }} onClick={handleSave} > - Save + {t("settingsSave")} diff --git a/src/locales/gb.json b/src/locales/gb.json index e12309469..cf7711fa8 100644 --- a/src/locales/gb.json +++ b/src/locales/gb.json @@ -65,5 +65,47 @@ "distributedStatusSubHeaderText": "Powered by millions devices worldwide, view a system performance by global region, country or city", "distributedRightCategoryTitle": "Monitor", "distributedStatusServerMonitors": "Server Monitors", - "distributedStatusServerMonitorsDescription": "Monitor status of related servers" + "distributedStatusServerMonitorsDescription": "Monitor status of related servers", + + "settingsGeneralSettings": "General settings", + "settingsDisplayTimezone": "Display timezone", + "settingsDisplayTimezoneDescription": "The timezone of the dashboard you publicly display.", + "settingsAppearance": "Appearance", + "settingsAppearanceDescription": "Switch between light and dark mode, or change user interface language", + "settingsThemeMode": "Theme Mode", + "settingsLanguage": "Language", + "settingsDistributedUptime": "Distributed uptime", + "settingsDistributedUptimeDescription": "Enable/disable distributed uptime monitoring.", + "settingsEnabled": "Enabled", + "settingsDisabled": "Disabled", + "settingsHistoryAndMonitoring": "History and monitoring", + "settingsHistoryAndMonitoringDescription": "Define here for how long you want to keep the data. You can also remove all past data.", + "settingsTTLLabel": "The days you want to keep monitoring history.", + "settingsTTLOptionalLabel": "0 for infinite", + "settingsClearAllStats": "Clear all stats. This is irreversible.", + "settingsClearAllStatsButton": "Clear all stats", + "settingsClearAllStatsDialogTitle": "Do you want to clear all stats?", + "settingsClearAllStatsDialogDescription": "Once deleted, your monitors cannot be retrieved.", + "settingsClearAllStatsDialogConfirm": "Yes, clear all stats", + "settingsDemoMonitors": "Demo monitors", + "settingsDemoMonitorsDescription": "Here you can add and remove demo monitors.", + "settingsAddDemoMonitors": "Add demo monitors", + "settingsAddDemoMonitorsButton": "Add demo monitors", + "settingsRemoveAllMonitors": "Remove all monitors", + "settingsRemoveAllMonitorsButton": "Remove all monitors", + "settingsRemoveAllMonitorsDialogTitle": "Do you want to remove all monitors?", + "settingsRemoveAllMonitorsDialogConfirm": "Yes, clear all monitors", + "settingsWallet": "Wallet", + "settingsWalletDescription": "Connect your wallet here. This is required for the Distributed Uptime monitor to connect to multiple nodes globally.", + "settingsAbout": "About", + "settingsDevelopedBy": "Developed by Bluewave Labs.", + "settingsSave": "Save", + "settingsSuccessSaved": "Settings saved successfully", + "settingsFailedToSave": "Failed to save settings", + "settingsStatsCleared": "Stats cleared successfully", + "settingsFailedToClearStats": "Failed to clear stats", + "settingsDemoMonitorsAdded": "Successfully added demo monitors", + "settingsFailedToAddDemoMonitors": "Failed to add demo monitors", + "settingsMonitorsDeleted": "Successfully deleted all monitors", + "settingsFailedToDeleteMonitors": "Failed to delete all monitors" } diff --git a/src/locales/tr.json b/src/locales/tr.json index 5ff3448b7..abd358548 100644 --- a/src/locales/tr.json +++ b/src/locales/tr.json @@ -58,5 +58,48 @@ "authRegisterBySigningUp": "Kayıt olarak, aşağıdaki şartları kabul ediyorsunuz:", "distributedStatusHeaderText": "Gerçek zamanlı, Gerçek cihazlar kapsamı", "distributedStatusSubHeaderText": "Dünya çapında milyonlarca cihaz tarafından desteklenen sistem performansını küresel bölgeye, ülkeye veya şehre göre görüntüleyin", - "distributedRightCategoryTitle": "Monitör" + "distributedRightCatagoryTitle": "Monitör", + "distributedRightCatagoryDescription": "Mainnet Beta Kümesi", + + "settingsGeneralSettings": "Genel ayarlar", + "settingsDisplayTimezone": "Görüntüleme saat dilimi", + "settingsDisplayTimezoneDescription": "Herkese açık olarak görüntülediğiniz kontrol panelinin saat dilimi.", + "settingsAppearance": "Görünüm", + "settingsAppearanceDescription": "Açık ve koyu mod arasında geçiş yapın veya kullanıcı arayüzü dilini değiştirin", + "settingsThemeMode": "Tema", + "settingsLanguage": "Dil", + "settingsDistributedUptime": "Dağıtılmış çalışma süresi", + "settingsDistributedUptimeDescription": "Dağıtılmış çalışma süresi izlemeyi etkinleştirin/devre dışı bırakın.", + "settingsEnabled": "Etkin", + "settingsDisabled": "Devre dışı", + "settingsHistoryAndMonitoring": "Geçmiş ve izleme", + "settingsHistoryAndMonitoringDescription": "Verileri ne kadar süreyle saklamak istediğinizi burada tanımlayın. Ayrıca tüm geçmiş verileri kaldırabilirsiniz.", + "settingsTTLLabel": "İzleme geçmişini saklamak istediğiniz gün sayısı.", + "settingsTTLOptionalLabel": "Sınırsız için 0", + "settingsClearAllStats": "Tüm istatistikleri temizle. Bu geri alınamaz.", + "settingsClearAllStatsButton": "Tüm istatistikleri temizle", + "settingsClearAllStatsDialogTitle": "Tüm istatistikleri temizlemek istiyor musunuz?", + "settingsClearAllStatsDialogDescription": "Silindikten sonra, monitörleriniz geri alınamaz.", + "settingsClearAllStatsDialogConfirm": "Evet, tüm istatistikleri temizle", + "settingsDemoMonitors": "Demo monitörler", + "settingsDemoMonitorsDescription": "Burada demo monitörler ekleyebilir ve kaldırabilirsiniz.", + "settingsAddDemoMonitors": "Demo monitörler ekle", + "settingsAddDemoMonitorsButton": "Demo monitörler ekle", + "settingsRemoveAllMonitors": "Tüm monitörleri kaldır", + "settingsRemoveAllMonitorsButton": "Tüm monitörleri kaldır", + "settingsRemoveAllMonitorsDialogTitle": "Tüm monitörleri kaldırmak istiyor musunuz?", + "settingsRemoveAllMonitorsDialogConfirm": "Evet, tüm monitörleri temizle", + "settingsWallet": "Cüzdan", + "settingsWalletDescription": "Cüzdanınızı buradan bağlayın. Bu, Dağıtılmış Çalışma Süresi monitörünün küresel olarak birden çok düğüme bağlanması için gereklidir.", + "settingsAbout": "Hakkında", + "settingsDevelopedBy": "Bluewave Labs tarafından geliştirilmiştir.", + "settingsSave": "Kaydet", + "settingsSuccessSaved": "Ayarlar başarıyla kaydedildi", + "settingsFailedToSave": "Ayarlar kaydedilemedi", + "settingsStatsCleared": "İstatistikler başarıyla temizlendi", + "settingsFailedToClearStats": "İstatistikler temizlenemedi", + "settingsDemoMonitorsAdded": "Demo monitörler başarıyla eklendi", + "settingsFailedToAddDemoMonitors": "Demo monitörler eklenemedi", + "settingsMonitorsDeleted": "Tüm monitörler başarıyla silindi", + "settingsFailedToDeleteMonitors": "Monitörler silinemedi" } From a549e42c43330d9c7c4ad44c2b37747751d78203 Mon Sep 17 00:00:00 2001 From: cihatata Date: Sun, 2 Mar 2025 02:43:53 +0300 Subject: [PATCH 14/77] feat: Load automatic language settings on app startup --- src/App.jsx | 15 +++++++++++++-- src/Components/LanguageSelector.jsx | 1 - src/Features/Settings/settingsSlice.js | 2 ++ 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 04dfeeb4f..feddfb60f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,17 +12,28 @@ import { logger } from "./Utils/Logger"; // Import the logger import { networkService } from "./main"; import { Routes } from "./Routes"; import WalletProvider from "./Components/WalletProvider"; +import { useTranslation } from "react-i18next"; +import { setLanguage } from "./Features/UI/uiSlice"; function App() { const mode = useSelector((state) => state.ui.mode); const { authToken } = useSelector((state) => state.auth); const dispatch = useDispatch(); + const { i18n } = useTranslation(); useEffect(() => { if (authToken) { - dispatch(getAppSettings({ authToken })); + dispatch(getAppSettings({ authToken })).then((action) => { + if (action.payload && action.payload.success) { + const { language } = action.payload.data; + if (language) { + dispatch(setLanguage(language)); + i18n.changeLanguage(language); + } + } + }); } - }, [dispatch, authToken]); + }, [dispatch, authToken, i18n]); // Cleanup useEffect(() => { diff --git a/src/Components/LanguageSelector.jsx b/src/Components/LanguageSelector.jsx index ca8e9207c..70c41e640 100644 --- a/src/Components/LanguageSelector.jsx +++ b/src/Components/LanguageSelector.jsx @@ -14,7 +14,6 @@ const LanguageSelector = () => { i18n.changeLanguage(newLang); }; - // i18n instance'ından mevcut dilleri al const languages = Object.keys(i18n.options.resources || {}); return ( diff --git a/src/Features/Settings/settingsSlice.js b/src/Features/Settings/settingsSlice.js index 78bd81c08..345a8a264 100644 --- a/src/Features/Settings/settingsSlice.js +++ b/src/Features/Settings/settingsSlice.js @@ -5,6 +5,7 @@ const initialState = { isLoading: false, apiBaseUrl: "", logLevel: "debug", + language: "", }; export const getAppSettings = createAsyncThunk( @@ -69,6 +70,7 @@ const handleGetSettingsFulfilled = (state, action) => { state.msg = action.payload.msg; state.apiBaseUrl = action.payload.data.apiBaseUrl; state.logLevel = action.payload.data.logLevel; + state.language = action.payload.data.language; }; const handleGetSettingsRejected = (state, action) => { state.isLoading = false; From 4f6c29cd9af842f32b018284d64fb4dfbfe792ad Mon Sep 17 00:00:00 2001 From: Aditya Date: Sun, 2 Mar 2025 09:13:30 +0530 Subject: [PATCH 15/77] feat(sidebar): Improve sidebar menu UI --- src/Components/Sidebar/index.jsx | 155 ++++++++++++++++++++++++------- 1 file changed, 120 insertions(+), 35 deletions(-) diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index ee0071d4f..bc915b371 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -63,35 +63,29 @@ const menu = [ { name: "Status pages", path: "status", icon: }, { name: "Maintenance", path: "maintenance", icon: }, - // { name: "Integrations", path: "integrations", icon: }, - { - name: "Account", - icon: , - nested: [ - { name: "Profile", path: "account/profile", icon: }, - { name: "Password", path: "account/password", icon: }, - { name: "Team", path: "account/team", icon: }, - ], - }, + { name: "Integrations", path: "integrations", icon: }, { name: "Settings", icon: , path: "settings", }, +]; + +const otherMenuItems = [ + { name: "Support", path: "support", icon: }, { - name: "Other", - icon: , - nested: [ - { name: "Support", path: "support", icon: }, - { - name: "Discussions", - path: "discussions", - icon: , - }, - { name: "Docs", path: "docs", icon: }, - { name: "Changelog", path: "changelog", icon: }, - ], + name: "Discussions", + path: "discussions", + icon: , }, + { name: "Docs", path: "docs", icon: }, + { name: "Changelog", path: "changelog", icon: }, +]; + +const accountMenuItems = [ + { name: "Profile", path: "account/profile", icon: }, + { name: "Password", path: "account/password", icon: }, + { name: "Team", path: "account/team", icon: }, ]; /* TODO this could be a key in nested Path would be the link */ @@ -133,12 +127,38 @@ function Sidebar() { (state) => state.ui.distributedUptimeEnabled ); - const accountMenuItem = menu.find((item) => item.name === "Account"); - if (user.role?.includes("demo") && accountMenuItem) { - accountMenuItem.nested = accountMenuItem.nested.filter((item) => { - return item.name !== "Password"; - }); - } + const renderAccountMenuItems = () => { + let filteredAccountMenuItems = [...accountMenuItems]; + + // If the user is in demo mode, remove the "Password" option + if (user.role?.includes("demo")) { + filteredAccountMenuItems = filteredAccountMenuItems.filter( + (item) => item.name !== "Password" + ); + } + + // If the user is NOT a superadmin, remove the "Team" option + if (user.role && !user.role.includes("superadmin")) { + filteredAccountMenuItems = filteredAccountMenuItems.filter( + (item) => item.name !== "Team" + ); + } + + return filteredAccountMenuItems.map((item) => ( + navigate(item.path)} + sx={{ + gap: theme.spacing(2), + borderRadius: theme.shape.borderRadius, + pl: theme.spacing(4), + }} + > + {item.icon} + {item.name} + + )); + }; const openPopup = (event, id) => { setAnchorEl(event.currentTarget); @@ -260,7 +280,6 @@ function Sidebar() { > {collapsed ? : } - {/* TODO Alignment done using padding. Use single source of truth to that*/} - + + {otherMenuItems.map((item) => { + return item.path ? ( + + { + const url = URL_MAP[item.path]; + if (url) { + window.open(url, "_blank", "noreferrer"); + } else { + navigate(`/${item.path}`); + } + }} + sx={{ + height: "37px", + gap: theme.spacing(4), + borderRadius: theme.shape.borderRadius, + px: theme.spacing(4), + }} + > + {item.icon} + {item.name} {" "} + + + ) : null; + })} + + {collapsed && ( - + {authState.user?.firstName} {authState.user?.lastName} - + {authState.user?.role} @@ -742,6 +826,7 @@ function Sidebar() { {/* TODO Do we need two dividers? */} {collapsed && } + {renderAccountMenuItems()} Date: Sun, 2 Mar 2025 12:51:36 +0530 Subject: [PATCH 16/77] FIX-1847 implemented the logic. --- src/Components/Inputs/Select/index.jsx | 15 +++++- .../Components/OptionsHeader/index.jsx | 49 ++++++++++++------- src/Utils/Input/utils.jsx | 27 ++++++++++ 3 files changed, 72 insertions(+), 19 deletions(-) create mode 100644 src/Utils/Input/utils.jsx diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx index f0a1d11c0..4be84b6e0 100644 --- a/src/Components/Inputs/Select/index.jsx +++ b/src/Components/Inputs/Select/index.jsx @@ -2,7 +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 { renderTruncatedValue } from "../../../Utils/Input/utils"; import "./index.css"; /** @@ -50,8 +50,14 @@ const Select = ({ sx, name = "", labelControlSpacing = 2, + truncate = false, + maxTruncateLength = 15, }) => { const theme = useTheme(); + + const selectedItem = items.find((item) => item._id === value); + const displayName = selectedItem ? selectedItem.name : ""; + const itemStyles = { fontSize: "var(--env-var-font-size-medium)", color: theme.palette.primary.contrastTextTertiary, @@ -59,6 +65,10 @@ const Select = ({ margin: theme.spacing(2), }; + const renderShortValue = () => { + return renderTruncatedValue(displayName, truncate, maxTruncateLength, placeholder); + }; + return ( {placeholder && ( ; return ( @@ -27,17 +35,13 @@ const OptionsHeader = ({ direction="row" justifyContent="space-between" > - + - Incidents for + Incidents for: { - dispatch(setMode(e.target.value)); - }} - items={[ - { _id: "light", name: "Light" }, - { _id: "dark", name: "Dark" }, - ]} +