Repository: provectus/kafka-ui
Issue: HTTP 400 for clusters with special symbols
Labels: type/bug
good first issue
scope/frontend
status/accepted

      I have a single node Kafka (kafka_2.13-3.3.2.tgz) cluster running on a Linux server (no internet).
It is a default setup using KRaft and the only config I have set is the /config/kraft/server.properties: `advertised.listeners=PLAINTEXT://192.168.20.109:9092`, where 192.168.20.109 is the LAN IP.

I am using UI for Apache Kafka v0.5.0 (027d9b4) running locally on my PC on port 8080, directly from Java without using docker.
application-local.yml as below:

```
kafka:
  clusters:
    - name: "[UAT] Kafka"
      bootstrapServers: 192.168.20.109:9092
```
Only port 9092-9093 firewall rules opened between my PC and the server. 

I created a test topic using the UI, and produced some test message.
![image](https://user-images.githubusercontent.com/26813698/215379510-96b7e6d4-a3a7-4546-853a-44ca73ab9318.png)

However, when I try to view the message using the UI, it still shows no messages found and when I check the API call, the response is 400 Bad Request.
![image](https://user-images.githubusercontent.com/26813698/215379531-de061a55-d7ae-447e-b703-c38bbcdee8d8.png)

May I get some help on what the problem could be?
Thanks.

_Originally posted by @Zeeeeta in https://github.com/provectus/kafka-ui/discussions/3277_
    

Issue comments:

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 ec62f266ed4..f9fa3401fc0 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
@@ -323,7 +323,9 @@ const Filters: React.FC<FiltersProps> = ({
   // eslint-disable-next-line consistent-return
   React.useEffect(() => {
     if (location.search?.length !== 0) {
-      const url = `${BASE_PARAMS.basePath}/api/clusters/${clusterName}/topics/${topicName}/messages${location.search}`;
+      const url = `${BASE_PARAMS.basePath}/api/clusters/${encodeURIComponent(
+        clusterName
+      )}/topics/${topicName}/messages${location.search}`;
       const sse = new EventSource(url);
 
       source.current = sse;
diff --git a/kafka-ui-react-app/src/lib/hooks/api/ksqlDb.tsx b/kafka-ui-react-app/src/lib/hooks/api/ksqlDb.tsx
index 6685c6223f6..366141e82a4 100644
--- a/kafka-ui-react-app/src/lib/hooks/api/ksqlDb.tsx
+++ b/kafka-ui-react-app/src/lib/hooks/api/ksqlDb.tsx
@@ -90,7 +90,9 @@ export const useKsqlkDbSSE = ({ clusterName, pipeId }: UseKsqlkDbSSEProps) => {
 
   React.useEffect(() => {
     const fetchData = async () => {
-      const url = `${BASE_PARAMS.basePath}/api/clusters/${clusterName}/ksql/response`;
+      const url = `${BASE_PARAMS.basePath}/api/clusters/${encodeURIComponent(
+        clusterName
+      )}/ksql/response`;
       await fetchEventSource(
         `${url}?${new URLSearchParams({ pipeId: pipeId || '' }).toString()}`,
         {
diff --git a/kafka-ui-react-app/src/lib/hooks/api/topicMessages.tsx b/kafka-ui-react-app/src/lib/hooks/api/topicMessages.tsx
index 73a5753ba22..886b2979c0f 100644
--- a/kafka-ui-react-app/src/lib/hooks/api/topicMessages.tsx
+++ b/kafka-ui-react-app/src/lib/hooks/api/topicMessages.tsx
@@ -51,7 +51,9 @@ export const useTopicMessages = ({
   React.useEffect(() => {
     const fetchData = async () => {
       setIsFetching(true);
-      const url = `${BASE_PARAMS.basePath}/api/clusters/${clusterName}/topics/${topicName}/messages`;
+      const url = `${BASE_PARAMS.basePath}/api/clusters/${encodeURIComponent(
+        clusterName
+      )}/topics/${topicName}/messages`;
       const requestParams = new URLSearchParams({
         limit,
         seekTo: seekTo.replaceAll('-', '::').replaceAll('.', ','),


Test patch: