From 5c8ce6557e040d3c6cfbc4c420b34a807fab63dc Mon Sep 17 00:00:00 2001
From: Nail Badiullin <nbadiullin@provectus.com>
Date: Thu, 30 Mar 2023 14:42:12 +0400
Subject: [PATCH] bugfix/cluster-name-encoding add missing encoding for
 requests with clustername in url

---
 .../src/components/Topics/Topic/Messages/Filters/Filters.tsx  | 4 +++-
 kafka-ui-react-app/src/lib/hooks/api/ksqlDb.tsx               | 4 +++-
 kafka-ui-react-app/src/lib/hooks/api/topicMessages.tsx        | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

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('.', ','),