From 79553e401729cd6c03daa2d61d81b7172faf3494 Mon Sep 17 00:00:00 2001
From: Aleksei Koziurov <kozyurov.alexey@gmail.com>
Date: Sat, 27 Apr 2024 00:00:06 +0500
Subject: [PATCH] FE: Bugfix: Cannot reuse filter display name (#321)

Co-authored-by: Leshe4ka <kozyurov.alexey@google.com>
---
 .../components/Topics/Topic/Messages/Filters/Filters.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx
index b8fc307ed..285a4d955 100644
--- a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx
@@ -17,6 +17,7 @@ import { useTopicDetails } from 'lib/hooks/api/topics';
 import EditIcon from 'components/common/Icons/EditIcon';
 import CloseIcon from 'components/common/Icons/CloseIcon';
 import FlexBox from 'components/common/FlexBox/FlexBox';
+import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
 
 import * as S from './Filters.styled';
 import {
@@ -66,6 +67,7 @@ const Filters: React.FC<FiltersProps> = ({
 
   const { data: topic } = useTopicDetails({ clusterName, topicName });
   const [createdEditedSmartId, setCreatedEditedSmartId] = useState<string>();
+  const remove = useMessageFiltersStore((state) => state.remove);
 
   const partitions = useMemo(() => {
     return (topic?.partitions || []).reduce<{
@@ -209,7 +211,10 @@ const Filters: React.FC<FiltersProps> = ({
               <EditIcon />
             </S.EditSmartFilterIcon>
             <S.DeleteSmartFilterIcon
-              onClick={() => setSmartFilter(null)}
+              onClick={() => {
+                setSmartFilter(null);
+                remove(smartFilter.id);
+              }}
               disabled={!!createdEditedSmartId}
             >
               <CloseIcon />