fix(client): resolve TS2769 error in ThemedHeatmap and ThemedHistogram

client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx

@@ -2,6 +2,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Box from "@mui/material/Box";
 import type { SxProps, Theme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
+import { mergeSx } from "@/Utils/mergeSx";
 import type {
 	ChartCell,
 	HeatCellKind,
@@ -19,10 +20,10 @@ export const ThemedHeatmap = ({ cells, containerSx, cellSx, onCellClick }: Props
 
 	return (
 		<Box
-			sx={[
-				...(Array.isArray(containerSx) ? containerSx : [containerSx]),
-				{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
-			]}
+			sx={mergeSx(
+				containerSx,
+				{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` }
+			)}
 			role="img"
 			aria-label={t("pages.statusPages.monitorsList.chart.heatmapAria")}
 		>
@@ -31,10 +32,10 @@ export const ThemedHeatmap = ({ cells, containerSx, cellSx, onCellClick }: Props
 					return (
 						<Box
 							key={cell.key}
-							sx={[
+							sx={mergeSx(
 								cellSx("empty"),
-								!!cell.date && !!onCellClick && { cursor: "pointer" },
-							]}
+								!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
+							)}
 							onClick={() => {
 								if (cell.date && onCellClick) {
 									onCellClick(cell.date);
@@ -51,10 +52,10 @@ export const ThemedHeatmap = ({ cells, containerSx, cellSx, onCellClick }: Props
 						placement="top"
 					>
 						<Box
-							sx={[
+							sx={mergeSx(
 								cellSx(cell.heatKind, cell.severity),
-								!!cell.date && !!onCellClick && { cursor: "pointer" },
-							]}
+								!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
+							)}
 							aria-label={cell.ariaLabel}
 							onClick={() => {
 								if (cell.date && onCellClick) {

client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx

@@ -5,6 +5,7 @@ import Stack from "@mui/material/Stack";
 import type { SxProps, Theme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import { formatMs } from "@/Utils/TimeUtils";
+import { mergeSx } from "@/Utils/mergeSx";
 import type {
 	BarKind,
 	ChartCell,
@@ -41,20 +42,20 @@ export const ThemedHistogram = ({
 	return (
 		<Stack gap={statsGap}>
 			<Box
-				sx={[
-					...(Array.isArray(containerSx) ? containerSx : [containerSx]),
-					{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
-				]}
+				sx={mergeSx(
+					containerSx,
+					{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` }
+				)}
 			>
 				{cells.map((cell) => {
 					if (cell.barKind === "empty") {
 						return (
 							<Box
 								key={cell.key}
-								sx={[
+								sx={mergeSx(
 									barSx("empty", cell.heightPct),
-									!!cell.date && !!onCellClick && { cursor: "pointer" },
-								]}
+									!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
+								)}
 								onClick={() => {
 									if (cell.date && onCellClick) {
 										onCellClick(cell.date);
@@ -71,10 +72,10 @@ export const ThemedHistogram = ({
 							placement="top"
 						>
 							<Box
-								sx={[
+								sx={mergeSx(
 									barSx(cell.barKind, cell.heightPct, cell.severity),
-									!!cell.date && !!onCellClick && { cursor: "pointer" },
-								]}
+									!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
+								)}
 								aria-label={cell.ariaLabel}
 								onClick={() => {
 									if (cell.date && onCellClick) {

client/src/Utils/mergeSx.ts

@@ -0,0 +1,6 @@
+import type { SxProps, Theme } from "@mui/material/styles";
+
+export const mergeSx = (...styles: Array<SxProps<Theme> | false | null | undefined>): SxProps<Theme> =>
+	styles
+		.flatMap((style) => (Array.isArray(style) ? style : [style]))
+		.filter(Boolean) as SxProps<Theme>;