diff --git a/apps/admin-ui/src/realm-settings/keys/KeysTab.tsx b/apps/admin-ui/src/realm-settings/keys/KeysTab.tsx
index 13ac9dd48f..6668ef2d78 100644
--- a/apps/admin-ui/src/realm-settings/keys/KeysTab.tsx
+++ b/apps/admin-ui/src/realm-settings/keys/KeysTab.tsx
@@ -1,5 +1,4 @@
import { useState } from "react";
-import { useHistory } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Tab, TabTitleText } from "@patternfly/react-core";
@@ -8,8 +7,8 @@ import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
import { useRealm } from "../../context/realm-context/RealmContext";
import { KEY_PROVIDER_TYPE } from "../../util";
import {
- routableTab,
RoutableTabs,
+ useRoutableTab,
} from "../../components/routable-tabs/RoutableTabs";
import { KeySubTab, toKeysTab } from "../routes/KeysTab";
import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
@@ -31,7 +30,6 @@ const sortByPriority = (components: ComponentRepresentation[]) => {
export const KeysTab = () => {
const { t } = useTranslation("realm-settings");
- const history = useHistory();
const { adminClient } = useAdminClient();
const { realm: realmName } = useRealm();
@@ -53,16 +51,16 @@ export const KeysTab = () => {
[key]
);
+ const useTab = (tab: KeySubTab) =>
+ useRoutableTab(toKeysTab({ realm: realmName, tab }));
+
+ const listTab = useTab("list");
+ const providersTab = useTab("providers");
+
if (!realmComponents) {
return ;
}
- const keysRoute = (tab: KeySubTab) =>
- routableTab({
- to: toKeysTab({ realm: realmName, tab }),
- history,
- });
-
return (
{
data-testid="rs-keys-list-tab"
aria-label="keys-list-subtab"
title={{t("keysList")}}
- {...keysRoute("list")}
+ {...listTab}
>
@@ -83,7 +81,7 @@ export const KeysTab = () => {
data-testid="rs-providers-tab"
aria-label="rs-providers-tab"
title={{t("providers")}}
- {...keysRoute("providers")}
+ {...providersTab}
>