FE: Bugfix: Cannot reuse filter display name (#321)

Co-authored-by: Leshe4ka <[email protected]>

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 />