From c0e40614bff9e0bedb32db8067de70fc6343af55 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Mon, 21 Oct 2024 11:42:20 +0530
Subject: [PATCH] fix: issues with the logs where clause filter (#6198)

* fix: flicker in logs explorer page

* fix: added inline code comments

* fix: edit rules css should be scoped inside the container

* fix: add explicit space after adding key and operators to help users type and create the tag

* fix: do not wait for api to complete for the user to enter the query

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
---
 .../QueryBuilderSearchDropdown.tsx            |  2 ++
 .../QueryBuilderSearchV2.tsx                  | 20 ++++++----------
 .../src/pages/EditRules/EditRules.styles.scss | 23 +++++++++----------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchDropdown.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchDropdown.tsx
index c910ca1be4..2e9f8341e3 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchDropdown.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchDropdown.tsx
@@ -1,4 +1,6 @@
 /* eslint-disable no-nested-ternary */
+import './QueryBuilderSearchV2.styles.scss';
+
 import { Typography } from 'antd';
 import {
 	ArrowDown,
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
index d07ba7169c..b3d2b2537a 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
@@ -319,7 +319,7 @@ function QueryBuilderSearchV2(
 						value: '',
 					}));
 					setCurrentState(DropdownState.OPERATOR);
-					setSearchValue((parsedValue as BaseAutocompleteData)?.key);
+					setSearchValue(`${(parsedValue as BaseAutocompleteData)?.key} `);
 				}
 			} else if (currentState === DropdownState.OPERATOR) {
 				if (isEmpty(value) && currentFilterItem?.key?.key) {
@@ -360,7 +360,7 @@ function QueryBuilderSearchV2(
 						value: '',
 					}));
 					setCurrentState(DropdownState.ATTRIBUTE_VALUE);
-					setSearchValue(`${currentFilterItem?.key?.key} ${value}`);
+					setSearchValue(`${currentFilterItem?.key?.key} ${value} `);
 				}
 			} else if (currentState === DropdownState.ATTRIBUTE_VALUE) {
 				const operatorType =
@@ -512,11 +512,6 @@ function QueryBuilderSearchV2(
 
 	// this useEffect takes care of tokenisation based on the search state
 	useEffect(() => {
-		// if we are still fetching the suggestions then return as we won't know the type / data-type etc for the attribute key
-		if (isFetchingSuggestions) {
-			return;
-		}
-
 		// if there is no search value reset to the default state
 		if (!searchValue) {
 			setCurrentFilterItem(undefined);
@@ -766,6 +761,7 @@ function QueryBuilderSearchV2(
 		suggestionsData?.payload?.attributes,
 	]);
 
+	// keep the query in sync with the selected tags in logs explorer page
 	useEffect(() => {
 		const filterTags: IBuilderQuery['filters'] = {
 			op: 'AND',
@@ -788,16 +784,14 @@ function QueryBuilderSearchV2(
 
 		if (!isEqual(query.filters, filterTags)) {
 			onChange(filterTags);
-			setTags(
-				filterTags.items.map((tag) => ({
-					...tag,
-					op: getOperatorFromValue(tag.op),
-				})) as ITag[],
-			);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [tags]);
 
+	// keep the use effects pure!
+	// if the tags lacks the ID then the above use effect will add it to query
+	// and then the below use effect will take care of adding it to the tags.
+	// keep the tags in sycn with current query.
 	useEffect(() => {
 		// convert the query and tags to same format before comparison
 		if (!isEqual(getInitTags(query), tags)) {
diff --git a/frontend/src/pages/EditRules/EditRules.styles.scss b/frontend/src/pages/EditRules/EditRules.styles.scss
index a01a6e7ab7..c760d8bb42 100644
--- a/frontend/src/pages/EditRules/EditRules.styles.scss
+++ b/frontend/src/pages/EditRules/EditRules.styles.scss
@@ -11,20 +11,19 @@
 .edit-rules-card {
 	width: 20rem;
 	padding: 1rem;
-}
 
-.content {
-	font-style: normal;
-	font-weight: 300;
-	font-size: 18px;
-	line-height: 20px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	margin: 0;
+	.content {
+		font-style: normal;
+		font-weight: 300;
+		font-size: 18px;
+		line-height: 20px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		margin: 0;
+	}
 }
-
 .btn-container {
 	display: flex;
 	justify-content: center;