Issue 2304: applying fix for saved filters cancel navigation issue (#2482)

* Issue 2304: applying fix for saved filters cancel navigation issue

* Addressing unit test warnings

Co-authored-by: Mau Rodriguez Morales <mrodriguezmorales@provectus.com>
Co-authored-by: Kristina Kiparoidze <kkiparoidze@provectus.com>
Co-authored-by: Kris-K-Dev <92114648+Kris-K-Dev@users.noreply.github.com>

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>

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

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];