Merge pull request #1865 from Owaiseimdad/FIX-1847-Incident-Page-Style-Issues

Fix 1847 incident page style issues

src/Pages/Incidents/Components/OptionsHeader/index.jsx

@@ -20,6 +20,13 @@ const OptionsHeader = ({
 	const theme = useTheme();
 	const monitorNames = typeof monitors !== "undefined" ? Object.values(monitors) : [];
 
+	// The stacks below which are three in number have the same style so
+	const stackStyles = {
+		direction: "row",
+		alignItems: "center",
+		gap: theme.spacing(6),
+	};
+
 	if (!shouldRender) return <SkeletonLayout />;
 
 	return (
@@ -27,17 +34,13 @@ const OptionsHeader = ({
 			direction="row"
 			justifyContent="space-between"
 		>
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={theme.spacing(6)}
-			>
+			<Stack {...stackStyles}>
 				<Typography
 					display="inline-block"
 					component="h1"
 					color={theme.palette.primary.contrastTextSecondary}
 				>
-					Incidents for
+					Incidents for:
 				</Typography>
 				<Select
 					id="incidents-select-monitor"
@@ -49,13 +52,10 @@ const OptionsHeader = ({
 						backgroundColor: theme.palette.primary.main,
 						color: theme.palette.primary.contrastTextSecondary,
 					}}
+					truncate={true}
 				/>
 			</Stack>
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={theme.spacing(6)}
-			>
+			<Stack {...stackStyles}>
 				<Typography
 					display="inline-block"
 					component="h1"
@@ -63,14 +63,7 @@ const OptionsHeader = ({
 				>
 					Filter by:
 				</Typography>
-				<ButtonGroup
-					sx={{
-						ml: "auto",
-						"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
-							borderColor: theme.palette.primary.lowContrast,
-						},
-					}}
-				>
+				<ButtonGroup>
 					<Button
 						variant="group"
 						filled={(filter === "all").toString()}
@@ -94,11 +87,7 @@ const OptionsHeader = ({
 					</Button>
 				</ButtonGroup>
 			</Stack>
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={theme.spacing(6)}
-			>
+			<Stack {...stackStyles}>
 				<Typography
 					display="inline-block"
 					component="h1"
@@ -106,14 +95,7 @@ const OptionsHeader = ({
 				>
 					Show:
 				</Typography>
-				<ButtonGroup
-					sx={{
-						ml: "auto",
-						"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
-							borderColor: theme.palette.primary.lowContrast,
-						},
-					}}
-				>
+				<ButtonGroup>
 					<Button
 						variant="group"
 						filled={(dateRange === "hour").toString()}

src/Utils/Theme/globalTheme.js

@@ -382,6 +382,18 @@ const baseTheme = (palette) => ({
 				}),
 			},
 		},
+		MuiButtonGroup: {
+			styleOverrides: {
+				root: ({ theme }) => ({
+					ml: "auto",
+					"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
+						borderColor: theme.palette.primary.lowContrast,
+						width: "auto",
+						whiteSpace: "nowrap",
+					},
+				}),
+			},
+		},
 	},
 	shape: {
 		borderRadius: 2,

src/Utils/stringUtils.js

@@ -3,8 +3,8 @@
  * @param {string} str String whose first letter is to be capitalized
  * @returns A string with first letter capitalized
  */
-export const capitalizeFirstLetter = (str) => {	
-  if (str === null || str === undefined) {
+export const capitalizeFirstLetter = (str) => {
+	if (str === null || str === undefined) {
 		return "";
 	}
 	if (typeof str !== "string") {
@@ -12,7 +12,7 @@ export const capitalizeFirstLetter = (str) => {
 	}
 	if (str.length === 0) {
 		return "";
-	}  
+	}
 	return str.charAt(0).toUpperCase() + str.slice(1);
 };
 
@@ -22,15 +22,25 @@ export const capitalizeFirstLetter = (str) => {
  * @returns A string with first letter lower cased
  */
 
-export const toLowerCaseFirstLetter = (str) => {	
+export const toLowerCaseFirstLetter = (str) => {
 	if (str === null || str === undefined) {
-		  return "";
-	  }
-	  if (typeof str !== "string") {
-		  throw new TypeError("Input must be a string");
-	  }
-	  if (str.length === 0) {
-		  return "";
-	  }  
-	  return str.charAt(0).toLowerCase() + str.slice(1);
-  };
+		return "";
+	}
+	if (typeof str !== "string") {
+		throw new TypeError("Input must be a string");
+	}
+	if (str.length === 0) {
+		return "";
+	}
+	return str.charAt(0).toLowerCase() + str.slice(1);
+};
+
+/**
+ * Checks if a string is null, undefined, or empty (including strings with only whitespace).
+ * @param {string} str - The string to check.
+ * @returns {boolean} - Returns true if the string is null, undefined, or empty.
+ */
+export const isEmpty = (str) => {
+	// Check if string is null, undefined, or empty (including whitespace only)
+	return str === null || typeof str === "undefined" || str.trim().length === 0;
+};