Repository: provectus/kafka-ui
Issue: Smart filters multiple conditions not working
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

<!--

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

-->

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->
For Smart Filter, it will work for only one condition, like `value.eventData.dutyDepartment == "VQA"`
but when their comes multiple condition, second, third and other condition wouldn't work properly like `value.eventData.dutyDepartment == "VQA"  && value.eventData.moSapPlant =="123456"`

The second part `value.eventData.moSapPlant` will be ignored, the result will only match dutyDepartement condition

**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.
-->
Docker 

**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. -->
Steps to reproduce the behavior:

1. 

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->

**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->
one condition
![image](https://user-images.githubusercontent.com/16937091/182339375-b438bb9f-7154-40e1-a230-e4c4e33868ea.png)
result
![image](https://user-images.githubusercontent.com/16937091/182339521-98939bba-b4a1-4109-86a1-df82b43c3b0f.png)

two condition
![image](https://user-images.githubusercontent.com/16937091/182339714-f72cd911-a3d1-4cc4-8ea5-d27840701db9.png)
 result
![image](https://user-images.githubusercontent.com/16937091/182339788-72367bc2-f727-4924-b680-2353e7489dff.png)


change condition step
![image](https://user-images.githubusercontent.com/16937091/182340026-3e1685aa-6f34-476e-91a7-741710eaa46a.png)
 result
![image](https://user-images.githubusercontent.com/16937091/182340139-e2884c31-f661-49ca-b1a3-7a9e99092d16.png)
The result only will match on first condition


Issue comments:
Hello there as93717913! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
1. Fix character escaping for the filter query
2. New line symbols should be present as well
Is there a work around for this at this moment?
> Is there a work around for this at this moment?

unfortunately, no. But we're planning to fix this one soon.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
index 7acf873d6d9..018a8ef1fff 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
@@ -223,7 +223,7 @@ const Filters: React.FC<FiltersProps> = ({
 
       const newProps = omitBy(props, (v) => v === undefined || v === '');
       const qs = Object.keys(newProps)
-        .map((key) => `${key}=${newProps[key]}`)
+        .map((key) => `${key}=${encodeURIComponent(newProps[key] as string)}`)
         .join('&');
 
       navigate({


Test patch: