From 0ca69fb142013c1ec73033af15de47e040f218a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mau=20Rodr=C3=ADguez=20Morales?=
 <3047213+yvaeltercero@users.noreply.github.com>
Date: Thu, 1 Sep 2022 03:43:46 -0600
Subject: [PATCH] Add a warning upon deleting saved filter which is in use
 (#2484)

Co-authored-by: Mau Rodriguez Morales <mrodriguezmorales@provectus.com>
---
 .../Topic/Messages/Filters/AddFilter.tsx      |  3 +++
 .../Topic/Messages/Filters/FilterModal.tsx    |  3 +++
 .../Topics/Topic/Messages/Filters/Filters.tsx |  1 +
 .../Topic/Messages/Filters/SavedFilters.tsx   | 26 +++++++++++++++----
 4 files changed, 28 insertions(+), 5 deletions(-)

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 e9ff5366cd..510fcd0359 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 dc8b8e6a33..18c4624e93 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 018a8ef1ff..957bc64027 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 279ad24b3e..26036ae9ae 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>