Repository: provectus/kafka-ui
Issue: "Select filter" button is active without selecting any saved filter within Topic/Messages/Saved filters
Labels: type/bug
scope/frontend
status/accepted
status/confirmed


**Describe the bug**
"Select filter" is active in case of not selected filter within Saved filters in Topic/Messages

**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**

Steps to reproduce the behavior:

1. Navigate to Topic/Messages
2. Press "+Add Filters"
3. Click on "Saved Filters"
4. Press active "Select filter"

**Expected behavior**
"Select filter" should not be functional until selecting any saved filter 

**Screenshots**

https://user-images.githubusercontent.com/104780608/199660167-7aed650d-2527-43f3-8020-d01826e28c44.mov






Issue comments:
Don't forget v2

Pull request review comments:
i think here the query have to be more specific cause it it finding many and that is why it is failing the tests

Patch that resolved the issue:
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 6a757d34383..da5033e8cac 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
@@ -51,6 +51,7 @@ const SavedFilters: FC<Props> = ({
       </>,
       () => {
         deleteFilter(index);
+        setSelectedFilter(-1);
       }
     );
   };
@@ -95,6 +96,7 @@ const SavedFilters: FC<Props> = ({
           buttonType="primary"
           type="button"
           onClick={activateFilter}
+          disabled={selectedFilter === -1}
         >
           Select filter
         </Button>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx
index dff30487862..bc0f65befd6 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx
@@ -51,6 +51,9 @@ describe('SavedFilter Component', () => {
     it('should check the rendering of the empty filter', () => {
       expect(screen.getByText(/no saved filter/i)).toBeInTheDocument();
       expect(screen.queryByRole('savedFilter')).not.toBeInTheDocument();
+
+      const selectFilterButton = screen.getByText(/Select filter/i);
+      expect(selectFilterButton).toBeDisabled();
     });
   });
 
@@ -117,7 +120,6 @@ describe('SavedFilter Component', () => {
     });
 
     it('Open Confirmation for the deletion modal', async () => {
-      setUpComponent({ deleteFilter: deleteMock });
       const savedFilters = getSavedFilters();
       const deleteIcons = screen.getAllByText('mock-DeleteIcon');
       await userEvent.hover(savedFilters[0]);
@@ -130,7 +132,6 @@ describe('SavedFilter Component', () => {
     });
 
     it('Close Confirmations deletion modal with button', async () => {
-      setUpComponent({ deleteFilter: deleteMock });
       const savedFilters = getSavedFilters();
       const deleteIcons = screen.getAllByText('mock-DeleteIcon');
 
@@ -147,7 +148,6 @@ describe('SavedFilter Component', () => {
     });
 
     it('Delete the saved filter', async () => {
-      setUpComponent({ deleteFilter: deleteMock });
       const savedFilters = getSavedFilters();
       const deleteIcons = screen.getAllByText('mock-DeleteIcon');
 
@@ -158,6 +158,9 @@ describe('SavedFilter Component', () => {
       await userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
       expect(deleteMock).toHaveBeenCalledTimes(1);
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+      const selectFilterButton = screen.getByText(/Select filter/i);
+      expect(selectFilterButton).toBeDisabled();
     });
   });
 });


Test patch: