make all sub tabs routeable tabs (#1954)

* make all sub tabs routeable tabs closes: #1507, closes: #1204 * fixed tabless route
2022-01-31 08:19:44 +01:00 · 2022-01-31 08:19:44 +01:00 · b9e79b6d75
commit b9e79b6d75
parent db63cdd61c
19 changed files with 113 additions and 259 deletions
--- a/src/realm-settings/ClientProfileForm.tsx
+++ b/src/realm-settings/ClientProfileForm.tsx
@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { Fragment, useEffect, useMemo, useState } from "react";
 import {
  ActionGroup,
  AlertVariant,
@ -370,7 +370,7 @@ export default function ClientProfileForm() {
                                  (type) => type.id === executor.executor
                                )
                                .map((type) => (
-                                  <>
+                                  <Fragment key={type.id}>
                                    <HelpItem
                                      key={type.id}
                                      helpText={type.helpText}
@ -394,7 +394,7 @@ export default function ClientProfileForm() {
                                        });
                                      }}
                                    ></Button>
-                                  </>
+                                  </Fragment>
                                ))}
                            </DataListCell>,
                          ]}
--- a/src/realm-settings/NewClientPolicyForm.tsx
+++ b/src/realm-settings/NewClientPolicyForm.tsx
@ -31,7 +31,6 @@ import { useAlerts } from "../components/alert/Alerts";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { PlusCircleIcon, TrashIcon } from "@patternfly/react-icons";
-import "./RealmSettingsSection.css";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientPolicyRepresentation";
 import { toNewClientPolicyCondition } from "./routes/AddCondition";
@ -40,7 +39,9 @@ import { toEditClientPolicyCondition } from "./routes/EditCondition";
 import type { EditClientPolicyParams } from "./routes/EditClientPolicy";
 import { AddClientProfileModal } from "./AddClientProfileModal";
 import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
-import { toRealmSettings } from "./routes/RealmSettings";
+import { toClientPolicies } from "./routes/ClientPolicies";
+
+import "./RealmSettingsSection.css";

 type NewClientPolicyForm = Required<ClientPolicyRepresentation>;

@ -275,10 +276,9 @@ export default function NewClientPolicyForm() {
        });
        addAlert(t("deleteClientPolicySuccess"), AlertVariant.success);
        history.push(
-          toRealmSettings({
+          toClientPolicies({
            realm,
-            tab: "clientPolicies",
-            subTab: "policies",
+            tab: "policies",
          })
        );
      } catch (error) {
@ -321,10 +321,9 @@ export default function NewClientPolicyForm() {
            });
            addAlert(t("deleteClientSuccess"), AlertVariant.success);
            history.push(
-              toRealmSettings({
+              toClientPolicies({
                realm,
-                tab: "clientPolicies",
-                subTab: "policies",
+                tab: "policies",
              })
            );
          } catch (error) {
@ -367,10 +366,9 @@ export default function NewClientPolicyForm() {
          });
          addAlert(t("deleteClientSuccess"), AlertVariant.success);
          history.push(
-            toRealmSettings({
+            toClientPolicies({
              realm,
-              tab: "clientPolicies",
-              subTab: "policies",
+              tab: "policies",
            })
          );
        } catch (error) {
@ -507,10 +505,9 @@ export default function NewClientPolicyForm() {
                showAddConditionsAndProfilesForm || policyName
                  ? reset()
                  : history.push(
-                      toRealmSettings({
+                      toClientPolicies({
                        realm,
-                        tab: "clientPolicies",
-                        subTab: "policies",
+                        tab: "policies",
                      })
                    )
              }
--- a/src/realm-settings/RealmSettingsSection.tsx
+++ b/src/realm-settings/RealmSettingsSection.tsx
@ -1,7 +1,4 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";

 import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
@ -9,115 +6,7 @@ import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner"
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { KEY_PROVIDER_TYPE } from "../util";
-import { toRealmSettings } from "./routes/RealmSettings";
 import { RealmSettingsTabs } from "./RealmSettingsTabs";
-import { toClientPolicies } from "./routes/ClientPolicies";
-
-export const EditProviderCrumb = () => {
-  const { t } = useTranslation("realm-settings");
-  const { realm } = useRealm();
-
-  return (
-    <Breadcrumb>
-      <BreadcrumbItem
-        render={(props) => (
-          <Link {...props} to={toRealmSettings({ realm, tab: "keys" })}>
-            {t("keys")}
-          </Link>
-        )}
-      />
-      <BreadcrumbItem>{t("providers")}</BreadcrumbItem>
-      <BreadcrumbItem isActive>{t("editProvider")}</BreadcrumbItem>
-    </Breadcrumb>
-  );
-};
-
-export const ToClientPolicies = () => {
-  const { t } = useTranslation("realm-settings");
-  const { realm } = useRealm();
-
-  return (
-    <BreadcrumbItem
-      render={(props) => (
-        <Link
-          {...props}
-          to={toRealmSettings({
-            realm,
-            tab: "clientPolicies",
-            subTab: "policies",
-          })}
-        >
-          {t("clientPolicies")}
-        </Link>
-      )}
-    />
-  );
-};
-
-export const EditPolicyCrumb = () => {
-  const { t } = useTranslation("realm-settings");
-
-  return (
-    <Breadcrumb>
-      <ToClientPolicies />
-      <BreadcrumbItem isActive>{t("policyDetails")}</BreadcrumbItem>
-    </Breadcrumb>
-  );
-};
-
-export const EditProfileCrumb = () => {
-  const { t } = useTranslation("realm-settings");
-  const { realm } = useRealm();
-
-  return (
-    <Breadcrumb>
-      <BreadcrumbItem
-        render={(props) => (
-          <Link {...props} to={toClientPolicies({ realm, tab: "profiles" })}>
-            {t("clientPolicies")}
-          </Link>
-        )}
-      />
-      <BreadcrumbItem isActive>{t("clientProfile")}</BreadcrumbItem>
-    </Breadcrumb>
-  );
-};
-
-export const EditExecutorCrumb = () => {
-  const { t } = useTranslation("realm-settings");
-  const { realm } = useRealm();
-
-  return (
-    <Breadcrumb>
-      <BreadcrumbItem
-        render={(props) => (
-          <Link {...props} to={toClientPolicies({ realm, tab: "profiles" })}>
-            {t("clientPolicies")}
-          </Link>
-        )}
-      />
-      <BreadcrumbItem isActive>{t("executorDetails")}</BreadcrumbItem>
-    </Breadcrumb>
-  );
-};
-
-export const NewPolicyCrumb = () => {
-  const { t } = useTranslation("realm-settings");
-  const { realm } = useRealm();
-
-  return (
-    <Breadcrumb>
-      <BreadcrumbItem
-        render={(props) => (
-          <Link {...props} to={toClientPolicies({ realm, tab: "policy" })}>
-            {t("clientPolicies")}
-          </Link>
-        )}
-      />
-      <BreadcrumbItem isActive>{t("createPolicy")}</BreadcrumbItem>
-    </Breadcrumb>
-  );
-};

 const sortByPriority = (components: ComponentRepresentation[]) => {
  const sortedComponents = [...components].sort((a, b) => {
--- a/src/realm-settings/RealmSettingsTabs.tsx
+++ b/src/realm-settings/RealmSettingsTabs.tsx
@ -9,7 +9,6 @@ import {
  DropdownSeparator,
  PageSection,
  Tab,
-  Tabs,
  TabTitleText,
 } from "@patternfly/react-core";

@ -48,7 +47,7 @@ import ProfilesTab from "./ProfilesTab";
 import { PoliciesTab } from "./PoliciesTab";
 import { PartialImportDialog } from "./PartialImport";
 import { PartialExportDialog } from "./PartialExport";
-import { toRealmSettings } from "./routes/RealmSettings";
+import { RealmSettingsTab, toRealmSettings } from "./routes/RealmSettings";
 import { LocalizationTab } from "./LocalizationTab";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { UserRegistration } from "./UserRegistration";
@ -57,7 +56,8 @@ import environment from "../environment";
 import helpUrls from "../help-urls";
 import { UserProfileTab } from "./user-profile/UserProfileTab";
 import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";
-import { toClientPolicies } from "./routes/ClientPolicies";
+import { ClientPoliciesTab, toClientPolicies } from "./routes/ClientPolicies";
+import { KeySubTab, toKeysTab } from "./routes/KeysTab";

 type RealmSettingsHeaderProps = {
  onChange: (value: boolean) => void;
@ -188,7 +188,6 @@ export const RealmSettingsTabs = ({
  const form = useForm({ mode: "onChange", shouldUnregister: false });
  const { control, getValues, setValue, reset: resetForm } = form;

-  const [activeTab, setActiveTab] = useState(0);
  const [key, setKey] = useState(0);

  const refreshHeader = () => {
@ -219,7 +218,7 @@ export const RealmSettingsTabs = ({
      const isRealmRenamed = realmName !== realm.realm;
      if (isRealmRenamed) {
        await refreshRealms();
-        history.push(toRealmSettings({ realm: realm.realm! }));
+        history.push(toRealmSettings({ realm: realm.realm!, tab: "general" }));
      }
      addAlert(t("saveSuccess"), AlertVariant.success);
    } catch (error) {
@ -233,6 +232,26 @@ export const RealmSettingsTabs = ({
    defaultValue: "false",
  });

+  const route = (tab: RealmSettingsTab | undefined = "general") =>
+    routableTab({
+      to: toRealmSettings({ realm: realmName, tab }),
+      history,
+    });
+
+  const policiesRoute = (tab: ClientPoliciesTab) =>
+    routableTab({
+      to: toClientPolicies({
+        realm: realmName,
+        tab,
+      }),
+      history,
+    });
+
+  const keysRoute = (tab: KeySubTab) =>
+    routableTab({
+      to: toKeysTab({ realm: realmName, tab }),
+      history,
+    });
  return (
    <>
      <Controller
@ -251,14 +270,18 @@ export const RealmSettingsTabs = ({
      />
      <PageSection variant="light" className="pf-u-p-0">
        <FormProvider {...form}>
-          <RoutableTabs isBox mountOnEnter>
+          <RoutableTabs
+            isBox
+            mountOnEnter
+            defaultLocation={toRealmSettings({
+              realm: realmName,
+              tab: "general",
+            })}
+          >
            <Tab
              title={<TabTitleText>{t("general")}</TabTitleText>}
              data-testid="rs-general-tab"
-              {...routableTab({
-                to: toRealmSettings({ realm: realmName }),
-                history,
-              })}
+              {...route()}
            >
              <RealmSettingsGeneralTab
                save={save}
@ -268,10 +291,7 @@ export const RealmSettingsTabs = ({
            <Tab
              title={<TabTitleText>{t("login")}</TabTitleText>}
              data-testid="rs-login-tab"
-              {...routableTab({
-                to: toRealmSettings({ realm: realmName, tab: "login" }),
-                history,
-              })}
+              {...route("login")}
            >
              <RealmSettingsLoginTab
                refresh={refresh}
@ -282,20 +302,14 @@ export const RealmSettingsTabs = ({
            <Tab
              title={<TabTitleText>{t("email")}</TabTitleText>}
              data-testid="rs-email-tab"
-              {...routableTab({
-                to: toRealmSettings({ realm: realmName, tab: "email" }),
-                history,
-              })}
+              {...route("email")}
            >
              <RealmSettingsEmailTab realm={realm} />
            </Tab>
            <Tab
              title={<TabTitleText>{t("themes")}</TabTitleText>}
              data-testid="rs-themes-tab"
-              {...routableTab({
-                to: toRealmSettings({ realm: realmName, tab: "themes" }),
-                history,
-              })}
+              {...route("themes")}
            >
              <RealmSettingsThemesTab
                save={save}
@ -305,21 +319,17 @@ export const RealmSettingsTabs = ({
            <Tab
              title={<TabTitleText>{t("realm-settings:keys")}</TabTitleText>}
              data-testid="rs-keys-tab"
-              {...routableTab({
-                to: toRealmSettings({ realm: realmName, tab: "keys" }),
-                history,
-              })}
+              {...route("keys")}
            >
-              <Tabs
-                activeKey={activeTab}
-                onSelect={(_, key) => setActiveTab(Number(key))}
+              <RoutableTabs
+                defaultLocation={toKeysTab({ realm: realmName, tab: "list" })}
              >
                <Tab
                  id="keysList"
-                  eventKey={0}
                  data-testid="rs-keys-list-tab"
                  aria-label="keys-list-subtab"
                  title={<TabTitleText>{t("keysList")}</TabTitleText>}
+                  {...keysRoute("list")}
                >
                  <KeysListTab realmComponents={realmComponents} />
                </Tab>
@ -327,8 +337,8 @@ export const RealmSettingsTabs = ({
                  id="providers"
                  data-testid="rs-providers-tab"
                  aria-label="rs-providers-tab"
-                  eventKey={1}
                  title={<TabTitleText>{t("providers")}</TabTitleText>}
+                  {...keysRoute("providers")}
                >
                  <KeysProvidersTab
                    realmComponents={realmComponents}
@ -336,25 +346,19 @@ export const RealmSettingsTabs = ({
                    refresh={refresh}
                  />
                </Tab>
-              </Tabs>
+              </RoutableTabs>
            </Tab>
            <Tab
              title={<TabTitleText>{t("events")}</TabTitleText>}
              data-testid="rs-realm-events-tab"
-              {...routableTab({
-                to: toRealmSettings({ realm: realmName, tab: "events" }),
-                history,
-              })}
+              {...route("events")}
            >
              <EventsTab />
            </Tab>
            <Tab
              title={<TabTitleText>{t("localization")}</TabTitleText>}
              data-testid="rs-localization-tab"
-              {...routableTab({
-                to: toRealmSettings({ realm: realmName, tab: "localization" }),
-                history,
-              })}
+              {...route("localization")}
            >
              <LocalizationTab
                key={key}
@ -367,13 +371,7 @@ export const RealmSettingsTabs = ({
            <Tab
              title={<TabTitleText>{t("securityDefences")}</TabTitleText>}
              data-testid="rs-security-defenses-tab"
-              {...routableTab({
-                to: toRealmSettings({
-                  realm: realmName,
-                  tab: "securityDefences",
-                }),
-                history,
-              })}
+              {...route("securityDefences")}
            >
              <SecurityDefences save={save} reset={() => resetForm(realm)} />
            </Tab>
@ -382,26 +380,14 @@ export const RealmSettingsTabs = ({
                <TabTitleText>{t("realm-settings:sessions")}</TabTitleText>
              }
              data-testid="rs-sessions-tab"
-              {...routableTab({
-                to: toRealmSettings({
-                  realm: realmName,
-                  tab: "sessions",
-                }),
-                history,
-              })}
+              {...route("sessions")}
            >
              <RealmSettingsSessionsTab key={key} realm={realm} save={save} />
            </Tab>
            <Tab
              title={<TabTitleText>{t("realm-settings:tokens")}</TabTitleText>}
              data-testid="rs-tokens-tab"
-              {...routableTab({
-                to: toRealmSettings({
-                  realm: realmName,
-                  tab: "tokens",
-                }),
-                history,
-              })}
+              {...route("tokens")}
            >
              <RealmSettingsTokensTab
                save={save}
@ -416,13 +402,7 @@ export const RealmSettingsTabs = ({
                </TabTitleText>
              }
              data-testid="rs-clientPolicies-tab"
-              {...routableTab({
-                to: toRealmSettings({
-                  realm: realmName,
-                  tab: "clientPolicies",
-                }),
-                history,
-              })}
+              {...route("clientPolicies")}
            >
              <RoutableTabs
                mountOnEnter
@ -445,13 +425,7 @@ export const RealmSettingsTabs = ({
                      </span>
                    </TabTitleText>
                  }
-                  {...routableTab({
-                    to: toClientPolicies({
-                      realm: realmName,
-                      tab: "profiles",
-                    }),
-                    history,
-                  })}
+                  {...policiesRoute("profiles")}
                >
                  <ProfilesTab />
                </Tab>
@ -459,13 +433,7 @@ export const RealmSettingsTabs = ({
                  id="policies"
                  data-testid="rs-policies-clientPolicies-tab"
                  aria-label={t("clientPoliciesSubTab")}
-                  {...routableTab({
-                    to: toClientPolicies({
-                      realm: realmName,
-                      tab: "policies",
-                    }),
-                    history,
-                  })}
+                  {...policiesRoute("policies")}
                  title={
                    <TabTitleText>
                      {t("policies")}
@ -491,13 +459,7 @@ export const RealmSettingsTabs = ({
                    </TabTitleText>
                  }
                  data-testid="rs-user-profile-tab"
-                  {...routableTab({
-                    to: toRealmSettings({
-                      realm: realmName,
-                      tab: "userProfile",
-                    }),
-                    history,
-                  })}
+                  {...route("userProfile")}
                >
                  <UserProfileTab />
                </Tab>
@ -505,13 +467,7 @@ export const RealmSettingsTabs = ({
            <Tab
              title={<TabTitleText>{t("userRegistration")}</TabTitleText>}
              data-testid="rs-userRegistration-tab"
-              {...routableTab({
-                to: toRealmSettings({
-                  realm: realmName,
-                  tab: "userRegistration",
-                }),
-                history,
-              })}
+              {...route("userRegistration")}
            >
              <UserRegistration />
            </Tab>
--- a/src/realm-settings/messages.ts
+++ b/src/realm-settings/messages.ts
@ -273,7 +273,6 @@ export default {
    addClientProfileError: "Could not create client profile: '{{error}}'",
    createClientProfileNameHelperText:
      "The name must be unique within the realm",
-    allClientPolicies: "Client policies",
    newClientProfile: "Create client profile",
    newClientProfileName: "Client profile name",
    clientProfile: "Client profile details",
--- a/src/realm-settings/routes.ts
+++ b/src/realm-settings/routes.ts
@ -16,9 +16,11 @@ import { EditClientPolicyRoute } from "./routes/EditClientPolicy";
 import { NewClientPolicyConditionRoute } from "./routes/AddCondition";
 import { EditClientPolicyConditionRoute } from "./routes/EditCondition";
 import { UserProfileRoute } from "./routes/UserProfile";
+import { KeysRoute } from "./routes/KeysTab";

 const routes: RouteDef[] = [
  RealmSettingsRoute,
+  KeysRoute,
  AesGeneratedSettingsRoute,
  EcdsaGeneratedSettingsRoute,
  HmacGeneratedSettingsRoute,
--- a/src/realm-settings/routes/AddClientPolicy.ts
+++ b/src/realm-settings/routes/AddClientPolicy.ts
@ -2,14 +2,13 @@ import type { LocationDescriptorObject } from "history";
 import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewPolicyCrumb } from "../RealmSettingsSection";

 export type AddClientPolicyParams = { realm: string };

 export const AddClientPolicyRoute: RouteDef = {
  path: "/:realm/realm-settings/clientPolicies/policies/add-client-policy",
  component: lazy(() => import("../NewClientPolicyForm")),
-  breadcrumb: () => NewPolicyCrumb,
+  breadcrumb: (t) => t("realm-settings:createPolicy"),
  access: "manage-clients",
 };

--- a/src/realm-settings/routes/AesGeneratedSettings.ts
+++ b/src/realm-settings/routes/AesGeneratedSettings.ts
@ -2,24 +2,23 @@ import type { LocationDescriptorObject } from "history";
 import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EditProviderCrumb } from "../RealmSettingsSection";

-export type AesGeneratedSettingsParams = {
+export type KeyProviderParams = {
  realm: string;
  id: string;
 };

 export const AesGeneratedSettingsRoute: RouteDef = {
-  path: "/:realm/realm-settings/keys/:id/aes-generated/settings",
+  path: "/:realm/realm-settings/keys/providers/:id/aes-generated/settings",
  component: lazy(
    () => import("../key-providers/aes-generated/AESGeneratedForm")
  ),
-  breadcrumb: () => EditProviderCrumb,
+  breadcrumb: (t) => t("realm-settings:editProvider"),
  access: "view-realm",
 };

 export const toAesGeneratedSettings = (
-  params: AesGeneratedSettingsParams
+  params: KeyProviderParams
 ): LocationDescriptorObject => ({
  pathname: generatePath(AesGeneratedSettingsRoute.path, params),
 });
--- a/src/realm-settings/routes/ClientPolicies.ts
+++ b/src/realm-settings/routes/ClientPolicies.ts
@ -3,17 +3,17 @@ import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";

-export type UserProfileTab = "profiles" | "policies";
+export type ClientPoliciesTab = "profiles" | "policies";

 export type ClientPoliciesParams = {
  realm: string;
-  tab: string;
+  tab: ClientPoliciesTab;
 };

 export const ClientPoliciesRoute: RouteDef = {
  path: "/:realm/realm-settings/clientPolicies/:tab",
-  component: lazy(() => import("../ProfilesTab")),
-  breadcrumb: (t) => t("realm-settings:allClientPolicies"),
+  component: lazy(() => import("../RealmSettingsSection")),
+  breadcrumb: (t) => t("realm-settings:clientPolicies"),
  access: "view-realm",
 };

--- a/src/realm-settings/routes/ClientProfile.ts
+++ b/src/realm-settings/routes/ClientProfile.ts
@ -2,7 +2,6 @@ import type { LocationDescriptorObject } from "history";
 import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EditProfileCrumb } from "../RealmSettingsSection";

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

--- a/src/realm-settings/routes/EcdsaGeneratedSettings.ts
+++ b/src/realm-settings/routes/EcdsaGeneratedSettings.ts
@ -2,7 +2,6 @@ import type { LocationDescriptorObject } from "history";
 import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EditProviderCrumb } from "../RealmSettingsSection";

 export type EcdsaGeneratedSettingsParams = {
  realm: string;
@ -10,11 +9,11 @@ export type EcdsaGeneratedSettingsParams = {
 };

 export const EcdsaGeneratedSettingsRoute: RouteDef = {
-  path: "/:realm/realm-settings/keys/:id/ecdsa-generated/settings",
+  path: "/:realm/realm-settings/keys/providers/:id/ecdsa-generated/settings",
  component: lazy(
    () => import("../key-providers/ecdsa-generated/ECDSAGeneratedForm")
  ),
-  breadcrumb: () => EditProviderCrumb,
+  breadcrumb: (t) => t("realm-settings:editProvider"),
  access: "view-realm",
 };

--- a/src/realm-settings/routes/EditClientPolicy.ts
+++ b/src/realm-settings/routes/EditClientPolicy.ts
@ -2,7 +2,6 @@ import type { LocationDescriptorObject } from "history";
 import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EditPolicyCrumb } from "../RealmSettingsSection";

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

 export const toEditClientPolicy = (
--- a/src/realm-settings/routes/Executor.ts
+++ b/src/realm-settings/routes/Executor.ts
@ -2,7 +2,6 @@ import type { LocationDescriptorObject } from "history";
 import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EditExecutorCrumb } from "../RealmSettingsSection";

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

--- a/src/realm-settings/routes/HmacGeneratedSettings.ts
+++ b/src/realm-settings/routes/HmacGeneratedSettings.ts
@ -2,7 +2,6 @@ import type { LocationDescriptorObject } from "history";
 import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EditProviderCrumb } from "../RealmSettingsSection";

 export type HmacGeneratedSettingsParams = {
  realm: string;
@ -10,11 +9,11 @@ export type HmacGeneratedSettingsParams = {
 };

 export const HmacGeneratedSettingsRoute: RouteDef = {
-  path: "/:realm/realm-settings/keys/:id/hmac-generated/settings",
+  path: "/:realm/realm-settings/keys/providers/:id/hmac-generated/settings",
  component: lazy(
    () => import("../key-providers/hmac-generated/HMACGeneratedForm")
  ),
-  breadcrumb: () => EditProviderCrumb,
+  breadcrumb: (t) => t("realm-settings:editProvider"),
  access: "view-realm",
 };

--- a/src/realm-settings/routes/JavaKeystoreSettings.ts
+++ b/src/realm-settings/routes/JavaKeystoreSettings.ts
@ -2,7 +2,6 @@ import type { LocationDescriptorObject } from "history";
 import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EditProviderCrumb } from "../RealmSettingsSection";

 export type JavaKeystoreSettingsParams = {
  realm: string;
@ -10,11 +9,11 @@ export type JavaKeystoreSettingsParams = {
 };

 export const JavaKeystoreSettingsRoute: RouteDef = {
-  path: "/:realm/realm-settings/keys/:id/java-keystore/settings",
+  path: "/:realm/realm-settings/keys/providers/:id/java-keystore/settings",
  component: lazy(
    () => import("../key-providers/java-keystore/JavaKeystoreForm")
  ),
-  breadcrumb: () => EditProviderCrumb,
+  breadcrumb: (t) => t("realm-settings:editProvider"),
  access: "view-realm",
 };

--- a/src/realm-settings/routes/KeysTab.ts
+++ b/src/realm-settings/routes/KeysTab.ts
@ -0,0 +1,22 @@
+import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
+import { generatePath } from "react-router-dom";
+import type { RouteDef } from "../../route-config";
+
+export type KeySubTab = "list" | "providers";
+
+export type KeysParams = {
+  realm: string;
+  tab: KeySubTab;
+};
+
+export const KeysRoute: RouteDef = {
+  path: "/:realm/realm-settings/keys/:tab",
+  component: lazy(() => import("../RealmSettingsSection")),
+  breadcrumb: (t) => t("realm-settings:keys"),
+  access: "view-realm",
+};
+
+export const toKeysTab = (params: KeysParams): LocationDescriptorObject => ({
+  pathname: generatePath(KeysRoute.path, params),
+});
--- a/src/realm-settings/routes/RealmSettings.ts
+++ b/src/realm-settings/routes/RealmSettings.ts
@ -21,11 +21,10 @@ export type RealmSettingsTab =
 export type RealmSettingsParams = {
  realm: string;
  tab?: RealmSettingsTab;
-  subTab?: string;
 };

 export const RealmSettingsRoute: RouteDef = {
-  path: "/:realm/realm-settings/:tab?/:subTab?",
+  path: "/:realm/realm-settings/:tab?",
  component: lazy(() => import("../RealmSettingsSection")),
  breadcrumb: (t) => t("realmSettings"),
  access: "view-realm",
--- a/src/realm-settings/routes/RsaGeneratedSettings.ts
+++ b/src/realm-settings/routes/RsaGeneratedSettings.ts
@ -2,7 +2,6 @@ import type { LocationDescriptorObject } from "history";
 import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EditProviderCrumb } from "../RealmSettingsSection";

 export type RsaGeneratedSettingsParams = {
  realm: string;
@ -10,11 +9,11 @@ export type RsaGeneratedSettingsParams = {
 };

 export const RsaGeneratedSettingsRoute: RouteDef = {
-  path: "/:realm/realm-settings/keys/:id/rsa-generated/settings",
+  path: "/:realm/realm-settings/keys/providers/:id/rsa-generated/settings",
  component: lazy(
    () => import("../key-providers/rsa-generated/RSAGeneratedForm")
  ),
-  breadcrumb: () => EditProviderCrumb,
+  breadcrumb: (t) => t("realm-settings:editProvider"),
  access: "view-realm",
 };

--- a/src/realm-settings/routes/RsaSettings.ts
+++ b/src/realm-settings/routes/RsaSettings.ts
@ -2,7 +2,6 @@ import type { LocationDescriptorObject } from "history";
 import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EditProviderCrumb } from "../RealmSettingsSection";

 export type RsaSettingsParams = {
  realm: string;
@ -10,9 +9,9 @@ export type RsaSettingsParams = {
 };

 export const RsaSettingsRoute: RouteDef = {
-  path: "/:realm/realm-settings/keys/:id/rsa/settings",
+  path: "/:realm/realm-settings/keys/providers/:id/rsa/settings",
  component: lazy(() => import("../key-providers/rsa/RSAForm")),
-  breadcrumb: () => EditProviderCrumb,
+  breadcrumb: (t) => t("realm-settings:editProvider"),
  access: "view-realm",
 };