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 510fcd0359..0ff1fd1d89 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 = ({ activeFilterHandler, toggleEditModal, editFilter, + isSavedFiltersOpen, + onClickSavedFilters, activeFilter, }) => { - const [savedFilterState, setSavedFilterState] = - React.useState(false); const { isOpen, toggle } = useModal(); const onSubmit = React.useCallback( @@ -71,12 +73,12 @@ const AddFilter: React.FC = ({ {isOpen && } - {savedFilterState ? ( + {isSavedFiltersOpen ? ( setSavedFilterState(false)} + onGoBack={() => onClickSavedFilters(!onClickSavedFilters)} filters={filters} onEdit={(index: number, filter: MessageFilters) => { toggleEditModal(); @@ -87,7 +89,7 @@ const AddFilter: React.FC = ({ ) : ( <> setSavedFilterState(true)} + onClick={() => onClickSavedFilters(!isSavedFiltersOpen)} > Saved Filters 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 18c4624e93..88e5adbcae 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 = ({ activeFilter, }) => { const [addFilterModal, setAddFilterModal] = React.useState(true); + const [isSavedFiltersOpen, setIsSavedFiltersOpen] = + React.useState(false); + const toggleEditModal = () => { setAddFilterModal(!addFilterModal); }; + const [editFilter, setEditFilter] = React.useState({ index: -1, filter: { name: '', code: '' }, @@ -40,6 +44,7 @@ const FilterModal: React.FC = ({ setEditFilter(value); setAddFilterModal(!addFilterModal); }; + return ( {addFilterModal ? ( @@ -51,6 +56,8 @@ const FilterModal: React.FC = ({ 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 f9c8fe3f1e..0c12fd3343 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 = {}) => 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];