FE: Escape cluster name in API (#113)

Co-authored-by: Roman Zabaluev <[email protected]>

frontend/src/lib/hooks/useAppParams.tsx

@@ -1,7 +1,19 @@
 import { Params, useParams } from 'react-router-dom';
+import { ClusterNameRoute } from 'lib/paths';
 
 export default function useAppParams<
   T extends { [K in keyof Params]?: string }
 >() {
-  return useParams<T>() as T;
+  const params = useParams<T>() as T;
+
+  const hasClusterName = (
+    checkingParams: T
+  ): checkingParams is T & ClusterNameRoute =>
+    typeof checkingParams.clusterName !== 'undefined';
+
+  if (hasClusterName(params)) {
+    params.clusterName = decodeURIComponent(params.clusterName);
+  }
+
+  return params;
 }

frontend/src/lib/paths.ts

@@ -24,7 +24,12 @@ export const accessErrorPage = '/403';
 
 export const clusterPath = (
   clusterName: ClusterName = RouteParams.clusterName
-) => `/ui/clusters/${clusterName}`;
+) =>
+  `/ui/clusters/${
+    clusterName === RouteParams.clusterName
+      ? clusterName
+      : encodeURIComponent(clusterName)
+  }`;
 
 export type ClusterNameRoute = { clusterName: ClusterName };