Fix navigation with realms with special chars (#28349)

Fixes: #16345

Signed-off-by: Hynek Mlnarik <hmlnarik@redhat.com>

js/apps/admin-ui/cypress/e2e/realm_test.spec.ts

@@ -7,6 +7,7 @@ import adminClient from "../support/util/AdminClient";
 import { keycloakBefore } from "../support/util/keycloak_hooks";
 import RealmSettings from "../support/pages/admin-ui/configure/realm_settings/RealmSettings";
 import ModalUtils from "../support/util/ModalUtils";
+import CommonPage from "../support/pages/CommonPage";
 
 const masthead = new Masthead();
 const loginPage = new LoginPage();
@@ -14,11 +15,13 @@ const sidebarPage = new SidebarPage();
 const createRealmPage = new CreateRealmPage();
 const realmSettings = new RealmSettings();
 const modalUtils = new ModalUtils();
+const commonPage = new CommonPage();
 
 const testRealmName = "Test-realm-" + uuid();
 const newRealmName = "New-Test-realm-" + uuid();
 const editedRealmName = "Edited-Test-realm-" + uuid();
 const testDisabledName = "Test-Disabled";
+const specialCharsName = "%22-" + uuid();
 
 describe("Realm tests", () => {
   beforeEach(() => {
@@ -28,8 +31,8 @@ describe("Realm tests", () => {
 
   after(() =>
     Promise.all(
-      [testRealmName, newRealmName, editedRealmName].map((realm) =>
-        adminClient.deleteRealm(realm),
+      [testRealmName, newRealmName, editedRealmName, specialCharsName].map(
+        (realm) => adminClient.deleteRealm(realm),
       ),
     ),
   );
@@ -117,4 +120,13 @@ describe("Realm tests", () => {
       .getCurrentRealm()
       .should("eq", testRealmName);
   });
+
+  it("should create realm with special characters", () => {
+    sidebarPage.goToCreateRealm();
+    createRealmPage.fillRealmName(specialCharsName).createRealm();
+
+    sidebarPage.goToRealm(specialCharsName);
+    sidebarPage.goToClients();
+    commonPage.tableUtils().checkRowItemExists("account");
+  });
 });

js/apps/admin-ui/src/PageNav.tsx

@@ -25,6 +25,7 @@ const LeftNav = ({ title, path, id }: LeftNavProps) => {
   const { t } = useTranslation();
   const { hasAccess } = useAccess();
   const { realm } = useRealm();
+  const encodedRealm = encodeURIComponent(realm);
   const route = routes.find(
     (route) =>
       route.path.replace(/\/:.+?(\?|(?:(?!\/).)*|$)/g, "") === (id || path),
@@ -44,7 +45,7 @@ const LeftNav = ({ title, path, id }: LeftNavProps) => {
     <li>
       <NavLink
         id={"nav-item" + path.replace("/", "-")}
-        to={`/${realm}${path}`}
+        to={`/${encodedRealm}${path}`}
         className={({ isActive }) =>
           `pf-c-nav__link${isActive ? " pf-m-current" : ""}`
         }

js/apps/admin-ui/src/context/realm-context/RealmContext.tsx

@@ -23,7 +23,7 @@ export const RealmContextProvider = ({ children }: PropsWithChildren) => {
 
   const realmParam = routeMatch?.params.realm;
   const realm = useMemo(
-    () => realmParam ?? environment.loginRealm,
+    () => decodeURIComponent(realmParam ?? environment.loginRealm),
     [realmParam],
   );