FE: Fix HTTP 400 for clusters with special symbols (#3591)

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;

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()}`,
         {

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