Test active filter edit functionality

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 addFilterCodeEditorTextarea = $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')]");
@@ -56,6 +58,7 @@ public class TopicDetails extends BasePage {
   protected SelenideElement previousMonthButton = $x("//button[@aria-label='Previous Month']");
   protected SelenideElement nextMonthButton = $x("//button[@aria-label='Next Month']");
   protected SelenideElement calendarTimeFld = $x("//input[@placeholder='Time']");
+  protected SelenideElement editActiveFilterBtn = $x("//div[@data-testid='editActiveSmartFilterBtn']");
   protected String detailsTabLtr = "//nav//a[contains(text(),'%s')]";
   protected String dayCellLtr = "//div[@role='option'][contains(text(),'%d')]";
   protected String seekFilterDdlLocator = "//ul[@id='selectSeekType']/ul/li[text()='%s']";
@@ -184,6 +187,12 @@ public class TopicDetails extends BasePage {
     return this;
   }
 
+  @Step
+  public TopicDetails clickEditActiveFiltersBtn() {
+    editActiveFilterBtn.shouldBe(Condition.enabled).click();
+    return this;
+  }
+
   @Step
   public TopicDetails clickNextButton() {
     nextBtn.shouldBe(Condition.enabled).click();
@@ -224,10 +233,26 @@ public class TopicDetails extends BasePage {
 
   @Step
   public TopicDetails setFilterCodeFieldAddFilterMdl(String filterCode) {
-    addFilterCodeInput.shouldBe(Condition.enabled).sendKeys(filterCode);
+    addFilterCodeEditorTextarea.shouldBe(Condition.enabled).setValue(filterCode);
     return this;
   }
 
+  @Step
+  public boolean doesFilterCodeFieldMatchValue(String value) {
+    // the code is not reflected in "addFilterCodeEditorTextarea" until "addFilterCodeEditor" is clicked
+    // otherwise "addFilterCodeEditorTextarea" is empty string even though the code is displayed in the editor
+    addFilterCodeEditor.click();
+    String codeValue = addFilterCodeEditorTextarea.getValue();
+    // the value retrieved from "addFilterCodeEditorTextarea" is appended with 2x new line characters e.g. "code\n\n"
+    String codeValueWithoutNewLines = codeValue.substring(0, codeValue.length() - 2);
+    return codeValueWithoutNewLines.equals(value);
+  }
+
+  @Step
+  public boolean doesFilterNameFieldMatchValue(String value) {
+    return displayNameInputAddFilterMdl.shouldBe(Condition.enabled).getValue().equals(value);
+  }
+
   @Step
   public TopicDetails selectSaveThisFilterCheckboxMdl(boolean select) {
     selectElement(saveThisFilterCheckBoxAddFilterMdl, select);
@@ -241,7 +266,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 +281,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);
@@ -276,6 +312,11 @@ public class TopicDetails extends BasePage {
     return isVisible($x(String.format(activeFilterNameLocator, activeFilterName)));
   }
 
+  @Step
+  public boolean doesSearchFieldContainValue(String value) {
+    return searchFld.shouldBe(Condition.visible).getValue().equals(value);
+  }
+
   public List<SelenideElement> getAllAddFilterModalVisibleElements() {
     return Arrays.asList(savedFiltersLink, displayNameInputAddFilterMdl, addFilterBtnAddFilterMdl,
         cancelBtnAddFilterMdl);

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

@@ -489,6 +489,40 @@ public class TopicsTest extends BaseTest {
     Assert.assertTrue(topicDetails.isTopicHeaderVisible(topicToCopy.getName()), "isTopicHeaderVisible()");
   }
 
+// todo: what does it mean? what's the optimal value?
+//  @QaseId(12)
+  @Test(priority = 20)
+  public void editFilter() {
+    String filterName = randomAlphabetic(5);
+    String filterCode = randomAlphabetic(5);
+
+    navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
+    topicDetails
+        .openDetailsTab(MESSAGES)
+        .clickMessagesAddFiltersBtn()
+        .waitUntilAddFiltersMdlVisible()
+        .setFilterCodeFieldAddFilterMdl(filterCode)
+        .setDisplayNameFldAddFilterMdl(filterName)
+        .clickAddFilterBtnAndCloseMdl(true)
+        .clickEditActiveFiltersBtn()
+        .waitUntilAddFiltersMdlVisible();
+
+    Assert.assertTrue(topicDetails.doesFilterCodeFieldMatchValue(filterCode), "doesFilterCodeFieldValueMatchInput()");
+    Assert.assertTrue(topicDetails.doesFilterNameFieldMatchValue(filterName), "doesFilterNameFieldValueMatchInput()");
+
+    String newFilterName = randomAlphabetic(5);
+    String newFilterCode = randomAlphabetic(5);
+
+    topicDetails
+        .setDisplayNameFldAddFilterMdl(newFilterName)
+        .setFilterCodeFieldAddFilterMdl(newFilterCode)
+        .clickSaveFilterBtnAndCloseMdl(true);
+
+    Assert.assertTrue(topicDetails.isActiveFilterVisible(newFilterName), "isActiveFilterVisible()");
+    Assert.assertTrue(topicDetails.doesSearchFieldContainValue(newFilterCode), "isNewCodeVisible()");
+
+  }
+
   @AfterClass(alwaysRun = true)
   public void afterClass() {
     TOPIC_LIST.forEach(topic -> apiService.deleteTopic(topic.getName()));

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

@@ -556,7 +556,10 @@ const Filters: React.FC<FiltersProps> = ({
         {activeFilter.name && (
           <S.ActiveSmartFilter data-testid="activeSmartFilter">
             <S.SmartFilterName>{activeFilter.name}</S.SmartFilterName>
-            <S.EditSmartFilterIcon onClick={toggleQuickEdit}>
+            <S.EditSmartFilterIcon
+              data-testid="editActiveSmartFilterBtn"
+              onClick={toggleQuickEdit}
+            >
               <EditIcon />
             </S.EditSmartFilterIcon>
             <S.DeleteSmartFilterIcon onClick={deleteActiveFilter}>