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