Merge pull request #2600 from career-yashaswee/feat/2598-search-timezone-ux

Feat/2598 Search Timezone UX Addition

client/src/Components/Inputs/Search/index.jsx

@@ -24,6 +24,7 @@ import { useTranslation } from "react-i18next";
  * @param {Function} props.handleChange - Function to call when the input changes
  * @param {Function} Prop.onBlur - Function to call when the input is blured
  * @param {Object} props.sx - Additional styles to apply to the component
+ * @param {string} props.unit - Label to identify type of options
  * @returns {JSX.Element} The rendered Search component
  */
 
@@ -68,6 +69,7 @@ const Search = ({
 	startAdornment,
 	endAdornment,
 	onBlur,
+	unit = "option",
 }) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
@@ -186,7 +188,12 @@ const Search = ({
 				);
 
 				if (filtered.length === 0) {
-					return [{ [filteredBy]: "No monitors found", noOptions: true }];
+					return [
+						{
+							[filteredBy]: t("general.noOptionsFound", { unit: unit }),
+							noOptions: true,
+						},
+					];
 				}
 				return filtered;
 			}}
@@ -281,7 +288,7 @@ Search.propTypes = {
 	options: PropTypes.array.isRequired,
 	filteredBy: PropTypes.string.isRequired,
 	secondaryLabel: PropTypes.string,
-	value: PropTypes.array,
+	value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 	inputValue: PropTypes.string.isRequired,
 	handleInputChange: PropTypes.func.isRequired,
 	handleChange: PropTypes.func,
@@ -292,6 +299,7 @@ Search.propTypes = {
 	startAdornment: PropTypes.object,
 	endAdornment: PropTypes.object,
 	onBlur: PropTypes.func,
+	unit: PropTypes.string,
 };
 
 export default Search;

client/src/Pages/Settings/SettingsTimeZone.jsx

@@ -2,16 +2,37 @@ import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import ConfigBox from "../../Components/ConfigBox";
-import Select from "../../Components/Inputs/Select";
+import Search from "../../Components/Inputs/Search";
 import timezones from "../../Utils/timezones.json";
 
 // Utils
 import { useTheme } from "@emotion/react";
 import { PropTypes } from "prop-types";
 import { useTranslation } from "react-i18next";
+import { useCallback, useMemo, useState } from "react";
 const SettingsTimeZone = ({ HEADING_SX, handleChange, timezone }) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
+	const [rawInput, setRawInput] = useState("");
+
+	const selectedTimezone = useMemo(
+		() => timezones.find((tz) => tz._id === timezone) ?? null,
+		[timezone]
+	);
+
+	const handleTimezoneChange = useCallback(
+		(newValue) => {
+			setRawInput("");
+			handleChange({
+				target: {
+					name: "timezone",
+					value: newValue?._id ?? "",
+				},
+			});
+		},
+		[handleChange]
+	);
+
 	return (
 		<ConfigBox>
 			<Box>
@@ -28,12 +49,17 @@ const SettingsTimeZone = ({ HEADING_SX, handleChange, timezone }) => {
 				</Typography>
 			</Box>
 			<Stack gap={theme.spacing(20)}>
-				<Select
-					label={t("settingsPage.timezoneSettings.label")}
-					name="timezone"
-					value={timezone}
-					onChange={handleChange}
-					items={timezones}
+				<Search
+					id="timezone"
+					label={t("settingsDisplayTimezone")}
+					options={timezones}
+					filteredBy="name"
+					value={selectedTimezone}
+					inputValue={rawInput}
+					handleInputChange={(val) => setRawInput(val)}
+					handleChange={handleTimezoneChange}
+					isAdorned={false}
+					unit="timezone"
 				/>
 			</Stack>
 		</ConfigBox>

client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx

@@ -4,7 +4,7 @@ import { TabPanel } from "@mui/lab";
 import ConfigBox from "../../../../../Components/ConfigBox";
 import Checkbox from "../../../../../Components/Inputs/Checkbox";
 import TextInput from "../../../../../Components/Inputs/TextInput";
-import Select from "../../../../../Components/Inputs/Select";
+import Search from "../../../../../Components/Inputs/Search";
 import ImageUpload from "../../../../../Components/Inputs/ImageUpload";
 import ColorPicker from "../../../../../Components/Inputs/ColorPicker";
 import Progress from "../Progress";
@@ -14,6 +14,7 @@ import { useTheme } from "@emotion/react";
 import timezones from "../../../../../Utils/timezones.json";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
+import { useMemo, useState, useCallback } from "react";
 
 const TabSettings = ({
 	isCreate,
@@ -28,6 +29,25 @@ const TabSettings = ({
 	// Utils
 	const theme = useTheme();
 	const { t } = useTranslation();
+	const [rawInput, setRawInput] = useState("");
+
+	const selectedTimezone = useMemo(
+		() => timezones.find((tz) => tz._id === form.timezone) ?? null,
+		[form.timezone]
+	);
+
+	const handleTimezoneChange = useCallback(
+		(newValue) => {
+			setRawInput("");
+			handleFormChange({
+				target: {
+					name: "timezone",
+					value: newValue?._id ?? "",
+				},
+			});
+		},
+		[handleFormChange]
+	);
 
 	return (
 		<TabPanel value={tabValue}>
@@ -101,13 +121,17 @@ const TabSettings = ({
 						</Typography>
 					</Stack>
 					<Stack gap={theme.spacing(6)}>
-						<Select
+						<Search
 							id="timezone"
-							name="timezone"
 							label={t("settingsDisplayTimezone")}
-							items={timezones}
-							value={form.timezone}
-							onChange={handleFormChange}
+							options={timezones}
+							filteredBy="name"
+							value={selectedTimezone}
+							inputValue={rawInput}
+							handleInputChange={(newVal) => setRawInput(newVal)}
+							handleChange={handleTimezoneChange}
+							isAdorned={false}
+							unit="timezone"
 						/>
 					</Stack>
 				</ConfigBox>

client/src/locales/en.json

@@ -229,6 +229,9 @@
 			"unknownError": "Unknown error"
 		}
 	},
+	"general": {
+		"noOptionsFound": "No {{unit}} found"
+	},
 	"commonSave": "Save",
 	"commonSaving": "Saving...",
 	"companyName": "Company name",