feat: added blur event to having input in query section (#5684)

* feat: added blur event to having input in query section

* feat: added a error message for incomplete having clause and improved handleBlur

* feat: added focus event to remove error message

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx

@@ -1,3 +1,4 @@
+import { Color } from '@signozhq/design-tokens';
 import { Select } from 'antd';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 // ** Constants
@@ -34,6 +35,7 @@ export function HavingFilter({
 	const [currentFormValue, setCurrentFormValue] = useState<HavingForm>(
 		initialHavingValues,
 	);
+	const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
 	const { isMulti } = useTagValidation(
 		currentFormValue.op,
@@ -198,6 +200,29 @@ export function HavingFilter({
 		resetChanges();
 	};
 
+	const handleFocus = useCallback(() => {
+		setErrorMessage(null);
+	}, []);
+
+	const handleBlur = useCallback((): void => {
+		if (searchText) {
+			const { columnName, op, value } = getHavingObject(searchText);
+			const isCompleteHavingClause =
+				columnName && op && value.every((v) => v !== '');
+
+			if (isCompleteHavingClause && isValidHavingValue(searchText)) {
+				setLocalValues((prev) => {
+					const updatedValues = [...prev, searchText];
+					onChange(updatedValues.map(transformFromStringToHaving));
+					return updatedValues;
+				});
+				setSearchText('');
+			} else {
+				setErrorMessage('Invalid HAVING clause');
+			}
+		}
+	}, [searchText, onChange]);
+
 	useEffect(() => {
 		parseSearchText(searchText);
 	}, [searchText, parseSearchText]);
@@ -209,6 +234,7 @@ export function HavingFilter({
 	const isMetricsDataSource = query.dataSource === DataSource.METRICS;
 
 	return (
+		<>
 			<Select
 				getPopupContainer={popupContainer}
 				autoClearSearchValue={false}
@@ -225,6 +251,9 @@ export function HavingFilter({
 				onDeselect={handleDeselect}
 				onChange={handleChange}
 				onSelect={handleSelect}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				status={errorMessage ? 'error' : undefined}
 			>
 				{options.map((opt) => (
 					<Select.Option key={opt.value} value={opt.value} title="havingOption">
@@ -232,5 +261,9 @@ export function HavingFilter({
 					</Select.Option>
 				))}
 			</Select>
+			{errorMessage && (
+				<div style={{ color: Color.BG_CHERRY_500 }}>{errorMessage}</div>
+			)}
+		</>
 	);
 }