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>

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>

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)`

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,

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 };
 };