FE: Escape cluster name in API

frontend/package.json

@@ -21,7 +21,7 @@
     "fetch-mock": "^9.11.0",
     "jest": "^29.4.3",
     "jest-watch-typeahead": "^2.2.2",
-    "json-schema-faker": "^0.5.0-rcv.44",
+    "json-schema-faker": "^0.5.5",
     "jsonpath-plus": "^7.2.0",
     "lodash": "^4.17.21",
     "lossless-json": "^2.0.8",
@@ -108,5 +108,18 @@
   "engines": {
     "node": "v18.17.1",
     "pnpm": "^8.6.12"
+  },
+  "pnpm": {
+    "overrides": {
+      "postcss@<8.4.31": ">=8.4.31",
+      "axios@>=0.8.1 <1.6.0": ">=1.6.0",
+      "@adobe/css-tools@<4.3.1": ">=4.3.1",
+      "@babel/traverse@<7.23.2": ">=7.23.2",
+      "@adobe/css-tools@<4.3.2": ">=4.3.2",
+      "semver@>=7.0.0 <7.5.2": ">=7.5.2",
+      "vite@>=4.0.0 <=4.5.1": ">=4.5.2",
+      "json5@>=2.0.0 <2.2.2": ">=2.2.2",
+      "follow-redirects@<1.15.4": ">=1.15.4"
+    }
   }
 }

frontend/src/lib/hooks/useAppParams.tsx

@@ -1,7 +1,15 @@
 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 = (params: T): params is T & ClusterNameRoute => typeof params.clusterName !== "undefined"
+  if (hasClusterName(params)) {
+    params.clusterName = decodeURIComponent(params.clusterName)
+  }
+
+  return params
 }

frontend/src/lib/paths.ts

@@ -24,7 +24,7 @@ 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 };