Repository: provectus/kafka-ui
Issue: System redirects to Custom filters in case of editing the saved filter
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed


**Describe the bug**
In case of editing the saved filter, the system redirects to Custom filters instead of staying in Saved filters

**Set up**
https://www.kafka-ui.provectus.io/

**Steps to Reproduce**

1. Navigate to Topics
2. Open the Topic
3. Turn to Messages
4. Press "Add Filters"
5. Turn to Saved filters
6. Edit the existing filter
7. Press "Cancel" or "Save"

**Expected behavior**
System should stay within Saved Filters instead of turning to custom filters

**Screenshots**

https://user-images.githubusercontent.com/104780608/179903116-cc242f10-e520-4645-8c96-2777ab73b062.mov






Issue comments:
Actual on master: with editing the saved filter, system redirects to custom filters instead of keeping saved filters.
Works as expected !

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 510fcd03590..0ff1fd1d896 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,8 @@ export interface FilterModalProps {
   activeFilterHandler(activeFilter: MessageFilters, index: number): void;
   toggleEditModal(): void;
   editFilter(value: FilterEdit): void;
+  isSavedFiltersOpen: boolean;
+  onClickSavedFilters(newValue: boolean): void;
   activeFilter?: MessageFilters;
 }
 
@@ -33,10 +35,10 @@ const AddFilter: React.FC<FilterModalProps> = ({
   activeFilterHandler,
   toggleEditModal,
   editFilter,
+  isSavedFiltersOpen,
+  onClickSavedFilters,
   activeFilter,
 }) => {
-  const [savedFilterState, setSavedFilterState] =
-    React.useState<boolean>(false);
   const { isOpen, toggle } = useModal();
 
   const onSubmit = React.useCallback(
@@ -71,12 +73,12 @@ const AddFilter: React.FC<FilterModalProps> = ({
           {isOpen && <InfoModal toggleIsOpen={toggle} />}
         </div>
       </S.FilterTitle>
-      {savedFilterState ? (
+      {isSavedFiltersOpen ? (
         <SavedFilters
           deleteFilter={deleteFilter}
           activeFilterHandler={activeFilterHandler}
           closeModal={toggleIsOpen}
-          onGoBack={() => setSavedFilterState(false)}
+          onGoBack={() => onClickSavedFilters(!onClickSavedFilters)}
           filters={filters}
           onEdit={(index: number, filter: MessageFilters) => {
             toggleEditModal();
@@ -87,7 +89,7 @@ const AddFilter: React.FC<FilterModalProps> = ({
       ) : (
         <>
           <S.SavedFiltersTextContainer
-            onClick={() => setSavedFilterState(true)}
+            onClick={() => onClickSavedFilters(!isSavedFiltersOpen)}
           >
             <SavedIcon /> <S.SavedFiltersText>Saved Filters</S.SavedFiltersText>
           </S.SavedFiltersTextContainer>
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 18c4624e93d..88e5adbcae6 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
@@ -29,9 +29,13 @@ const FilterModal: React.FC<FilterModalProps> = ({
   activeFilter,
 }) => {
   const [addFilterModal, setAddFilterModal] = React.useState<boolean>(true);
+  const [isSavedFiltersOpen, setIsSavedFiltersOpen] =
+    React.useState<boolean>(false);
+
   const toggleEditModal = () => {
     setAddFilterModal(!addFilterModal);
   };
+
   const [editFilter, setEditFilter] = React.useState<FilterEdit>({
     index: -1,
     filter: { name: '', code: '' },
@@ -40,6 +44,7 @@ const FilterModal: React.FC<FilterModalProps> = ({
     setEditFilter(value);
     setAddFilterModal(!addFilterModal);
   };
+
   return (
     <S.MessageFilterModal data-testid="messageFilterModal">
       {addFilterModal ? (
@@ -51,6 +56,8 @@ const FilterModal: React.FC<FilterModalProps> = ({
           activeFilterHandler={activeFilterHandler}
           toggleEditModal={toggleEditModal}
           editFilter={editFilterHandler}
+          isSavedFiltersOpen={isSavedFiltersOpen}
+          onClickSavedFilters={() => setIsSavedFiltersOpen(!isSavedFiltersOpen)}
           activeFilter={activeFilter}
         />
       ) : (
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/AddFilter.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/AddFilter.spec.tsx
index f9c8fe3f1e1..0c12fd33436 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/AddFilter.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/AddFilter.spec.tsx
@@ -22,8 +22,10 @@ const renderComponent = (props: Partial<FilterModalProps> = {}) =>
       deleteFilter={jest.fn()}
       activeFilterHandler={jest.fn()}
       toggleEditModal={jest.fn()}
+      onClickSavedFilters={jest.fn()}
       editFilter={editFilterMock}
       filters={props.filters || filters}
+      isSavedFiltersOpen={false}
       {...props}
     />
   );
@@ -38,8 +40,8 @@ describe('AddFilter component', () => {
 
     it('should test click on Saved Filters redirects to Saved components', () => {
       userEvent.click(screen.getByRole('savedFilterText'));
-      expect(screen.getByText('Saved filters')).toBeInTheDocument();
-      expect(screen.getAllByRole('savedFilter')).toHaveLength(2);
+      expect(screen.getByText('Saved Filters')).toBeInTheDocument();
+      expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
     });
 
     it('info button to be in the document', () => {
@@ -54,16 +56,9 @@ describe('AddFilter component', () => {
       ).toBeInTheDocument();
     });
 
-    it('should test click on return to custom filter redirects to Add filters', async () => {
+    it('should test click on return to custom filter redirects to Saved Filters', async () => {
       userEvent.click(screen.getByRole('savedFilterText'));
 
-      expect(screen.getByText('Saved filters')).toBeInTheDocument();
-      expect(screen.queryByRole('savedFilterText')).not.toBeInTheDocument();
-      expect(screen.getAllByRole('savedFilter')).toHaveLength(2);
-
-      await act(() =>
-        userEvent.click(screen.getByText(/back to custom filters/i))
-      );
       expect(screen.queryByText('Saved filters')).not.toBeInTheDocument();
       expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
     });
@@ -112,6 +107,9 @@ describe('AddFilter component', () => {
     });
 
     it('calls editFilter when edit button is clicked in saved filters', async () => {
+      await act(() => {
+        renderComponent({ isSavedFiltersOpen: true });
+      });
       userEvent.click(screen.getByText('Saved Filters'));
       const index = 0;
       const editButton = screen.getAllByText('Edit')[index];


Test patch: