FE: Allow to edit active topic message filter (#3748)

Co-authored-by: VladSenyuta <vlad.senyuta@gmail.com>
Co-authored-by: Vlad Senyuta <66071557+VladSenyuta@users.noreply.github.com>

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/TopicDetails.java

@@ -37,11 +37,13 @@ public class TopicDetails extends BasePage {
   protected SelenideElement addFiltersBtn = $x("//button[text()='Add Filters']");
   protected SelenideElement savedFiltersLink = $x("//div[text()='Saved Filters']");
   protected SelenideElement addFilterCodeModalTitle = $x("//label[text()='Filter code']");
-  protected SelenideElement addFilterCodeInput = $x("//div[@id='ace-editor']//textarea");
+  protected SelenideElement addFilterCodeEditor = $x("//div[@id='ace-editor']");
+  protected SelenideElement addFilterCodeTextarea = $x("//div[@id='ace-editor']//textarea");
   protected SelenideElement saveThisFilterCheckBoxAddFilterMdl = $x("//input[@name='saveFilter']");
   protected SelenideElement displayNameInputAddFilterMdl = $x("//input[@placeholder='Enter Name']");
   protected SelenideElement cancelBtnAddFilterMdl = $x("//button[text()='Cancel']");
   protected SelenideElement addFilterBtnAddFilterMdl = $x("//button[text()='Add filter']");
+  protected SelenideElement saveFilterBtnEditFilterMdl = $x("//button[text()='Save']");
   protected SelenideElement addFiltersBtnMessages = $x("//button[text()='Add Filters']");
   protected SelenideElement selectFilterBtnAddFilterMdl = $x("//button[text()='Select filter']");
   protected SelenideElement editSettingsMenu = $x("//li[@role][contains(text(),'Edit settings')]");
@@ -62,7 +64,8 @@ public class TopicDetails extends BasePage {
   protected String savedFilterNameLocator = "//div[@role='savedFilter']/div[contains(text(),'%s')]";
   protected String consumerIdLocator = "//a[@title='%s']";
   protected String topicHeaderLocator = "//h1[contains(text(),'%s')]";
-  protected String activeFilterNameLocator = "//div[@data-testid='activeSmartFilter'][contains(text(),'%s')]";
+  protected String activeFilterNameLocator = "//div[@data-testid='activeSmartFilter']/div[1][contains(text(),'%s')]";
+  protected String editActiveFilterBtnLocator = "//div[text()='%s']/../div[@data-testid='editActiveSmartFilterBtn']";
   protected String settingsGridValueLocator = "//tbody/tr/td/span[text()='%s']//ancestor::tr/td[2]/span";
 
   @Step
@@ -184,6 +187,13 @@ public class TopicDetails extends BasePage {
     return this;
   }
 
+  @Step
+  public TopicDetails clickEditActiveFilterBtn(String filterName) {
+    $x(String.format(editActiveFilterBtnLocator, filterName))
+        .shouldBe(Condition.enabled).click();
+    return this;
+  }
+
   @Step
   public TopicDetails clickNextButton() {
     clickNextBtn();
@@ -223,11 +233,27 @@ public class TopicDetails extends BasePage {
   }
 
   @Step
-  public TopicDetails setFilterCodeFieldAddFilterMdl(String filterCode) {
-    addFilterCodeInput.shouldBe(Condition.enabled).sendKeys(filterCode);
+  public TopicDetails setFilterCodeFldAddFilterMdl(String filterCode) {
+    addFilterCodeTextarea.shouldBe(Condition.enabled).setValue(filterCode);
     return this;
   }
 
+  @Step
+  public String getFilterCodeValue() {
+    addFilterCodeEditor.shouldBe(Condition.enabled).click();
+    String value = addFilterCodeTextarea.getValue();
+    if (value == null) {
+      return null;
+    } else {
+      return value.substring(0, value.length() - 2);
+    }
+  }
+
+  @Step
+  public String getFilterNameValue() {
+    return displayNameInputAddFilterMdl.shouldBe(Condition.enabled).getValue();
+  }
+
   @Step
   public TopicDetails selectSaveThisFilterCheckboxMdl(boolean select) {
     selectElement(saveThisFilterCheckBoxAddFilterMdl, select);
@@ -241,7 +267,7 @@ public class TopicDetails extends BasePage {
 
   @Step
   public TopicDetails setDisplayNameFldAddFilterMdl(String displayName) {
-    displayNameInputAddFilterMdl.shouldBe(Condition.enabled).sendKeys(displayName);
+    displayNameInputAddFilterMdl.shouldBe(Condition.enabled).setValue(displayName);
     return this;
   }
 
@@ -256,6 +282,17 @@ public class TopicDetails extends BasePage {
     return this;
   }
 
+  @Step
+  public TopicDetails clickSaveFilterBtnAndCloseMdl(boolean closeModal) {
+    saveFilterBtnEditFilterMdl.shouldBe(Condition.enabled).click();
+    if (closeModal) {
+      addFilterCodeModalTitle.shouldBe(Condition.hidden);
+    } else {
+      addFilterCodeModalTitle.shouldBe(Condition.visible);
+    }
+    return this;
+  }
+
   @Step
   public boolean isAddFilterBtnAddFilterMdlEnabled() {
     return isEnabled(addFilterBtnAddFilterMdl);
@@ -272,8 +309,13 @@ public class TopicDetails extends BasePage {
   }
 
   @Step
-  public boolean isActiveFilterVisible(String activeFilterName) {
-    return isVisible($x(String.format(activeFilterNameLocator, activeFilterName)));
+  public boolean isActiveFilterVisible(String filterName) {
+    return isVisible($x(String.format(activeFilterNameLocator, filterName)));
+  }
+
+  @Step
+  public String getSearchFieldValue() {
+    return searchFld.shouldBe(Condition.visible).getValue();
   }
 
   public List<SelenideElement> getAllAddFilterModalVisibleElements() {

kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokesuite/topics/TopicsTest.java

@@ -313,14 +313,44 @@ public class TopicsTest extends BaseTest {
     verifyElementsCondition(topicDetails.getAllAddFilterModalDisabledElements(), Condition.disabled);
     Assert.assertFalse(topicDetails.isSaveThisFilterCheckBoxSelected(), "isSaveThisFilterCheckBoxSelected()");
     topicDetails
-        .setFilterCodeFieldAddFilterMdl(filterName);
+        .setFilterCodeFldAddFilterMdl(filterName);
     Assert.assertTrue(topicDetails.isAddFilterBtnAddFilterMdlEnabled(), "isAddFilterBtnAddFilterMdlEnabled()");
     topicDetails.clickAddFilterBtnAndCloseMdl(true);
     Assert.assertTrue(topicDetails.isActiveFilterVisible(filterName), "isActiveFilterVisible()");
   }
 
-  @QaseId(13)
+  @QaseId(352)
   @Test(priority = 13)
+  public void editActiveSmartFilterCheck() {
+    String filterName = randomAlphabetic(5);
+    String filterCode = randomAlphabetic(5);
+    navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
+    topicDetails
+        .openDetailsTab(MESSAGES)
+        .clickMessagesAddFiltersBtn()
+        .waitUntilAddFiltersMdlVisible()
+        .setFilterCodeFldAddFilterMdl(filterCode)
+        .setDisplayNameFldAddFilterMdl(filterName)
+        .clickAddFilterBtnAndCloseMdl(true)
+        .clickEditActiveFilterBtn(filterName)
+        .waitUntilAddFiltersMdlVisible();
+    SoftAssert softly = new SoftAssert();
+    softly.assertEquals(topicDetails.getFilterCodeValue(), filterCode, "getFilterCodeValue()");
+    softly.assertEquals(topicDetails.getFilterNameValue(), filterName, "getFilterNameValue()");
+    softly.assertAll();
+    String newFilterName = randomAlphabetic(5);
+    String newFilterCode = randomAlphabetic(5);
+    topicDetails
+        .setFilterCodeFldAddFilterMdl(newFilterCode)
+        .setDisplayNameFldAddFilterMdl(newFilterName)
+        .clickSaveFilterBtnAndCloseMdl(true);
+    softly.assertTrue(topicDetails.isActiveFilterVisible(newFilterName), "isActiveFilterVisible()");
+    softly.assertEquals(topicDetails.getSearchFieldValue(), newFilterCode, "getSearchFieldValue()");
+    softly.assertAll();
+  }
+
+  @QaseId(13)
+  @Test(priority = 14)
   public void checkFilterSavingWithinSavedFilters() {
     String displayName = randomAlphabetic(5);
     navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
@@ -328,7 +358,7 @@ public class TopicsTest extends BaseTest {
         .openDetailsTab(MESSAGES)
         .clickMessagesAddFiltersBtn()
         .waitUntilAddFiltersMdlVisible()
-        .setFilterCodeFieldAddFilterMdl(randomAlphabetic(4))
+        .setFilterCodeFldAddFilterMdl(randomAlphabetic(4))
         .selectSaveThisFilterCheckboxMdl(true)
         .setDisplayNameFldAddFilterMdl(displayName);
     Assert.assertTrue(topicDetails.isAddFilterBtnAddFilterMdlEnabled(),
@@ -341,7 +371,7 @@ public class TopicsTest extends BaseTest {
   }
 
   @QaseId(14)
-  @Test(priority = 14)
+  @Test(priority = 15)
   public void checkApplyingSavedFilterWithinTopicMessages() {
     String displayName = randomAlphabetic(5);
     navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
@@ -349,7 +379,7 @@ public class TopicsTest extends BaseTest {
         .openDetailsTab(MESSAGES)
         .clickMessagesAddFiltersBtn()
         .waitUntilAddFiltersMdlVisible()
-        .setFilterCodeFieldAddFilterMdl(randomAlphabetic(4))
+        .setFilterCodeFldAddFilterMdl(randomAlphabetic(4))
         .selectSaveThisFilterCheckboxMdl(true)
         .setDisplayNameFldAddFilterMdl(displayName)
         .clickAddFilterBtnAndCloseMdl(false)
@@ -360,7 +390,7 @@ public class TopicsTest extends BaseTest {
   }
 
   @QaseId(11)
-  @Test(priority = 15)
+  @Test(priority = 16)
   public void checkShowInternalTopicsButton() {
     navigateToTopics();
     topicsList
@@ -378,7 +408,7 @@ public class TopicsTest extends BaseTest {
   }
 
   @QaseId(334)
-  @Test(priority = 16)
+  @Test(priority = 17)
   public void checkInternalTopicsNaming() {
     navigateToTopics();
     SoftAssert softly = new SoftAssert();
@@ -391,7 +421,7 @@ public class TopicsTest extends BaseTest {
   }
 
   @QaseId(56)
-  @Test(priority = 17)
+  @Test(priority = 18)
   public void checkRetentionBytesAccordingToMaxSizeOnDisk() {
     navigateToTopics();
     topicsList
@@ -439,7 +469,7 @@ public class TopicsTest extends BaseTest {
   }
 
   @QaseId(247)
-  @Test(priority = 18)
+  @Test(priority = 19)
   public void recreateTopicFromTopicProfile() {
     Topic topicToRecreate = new Topic()
         .setName("topic-to-recreate-" + randomAlphabetic(5))
@@ -467,7 +497,7 @@ public class TopicsTest extends BaseTest {
   }
 
   @QaseId(8)
-  @Test(priority = 19)
+  @Test(priority = 20)
   public void checkCopyTopicPossibility() {
     Topic topicToCopy = new Topic()
         .setName("topic-to-copy-" + randomAlphabetic(5))

kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-hook-form';
 import { Button } from 'components/common/Button/Button';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import { yupResolver } from '@hookform/resolvers/yup';
 import yup from 'lib/yupExtended';
 import PlusIcon from 'components/common/Icons/PlusIcon';
@@ -174,7 +174,7 @@ const QueryForm: React.FC<QueryFormProps> = ({
                     aria-label="deleteProperty"
                     onClick={removeProperty(index)}
                   >
-                    <CloseIcon aria-hidden />
+                    <CloseCircleIcon aria-hidden />
                   </IconButtonWrapper>
                 </S.InputsContainer>
               ))}

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/EditFilter.tsx

@@ -22,7 +22,7 @@ const EditFilter: React.FC<EditFilterProps> = ({
   };
   return (
     <>
-      <S.FilterTitle>Edit saved filter</S.FilterTitle>
+      <S.FilterTitle>Edit filter</S.FilterTitle>
       <AddEditFilterContainer
         cancelBtnHandler={() => toggleEditModal()}
         submitBtnText="Save"

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
-import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
+import {
+  ActiveMessageFilter,
+  MessageFilters,
+} from 'components/Topics/Topic/Messages/Filters/Filters';
 import AddFilter from 'components/Topics/Topic/Messages/Filters/AddFilter';
 import EditFilter from 'components/Topics/Topic/Messages/Filters/EditFilter';
 
@@ -11,7 +14,8 @@ export interface FilterModalProps {
   deleteFilter(index: number): void;
   activeFilterHandler(activeFilter: MessageFilters, index: number): void;
   editSavedFilter(filter: FilterEdit): void;
-  activeFilter?: MessageFilters;
+  activeFilter: ActiveMessageFilter;
+  quickEditMode?: boolean;
 }
 
 export interface FilterEdit {
@@ -27,27 +31,39 @@ const FilterModal: React.FC<FilterModalProps> = ({
   activeFilterHandler,
   editSavedFilter,
   activeFilter,
+  quickEditMode = false,
 }) => {
-  const [addFilterModal, setAddFilterModal] = React.useState<boolean>(true);
+  const [isInEditMode, setIsInEditMode] =
+    React.useState<boolean>(quickEditMode);
   const [isSavedFiltersOpen, setIsSavedFiltersOpen] =
     React.useState<boolean>(false);
 
   const toggleEditModal = () => {
-    setAddFilterModal(!addFilterModal);
+    setIsInEditMode(!isInEditMode);
   };
 
-  const [editFilter, setEditFilter] = React.useState<FilterEdit>({
-    index: -1,
-    filter: { name: '', code: '' },
+  const [editFilter, setEditFilter] = React.useState<FilterEdit>(() => {
+    const { index, name, code } = activeFilter;
+    return quickEditMode
+      ? { index, filter: { name, code } }
+      : { index: -1, filter: { name: '', code: '' } };
   });
   const editFilterHandler = (value: FilterEdit) => {
     setEditFilter(value);
-    setAddFilterModal(!addFilterModal);
+    setIsInEditMode(!isInEditMode);
   };
 
+  const toggleEditModalHandler = quickEditMode ? toggleIsOpen : toggleEditModal;
+
   return (
     <S.MessageFilterModal data-testid="messageFilterModal">
-      {addFilterModal ? (
+      {isInEditMode ? (
+        <EditFilter
+          editFilter={editFilter}
+          toggleEditModal={toggleEditModalHandler}
+          editSavedFilter={editSavedFilter}
+        />
+      ) : (
         <AddFilter
           toggleIsOpen={toggleIsOpen}
           filters={filters}
@@ -60,12 +76,6 @@ const FilterModal: React.FC<FilterModalProps> = ({
           onClickSavedFilters={() => setIsSavedFiltersOpen(!isSavedFiltersOpen)}
           activeFilter={activeFilter}
         />
-      ) : (
-        <EditFilter
-          editFilter={editFilter}
-          toggleEditModal={toggleEditModal}
-          editSavedFilter={editSavedFilter}
-        />
       )}
     </S.MessageFilterModal>
   );

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts

@@ -2,6 +2,8 @@ import Input from 'components/common/Input/Input';
 import Select from 'components/common/Select/Select';
 import styled, { css } from 'styled-components';
 import DatePicker from 'react-datepicker';
+import EditIcon from 'components/common/Icons/EditIcon';
+import closeIcon from 'components/common/Icons/CloseIcon';
 
 interface SavedFilterProps {
   selected: boolean;
@@ -280,29 +282,77 @@ export const SavedFilter = styled.div.attrs({
 `;
 
 export const ActiveSmartFilter = styled.div`
-  border-radius: 4px;
-  min-width: 115px;
-  height: 24px;
-  background: ${({ theme }) => theme.savedFilter.backgroundColor};
-  font-size: 14px;
-  line-height: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: ${({ theme }) => theme.savedFilter.color};
-  padding: 16px 8px;
+  height: 32px;
+  color: ${({ theme }) => theme.activeFilter.color};
+  background: ${({ theme }) => theme.activeFilter.backgroundColor};
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 20px;
 `;
 
-export const DeleteSavedFilterIcon = styled.div`
-  color: ${({ theme }) => theme.icons.closeIcon};
-  display: flex;
-  align-items: center;
-  padding-left: 6px;
-  height: 24px;
-  cursor: pointer;
-  margin-left: 4px;
+export const EditSmartFilterIcon = styled.div(
+  ({ theme: { icons } }) => css`
+    color: ${icons.editIcon.normal};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    width: 32px;
+    cursor: pointer;
+    border-left: 1px solid ${icons.editIcon.border};
+
+    &:hover {
+      ${EditIcon} {
+        fill: ${icons.editIcon.hover};
+      }
+    }
+
+    &:active {
+      ${EditIcon} {
+        fill: ${icons.editIcon.active};
+      }
+    }
+  `
+);
+
+export const SmartFilterName = styled.div`
+  padding: 0 8px;
+  min-width: 32px;
 `;
 
+export const DeleteSmartFilterIcon = styled.div(
+  ({ theme: { icons } }) => css`
+    color: ${icons.closeIcon.normal};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    width: 32px;
+    cursor: pointer;
+    border-left: 1px solid ${icons.closeIcon.border};
+
+    svg {
+      height: 14px;
+      width: 14px;
+    }
+
+    &:hover {
+      ${closeIcon} {
+        fill: ${icons.closeIcon.hover};
+      }
+    }
+
+    &:active {
+      ${closeIcon} {
+        fill: ${icons.closeIcon.active};
+      }
+    }
+  `
+);
+
 export const MessageLoading = styled.div.attrs({
   role: 'contentLoader',
 })<MessageLoadingProps>`

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx

@@ -30,6 +30,7 @@ import useBoolean from 'lib/hooks/useBoolean';
 import { RouteParamsClusterTopic } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
 import PlusIcon from 'components/common/Icons/PlusIcon';
+import EditIcon from 'components/common/Icons/EditIcon';
 import CloseIcon from 'components/common/Icons/CloseIcon';
 import ClockIcon from 'components/common/Icons/ClockIcon';
 import ArrowDownIcon from 'components/common/Icons/ArrowDownIcon';
@@ -67,7 +68,7 @@ export interface MessageFilters {
   code: string;
 }
 
-interface ActiveMessageFilter {
+export interface ActiveMessageFilter {
   index: number;
   name: string;
   code: string;
@@ -108,6 +109,8 @@ const Filters: React.FC<FiltersProps> = ({
 
   const { value: isOpen, toggle } = useBoolean();
 
+  const { value: isQuickEditOpen, toggle: toggleQuickEdit } = useBoolean();
+
   const source = React.useRef<EventSource | null>(null);
 
   const [selectedPartitions, setSelectedPartitions] = React.useState<Option[]>(
@@ -307,27 +310,37 @@ const Filters: React.FC<FiltersProps> = ({
     setActiveFilter({ index, ...newActiveFilter });
     setQueryType(MessageFilterType.GROOVY_SCRIPT);
   };
+
+  const composeMessageFilter = (filter: FilterEdit): ActiveMessageFilter => ({
+    index: filter.index,
+    name: filter.filter.name,
+    code: filter.filter.code,
+  });
+
+  const storeAsActiveFilter = (filter: FilterEdit) => {
+    const messageFilter = JSON.stringify(composeMessageFilter(filter));
+    localStorage.setItem('activeFilter', messageFilter);
+  };
+
   const editSavedFilter = (filter: FilterEdit) => {
     const filters = [...savedFilters];
     filters[filter.index] = filter.filter;
     if (activeFilter.name && activeFilter.index === filter.index) {
-      setActiveFilter({
-        index: filter.index,
-        name: filter.filter.name,
-        code: filter.filter.code,
-      });
-      localStorage.setItem(
-        'activeFilter',
-        JSON.stringify({
-          index: filter.index,
-          name: filter.filter.name,
-          code: filter.filter.code,
-        })
-      );
+      setActiveFilter(composeMessageFilter(filter));
+      storeAsActiveFilter(filter);
     }
     localStorage.setItem('savedFilters', JSON.stringify(filters));
     setSavedFilters(filters);
   };
+
+  const editCurrentFilter = (filter: FilterEdit) => {
+    if (filter.index < 0) {
+      setActiveFilter(composeMessageFilter(filter));
+      storeAsActiveFilter(filter);
+    } else {
+      editSavedFilter(filter);
+    }
+  };
   // eslint-disable-next-line consistent-return
   React.useEffect(() => {
     if (location.search?.length !== 0) {
@@ -542,13 +555,32 @@ const Filters: React.FC<FiltersProps> = ({
         </Button>
         {activeFilter.name && (
           <S.ActiveSmartFilter data-testid="activeSmartFilter">
-            {activeFilter.name}
-            <S.DeleteSavedFilterIcon onClick={deleteActiveFilter}>
+            <S.SmartFilterName>{activeFilter.name}</S.SmartFilterName>
+            <S.EditSmartFilterIcon
+              data-testid="editActiveSmartFilterBtn"
+              onClick={toggleQuickEdit}
+            >
+              <EditIcon />
+            </S.EditSmartFilterIcon>
+            <S.DeleteSmartFilterIcon onClick={deleteActiveFilter}>
               <CloseIcon />
-            </S.DeleteSavedFilterIcon>
+            </S.DeleteSmartFilterIcon>
           </S.ActiveSmartFilter>
         )}
       </S.ActiveSmartFilterWrapper>
+      {isQuickEditOpen && (
+        <FilterModal
+          quickEditMode
+          activeFilter={activeFilter}
+          toggleIsOpen={toggleQuickEdit}
+          editSavedFilter={editCurrentFilter}
+          filters={[]}
+          addFilter={() => null}
+          deleteFilter={() => null}
+          activeFilterHandler={() => null}
+        />
+      )}
+
       {isOpen && (
         <FilterModal
           toggleIsOpen={toggle}

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/EditFilter.spec.tsx

@@ -27,7 +27,7 @@ describe('EditFilter component', () => {
     await act(() => {
       renderComponent();
     });
-    expect(screen.getByText(/edit saved filter/i)).toBeInTheDocument();
+    expect(screen.getByText(/edit filter/i)).toBeInTheDocument();
   });
 
   it('closes editFilter modal', async () => {

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/FilterModal.spec.tsx

@@ -3,11 +3,16 @@ import FilterModal, {
   FilterModalProps,
 } from 'components/Topics/Topic/Messages/Filters/FilterModal';
 import { render } from 'lib/testHelpers';
-import { MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
+import {
+  ActiveMessageFilter,
+  MessageFilters,
+} from 'components/Topics/Topic/Messages/Filters/Filters';
 import { screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-const filters: MessageFilters[] = [{ name: 'name', code: 'code' }];
+const filter = { name: 'name', code: 'code' };
+const filters: MessageFilters[] = [filter];
+const activeFilter: ActiveMessageFilter = { index: -1, ...filter };
 
 const renderComponent = (props?: Partial<FilterModalProps>) =>
   render(
@@ -18,6 +23,7 @@ const renderComponent = (props?: Partial<FilterModalProps>) =>
       deleteFilter={jest.fn()}
       activeFilterHandler={jest.fn()}
       editSavedFilter={jest.fn()}
+      activeFilter={activeFilter}
       {...props}
     />
   );
@@ -36,7 +42,7 @@ describe('FilterModal component', () => {
     await userEvent.click(screen.getByRole('savedFilterText'));
     await userEvent.click(screen.getByText('Edit'));
     expect(
-      screen.getByRole('heading', { name: /edit saved filter/i, level: 3 })
+      screen.getByRole('heading', { name: /edit filter/i, level: 3 })
     ).toBeInTheDocument();
   });
 });

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx

@@ -8,7 +8,7 @@ import { FormError } from 'components/common/Input/Input.styled';
 import Select from 'components/common/Select/Select';
 import Input from 'components/common/Input/Input';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import * as C from 'components/Topics/shared/Form/TopicForm.styled';
 import { ConfigSource } from 'generated-sources';
 
@@ -125,7 +125,7 @@ const CustomParamField: React.FC<Props> = ({
           }
           title={`Delete customParam field ${index}`}
         >
-          <CloseIcon aria-hidden />
+          <CloseCircleIcon aria-hidden />
         </IconButtonWrapper>
       </S.DeleteButtonWrapper>
     </C.Column>

kafka-ui-react-app/src/components/common/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import { ToastTypes } from 'lib/errorHandling';
 
@@ -19,7 +19,7 @@ const Alert: React.FC<AlertProps> = ({ title, type, message, onDissmiss }) => (
       <S.Message role="contentinfo">{message}</S.Message>
     </div>
     <IconButtonWrapper role="button" onClick={onDissmiss}>
-      <CloseIcon />
+      <CloseCircleIcon />
     </IconButtonWrapper>
   </S.Alert>
 );

kafka-ui-react-app/src/components/common/Icons/CloseCircleIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+
+const CloseCircleIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.707 4.29289C12.0976 4.68342 12.0976 5.31658 11.707 5.70711L9.41415 8L11.707 10.2929C12.0976 10.6834 12.0976 11.3166 11.707 11.7071C11.3165 12.0976 10.6834 12.0976 10.2928 11.7071L7.99994 9.41421L5.70711 11.707C5.31658 12.0976 4.68342 12.0976 4.29289 11.707C3.90237 11.3165 3.90237 10.6834 4.29289 10.2928L6.58573 8L4.29289 5.70717C3.90237 5.31664 3.90237 4.68348 4.29289 4.29295C4.68342 3.90243 5.31658 3.90243 5.70711 4.29295L7.99994 6.58579L10.2928 4.29289C10.6834 3.90237 11.3165 3.90237 11.707 4.29289Z"
+        fill={theme.icons.closeCircleIcon}
+      />
+    </svg>
+  );
+};
+
+export default CloseCircleIcon;

kafka-ui-react-app/src/components/common/Icons/CloseIcon.tsx

@@ -1,24 +1,24 @@
 import React from 'react';
-import { useTheme } from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
-const CloseIcon: React.FC = () => {
+const CloseIcon: React.FC<{ className?: string }> = ({ className }) => {
   const theme = useTheme();
   return (
     <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      className={className}
+      fill={theme.icons.closeIcon.normal}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.707 4.29289C12.0976 4.68342 12.0976 5.31658 11.707 5.70711L9.41415 8L11.707 10.2929C12.0976 10.6834 12.0976 11.3166 11.707 11.7071C11.3165 12.0976 10.6834 12.0976 10.2928 11.7071L7.99994 9.41421L5.70711 11.707C5.31658 12.0976 4.68342 12.0976 4.29289 11.707C3.90237 11.3165 3.90237 10.6834 4.29289 10.2928L6.58573 8L4.29289 5.70717C3.90237 5.31664 3.90237 4.68348 4.29289 4.29295C4.68342 3.90243 5.31658 3.90243 5.70711 4.29295L7.99994 6.58579L10.2928 4.29289C10.6834 3.90237 11.3165 3.90237 11.707 4.29289Z"
-        fill={theme.icons.closeIcon}
+        d="M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5 4.29289L8.64645 0.646447C8.84171 0.451184 9.15829 0.451184 9.35355 0.646447C9.54882 0.841709 9.54882 1.15829 9.35355 1.35355L5.70711 5L9.35355 8.64645C9.54882 8.84171 9.54882 9.15829 9.35355 9.35355C9.15829 9.54882 8.84171 9.54882 8.64645 9.35355L5 5.70711L1.35355 9.35355C1.15829 9.54881 0.841709 9.54881 0.646447 9.35355C0.451185 9.15829 0.451185 8.84171 0.646447 8.64645L4.29289 5L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z"
       />
     </svg>
   );
 };
 
-export default CloseIcon;
+export default styled(CloseIcon)``;

kafka-ui-react-app/src/components/common/Icons/EditIcon.tsx

@@ -1,42 +1,23 @@
-import React, { FC } from 'react';
-import { useTheme } from 'styled-components';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 
-const EditIcon: FC = () => {
+const EditIcon: React.FC<{ className?: string }> = ({ className }) => {
   const theme = useTheme();
   return (
     <svg
-      viewBox="0 0 64 64"
-      width="12"
-      height="12"
+      width="13"
+      height="14"
+      viewBox="0 0 13 14"
+      className={className}
+      fill={theme.icons.editIcon.normal}
       xmlns="http://www.w3.org/2000/svg"
       aria-labelledby="title"
-      aria-describedby="desc"
-      role="img"
     >
       <title>Edit</title>
-      <desc>A line styled icon from Orion Icon Library.</desc>
-      <path
-        d="M54.368 17.674l6.275-6.267-8.026-8.025-6.274 6.267"
-        strokeWidth="2"
-        strokeMiterlimit="10"
-        stroke={theme.icons.editIcon}
-        fill="none"
-        data-name="layer2"
-        strokeLinejoin="round"
-        strokeLinecap="round"
-      />
-      <path
-        d="M17.766 54.236l36.602-36.562-8.025-8.025L9.74 46.211 3.357 60.618l14.409-6.382zM9.74 46.211l8.026 8.025"
-        strokeWidth="2"
-        strokeMiterlimit="10"
-        stroke={theme.icons.editIcon}
-        fill="none"
-        data-name="layer1"
-        strokeLinejoin="round"
-        strokeLinecap="round"
-      />
+      <path d="M9.53697 1.15916C10.0914 0.60473 10.9886 0.602975 11.5408 1.15524L12.5408 2.15518C13.093 2.70745 13.0913 3.60461 12.5368 4.15904L10.3564 6.33944L7.35657 3.33956L9.53697 1.15916Z" />
+      <path d="M6.64946 4.04667L9.53674e-07 10.6961L0 13.696L2.99988 13.696L9.64934 7.04655L6.64946 4.04667Z" />
     </svg>
   );
 };
 
-export default EditIcon;
+export default styled(EditIcon)``;

kafka-ui-react-app/src/components/common/Search/Search.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import Input from 'components/common/Input/Input';
 import { useSearchParams } from 'react-router-dom';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import styled from 'styled-components';
 
 interface SearchProps {
@@ -66,7 +66,7 @@ const Search: React.FC<SearchProps> = ({
       search
       clearIcon={
         <IconButtonWrapper onClick={clearSearchValue}>
-          <CloseIcon />
+          <CloseCircleIcon />
         </IconButtonWrapper>
       }
     />

kafka-ui-react-app/src/theme/theme.ts

@@ -162,7 +162,18 @@ const baseTheme = {
   },
   icons: {
     chevronDownIcon: Colors.neutral[0],
-    editIcon: Colors.neutral[30],
+    editIcon: {
+      normal: Colors.neutral[30],
+      hover: Colors.neutral[90],
+      active: Colors.neutral[100],
+      border: Colors.neutral[10],
+    },
+    closeIcon: {
+      normal: Colors.neutral[30],
+      hover: Colors.neutral[90],
+      active: Colors.neutral[100],
+      border: Colors.neutral[10],
+    },
     cancelIcon: Colors.neutral[30],
     autoIcon: Colors.neutral[95],
     fileIcon: Colors.neutral[90],
@@ -171,7 +182,7 @@ const baseTheme = {
     moonIcon: Colors.neutral[95],
     sunIcon: Colors.neutral[95],
     infoIcon: Colors.neutral[30],
-    closeIcon: Colors.neutral[30],
+    closeCircleIcon: Colors.neutral[30],
     deleteIcon: Colors.red[20],
     warningIcon: Colors.yellow[20],
     warningRedIcon: {
@@ -688,10 +699,13 @@ export const theme = {
       color: Colors.neutral[80],
     },
   },
+  activeFilter: {
+    color: Colors.neutral[70],
+    backgroundColor: Colors.neutral[5],
+  },
   savedFilter: {
     filterName: Colors.neutral[90],
     color: Colors.neutral[30],
-    backgroundColor: Colors.neutral[5],
   },
   editFilter: {
     textColor: Colors.brand[50],
@@ -1128,10 +1142,13 @@ export const darkTheme: ThemeType = {
       color: Colors.neutral[0],
     },
   },
+  activeFilter: {
+    color: Colors.neutral[0],
+    backgroundColor: Colors.neutral[80],
+  },
   savedFilter: {
     filterName: Colors.neutral[0],
     color: Colors.neutral[70],
-    backgroundColor: Colors.neutral[80],
   },
   editFilter: {
     textColor: Colors.brand[30],
@@ -1157,7 +1174,18 @@ export const darkTheme: ThemeType = {
   },
   icons: {
     ...baseTheme.icons,
-    editIcon: Colors.neutral[0],
+    editIcon: {
+      normal: Colors.neutral[50],
+      hover: Colors.neutral[30],
+      active: Colors.neutral[40],
+      border: Colors.neutral[70],
+    },
+    closeIcon: {
+      normal: Colors.neutral[50],
+      hover: Colors.neutral[30],
+      active: Colors.neutral[40],
+      border: Colors.neutral[70],
+    },
     cancelIcon: Colors.neutral[0],
     autoIcon: Colors.neutral[0],
     fileIcon: Colors.neutral[0],

kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaCluster.tsx

@@ -3,7 +3,7 @@ import Input from 'components/common/Input/Input';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { FormError, InputHint } from 'components/common/Input/Input.styled';
 import { ErrorMessage } from '@hookform/error-message';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import { Button } from 'components/common/Button/Button';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import * as S from 'widgets/ClusterConfigForm/ClusterConfigForm.styled';
@@ -80,7 +80,7 @@ const KafkaCluster: React.FC = () => {
                 aria-label="deleteProperty"
                 onClick={() => remove(index)}
               >
-                <CloseIcon aria-hidden />
+                <CloseCircleIcon aria-hidden />
               </S.BootstrapServerActions>
             </S.BootstrapServer>
           ))}

kafka-ui-react-app/src/widgets/ClusterConfigForm/Sections/KafkaConnect.tsx

@@ -5,7 +5,7 @@ import Input from 'components/common/Input/Input';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
-import CloseIcon from 'components/common/Icons/CloseIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import {
   FlexGrow1,
   FlexRow,
@@ -66,7 +66,7 @@ const KafkaConnect = () => {
                 </FlexGrow1>
                 <S.RemoveButton onClick={() => remove(index)}>
                   <IconButtonWrapper aria-label="deleteProperty">
-                    <CloseIcon aria-hidden />
+                    <CloseCircleIcon aria-hidden />
                   </IconButtonWrapper>
                 </S.RemoveButton>
               </FlexRow>