From 6e3141a4ce28ffb5d4e2c763f2dad9aa3935e546 Mon Sep 17 00:00:00 2001
From: rahulkeswani101 <rahul@signoz.io>
Date: Thu, 26 Sep 2024 16:12:49 +0530
Subject: [PATCH] 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>
---
 .../filters/HavingFilter/HavingFilter.tsx     | 79 +++++++++++++------
 1 file changed, 56 insertions(+), 23 deletions(-)

diff --git a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
index 7d11d018cc..3eab3e50ee 100644
--- a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
+++ b/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,28 +234,36 @@ export function HavingFilter({
 	const isMetricsDataSource = query.dataSource === DataSource.METRICS;
 
 	return (
-		<Select
-			getPopupContainer={popupContainer}
-			autoClearSearchValue={false}
-			mode="multiple"
-			onSearch={handleSearch}
-			searchValue={searchText}
-			tagRender={tagRender}
-			value={localValues}
-			data-testid="havingSelect"
-			disabled={isMetricsDataSource && !query.aggregateAttribute.key}
-			style={{ width: '100%' }}
-			notFoundContent={currentFormValue.value.length === 0 ? undefined : null}
-			placeholder="GroupBy(operation) > 5"
-			onDeselect={handleDeselect}
-			onChange={handleChange}
-			onSelect={handleSelect}
-		>
-			{options.map((opt) => (
-				<Select.Option key={opt.value} value={opt.value} title="havingOption">
-					{opt.label}
-				</Select.Option>
-			))}
-		</Select>
+		<>
+			<Select
+				getPopupContainer={popupContainer}
+				autoClearSearchValue={false}
+				mode="multiple"
+				onSearch={handleSearch}
+				searchValue={searchText}
+				tagRender={tagRender}
+				value={localValues}
+				data-testid="havingSelect"
+				disabled={isMetricsDataSource && !query.aggregateAttribute.key}
+				style={{ width: '100%' }}
+				notFoundContent={currentFormValue.value.length === 0 ? undefined : null}
+				placeholder="GroupBy(operation) > 5"
+				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">
+						{opt.label}
+					</Select.Option>
+				))}
+			</Select>
+			{errorMessage && (
+				<div style={{ color: Color.BG_CHERRY_500 }}>{errorMessage}</div>
+			)}
+		</>
 	);
 }