Repository: provectus/kafka-ui
Issue: No warning message about in use saved filter in case of deleting it
Labels: type/enhancement
good first issue
scope/frontend
status/accepted


**Describe the bug**
Possible to delete the saved filter although it's in use

**Set up**

https://www.kafka-ui.provectus.io/


**Steps to Reproduce**

1. Navigate to Topics
2. Select the Topic
3. Turn to Messages
4. Use the saved filter
5. Try to delete the used filter

**Expected behavior**
Should be shown warning message to announce that filter is in use at the moment when user try to delete it


**Screenshots**

https://user-images.githubusercontent.com/104780608/180067061-f9c7ab40-b93d-4269-9265-a281cedd7c55.mov







Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/AddFilter.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/AddFilter.tsx
index e9ff5366cd8..510fcd03590 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/AddFilter.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/AddFilter.tsx
@@ -18,6 +18,7 @@ export interface FilterModalProps {
   activeFilterHandler(activeFilter: MessageFilters, index: number): void;
   toggleEditModal(): void;
   editFilter(value: FilterEdit): void;
+  activeFilter?: MessageFilters;
 }
 
 export interface AddMessageFilters extends MessageFilters {
@@ -32,6 +33,7 @@ const AddFilter: React.FC<FilterModalProps> = ({
   activeFilterHandler,
   toggleEditModal,
   editFilter,
+  activeFilter,
 }) => {
   const [savedFilterState, setSavedFilterState] =
     React.useState<boolean>(false);
@@ -80,6 +82,7 @@ const AddFilter: React.FC<FilterModalProps> = ({
             toggleEditModal();
             editFilter({ index, filter });
           }}
+          activeFilter={activeFilter}
         />
       ) : (
         <>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx
index dc8b8e6a334..18c4624e93d 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx
@@ -11,6 +11,7 @@ export interface FilterModalProps {
   deleteFilter(index: number): void;
   activeFilterHandler(activeFilter: MessageFilters, index: number): void;
   editSavedFilter(filter: FilterEdit): void;
+  activeFilter?: MessageFilters;
 }
 
 export interface FilterEdit {
@@ -25,6 +26,7 @@ const FilterModal: React.FC<FilterModalProps> = ({
   deleteFilter,
   activeFilterHandler,
   editSavedFilter,
+  activeFilter,
 }) => {
   const [addFilterModal, setAddFilterModal] = React.useState<boolean>(true);
   const toggleEditModal = () => {
@@ -49,6 +51,7 @@ const FilterModal: React.FC<FilterModalProps> = ({
           activeFilterHandler={activeFilterHandler}
           toggleEditModal={toggleEditModal}
           editFilter={editFilterHandler}
+          activeFilter={activeFilter}
         />
       ) : (
         <EditFilter
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
index 018a8ef1fff..957bc640279 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
@@ -498,6 +498,7 @@ const Filters: React.FC<FiltersProps> = ({
           deleteFilter={deleteFilter}
           activeFilterHandler={activeFilterHandler}
           editSavedFilter={editSavedFilter}
+          activeFilter={activeFilter}
         />
       )}
       <S.FiltersMetrics>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/SavedFilters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/SavedFilters.tsx
index 279ad24b3e5..26036ae9aea 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/SavedFilters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/SavedFilters.tsx
@@ -13,6 +13,7 @@ export interface Props {
   activeFilterHandler(activeFilter: MessageFilters, index: number): void;
   closeModal(): void;
   onGoBack(): void;
+  activeFilter?: MessageFilters;
 }
 
 const SavedFilters: FC<Props> = ({
@@ -22,11 +23,12 @@ const SavedFilters: FC<Props> = ({
   activeFilterHandler,
   closeModal,
   onGoBack,
+  activeFilter,
 }) => {
   const [selectedFilter, setSelectedFilter] = React.useState(-1);
   const confirm = useConfirm();
 
-  const activeFilter = () => {
+  const activateFilter = () => {
     if (selectedFilter > -1) {
       activeFilterHandler(filters[selectedFilter], selectedFilter);
     }
@@ -34,9 +36,23 @@ const SavedFilters: FC<Props> = ({
   };
 
   const deleteFilterHandler = (index: number) => {
-    confirm(<>Are you sure want to remove {filters[index]?.name}?</>, () => {
-      deleteFilter(index);
-    });
+    const filterName = filters[index]?.name;
+    const isFilterSelected = activeFilter && activeFilter.name === filterName;
+
+    confirm(
+      <>
+        <p>Are you sure want to remove {filterName}?</p>
+        {isFilterSelected && (
+          <>
+            <br />
+            <p>Warning: this filter is currently selected.</p>
+          </>
+        )}
+      </>,
+      () => {
+        deleteFilter(index);
+      }
+    );
   };
 
   return (
@@ -78,7 +94,7 @@ const SavedFilters: FC<Props> = ({
           buttonSize="M"
           buttonType="primary"
           type="button"
-          onClick={activeFilter}
+          onClick={activateFilter}
         >
           Select filter
         </Button>


Test patch: