From 1fbdb62334735767a29a3357a102dd0d11b90ccc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hynek=20Mlna=C5=99=C3=ADk?=
 <hmlnarik@users.noreply.github.com>
Date: Thu, 4 Apr 2024 09:50:33 +0200
Subject: [PATCH] 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  | 16 ++++++++++++++--
 js/apps/admin-ui/src/PageNav.tsx                 |  3 ++-
 .../src/context/realm-context/RealmContext.tsx   |  2 +-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/js/apps/admin-ui/cypress/e2e/realm_test.spec.ts b/js/apps/admin-ui/cypress/e2e/realm_test.spec.ts
index 169a70198c3..91084fc06fe 100644
--- a/js/apps/admin-ui/cypress/e2e/realm_test.spec.ts
+++ b/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");
+  });
 });
diff --git a/js/apps/admin-ui/src/PageNav.tsx b/js/apps/admin-ui/src/PageNav.tsx
index eb169fd251d..b00df3e24bc 100644
--- a/js/apps/admin-ui/src/PageNav.tsx
+++ b/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" : ""}`
         }
diff --git a/js/apps/admin-ui/src/context/realm-context/RealmContext.tsx b/js/apps/admin-ui/src/context/realm-context/RealmContext.tsx
index 91378910354..08ff295cb4d 100644
--- a/js/apps/admin-ui/src/context/realm-context/RealmContext.tsx
+++ b/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],
   );