From 2e4f0cfc33307be787b9caa77f29a1c7dab693c7 Mon Sep 17 00:00:00 2001
From: Chintan Sudani <46838508+techchintan@users.noreply.github.com>
Date: Thu, 20 Apr 2023 02:18:06 +0530
Subject: [PATCH] fix: edit tag chip for WHERE clause updated logic (#2590)

* feat: edit search filter tag for query builder

* fix: edit tag updated logic

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 .../filters/QueryBuilderSearch/index.tsx             | 12 +++++++++++-
 .../QueryBuilder/filters/QueryBuilderSearch/style.ts |  1 +
 frontend/src/hooks/queryBuilder/useAutoComplete.ts   |  4 +++-
 frontend/src/hooks/queryBuilder/useTag.ts            |  8 +++++++-
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
index 61c2b31930..56f7efe942 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
@@ -16,6 +16,7 @@ function QueryBuilderSearch({
 	onChange,
 }: QueryBuilderSearchProps): JSX.Element {
 	const {
+		updateTag,
 		handleClearTag,
 		handleKeyDown,
 		handleSearch,
@@ -39,10 +40,19 @@ function QueryBuilderSearch({
 			handleSearch('');
 		};
 
+		const tagEditHandler = (value: string): void => {
+			updateTag(value);
+			handleSearch(value);
+		};
+
 		return (
 			<Tag closable={closable} onClose={onCloseHandler}>
 				<Tooltip title={value}>
-					<TypographyText ellipsis $isInNin={isInNin}>
+					<TypographyText
+						ellipsis
+						$isInNin={isInNin}
+						onClick={(): void => tagEditHandler(value)}
+					>
 						{value}
 					</TypographyText>
 				</Tooltip>
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts
index 5969c0f1a7..de72e4bf82 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 export const TypographyText = styled(Typography.Text)<{ $isInNin: boolean }>`
 	width: ${({ $isInNin }): string => ($isInNin ? '10rem' : 'auto')};
+	cursor: pointer;
 `;
 
 export const StyledCheckOutlined = styled(CheckOutlined)`
diff --git a/frontend/src/hooks/queryBuilder/useAutoComplete.ts b/frontend/src/hooks/queryBuilder/useAutoComplete.ts
index 5782029349..4c48106918 100644
--- a/frontend/src/hooks/queryBuilder/useAutoComplete.ts
+++ b/frontend/src/hooks/queryBuilder/useAutoComplete.ts
@@ -11,6 +11,7 @@ import { useTag } from './useTag';
 import { useTagValidation } from './useTagValidation';
 
 interface IAutoComplete {
+	updateTag: (value: string) => void;
 	handleSearch: (value: string) => void;
 	handleClearTag: (value: string) => void;
 	handleSelect: (value: string) => void;
@@ -42,7 +43,7 @@ export const useAutoComplete = (query: IBuilderQueryForm): IAutoComplete => {
 		isFreeText,
 	} = useTagValidation(searchValue, operator, result);
 
-	const { handleAddTag, handleClearTag, tags } = useTag(
+	const { handleAddTag, handleClearTag, tags, updateTag } = useTag(
 		key,
 		isValidTag,
 		isFreeText,
@@ -118,6 +119,7 @@ export const useAutoComplete = (query: IBuilderQueryForm): IAutoComplete => {
 	);
 
 	return {
+		updateTag,
 		handleSearch,
 		handleClearTag,
 		handleSelect,
diff --git a/frontend/src/hooks/queryBuilder/useTag.ts b/frontend/src/hooks/queryBuilder/useTag.ts
index 38aef6fde8..edd6c036ab 100644
--- a/frontend/src/hooks/queryBuilder/useTag.ts
+++ b/frontend/src/hooks/queryBuilder/useTag.ts
@@ -5,6 +5,7 @@ type IUseTag = {
 	handleAddTag: (value: string) => void;
 	handleClearTag: (value: string) => void;
 	tags: string[];
+	updateTag: (value: string) => void;
 };
 
 /**
@@ -23,6 +24,11 @@ export const useTag = (
 ): IUseTag => {
 	const [tags, setTags] = useState<string[]>([]);
 
+	const updateTag = (value: string): void => {
+		const newTags = tags?.filter((item: string) => item !== value);
+		setTags(newTags);
+	};
+
 	/**
 	 * Adds a new tag to the tag list.
 	 * @param {string} value - The tag value to be added.
@@ -49,5 +55,5 @@ export const useTag = (
 		setTags((prevTags) => prevTags.filter((v) => v !== value));
 	}, []);
 
-	return { handleAddTag, handleClearTag, tags };
+	return { handleAddTag, handleClearTag, tags, updateTag };
 };