Repository: provectus/kafka-ui
Issue: Broker: Config: Implement search by the Value
Labels: type/enhancement
good first issue
scope/frontend
status/accepted

<!--

Don't forget to check for existing issues/discussions regarding your proposal. We might already have it.
https://github.com/provectus/kafka-ui/issues
https://github.com/provectus/kafka-ui/discussions

-->

**Actual behavior**
<!--(A clear and concise description of what the bug is.)-->
It is not possible to search by the config Value and only works for the Key now.


**Expected behavior**
Search by the config Value can be useful for maintenance and troubleshooting.

**Set up**
<!--
How do you run the app? Please provide as much info as possible:
1. App version (docker image version or check commit hash in the top left corner in UI)
2. Helm chart version, if you use one
3. Any IAAC configs

We might close the issue without further explanation if you don't provide such information.
-->
[f4e6afe](https://github.com/provectus/kafka-ui/commit/f4e6afe)


**Steps to Reproduce**
<!-- We'd like you to provide an example setup (via docker-compose, helm, etc.) 
to reproduce the problem, especially with a complex setups. -->
1. Login to Kafka UI
2. Navigate to Borkers
3. Select broker and switch to Configs tab.

**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->


**Additional context**
<!--
(Add any other context about the problem here)
-->
Discussed with @Haarolean to be created as a separate issue from #2651 


Issue comments:
@Haarolean I would like to contribute to this issue.

Pull request review comments:
you can actually check the `nameMatch` before doing value check , so it wouldn't do more work if it does not have to.
Actually i don't get it what you are saying. Do you mean that if nameMatch found then i don't need to check for valueMatch ?
> Actually i don't get it what you are saying. Do you mean that if nameMatch found then i don't need to check for valueMatch ?

Yep, I think this is correct, and I think the suggestion is to do something like
```
      .filter((item) => {
        const nameMatch = item.name.toLocaleLowerCase().includes(keyword);
        return nameMatch ? true : item.value && item.value.includes(keyword); // try to match the keyword on any of the item.value elements when nameMatch fails but item.value exists
      })
```

or more explicitly:
```
      .filter((item) => {
        const nameMatch = item.name.toLocaleLowerCase().includes(keyword);
        if (nameMatch === true) return nameMatch;
        const valueMatch = item.value && item.value.includes(keyword);
        return valueMatch;
      })
```
instead of (the current implementation):
```
      .filter((item) => {
        const nameMatch = item.name.toLocaleLowerCase().includes(keyword);
        const valueMatch = item.value && item.value.includes(keyword);
        return nameMatch || valueMatch;
      })
```

so we don't need to go through the entire `item.value` array in case we find a `nameMatch` (and `item.value` exists).
Yup. You are right.
@malavmevada shouldn't we cast item value to lower case as well?
@Haarolean Actually, we shouldn't convert the 'item' values to lowercase because if you observe, all the values under the 'name' key are in lowercase strings. However, for the 'item' key, we can have values in uppercase, lowercase, null, and numbers. Due to this diversity, I haven't changed the 'item' values to lowercase.
@malavmevada sorry for the delay. Isn't this the point? Let's say I have some setting but in order to find it but its value I have to remember the exact case-sensitive value?
Yes you are absolutely right. Sorry for the mistake. I got your point and I have tested it and yeah it's working fine. I'll change that.
please cast the keyword to lowercase as well, otherwise it's not a case-insensitive search :)
Yes @Haarolean. I have updated it.

Patch that resolved the issue:
diff --git a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/brokers/BrokersConfigTab.java b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/brokers/BrokersConfigTab.java
index a9e146002ec..e00e938297a 100644
--- a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/brokers/BrokersConfigTab.java
+++ b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/brokers/BrokersConfigTab.java
@@ -16,6 +16,8 @@
 
 public class BrokersConfigTab extends BasePage {
 
+  protected List<SelenideElement> editBtn = $$x("//button[@aria-label='editAction']");
+  protected SelenideElement searchByKeyField = $x("//input[@placeholder='Search by Key or Value']");
   protected SelenideElement sourceInfoIcon = $x("//div[text()='Source']/..//div/div[@class]");
   protected SelenideElement sourceInfoTooltip = $x("//div[text()='Source']/..//div/div[@style]");
   protected ElementsCollection editBtns = $$x("//button[@aria-label='editAction']");
diff --git a/kafka-ui-react-app/src/components/Brokers/Broker/Configs/Configs.tsx b/kafka-ui-react-app/src/components/Brokers/Broker/Configs/Configs.tsx
index ad6c5087a0f..5b05b7cc5be 100644
--- a/kafka-ui-react-app/src/components/Brokers/Broker/Configs/Configs.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/Broker/Configs/Configs.tsx
@@ -34,14 +34,19 @@ const Configs: React.FC = () => {
 
   const getData = () => {
     return data
-      .filter(
-        (item) =>
-          item.name.toLocaleLowerCase().indexOf(keyword.toLocaleLowerCase()) >
-          -1
-      )
+      .filter((item) => {
+        const nameMatch = item.name
+          .toLocaleLowerCase()
+          .includes(keyword.toLocaleLowerCase());
+        return nameMatch
+          ? true
+          : item.value &&
+              item.value
+                .toLocaleLowerCase()
+                .includes(keyword.toLocaleLowerCase()); // try to match the keyword on any of the item.value elements when nameMatch fails but item.value exists
+      })
       .sort((a, b) => {
         if (a.source === b.source) return 0;
-
         return a.source === ConfigSource.DYNAMIC_BROKER_CONFIG ? -1 : 1;
       });
   };
@@ -95,7 +100,7 @@ const Configs: React.FC = () => {
       <S.SearchWrapper>
         <Search
           onChange={setKeyword}
-          placeholder="Search by Key"
+          placeholder="Search by Key or Value"
           value={keyword}
         />
       </S.SearchWrapper>


Test patch: