make all sub tabs routeable tabs (#1954)

* make all sub tabs routeable tabs

closes: #1507, closes: #1204

* fixed tabless route

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>,
                           ]}

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",
+            tab: "policies",
-            subTab: "policies",
           })
         );
       } catch (error) {
@@ -321,10 +321,9 @@ export default function NewClientPolicyForm() {
             });
             addAlert(t("deleteClientSuccess"), AlertVariant.success);
             history.push(
-              toRealmSettings({
+              toClientPolicies({
                 realm,
-                tab: "clientPolicies",
+                tab: "policies",
-                subTab: "policies",
               })
             );
           } catch (error) {
@@ -367,10 +366,9 @@ export default function NewClientPolicyForm() {
           });
           addAlert(t("deleteClientSuccess"), AlertVariant.success);
           history.push(
-            toRealmSettings({
+            toClientPolicies({
               realm,
-              tab: "clientPolicies",
+              tab: "policies",
-              subTab: "policies",
             })
           );
         } catch (error) {
@@ -507,10 +505,9 @@ export default function NewClientPolicyForm() {
                 showAddConditionsAndProfilesForm || policyName
                   ? reset()
                   : history.push(
-                      toRealmSettings({
+                      toClientPolicies({
                         realm,
-                        tab: "clientPolicies",
+                        tab: "policies",
-                        subTab: "policies",
                       })
                     )
               }

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) => {

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({
+              {...route()}
-                to: toRealmSettings({ realm: realmName }),
-                history,
-              })}
             >
               <RealmSettingsGeneralTab
                 save={save}
@@ -268,10 +291,7 @@ export const RealmSettingsTabs = ({
             <Tab
               title={<TabTitleText>{t("login")}</TabTitleText>}
               data-testid="rs-login-tab"
-              {...routableTab({
+              {...route("login")}
-                to: toRealmSettings({ realm: realmName, tab: "login" }),
-                history,
-              })}
             >
               <RealmSettingsLoginTab
                 refresh={refresh}
@@ -282,20 +302,14 @@ export const RealmSettingsTabs = ({
             <Tab
               title={<TabTitleText>{t("email")}</TabTitleText>}
               data-testid="rs-email-tab"
-              {...routableTab({
+              {...route("email")}
-                to: toRealmSettings({ realm: realmName, tab: "email" }),
-                history,
-              })}
             >
               <RealmSettingsEmailTab realm={realm} />
             </Tab>
             <Tab
               title={<TabTitleText>{t("themes")}</TabTitleText>}
               data-testid="rs-themes-tab"
-              {...routableTab({
+              {...route("themes")}
-                to: toRealmSettings({ realm: realmName, tab: "themes" }),
-                history,
-              })}
             >
               <RealmSettingsThemesTab
                 save={save}
@@ -305,21 +319,17 @@ export const RealmSettingsTabs = ({
             <Tab
               title={<TabTitleText>{t("realm-settings:keys")}</TabTitleText>}
               data-testid="rs-keys-tab"
-              {...routableTab({
+              {...route("keys")}
-                to: toRealmSettings({ realm: realmName, tab: "keys" }),
-                history,
-              })}
             >
-              <Tabs
+              <RoutableTabs
-                activeKey={activeTab}
+                defaultLocation={toKeysTab({ realm: realmName, tab: "list" })}
-                onSelect={(_, key) => setActiveTab(Number(key))}
               >
                 <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({
+              {...route("events")}
-                to: toRealmSettings({ realm: realmName, tab: "events" }),
-                history,
-              })}
             >
               <EventsTab />
             </Tab>
             <Tab
               title={<TabTitleText>{t("localization")}</TabTitleText>}
               data-testid="rs-localization-tab"
-              {...routableTab({
+              {...route("localization")}
-                to: toRealmSettings({ realm: realmName, tab: "localization" }),
-                history,
-              })}
             >
               <LocalizationTab
                 key={key}
@@ -367,13 +371,7 @@ export const RealmSettingsTabs = ({
             <Tab
               title={<TabTitleText>{t("securityDefences")}</TabTitleText>}
               data-testid="rs-security-defenses-tab"
-              {...routableTab({
+              {...route("securityDefences")}
-                to: toRealmSettings({
-                  realm: realmName,
-                  tab: "securityDefences",
-                }),
-                history,
-              })}
             >
               <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({
+              {...route("sessions")}
-                to: toRealmSettings({
-                  realm: realmName,
-                  tab: "sessions",
-                }),
-                history,
-              })}
             >
               <RealmSettingsSessionsTab key={key} realm={realm} save={save} />
             </Tab>
             <Tab
               title={<TabTitleText>{t("realm-settings:tokens")}</TabTitleText>}
               data-testid="rs-tokens-tab"
-              {...routableTab({
+              {...route("tokens")}
-                to: toRealmSettings({
-                  realm: realmName,
-                  tab: "tokens",
-                }),
-                history,
-              })}
             >
               <RealmSettingsTokensTab
                 save={save}
@@ -416,13 +402,7 @@ export const RealmSettingsTabs = ({
                 </TabTitleText>
               }
               data-testid="rs-clientPolicies-tab"
-              {...routableTab({
+              {...route("clientPolicies")}
-                to: toRealmSettings({
-                  realm: realmName,
-                  tab: "clientPolicies",
-                }),
-                history,
-              })}
             >
               <RoutableTabs
                 mountOnEnter
@@ -445,13 +425,7 @@ export const RealmSettingsTabs = ({
                       </span>
                     </TabTitleText>
                   }
-                  {...routableTab({
+                  {...policiesRoute("profiles")}
-                    to: toClientPolicies({
-                      realm: realmName,
-                      tab: "profiles",
-                    }),
-                    history,
-                  })}
                 >
                   <ProfilesTab />
                 </Tab>
@@ -459,13 +433,7 @@ export const RealmSettingsTabs = ({
                   id="policies"
                   data-testid="rs-policies-clientPolicies-tab"
                   aria-label={t("clientPoliciesSubTab")}
-                  {...routableTab({
+                  {...policiesRoute("policies")}
-                    to: toClientPolicies({
-                      realm: realmName,
-                      tab: "policies",
-                    }),
-                    history,
-                  })}
                   title={
                     <TabTitleText>
                       {t("policies")}
@@ -491,13 +459,7 @@ export const RealmSettingsTabs = ({
                     </TabTitleText>
                   }
                   data-testid="rs-user-profile-tab"
-                  {...routableTab({
+                  {...route("userProfile")}
-                    to: toRealmSettings({
-                      realm: realmName,
-                      tab: "userProfile",
-                    }),
-                    history,
-                  })}
                 >
                   <UserProfileTab />
                 </Tab>
@@ -505,13 +467,7 @@ export const RealmSettingsTabs = ({
             <Tab
               title={<TabTitleText>{t("userRegistration")}</TabTitleText>}
               data-testid="rs-userRegistration-tab"
-              {...routableTab({
+              {...route("userRegistration")}
-                to: toRealmSettings({
-                  realm: realmName,
-                  tab: "userRegistration",
-                }),
-                history,
-              })}
             >
               <UserRegistration />
             </Tab>

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",

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,

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",
 };
 

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),
 });

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")),
+  component: lazy(() => import("../RealmSettingsSection")),
-  breadcrumb: (t) => t("realm-settings:allClientPolicies"),
+  breadcrumb: (t) => t("realm-settings:clientPolicies"),
   access: "view-realm",
 };
 

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"],
 };
 

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",
 };
 

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 = (

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"],
 };
 

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",
 };
 

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",
 };
 

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

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",

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",
 };
 

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",
 };