diff --git a/apps/admin-ui/src/authentication/AuthenticationSection.tsx b/apps/admin-ui/src/authentication/AuthenticationSection.tsx index 3ec48af7f1..8f050f0552 100644 --- a/apps/admin-ui/src/authentication/AuthenticationSection.tsx +++ b/apps/admin-ui/src/authentication/AuthenticationSection.tsx @@ -1,5 +1,4 @@ import { useState } from "react"; -import { useHistory } from "react-router-dom"; import { Link } from "react-router-dom-v5-compat"; import { Trans, useTranslation } from "react-i18next"; import { sortBy } from "lodash-es"; @@ -32,8 +31,8 @@ import helpUrls from "../help-urls"; import { BindFlowDialog } from "./BindFlowDialog"; import { UsedBy } from "./components/UsedBy"; import { - routableTab, RoutableTabs, + useRoutableTab, } from "../components/routable-tabs/RoutableTabs"; import { AuthenticationTab, toAuthentication } from "./routes/Authentication"; import { addTrailingSlash } from "../util"; @@ -61,7 +60,6 @@ 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(); @@ -92,6 +90,13 @@ export default function AuthenticationSection() { ); }; + const useTab = (tab: AuthenticationTab) => + useRoutableTab(toAuthentication({ realm, tab })); + + const flowsTab = useTab("flows"); + const requiredActionsTab = useTab("required-actions"); + const policiesTab = useTab("policies"); + const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({ titleKey: "authentication:deleteConfirmFlow", children: ( @@ -141,12 +146,6 @@ export default function AuthenticationSection() { ); - const route = (tab: AuthenticationTab) => - routableTab({ - to: toAuthentication({ realm, tab }), - history, - }); - return ( <> @@ -184,7 +183,7 @@ export default function AuthenticationSection() { {t("flows")}} - {...route("flows")} + {...flowsTab} > {t("requiredActions")}} - {...route("required-actions")} + {...requiredActionsTab} > {t("policies")}} - {...route("policies")} + {...policiesTab} >