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