From d9b379ae51e61f234b03913015b7a602bd0b3c2a Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Tue, 12 Mar 2024 14:34:10 +0530
Subject: [PATCH] refactor: onblur convert to tag (#4662)

* refactor: onblur convert to tag

* refactor: on blur log body contains

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
---
 .../filters/QueryBuilderSearch/index.tsx      |  2 ++
 .../src/hooks/queryBuilder/useAutoComplete.ts | 22 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
index 46d535737a..85c7ea2c64 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
@@ -59,6 +59,7 @@ function QueryBuilderSearch({
 		updateTag,
 		handleClearTag,
 		handleKeyDown,
+		handleOnBlur,
 		handleSearch,
 		handleSelect,
 		tags,
@@ -260,6 +261,7 @@ function QueryBuilderSearch({
 				notFoundContent={isFetching ? <Spin size="small" /> : null}
 				suffixIcon={suffixIcon}
 				showAction={['focus']}
+				onBlur={handleOnBlur}
 			>
 				{options.map((option) => (
 					<Select.Option key={option.label} value={option.value}>
diff --git a/frontend/src/hooks/queryBuilder/useAutoComplete.ts b/frontend/src/hooks/queryBuilder/useAutoComplete.ts
index dad262757a..6ac51eb45d 100644
--- a/frontend/src/hooks/queryBuilder/useAutoComplete.ts
+++ b/frontend/src/hooks/queryBuilder/useAutoComplete.ts
@@ -1,3 +1,4 @@
+import { OPERATORS } from 'constants/queryBuilder';
 import {
 	getRemovePrefixFromKey,
 	getTagToken,
@@ -10,7 +11,7 @@ import { KeyboardEvent, useCallback, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import { useFetchKeysAndValues } from './useFetchKeysAndValues';
-import { useOptions } from './useOptions';
+import { useOptions, WHERE_CLAUSE_CUSTOM_SUFFIX } from './useOptions';
 import { useSetCurrentKeyAndOperator } from './useSetCurrentKeyAndOperator';
 import { useTag } from './useTag';
 import { useTagValidation } from './useTagValidation';
@@ -98,6 +99,23 @@ export const useAutoComplete = (
 		[handleAddTag, handleClearTag, isMulti, isValidTag, searchValue, tags],
 	);
 
+	const handleOnBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
+		event.preventDefault();
+		if (searchValue) {
+			if (
+				key &&
+				!operator &&
+				whereClauseConfig?.customKey === 'body' &&
+				whereClauseConfig.customOp === OPERATORS.CONTAINS
+			) {
+				const value = `${searchValue}${WHERE_CLAUSE_CUSTOM_SUFFIX}`;
+				handleAddTag(value);
+				return;
+			}
+			handleAddTag(searchValue);
+		}
+	};
+
 	const options = useOptions(
 		key,
 		keys,
@@ -117,6 +135,7 @@ export const useAutoComplete = (
 		handleClearTag,
 		handleSelect,
 		handleKeyDown,
+		handleOnBlur,
 		options,
 		tags,
 		searchValue,
@@ -133,6 +152,7 @@ interface IAutoComplete {
 	handleClearTag: (value: string) => void;
 	handleSelect: (value: string) => void;
 	handleKeyDown: (event: React.KeyboardEvent) => void;
+	handleOnBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
 	options: Option[];
 	tags: string[];
 	searchValue: string;