From bc5862646dc6d30d4c0d1741273d3c2df321daf9 Mon Sep 17 00:00:00 2001
From: Yevhen Shevchenko <90138953+yeshev@users.noreply.github.com>
Date: Tue, 30 May 2023 18:23:11 +0300
Subject: [PATCH] fix: where clause filter (#2800)

---
 .../QueryBuilder/filters/QueryBuilderSearch/index.tsx    | 8 ++++----
 frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts | 9 ++++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
index 950114c30f..5c4d340a45 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
@@ -44,7 +44,7 @@ function QueryBuilderSearch({
 		searchKey,
 	} = useAutoComplete(query);
 
-	const { keys } = useFetchKeysAndValues(searchValue, query, searchKey);
+	const { sourceKeys } = useFetchKeysAndValues(searchValue, query, searchKey);
 
 	const onTagRender = ({
 		value,
@@ -108,7 +108,7 @@ function QueryBuilderSearch({
 		const initialTagFilters: TagFilter = { items: [], op: 'AND' };
 		initialTagFilters.items = tags.map((tag) => {
 			const { tagKey, tagOperator, tagValue } = getTagToken(tag);
-			const filterAttribute = (keys || []).find(
+			const filterAttribute = sourceKeys.find(
 				(key) => key.key === getRemovePrefixFromKey(tagKey),
 			);
 			return {
@@ -127,8 +127,8 @@ function QueryBuilderSearch({
 			};
 		});
 		onChange(initialTagFilters);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [keys, tags]);
+		/* eslint-disable react-hooks/exhaustive-deps */
+	}, [sourceKeys, tags]);
 
 	return (
 		<Select
diff --git a/frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts b/frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts
index 245f80506f..e14979b561 100644
--- a/frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts
+++ b/frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts
@@ -6,6 +6,7 @@ import {
 	getTagToken,
 	isInNInOperator,
 } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { isEqual, uniqWith } from 'lodash-es';
 import debounce from 'lodash-es/debounce';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery } from 'react-query';
@@ -18,6 +19,7 @@ type IuseFetchKeysAndValues = {
 	keys: BaseAutocompleteData[];
 	results: string[];
 	isFetching: boolean;
+	sourceKeys: BaseAutocompleteData[];
 };
 
 /**
@@ -33,6 +35,7 @@ export const useFetchKeysAndValues = (
 	searchKey: string,
 ): IuseFetchKeysAndValues => {
 	const [keys, setKeys] = useState<BaseAutocompleteData[]>([]);
+	const [sourceKeys, setSourceKeys] = useState<BaseAutocompleteData[]>([]);
 	const [results, setResults] = useState<string[]>([]);
 
 	const searchParams = useMemo(
@@ -138,7 +141,10 @@ export const useFetchKeysAndValues = (
 	// update the fetched keys when the fetch status changes
 	useEffect(() => {
 		if (status === 'success' && data?.payload?.attributeKeys) {
-			setKeys(data?.payload.attributeKeys);
+			setKeys(data.payload.attributeKeys);
+			setSourceKeys((prevState) =>
+				uniqWith([...(data.payload.attributeKeys ?? []), ...prevState], isEqual),
+			);
 		} else {
 			setKeys([]);
 		}
@@ -148,5 +154,6 @@ export const useFetchKeysAndValues = (
 		keys,
 		results,
 		isFetching,
+		sourceKeys,
 	};
 };