Add a warning upon deleting saved filter which is in use (#2484)

Co-authored-by: Mau Rodriguez Morales <mrodriguezmorales@provectus.com>

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}
         />
       ) : (
         <>

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

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>

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>