Make all routes lower case (#2863)

cypress/e2e/realm_settings_events_test.spec.ts

@@ -102,7 +102,7 @@ describe("Realm settings events tab tests", () => {
     cy.findByTestId("rs-events-tab").click();
     cy.wait("@load");
     realmSettingsPage
-      .toggleSwitch(realmSettingsPage.enableEvents)
+      .toggleSwitch(realmSettingsPage.enableEvents, false)
       .save(realmSettingsPage.eventsUserSave);
     masthead.checkNotificationMessage("Successfully saved configuration");
     realmSettingsPage.clearEvents("user");
@@ -148,14 +148,14 @@ describe("Realm settings events tab tests", () => {
 
     cy.findByTestId("option-ecdsa-generated").click();
     realmSettingsPage.enterConsoleDisplayName("test_ecdsa-generated");
-    realmSettingsPage.toggleSwitch("active");
+    realmSettingsPage.toggleSwitch("active", false);
     realmSettingsPage.addProvider();
 
     realmSettingsPage.toggleAddProviderDropdown();
 
     cy.findByTestId("option-hmac-generated").click();
     realmSettingsPage.enterConsoleDisplayName("test_hmac-generated");
-    realmSettingsPage.toggleSwitch("enabled");
+    realmSettingsPage.toggleSwitch("enabled", false);
     realmSettingsPage.addProvider();
 
     realmSettingsPage.toggleAddProviderDropdown();

cypress/e2e/realm_settings_general_tab_test.spec.ts

@@ -29,10 +29,16 @@ describe("Realm settings general tab tests", () => {
 
   it("Test all general tab switches", () => {
     sidebarPage.goToRealmSettings();
-    realmSettingsPage.toggleSwitch(realmSettingsPage.managedAccessSwitch);
+    realmSettingsPage.toggleSwitch(
+      realmSettingsPage.managedAccessSwitch,
+      false
+    );
     realmSettingsPage.save(realmSettingsPage.generalSaveBtn);
     masthead.checkNotificationMessage("Realm successfully updated", true);
-    realmSettingsPage.toggleSwitch(realmSettingsPage.managedAccessSwitch);
+    realmSettingsPage.toggleSwitch(
+      realmSettingsPage.managedAccessSwitch,
+      false
+    );
     realmSettingsPage.save(realmSettingsPage.generalSaveBtn);
     masthead.checkNotificationMessage("Realm successfully updated", true);
 

cypress/e2e/realm_settings_tabs_test.spec.ts

@@ -30,7 +30,10 @@ describe("Realm settings tabs tests", () => {
   it("shows the 'user profile' tab if enabled", () => {
     sidebarPage.goToRealmSettings();
     cy.findByTestId(realmSettingsPage.userProfileTab).should("not.exist");
-    realmSettingsPage.toggleSwitch(realmSettingsPage.profileEnabledSwitch);
+    realmSettingsPage.toggleSwitch(
+      realmSettingsPage.profileEnabledSwitch,
+      false
+    );
     realmSettingsPage.save(realmSettingsPage.generalSaveBtn);
     masthead.checkNotificationMessage("Realm successfully updated");
     cy.findByTestId(realmSettingsPage.userProfileTab).should("exist");
@@ -47,8 +50,6 @@ describe("Realm settings tabs tests", () => {
 
     realmSettingsPage.toggleSwitch(realmSettingsPage.loginWithEmailSwitch);
 
-    realmSettingsPage.toggleSwitch(realmSettingsPage.duplicateEmailsSwitch);
-
     // Check values
     cy.findByTestId(realmSettingsPage.userRegSwitch).should("have.value", "on");
     cy.findByTestId(realmSettingsPage.forgotPwdSwitch).should(
@@ -87,7 +88,9 @@ describe("Realm settings tabs tests", () => {
     realmSettingsPage.toggleCheck(realmSettingsPage.enableSslCheck);
     realmSettingsPage.toggleCheck(realmSettingsPage.enableStartTlsCheck);
     realmSettingsPage.fillHostField("localhost");
+    cy.intercept(`/admin/realms/${realmName}/users/*`).as("load");
     cy.findByTestId(realmSettingsPage.testConnectionButton).click();
+    cy.wait("@load");
 
     realmSettingsPage.fillEmailField(
       "example" + (Math.random() + 1).toString(36).substring(7) + "@example.com"

cypress/support/pages/admin_console/manage/authentication/OTPPolicies.ts

@@ -1,9 +1,6 @@
 export default class OTPPolicies {
   goToTab() {
-    cy.get("#pf-tab-policies-policies")
+    cy.findAllByTestId("policies").click().get("#pf-tab-2-otpPolicy").click();
-      .click()
-      .get("#pf-tab-2-otpPolicy")
-      .click();
     return this;
   }
 

cypress/support/pages/admin_console/manage/authentication/PasswordPolicies.ts

@@ -1,6 +1,6 @@
 export default class PasswordPolicies {
   goToTab() {
-    cy.get("#pf-tab-policies-policies").click();
+    cy.findAllByTestId("policies").click();
     return this;
   }
 

cypress/support/pages/admin_console/manage/authentication/RequiredActions.ts

@@ -10,7 +10,7 @@ export default class RequiredActions {
   }
 
   goToTab() {
-    cy.get("#pf-tab-requiredActions-requiredActions").click();
+    cy.findByTestId("requiredActions").click();
   }
 
   enableAction(name: string) {

cypress/support/pages/admin_console/manage/authentication/WebAuthnPolicies.ts

@@ -4,15 +4,12 @@ export default class WebAuthnPolicies {
     return this;
   }
   goToTab() {
-    cy.get("#pf-tab-policies-policies")
+    cy.findByTestId("policies").click().get("#pf-tab-3-webauthnPolicy").click();
-      .click()
-      .get("#pf-tab-3-webauthnPolicy")
-      .click();
     return this;
   }
 
   goToPasswordlessTab() {
-    cy.get("#pf-tab-policies-policies")
+    cy.findByTestId("policies")
       .click()
       .get("#pf-tab-4-webauthnPasswordlessPolicy")
       .click();

cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts

@@ -188,11 +188,11 @@ export default class RealmSettingsPage extends CommonPage {
   private clientPolicyDrpDwn = '[data-testid="action-dropdown"] button';
   private deleteclientPolicyDrpDwn = "deleteClientPolicyDropdown";
   private clientProfileOne =
-    'a[href*="realm-settings/clientPolicies/Test/edit-profile"]';
+    'a[href*="realm-settings/client-policies/Test/edit-profile"]';
   private clientProfileTwo =
-    'a[href*="realm-settings/clientPolicies/Edit/edit-profile"]';
+    'a[href*="realm-settings/client-policies/Edit/edit-profile"]';
   private clientPolicy =
-    'a[href*="realm-settings/clientPolicies/Test/edit-policy"]';
+    'a[href*="realm-settings/client-policies/Test/edit-policy"]';
   private reloadBtn = "reloadProfile";
   private addExecutor = "addExecutor";
   private addExecutorDrpDwn = ".pf-c-select__toggle";
@@ -381,8 +381,12 @@ export default class RealmSettingsPage extends CommonPage {
     cy.findByTestId(this.disabledKeysOption).click();
   }
 
-  toggleSwitch(switchName: string) {
+  toggleSwitch(switchName: string, waitFor: boolean | undefined = true) {
+    cy.intercept("/admin/realms/*").as("load");
     cy.findByTestId(switchName).click({ force: true });
+    if (waitFor) {
+      cy.wait("@load");
+    }
 
     return this;
   }
@@ -516,7 +520,7 @@ export default class RealmSettingsPage extends CommonPage {
     );
 
     cy.findByTestId(this.offlineSessionIdleInput).clear().type("7");
-    this.toggleSwitch(this.offlineSessionMaxSwitch);
+    this.toggleSwitch(this.offlineSessionMaxSwitch, false);
 
     cy.findByTestId(this.loginTimeoutInput).clear().type("9");
     this.changeTimeUnit(
@@ -533,7 +537,7 @@ export default class RealmSettingsPage extends CommonPage {
   }
 
   populateTokensPage() {
-    this.toggleSwitch(this.revokeRefreshTokenSwitch);
+    this.toggleSwitch(this.revokeRefreshTokenSwitch, false);
 
     cy.findByTestId(this.accessTokenLifespanInput)
       .focus()
@@ -840,7 +844,7 @@ export default class RealmSettingsPage extends CommonPage {
       `/admin/realms/${this.realmName}/client-policies/profiles*`
     ).as("profilesFetch");
     cy.get(
-      'a[href*="realm-settings/clientPolicies/' + name + '/edit-profile"]'
+      'a[href*="realm-settings/client-policies/' + name + '/edit-profile"]'
     ).click();
     cy.wait("@profilesFetch");
     return this;

src/authentication/AuthenticationSection.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { sortBy } from "lodash-es";
 import {
@@ -16,7 +16,6 @@ import {
 import type AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationFlowRepresentation";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
-import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useRealm } from "../context/realm-context/RealmContext";
@@ -32,6 +31,11 @@ import { Policies } from "./policies/Policies";
 import helpUrls from "../help-urls";
 import { BindFlowDialog } from "./BindFlowDialog";
 import { UsedBy } from "./components/UsedBy";
+import {
+  routableTab,
+  RoutableTabs,
+} from "../components/routable-tabs/RoutableTabs";
+import { AuthenticationTab, toAuthentication } from "./routes/Authentication";
 
 import "./authentication-section.css";
 
@@ -54,6 +58,7 @@ export default function AuthenticationSection() {
   const { t } = useTranslation("authentication");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
+  const history = useHistory();
   const [key, setKey] = useState(0);
   const refresh = () => setKey(key + 1);
   const { addAlert, addError } = useAlerts();
@@ -162,6 +167,12 @@ export default function AuthenticationSection() {
     </>
   );
 
+  const route = (tab: AuthenticationTab) =>
+    routableTab({
+      to: toAuthentication({ realm, tab }),
+      history,
+    });
+
   return (
     <>
       <DeleteConfirm />
@@ -192,10 +203,14 @@ export default function AuthenticationSection() {
         divider={false}
       />
       <PageSection variant="light" className="pf-u-p-0">
-        <KeycloakTabs isBox>
+        <RoutableTabs
+          isBox
+          defaultLocation={toAuthentication({ realm, tab: "flows" })}
+        >
           <Tab
-            eventKey="flows"
+            data-testid="flows"
             title={<TabTitleText>{t("flows")}</TabTitleText>}
+            {...route("flows")}
           >
             <KeycloakDataTable
               key={key}
@@ -275,20 +290,20 @@ export default function AuthenticationSection() {
             />
           </Tab>
           <Tab
-            id="requiredActions"
+            data-testid="requiredActions"
-            eventKey="requiredActions"
             title={<TabTitleText>{t("requiredActions")}</TabTitleText>}
+            {...route("required-actions")}
           >
             <RequiredActions />
           </Tab>
           <Tab
-            id="policies"
+            data-testid="policies"
-            eventKey="policies"
             title={<TabTitleText>{t("policies")}</TabTitleText>}
+            {...route("policies")}
           >
             <Policies />
           </Tab>
-        </KeycloakTabs>
+        </RoutableTabs>
       </PageSection>
     </>
   );

src/authentication/routes/Authentication.ts

@@ -3,7 +3,9 @@ import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
-export type AuthenticationParams = { realm: string; tab?: string };
+export type AuthenticationTab = "flows" | "required-actions" | "policies";
+
+export type AuthenticationParams = { realm: string; tab?: AuthenticationTab };
 
 export const AuthenticationRoute: RouteDef = {
   path: "/:realm/authentication/:tab?",

src/clients/ClientsSection.tsx

@@ -13,11 +13,10 @@ import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/
 import type { ClientQuery } from "@keycloak/keycloak-admin-client/lib/resources/clients";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { formattedLinkTableCell } from "../components/external-link/FormattedLink";
-import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
 import {
   Action,
   KeycloakDataTable,
@@ -33,6 +32,11 @@ import { toImportClient } from "./routes/ImportClient";
 import { isRealmClient, getProtocolName } from "./utils";
 import helpUrls from "../help-urls";
 import { useAccess } from "../context/access/Access";
+import {
+  routableTab,
+  RoutableTabs,
+} from "../components/routable-tabs/RoutableTabs";
+import { ClientsTab, toClients } from "./routes/Clients";
 
 export default function ClientsSection() {
   const { t } = useTranslation("clients");
@@ -41,6 +45,7 @@ export default function ClientsSection() {
   const adminClient = useAdminClient();
   const { realm } = useRealm();
   const baseUrl = getBaseUrl(adminClient);
+  const history = useHistory();
 
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
@@ -127,6 +132,12 @@ export default function ClientsSection() {
     );
   };
 
+  const route = (tab: ClientsTab) =>
+    routableTab({
+      to: toClients({ realm, tab }),
+      history,
+    });
+
   return (
     <>
       <ViewHeader
@@ -136,11 +147,18 @@ export default function ClientsSection() {
         divider={false}
       />
       <PageSection variant="light" className="pf-u-p-0">
-        <KeycloakTabs isBox>
+        <RoutableTabs
+          mountOnEnter
+          isBox
+          defaultLocation={toClients({
+            realm,
+            tab: "list",
+          })}
+        >
           <Tab
             data-testid="list"
-            eventKey="list"
             title={<TabTitleText>{t("clientsList")}</TabTitleText>}
+            {...route("list")}
           >
             <DeleteConfirm />
             <KeycloakDataTable
@@ -220,12 +238,12 @@ export default function ClientsSection() {
           </Tab>
           <Tab
             data-testid="initialAccessToken"
-            eventKey="initialAccessToken"
             title={<TabTitleText>{t("initialAccessToken")}</TabTitleText>}
+            {...route("initial-access-token")}
           >
             <InitialAccessTokenList />
           </Tab>
-        </KeycloakTabs>
+        </RoutableTabs>
       </PageSection>
     </>
   );

src/clients/initial-access/CreateInitialAccessToken.tsx

@@ -57,7 +57,7 @@ export default function CreateInitialAccessToken() {
           toggleDialog={() => {
             setToken("");
             addAlert(t("tokenSaveSuccess"), AlertVariant.success);
-            history.push(toClients({ realm, tab: "initialAccessToken" }));
+            history.push(toClients({ realm, tab: "initial-access-token" }));
           }}
         />
       )}
@@ -147,7 +147,7 @@ export default function CreateInitialAccessToken() {
               component={(props) => (
                 <Link
                   {...props}
-                  to={toClients({ realm, tab: "initialAccessToken" })}
+                  to={toClients({ realm, tab: "initial-access-token" })}
                 />
               )}
             >

src/clients/routes/Clients.ts

@@ -3,7 +3,7 @@ import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
-export type ClientsTab = "list" | "initialAccessToken";
+export type ClientsTab = "list" | "initial-access-token";
 
 export type ClientsParams = {
   realm: string;

src/events/EventsSection.tsx

@@ -31,8 +31,7 @@ import moment from "moment";
 import React, { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
-import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { ViewHeader } from "../components/view-header/ViewHeader";
@@ -42,8 +41,14 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { toRealmSettings } from "../realm-settings/routes/RealmSettings";
 import { toUser } from "../user/routes/User";
 import { AdminEvents } from "./AdminEvents";
-import "./events.css";
 import helpUrls from "../help-urls";
+import {
+  routableTab,
+  RoutableTabs,
+} from "../components/routable-tabs/RoutableTabs";
+import { EventsTab, toEvents } from "./routes/Events";
+
+import "./events.css";
 
 type UserEventSearchForm = {
   client: string;
@@ -411,6 +416,13 @@ export default function EventsSection() {
     );
   };
 
+  const history = useHistory();
+  const route = (tab: EventsTab) =>
+    routableTab({
+      to: toEvents({ realm, tab }),
+      history,
+    });
+
   return (
     <>
       <ViewHeader
@@ -429,10 +441,13 @@ export default function EventsSection() {
         divider={false}
       />
       <PageSection variant="light" className="pf-u-p-0">
-        <KeycloakTabs isBox>
+        <RoutableTabs
+          isBox
+          defaultLocation={toEvents({ realm, tab: "user-events" })}
+        >
           <Tab
-            eventKey="userEvents"
             title={<TabTitleText>{t("userEvents")}</TabTitleText>}
+            {...route("user-events")}
           >
             <div className="keycloak__events_table">
               <KeycloakDataTable
@@ -486,13 +501,13 @@ export default function EventsSection() {
             </div>
           </Tab>
           <Tab
-            eventKey="adminEvents"
             title={<TabTitleText>{t("adminEvents")}</TabTitleText>}
             data-testid="admin-events-tab"
+            {...route("admin-events")}
           >
             <AdminEvents />
           </Tab>
-        </KeycloakTabs>
+        </RoutableTabs>
       </PageSection>
     </>
   );

src/events/routes/Events.ts

@@ -3,7 +3,7 @@ import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
-export type EventsTab = "userEvents" | "adminEvents";
+export type EventsTab = "user-events" | "admin-events";
 
 export type EventsParams = {
   realm: string;

src/realm-roles/RolesList.tsx

@@ -78,7 +78,7 @@ export const RolesList = ({
     ) : (
       <>
         <Link
-          to={toRealmSettings({ realm: realmName, tab: "userRegistration" })}
+          to={toRealmSettings({ realm: realmName, tab: "user-registration" })}
         >
           {role.name}{" "}
         </Link>

src/realm-settings/RealmSettingsTabs.tsx

@@ -327,7 +327,7 @@ export const RealmSettingsTabs = ({
           <Tab
             title={<TabTitleText>{t("securityDefences")}</TabTitleText>}
             data-testid="rs-security-defenses-tab"
-            {...route("securityDefences")}
+            {...route("security-defenses")}
           >
             <SecurityDefenses realm={realm} save={save} />
           </Tab>
@@ -350,7 +350,7 @@ export const RealmSettingsTabs = ({
               <TabTitleText>{t("realm-settings:clientPolicies")}</TabTitleText>
             }
             data-testid="rs-clientPolicies-tab"
-            {...route("clientPolicies")}
+            {...route("client-policies")}
           >
             <RoutableTabs
               mountOnEnter
@@ -405,7 +405,7 @@ export const RealmSettingsTabs = ({
                   <TabTitleText>{t("realm-settings:userProfile")}</TabTitleText>
                 }
                 data-testid="rs-user-profile-tab"
-                {...route("userProfile")}
+                {...route("user-profile")}
               >
                 <UserProfileTab />
               </Tab>
@@ -413,7 +413,7 @@ export const RealmSettingsTabs = ({
           <Tab
             title={<TabTitleText>{t("userRegistration")}</TabTitleText>}
             data-testid="rs-userRegistration-tab"
-            {...route("userRegistration")}
+            {...route("user-registration")}
           >
             <UserRegistration />
           </Tab>

src/realm-settings/routes/AddAttribute.ts

@@ -8,7 +8,7 @@ export type AddAttributeParams = {
 };
 
 export const AddAttributeRoute: RouteDef = {
-  path: "/:realm/realm-settings/userProfile/attributes/add-attribute",
+  path: "/:realm/realm-settings/user-profile/attributes/add-attribute",
   component: lazy(() => import("../NewAttributeSettings")),
   breadcrumb: (t) => t("realm-settings:createAttribute"),
   access: "manage-realm",

src/realm-settings/routes/AddClientPolicy.ts

@@ -6,7 +6,7 @@ import type { RouteDef } from "../../route-config";
 export type AddClientPolicyParams = { realm: string };
 
 export const AddClientPolicyRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/policies/add-client-policy",
+  path: "/:realm/realm-settings/client-policies/policies/add-client-policy",
   component: lazy(() => import("../NewClientPolicyForm")),
   breadcrumb: (t) => t("realm-settings:createPolicy"),
   access: "manage-clients",

src/realm-settings/routes/AddClientProfile.ts

@@ -9,7 +9,7 @@ export type AddClientProfileParams = {
 };
 
 export const AddClientProfileRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/:tab/add-profile",
+  path: "/:realm/realm-settings/client-policies/:tab/add-profile",
   component: lazy(() => import("../ClientProfileForm")),
   breadcrumb: (t) => t("realm-settings:newClientProfile"),
   access: "manage-realm",

src/realm-settings/routes/AddCondition.ts

@@ -9,7 +9,7 @@ export type NewClientPolicyConditionParams = {
 };
 
 export const NewClientPolicyConditionRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/:policyName?/edit-policy/create-condition",
+  path: "/:realm/realm-settings/client-policies/:policyName?/edit-policy/create-condition",
   component: lazy(() => import("../NewClientPolicyCondition")),
   breadcrumb: (t) => t("realm-settings:addCondition"),
   access: "manage-clients",

src/realm-settings/routes/AddExecutor.ts

@@ -9,7 +9,7 @@ export type AddExecutorParams = {
 };
 
 export const AddExecutorRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/:profileName/add-executor",
+  path: "/:realm/realm-settings/client-policies/:profileName/add-executor",
   component: lazy(() => import("../ExecutorForm")),
   breadcrumb: (t) => t("realm-settings:addExecutor"),
   access: "manage-realm",

src/realm-settings/routes/Attribute.ts

@@ -9,7 +9,7 @@ export type AttributeParams = {
 };
 
 export const AttributeRoute: RouteDef = {
-  path: "/:realm/realm-settings/userProfile/attributes/:attributeName/edit-attribute",
+  path: "/:realm/realm-settings/user-profile/attributes/:attributeName/edit-attribute",
   component: lazy(() => import("../NewAttributeSettings")),
   breadcrumb: (t) => t("realm-settings:editAttribute"),
   access: "manage-realm",

src/realm-settings/routes/ClientPolicies.ts

@@ -11,7 +11,7 @@ export type ClientPoliciesParams = {
 };
 
 export const ClientPoliciesRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/:tab",
+  path: "/:realm/realm-settings/client-policies/:tab",
   component: lazy(() => import("../RealmSettingsSection")),
   breadcrumb: (t) => t("realm-settings:clientPolicies"),
   access: "view-realm",

src/realm-settings/routes/ClientProfile.ts

@@ -9,7 +9,7 @@ export type ClientProfileParams = {
 };
 
 export const ClientProfileRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/:profileName/edit-profile",
+  path: "/:realm/realm-settings/client-policies/:profileName/edit-profile",
   component: lazy(() => import("../ClientProfileForm")),
   breadcrumb: (t) => t("realm-settings:clientProfile"),
   access: ["view-realm", "view-users"],

src/realm-settings/routes/EditAttributesGroup.ts

@@ -9,7 +9,7 @@ export type EditAttributesGroupParams = {
 };
 
 export const EditAttributesGroupRoute: RouteDef = {
-  path: "/:realm/realm-settings/userProfile/attributesGroup/edit/:name",
+  path: "/:realm/realm-settings/user-profile/attributesGroup/edit/:name",
   component: lazy(() => import("../user-profile/AttributesGroupDetails")),
   breadcrumb: (t) => t("attributes-group:editGroupText"),
   access: "view-realm",

src/realm-settings/routes/EditClientPolicy.ts

@@ -9,7 +9,7 @@ export type EditClientPolicyParams = {
 };
 
 export const EditClientPolicyRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/:policyName/edit-policy",
+  path: "/:realm/realm-settings/client-policies/:policyName/edit-policy",
   component: lazy(() => import("../NewClientPolicyForm")),
   access: "manage-realm",
   breadcrumb: (t) => t("realm-settings:policyDetails"),

src/realm-settings/routes/EditCondition.ts

@@ -10,7 +10,7 @@ export type EditClientPolicyConditionParams = {
 };
 
 export const EditClientPolicyConditionRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/:policyName?/edit-policy/:conditionName/edit-condition",
+  path: "/:realm/realm-settings/client-policies/:policyName?/edit-policy/:conditionName/edit-condition",
   component: lazy(() => import("../NewClientPolicyCondition")),
   breadcrumb: (t) => t("realm-settings:editCondition"),
   access: "manage-clients",

src/realm-settings/routes/Executor.ts

@@ -10,7 +10,7 @@ export type ExecutorParams = {
 };
 
 export const ExecutorRoute: RouteDef = {
-  path: "/:realm/realm-settings/clientPolicies/:profileName/edit-profile/:executorName",
+  path: "/:realm/realm-settings/client-policies/:profileName/edit-profile/:executorName",
   component: lazy(() => import("../ExecutorForm")),
   breadcrumb: (t) => t("realm-settings:executorDetails"),
   access: ["manage-realm"],

src/realm-settings/routes/NewAttributesGroup.ts

@@ -8,7 +8,7 @@ export type NewAttributesGroupParams = {
 };
 
 export const NewAttributesGroupRoute: RouteDef = {
-  path: "/:realm/realm-settings/userProfile/attributesGroup/new",
+  path: "/:realm/realm-settings/user-profile/attributesGroup/new",
   component: lazy(() => import("../user-profile/AttributesGroupDetails")),
   breadcrumb: (t) => t("attributes-group:createGroupText"),
   access: "view-realm",

src/realm-settings/routes/RealmSettings.ts

@@ -11,12 +11,12 @@ export type RealmSettingsTab =
   | "keys"
   | "events"
   | "localization"
-  | "securityDefences"
+  | "security-defenses"
   | "sessions"
   | "tokens"
-  | "clientPolicies"
+  | "client-policies"
-  | "userProfile"
+  | "user-profile"
-  | "userRegistration";
+  | "user-registration";
 
 export type RealmSettingsParams = {
   realm: string;

src/realm-settings/routes/UserProfile.ts

@@ -3,7 +3,7 @@ import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
-export type UserProfileTab = "attributes" | "attributesGroup" | "jsonEditor";
+export type UserProfileTab = "attributes" | "attributes-group" | "json-editor";
 
 export type UserProfileParams = {
   realm: string;
@@ -11,7 +11,7 @@ export type UserProfileParams = {
 };
 
 export const UserProfileRoute: RouteDef = {
-  path: "/:realm/realm-settings/userProfile/:tab",
+  path: "/:realm/realm-settings/user-profile/:tab",
   component: lazy(() => import("../RealmSettingsSection")),
   breadcrumb: (t) => t("realm-settings:userProfile"),
   access: "view-realm",

src/realm-settings/user-profile/AttributesGroupForm.tsx

@@ -99,7 +99,7 @@ export default function AttributesGroupForm() {
     const success = await save({ ...config, groups });
 
     if (success) {
-      history.push(toUserProfile({ realm, tab: "attributesGroup" }));
+      history.push(toUserProfile({ realm, tab: "attributes-group" }));
     }
   };
 
@@ -193,7 +193,7 @@ export default function AttributesGroupForm() {
               component={(props) => (
                 <Link
                   {...props}
-                  to={toUserProfile({ realm, tab: "attributesGroup" })}
+                  to={toUserProfile({ realm, tab: "attributes-group" })}
                 />
               )}
             >

src/realm-settings/user-profile/UserProfileTab.tsx

@@ -38,7 +38,7 @@ export const UserProfileTab = () => {
           title={<TabTitleText>{t("attributesGroup")}</TabTitleText>}
           data-testid="attributesGroupTab"
           {...routableTab({
-            to: toUserProfile({ realm, tab: "attributesGroup" }),
+            to: toUserProfile({ realm, tab: "attributes-group" }),
             history,
           })}
         >
@@ -48,7 +48,7 @@ export const UserProfileTab = () => {
           title={<TabTitleText>{t("jsonEditor")}</TabTitleText>}
           data-testid="jsonEditorTab"
           {...routableTab({
-            to: toUserProfile({ realm, tab: "jsonEditor" }),
+            to: toUserProfile({ realm, tab: "json-editor" }),
             history,
           })}
         >